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


Создание первой адаптивной карты

Адаптивные карты в Power Automate могут либо предоставлять доступ к блокам информации, либо получать данные через форму для заданного источника данных.

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

Совет

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

Предварительные условия

Microsoft Teams с установленным приложением «Рабочие процессы».

Добавление действия

В этой процедуре вы добавите действие, которое будет использовать данные из предыдущих действий в потоке и передавать информацию в канал Microsoft Teams.

  1. Войдите в Power Automate.

  2. Выберите Мои потоки на панели навигации вверху.

  3. Выберите Создать поток>Мгновенный облачный поток.

  4. Дайте своему потоку имя.

  5. Выберите триггер Активировать поток вручную.

  6. Выберите Создать.

  7. В конструкторе выберите Новый шаг.

  8. Найдите Microsoft Teams, а затем выберите Публикация адаптивной карты в канале Teams и ожидание ответа в качестве действия.

  9. Выберите команду и канал, в который вы хотите опубликовать карту.

  10. Вставьте этот код JSON в поле Сообщение.

    {
        "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
        "type": "AdaptiveCard",
        "version": "1.0",
        "body": [
            {
                "type": "TextBlock",
                "text": "Poll Request",
                "id": "Title",
                "spacing": "Medium",
                "horizontalAlignment": "Center",
                "size": "ExtraLarge",
                "weight": "Bolder",
                "color": "Accent"
            },
            {
                "type": "TextBlock",
                "text": "Header Tagline Text",
                "id": "acHeaderTagLine",
                "separator": true
            },
            {
                "type": "TextBlock",
                "text": "Poll Header",
                "weight": "Bolder",
                "size": "ExtraLarge",
                "spacing": "None",
                "id": "acHeader"
            },
            {
                "type": "TextBlock",
                "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum lorem eget neque sollicitudin, quis malesuada felis ultrices. ",
                "id": "acInstructions",
                "wrap": true
            },
            {
                "type": "TextBlock",
                "text": "Poll Question",
                "id": "acPollQuestion"
            },
            {
                "type": "Input.ChoiceSet",
                "placeholder": "Select from these choices",
                "choices": [
                    {
                        "title": "Choice 1",
                        "value": "Choice 1"
                    },
                    {
                        "title": "Choice 2",
                        "value": "Choice 2"
                    },
                    {
                        "title": "Choice 3",
                        "value": "Choice 3"
                    }
                ],
                "id": "acPollChoices",
                "style": "expanded"
            }
        ],
        "actions": [
            {
                "type": "Action.Submit",
                "title": "Submit",
                "id": "btnSubmit"
            }
        ]
    }
    
  11. В коде JSON выполните следующие замены.

    Внимание

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

    Изменяемый текст Новый текст
    Header Tagline Text Опрос Power Automate
    Poll Header Предпочтительная модель автомобилей
    Poll Question Выберите предпочтительную модель автомобилей из перечисленных здесь вариантов.
    Замените текст латиницы на причину или бизнес-контекст, который связан с тем, почему вы проводите опрос. Мы обратились к нашим сотрудникам, чтобы определить, нужно ли предоставлять персональные парковочные места, подходящие для самых популярных автомобилей.
    Choice 1 (заменить в обоих местах) Tesla
    Choice 2 (заменить в обоих местах) Lexus
    Choice 3 (заменить в обоих местах) Honda
  12. Щелкните Новый шаг, а затем найдите и выберите одно из действий Отправить электронное письмо, к которым у вас есть доступ.

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

  14. Настройте текст электронной почты следующим образом. Замените слова в фигурных скобках "{}" динамическими маркерами:
    Ответ на опрос {acPollChoices} (acPollChoices является динамическим содержимым из действия ожидания ответа). Был отправлен {Имя пользователя} (Имя пользователя — динамическое содержимое из триггера)

Тестирование адаптивной карты

Чтобы протестировать работу, запустите созданный ранее поток и подтвердите следующее.

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

  • Каналу команд назначена новая адаптивная карта.

  • При ответе на карточку выберите модель автомобиля и нажмите кнопку Отправить в нижней части адаптивной карты:

    • На адаптивной карте не должно быть ошибок.

    • Выполнение потока успешно завершено.

  • После отправки замените карту, если вы настроили область Сообщение обновления в нижней части действий ожидания ответа (показано далее с соответствующей заменой карты). В противном случае после всех отправок форма будет сбрасываться.

    Карта замены.

  • Уведомление по электронной почте содержит текст, указывающий, кто отправил ответ и какой автомобиль был выбран.

Поздравляем! Вы только что сделали первую интерактивную адаптивную карту!

Первая карта завершена.

Советы по устранению неполадок при работе с адаптивными картами

Самые распространенные проблемы, которые возникают при создании адаптивных карт:

  • Ошибки выполнения потока часто вызываются одним из следующих факторов:

    В этом случае ошибка может выглядеть, как на следующем снимке экрана:

    Сообщение об ошибке.

    • Неверно отформатированный формат JSON — обычно это не так сложно, как может показаться. Чаще всего это происходит в следующих ситуациях:

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

      • Формат JSON можно проверить, вставляя JSON в редактор полезных данных адаптивной карты.

    • Отсутствующие URL-адреса изображений — все значения изображений в адаптивных картах должны ссылаться на действительный URL-адрес. Полное содержимое изображения не поддерживается напрямую в адаптивной карточке. Протестируйте ссылки на изображения, вставляя URL-адрес в браузер, чтобы узнать, отображается ли оно.

  • Адаптивные карточки могут выглядеть не так, как ожидалось из-за стилизации и ограничений схемы:

    • Убедитесь, что значения заполнителей, стили текста и язык разметки соответствуют требованиям к схеме адаптивной карты (с рекомендациями по схеме адаптивной картыможно ознакомиться здесь)

    • Используйте модуль проверки адаптивных карт в Visual Studio Code. Чтобы установить его из приложения Visual Studio Code, откройте расширения Marketplace и выполните поиск по запросу Средство просмотра адаптивных карт.

      Расширение Visual Studio Code.

Усеченный снимок экрана расширения средства просмотра адаптивных карт, установленного в Visual Studio Code (сочетание клавиш: Ctrl+V+A после включения).

  • Ошибки, следующие за передачей адаптивной карты, часто возникают в следующих случаях:

    • Использование действия, которое не включает параметр ожидания ответа в имени

      Повторите попытку.

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