How to update adaptive card content with json data

[rakgunti]

Hello Everyone,

While researching on adaptive cards dynamic content population. I found below Microsoft adaptive card link where they show we can pass json data to populate the html content dynamically.

https://adaptivecards.io/designer/

Ex: In the link, content of properties attribute from json data is populated in the card html content when we click on preview mode. we can see keys and respective values in the card content. 

Can you please let me know if there's a way to do it through the API endpoints or we need to this card transformation before posting the message request.

[rakgunti]

@sandiban  / @dstaudt ,

Thanks for your responses. These examples and documentation helps me understand different usecases.

To explain in detail below is the example of what I'm looking for.

Provided Input (i.e. webex message template)

{

"type": "FactSet",

"facts": [

{

"$data": "${properties}",

"title": "${key}:",

"value": "${value}"

}

]

}

with below input json data

{

"properties": [

{

"key": "Board",

"value": "Adaptive Cards"

},

{

"key": "List",

"value": "Backlog"

}

]

}

Output of webex Template should be transformed to below.

{

"type": "FactSet",

"facts": [

{

"title": "Board:",

"value": "Adaptive Cards"

},

{

"title": "List:",

"value": "Backlog"

}

]

}

[sandiban · Accepted solution]

Thanks @rakgunti for discussing the item over a call and clearing up things.
Actually now I understand the background of this query and also it was more about how you can push dynamic data in a Card JSON variables rather than validating a Card design dynamically. 
As we discussed, yes designing a Card and validating it on the go, still the best way to do it would be Microsoft Adaptive Card Design platform!
And, for pushing the dynamic data inside Card JSON, either you can use the process as David mentioned and also you can keep a JSON file with Key-value pairs updated with time and read the Card data from there! This should work as well.

Please let us know for any further details and you can reach out to our team as well by sending your query over - devsupport@webex.com

Regards,
Sandip

[dstaudt]

This DevNet Learning Lab and associated sample code repository may be helpful in getting started:

https://developer.cisco.com/learning/tracks/webex/webex-messaging-bots/webex-messaging-adaptive-cards/introduction/

https://github.com/CiscoDevNet/webex-chess-card-sample

[sandiban]

Thanks @rakgunti for contacting us over Community forum!
Before sharing the other details, we'd like to let you know that a similar Webex Card and Button design documentation following the design formats of Microsoft Adaptive Card, you can find here - https://developer.webex.com/docs/buttons-and-cards
This above link is important because still we don't support all the Microsoft Adaptive card features and functions, but we're also implementing them in our platform with time. This Webex page will share you the details how Cards work in Webex platform as well as what are the current limitations as well.

Now coming to your query, we actually don't have an inbuilt tool where we can preview the Cards on the go of the design but we have this /create-message API using which you can send a Card in one of your test room/space and test the design formats and make required changes after observing the outcome.

How to send a Card JSON using Webex /create-message REST API, an example is also shared here - https://developer.webex.com/docs/buttons-and-cards#working-with-cards, check specifically the Creating a Card section. Hope that will help you!
You basically need the Test roomId where you want to send your card attachment (or, you can also use a personEmail as well if that's easy for your testing), you also must need to put a simple text like "Hello, here is a Card!" (without text or, markdown field - a message can't be sent even though there is card JSON provided) and finally the Card JSON needs to be placed under attachments section in the API.
That's all! You should be good to send the Card in your test room. Once you think the design is perfect, you can send it to your actual desired room.

Please Note: If you generate the Card design from Microsoft Adaptive Card platform, you need to add a header on the Card JSON design on top of Card body{} section to be able to use it in Webex.
That header would be - 

 [
    {
      "contentType": "application/vnd.microsoft.card.adaptive",
      "content": {
        "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
        "type": "AdaptiveCard",
        "version": "1.0",
        "body": [
          { ...
            ...
          }
         ]
       }
    }
]

Hope this helps to complete your task!
Please let us know in case you required any further assistance.
Also, please accept this as a solution if you think this provided details satisfies your requirement!

Regards,
Sandip