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

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

  • Статья

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

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

Базовая структура карточки выглядит так:

  • 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 добавляет блок текста со свойствами, определяющими внешний вид текста.
  • Image добавляет изображение со свойствами, определяющими внешний вид изображения.

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

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

  • Container определяет коллекцию элементов.
  • 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, содержащим объект со всеми данными, введенными пользователями.

Дополнительные сведения