Microsoft 365 Community Adaptive Cards, 8 Apr 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Take a lap around the Company Communicator app

Description

During this 20-minute citizen developer focused demo, Mykhailo Sydorchuk acquaints viewers with Company Communicator - a custom Microsoft Teams app that enables communicators to create and send messages intended for multiple teams or large numbers of employees over chat. This app heavily uses Adaptive Cards. Two parts to this solution – the Bot, the primary employee user interface and the Authoring dashboard used by communication managers. New features are highlighted. Microsoft Internal version shown, not all updates immediately available to customers at this time. This demo is taken from the Adaptive Cards community call - April 2021, recorded on April 8, 2021.

Demo Presenter - Mykhailo Sydorchuk (Microsoft)

Supporting materials:
• Article - New Microsoft Teams app helps Microsoft communicate with employees at scale | https://www.microsoft.com/itshowcase/blog/new-microsoft-teams-app-helps-microsoft-communicate-with-employees-at-scale/
• Repo - Company Communicator App Template | https://github.com/OfficeDev/microsoft-teams-apps-company-communicator

Learn more:
• Twitter https://twitter.com/microsoft365dev
• YouTube https://aka.ms/M365DevYouTube
• Blogs https://aka.ms/M365DevBlog

A

Hi everyone, my name, is mikhail assalachuk. I am senior program manager in microsoft, digital employee experiences, team productivity, gosh, that's a mouthful and, as matt mentioned, the company communicator app, which I'm going to uh walk through today and do the demo it's all about the adaptive parts. So uh actually this uh solution, it was built by the product group and it's provided to all of you through the github. So there is a set of teams, app templates and company. Communicator is just one of those templates. So uh what does the solution do so?

A

The main goal of the company communicator is to enable communicators to create and send messages intended for multiple teams for large audiences inside of their organizations and to send those messages in teams through chat or channels and to reach employees right where they collaborate. uh Many in teams, the original template was had to be a little bit adjusted to be used inside of microsoft and uh the main changes that we made were including supports of multiple apps and bots.

A

So the original template only uh could handle a single austrian dashboard and a single communicator bot and inside of microsoft. Obviously we have multiple communication teams and also multiple divisions which have a need to have their own way to communicate with their users, and because of that, we have extended the solution to or utilize multiple multiple communication channels.

A

Also, our communications team. uh They not always have a need to send uh to a dl or a list of team members so because of that they sometimes are sending to some custom list of recipients. So because of that, we've also extended the solution to uh take a custom csv file as an input and then process all those users as recipients.

A

Another change was full support for custom adaptive cards, so the initial template it just had a couple of fields which the communicators fill in and based on that data. The adaptive card is created, but that was not sufficient because I I'll show you during the demo later, but we had a need to send more customized uh messages and uh full support of adaptive cards uh could cover that because, as you know, adaptive cards can be uh whatever you want them to do.

A

Another change is direct image embedding so uh by default, uh the solution supported uh image embedding using the url. However, uh sometimes communication teams have a need to secure the image, so the image is not exposed publicly and uh we have uh figured a way to uh directly embed uh the card, uh the image into the card and then send it to all recipients.

A

So the image is not available by uh publicly successful url and the.

B

A

But not least, change is uh programmatic message sending via api. So uh right now uh we've been. We are thinking about company communicator as truly as a platform and uh right now the solution can be extended and how other apps or services tapping into it and sending messages through the centralized platforms that we control, that we have ordered for and utilizes technology to send messages in teams to target recipients.

A

So this is the high level overview of the app.

A

So what we've done recently was a pilot program, so initially our communications team, obviously we're looking for uh different ways to communicate to employees and teams is the most obvious way because that's where employees stay doing their daily work and in order not to break that flow of work, we communicators communication teams wanted to reach out to employees in teams, and we've also done some initial case study with members of our elite program elite.

A

Is the internal uh microsoft dog footing program where users are testing new features, and uh we did it in your original round and uh majority of users have shown an interest to uh receiving communication in teams uh versus just email. So uh we went ahead. We've started the project, implemented the changes and then we've started like the full-blown pilot program with elite, and we had 600 members enrolled in the program.

A

uh We sent them multiple messages and you can see the example of those messages on the screenshot, so the messages were around teams, best practices, just elite program, overview company, communicator details and so on. So overall of the performance of the solution was that we've been able to send 600 messages under one minute and uh 100 success rate for all of the users who had the bot uh enabled or like pushed them.

A

So what did we learn from uh from the elite program? uh Overall, uh the users were uh very satisfied with receiving communication in teams and for majority of the users uh getting like reading the adaptive card contents and uh getting the message can wait in that in the card uh were very intuitive and easy.

