New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create a Multiselect carousel using adaptive cards in Webchat Channel #1002

Open
pratiksinghchauhan opened this Issue Jun 5, 2018 · 3 comments

Comments

Projects
None yet
2 participants
@pratiksinghchauhan

pratiksinghchauhan commented Jun 5, 2018

I have been trying to Implement a multi-select carousel in webchat channel,
fireshot capture 18 - visualizer i adaptive cards_ - https___adaptivecards io_visualizer_index html

The above picture is what I have already implemented, now if there are 20 of them and I want to provide a button of show more, and if the user clicks on this button then more 5 should get loaded and when the user clicks confirm then everything should get submitted, I am trying to use the sample but I am unable to implement it, my js code is

bot.dialog('/showCards', [
function (session) {
    var cards = carousel_json;
    var reply = new builder.Message(session)
        .attachmentLayout(builder.AttachmentLayout.carousel)
        .attachments(cards);
      session.send(reply);
})

I am not getting any output on my webchat channel it just renders a small empty box, can someone please tell me if there is another way to achieve what I want or is there something I am missing.

Here is the json for the card if that is needed

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "type": "ColumnSet",
      "separator": true,
      "spacing": "medium",
      "columns": [
        {
          "type": "Column",
          "width": "stretch",
          "items": [
            {
              "type": "Input.Toggle",
              "id": "T1",
              "title": "Key 1",
              "value": "true",
              "valueOn": "true",
              "weight": "bolder",
              "valueOff": "false"
            },
            {
              "type": "TextBlock",
              "text": "Desc 1",
              "isSubtle": true
            }
          ]
        },
        {
          "type": "Column",
          "width": "auto",
          "items": [
            {
              "type": "TextBlock",
              "text": "Value 1",
              "horizontalAlignment": "right",
              "isSubtle": true,
              "weight": "bolder"
            }
          ]
        }
      ]
    },
    {
      "type": "ColumnSet",
      "separator": true,
      "spacing": "medium",
      "columns": [
        {
          "type": "Column",
          "width": "stretch",
          "items": [
            {
              "type": "Input.Toggle",
              "id": "T2",
              "title": "Key 2",
              "value": "true",
              "valueOn": "true",
              "weight": "bolder",
              "valueOff": "false"
            },
            {
              "type": "TextBlock",
              "text": "desc 2",
              "isSubtle": true
            }
          ]
        },
        {
          "type": "Column",
          "width": "auto",
          "items": [
            {
              "type": "TextBlock",
              "text": "Value 2",
              "horizontalAlignment": "right",
              "isSubtle": true,
              "weight": "bolder"
            }
          ]
        }
      ]
    },
    {
      "type": "ColumnSet",
      "separator": true,
      "spacing": "medium",
      "columns": [
        {
          "type": "Column",
          "width": "stretch",
          "items": [
            {
              "type": "Input.Toggle",
              "id": "T3",
              "title": "Key 3",
              "value": "true",
              "valueOn": "true",
              "weight": "bolder",
              "valueOff": "false"
            },
            {
              "type": "TextBlock",
              "text": "Desc 3",
              "isSubtle": true
            }
          ]
        },
        {
          "type": "Column",
          "width": "auto",
          "items": [
            {
              "type": "TextBlock",
              "text": "Value 3",
              "horizontalAlignment": "right",
              "isSubtle": true,
              "weight": "bolder"
            }
          ]
        }
      ]
    },
    {
      "type": "ColumnSet",
      "separator": true,
      "spacing": "medium",
      "columns": [
        {
          "type": "Column",
          "width": "stretch",
          "items": [
            {
              "type": "Input.Toggle",
              "id": "T4",
              "title": "Key 4",
              "value": "true",
              "valueOn": "true",
              "weight": "bolder",
              "valueOff": "false"
            },
            {
              "type": "TextBlock",
              "text": "Desc 4",
              "isSubtle": true
            }
          ]
        },
        {
          "type": "Column",
          "width": "auto",
          "items": [
            {
              "type": "TextBlock",
              "text": "Value 4",
              "horizontalAlignment": "right",
              "isSubtle": true,
              "weight": "bolder"
            }
          ]
        }
      ]
    },
    {
      "type": "ColumnSet",
      "separator": true,
      "spacing": "medium",
      "columns": [
        {
          "type": "Column",
          "width": "stretch",
          "items": [
            {
              "type": "Input.Toggle",
              "id": "T5",
              "title": "Key 5",
              "value": "true",
              "valueOn": "true",
              "weight": "bolder",
              "valueOff": "false"
            },
            {
              "type": "TextBlock",
              "text": "Desc 5",
              "isSubtle": true
            }
          ]
        },
        {
          "type": "Column",
          "width": "auto",
          "items": [
            {
              "type": "TextBlock",
              "text": "Value 5",
              "horizontalAlignment": "right",
              "isSubtle": true,
              "weight": "bolder"
            }
          ]
        }
      ]
    }
  ],
  "actions": [
    {
      "type": "Action.Submit",
      "title": "Confirm"
    }
  ]
}

(@compulim: I edited this for better clarity of the code)

@Kartik1607

This comment has been minimized.

Kartik1607 commented Jun 5, 2018

There is an Action Action.ShowMore which can display another adaptive card when clicked.
As far as 20 items go, there is something wrong with that approach from UI and UX perspective.

Can you narrow down to options? How about showing first 5 choices first along wiith a suggested action to load more. If user clicks the action button , then show next 5 in different message.

Try this for showing card

