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

Разработка собственных карта панели мониторинга с помощью конструктора карта

  • Статья

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

Быстрый просмотр — это мощное средство, позволяющее конструктору карта создавать карточки, выходящие за рамки традиционных карточек панели мониторинга, и создавать интерактивные и информативные данные с помощью нотации объектов JavaScript (JSON). Вы можете "закодировать" одно быстрое представление, используя возможности разметки адаптивных карточек, чтобы сделать их карточки динамическими. Результат можно просмотреть в конструкторе карта перед предоставлением общего доступа другим пользователям.

Примечание.

Чтобы создать собственные карточки с помощью быстрого просмотра, вы должны быть знакомы с шаблонами JSON и адаптивных карточек. Дополнительные сведения см. в разделе Шаблоны адаптивных карточек.

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

Изменение панели мониторинга

Для доступа к конструктору карта на панели мониторинга карта панели элементов требуются разрешения уровня участника или владельца. Сведения о начале работы см. в статье о создании панели мониторинга Viva Connections и добавлении карточек.

Использование шаблона карта

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

  1. В режиме редактирования нажмите + Добавить карточку на панели мониторинга.

  2. Выберите Конструктор карточек.

    Снимок экрана: значок для добавления конструктора карточек карта.

  3. Выбрав конструктор карточек карта, щелкните значок Изменить, чтобы открыть область свойств.

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

    Снимок экрана: обзор области свойств конструктора карта.

  5. В разделе Тип шаблона выберите один из трех шаблонов для применения:

    • Заголовок: создание карта с простым заголовком.
    • Изображение. Создание карта с заголовком и изображением.
    • Описание. Создайте карта с заголовком и описанием.

    Примечание.

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

    В зависимости от выбранного типа шаблона поля, соответствующие типу шаблона, заполняется в разделе содержимого карта. Например, если вы выбрали шаблон Изображение, можно ввести значения свойств Image и Heading в соответствующие текстовые поля.

  6. Выберите размер карта:

    • Средний: размер по умолчанию карта и позволяет добавить одну кнопку в шаблоны Заголовок и Описание.
    • Большой: занимает пространство двух средних карт и позволяет использовать две кнопки.

    Снимок экрана: параметры под категорией макета и размера в области свойств.

  7. В разделе Значок карточки выберите один из следующих параметров:

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

    Примечание.

    При отправке пользовательских изображений для значков рекомендуется использовать изображения PNG от 24x24 до 32x32 пикселей.

  8. Введите заголовок, который будет отображаться в верхней части карта.

  9. Введите заголовок.

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

    • Изображение. Выберите изменение , чтобы отправить собственное изображение, или выберите существующее изображение с сайта или из интернет-источника (например, поиск в Интернете, OneDrive, Сайт).

      Снимок экрана: параметры под категорией содержимого карта в области свойств.

Примечание.

  • Рекомендации по изображению для карточек на панели мониторинга: средние карточки должны иметь размер от 300x150 до 400x200 с пропорциями 2:1 и большие карточки от 300x300 до 400x400 с пропорциями 1:1, чтобы предотвратить растяжение в мобильном приложении.
  • URL-адреса изображений в свойствах карта должны быть абсолютным URL-адресом, чтобы ссылка работала в мобильном приложении.
  1. В разделе действие карта выберите действие, выполняемое при выборе пользователем карта. В зависимости от выбранного действия отображаются дополнительные поля для настройки действия.

Примечание.

Не удается отключить действие карта.

  • Отображение быстрого представления. Выберите, чтобы использовать код JSON для создания более интерактивной панели мониторинга карта. Если этот параметр установлен, кнопка Сохранить изменится на Далее, что приводит к дополнительным параметрам для настройки быстрого просмотра карта. Для каждой карта доступно одно быстрое представление, которое можно открыть как действие карта или с помощью кнопки. Инструкции по использованию быстрого представления см. в статье Добавление быстрого представления в карта.

  • Перейдите по ссылке: введите URL-адрес для перенаправления пользователей.

  • Перейдите в приложение teams: пользователь направляется в указанное приложение Teams по указанному URL-адресу (администраторы также могут использовать appID для направления пользователей в соответствующее приложение Teams). Дополнительные сведения см. в разделе Прямая ссылка на приложение.

    Например, при выборе перейти к ссылке в раскрывающемся списке отображается поле для ввода ссылки.

  1. В разделе Ссылка введите URL-адрес , на который нужно направлять пользователей.

  2. Кнопки можно включить и отключить (если это возможно). Если этот параметр включен, для кнопок Основной и Дополнительный можно выбрать те же значения, что и в карта действие.

Примечание.

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

В этом примере кнопка "Основной" настраивается для перенаправления пользователей по той же ссылке, что и действие карта. Кнопка "Вторичная" отключена.

