Here you can find the transcript of Episode #131 of PiaSys TechBites.

Welcome back to PiaSys Tech Bites. This week, I want to talk with you about how you can build messaging extensions for Microsoft Teams using the yo teams generator. First of all, the messaging extension is something that you can plug in the UI of the Microsoft Teams client in order to provide additional functionalities for users when they are composing a message, or when they are providing feedback to a message, or when they want to search for something or execute a command using the command bar of the Microsoft Teams client.

The messaging extension is based on the BOT framework. It’s like as a BOT and it is basically a web service that Microsoft Teams will invoke, which will get a JSON requests and which replies back to teams with the JSON payload response. You can create messaging extensions which can be actions or search extensions whether they are in the compose UI or in the search command bar of Microsoft Teams.

Just to give you an idea, let me show you in practice in the UI where a messaging extension can be. We can have a messaging extension in the command bar so when users search or execute a command. We can have a messaging extension inside the composition area of a message so while writing a message, a user can invoke a messaging extension.

We can have a messaging extension in the set of comments that we have just below the composition area of a message, or we can use a messaging extension in the feedback area by clicking on the three dots and having access to a set of additional functionalities, including our own custom messaging extensions. Like always, let me move to the demo environment and let me show you how to create a messaging extension in practice with yo teams.

First of all, let’s see the UI of a messaging extension in action. Here, I am in the post of the general channel of this team and I can create a new conversation. Right here, you can see I have a customer icon with a PiaSys messaging extension. By clicking on it, I can see a task module, like we saw last week in the previous episode. From this task module, I can select a video from my YouTube channel, for example, the last one about the task modules. I can simply set the video inside the content of my message and I can send a message to the channel. Pretty simple and straightforward.

As you can see, the content of the message that I inserted is actually an actionable message where I have an action, which I can click to open the video content and see the video. How did I create this messaging extension? First of all, using yo teams, I scaffolded a new project. Here you can see the main properties and configuration settings that I provided to yo teams. For example, I choose to create a messaging extension command. I used the version 1.8 of the manifest just for the sake of using the latest one. I configured to use a new BOT. I should provide a GUID, which is the unique ID of the application, backing the BOT on the Microsoft Azure platform.

I decided to use that and to create an action-based messaging extension and then I can provide all of the other information needed to scaffold the solution, which of course, I already created. In my Microsoft Azure, I already have a BOT configured and provisioned so that I can use this bot to create the backend of my messaging extension and it is configured to talk with Microsoft Teams as one of the configured channels. As well as in the settings, I have the application ID that you should provide to the Yeoman generator for Teams together in the manage section, the client secret that I created in order to secure the access to this BOT from my yo teams generated solution.

If I switch to Visual Studio code, here we have a solution generated by yo teams. The key part of the solution is the implementation of the extension, the message extension type, which will be created by yo teams. In there, in the onFetchTask, I can simply create the definition of a task module that will be used to provide to the user the UI to select the video to insert. As you can see here, I’m creating a new task module with a title, which will target the URL of an HTML file, action.html that I have in the web folder of my SRC app in the solutions scaffolded by yo teams.

There, I simply create an instance of a React component via the PiaSys Tech Bite video message extension action, which is this one. In this React component, in the render method, using the fluent UI, I create a Flex component, and in the Flex item, I simply include a DropDown with the list of videos. When the list of videos is loaded, it is loaded from a JSON file that I have in my solution, where for the sake of simplicity, I simply have four videos defined.

In the React component, when the user will click on the button to insert the video into the message composition area, I will simply handle on click. In the handleOnClick method, I create a result complex object, which will include the video ID and the video display name of the selected video and I use the microsoftteams.task.submittask to send the result to the calling client, which is the messaging extension. Basically we use exactly the same approach we used in the previous video for the task modules. Once I have done and I have created my result in the messaging extension, I can get back the result and I can easily use the CardFactory to create an adaptive card, which will have the TextBlock with the display name of the video, which will have the image, which is the preview image of the video on the YouTube side of the story.

Then I will have an action, which will be an action.openURL, which will simply open the video URL to show the video to the user. So, really simple and straightforward. Of course, we need to publish this solution with a public URL, which will have to be something different than the azurewebsites.net and that’s why I’m using ngrok. In the .env file, you will have to configure the application ID and the application password for your BOT in the BOT framework as well as the ngrok sub domain, if you want to use ngrok to publish your solution. That’s it.

As usual, thank you for watching this video. I hope you found it interesting and I’m really looking forward to seeing you next week, and remember to subscribe to this channel. Thank you.