Digital Assistant and Mobile

Get Involved. Join the Conversation.

Topic

    Pawan Gupta
    Microsoft Adaptive Card Example with ODAAnswered
    Topic posted November 10, 2019 by Pawan GuptaBlue Ribbon: 750+ Points, tagged Bots, Conversational AI, Virtual Assistant, VPA 
    26 Views, 4 Comments
    Title:
    Microsoft Adaptive Card Example with ODA
    Summary:
    Microsoft Adaptive Card Example with ODA
    Content:

    Enabling MS Team extensions is single most important feature to increase adoption given employees in most organization use MS suite. I am familiar with MS Team adaptive card JSON, although i am struglling to figure out how to send data for adaptive card using ODA, documentation given is very limited and only example is for thumbnail card which is not more than what default ODA common response offers.

    Really need your help to get one decent example of how to pass metadata (json elements) in ODA, please share example or any documentation already in place.

    Thanks

    Best Comment

    Steven Davelaar

    Tip: The adaptive cards JSON schema is pretty complex with many different constructs supported. As such it is error prone when you try to create the adaptive card content directly inside the CRC metadata property.  A less error-prone and more productive way to create the adaptive cards definition is to start with the Adaptive Cards Designer provided by Microsoft. This visual builder allows you to build the card using drag-and-drop from a  component palette. You can then use the "Copy Card JSON" function to get the JSON definition, and use an online JSON-to-YAML converter to convert it to YAML. Then you only need to indent it with the required spacing using some text editor, and you can copy-and-paste it into the YAML, and are ready-to-go.

    Hope this helps,
    Steven Davelaar,
    Oracle A-Team

    Comment

     

    • Steven Davelaar

      Hi Pawan,

      There are two levels where the adaptive cards custom property can be defined:

      • At the level of a text response item, typically used to create a single adaptive card (although multiple cards can be defined but iteratorVariable property is not supported here)
      • At the level of a card element within a "cards" response item. This allows you to define a single adaptive card structure that will be stamped out multiple times when an iteratorVariable has been specified for the card element. 

      Here is an example at response item level:

      responseItems:
        - type: "text"
          text: "This text is replaced with adaptive card defined in custom property"
          footerText: "Is that correct?"
          visible:
            expression: "${system.channelType=='msteams' && system.entityToResolve.value.name=='Confirmed'}"
          channelCustomProperties:
            - channel: "msteams"
              properties:
                adaptiveCard:
                  type: AdaptiveCard
                  "$schema": http://adaptivecards.io/schemas/adaptive-card.json
                  version: '1.0'          
                  fallbackText: "Adaptive card version not supported"                                             
                  body:
                  - type: TextBlock
                    text: 'I have all information needed to create your expense. Just to verify my understanding, here is an overview of your expense:'
                    wrap: true
                  - type: FactSet
                    facts:
                    - title: Expense Type
                      value: "${expense.value.Type}"
                    - title: Amount
                      value: "${expense.value.Amount.totalCurrency}"
                    - title: Date
                      value: "${expense.value.Date.date?number_to_date}"
                    - title: Receipt URL
                      value: "${expense.value.Receipt?has_content?then(expense.value.Receipt.url,'N/A')}"
       
                  actions:
                  - type: Action.ShowCard
                    title: Edit
                    id: edit
    • Steven Davelaar

      Somehow my post got cut off. Here is the remainder:

      To stamp out multiple cards, you can use the iteratorVariable with the card element within a response item of type cards. Here is an example to use an adaptive card to stamp out multiple pizza cards:

       

      responseItems:
        - type: "cards"
          headerText: "Here are our pizzas you can order today:"
          cardLayout: "horizontal"
          cards:
            - title: "${pizzas.name}"
              description: "${pizzas.description}"
              imageUrl: "${pizzas.image}"
              iteratorVariable: "pizzas"
              actions:
                - label: "Order Now"
                  type: "postback"
                  payload:
                    action: "order"
                    variables:
                      orderedPizza: "${pizzas.name}"
                      orderedPizzaImage: "${pizzas.image}"
              channelCustomProperties:
              - channel: "msteams"
                properties:
                  adaptiveCard:
                    type: "AdaptiveCards"
                    version: "1.0"
                    fallbackText: "Adaptive card version not supported"
                    body:
                    - type: "TextBlock"
                      text: "${pizzas.name}"
                      weight: "bolder"
                    - type: "TextBlock"
                      text: "${pizzas.description}"
                      wrap: true
    • Steven Davelaar

      Tip: The adaptive cards JSON schema is pretty complex with many different constructs supported. As such it is error prone when you try to create the adaptive card content directly inside the CRC metadata property.  A less error-prone and more productive way to create the adaptive cards definition is to start with the Adaptive Cards Designer provided by Microsoft. This visual builder allows you to build the card using drag-and-drop from a  component palette. You can then use the "Copy Card JSON" function to get the JSON definition, and use an online JSON-to-YAML converter to convert it to YAML. Then you only need to indent it with the required spacing using some text editor, and you can copy-and-paste it into the YAML, and are ready-to-go.

      Hope this helps,
      Steven Davelaar,
      Oracle A-Team

    • Patrick Keegan

      The official docs are now updated with info on incorporating Adaptive Cards in ODA skills: https://docs.oracle.com/en/cloud/paas/digital-assistant/use-chatbot/microsoft-teams.html#GUID-4D992EA3-1092-4EAA-A741-DE4B34372F46