Microsoft 365 Community Microsoft Teams, 23 Aug 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building a conversational tab in a Microsoft Teams app that captures external event conversations

Description

In this 13-minute developer focused demo, Eoin O’Brien points out how in a Microsoft Teams channel tab, one may create a conversation about an external event like an incident ticket including conversation’s context. Implementation - get Service URL from bot install activity, create a conversation using a Bot ConnectorClient, send conversationId to tab to be used in conversational tabs, and open conversation in Tab side panel. CodeTour walk through of presenter’s proof-of-concept sample. Supports Omnichannel queries, job application and incident ticket management conversations. This PnP Community demo is taken from the Microsoft 365 & Power Platform Development Community call recorded on July 21, 2022.

Demo Presenter
• Eoin O'Brien (Microsoft)

Supporting materials
• Sample - Proactive Tab Conversations | https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/bot-tab-conversations/csharp
• Documentation - Create conversational tabs | https://docs.microsoft.com/microsoftteams/platform/tabs/how-to/conversational-tabs
• Documentation - Messages in bot conversations | https://docs.microsoft.com/microsoftteams/platform/bots/how-to/conversations/conversation-messages
• Documentation - ConversationsExtensions.CreateConversationAsync Method | https://docs.microsoft.com/dotnet/api/microsoft.bot.connector.conversationsextensions.createconversationasync

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

A

Good morning, folks afternoon evening, wherever you are in the world, uh thank you very much for having me my name is owen. Yes, this is quite a mouthful of a title, so apologies for that.

A

Yes, I wanted to showcase a scenario in microsoft teams, development that we've been working on that while it's possible today. It's not something, that's like immediately obvious from the documentation and samples that exist, but before I run into an example, let me quickly summarize some key building blocks that we're using so conversational tabs is something that exists in teams for a while and allows you to create a conversation around a sub entity or tab inside of a microsoft teams.

A

Application in your channel. So in the left hand, side here, you'll see an image where you can have a conversation about the content on the in the tab. Essentially- and this is done using the team's javascript sdk and it's it's a simple way to add a collaboration to your app it. But the one kind of issue is it's kind of like a fire and forget where, like the isv or the app, might create the conversation.

A

But then the conversation happens without the isv being aware of it or even like getting much to say inside of it, but one of the key things it does allow you to do is it allows you to pass in a conversation id, and this is used to help um reopen a conversation in the future.

A

If somebody comes back to the entity and some entity in the future- and you want to talk about the conversation again- oh sorry, one thing I've got to mention this conversation actually takes place inside of the channel and so any any in that channel's posts. You can see this conversation also, and so it allows for like a communication to be specific to a certain entity but available to the entire group, and this sorry, this conversation idea, we're storing, is useful in our pc that we'll see in a second.

A

The other thing I want to talk about is bots and teams, and if you're aware of any sort of teams, apps, I'm sure you're, aware of bots and they're very useful for creating and responding to conversations and activity, handlers, sending texts, cards and images, emojis, etc.

A

But again it kind of focused on responding to events rather than creating them, and that's perfectly fine. It's very useful for a lot of scenarios, but one thing we wanted to handle in that sort of concept is actually creating conversations without having a part being invoked directly.

A

So bots and teams are built into bot framework and you can create conversations directly using the connected client. You are the server behind the bot as association bot framework, and so our proof concept.

A

We wanted to create a proof of some concept that allows you to have a conversation about an event that happened externally, and then you can have context about that inside the tab.

A

So an example of this that might be implemented is like an army channel support where you've got a support channel and each um support inquiry ends up in a specific channel and teams.

A

You can open up that inquiry, have a chat about the inquiry and, in the left hand side you can have more contacts provided- or maybe you do this with job applications where each application, each candidate's application can be visible as a conversation, and you can view the cv, left hand side and talk about talk with your managers and recruiters in the chat in the right-hand side or even instant management, and where you have a new conversation for each incident, and you can see details and graphs about the incident in the main tab, but I recommend using teams as an instant manager.

A

So from the building block studies discussing earlier, you can get the service url that we need to create a new conversation from the bot install activity. You can create a conversation using a backline. You can send a conversation id to a tab that is created from that conversation that you just created backline and to be using the conversational tabs, and then you can open a conversation in the side panel. So these all things are separate kind of ideas.

A

I suppose, but you can build them to get into a great example inside microsoft teams, so let me kind of quickly showcase this, and hopefully this all works out. So this is a sample teams. Channel I've got going and you can see, we've got a few different channels, we've got a general channel, and that includes information about uh our sales tickets.

A

We've got finance challenges and financings and again I t team that contains information about mit tickets, and so you can see here, we've got a few increased outcry that I've created this morning just to showcase the sample, but before I jump into that, let me quickly kind of create a new um ticket, and you can imagine this. This is kind of like a stand-in for an external service, so in the real world this might be a it help desk or some other instance, but here we're kind of like, instead of creating a whole new service.

A

This is our external service in inverted quotes. So let's say mike is going to create a new question he's going to say: I have lost my charger on my laptop.

A

