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

Question

我正在尝试使用C＃4.0版中的自适应卡来创建瀑布模型。 我的情况如下：

加载机器人时，将显示以下卡片：1. SharePoint 2. Azure 3. O365

一旦单击它们，就会显示新的卡片组：选择“ SharePoint”时，将显示以下卡片：1.创建站点2.创建子站点。

在选择上述任何选项时，都会调用带有以下问题的表格：1.什么是网站标题2.网站所有者等等。

UI如下图所示：

我尝试在https://adaptivecards.io/上创建结构，但找不到与这种情况有关的任何相关代码。

如果以前有做过，请共享文档或代码片段。

谢谢

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"
}

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

• 在瀑布对话框中使用自适应卡

• （可选） 在发送前动态更换卡

基本上，您将需要：

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