Search code examples
node.jsbotframeworkadaptive-cards

How to disable Adaptive Cards on clicking once?

I am using an adaptive card in MSTeams Bot and on clicking once I want to disable the Submit button to prevent the user from clicking it again as the backend is running for the button click event.

Adaptive Card code -

async specialRewards() {
const specialRewardCard = CardFactory.adaptiveCard({
  '$schema': 'http://adaptivecards.io/schemas/adaptive-card.json',
  'version': '1.2',
  'type': 'AdaptiveCard',
  'body': [
    {
      'type': 'TextBlock',
      'text': "Hey there! \n\n",
      'wrap': true,
    },
    {
      'type': 'TextBlock',
      'text': 'Your birthday🎂 :',
      'weight': 'Bolder',
      'wrap': true,
    },
    {
      'type': 'Input.Date',
      'id': 'birthday',
      'placeholder': 'Enter a date',
      'spacing': 'Padding',
    },
    {
      'type': 'TextBlock',
      'text': 'Your work anniversary🎉 :',
      'weight': 'Bolder',
      'wrap': true,
    },
    {
      'type': 'Input.Date',
      'id': 'anniversary',
      'placeholder': 'Enter a date',
      'spacing': 'Padding',
    },
  ],
  'actions': [
    {
      'type': 'Action.Submit',
      'title': 'Submit',
      'isPrimary': true,
    },
  ],
});
return specialRewardCard;

}

enter image description here

This is how it is looking on MSTeams

Solution

  • I'm working on a similar scenario myself at the moment and I've found the updateActivity() function to work well.

      // Update the adaptive card so it cannot be used again
  async followUp() {
  const card = CardFactory.heroCard(
     'Your card results',
     '<b>Birthday:</b> ' + birthday + '<br>' + '<b>Anniversary:</b> ' + anniversary,
     null
     );
     card.id = step.context.activity.replyToId;
     const message = MessageFactory.attachment(card);
     message.id = step.context.activity.replyToId;
     await step.context.updateActivity(message);
   }