Создание вкладки "Личное" для Microsoft TeamsBuild a personal tab for Microsoft Teams

Вкладки — это простой способ отображения контента в приложении, по сути внедряя веб-страницу в Teams.Tabs are a simple way to surface content in your app by essentially embedding a webpage in Teams.

В Teams есть два типа вкладок.There are two types of tabs in Teams. В этом руководстве вы создадите базовую вкладку личное, страницу содержимого на полном экране для отдельных пользователей.In this tutorial, you'll build basic a personal tab, a full-screen content page for individual users. (Личные вкладки — это ближайшее к традиционному интерфейсу веб-сайта в Teams.)(Personal tabs are the closest thing to a traditional website experience in Teams.)

Прежде чем начатьBefore you begin

Для начала необходимо создать базовую вкладку выполнение личных настроек.You need a basic running personal tab to get started. Если у вас его нет, ознакомьтесь со статьей Создание и запуск первого приложения Teams.If you don't have one, see build and run your first Teams app.

Ваше назначениеYour assignment

Сотрудникам Организации не удается найти основные контактные данные для важных функций (служба технической поддержки, HR и т. д.).People in your organization have trouble finding basic contact information for important functions (help desk, HR, etc.). Вы следите за тем, чтобы они могли быстро найти эту информацию в одном месте.You're in charge of making sure they can quickly find this information in one place. Как это сделать?How would you do that? Разумеется, личная вкладка группы Teams.A Teams personal tab, of course.

Что вы узнаетеWhat you'll learn

  • Определите некоторые конфигурации приложений и формирование шаблонов, относящихся к личным вкладкам.Identify some of the app configurations and scaffolding relevant to personal tabs
  • Создание содержимого вкладкиCreate tab content
  • Обновление темы цвета вкладки в соответствии с предпочтениями пользователяUpdate a tab's color theme based on user preference

1. определение соответствующих компонентов проекта приложения1. Identify relevant app project components

Многие конфигурации приложений и формирование шаблонов настраиваются автоматически при создании проекта с помощью набора инструментов Teams.Much of the app configurations and scaffolding are set up automatically when you create your project with the Teams Toolkit. Рассмотрим основные компоненты для создания вкладки личных сведений.Let's look at the main components for building a personal tab.

Конфигурации приложенийApp configurations

Вы можете просматривать и обновлять конфигурации приложений с помощью App Studio, которая включена в набор средств.You can view and update your app configurations using App Studio, which is included in the toolkit.

Во время установки набор инструментов изначально настроил страницу контент вкладки, на которой отображается основной контент.During setup, the toolkit initially configured your tab content page, which is where you display your primary content. В наборе инструментов откройте Приложение App Studio и выберите вкладки , чтобы просмотреть конфигурацию.In the toolkit, go to App Studio and select Tabs to see the configuration.

Формирование шаблонов приложенийApp scaffolding

Формирование шаблонов приложений предоставляет компоненты для отображения вкладки "личные сведения" в Teams.The app scaffolding provides the components for rendering your personal tab in Teams. Существует множество способов, с которыми вы можете работать, но теперь вам нужно сосредоточиться на следующих задачах:There's a lot you can work with, but for now you only need to focus on the following:

  • Tab.js файл в src/components каталоге проекта.Tab.js file in the src/components directory of your project. Это предназначено для отображения страницы содержимого вкладки.This is for rendering your tab content page.
  • Клиентский пакет SDK Microsoft Teams JavaScript, который предварительно загружен в интерфейсных компонентах проекта.Microsoft Teams JavaScript client SDK, which comes pre-loaded in your project's front-end components.

2. Настройка страницы контента вкладки2. Customize your tab content page

Скомпилируйте список важных контактов в Организации.Compile a list of important contacts in your organization. Скопируйте и обновите следующий фрагмент кода со сведениями, важными для вас или, в целях простоты, используйте код как есть.Copy and update the following snippet with information that's relevant to you or, for the sake of time, use the code as is.

<div>
  <h1>Important Contacts</h1>
    <ul>
      <li>Help Desk: <a href="mailto:support@company.com">support@company.com</a></li>
      <li>Human Resources: <a href="mailto:hr@company.com">hr@company.com</a></li>
      <li>Facilities: <a href="mailto:facilities@company.com">facilities@company.com</a></li>
    </ul>
</div>

Перейдите в src/components каталог и откройте его Tab.js .Go to the src/components directory and open Tab.js. Нахождение render() функции и вставка содержимого внутри return() (как показано на рисунке).Locate the render() function and paste your content inside return() (as shown).

render() {

    let userName = Object.keys(this.state.context).length > 0 ? this.state.context['upn'] : "";

    return (
    <div>
      <h1>Important Contacts</h1>
        <ul>
          <li>Help Desk: <a href="mailto:support@company.com">support@company.com</a></li>
          <li>Human Resources: <a href="mailto:hr@company.com">hr@company.com</a></li>
          <li>Facilities: <a href="mailto:facilities@company.com">facilities@company.com</a></li>
        </ul>
    </div>
    );
}

Добавьте следующее правило, чтобы App.css ссылки электронной почты легче читались независимо от того, какая тема используется.Add the following rule to App.css so the email links are easier to read no matter which theme is used.

