Create an Adaptive Card

This tutorial aims to learn how to design and develop an adaptive card for the EID Chatbot. We will explore different controls and procedures to add them to an adaptive card. There are three basic steps to use the Adaptive Card in a Botflow

1. Design and Develop an Adaptive Card: This article will familiarize you with the controls and design of the adaptive card. To learn more about the card designer features supported in WorkflowStudio, please find the instructions in the doc Adaptive Cards and for instructions about Data Binding & Adding Objects in an Adaptive Card.

2. Publish/Upload the Adaptive Card: Publishing the adaptive card will upload the adaptive card to the CosmosDB, and only after publishing a BotFlow can programmatically get and bind the card. Publishing an Adaptive Card is similar to publishing any other WorkflowStudio items. Please refer to the Build and Deploy doc for instructions about publishing the Workflow Studio items in EmpowerID.

3. Use the Adaptive Card in a BotFlow: A Botflow can fetch the published adaptive card and bind values to the properties. Please find the instructions in the doc Create a BotFlow for an end-to-end tutorial of creating a BotFlow with example codes to get the template from CosmosDB and binding it.

Following the instructions in this doc, a developer can create an Adaptive Card similar to the image below.

1. In the Workspace tree of Solution Explorer, right-click the Package node where you want to create the Workflow and select New User Interface > Adaptive Card from the context menu.
   

   

2. The Card Designer will be loaded with a default card, and you can see multiple sections of the designer. To Understand more about the designer sections, please refer to this doc Adaptive Cards.
   

   

   
   

3. Before adding the elements, please clear all the elements in the card. Please Right-Click on each item in the Adaptive Card Tree and select Delete. Please repeat the same Action and delete all elements.
   

   

4. Save the Adaptive Card with an appropriate name. Click on the Save icon, provide a File Name in the dialog, and click the Save button. In the screenshot below, we are saving the Adaptive Card with the Name CreateSharedCredentials.
   

   

5. The first Element we want to add to the card is the Title. To add a title, click on the Adaptive Card Tree and select Add Element.
   

   

6. From the Add Adaptive Element modal popup, select the TextBlock element and provide/change values of the properties and Click on Add. For this tutorial, we set the following values for the properties.
   

   

   • Text: The text to display in the TextBlock. In the image above, we have provided the static text Title, the text attribute can be dynamic, and the value can be passed during runtime. We will bind the data property to the text attribute in step # 8.

   • Horizontal Alignment: This property sets the horizontal alignment of the Title text. In the image below, we have set the value to Center.

   • Wrap: If the text is long, it will be wrapped in the next line. This value is set to True ✅ .

   • Size: This property sets the font size of the Title text.

   • Weight: This property sets the weight of the Title text. This value is set to Bolder.
     

7. We have already added the Title element, and the designer windows preview the binding used for the Title. The Designer preview is updated as we add more elements.
   

   

8. Since we have used the ${Title} as a binding property for the text of the title element, let’s add the Data Property to the Adaptive Card. Please find detailed instructions in this doc for Data Binding & Adding Objects in an Adaptive Card.

   1. Expand the Data Properties, and Right click → Copy on the Title property node.
      

      

   2. Right-Click on the Template Json window and paste it into the text attribute value.
      

      

9. The next Element in the card is a dropdown to choose the credential type. Right Click on the Adaptive Card Tree and select Add Element to open the Add Adaptive Element modal.

10. On the Add Adaptive Element modal popup, select Input.ChoiceSet and provide values for the properties, and click on Add. In this example, we are setting the following values for the properties,

    • Id: Id is the unique identifier for the Element. This property is set to CredentialType.

    • Label: Label is the display value of the dropdown. This property is set to Type.

    • Placeholder: Provide the text to show as the placeholder.

    • Wrap: If the text is long, it will be wrapped in the next line.

    • Validation: Select the checkbox to validate the dropdown as a required field.

    • Error Message: Provide the text to show to the user as the message when validation fails.
      

      

11. You can see the dropdown and the Title added earlier in the designer window.
    

    

12. The next Element to add to the adaptive card is the Name textbox. Right Click on the Adaptive Card Tree and select Add Element to open the Add Adaptive Element modal.

13. On the Add Adaptive Element modal popup, select Input.Text, provide values for the properties, and click on Add.
    

    

14. The Adaptive Card has various other elements we can add following the same actions we did for Name and CredentialType earlier. Right Click on the Adaptive Card Tree and select Add Element to open the Add Adaptive Element modal for each of the fields,

    • For Display Name, select Input.Text, provide values for the properties on the Add Adaptive Element modal popup, and click Add.
      

      

    • For Shared Credential Policy DropDown, select Input.ChoiceSet, provide values for the properties on the Add Adaptive Element modal popup and click Add.
      

      

    • For Location TextBox, select Input.Text, provide values for the properties on the Add Adaptive Element modal popup, and click Add.
      

      

    • For Description, select Input.Text, provide values for the properties on the Add Adaptive Element modal popup, and click Add.
      

      

    • For User Name TextBox, select Input.Text, provide values for the properties on the Add Adaptive Element modal popup, and click Add.
      

      

    • For Password TextBox, select Input.Text, provide values for the properties on the Add Adaptive Element modal popup, and click Add. Select the style as Password to make it a password field.
      
      

      

    • For the Notes textbox, select Input.Text, provide values for the properties on the Add Adaptive Element modal popup, and click Add. Please select the Multi-Line option to support text input in multiple lines.
      

      

    • For the Enabled CheckBox, select Input.Toggle, provide values for the properties on the Add Adaptive Element modal popup, and click Add.
      

      

    • For the Master Password, select Input.Text, provide values for the properties on the Add Adaptive Element modal popup, and click Add.
      

      

15. We have finished adding the input fields for the Adaptive Card. Your card design preview in the designer window should look something like this.
    

    

16. In the above image, the action buttons Submit and Cancel are missing. Let’s add the submit button first.

17. Right Click on the Adaptive Card Tree → Actions and select Add Action to open the Add Adaptive Element modal.
    

    

18. On the Add Adaptive Element modal popup, select Action.Submit and provide values for the properties, and click on Add.

    • Id: Id is the unique identifier for the Element. This property is set to credentialSubmitted.

    • Title: The label of the Action Button. This property is set to Submit.

    • Mode: This property defines if this is the primary button or secondary.
      

      

19. To add a cancel button, Right Click on the Adaptive Card Tree → Actions and select Add Action to open the Add Adaptive Element modal as you did for the Submit button. On the Add Adaptive Element modal popup, select Action.Submit and provide values for the properties, and click on Add.

    • Id: Id is the unique identifier for the Element. This property is set to cancel.

    • Title: The label of the Action Button. This property is set to Cancel.

    • Mode: This property defines whether the action button is primary or secondary.
      

      

20. After adding the action buttons, the design of the adaptive card preview in the designer should look like this.
    
    

    

21. One adaptive card can have multiple templates. To save this adaptive card as a template, click on the Pencil icon, provide a template name, and click on save.
    

    

22. To switch among the template, use the dropdown with the listing of the templates in the adaptive card.