Создать страницу конфигурации

Страница конфигурации — это особый тип страницы контента. Пользователи настраивают некоторые аспекты приложения Microsoft Teams, используя страницу конфигурации, и используют эту конфигурацию в следующем:

  • Вкладка чата канала или группы: сбор сведений от пользователей и отображение страницы contentUrl контента.
  • Расширение обмена сообщениями.
  • Соедините Office 365.

Настройка вкладки чата канала или группы

Приложение должно ссылаться на Microsoft Teams клиента JavaScript SDK и вызывать microsoft.initialize() . Используемые URL-адреса должны быть защищены конечными точками HTTPS и доступны в облаке.

Пример

Пример страницы конфигурации показан на следующем изображении:

Configuration page

Следующий код — пример соответствующего кода для страницы конфигурации:

<head>
    <script src='https://statics.teams.cdn.office.net/sdk/v1.6.0/js/MicrosoftTeams.min.js'></script>
</head>
<body>
    <button onclick="(document.getElementById('icon').src = '/images/iconGray.png'); colorClickGray()">Select Gray</button>
    <img id="icon" src="/images/teamsIcon.png" alt="icon" style="width:100px" />
    <button onclick="(document.getElementById('icon').src = '/images/iconRed.png'); colorClickRed()">Select Red</button>

    <script>
        microsoftTeams.initialize();
        let saveGray = () => {
            microsoftTeams.settings.registerOnSaveHandler((saveEvent) => {
                microsoftTeams.settings.setSettings({
                    websiteUrl: "https://yourWebsite.com",
                    contentUrl: "https://yourWebsite.com/gray",
                    entityId: "grayIconTab",
                    suggestedDisplayName: "MyNewTab"
                });
                saveEvent.notifySuccess();
            });
        }
        let saveRed = () => {
            microsoftTeams.settings.registerOnSaveHandler((saveEvent) => {
                microsoftTeams.settings.setSettings({
                    websiteUrl: "https://yourWebsite.com",
                    contentUrl: "https://yourWebsite.com/red",
                    entityId: "redIconTab",
                    suggestedDisplayName: "MyNewTab"
                });
                saveEvent.notifySuccess();
            });
        }

        let gr = document.getElementById("gray").style;
        let rd = document.getElementById("red").style;

        const colorClickGray = () => {
            gr.display = "block";
            rd.display = "none";
            microsoftTeams.settings.setValidityState(true);
            saveGray()
        }

        const colorClickRed = () => {
            rd.display = "block";
            gr.display = "none";
            microsoftTeams.settings.setValidityState(true);
            saveRed();
        }
    </script>
    ...
</body>

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

На следующем изображении отображается содержимое вкладки с выбранным значком Серый:

Configure tab with select gray

На следующем изображении отображается содержимое вкладки с выбранным красным значком:

Configure tab with select red

Выбор соответствующей кнопки запускает или saveGray() вызывает saveRed() следующее:

  • Установите settings.setValidityState(true) для true.
  • Запускается microsoftTeams.settings.registerOnSaveHandler() обработник событий.
  • Сохранение на странице конфигурации приложения включено.

Код страницы конфигурации информирует Teams, что требования к конфигурации удовлетворены и установка может продолжиться. Когда пользователь выбирает Сохранить, параметры заданы, settings.setSettings() как определено Settings интерфейсом. Дополнительные сведения см. в интерфейсе параметров. saveEvent.notifySuccess() называется, чтобы указать, что URL-адрес контента успешно решен.

Примечание

  • У вас есть 30 секунд, чтобы завершить операцию сохранения (вызов для регистрацииOnSaveHandler) до времени. После окончания времени отображается общее сообщение об ошибке.
  • Если вы регистрируете обработчивель сохранения с помощью, он должен вызвать вызов или указать microsoftTeams.settings.registerOnSaveHandler() saveEvent.notifySuccess() результат saveEvent.notifyFailure() конфигурации.
  • Если обработник сохранения не зарегистрирован, вызов делается автоматически, когда пользователь saveEvent.notifySuccess() выбирает Сохранить.

Получите контекстные данные для параметров вкладки

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

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

  • Вставьте в манифесте строки строки URL-адресов. configurationURL

  • Используйте метод Teams SDK. microsoftTeams.getContext((context) =>{})

Вставьте местообладатели в configurationUrl

Добавьте в базу местообладатели интерфейса configurationUrl контекста. Например:

Базовый URL-адрес
...
"configurationUrl": "https://yourWebsite/config",
...

Базовый URL-адрес со строками запросов

...
"configurationUrl": "https://yourWebsite/config?team={teamId}&channel={channelId}&{locale}"
...

После загрузки страницы Teams строки запросов с соответствующими значениями. Включай логику на странице конфигурации для получения и использования этих значений. Дополнительные сведения о работе со строками запросов URL-адресов см. в странице URLSearchParams в веб-docs MDN. В следующем примере кода приводится способ извлечения значения из configurationUrl свойства:

<script>
   microsoftTeams.initialize();
   const getId = () => {
        let urlParams = new URLSearchParams(document.location.search.substring(1));
        let blueTeamId = urlParams.get('team');
        return blueTeamId
    }
//For testing, you can invoke the following to view the pertinent value:
document.write(getId());
</script>

Использование getContext() функции для получения контекста

Функция microsoftTeams.getContext((context) => {}) извлекает интерфейс контекста при вызове.

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

<!-- `userPrincipalName` will render in the span with the id "user". -->

<span id="user"></span>
...
<script>
    microsoftTeams.getContext((context) =>{
        let userId = document.getElementById('user');
        userId.innerHTML = context.userPrincipalName;
    });
</script>
...

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

Проверка подлинности перед разрешением пользователю настроить приложение. В противном случае содержимое может включать источники, у них есть протоколы проверки подлинности. Дополнительные сведения см. в записи проверки подлинности пользователя на вкладке Microsoft Teams. Используйте контекстные сведения для создания запросов на проверку подлинности и URL-адресов страниц авторизации. Убедитесь, что все домены, используемые на страницах вкладок, перечислены в manifest.json validDomains массиве и массиве.

Изменение или удаление вкладки

Установите свойство манифеста, которое позволяет пользователям изменять, перенастроять или переименовывать вкладку канала canUpdateConfiguration true или группы. Кроме того, указать, что происходит с контентом при удалении вкладки, включив страницу параметры удаления в приложение и установив значение для свойства removeUrl в setSettings() конфигурации. Пользователь может удалить личные вкладки, но не может изменить их. Дополнительные сведения см. в странице создание страницы удаления для вкладки.

Microsoft Teams для setSettings() удаления страницы:

microsoftTeams.settings.setSettings({
    contentUrl: "add content page URL here",
    entityId: "add a unique identifier here",
    suggestedDisplayName: "add name to display on tab here",
    websiteUrl: "add website URL here //Required field for configurable tabs on Mobile Clients",
    removeUrl: "add removal page URL here"
});

Мобильные приложения

Если вы хотите, чтобы вкладка канала или группы Teams мобильных клиентов, конфигурация должна иметь setSettings() значение websiteUrl для . Дополнительные сведения см. в руководстве по вкладке на мобильных устройствах.

Следующий этап

См. также