Card is blurred on click of buttons

Brass Contributor
AyeshaKulsumSJ_0-1662803912800.png

 

{
"type": "AdaptiveCard",
"version": "1.5",
"body": [
{
"type": "Container",
"horizontalAlignment": "Center",
"$data": "${$root.name}",
"spacing": "Medium",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Image",
"url": "",
"width": "20px",
"spacing": "None",
"id": "icon1"
}
]
},
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "TextBlock",
"text": "0 votes (Anonymous)",
"wrap": true,
"id": "text1",
"spacing": "Small",
"horizontalAlignment": "Left"
}
]
},
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Image",
"url": "",
"width": "20px",
"spacing": "None",
"id": "icon2",
"separator": true,
"horizontalAlignment": "Right"
}
],
"separator": true,
"horizontalAlignment": "Right"
},
{
"type": "Column",
"width": "stretch",
"horizontalAlignment": "Center",
"verticalContentAlignment": "Center",
"items": [
{
"type": "TextBlock",
"text": "Expires by 26 Jun",
"wrap": true,
"horizontalAlignment": "Left"
}
],
"spacing": "Small"
}
]
}
]
},
{
"type": "TextBlock",
"text": " test question",
"size": "Medium",
"weight": "Bolder",
"wrap": true
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Execute",
"title": "veg",
"data": {
"data": {
 
}
},
"msteams": {
"type": "task/fetch"
}
},
"url": ""
},
{
"type": "Action.Execute",
"title": "n veg",
"data": {
"data": {
 
}
},
"msteams": {
"type": "task/fetch"
}
},
"url": ""
},
{
"type": "Action.Execute",
"title": "this",
"data": {
"data": {
 
}
},
"msteams": {
"type": "task/fetch"
}
},
"url": ""
}
]
}
]
}
]
}
]
}
 
Whole Card is getting blurred on click of the button.
5 Replies
It seems like the JSON you shared is not valid. Can you please validate your JSON again and share the correct one?

@Meghana-MSFT Updated exact JSON

Here we are using action execute so that on click we will perform only backend operations

{
"type": "AdaptiveCard",
"version": "1.5",
"body": [
{
"type": "Container",
"horizontalAlignment": "Center",
"$data": "${$root.name}",
"spacing": "Medium",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Image",
"url": "",
"width": "20px",
"spacing": "None",
"id": "icon1"
}
]
},
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "TextBlock",
"text": "0 votes (Anonymous)",
"wrap": true,
"id": "text1",
"spacing": "Small",
"horizontalAlignment": "Left"
}
]
},
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Image",
"url": "",
"width": "20px",
"spacing": "None",
"id": "icon2",
"separator": true,
"horizontalAlignment": "Right"
}
],
"separator": true,
"horizontalAlignment": "Right"
},
{
"type": "Column",
"width": "stretch",
"horizontalAlignment": "Center",
"verticalContentAlignment": "Center",
"items": [
{
"type": "TextBlock",
"text": "Expires by 26 Jun",
"wrap": true,
"horizontalAlignment": "Left"
}
],
"spacing": "Small"
}
]
}
]
},
{
"type": "TextBlock",
"text": " test question",
"size": "Medium",
"weight": "Bolder",
"wrap": true
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Execute",
"title": "veg",
"data": {
"data": {
"type": "type1"
},
"msteams": {
"type": "task/fetch"
}
},
},
{
"type": "Action.Execute",
"title": "n veg",
"data": {
"data": {
 
"type": "answerPoll"
 
},
"msteams": {
"type": "task/fetch"
}
},
},
{
"type": "Action.Execute",
"title": "this",
"data": {
"data": {
 
"type": "answerPoll"
},
"msteams": {
"type": "task/fetch"
}
},
}
]
}
]
}
]
}
]
}
We tried this card at our end, and the card is not rendering at all. Could you please let us know usage of "$data": "${$root.name}"? From where it is being referred and used?

@Meghana-MSFT 

I am able to send card to the Channel but card is still blurred on click

 

