Поделиться через

Начало работы

Адаптивная карточка — это объектная модель, сериализуемая в формате JSON.

Структура адаптивной карточки

Базовая структура карточки выглядит следующим образом:

  • AdaptiveCard — корневой объект описывает сам AdaptiveCard, включая его состав элементов, его действия, то, как его следует озвучить, и версию схемы, необходимую для рендеринга.
  • body - Тело карточки состоит из блоков, известных как elements. Элементы можно создавать практически в бесконечном расположении для создания множества типов карточек.
  • actions — Многие карточки имеют набор действий, которые пользователь может предпринять. Это свойство описывает те действия, которые обычно отображаются в нижней части панели действий.

Пример карточки

Эта пример карточка, содержащая одну строку текста, за которой следует изображение.

{
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "TextBlock",
            "text": "Here is a ninja cat"
        },
        {
            "type": "Image",
            "url": "http://adaptivecards.io/content/cats/1.png"
        }
    ]
}

Свойство Type

Каждый элемент имеет type свойство, определяющее тип объекта. Глядя на приведенную выше карту, можно увидеть, что у нас есть два элемента, TextBlock и Image.

Все элементы адаптивной карточки располагаются вертикально и расширяются до ширины родительского элемента (аналогично display: block в HTML). Однако можно использовать ColumnSet для создания параллельных столбцов контейнеров.

Адаптивные элементы

Самыми основными элементами являются:

  • TextBlock — добавляет блок текста со свойствами для управления тем, как выглядит текст.
  • Изображение — добавляет изображение со свойствами для управления тем, как выглядит изображение

Элементы контейнера

Карточки также могут иметь контейнеры, которые упорядочивают коллекцию дочерних элементов.

  • Контейнер — определяет коллекцию элементов
  • ColumnSet/Column — определяет коллекцию столбцов, каждый столбец является контейнером.
  • FactSet — контейнер фактов
  • ImageSet — контейнер изображений, чтобы пользовательский интерфейс отображал галерею фотографий.

Входные элементы

Входные элементы позволяют запрашивать собственный пользовательский интерфейс для создания простых форм:

  • Input.Text — получение текстового содержимого от пользователя
  • Input.Date — получение даты от пользователя
  • Input.Time — получение времени от пользователя
  • Input.Number — получение номера от пользователя
  • Input.ChoiceSet — предоставьте пользователю набор вариантов и выберите их.
  • Input.Toggle — дать пользователю возможность выбора между двумя элементами и выбрать один из них.

Действия

Действия добавляют кнопки на карточку. Они могут выполнять различные действия, такие как открытие URL-адреса или отправка некоторых данных.

  • Action.OpenUrl — кнопка открывает внешний URL-адрес для просмотра
  • Action.ShowCard — запрашивает вложенную карточку, отображаемую пользователю.
  • Action.Submit — запрашивать все входные элементы, которые будут собраны в объект, который затем отправляется вам через какой-либо метод, определенный ведущим приложением.

Пример Action.Submit: с помощью Skype операция Action.Submit отправляет действие обратно в бот Bot Framework с помощью свойства Value, содержащего объект со всеми входными данными.

Подробнее