bot.dialog('/showCards', [ function (session) { 
    var cards = carousel_json; 
    var reply = new builder.Message(session).attachmentLayout(builder.AttachmentLayout.carousel).attachments([{
        'contentType': 'application/vnd.microsoft.card.adaptive',
        'content':cards
    }]); 
    session.send(reply); 
}]);
@pratiksinghchauhan

This comment has been minimized.

pratiksinghchauhan commented Jun 5, 2018

I am sorry this doesn't work, the method suggested just gives error that card rendering error was there while the other one rendered the top card atleast but the carousel part was not rendered.

@Kartik1607

This comment has been minimized.

Kartik1607 commented Jun 10, 2018

Seems to be working. Here is the code I tested this from.

bot.dialog('/showCards', [

    (session, args) => {

      let carousel_json = {
        "type": "AdaptiveCard",
        "version": "1.0",
        "body": [
          {
            "type": "ColumnSet",
            "separator": true,
            "spacing": "medium",
            "columns": [
              {
                "type": "Column",
                "width": "stretch",
                "items": [
                  {
                    "type": "Input.Toggle",
                    "id": "T1",
                    "title": "Key 1",
                    "value": "true",
                    "valueOn": "true",
                    "weight": "bolder",
                    "valueOff": "false"
                  },
                  {
                    "type": "TextBlock",
                    "text": "Desc 1",
                    "isSubtle": true
                  }
                ]
              },
              {
                "type": "Column",
                "width": "auto",
                "items": [
                  {
                    "type": "TextBlock",
                    "text": "Value 1",
                    "horizontalAlignment": "right",
                    "isSubtle": true,
                    "weight": "bolder"
                  }
                ]
              }
            ]
          },
          {
            "type": "ColumnSet",
            "separator": true,
            "spacing": "medium",
            "columns": [
              {
                "type": "Column",
                "width": "stretch",
                "items": [
                  {
                    "type": "Input.Toggle",
                    "id": "T2",
                    "title": "Key 2",
                    "value": "true",
                    "valueOn": "true",
                    "weight": "bolder",
                    "valueOff": "false"
                  },
                  {
                    "type": "TextBlock",
                    "text": "desc 2",
                    "isSubtle": true
                  }
                ]
              },
              {
                "type": "Column",
                "width": "auto",
                "items": [
                  {
                    "type": "TextBlock",
                    "text": "Value 2",
                    "horizontalAlignment": "right",
                    "isSubtle": true,
                    "weight": "bolder"
                  }
                ]
              }
            ]
          },
          {
            "type": "ColumnSet",
            "separator": true,
            "spacing": "medium",
            "columns": [
              {
                "type": "Column",
                "width": "stretch",
                "items": [
                  {
                    "type": "Input.Toggle",
                    "id": "T3",
                    "title": "Key 3",
                    "value": "true",
                    "valueOn": "true",
                    "weight": "bolder",
                    "valueOff": "false"
                  },
                  {
                    "type": "TextBlock",
                    "text": "Desc 3",
                    "isSubtle": true
                  }
                ]
              },
              {
                "type": "Column",
                "width": "auto",
                "items": [
                  {
                    "type": "TextBlock",
                    "text": "Value 3",
                    "horizontalAlignment": "right",
                    "isSubtle": true,
                    "weight": "bolder"
                  }
                ]
              }
            ]
          },
          {
            "type": "ColumnSet",
            "separator": true,
            "spacing": "medium",
            "columns": [
              {
                "type": "Column",
                "width": "stretch",
                "items": [
                  {
                    "type": "Input.Toggle",
                    "id": "T4",
                    "title": "Key 4",
                    "value": "true",
                    "valueOn": "true",
                    "weight": "bolder",
                    "valueOff": "false"
                  },
                  {
                    "type": "TextBlock",
                    "text": "Desc 4",
                    "isSubtle": true
                  }
                ]
              },
              {
                "type": "Column",
                "width": "auto",
                "items": [
                  {
                    "type": "TextBlock",
                    "text": "Value 4",
                    "horizontalAlignment": "right",
                    "isSubtle": true,
                    "weight": "bolder"
                  }
                ]
              }
            ]
          },
          {
            "type": "ColumnSet",
            "separator": true,
            "spacing": "medium",
            "columns": [
              {
                "type": "Column",
                "width": "stretch",
                "items": [
                  {
                    "type": "Input.Toggle",
                    "id": "T5",
                    "title": "Key 5",
                    "value": "true",
                    "valueOn": "true",
                    "weight": "bolder",
                    "valueOff": "false"
                  },
                  {
                    "type": "TextBlock",
                    "text": "Desc 5",
                    "isSubtle": true
                  }
                ]
              },
              {
                "type": "Column",
                "width": "auto",
                "items": [
                  {
                    "type": "TextBlock",
                    "text": "Value 5",
                    "horizontalAlignment": "right",
                    "isSubtle": true,
                    "weight": "bolder"
                  }
                ]
              }
            ]
          }
        ],
        "actions": [
          {
            "type": "Action.Submit",
            "title": "Confirm"
          }
        ]
      };

      var cards = carousel_json;
      var reply = new builder.Message(session).attachmentLayout(builder.AttachmentLayout.carousel)
        .attachments([
          {
            "contentType": "application/vnd.microsoft.card.adaptive",
            "content": cards
          },
          {
            "contentType": "application/vnd.microsoft.card.adaptive",
            "content": cards
          }
        ]);
      session.send(reply);
    }]);

Output : Image Output

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment