How to disable button after single use in a Adaptive Cards

Question

I am using Adaptive Cards in my LUIS agent. Once a user has filled in all the details and submits the card the submit button should get disabled to prevent duplicate usage of the button.

We also would like to know how to hide a button when displaying a nested Adaptive Card on a button click.

I tried validating the card using the input values made by the user but i am looking for a better and optimal solution for this

P.s working on bot framework v4 API

Can you explain what you mean by "And also i would like to know that how to hide a button when we are displaying a nested adaptive card on a button click"? What button are you trying to hide, and when? Are you saying you want the ShowCard action to disappear when you click it? If so, how would the user collapse the card? — Kyle Delaney, Sep 03 '19 at 17:28
I have two submit buttons in an adaptive card..the show card one is basically a collapsible adaptive card..which also has a submit button in it..so if a user goes for the collapsible one so i want the submit button inside that one to act as the final submit and for that i want my previous submit button to hide at this point..hope you got it now! — Nikhil Bansal, Sep 03 '19 at 17:31

score 2 · Answer 1 · answered Sep 03 '19 at 18:35

In a channel like Teams, your bot can call the update activity API and edit the card in the conversation history that way. Web Chat does not support updating or deleting activities out of the box, but if you fork the Web Chat repo you can modify it to do whatever you want. This is essentially the same as creating your own Direct Line client while using Web Chat as a starting point.

For clarity, I want to briefly mention that Web Chat is not really a channel. Direct Line is the channel, and Web Chat is a Direct Line client. The client application is what is ultimately responsible for rendering cards and handling their interactivity.

There is a way to effectively disable Adaptive Card submit actions in any channel using bot state. If you put identifying information in the submit action's data, then you can have your bot remember that the button has already been clicked. If you make sure the bot doesn't do anything when the button is clicked again then it's effectively disabled even though it doesn't look any different.

If you're interested in more Adaptive Card functionality becoming available as a NuGet package, please show some support for my Bot Builder Community idea. If you would like to understand more about using Adaptive Cards with the Bot Framework in general then have a look at my latest blog post.

i want to disable whole adaptive card not just the submit button, like use can click on it and no drop down of my card should work — Nikhil Bansal, Dec 04 '19 at 10:10
@NikhilBansal - In Teams, your updated card can have its inputs removed. Since Web Chat doesn't support message updates, you could only do this if you create your own Direct Line client. — Kyle Delaney, Dec 12 '19 at 02:14
I am forwarding duplicate questions to this answer only because I can't forward them to this better answer which mentions a new Web Chat sample: https://stackoverflow.com/a/64722822/2122672 — Kyle Delaney, Mar 19 '21 at 17:07

score 2 · Answer 2 · answered Dec 31 '19 at 06:34

In webchat, hiding/disabling submit button can be handled in "Incoming Activity" event of Azure bot. You can get 'your_submit_button_id' from JSON file of adaptive card.

const store = window.WebChat.createStore(
    {},
    function (_ref) {
        const dispatch = _ref.dispatch;
        return function (next) {
            return function (action) {
                if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
                    dispatch({
                        type: 'WEB_CHAT/SEND_EVENT',
                        payload: {
                            name: 'webchat/join',
                            value: { language: window.navigator.language }
                        }
                    });
                }
if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
        const event = new Event('webchatincomingactivity');

        event.data = action.payload.activity;
/* hiding/disabling button code starts here */
    if(event.data.value!=undefined && event.data.value.id=='your_submit_button_id')
    {
     var btnArr=document.getElementsByClassName("ac-pushButton");
     btnArr[btnArr.length-1].style.display='none';

             //btnArr[btnArr.length-1].disabled = true;
    }
        window.dispatchEvent(event);
    }
                return next(action);
            };
        };
    });

How to disable button after single use in a Adaptive Cards

2 Answers2

Linked