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

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

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

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

Заметка

Значки и описания приведены в демонстрационных целях. Примеры кода можно копировать и пересматривать для собственного сценария.

Создание карусели с помощью адаптивной карточки

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

В Copilot Studio создайте тему и назовите ее «Создать карусель», например.
Используйте слова «карусель» и «создать карусель» в качестве триггерных фраз.
Выберите значок Добавить узел под узлом Триггер, выберите Управление переменными, затем выберите Задать значение переменной.
Создайте новую переменную с именем DataJSON. Эта переменная представляет собой строку и содержит представление адаптивной карточки в формате JSON.
Скопируйте и вставьте блок кода DataJSON в поле равной значению нового узла.

Чтобы преобразовать массив JSON в адаптивную карточку, необходимо проанализировать блок кода.
Выберите значок Добавить узел под узлом Задать значение переменной, выберите Управление переменными и затем Анализировать значение. Этот узел предназначен для разбора переменной из предыдущего узла.
В поле Анализировать значение выберите переменную из предыдущего узла — в этом примере DataJSON.
Для поля Тип данных:
1. Выберите Из образцов данных, затем выберите Получить схему из примера JSON.
2. В открывшемся редакторе вставьте блок кода DataJSON и выберите Подтвердить.
Кроме того, если у вас уже есть нужная схема для таблицы:
1. Выберите Таблица, затем выберите Изменить схему.
2. В открывшемся редакторе вставьте схему и выберите Подтвердить.
  
  В этом примере подходящая схема будет выглядеть следующим образом:
```
kind: Table
properties:
  description: String
  icon: String
  linklabel: String
  linkurl: String
  name: String
```
Для параметра Сохранить как создайте еще одну пользовательскую переменную. Эта переменная представляет собой таблицу с именем DataTable. Он хранит проанализированные результаты в виде записи.
Создайте индексированную таблицу, которая будет использоваться адаптивной карточкой:
1. Выберите значок Добавить узел под узлом Анализировать значение и добавьте еще один узел Задать значение переменной.
2. Создайте новую переменную и назовите ее DataTableWithIndex.
3. В поле равной значению введите следующую формулу:
```
ForAll(
  Sequence(
    CountRows(Topic.DataTable)
  ),
  { 
    ItemNumber: Value,
    Name: Index(Topic.DataTable, Value).name,
    Description: Index(Topic.DataTable, Value).description,
    ImageURL: Index(Topic.DataTable, Value).icon,
    URL: Index(Topic.DataTable, Value).linkurl,
    Label: Index(Topic.DataTable, Value).linklabel
  }
)
```
  Эта формула создает массив JSON для отображения каждого окна карусели. Функция Sequence добавляет индекс для предоставления предсказуемых индивидуальных идентификаторов для каждой записи. Стрелки предыдущей и следующей карусели показывают нужную запись, основанную на этом индексе.
Добавьте узел Сообщение с адаптивной карточкой в нижнюю часть узлов темы:
1. Выберите значок Добавить узел под последним узлом и выберите Отправить сообщение.
2. В строке меню узла выберите Добавить, затем выберите Адаптивная карточка.
3. На панели Свойства адаптивной карточки переключитесь на Формула и замените содержимое по умолчанию на Формула адаптивной карточки.
Сохраните тему и протестируйте ее.

Блок кода DataJSON

В следующем блоке кода JSON есть повторяющиеся ключи: icon, name, description, linkurl и linklabel. Эти ключи представляют навигационные точки на карточке.

icon: ссылка на значок, который будет отображаться в левой части окна карусели.
name: метка для названия продукта, не отображается на адаптивной карточке.
description: описание продукта.
linkurl: гиперссылка, связанная с продуктом или выбором.
linklabel: текст для отображения над гиперссылкой.

Карточка в качестве примера представляет собой карусель из пяти товаров. Если в сценарии требуется карусель с более чем пятью элементами (или менее пяти), скопируйте и вставьте (или удалите) элементы из этого блока кода по мере необходимости.

