v4.0中带自适应卡片的瀑布模型

Question

我正在尝试借助 C# 4.0 版中的自适应卡片创建一个瀑布模型。 我的场景如下：

在加载机器人时，将显示以下卡片： 1. 共享点 2.天蓝色 3.O365

一旦我点击其中任何一个，新的一组卡片将显示如下： 选择“SharePoint”后，将显示以下卡片： 1. 创建站点 2. 创建子站点。

在选择上述任何选项时，会调用一个表单，其中包含一组问题，例如： 1.什么是网站标题 2.网站所有者 等等..

界面如下图：

我尝试在https://adaptivecards.io/ 上创建结构，但找不到与此类场景相关的任何相关代码。

如果有人之前做过，请分享文档或代码sn-p。

谢谢

Answer 1

这是一张带有Input.ChoiceSet的基本卡片：

{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "Container",
            "items": [
                {
                    "type": "Input.ChoiceSet",
                    "id": "first",
                    "placeholder": "Placeholder text",
                    "choices": [
                        {
                            "title": "SharePoint",
                            "value": "SharePoint"
                        },
                        {
                            "title": "Azure",
                            "value": "Azure"
                        },
                        {
                            "title": "O365",
                            "value": "O365"
                        }
                    ],
                    "style": "expanded"
                }
            ]
        }
    ],
    "actions": [
      {
          "type": "Action.Submit",
          "title": "Submit"
      }  
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.0"
}

然后，在您的机器人中，按照以下答案处理用户输入：

• Using Adaptive Cards in Waterfall Dialogs

• （可选）Dynamically Changing The Card Before Sending

基本上，你会想要：

1. 发送卡片

2. 在发送卡片后立即发送空白文本提示来捕获卡片的输入（如第一个链接中所述）

3. 在下一步中使用 if 或 switch 语句来根据用户的输入确定接下来要显示的卡片。您可以选择使用第二个链接更动态地创建卡片

---

AdaptiveCards Designer 很不错，但是它缺少设置actions 属性的能力。您可以手动添加（就像我在上面所做的那样）：

"actions": [
      {
          "type": "Action.Submit",
          "title": "Submit"
      }  
    ],

---

使用图片

如果您想使用图片而不是 ChoiceSet，您可以执行以下操作：

{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "Container",
            "items": [
                {
                    "type": "Image",
                    "id": "choice1",
                    "selectAction": {
                        "type": "Action.Submit",
                        "title": "choice1",
                        "data": {
                            "choice": 1
                        }
                    },
                    "url": "https://acuvate.com/wp-content/uploads/2017/02/Microsoft-Botframework.fw_-thegem-person.png",
                    "altText": ""
                },
                {
                    "type": "Image",
                    "id": "choice2",
                    "selectAction": {
                        "type": "Action.Submit",
                        "title": "choice2",
                        "data": {
                            "choice": 2
                        }
                    },
                    "url": "https://acuvate.com/wp-content/uploads/2017/02/Microsoft-Botframework.fw_-thegem-person.png",
                    "altText": ""
                },
                {
                    "type": "Image",
                    "id": "choice3",
                    "selectAction": {
                        "type": "Action.Submit",
                        "title": "choice3",
                        "data": {
                            "choice": 3
                        }
                    },
                    "url": "https://acuvate.com/wp-content/uploads/2017/02/Microsoft-Botframework.fw_-thegem-person.png",
                    "altText": ""
                }
            ]
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.0"
}

重要的部分是确保Action.Submit:

1. 在图片上
2. 有data，您将使用它来捕获用户选择的选项