Модель водопада с адаптивными картами в v4.0

Question

Я пытаюсь создать модель водопада с помощью адаптивных карт в C # версии 4.0. Мой сценарий выглядит следующим образом:

При загрузке бота будут показаны следующие карты: 1. SharePoint 2. Лазурный 3. O365

Как только я нажму на любую из них, будет показан новый набор карт: При выборе «SharePoint» будут показаны следующие карточки: 1. Создать сайт 2. Создайте подсайт.

и при выборе любого из вышеперечисленных вариантов форма вызывается с набором вопросов, таких как: 1. что такое название сайта 2. владелец сайта и так далее ..

Пользовательский интерфейс, как показано ниже:

Я попытался создать структуру на 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 или переключите операторы на следующем шаге вОпределите, какую карту отображать дальше, основываясь на вводе пользователя.При желании вы можете создать карту более динамично, используя вторую ссылку

---

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, который вы использовали бы, чтобы захватить, какой выбор выбрал пользователь