Sample: Disable Adaptive Cards after submit/obsoleted

[compulim]

Goals

• Write a new attachment renderer that will disable Adaptive Card interactivity if a certain condition is met
  • If the Adaptive Card is no longer the last visible activity sent from the bot, or there is a message sent by the user succeeding it, disable interactivity on the Adaptive Card
• There could be more than one Adaptive Card form available on the page
• Also consider, if "expand card" action button should be disabled or not. It was because "expand card" button should not be counted as "form submission", we might not want to disable expand/collapse feature
  • If implementer is not familiar with this feature, should consult the "Adaptive Card visualizer" page for details

Non-goals

It should not use jQuery or any other DOM-manipulating libraries to achieve the goal. It must use pure React.

Reference

We have a sample named "presentation mode". It showed the ability to disable interactivity of the whole Web Chat UI, including Adaptive Card content. The implementer can look into that to understand how to disable interactivity for just a specific attachment

[Unders0n]

will it also include disabling cards and buttons in it after submitting? Cos now its not very obvios after button click that it was actually cliked and if clicked twice by default we have 2 events and messages dublicated. There's a backend workaround for that: https://stackoverflow.com/questions/51701003/microsoft-bot-framework-webchat-disable-adaptivecards-submit-buttons-of-previou , but it seems very hacky. Thanks

[Naveenbc]

Is there any update on this? @compulim @Unders0n
I am using adaptive cards inside waterfall dialog exactly like prompt choices, Once the button is clicked it has to be disabled or made obsolete. If there is an update please tell me how do I do it in node js, because the above C# solution is not working for me.

[vishmonne]

Any updated solution for disabling a adaptive card button totally once its clicked once ?

[NaveenGaneshe]

Any updates ?

[avilde]

The only way I found was to use a custom activityMiddleware where I draw my own message header and actions. As the web-chat component is written in React, I used class state to draw/not draw children (action buttons).
This however leads to manual parsing of adaptive cards from card attachments coming into activity middleware.

Documentation: https://github.com/microsoft/BotFramework-WebChat#web-chat-api-reference

activityMiddleware | A chain of middleware, modeled after Redux middleware, that allows the developer to add new DOM components on the currently existing DOM of Activities. The middleware signature is the following: options => next => card => children => next(card)(children).

[dkonyayev]

Hi, any updates on this feature. We have observed that users always try to scroll up to click on hero card buttons when the response is no longer expected. If would be great if hero card was disabled once it is not longer last activity element.

[corinagum]

Hi @dkonyayev, we do not have updates at this time. Others who are looking for this feature are welcome to add their +1 to increase traction.

[mmalaiarasan-conga]

+1

[Naveenbc]

+1

…

On Thu, 7 Nov 2019, 6:44 am ManjulaMalaiarasan, ***@***.***> wrote: +1 — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#1427?email_source=notifications&email_token=ADJISRLIWOGTEOVRXJC74J3QSNTXZA5CNFSM4GH4SBP2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEDIRTMY#issuecomment-550574515>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADJISRJD4IR4UUDP7M5XIADQSNTXZANCNFSM4GH4SBPQ> .

[avilde]

In our project this was a must have feature.
We made a workaround with our Redux store to save last message id (activity.id).In a React component we would check if it is the last message so we do not show the action buttons and those cannot be pressed twice (e.g. authentication).

[sw353552]

+1
any update on this yet?

[compulim]

Reopening this as we are still pending for README.md for this (rushy) sample.

Thanks everyone for the input. @BeeMaia and @sw353552, could you open a new issue on "do not disable openUrl buttons"? And could you share why "links in Markdown" is not sufficient replacement for openUrl buttons? Would love to start a new user story based on your experience.

This sample is unexpectedly challenging because "making an accessible button which can be disabled dynamically" is a topic surprisingly no one visited. IMO, Firefox and Safari did the best job. For details, please read https://github.com/microsoft/BotFramework-WebChat/blob/master/docs/ACCESSIBILITY.md#additional-context. As always, accessibility is our top priority.

If you are interested in bringing this feature to production (i.e. without copying from the sample code), please create a new "feature enhancement" issue and vote. We need data from your feedback to plan our road map. 😉

To smooth out kinks in our UX, please also share reasons why you are not using Suggested Actions but Adaptive Cards for the user to answer questions.

Thanks for everyone's interested in this topic.

[anandk95]

I understood and got the solution. But can you explain how to do disable previous/obsolte card using Angular9, I'm tring to achive the same thing with Angular9 but getting nowhere.

[corinagum]

Update 05.l (L) sample
https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/05.custom-components/l.disable-adaptive-cards

[corinagum]

yes. Bot language does not affect the client behavior. Please use sample provided above.

[jayarau]

Hi @compulim, We are referring above sample link to disable adaptive card. But we are getting disabled card for recent message. and hence not able to fill details.
botframework version we are using : 4.11

Screenshot for reference:

I have tried providing disabled={recentBotMessage} in element but after doing that card is not getting disabled.

<Components.AdaptiveCardContent actionPerformedClassName="card__action--performed"
               content={attachment.content}
               disabled={recentBotMessage}
               />

is anyone facing similar issue? or can help with this.

[Kaiqb]

@jayarau - In the sample, line 115 we have disabled={!recentBotMessage} but in your example you don't have the (!) in front of recentMessage. Could you recheck?

[jayarau]

Hi @Kaiqb, Yes we have tried with disabled={!recentBotMessage} initially, but with that we are getting disabled card even for recent message and hence not able to fill card and submit it. As shown in screenshot above.

[jayarau]

Hi @compulim / @Kaiqb , do we have any update on this?

[jayarau]

Hi @compulim , I see this issue is in dev discussions from long, do we have any update on it?

[compulim]

For everyone who is waiting for this, we will be in planning mode soon. We know this is what our customer want: using AC as an one-off input.

On the other hand, the root cause is in the AC library, microsoft/AdaptiveCards#1512.

Will be great if everyone here could help sending feedbacks to the root cause to get it solved.

[jayarau]

Hi @compulim, We are referring above sample link to disable adaptive card. But we are getting disabled card for recent message. and hence not able to fill details.
botframework version we are using : 4.11

Screenshot for reference:

I have tried providing disabled={recentBotMessage} in element but after doing that card is not getting disabled.

<Components.AdaptiveCardContent actionPerformedClassName="card__action--performed"
               content={attachment.content}
               disabled={recentBotMessage}
               />

is anyone facing similar issue? or can help with this.

Update on this:
I am able to disable adaptive cards once action taken.
Solution:
function check(act){return (act.type === 'message'&&act.hasOwnProperty('attachments'))};
var { activities } = this.store.getState();
var messageActivities=activities.filter(check)
var recentBotMessage = messageActivities.pop() === activity;

return (
<Components.AdaptiveCardContent actionPerformedClassName="card__action--performed"
content={attachment.content}
disabled={!recentBotMessage}/>
);

[cobbie]

+1. How could this be implemented via Bot framework composer?

[smelgar-sage]

+1. How could this be implemented via Bot framework composer?

Any updates about this?