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.
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.