Навигация по приложению вкладки

  • Статья

Клиентская библиотека JavaScript в Microsoft Teams (TeamsJS) обеспечивает поддержку навигации по вкладке. В этой статье рассматриваются доступные параметры, в том числе типы навигации, например между вкладками в приложении или с помощью компонентов пользовательского интерфейса Teams и кнопки "Назад".

Примечание.

В этом разделе представлена версия 2.0.x клиентской библиотеки JavaScript (TeamsJS) Microsoft Teams. Если вы используете более раннюю версию, ознакомьтесь с обзором библиотеки TeamsJS , чтобы узнать о различиях между последней версией TeamsJS и более ранними версиями.

Вкладки предоставляют отличный способ улучшить взаимодействие с Microsoft Teams. Вы можете предоставить пользователям доступ к веб-приложению прямо в Teams с помощью вкладок без необходимости повторного входа. Дополнительные сведения о вкладках и способах расширения личных вкладок в продуктах Microsoft 365 см. в разделах Создание вкладок для Teams и Расширение личной вкладки Teams в Microsoft 365.

Возможности страниц библиотеки TeamsJS обеспечивают поддержку навигации между вкладками в приложении. В частности, пространство имен предлагает функциюnavigateTo(NavigateWithinAppParams), pages.currentApp разрешающая переход к определенной вкладке в текущем приложении, и функцию navigateToDefaultPage() для перехода к первой вкладке, определенной в манифесте приложения.

В следующем коде показано, как перейти на определенную страницу:

if (pages.currentApp.isSupported()) {
    const navPromise = pages.currentApp.navigateTo({pageId: <pageId>, subPageId: <subPageId>});
    navPromise.
        then((result) => {/*Successful navigation*/}).
        catch((error) => {/*Failed navigation*/});
}
else {/*Handle situation where capability isn't supported*/
    const navPromise = pages.navigateToApp({appId: <appId>, pageId: <pageId>});
    navPromise.
        then((result) => {/*Successful navigation*/}).
        catch((error) => {/*Failed navigation*/});
}

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


if (pages.currentApp.isSupported()) {
    const navPromise = pages.currentApp.navigateToDefaultPage();
    navPromise.
        then((result) => {/*Successful navigation*/}).
        catch((error) => {/*Failed navigation*/});
}
else {/*Handle situation where capability isn't supported*/}

Примечание.

Навигация по приложениям-вкладкам поддерживается только в новом клиенте Teams.

Используйте функцию pages.navigateToApp() или глубокие ссылки для навигации по приложениям вкладок.

Настройка навигации по кнопке "Назад"

Если приложение имеет несколько вкладок, пользователь может использовать кнопку "Назад" ведущего приложения Microsoft 365, чтобы перейти к журналу навигации. Однако журнал не включает действия, выполняемые пользователем на вкладке. Если вы хотите улучшить работу кнопки "Назад", вы можете поддерживать собственный внутренний стек навигации и настроить настраиваемый обработчик для выбора кнопки "Назад". Это можно сделать с помощью registerBackButtonHandler() функции в pages.backStack пространстве имен.

После регистрации обработчика он помогает выполнить навигационный запрос до того, как система примет меры. Если обработчик может управлять запросом, он должен вернуться true , чтобы система знала, что никаких дальнейших действий не требуется. Если внутренний стек пуст, он должен вернуться false , чтобы система могла вместо этого вызвать функцию navigateBack() и выполнить соответствующее действие.

Возвращение фокуса в ведущее приложение

После того как пользователь начнет использовать элементы на вкладке, по умолчанию фокус остается с элементами iFrame, пока пользователь не выберет его. Если iFrame является частью пользователя, перемещающегося с помощью сочетаний клавиш (клавиша TAB или клавиша F6), вы можете сосредоточиться на ведущем приложении. Вы можете сосредоточиться на ведущем приложении с помощью pages.returnFocus() функции . Функция returnFocus() принимает логическое значение, указывающее направление для продвижения фокуса в ведущем приложении; true для вперед и false для обратного. Как правило, вперед выделяет панель поиска, а назад — панель приложения.

Пример кода

Название примера Описание Node.js
Навигация по приложению tab Пример кода показывает, как перемещаться между вкладками в приложении. Просмотр

См. также