Card is blurred on click of buttons

Question

&nbsp;{"$schema": "http://adaptivecards.io/schemas/adaptive-card.json","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": {&nbsp;}},"msteams": {"type": "task/fetch"}},"url": ""},{"type": "Action.Execute","title": "n veg","data": {"data": {&nbsp;}},"msteams": {"type": "task/fetch"}},"url": ""},{"type": "Action.Execute","title": "this","data": {"data": {&nbsp;}},"msteams": {"type": "task/fetch"}},"url": ""}]}]}]}]}&nbsp;Whole Card is getting blurred on click of the button.

meghana-msft · Answer

It seems like the JSON you shared is not valid. Can you please validate your JSON again and share the correct one?

ayeshakulsumsj · Answer

Meghana-MSFT&nbsp;Updated exact JSONHere we are using action execute so that on click we will perform only backend operations{"$schema": "http://adaptivecards.io/schemas/adaptive-card.json","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"}},"url": "https://url.com"},{"type": "Action.Execute","title": "n veg","data": {"data": {&nbsp;"type": "answerPoll"&nbsp;},"msteams": {"type": "task/fetch"}},"url": "https://url.com"},{"type": "Action.Execute","title": "this","data": {"data": {&nbsp;"type": "answerPoll"},"msteams": {"type": "task/fetch"}},"url": "https://url.com"}]}]}]}]}

meghana-msft · Answer

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?

ayeshakulsumsj · Answer

Meghana-MSFT&nbsp;I am able to send card to the Channel but card is still blurred on click&nbsp;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 =&gt; {
      BotConnector.MicrosoftAppCredentials.trustServiceUrl(reference.serviceUrl);
      const res = await t2.sendActivity(card);
      message1 = res;
    });&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

meghana-msft · Answer

AyeshaKulsumSJ&nbsp;-&nbsp;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 Cards,&nbsp;the&nbsp;version&nbsp;property of your Adaptive Card must be set to 1.4 for Universal Actions for Adaptive Cards.&nbsp;

Forum Discussion

Card is blurred on click of buttons

Share

Resources