A

uh 97 of respondents were satisfied with receiving communications via chat, and also I've been really curious to hear if the communication through teams is disruptive or not disruptive for the users and uh the majority of responders, like 67, uh would want to receive communication in chat at least two to three times a week, so uh the users. So what? But so the conclusion that you made the users are uh very open to uh receive communication in teams and adopt this like new ways of working and shifting of their workloads fully into teams.

A

So with that I'll just go to the demo and I'm going to share my screen and walk you through the solution.

A

The app itself consists of two parts uh we have uh the bot based on uh microsoft, bot framework and the bot is the interface for the end users, and then users are receiving the communications from the bot, and you can see like one communication on the screen as an example.

A

The second part of the app is the authoring dashboard and it is used by uh communication managers to craft and send messages to their target audiences. So I'm down environment right now and I'll just create a new message and show you how that initial screen looks. So uh we have a couple of fields and the fields are pretty intuitive. So we have title we have.

A

You can upload an embed image, summary author and we can also add the button to the card and uh on the right side we can see the card previous of the communication teams. They can like see exactly how the comments would look uh based on what they specify here. So I already have some message drafted so uh just an example for hr communications.

A

uh We have employee town hall today, so it's a really good use case for uh hr team to remind all users that there is an important event in the company and the event is coming today note about the image. So uh we can embed the image uh using the direct url to the image and also we can upload the image and uh by image upload. uh Actually what we are doing. We are a base64 encoding, the image and then storing the image in uh in the bot database.

A

So uh then uh we can use this uh encoded string and embed it directly into the card, and by doing so the image does not go outside of the bottom environment and all the users have uh would receive the image directly in their card.

A

In terms of the button. We cannot specify the url uh and then button title and this button will be displayed to all recipients. Then, second, after we have composed the message we need to define, uh we will be receiving the message and we have multiple options here.

A

So we can send the message to general channel of the specific teams uh we can send in chat to specific people, meaning members of the team, so over here, I'm just going to send it to you uh all members of hr users, math team, other options are sending to android 65 group distribution group security group, and then we can also upload the custom cc file and process all recipients.

A

uh Last option is sending in chat to everyone who are in scope of the spot. So I'm just going to go ahead and send it to you. um My hr users team, save it as draft after it saved this wrapped. We can also uh preview the card uh in the general channel of the team just go here, and uh this is my card. So looks good, uh yup.

A

Okay, we are ready to send it uh going back to the author and dashboard and uh triggering the send uh final confirmation screen, making sure that we are sending it to the right recipients and no no errors on the card uh once the message is sent uh on the back end uh at your data function, processes the message and just triggers the bad message to all target recipients in scope- and I just got a message from a company communicator app- and uh here is my message.

A

So uh the app is very straightforward and like the target audience is a communication manager. So uh it's very intuitive and easy to use.

A

Different use case is uh composing a fully custom adaptive card so uh also we can uh just embed the card payload and send the card that we have composed in adaptive cards designer. So I'm just gonna go and use my favorite sample.

A

Thanks for providing that matt uh just loves this designer we've been using it a lot, and I can tell you how many times have you been using this specific card? So I'm just copying the card payload going back to uh to the bot, placing it here and boom, exactly as it was in the designer. So it's the beauty of adaptive card that uh we can reuse them in this solution as well.

A

So just going to send this message to the general channel of our uh phosphorus team, seven is draft and.

A

Sending again one additional verification turn to send, oh and by the way after the message was processed, uh we can also download the report and see like how much time it would take to send the message, uh failure and success rates, and we can also expert detailed results which would include uh all users who had been processed and their respective status of the communication and going back to uh the general channel of our hr authors team.

A

So this is uh the card which was sent to the bot uh just a quick touch on the technology behind the scenes. So uh it's available again in the in the uh github template, but uh in order to compose this, like default adaptive card, we're just using adaptive cards library and uh based on the information that uh the users had input like title image, link, summary author and so on, we are just uh creating an adaptive card and uh adaptive card creator.

A

uh It's again like we are utilizing the uh card, library and uh you're just taking the values provided by by the communications team and composing the card from them. So it's very straightforward and very easy to extend uh if you need to do so.

A

So uh that's pretty much! It I have for today, uh please let me know uh in the chat, if you have any questions and uh I'll try to answer those. Thank you. Awesome.

C

Very cool yeah there, the chat was lively, I will say tons of discussion. I and I think you actually in the year in my discussion. I think we knew ahead of time. This was going to come up a lot of talk about base64, encoded images.

C

