CODEWITHSUNDEEP
microsoft-teamsadaptive-cards
peter
peter

Reputation: 161

How to convert custom json to adaptive card json format

I am looking https://adaptivecards.io/ for my chatbot.I saw we can create any type of card and we can render ui using adaptive json.But how can i convert my custom json to adaptive card json format. Should i need to manually convert based on my custom json response type or is there any way that convert specific json to preferred adaptive card.

adaptive card response:

{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "TextBlock",
            "text": "What type of food do you prefer?",
            "wrap": true
        },
        {
            "type": "ImageSet",
            "imageSize": "medium",
            "images": [
                {
                    "type": "Image",
                    "url": "https://contososcubademo.azurewebsites.net/assets/steak.jpg",
                    "size": "Medium"
                },
                {
                    "type": "Image",
                    "url": "https://contososcubademo.azurewebsites.net/assets/chicken.jpg",
                    "size": "Medium"
                },
                {
                    "type": "Image",
                    "url": "https://contososcubademo.azurewebsites.net/assets/tofu.jpg",
                    "size": "Medium"
                }
            ]
        }
    ]
}

json:
{
    "title": "Publish Adaptive Card Schema",
    "description": "Now that we have defined the main rules and features of the format, we need to produce a schema and publish it to GitHub. The schema will be the starting point of our reference documentation.",
    "creator": {
        "name": "Matt Hidinger",
        "profileImage": "https://pbs.twimg.com/profile_images/3647943215/d7f12830b3c17a5a9e4afcc370e3a37e_400x400.jpeg"
    },
    "createdUtc": "2017-02-14T06:08:39Z",
    "viewUrl": "https://adaptivecards.io",
    "properties": [
        {
            "key": "Board",
            "value": "Adaptive Cards"
        },
        {
            "key": "List",
            "value": "Backlog"
        },
        {
            "key": "Assigned to",
            "value": "Matt Hidinger"
        },
        {
            "key": "Due date",
            "value": "Not set"
        }
    ]
}

Upvotes: 1

Views: 4541

Answers (1)

Hilton Giesenow
Hilton Giesenow

Reputation: 10844

Some background in case it helps: In principle, Cards allow you to send a more structured, formatted message than just a raw text response, and they also allow you to add images, hyperlinks, formatting, etc. Very important, they also let you add interaction, in the form of buttons. Also of note, there are different kinds of Cards available in Teams, including, but not limited to, Adaptive Cards which are kind of an entire category on their own.

At the end of the day, you'll be sending the card as a JSON response. However, there are different ways to store and then construct/populate the cards themselves before sending. The first way is to store them as JSON, in which case you might, for instance, store a card as a resource of some sort in your project, with placeholders (like "title": "##Title##") and then in your application code, before sending the card. You're basically doing string/regex type replacement in this case.

Another common way to construct the cards is in your bot's platform language (C# or JS). Here's an example in C# and here's a JS example. In either case, you're creating the card and populating it's values at runtime with whatever data you want to show to the user. In the case of C#, you're using strongly typed objects from this nuget package). This classes in this library also includes the required serialization attributes so that the correct final JSON is created for your cards, but it's all done for you of course.

Both of the above are perfectly valid approaches. However, there's another new option that's currently marked as "experimental", which is to use the approach you're asking about in your question - using "Adaptive Card Templating", where you have a format to marking up your Card with placeholders, and then using a templating engine to do the replacements. It's actually kind of the same as the first example I supplied above, it's just that someone else has written the token replacement 'engine' for you. In this case, you have the markup (the card definition), the data (the JSON for your data) and the engine that brings them together to construct the final JSON response). You can read more about this here, but again a reminder, it's just experimental at this stage. Here's more info for both JS and C#.

I've used both approaches but I find, because I'm using C#, it's easier to do it all in code - I get the "template" + "data" together already, and it's strongly typed to avoid errors in the final output.

Incidentally, App Studio includes a card designer, which is useful because Cards sometimes render a little differently in Teams versus other clients. App Studio also let's you send the card to yourself (via the App Studio bot itself) so you can see the "real" card directly in Teams.

Upvotes: 1

Related Questions