a {
  color: inherit;
}

Сохраните изменения.Save your changes. Перейдите на вкладку приложения в Teams, чтобы просмотреть новый контент.Go to your app's tab in Teams to view the new content.

Снимок экрана: личная вкладка со статическим содержимым.

3. Обновление темы вкладки3. Update the tab theme

Хорошие приложения в Teams встроены в Teams, поэтому для вкладок важна тема, в которую пользователи предпочитают: по умолчанию (Light), темный или High контрастность.Good apps feel native to Teams, so it's important your tab blends with the Teams theme your users prefer: default (light), dark, or high contrast. Как вы могли заметить на последнем снимке экрана, вкладка по-прежнему имеет светлый фон, когда клиент использует темную тему.As you might have noticed in the last screenshot, your tab still has a light background when the client's using the dark theme. Это не рекомендуемый пользовательский интерфейс.This is not a recommended user experience.

Пакет SDK для Teams JavaScript может сделать ваше приложение осведомленным об изменениях темы в клиенте и реагировать на них.The Teams JavaScript client SDK can make your app aware of and react to theme changes in the client. Давайте разберем, как это сделать.Let's walk through how to do this.

Получение контекста о клиенте TeamsGet context about the Teams client

В Tab.js файле существует microsoftTeams.getContext() вызов, который предоставляет некоторые сведения context о настроенной клиентской теме (помимо других сведений).In your Tab.js file, there's a microsoftTeams.getContext() call that provides some context about, among other details, the configured client theme. Благодаря формированию шаблонов приложений используйте этот код, чтобы получить доступ к context интерфейсу и его свойствам.Thanks to the app scaffolding, use this code as is to access the context interface and its properties.

componentDidMount(){
  // Get the user context from Teams and set it in the state
  microsoftTeams.getContext((context, error) => {
    this.setState({
      context: context
    });
  });
  // Next steps: Error handling using the error object
}

Создание обработчика изменений темыCreate a theme change handler

Если у context вас есть свойства в наличии, ваше приложение имеет твердое представление о происходящих в Teams.With the context properties in hand, your app has a solid understanding of what's happening around it in Teams. Но приложение по-прежнему не знает, что его внешний вид должен отражать любую тему, которую выбрал пользователь.But the app still doesn't know its appearance should reflect whatever theme a user chooses.

Необходимо обработчик, чтобы изменить состояние приложения с помощью темы.You need a handler so that your app's state changes with the theme. Вставьте следующий обработчик изменений темы сразу после microsoftTeams.getContext() вызова.Insert the following theme change handler immediately after the microsoftTeams.getContext() call.

  microsoftTeams.registerOnThemeChangeHandler(theme => {
    if (theme !== this.state.theme) {
      this.setState({ theme });  
    }
  });

Сравнение стилей темыMatch theme styles

Ваш обработчик изменений темы размещается, но вам необходим код, который реагирует на эти изменения и выравнивает цвета вкладки с помощью текущей темы.Your theme change handler is in place, but you need some code that responds to those changes and aligns your tab's colors with the current theme.

Примечание

Приведенный ниже пример можно использовать только один из способов применения стилей к вкладке. Используйте код как есть, разверните его или напишите собственное.The following example is just one way you might apply styles to your tab. Use the code as is, expand on it, or write your own.

Сохраните состояние, предоставленное обработчиком изменений темы, в файле isTheme .Store the state provided by the theme change handler in isTheme.

  const isTheme = this.state.theme

Предоставляет некоторую условную логику для отображения стилей вкладок на основе текущей темы.Provide some conditional logic to render your tab's styles based on the current theme. В следующем примере показан простой способ, выполняемый на 1) при проверке текущей темы в isTheme , 2) создание newTheme объекта со свойствами CSS, относящимися к текущей теме, и 3) применение CSS к корневому элементу HTML содержимого вкладки ( <div> ).The following example shows a basic way to do this by 1) checking the current theme in isTheme, 2) creating a newTheme object with CSS properties relevant to the current theme, and 3) applying the CSS to your tab content's root HTML element (<div>).

let newTheme

if (isTheme === "default") {
  newTheme = {
    backgroundColor: "#EEF1F5",
    color: "#16233A"
  };
} else {
  newTheme = {
    backgroundColor: "#2B2B30",
    color: "#FFFFFF"
  };
}

Проверьте вкладку в Teams.Check your tab in Teams. Внешний вид должен точно соответствовать темной теме.The appearance should closely match the dark theme.

Снимок экрана со вкладкой &quot;Личное&quot; и представлением статического содержимого.

ПрекрасноWell done

Поздравляем!Congratulations! У вас есть приложение Teams со вкладкой "личные", которая упрощает поиск важных контактов в Организации.You have a Teams app with a personal tab that makes it easier to find important contacts in your organization.

ПодробнееLearn more

Следующий урокNext lesson

Вы знаете, как создать вкладку для личного использования.You know how to build a tab for personal use. Рассмотрим, что требуется для создания вкладки для каналов команд и чатов.Let's look at what it takes to build a tab for team channels and chats.