Снимок экрана: параметры в категории действий на панели свойств.

  1. В разделе Целевые аудитории введите одну или несколько групп для целевой аудитории, чтобы только указанные аудитории видели карта на панели мониторинга. Дополнительные сведения см. в разделе Целевая аудитория в Viva Connections.

    Снимок экрана: параметры под категорией целевой аудитории в области свойств.

  2. Нажмите кнопку Сохранить, чтобы сохранить обновления в карта.

Добавление быстрого представления в карта

Быстрый просмотр позволяет добавлять адаптивный код карта JSON на карточки панели мониторинга, чтобы предоставить пользователям более широкий, интерактивный и привлекательный интерфейс. С помощью статических или динамических источников данных (таких как API передачи репрезентативного состояния SharePoint (REST) или Microsoft API Graph) можно создавать карточки, предоставляющие сведения в Connections интерфейсе, без необходимости перехода пользователя.

Чтобы приступить к работе, выполните действия, описанные в разделе Использование шаблона карта до выбора действия Карточка.

  1. В разделе действие карта выберите Показать быстрое представление.

  2. Завершите настройку карта, включив или отключив кнопки и выбрав действия для активных кнопок.

    Примечание.

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

  3. Нажмите кнопку Далее , чтобы отобразить макет быстрого просмотра.

  4. Слева от параметров отображается предварительный просмотр карта на панели мониторинга.

    Снимок экрана: выбор быстрого представления из раскрывающегося списка параметров в категории действий в области свойств.

    Примечание.

    Средство конструктора адаптивных карточек можно использовать для создания шаблона JSON и кода данных для карта. Дополнительные сведения о структуре адаптивных карта и создании адаптивных карточек см. в разделе начало работы — адаптивные карточки.

  5. В поле Шаблон JSON введите код JSON, содержащий структуру адаптивной карточки.

    Снимок экрана: параметры быстрого просмотра в области свойств.

  6. В разделе Тип содержимого выберите один из следующих параметров для набора данных:

    • Статический: отображает статические сведения, которые необходимо обновить вручную.
    • Dynamic: интегрируется с источниками данных из API SharePoint или Microsoft Graph для автоматического обновления содержимого.

    Примечание.

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

Выбор статического в качестве типа содержимого

  1. В поле Data JSON (Данные JSON ) введите код JSON, содержащий данные, которые будут отображаться в адаптивной карточке.

  2. В поле Целевая аудитория введите все аудитории, к которым вы хотите нацелиться карта.

  3. Выберите Сохранить в обновлениях.

    Снимок экрана: выбранное статическое содержимое с полем Data JSON в области свойств и предварительным просмотром готового карта.

Выбор динамического в качестве типа содержимого с SharePoint в качестве источника данных

  1. В раскрывающемся списке Источник данных выберите API SharePoint.

  2. В конечной точке API введите конечную точку REST URL-адреса, которую вы хотите использовать.

    Например, если вы хотите получить заголовок сайта SharePoint, введите title в поле Конечная точка API (так как web/ уже является частью префикса по умолчанию). Дополнительные примеры конечных точек REST SharePoint см. в этой статье.

  3. Откроется предварительная версия ответа Data JSON и отобразится используемый код. Предварительный просмотр карта на панели мониторинга отображается слева от области свойств.

  4. В поле Целевая аудитория введите все аудитории, к которым вы хотите нацелиться карта.

    Снимок экрана: динамическое содержимое, выбранное с API SharePoint в качестве конечной точки и полем Data JSON, отображаемым в области свойств.

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

Выбор динамического в качестве типа содержимого с Microsoft Graph в качестве источника данных

  1. В раскрывающемся списке Источник данных выберите Microsoft Graph.

  2. Выберите версию Graph в раскрывающемся списке (где версия — это версия целевой службы, обычно 1.0).

  3. В конечной точке API введите конечную точку REST URL-адреса, которую вы хотите использовать.

    Например, если вы хотите получить профиль и фотографию определенного пользователя, введите URL-адрес me/photo/$value REST Microsoft Graph в поле Конечная точка API . Дополнительные распространенные варианты использования REST API Microsoft Graph в версии 1.0 см. здесь.

  4. Откроется предварительная версия ответа Data JSON и отобразится используемый код, а слева от области свойств отобразится предварительный просмотр карта на панели мониторинга.

  5. В поле Целевая аудитория введите все аудитории, к которым вы хотите нацелиться карта.

    Снимок экрана: динамическое содержимое, выбранное с microsoft API Graph в качестве конечной точки и поле Data JSON, отображаемое в области свойств.

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

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

Создание панели мониторинга Viva Connections и добавление карточек

Доступные карточки панели мониторинга