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

Создание интерфейса "Я" в Microsoft Teams

Microsoft Teams — это центр совместной работы. Это место, где вы встречаетесь со своими коллегами, где вы обменивается идеями и где вы работаете вместе с файлами. Здесь можно открывать приложения своей организации, не выходя из контекста своей работы. Здесь вы также встретитесь со своими деловыми партнерами.

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

В этой статье представлен пример сценария расширения Microsoft Teams с помощью SharePoint Framework, чтобы предложить коллегам интерфейс "Я", где они могут начать свой день и просмотреть свои персональные данные.

Пример интерфейса

В следующих разделах мы рассмотрим несколько способов реализации me-experience в Microsoft Teams с помощью SharePoint Framework. Для каждого из них мы упоминаем его преимущества и рекомендации.

Внедрение современной страницы SharePoint

Недавно в SharePoint Online появилась возможность внедрения современных страниц SharePoint в Microsoft Teams. С помощью этой возможности можно создать современную страницу SharePoint с несколькими SharePoint Framework веб-частями, которые отображают персонализированную информацию для текущего пользователя, например последние документы или предстоящие собрания.

Современная страница SharePoint с несколькими SharePoint Framework веб-частями с персонализированной информацией для текущего пользователя

Когда страница будет готова, в Microsoft Teams вы создадите личное приложение, указывающее на страницу SharePoint.

Создание личного приложения Teams с помощью App Studio

Осторожностью

При внедрении современной страницы SharePoint в Teams не следует использовать URL-адрес страницы, так как он не будет работать в классическом приложении Teams. Вместо этого используйте специальный URL-адрес, указывающий на страницуteamslogon.aspx.

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

Преимущества внедрения страниц SharePoint в виде вкладок

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

Код не требуется

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

Предоставление сведений с помощью стандартных возможностей редактирования страниц SharePoint

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

Объединение сведений из разных источников

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

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

Упаковка и распространение приложения в организации без кода

Чтобы предложить пользователям интерфейс "Я", созданный таким образом, необходимо упаковать его как личное приложение Teams. С помощью App Studio можно создать личное приложение и опубликовать его в каталоге организации для всех остальных пользователей.

Рекомендации по внедрению страниц SharePoint в виде вкладок

Хотя использование современных страниц SharePoint — это самый простой способ предложить пользователям персонализированную панель мониторинга в Microsoft Teams, он содержит некоторые рекомендации, которые следует учитывать перед использованием этого подхода.

Специфичный для вашей организации

Личное приложение, предлагающее интерфейс "Я" на основе страницы SharePoint, указывает на определенный URL-адрес в вашей среде SharePoint. Так как он предназначен для вашего клиента, он не подходит для использования другими организациями.

Одна и та же страница для всех

Чтобы упростить работу пользователей, вы создадите одну страницу SharePoint, которая будет служить панелью мониторинга, а затем предоставлять ее в качестве личного приложения Teams. Хотя веб-части на странице будут отображать персонализированную информацию (мои электронные письма, собрания, мои документы), элементы на странице будут одинаковыми для всех. Пользователи не смогут настроить для себя, какие фрагменты информации они хотели бы видеть или сколько элементов должны отображать различные веб-части. Макет и конфигурация элементов на странице будут одинаковыми для всех.

Этот подход идеально подходит для организаций, которые хотят предложить своим пользователям интерфейс "Я" в Microsoft Teams с минимальными усилиями и пользовательской разработкой, насколько это возможно.

Создание личного приложения Teams с несколькими вкладками

Другой подход к тому, чтобы предложить пользователям интерфейс "Я" в Microsoft Teams с помощью SharePoint Framework, заключается в создании личного приложения Teams с несколькими вкладками.

Личное приложение Teams с несколькими вкладками, созданное с помощью SharePoint Framework

Личные приложения Teams могут состоять из одной или нескольких вкладок. Каждая вкладка указывает на другой URL-адрес. При создании личного приложения Teams с помощью SharePoint Framework можно сделать так, чтобы каждая вкладка указывала на веб-часть SharePoint Framework. Объединяя соответствующие веб-части в одном личном приложении Teams, вы можете предложить пользователям единое место для доступа к соответствующей информации.

При таком подходе все веб-части, которые вы хотите предоставить, сначала помещаете в проект SharePoint Framework.

SharePoint Framework проект с различными веб-частями, которые составляют интерфейс Me

Затем вы обновите манифест Teams, ссылаясь на различные веб-части как вкладки на личное приложение, например:

{
  "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.5/MicrosoftTeams.schema.json",
  "manifestVersion": "1.5",
  "packageName": "MyContoso",
  "id": "e81a1b68-686e-412f-90ac-cb80f2544398",
  // ... trimmed for readability
  "staticTabs": [
    {
      "entityId": "com.contoso.my.meetings",
      "name": "Meetings",
      "contentUrl": "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26personal%26componentId=e81a1b68-686e-412f-90ac-cb80f2544398%26forceLocale={locale}",
      "scopes": [
        "personal"
      ]
    },
    {
      "entityId": "com.contoso.my.mail",
      "name": "Mail",
      "contentUrl": "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26personal%26componentId=e81a1b68-686e-412f-90ac-cb80f2544398%26forceLocale={locale}",
      "scopes": [
        "personal"
      ]
    },
    {
      "entityId": "com.contoso.my.files",
      "name": "Files",
      "contentUrl": "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26personal%26componentId=e81a1b68-686e-412f-90ac-cb80f2544398%26forceLocale={locale}",
      "scopes": [
        "personal"
      ]
    },
    {
      "entityId": "com.contoso.my.settings",
      "name": "Settings",
      "contentUrl": "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26personal%26componentId=e81a1b68-686e-412f-90ac-cb80f2544398%26forceLocale={locale}",
      "scopes": [
        "personal"
      ]
    }
  ],
  // ...trimmed for readability
}

Важно!

Убедитесь, что веб-части, которые вы хотите предоставить в личном приложении Teams, имеют в своем манифесте в свойстве supportedHosts указанное TeamsPersonalApp значение.

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

{
  "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.5/MicrosoftTeams.schema.json",
  "manifestVersion": "1.5",
  "packageName": "MyContoso",
  "id": "e81a1b68-686e-412f-90ac-cb80f2544398",
  // ... trimmed for readability
  "staticTabs": [
    // ... trimmed for readability
    {
      "entityId": "com.contoso.my.settings",
      "name": "Settings",
      "contentUrl": "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26personal%26componentId=e81a1b68-686e-412f-90ac-cb80f2544398%26forceLocale={locale}",
      "scopes": [
        "personal"
      ]
    }
  ],
  // ...trimmed for readability
}

Преимущества создания личных приложений Teams с несколькими вкладками

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

Конфигурация для конкретного пользователя

Пользователи устанавливают личные приложения Teams и могут настраивать их в соответствии со своими потребностями. Создавая приложение "Я-интерфейс" в качестве личного приложения Teams и предоставляя некоторые параметры конфигурации, вы можете разрешить пользователям указать, какой тип информации они хотели бы видеть и как она должна отображаться. Хотя набор вкладок, типы информации, отображаемой в личном приложении, являются фиксированными, их содержимое может быть настроено каждым пользователем в соответствии с конкретными потребностями.

Пакет в качестве многократного решения

Личные приложения Teams, созданные с помощью SharePoint Framework, могут использоваться несколькими различными организациями. Если у организации есть пакет SharePoint Framework с веб-частями, развернутыми в клиенте, она может установить личное приложение Teams и использовать его. Microsoft Teams автоматически настроит URL-адреса таким образом, чтобы они указывали на клиент SharePoint организации.

Рекомендации по созданию личных приложений Teams с несколькими вкладками

Создание личных приложений Teams с несколькими вкладками обеспечивает большую гибкость в отношении персонализации и распространения решения. Однако он содержит некоторые рекомендации, которые следует учитывать перед использованием этого подхода.

Требуется пользовательская разработка

По сравнению с созданием панели мониторинга с использованием современной страницы SharePoint и предоставлением ее в качестве личного приложения Teams с помощью App Studio, создание личного приложения Teams с помощью SharePoint Framework требует пользовательской разработки. Сложность этих усилий будет зависеть от вашего решения и типа информации, которую вы хотите предоставить.

Только пользовательские веб-части

При создании личных приложений Teams с несколькими вкладками можно указывать только на пользовательские веб-части. Ссылка на стандартную веб-часть, предоставляемую корпорацией Майкрософт, не поддерживается.

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

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

Пользовательская веб-часть, необходимая для предоставления параметров

Личные приложения Teams не имеют стандартного пользовательского интерфейса для настройки параметров. Вместо этого рекомендуется предоставлять параметры на отдельной вкладке. Разработчик контролирует пользовательский интерфейс этой вкладки и может настроить его в соответствии с требованиями конкретного приложения.

Перевод этого в SharePoint Framework означает, что вам потребуется создать отдельную веб-часть, которая позволяет пользователям настраивать приложение. Вкладка "Параметры" может предоставлять конфигурацию для всех остальных вкладок, чтобы пользователи могли настраивать все приложение из одного места.

Реализация хранилища для конфигурации пользователя

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

Хотя SharePoint Framework веб-части имеют стандартный способ сохранения параметров при использовании на страницах SharePoint или на вкладках Microsoft Teams, если они предоставляются как личные приложения Teams, они не могут использовать эту инфраструктуру. Вместо этого необходимо выбрать способ хранения предпочтений пользователя. Кроме того, необходимо убедиться, что веб-части могут получить свою конфигурацию из этого расположения.

Каждая веб-часть — это отдельная вкладка

При создании личных приложений Teams с помощью SharePoint Framework каждая вкладка в приложении соответствует одной веб-части. В зависимости от того, сколько сведений вы хотите предоставить в интерфейсе "Я-интерфейс", в вашем приложении может быть много вкладок. Вместо того, чтобы быстро получить обзор, пользователям потребуется перейти на различные вкладки, чтобы найти всю необходимую информацию.

