Адаптивные карточки: шаблонизация

Мы рады поделиться предварительным просмотром новых инструментов, которые помогут вам создавать, повторно использовать и предоставлять общий доступ к адаптивным карточкам.

Это важно

Критические изменения в кандидате на выпуск за май 2020 г.

Релиз-кандидат шаблонов включает некоторые незначительные изменения, нарушающие совместимость, которые следует учитывать, если вы использовали старые пакеты. Подробные сведения см. ниже.

Критические изменения по состоянию на май 2020 г.

Синтаксис привязки изменился с {...} на ${...}.
- Например: "text": "Hello {name}" становится "text": "Hello ${name}"
API JavaScript больше не содержит EvaluationContext объект. Просто передайте данные в функцию expand . Дополнительные сведения см. на странице пакета SDK .
API .NET был изменен для более тесного соответствия API JavaScript. Дополнительные сведения см. на странице пакета SDK .

Как шаблонирование может помочь вам

Шаблон позволяет разделить данные и макет в адаптивной карточке.

Она помогает создать карточку один раз, а затем заполнить ее реальными данными

Сегодня невозможно создать карту с помощью конструктора адаптивных карточек и использовать этот код JSON для заполнения полезных данных динамическим содержимым. Чтобы добиться этого, необходимо написать пользовательский код для создания строки JSON или использовать пакеты SDK для объектной модели для создания OM, представляющего карточку, и сериализовать ее в JSON. В любом случае конструктор является однократной одноразовой операцией и не упрощает настройку макета карты позже после его преобразования в код.

Это делает данные, передаваемые по проводу, меньшего объема.

Представьте себе мир, в котором шаблон и данные могут быть объединены непосредственно на клиенте. Это означает, что если вы используете один и тот же шаблон несколько раз или хотите обновить его с новыми данными, вам просто нужно отправить новые данные на устройство, и он может повторно использовать один и тот же шаблон снова и снова.

Это поможет вам создать отличную карточку на основе только предоставленных данных

Мы считаем, что адаптивные карточки отличны, но что, если вам не нужно писать адаптивную карточку для всего, что вы хотите отобразить пользователю? С помощью службы шаблонов (описано ниже) мы можем создать мир, где каждый может участвовать, обнаруживать и делиться шаблонами по любому типу данных.

Поделитесь своими проектами, вашей организацией или всем Интернетом.

ИИ и другие службы могут улучшить взаимодействие с пользователями

Разделяя данные и содержимое, открывается возможность для ИИ и других служб рассуждать о данных в карточках, которые мы видим, и повышать производительность пользователей или помогать нам находить информацию.

Что такое шаблонизация адаптивных карточек?

Он состоит из 3 основных компонентов:

Язык шаблона — это синтаксис, используемый для разработки шаблона. Конструктор даже позволяет просматривать шаблоны во время разработки, включая пример данных.
Пакет SDK для шаблонов будет существовать на всех поддерживаемых платформах адаптивной карточки. Эти пакеты SDK позволяют заполнять шаблон реальными данными, на стороне сервера или на стороне клиента.
Служба шаблонов — это служба проверки концепции, которая позволяет любому пользователю находить, участвовать в работе и предоставлять общий доступ к набору известных шаблонов.

Язык шаблона

Язык шаблона — это синтаксис, используемый для создания шаблона адаптивной карточки.

Замечание

Следуйте примеру ниже, открыв новую вкладку, чтобы...

https://adaptivecards.io/designer

Нажмите кнопку "Режим предварительного просмотра ", чтобы переключаться между режимом конструктора и режимом предварительного просмотра.

Снимок экрана конструктора

Недавно обновленный конструктор добавляет поддержку разработки шаблонов и предоставления примеров данных для предварительного просмотра карточки во время разработки.

Вставьте приведенный ниже пример в панель Card Payload Editor:

EmployeeCardTemplate.json