um Do you want to speak to that real, quick and and I'll? Also, while you're formulating your answer to that um there? Normally our chat doesn't have that much back and forth. So it's easy for me to scroll back and see which question.

C

So if anyone uh did not get a question answered, why don't you feel free to go ahead and put your hand up right now, and then we can talk it over on on the audio and if we miss your chat or someone hasn't helped, you just go ahead and ping it and and we'll we'll get through I'll. Try I'm trying to scroll through it live, but it's also a little tricky with all the stuff going on so yeah mikaylo. Do you want to explain a little bit about the base64 encoding.

A

Yeah absolutely so, uh the image is just encoded into basics, the first string and stored in the database and then embedded into the card. But obviously we are subject to the adaptive card, size limitations. So we every time we need to make sure that uh the encoded image is still uh up to that size limit and because of that uh we have noticed uh somewhat drop in the image quality. But unfortunately uh we have to just leave with that.

A

Because I mean if, uh if a communications team doesn't want the drop in the image mode, then they can embed the image using the url. But if the image has to be private, then there is. Unfortunately there is no other way to embed it rather than encode and reduce the quality.

C

And now we've talked about so there was a chat, oh just fee, I'm going to put you on the spot here. Real quick because I did see some chat about is, is the max 25 kilobytes or some people were saying. Maybe it had gone up? I know we were looking at increasing the payload size. Has anything changed on that front?.

B

So I think nikita replied in the chat, so 28 uh is the max kilobyte for the message size within teams uh and I think the adaptive card payload is limited to 16. So uh we are definitely working on expanding that in the future, yeah. um So we're taking that up as a work item in kyoto. So hopefully we can address it by q3.

C

Okay, cool and it nicotine did, you want to add anything or is that that cover it.

B

Or just we got it.

C

D

um I just should add that if you, if your photos, stick overflow, that's something that comes up really really often yeah people get weird errors because their cards are not turned into teams and then it turns out it's a size limit, so it happens really.

C

Really often, I saw someone suggesting a potential warning in the designer itself that if we do exceed the payload limit, I think that's a really good suggestion. It's come up a handful of times, but I I think it is one of those ones that I would start to argue for. We do have a pretty large backlog with our uh limited team, but that one uh I I do agree that it does generate a lot of questions and and stuff and and just confusion which is the worst part, because you don't really know why it failed.

C

um The quick question I had too on that for for really the room and feel free to add in the chat and also mikailo, um we've talked about adding authenticated image, support to uh say, sharepoint urls, basically, things that are within your same tenant so that we could technically use um the same auth that you're logged into with teams. Would that meet a lot of the needs? Would it mean half of the image needs? I mean a lot of these images. Are they coming from an internal sharepoint?

C

That's within your same tenant, or are they sometimes out of completely different places? At which point you know, base64 might be the way to go. I'm curious how much we should prioritize uh how easily we can reference technically secured images, but they're at least still within the same tenant. So if people want to just kind of comment on chat, that would be nice for us to have some context on.

E

And matt, just one point I want to make for uh for the designer aspect: is we? The designer is also open source. So if, if folks do feel like hey, I feel like. I have some expertise here and I could jump in and help. We do welcome, pull requests and people jumping in to help out because it isn't open towards project. So if you do want to help out and get some contributions in there, please feel free to reach out to us and we can start uh helping. You join and start up on that yeah.

C

Great great point: absolutely that'd, be a nice one to to get your feet wet in the adaptive cards. Library, cool! Well, thank you! So much uh mikailo uh I I know you said you had a kind of hard stop at 9 30. So uh people get your questions in like right now, if you can um but also reach out to us afterwards or if you have any other thoughts or feedback and uh we can route them appropriately, but.

A

Thank you so much for sharing. There is a couple more questions in the chat I'd like to address those so.

C

There's a question.

A

From hilton, if that's a new version uh coming to the github or that particular company implementation, so uh the version I've demoed is the internal microsoft implementation of of company communicator and uh right now these changes are not available to uh to choose the customers, but we are exploring the ways to either include them into the github template or maybe like provide company communicator as a part of the platform, uh that's still being discussed, so no solid answer there, but yeah that the very demo was just our internal microsoft, implementation and uh another.

A

Another note so like, as I was just doing this demo, I've got a new message from the our internal company, communicator pilot, so uh I'll just share on my screen really quickly and show you how of that looks internally. So the other difference that uh this is uh no reply bot and uh we cannot respond to the bot. But this is the message. I've just got about a new feature in in teams, so there are, like other other messages. I've been getting. So this is how it looks in in the production, environment.

C

Okay, awesome: well thanks everybody for for the chat and uh and mikayla for uh for sharing.

B