botFramework: to disable card buttons in web chat under bot framework

Question

I want to disable card buttons in web chat under bot framework. For example, In a card i am having multiple buttons and i want to disable some buttons based on some data value. How can i do that?

Answer 1

In the future I would recommended narrowing down your requests to be less broad, and include details that pertain to what you are trying to achieve. Nevertheless, I have filled in some gaps and made something I hope will be helpful. :)

I have a working example bot that does the following:

• displays a hero card for every response
• if the user says 'hi' or 'hello', two buttons will show on the card
• if the user does not greet the bot, only one button will show.
• tells the user whether they greeted the bot (SendGreeting, true or false)

I saved a Boolean in UserData, SendGreeting, to notify the bot whether or not to display the second button. In the controller, I have the following code which:

• instantiates UserData,
• determines whether SentGreeting should be true or false

• then saves that Boolean to UserData.SentGreeting.

           // create connector service
          ConnectorClient connector = new ConnectorClient(new Uri(activity.ServiceUrl));
          // get state client object
          StateClient stateClient = activity.GetStateClient();
          // retrieve user data
          BotData userData = await stateClient.BotState.GetUserDataAsync(activity.ChannelId, activity.From.Id);
  
          bool SentGreeting;
          if (activity.Text == "hello" || activity.Text == "hi")
          {
              SentGreeting = true;
          } else
          {
              SentGreeting = false;
          }
          userData.SetProperty<bool>("SentGreeting", SentGreeting);
  
          // save state
          await stateClient.BotState.SetUserDataAsync(activity.ChannelId, activity.From.Id, userData);
  
          // initiate CardDialog
          await Conversation.SendAsync(activity, () => new CardDialog());
  

In dialog, there is the following code which does:

• Retrieve SentGreeting from UserData
• Creates the Hero Card

• creates the secret button and adds it to the button list only if SentGreeting is true

          // create sentGreeting
      bool sentGreeting;
      // assign value from UserData.SentGreeting
      context.UserData.TryGetValue<bool>("SentGreeting", out sentGreeting);
  
      // create standard button list (for those who do not greet the bot)
      var GenericButtonList = new List<CardAction>
      {
          new CardAction(ActionTypes.OpenUrl, "Bot Framework", value: "https://docs.botframework.com/en-us/"),
      };
  
      // create the hero card
      var Card = new HeroCard()
      {
          Title = "Select an Action",
          Subtitle = "Choose from available actions",
          Text = "If you were polite and said \'hi\' or \'hello\' to this bot, you will see two buttons below.",
          Images = new List<CardImage> { new CardImage("https://cloud.githubusercontent.com/assets/14900841/23733811/c618e402-042f-11e7-9b8e-6262d9f2d898.JPG") },
          Buttons = GenericButtonList
      };
      // create secret button that only users who said hi can see
      CardAction secretButton = new CardAction();
      secretButton.Title = "Very Polite";
      secretButton.Type = "openUrl";
      secretButton.Value = "https://github.com/Microsoft/BotBuilder-Samples/tree/master/CSharp/demo-ContosoFlowers/ContosoFlowers.Services";
  
      if (sentGreeting)
      {
          Card.Buttons.Add(secretButton);
      }
  

Link to the GitHub repo for this bot

Answer 2

You can't Enable/Disable using the out-of-the-box WebChat. Though, you might be able to build your custom WebChat and add that feature.

All the magic happens on the Attachment.tsx file. There is a buttons function that is called when, for example, a HeroCard is being rendered. That function creates a button and applies a CSS class. You could change the class dynamically based on some value of your button.

BTW, if you manage to do that, IMO, it could be good contribution to the WebChat component.