{
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "ColumnSet",
            "style": "accent",
            "bleed": true,
            "columns": [
                {
                    "type": "Column",
                    "width": "auto",
                    "items": [
                        {
                            "type": "Image",
                            "url": "${photo}",
                            "altText": "Profile picture",
                            "size": "Small",
                            "style": "Person"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Hi ${name}!",
                            "size": "Medium"
                        },
                        {
                            "type": "TextBlock",
                            "text": "Here's a bit about your org...",
                            "spacing": "None"
                        }
                    ]
                }
            ]
        },
        {
            "type": "TextBlock",
            "text": "Your manager is: **${manager.name}**"
        },
        {
            "type": "TextBlock",
            "text": "Your peers are:"
        },
        {
            "type": "FactSet",
            "facts": [
                {
                    "$data": "${peers}",
                    "title": "${name}",
                    "value": "${title}"
                }
            ]
        }
    ]
}

Затем вставьте приведенные ниже данные JSON в редактор примеров данных.

Примеры данных помогают точно определить, как ваша карточка будет отображаться во время выполнения при передаче фактических данных.

EmployeeData

{
    "name": "Matt",
    "photo": "https://pbs.twimg.com/profile_images/3647943215/d7f12830b3c17a5a9e4afcc370e3a37e_400x400.jpeg",
    "manager": {
        "name": "Thomas",
        "title": "PM Lead"
    },
    "peers": [
        {
            "name": "Lei",
            "title": "Sr Program Manager"
        },
        {
            "name": "Andrew",
            "title": "Program Manager II"
        },
        {
            "name": "Mary Anne",
            "title": "Program Manager"
        }
    ]
}

Нажмите кнопку "Режим предварительного просмотра ". Вы должны увидеть, как карточка отображается в соответствии с приведённым выше образцом данных. Не забудьте внести изменения в образец данных и посмотреть обновление карты в режиме реального времени.

Поздравляем, вы только что создали свой первый шаблон адаптивной карточки! Далее давайте узнаем, как заполнить шаблон реальными данными.

Дополнительные сведения о языке шаблона

Поддержка пакета SDK

Пакеты SDK для шаблонов позволяют заполнить шаблон реальными данными.

Замечание

В настоящее время пакеты SDK для шаблонов доступны для .NET и NodeJS. Со временем мы выпустим пакеты SDK для всех остающихся платформ адаптивных карточек, включая iOS, Android, UWP и т. д.

Платформа	Пакет	Установка	Документация
JavaScript		`npm install adaptivecards-templating`	документация
.NET		`dotnet add package AdaptiveCards.Templating`	документация

Пример JavaScript

В приведенном ниже коде JavaScript показан общий шаблон, который будет использоваться для заполнения шаблона данными.

var template = new ACData.Template({ 
    // Card Template JSON
});

var card = template.expand({
    $root: {
        // Data Fields
    }
});

// Now you have an AdaptiveCard ready to render!

Пример C#

В приведенном ниже примере C# показан общий шаблон, который будет использоваться для заполнения шаблона данными.

var template = new AdaptiveCards.Templating.AdaptiveCardTemplate(cardJson);
   
var card = template.Expand(new {Key="Value"});

// Now you have an AdaptiveCard ready to render!

Узнайте больше о наборах SDK для шаблонов

Служба шаблонов

Служба шаблонов адаптивных карточек — это служба проверки концепции, которая позволяет любому пользователю находить, участвовать в работе и предоставлять общий доступ к набору известных шаблонов.

Это полезно, если вы хотите отобразить некоторые данные, но не хотите беспокоиться о написании пользовательской адаптивной карточки для него.

API для получения шаблона достаточно простой, но сервис на самом деле предлагает гораздо больше, включая возможность анализировать ваши данные и находить шаблон, который может подойти вам.

HTTP GET https://templates.adaptivecards.io/graph.microsoft.com/Profile.json

Все шаблоны являются неструктурированными JSON-файлами, хранящимися в репозитории GitHub, чтобы любой пользователь мог участвовать в них, как любой другой открытый исходный код.

Дополнительные сведения о службе шаблонов карточек

Дальнейшие действия и отправка отзывов

Шаблон и разделение презентаций от данных делает нас гораздо ближе к нашей миссии: "экосистема стандартизированного обмена контентом между приложениями и службами". У нас много чего, что мы можем предложить в этой области, так что оставайтесь с нами и сообщите нам, как это работает для вас на GitHub!

Last updated on 2025-07-03