Пакеты SDK для шаблонов адаптивных карточек

Пакеты SDK для шаблонов адаптивных карточек упрощают заполнение шаблона карточки реальными данными на любой поддерживаемой платформе.

Ознакомьтесь с этим обзором шаблонов адаптивных карточек

Это важно

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

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

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

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

JavaScript

Библиотека адаптивных карточек с шаблонами доступна в npm и через CDN. См. ссылку на пакет для получения полной документации.

npm

установка npm 

npm install adaptivecards-templating

CDN (Сеть доставки содержимого)

<script src="https://unpkg.com/adaptivecards-templating/dist/adaptivecards-templating.min.js"></script>

Использование

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

Если вы не планируете рендеринг карточки, можно удалить код parse и render.

import * as ACData from "adaptivecards-templating";
import * as AdaptiveCards from "adaptivecards";
 
// Define a template payload
var templatePayload = {
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "TextBlock",
            "text": "Hello ${name}!"
        }
    ]
};
 
// Create a Template instance from the template payload
var template = new ACData.Template(templatePayload);
 
// Expand the template with your `$root` data object.
// This binds it to the data and produces the final Adaptive Card payload
var cardPayload = template.expand({
   $root: {
      name: "Matt Hidinger"
   }
});
 
// OPTIONAL: Render the card (requires that the adaptivecards library be loaded)
var adaptiveCard = new AdaptiveCards.AdaptiveCard();
adaptiveCard.parse(cardPayload);
document.getElementById('exampleDiv').appendChild(adaptiveCard.render());

.NET

Установка Nuget 

dotnet add package AdaptiveCards.Templating

Использование

// Import the library 
using AdaptiveCards.Templating;

var templateJson = @"
{
    ""type"": ""AdaptiveCard"",
    ""version"": ""1.2"",
    ""body"": [
        {
            ""type"": ""TextBlock"",
            ""text"": ""Hello ${name}!""
        }
    ]
}";

// Create a Template instance from the template payload
AdaptiveCardTemplate template = new AdaptiveCardTemplate(templateJson);

// You can use any serializable object as your data
var myData = new
{
    Name = "Matt Hidinger"
};

// "Expand" the template - this generates the final Adaptive Card payload
string cardJson = template.Expand(myData);

Пользовательские функции

Пользовательские функции можно добавить в библиотеку адаптивных выражений в дополнение к предварительно созданным функциям.

В приведенном ниже примере добавляется настраиваемая функция stringFormat, а для форматирования строки используется функция funtion.

string jsonTemplate = @"{
    ""type"": ""AdaptiveCard"",
    ""version"": ""1.0"",
    ""body"": [{
        ""type"": ""TextBlock"",
        ""text"": ""${stringFormat(strings.myName, person.firstName, person.lastName)}""
    }]
}";

string jsonData = @"{
    ""strings"": {
        ""myName"": ""My name is {0} {1}""
    },
    ""person"": {
        ""firstName"": ""Andrew"",
        ""lastName"": ""Leader""
    }
}";

AdaptiveCardTemplate template = new AdaptiveCardTemplate(jsonTemplate);

var context = new EvaluationContext
{
    Root = jsonData
};

// a custom function is added
AdaptiveExpressions.Expression.Functions.Add("stringFormat", (args) =>
{
    string formattedString = "";

    // argument is packed in sequential order as defined in the template
    // For example, suppose we have "${stringFormat(strings.myName, person.firstName, person.lastName)}"
    // args will have following entries
    // args[0]: strings.myName
    // args[1]: person.firstName
    // args[2]: strings.lastName
    if (args[0] != null && args[1] != null && args[2] != null) 
    {
        string formatString = args[0];
        string[] stringArguments = {args[1], args[2] };
        formattedString = string.Format(formatString, stringArguments);
    }
    return formattedString;
});

string cardJson = template.Expand(context);

Устранение неполадок

Вопрос: Почему я сталкиваюсь с исключением AdaptiveTemplateException при вызове expand()?
А. Если сообщение об ошибке выглядит как "<проблемный элемент>" в строке,< "номер> строки" неправильно сформирован для пары '$data: '.
Убедитесь, что для параметра "$data" задано допустимое значение json, например число, логическое значение, объект и массив, или соответствует правильному синтаксису языка адаптивного шаблона, а запись существует в контексте данных в номере строки.

Вопрос: Почему при вызове expand() возникает исключение ArgumentNullException?
А. Если ваше сообщение об ошибке выглядит следующим образом: проверьте, задан ли родительский контекст данных, или введите значение, отличное от NULL, для '<проблемного элемента>' на строке, '<номер строки>'.
Он указывает, что для запрошенной привязки данных нет контекста данных. Убедитесь, что для текущей привязки задан контекст корневых данных, если он существует, убедитесь, что любой контекст данных доступен для текущей привязки, как указано номером строки.

Вопрос: Почему дата и время в формате RFC 3389, например "2017-02-14T06:08:00Z" при использовании с шаблоном не работает с функциями TIME/DATE?
А. SDK .NET версии NuGet 1.0.0-rc.0 демонстрирует это поведение. это поведение исправлено в последующих релизах. json.Net по умолчанию поведение десериализатора изменяет форматную строку даты и времени, и это поведение будет отключено в будущих версиях. Используйте функцию formatDateTime() для форматирования строки даты и времени в RFC 3389, как показано в этом примере, или можно обойти функции TIME/DATE и просто использовать formatDateTime(). Дополнительные сведения о formatDateTime() см. здесь.

  • Last updated on