Как отобразить массив JSON с помощью Adaptive Card Row - Использование конструктора для создания шаблона - PullRequest
Новая
       42

Как отобразить массив JSON с помощью Adaptive Card Row - Использование конструктора для создания шаблона

1 голос
/ 15 апреля 2020

Я пытаюсь создать шаблон для адаптивной карты. Моя адаптивная карта во многом похожа на адаптивную карту отчета о расходах. https://adaptivecards.io/samples/ExpenseReport.html

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

Предварительный просмотр черновой адаптивной карты (с числом c строк)

Draft Adaptive Card

Проблема, с которой я сталкиваюсь, заключается в исправлении количества строк, в предоставленных образцах фиксированное количество строк. В реальных случаях число строк будет динамическим c. В одном расписании будет 4 строки, а в других - 2 строки. Таким образом, шаблон с фиксированным числом строк не будет работать в моем случае.

Я хотел бы использовать шаблонизацию и создать одну строку в адаптивном шаблоне карты и связать ее с массивом строки в JSON. В зависимости от размера массива строки будут реплицированы в адаптивную карту. Ниже приведен пример шаблона.

Шаблон адаптивной карты

Adaptive Card template

Скриншот привязки данных

Databinding screenshot

JSON: Число элементов массива будет динамическим c, и ожидается, что шаблон рассмотрите это и разверните. 

"teRows": [{
                    "date": "Date1",
                    "task": "task1",
                    "hours": "10"
                }, {
                    "date": "Date2",
                    "task": "task2",
                    "hours": "20"
                }, {
                    "date": "Date3",
                    "task": "task3",
                    "hours": "30"
                }, {
                    "date": "Date4",
                    "task": "task4",
                    "hours": "10"
                }
                ]

Руководство по шаблонам: https://docs.microsoft.com/en-us/adaptive-cards/templating/language

1 Ответ

1 голос
/ 15 апреля 2020

Я понял, для массива нам нужно создать привязку, используя {$ root .arrayname}. Я скучал по этой части.

В основном, $ root - это ваша целая JSON. Теперь, где бы ни находился массив JSON, мы должны соответственно обращаться к нему.

Пример JSON: 

{
    "title": "username (timePeriod)",
    "header":[
    {
        "field":"Submitted On",
        "value":"Date"
    },
    {
        "field":"Total Hours",
        "value":"40"
    }
    ],
    "submittedOn": "dateField",
    "totalHours": "totalHours",
    "description": "data editor",
    "creator": {
        "name": "NxP"
    },
     "teRows":[ {
            "date": "Date1",
            "task": "task1",
            "hours": "10"
        },{
            "date": "Date2",
            "task": "task2",
            "hours": "20"
        },{
            "date": "Date3",
            "task": "task3",
            "hours": "30"
        }
    ]
}

Случай 1: Получить заголовок, используя 

text property = {title}
Data Context = blank

Случай 2: получение имени создателя 

text property = {creator.name}
Data Context = blank

Случай 3: сопоставление строк с массивом teRows.

Опция 1: Добавление привязки на уровне контейнера - уровень ColumnSet 

columnset text property = blank
columnset Data Context = {$root.teRows}

Добавление свойства текста отдельных столбцов 

Date text property = {date}
Task text property = {task}
Hours text property = {hours}

Опция 2: Добавить привязка данных и свойство текста на уровне столбца, а не на уровне набора столбцов 

Date text property = {date}
Date Data Context = {$root.teRows}
Task text property = {task}
Task Data Context = {$root.teRows}
Hours text property = {hours}
Hours Data Context = {$root.teRows}

Вывод карты с динамическим связыванием массива c. Final GIF

...