Этот подход подходит для организаций, у которых есть профессиональные разработчики с опытом создания решений SharePoint Framework и которые хотят распространить интерфейс "Я" в другие организации или на Marketplace. Кроме того, пользователи смогут использовать приложение, если оно не предоставляет слишком много типов информации (вкладок).

Объединение нескольких веб-частей на одной вкладке личного приложения Teams

Ранее при обсуждении идеи создания пользовательского личного приложения Teams с помощью SharePoint Framework мы упоминали, что каждая вкладка соответствует одной веб-части. В контексте взаимодействия с me-experience это приводит к фрагментаментному интерфейсу и множеству различных вкладок, между которыми пользователям необходимо переключаться, чтобы получить полный обзор своих данных.

Если вы создаете веб-части с помощью React, вы можете устранить этот недостаток, объединив несколько корневых React компонентов (компонент React, на который вы ссылаетесь в классе веб-части) в одной веб-части.

На практике предположим, что у вас есть проект со следующими веб-частями: Личный календарь, Личные контакты, Личное Email и Личные задачи. По умолчанию все эти веб-части сопоставляются с отдельными вкладками в личном приложении Teams. Вместо этого, что делать, если бы мы могли сгруппировать их в одну вкладку, чтобы обеспечить более краткое представление информации?

Несколько веб-частей, сгруппированных на одной вкладке

Чтобы упростить взаимодействие с пользователем, можно создать новую веб-часть и создать ее корневую React ссылку на компоненты React компоненты каждой из этих веб-частей, например:

import { WebPartTitle } from '@pnp/spfx-controls-react/lib/WebPartTitle';
import * as React from 'react';
import { IPlanningProps } from '.';
import PersonalCalendar from '../../personalCalendar/components/PersonalCalendar';
import { PersonalTasks } from '../../personalTasks/components';
import RecentlyUsedDocuments from '../../recentlyUsedDocuments/components/RecentlyUsedDocuments';
import styles from './Planning.module.scss';

export default class Planning extends React.Component<IPlanningProps, {}> {
  public render(): React.ReactElement<IPlanningProps> {
    return (
      <div className={styles.planning}>
        <WebPartTitle displayMode={this.props.displayMode}
          title='Planning'
          updateProperty={this.props.updateProperty} />
        <div className={styles.column}>
          <PersonalCalendar displayMode={this.props.displayMode}
            graphClient={this.props.graphClient}
            title='Upcoming meetings'
            daysInAdvance={4}
            numMeetings={0}
            refreshInterval={5}
            updateProperty={this.props.updateProperty} />
        </div>
        <div className={styles.column}>
          <PersonalTasks displayMode={this.props.displayMode}
            graphClient={this.props.graphClient}
            updateProperty={this.props.updateProperty}
            title='My tasks'
            showCompleted={false}
            userName={this.props.pageContext.user.loginName} />
        </div>
        <div className={styles.column}>
          <RecentlyUsedDocuments context={this.props.pageContext}
            title='My recent documents'
            displayMode={this.props.displayMode}
            graphClient={this.props.graphClient}
            updateProperty={this.props.updateProperty}
            nrOfItems={10} />
        </div>
      </div>
    );
  }
}

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

Преимущества объединения нескольких веб-частей на одной вкладке

Объединение сведений из нескольких веб-частей на одной вкладке позволяет упростить взаимодействие с пользователем в личном приложении Teams.

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

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

Управление взаимодействием с пользователем

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

Повторное использование существующего кода

При сборке SharePoint Framework веб-частей с помощью React основные функции веб-части упаковываются в один компонент React. Ссылаясь на этот компонент из другого компонента, вы можете повторно использовать все функции без дублирования кода. Эта возможность обеспечивает большую гибкость и позволяет создавать набор многоразовых стандартных блоков, которые затем можно создать в более крупных веб-частях или приложениях Teams.

Рекомендации по группировке нескольких веб-частей на одной вкладке

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

Объединение веб-частей требует усилий по разработке

Чтобы объединить несколько React компонентов в одной веб-части, необходимо иметь правильное представление о SharePoint Framework. Хотя это не сложнее, чем создание веб-частей с помощью React, необходимо понимать, как различные компоненты React, которые требуется интегрировать, работают, чтобы их можно было правильно настроить.

Только для пользовательских веб-частей

Чтобы интегрировать несколько компонентов React в одну веб-часть, необходимо иметь доступ к их исходному коду. На данный момент исходный код для сторонних веб-частей недоступен, что означает, что этот подход ограничен только сторонними веб-частями.

Этот подход рекомендуется использовать всякий раз, когда вы хотите предложить пользователям широкий интерфейс "Я", который представляет информацию из разных источников. Отображаемая информация полностью контролируется собственным кодом. Следуя этому подходу, вы также можете создать решение, которое можно распространять в других организациях напрямую или через Marketplace.