How to switch to Adaptive Cards responsively

Question

I would like to switch Adaptive Cards responsively according to screen size.

for example, "Weather Conpact" and "Weather large" (http://adaptivecards.io/samples/)

in case of iPhone screen, display "Weather Conpact"
in case of desktop screen, display "Weather large"

I think that it is necessary to create a card according to UI on the server side, but if there is a method that can be handled only on the client side, I would like to select that way.

If you know the way like the above, please tell me.

Varad Venkata Krishna Varad Venkata Krishna · Accepted Answer · 2018-07-23T12:16:41

I hope you got the answer by now, I will answer anyway, hope it helps Since the adaptive cards are sent from BOT backend(C#, or NodeJS) server you don't have much control rendering adaptive cards client side. so better approach will be sending some parameters while connecting to Bot itself, If you are using WebChat Channel then you can do this :

    BotChat.App({
    user: {
        id: $parameters.userId, name: $parameters.userName,
        deviceType: $parameters.DeviceId,
        platform: $parameters.Platform,
    },
    bot: { id: model.botId, name: model.botName },
    resize: 'window',
    locale: 'en',
    sendTyping: true,
    directLine: {
        secret: model.secret,
        token: model.token,
        domain: model.directLineUrl,
        webSocket: true
    }
}, chatBotElement);

As you see in the above code I am sending Device Type in the user object which will be available in the Bot backend in the session object at session.message.user.DeviceId here you can validate the conversion started from which device and send

in case of iPhone screen, display "Weather Compact"
in case of the desktop screen, display "Weather large"

Accordingly.

How to switch to Adaptive Cards responsively

1 Answers