Question

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

在加载机器人时，将显示以下卡片： 1. SharePoint 2.天蓝色 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"
}

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

基本上，您需要：

发送卡
在发送卡后立即发送空白文本提示来捕获卡的输入（如第一个链接中所述）
在下一步中使用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：

在图片上
具有data，可用于捕获用户选择的选项

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

1 个答案:

使用图片