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

Welcome back to PiaSys Tech Bites. Today I want to talk with you about how you can create a Task Module for Microsoft Teams. First of all, let me say that a Task Module is nothing more than a popup modal dialogue that we can render in the UI of the Microsoft Teams client, whether it is the web client or the desktop client. Inside the Task Module, we can render some HTML and JavaScript content. We can render in a IFrame to include external content, or we can render an Adaptive Card. We can trigger a Task Module using either an action in a tab, whether it is a personal or a configurable tab bar. We can use a message sent from a BOT, or we can use a deep link, which is just a hyperlink that we can include in a conversation in Teams or in an email or in a document or any other external resource. And by clicking on the deep link, the user will be brought to the Microsoft Teams UI, and we’ll see the Task Module inaction.

A Task Module under the cover, simply leverages the Microsoft Teams tab infrastructure, and as such, we can think about a Task Module, as a Teams tab inside a popup modal dialogue. So let me move to the demo environment, and let me show you how to create a Task Module in practice.

First of all, let’s have a look at the solution in action. Here we have a personal tab for Microsoft Teams in which we have a couple of buttons. The show playlist button will allow us to see in a task model and as you can see, it is just a popup model dialogue. We can see in this task model, the video content of a playlist in the PiaSys Tech Bites YouTube channel. And here we have all of the videos in the current playlist, which is the Microsoft Teams one. We also have another button which will show another Task Module to select what the target playlist is. For example, I can switch to the Microsoft Graph playlist, I can update. And as you can see here, now I can show the playlist of Microsoft Graph with all of the videos covering Microsoft Graph related topics.

So how did I build the solution? Well, first of all, I use the yeoman generator for Teams. So using Yo Teams, I created the Microsoft Teams solution and using Visual Studio Code I configured my solution. So let me switch to Visual Studio Code and let me show you the solution from a code point of view. Here we have a tab, which is the one we were seeing before in the UI of Microsoft Teams. And in this tab, which inherits from TeamsBasedComponent, we simply configured a state, which includes the playlist ID and the playlist display name that we want to use in order to hold the information about the selected playlist. Then we have in the render method, of the react component, which will provide the basic functionality for our team tab. We have a couple of buttons. These two buttons come out from the Fluent UI set of React components.

So by clicking on the show playlist button, I will trigger this onShowPlaylist function. And the on show playlist function will simply configure an object of type task model info. And in there we will configure the title of the dialogue or the task model that will be rendered. The URL, which will be rendered inside the Task Module. And we will also define the size. So width and height of the task model in the UI. And then we simply say through the SDK of Microsoft Teams, microsoftteams.tasks.startTask, and we provide the task module info object. This will trigger the rendering of the show playlist popup model dialogue.

Moreover, the one that we use, the Task Module that we use to collect or to select the target playlist is another tab that we created for the sake of requesting to the user to select a target playlist. To render that one, we have a different function, which will still create a Task Module info object, still with a title, with a URL for the content and with the size for the dialogue. But we also create a submit handler function, which we’ll use in order to get back the selected information. So we will get back when the user will submit the selection, the playlist ID and the playlist display name, which we will store in this state of our React component. And we still use the Microsoft Teams SDK .tasks.startTask. We still provide the Task Module info, but we also provide the submit handler function, which will be invoked as soon as the user will close the popup modal dialogue.

Inside the playlist selector task model we simply have a React component. Let me show you. First of all, we have a .HTML file, which will do the actual rendering of the HTML of our Task Module. And in there we simply render the Task Module React component. This is again, extending the teamsBaseComponent. In the ComponentWillMount, we simply get from the query string the information about the currently selected playlist ID and playlist display name, to sync the dropdown to the selected value. Then in the render method, again, we provide a drop downfrom the Fluent UI set of components providing all of the playlist available in my solution. And the list of playlist is just a JSON file that I’m including using the require right here.

And then when the user will click on the button to update the selection, we will simply do what? We will handle the selection. So we will configure a result object, and we’ll still use the Microsoft Teams SDK to access the tasks object and to say, submitTask, providing the result. So this will close the popup modal dialogue, and we’ll send back the selection to the tab so that we will be able to collect the selected information and to update the backend infrastructure, the backend state in my component. So we will go here and update the state.

In order to render the playlist by itself, we have another HTML page which will do the actual rendering of the YouTube URL for a specific playlist, including the ID of the playlist to render. And then we will simply place the content inside a DIV container. So really simple and straightforward. From a manifest point of view, our team solution will include a static tab, which will simply represent the definition of our PiaSys Tech Bites, personal tab, that we will use to interact with the solution. Of course, if we like, we can also use a deep link or an action an Actionable Message or an Adaptive Card inside the UI.

For example, I can show you here in the general channel of this team, I have an Adaptive Card which includes a button, which will trigger the rendering of my Task Module. As well as I can simply have in a conversation, a message with a deep link targeting my target Task Module. Like always, 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.