Can you help, and so this is coming from an external server somewhere and it's going to end up in our channel and you'll see here now? In the bottom side, we've created a brand new conversation using the bot framework to the mic's inquiry. We can open this detail directly. This will bring us into our tab.

A

Where you can see information about the inquiry. You can open up the conversation left-hand side where you can see more information about it, and I can reply and I tag someone and say: hey adele.

A

Did you mind shipping like a charger.

A

And this happens inside your teams and if I go back to the posts directly, you can see that I can't my message has showed up already it's very useful. You can also go via the actual tab directly and in the tab itself. We've got a list of all the tickets that are currently available and you can open up different tickets and view information about it and reply to the conversation directly and this one hasn't been responded yet. So let me get lyn on this.

A

A

A

I wanted to very, and so one thing about conversation tabs is that you can only create them inside of a channel, so a conversation tab cannot be created in a group chat or a personal chat, a one-on-one chat, um but what you can do is um have a personal app that references conversational tabs directly. So in this scenario, we've got a conversational tab where our support technician is able to see all of the instance from every department that they are a member of- and we use this to do this.

A

We use microsoft graph, so we're querying microsoft graph to get the users teams and the channels they're a member of, and we then use that information to filter out the support panels that exist to show that user, just like here, the tickets that are available to you.

A

So this is very useful if you need to have a technician across multiple teams. That's working with these things, and so somebody can open up the technician can open up a specific inquiry open up. The conversation have a chat.

A

And reply directly and that conversation will end up back in the team's channel where this post was originally posted.

A

So you can see that ended up here here. So that's very useful for me, in kind of a single place of working for the itm, so we'll run through the code in a second, but just as a quick summary again of what just happened. It's a simple workflow proof concept.

A

So on the left, you can see that support request comes in for the customer that ends up hitting an external endpoint and or the external endpoint controller, where we create a new conversation for the request and that conversation id is stored with the along with the request in a database inside your team's client, then you can view the conversation in a channel.

A

You can open up the sub entity or the specific request in a in the tab view by deep linking to it and in the tab view a query is a database for the request, details and the conversation id so that can be opened up in the tab sidebar.

A

This code is available today on the microsoft team sample repository, but before that I'm going to run through quickly and the stuff that the little pieces that kind of might be of most of interest to how this all works.

A

To do this, I'm going to actually use a thing called coder, which is it's available in the um repository that is shared and it's very useful way of kind of jumping through the code. Simply so when we first installed the box. This is using the on team members added async method. We store information like the service url.

A

This is used so that we know how to send a send a create conversation request to the bot in the future, and we started the language team's team id and, as you said later on, when we have to create a new conversation, we say: what's the team id okay, here's a service url for that for that team, I'm going to skip a few things just to make sure I'm not going over on time, but essentially we use we're storing everything at the moment in our sample using an in-memory database, but in a production environment.

A

This would obviously be that you need to have a more reliable data store.

A

And let's get that.

A

All right so, when we creating a new support department or something similar, we alter our ideas to make sure the user who is trying to create this um department is a member of the team that they are creating the department in. So we do a quick authorization make a quick call to microsoft, graph to ensure that the user is a member of our team.

A

Yeah, no listen! Sorry.

A

So when a user creates a new inquiry here, we hit the external controller endpoint uh in here we pass. We can't navigate down through the code, but essentially we we create a new sub entity. This new inquiry so eventually uh gets information about the support department. Here that support department includes information like the service url that we stored initially, when the bot is first created. Our first installed apologies, including the teams channel, the edit attempt entity.

A

We get the bot id from our settings and then we've created an adaptive card that includes all the information, including the customer's inquiry details.

A

This conversation and parameters are then sent and we try and create the conversation directly and when a conversation, if that conversation is created correctly, we update our state a database store with the customer and queries and the conversation id.

A

And yeah and so.

A

On cold culture,.

A

Sorry, I've kind of talked a bit too jump to go on a few on a few points here.

A

A

In the front end in our tab directly, we make a call, so if you need to actually load an inquiry or sub entity into a tab, we make a call to our back end where we query the support this took inquiry based on its sub nt id. As part of this query, we get a conversation, id returned and that ends up calling this open conversation function.

A

This is calling the microsoft teams sdk and it's passing in the conversation id that has been returned from the api, and this is how we actually can show the same conversation multiple times and there's a few things along in this setup. That is also important to have where you need to have callback handlers for when somebody closes the conversation tab directly using the x button and that actually opens conversation tab.

A

So you can have it all entirely in one big flow from start to finish, where you create an external conversation, as I create a certain inquiry that leads to a conversation be created, that leads to a inquiry being visible. The conversation created inside of a tab where you can reply and you can have a lot of communication inside microsoft teams there.

A

Thank you very much. If you have any questions, feel free to join the chat. I'll, take a look at him and thank you david for your time.

B

Awesome awesome, stuff and and in bonus points for the code, tour a lot of fans here for that there's some questions in the uh chat, so just in the interest of time I'll, let you kind of cover those uh there in the chat, but thank you for the fantastic demo today.