const turnContext = new TurnContext(adapter, properties);
const teamsChannelId = await teamsGetChannelId(turnContext.activity);
const activity = MessageFactory.text('This will be the first message in a new thread');
BotConnector.MicrosoftAppCredentials.trustServiceUrl(properties.serviceUrl);
const [reference] = await TeamsInfo.sendMessageToTeamsChannel(turnContext, activity, teamsChannelId);
const card = MessageFactory.attachment(CardFactory.adaptiveCard(
      {
        '$schema': 'http://adaptivecards.io/schemas/adaptive-card.json',
        'type': 'AdaptiveCard',
        'version': '1.5',
        'body': [
          {
            'type': 'Container',
            'horizontalAlignment': 'Center',
            'spacing': 'Medium',
            'items': [
              {
                'type': 'ColumnSet',
                'columns': [
                  {
                    'type': 'Column',
                    'width': 'auto',
                    'items': [
                      {
                        'type': 'Image',
                        'url': 'https://cdn-icons-png.flaticon.com/512/456/456212.png',
                        'width': '20px',
                        'spacing': 'None',
                        'id': 'icon1'
                      }
                    ]
                  },
                  {
                    'type': 'Column',
                    'width': 'auto',
                    'items': [
                      {
                        'type': 'TextBlock',
                        'text': '0 votes (Anonymous)',
                        'wrap': true,
                        'id': 'text1',
                        'spacing': 'Small',
                        'horizontalAlignment': 'Left'
                      }
                    ]
                  },
                  {
                    'type': 'Column',
                    'width': 'auto',
                    'items': [
                      {
                        'type': 'Image',
                        'url': 'https://cdn-icons-png.flaticon.com/512/456/456212.png',
                        'width': '20px',
                        'spacing': 'None',
                        'id': 'icon2',
                        'separator': true,
                        'horizontalAlignment': 'Right'
                      }
                    ],
                    'separator': true,
                    'horizontalAlignment': 'Right'
                  },
                  {
                    'type': 'Column',
                    'width': 'stretch',
                    'horizontalAlignment': 'Center',
                    'verticalContentAlignment': 'Center',
                    'items': [
                      {
                        'type': 'TextBlock',
                        'text': 'Expires by 26 Jun',
                        'wrap': true,
                        'horizontalAlignment': 'Left'
                      }
                    ],
                    'spacing': 'Small'
                  }
                ]
              }
            ]
          },
          {
            'type': 'TextBlock',
            'text': ' test question',
            'size': 'Medium',
            'weight': 'Bolder',
            'wrap': true
          },
          {
            'type': 'ColumnSet',
            'columns': [
              {
                'type': 'Column',
                'width': 'stretch',
                'items': [
                  {
                    'type': 'ActionSet',
                    'actions': [
                      {
                        'type': 'Action.Execute',
                        'title': 'veg',
                        'data': {
                          'data': {

                          }
                        },
                        'msteams': {
                          'type': 'task/fetch'
                        },
                        'url': ''
                      },
                      {
                        'type': 'Action.Execute',
                        'title': 'n veg',
                        'data': {
                          'data': {

                          }
                        },
                        'msteams': {
                          'type': 'task/fetch'
                        },
                        'url': ''
                      },
                      {
                        'type': 'Action.Execute',
                        'title': 'this',
                        'data': {
                          'data': {

                          }
                        },
                        'msteams': {
                          'type': 'task/fetch'
                        },
                        'url': ''
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }));
    await turnContext.adapter.continueConversation(reference, async t2 => {
      BotConnector.MicrosoftAppCredentials.trustServiceUrl(reference.serviceUrl);
      const res = await t2.sendActivity(card);
      message1 = res;
    });

 

 

 

 

 

 

 

@AyeshaKulsumSJ - We tried this at our end. Can you please try by changing the adaptive card version to 1.4. According to Schema for Universal Actions for Adaptive Cardsthe version property of your Adaptive Card must be set to 1.4 for Universal Actions for Adaptive Cards.