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

Welcome back to PiaSys Tech Bites. The previous episode, we talked about how to use Adaptive Cards in SharePoint Framework for rendering the UI of your custom developed web parts. Today I want to explain you how you can use the input fields that are supported by the Adaptive Cards like for example Text fields, Date, Time, Toggle, Choice and ChoiceSet, and how you can process the input collected through an Adaptive Card, using a SharePoint Framework web part.

Like always, let me move to the demo environment and let me show you how to do that in practice. So, in the Schema Explorer of the Adaptive Cards, you can clearly see what the input fields available are. Text, Number, Date, Time, Toggle, ChoiceSet and Choice. Here I have, in my SharePoint Online site, a JSON file representing an Adaptive Card with some input fields.

Specifically, I have an Input.Text, I have another Input.Text for the last name and the first name of the user. I have an Input.Date to collect the date. I decided to use an Input.ChoiceSet to get the favorite color of a user, and an Input.Toggle to get just the toggle with the true or false value. Then I have an Action, which is an Action.Submit to collect the input from the user.

Using the part that we introduced last week, I’m rendering that specific Adaptive Card in my custom client side web part. Here I can collect properties like my name, my surname, my birth date, my favorite color, which could be for example, blue. If I like this form, and of course I like it. If I click on the Submit button, of course I will get the event about the submission of the form. But I can also collect all of the provided values by the user.

How can we do that? Well, it is really simple and straightforward. Like we saw last week, when we create the Adaptive Card, we can also plug in a handler into the on execute action event. In there, when the action is of type Action.Submit, we also have access to the ._processData property of the action that we get as the input for the event. In there, as a fully typed set of properties. We can get access to the field filled in by the user.

So in my Adaptive Card definition, I have for example, the FirstName field, which is with an ID, FirstName or the LastName or the BirthDate, and so on and so forth. In the code, I can simply access those properties as main properties of the _processData property of the action. Of course, you can also write dynamic code to browse all of the properties dynamically, and support in dynamic form, rendering in your client’s side work part. It is really simple and straightforward. You simply get the Action.Submit event and you process the process data, and that’s it.

Like always, thank you for watching this video. I hope you found it interesting. Remember to subscribe to this channel. Happy New Year. See you in 2021. Thank you.