[{
    "icon": "https://icon-library.com/images/placeholder-image-icon/placeholder-image-icon-14.jpg",
    "name": "Productum 1",
    "description": "Hard drive est dispositivum electromechanicum quod data retinet in forma magnetica vel optica. Haec data accessibilis est ad operandum systema computatorum.",
    "linkurl": "http://www.microsoft.com/",
    "linklabel": "Learn More"
  }, {
    "icon": "https://icon-library.com/images/placeholder-image-icon/placeholder-image-icon-13.jpg",
    "name": "Productum 2",
    "description": "Sellam infantium describere possumus quae te monere potest si infans in sella sedet et tu non es in proximo. Sellae haec est instructa sensoribus qui monent te per telephonum tuum mobilum si infans in sella manet et tu non es in loco.",
    "linkurl": "http://www.microsoft.com/",
    "linklabel": "Learn More"
  }, {
    "icon": "https://icon-library.com/images/placeholder-image-icon/placeholder-image-icon-12.jpg",
    "name": "Productum 3",
    "description": "Pluteus librorum est structura lignea vel metallica quae libros et alia volumina continet. Altitudine non amplius quam decem pedes, pluteus potest habere plures gradus vel tabulas ad libros exponendos. Hoc loco maximam aesthetiam et ordinem litterarum praestat.",
    "linkurl": "http://www.microsoft.com/",
    "linklabel": "Learn More"
  }, {
    "icon": "https://icon-library.com/images/placeholder-image-icon/placeholder-image-icon-11.jpg",
    "name": "Productum 4",
    "description": "Servitium conficiendi et transmittendi tortarum ad nuptias, quae formas et delicias unicas offert, sub vices quam viginti quinque verbis descriptum.",
    "linkurl": "http://www.microsoft.com/",
    "linklabel": "Learn More"
  }, {
    "icon": "https://icon-library.com/images/placeholder-image-icon/placeholder-image-icon-10.jpg",
    "name": "Productum 5",
    "description": "Bot GPT in correctione textus praecellit, grammaticam scrutans, errores corrigens, et textum meliorem reddens, sub vices quam viginti quinque verbis.",
    "linkurl": "http://www.microsoft.com/",
    "linklabel": "Learn More"
  }
]

Формула адаптивной карточки

В следующем блоке кода определяется формула адаптивной карточки в стиле карусели:

{
  type: "AdaptiveCard",
  '$schema': "http://adaptivecards.io/schemas/adaptive-card.json",
  version: "1.5",
  body: ForAll(Topic.DataTableWithIndex,
    {
      type: "Container",
      items: [
        {      
        type: "ColumnSet",
        columns: [
          {
            type: "Column",
            width: "auto",
            items: [
              {
                type: "Image",
                url: "data:image/svg+xml;utf8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20d%3D%22M12.2801%2016.5307L12.3527%2016.4466C12.5706%2016.153%2012.5464%2015.7363%2012.2801%2015.47L9.56078%2012.7507L16.2505%2012.7504L16.3523%2012.7435C16.7183%2012.6939%2017.0005%2012.3801%2017.0005%2012.0004L16.9936%2011.8986C16.944%2011.5325%2016.6302%2011.2504%2016.2505%2011.2504L9.55878%2011.2507L12.2807%208.52997L12.3534%208.44587C12.5713%208.1523%2012.5471%207.73563%2012.2809%207.46931C11.9881%207.17637%2011.5132%207.17628%2011.2203%207.46911L7.21873%2011.4691L7.14609%2011.5532C6.92816%2011.8468%206.95233%2012.2636%207.21863%2012.5299L11.2195%2016.5307L11.3036%2016.6033C11.5972%2016.8212%2012.0138%2016.797%2012.2801%2016.5307ZM12%202C6.47715%202%202%206.47715%202%2012C2%2017.5228%206.47715%2022%2012%2022C17.5228%2022%2022%2017.5228%2022%2012C22%206.47715%2017.5228%202%2012%202ZM12%2020.5C7.30558%2020.5%203.5%2016.6944%203.5%2012C3.5%207.30558%207.30558%203.5%2012%203.5C16.6944%203.5%2020.5%207.30558%2020.5%2012C20.5%2016.6944%2016.6944%2020.5%2012%2020.5Z%22%20fill%3D%22%23212121%22%20%2F%3E%0A%3C%2Fsvg%3E"
              }
            ],
            selectAction: {
              type: "Action.ToggleVisibility",
              title: "Preview",
              targetElements: [
                "card" & If(ItemNumber = 1, Last(Topic.DataTableWithIndex).ItemNumber, ItemNumber - 1),
                "card" & ItemNumber
              ]
            }
          },
          {
            type: "Column",
            width: "stretch",
            items: [
              {
                type: "Container",
                items: [
                  {
                    type: "ColumnSet",
                    columns: [
                      {
                        type: "Column",
                        width: "auto",
                        items: [
                          {
                            type: "Image",
                            url: ImageURL,
                            size: "Small"
                          }
                        ]
                      },
                      {
                        type: "Column",
                        width: "stretch",
                        items: [
                          {
                            type: "TextBlock",
                            text: Description,
                            wrap: true,
                            size: "Small"
                          }
                        ]
                      }
                    ]
                  }
                ]
              },
              {
                type: "ActionSet",
                actions: [
                  {
                    type: "Action.OpenUrl",
                    title: Label,
                    url: URL
                  }
                ]
              }
            ]
          },
          {
            type: "Column",
            width: "auto",
            items: [
              {
                type: "Image",
                url: "data:image/svg+xml;utf8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20d%3D%22M12.001%202C17.5238%202%2022.001%206.47715%2022.001%2012C22.001%2017.5228%2017.5238%2022%2012.001%2022C6.47813%2022%202.00098%2017.5228%202.00098%2012C2.00098%206.47715%206.47813%202%2012.001%202ZM12.001%203.5C7.30656%203.5%203.50098%207.30558%203.50098%2012C3.50098%2016.6944%207.30656%2020.5%2012.001%2020.5C16.6954%2020.5%2020.501%2016.6944%2020.501%2012C20.501%207.30558%2016.6954%203.5%2012.001%203.5ZM11.648%207.55308L11.7206%207.46897C11.9869%207.2027%2012.4036%207.17849%2012.6972%207.39635L12.7813%207.46897L16.7821%2011.4698C17.0484%2011.7361%2017.0726%2012.1528%2016.8547%2012.4464L16.782%2012.5306L12.7805%2016.5306C12.4876%2016.8234%2012.0127%2016.8233%2011.7198%2016.5303C11.4536%2016.264%2011.4295%2015.8474%2011.6474%2015.5538L11.72%2015.4697L14.442%2012.749L7.75027%2012.7493C7.37058%2012.7493%207.05678%2012.4671%207.00712%2012.1011L7.00027%2011.9993C7.00027%2011.6196%207.28243%2011.3058%207.6485%2011.2561L7.75027%2011.2493L14.44%2011.249L11.7206%208.52963C11.4544%208.26336%2011.4302%207.8467%2011.648%207.55308L11.7206%207.46897L11.648%207.55308Z%22%20fill%3D%22%23212121%22%20%2F%3E%0A%3C%2Fsvg%3E"
              }
            ],
            selectAction: {
              type: "Action.ToggleVisibility",
              title: "Next",
              targetElements: [
                "card" & ItemNumber,
                "card" & If(ItemNumber = Last(Topic.DataTableWithIndex).ItemNumber, 1, ItemNumber + 1)
              ]
            }
          }
        ]
      }
    ],
    minHeight: "1px",
    spacing: "None",
    id: "card" & ItemNumber,
    bleed: true,
    isVisible: If(ItemNumber = 1, true, false)
    }
  )
}

Обратная связь

Были ли сведения на этой странице полезными?

Last updated on 2025-05-14

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

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

Создание карусели с помощью адаптивной карточки

Блок кода DataJSON

Формула адаптивной карточки

Связанный контент

Обратная связь

Дополнительные ресурсы