How to disable button after single use in a Adaptive Cards

1
votes

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

2
c#botframeworkadaptive-cards
What channel are you targeting? – Kyle Delaney
I am doing this for web channel – Nikhil Bansal
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
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
So you want one to be disabled and the other to disappear? – Kyle Delaney

2 Answers

2
votes

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);
            };
        };
    });
1
votes

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.