microsoft / microsoft/BotFramework-WebChat

Web Chat UI fails to render action in overflow menu when mode property is set to `secondary`

Open
#4,970 0 comments 0 reactions 1 assignee View on GitHub

@compulim is already working on this.

Since Nov 30, 2023.

Bot Services customer-reported feature-request
Dominant language
HTML
Stars
1.8k
Forks
1.6k
Avg merge
22h 58m
Merged PRs (30d)
2

Description

Is your feature request related to a problem?

Reference IcM #430453809.

As described in the Adaptive Cards schema documentation, starting with schema version 1.5, every action can include an optional mode property. By default, this property is set to primary which tells the adaptive card to render the action as a button. If mode is set to secondary, then the action should be rendered as an overflow menu.

However, in Web Chat, when an adaptive card (example below) is sent by the bot that includes an action where the mode property is set to "secondary", Web Chat is unable to render the overflow menu. Instead, the overflow menu is rendered as basic HTML on the page. The functionality of the action appears to be undisturbed, so the issue is only with regard to the correct rendering of elements in the UI.

{

  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.5",
  "body": [
    {
      "type": "ActionSet",
      "actions": [
        {
          "type": "Action.Submit",
          "title": "Log a Ticket",
          "id": "LogTicket",
          "data": {
            "value": "Log a Ticket"
          }
        },
        {
          "type": "Action.Submit",
          "title": "View Ticket Status",
          "id": "ViewTicketStatus",
          "data": {
            "value": "View Ticket Status"
          }
        },
        {
          "type": "Action.Submit",
          "title": "Create DL",
          "id": "CreateDL",
          "mode": "secondary",
          "data": {
            "value": "Create DL"
          }
        },
        {
          "type": "Action.Submit",
          "title": "View DL Details",
          "id": "ViewDLDetails",
          "mode": "secondary",
          "data": {
            "value": "View DL Details"
          }
        }  
      ]
    }
  ]
}
Describe the suggestion or request in detail

Web Chat should support adaptive cards actions where the mode property has a set value of secondary so it can properly display the action as an overflow menu.

Describe alternatives you have considered

The only other option is to render the action as a simple button.

Additional context

Adaptive Cards Designer
image

Test in Web Chat demo - End result is the same when using Web Chat in an HTML page.
adaptiveCardSecondaryButton

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.