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

Welcome back to PiaSys Tech Bites. We have been already talking about how to use Adaptive Card in SharePoint Framework. And today I want to explain to you how you can use an Adaptive Card as the UI for a Task Module built in Microsoft Teams. And specifically, I will show you how to use Yo Teams to provide the UI of a Task Module using an Adaptive Card and how to collect Input Fields using an Adaptive Card. As you will see, it is really straightforward, and the Yo Teams generator would provide all of the plumbing for you so that your life would be really easy whenever you want to use an Adaptive Card to build the UI. You will simply need to design the card and include the card definition in the rendering of the Task Module. And eventually in the rendering of the output of the Task Module if it is, for example, a Task Module for a Messaging Extension. So let’s move to the demo environment and let’s see how to create a Task Module based on an Adaptive Card.

So first of all, let’s have a look at the UI of the solution that I’m going to show you. So let’s imagine that I want to create a new conversation and here I have a Messaging Extension in the compose message box. I can click on it and we can see that this is the UI provided by Yo Teams and it has been built using an Adaptive Card. So here I can collect the first name of the user as well as the email address of the user. Let’s provide my data just for the sake of making an example. And by clicking on the OK button, I can see an Adaptive Card in the output of the Messaging Extension just inserted in the content of my message in the compose message box. How can we create such kind of solution? Well, first of all, using the Yo Teams generator, we can go through all of the steps of the wizard and specifically we can select to create a Messaging Extension command. As you can see right here, we can provide all of the settings for the Messaging Extension.

And specifically, we can select to use an Adaptive Card as the UI for the Messaging Extensions that we are building. Then we need to do all of the steps that I showed you already in the previous video about how to create Messaging Extensions with Microsoft Teams. And inside the implementation of the Messaging Extension, whenever we will show the Task Module, so in the onFetchTask of the Messaging Extension, we will simply have to provide as the result the content of an Adaptive Card. Here we are using the Adaptive Cards SDK for JavaScript and we simply use the CardFactory to create an Adaptive Card. And to provide the body, which will simply be based on a TextBlock and on an Input.Text for the first name and another TextBlock and another Input.Text for the email. Notice the ID of the fields, so the ID of the first input text is fullname and the ID of the other input text is email. And this one is of a style email because it will be used to collect an email address.

Then we have an action which will be an Action.Submit and when we submit something, we will get the submission in the onSubmitAction. And there we simply create another Adaptive Card to collect the output from the user and to provide it as the content of the message in the message composition UI. So we create another Adaptive Card and we provide a TextBlock with value.data. This will be the complex object returned by the submission of the previous Adaptive Card. And there we will find the full name and the email properties, which will precisely map to the name of the input fields that we have in the Adaptive Card that we used to create the UI of our form. So really simple and straightforward. 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.