CODEWITHSUNDEEP
c#botframeworkadaptive-cards
Nikhil Bansal
Nikhil Bansal

Reputation: 163

How to disable button after single use in a Adaptive Cards

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

Upvotes: 3

Views: 7340

Answers (2)

Darshan Jadyal
Darshan Jadyal

Reputation: 74

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

Upvotes: 2

Kyle Delaney
Kyle Delaney

Reputation: 12264

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.

Upvotes: 2

Related Questions