Utilisation de la bibliothèque de contrôles dans App StudioUsing the control library in App Studio

Microsoft teams App Studio fournit un ensemble de contrôles que vous pouvez utiliser dans vos propres applications.Microsoft Teams App Studio provides you with a set of controls that you can use in your own apps. Ces contrôles sont fournis dans l’onglet bibliothèque de contrôles d’App Studio.These controls are provided in the Control Library tab of App Studio.

Ces contrôles ont été créés par les concepteurs Microsoft teams afin de rationaliser leurs propres flux de travail, de normaliser le comportement et les thèmes par défaut de l’équipe de support technique.These controls were created by the Microsoft Teams designers to streamline their own workflows, standardize control behavior and support Team's default themes. Vous pouvez utiliser cette bibliothèque dans vos propres applications pour obtenir une apparence unifiée.You can use this library in your own apps to achieve a unified look and feel.

Les contrôles sont les suivants :Controls include:

  • BoutonsButtons
  • Listes déroulantesDropdowns
  • Cases à cocherCheckboxes
  • Cases d’optionRadio Buttons
  • InverserToggles
  • Zones de testTest Areas
  • LiensLinks
  • OngletsTabs
  • TablesTables
  • IcônesIcons

Utiliser éventuellement des contrôles REACTOptionally use React controls

La bibliothèque de contrôles complète teams utilise l' infrastructure d’interface utilisateur JavaScript REACT , mais elle est conçue de sorte qu’elle ne soit pas liée à une infrastructure d’interface utilisateur spécifique.The full Teams control library uses the React JavaScript UI framework however it is built so that it is not tied to a specific UI framework. Il existe quatre packages NPM :There are four different npm packages:

  • msteams-UI-styles-Core Les principaux styles CSS des composants de l’interface utilisateur.msteams-ui-styles-core The core CSS styles of UI components. Il est indépendant de toute infrastructure d’interface utilisateur.It’s independent of any UI framework.
  • msteams-UI-Icons-Core Ensemble d’icônes principales de teams.msteams-ui-icons-core The core set of Teams icons.
  • msteams-UI-Components-REACT Bibliothèque de liaison REACT.msteams-ui-components-react The React binding library. Cela dépend de msteams-UI-styles-Core.It depends on msteams-ui-styles-core.
  • msteams-UI-Icons-REACT Bibliothèque de liaison REACT pour l’ensemble des icônes Teams.msteams-ui-icons-react The React binding library for the set of Teams icons. Cela dépend de msteams-UI-Icons-Core.It depends on msteams-ui-icons-core.

Ces bibliothèques sont toutes Open source et vous pouvez utiliser msteams-UI-styles-Core et msteams-UI-Icons sans REACT.These libraries are all open source, and you can use msteams-ui-styles-core and msteams-ui-icons-core without React.

Ajout de la bibliothèque de contrôlesAdding the control library

Installez la bibliothèque de contrôles et sa dépendance typestyled’homologue :Install the control library and its peer dependency typestyle:

npm install --save typestyle && npm install --save msteams-ui-components-react

Facultatif : Installez les icônes Teams.Optional: Install the Teams icons.

npm install --save msteams-ui-icons-react

src/App.js Recherchez et remplacez son contenu par le code suivant :Find and open src/App.js and replace its content with following code:

import React, { Component } from ‘react’;
import { TeamsComponentContext, ThemeStyle, PrimaryButton } from ‘msteams-ui-components-react’

class App extends Component {
   render() {
      // Sets up the top-level context for the library. It accepts global
      // configurations such as font size and theme. fontSize is your page’s
      // default font size. We made it a parameter so that you could use this
      // library with CSS frameworks such as Bootstrap. Some CSS frameworks
      // set the default font size for the page; retrieve it and use it
      // instead of {16} in the block.
      // This library uses the power of CSS to do most of the work for you.
      // Instead of passing themes as a parameter to every UI component,
      // we set it on a parent HTML element. All HTML elements nested within
      // that parent will inherit these properties.

      return (
        <TeamsComponentContext
            fontSize={16}
            theme={ThemeStyle.Light}
        />
      );
   }
}
export default App;

Exécution de l’applicationRun the app

npm run start

Lorsque vous accédez à http://localhost:3000, l’écran suivant s’affiche :When you navigate to http://localhost:3000, you should see the following screen:

Gestion dynamique des modifications de thèmeDynamically handling theme changes

Votre application doit gérer les thèmes lorsque :Your app needs to handle themes when:

  • L’onglet est initialement chargéThe tab is initially loaded
  • Un utilisateur modifie le thème une fois que l’onglet est déjà chargéA user changes the theme after the tab is already loaded

Le thème est inclus dans le contexted’un onglet, qui peut être récupéré avant le chargement de l’onglet via les valeurs d’espace réservé d’URL, ou à tout moment à l’aide du Kit de développement logiciel (SDK) JavaScript client Microsoft teams.The theme is included in a tab’s Context, which can be retrieved before the tab is loaded via URL placeholder values, or at any time by using the Microsoft Teams JavaScript client SDK.

La manière dont le thème actuel est récupéré et comment répondre aux modifications de thème est abordée ici : obtenir le contexte de votre onglet Microsoft teams.How the current theme is retrieved and how to respond to theme changes is discussed here: Get context for your Microsoft Teams tab.

Cet exemple de code montre comment procéder.This sample code shows how this is done.

componentWillMount() {
    // If you are deploying your site as a MS Teams static or configurable tab,
    // you should add “?theme={theme}” to your tabs URL in the manifest.
    // That way you will get the current theme before it’s loaded; getContext()
    // is called only after the tab is loaded, which will cause the tab to flash
    // if the current theme is different than the default.
    this.updateTheme(this.getQueryVariable('theme'));
    this.setState({
        fontSize: this.pageFontSize(),
    });

    // If you are not using the MS Teams Javascript SDK, you can remove this entire
    // if block, but if you want theme changes in the MS Teams client to propagate
    // to the tab, leave it here.
    microsoftTeams.initialize();
    microsoftTeams.registerOnThemeChangeHandler(this.updateTheme);
}

Connecter votre propre composant au TeamsComponentContextConnect your own component to the TeamsComponentContext

Si vous souhaitez utiliser votre propre code CSS, vous pouvez toujours répondre aux modifications de thème et utiliser les couleurs définies par Teams.If you want to use your own CSS code you can still respond to theme changes and use colors defined by teams. TeamsComponentContext vous permet de le faire.TeamsComponentContext allows you to do this.

Une fois encore, modifiez src/App.js votre fichier et remplacez son contenu par le code suivant :Once again, edit your src/App.js file and replace its content with following code:

import React, { Component } from ‘react’;
import { TeamsComponentContext, ThemeStyle, ConnectedComponent } from ‘msteams-ui-components-react’

class App extends Component {
    render() {
        return (
            <TeamsComponentContext
                fontSize={16}
                theme={ThemeStyle.HighContrast}>
                <MyComponent />
            </TeamsComponentContext>
        );
    }
}

class MyComponent extends Component {
    render() {
        return (
            <ConnectedComponent render={(props) => {
                const context = props.context;

                switch (context.style) {
                case ThemeStyle.Dark:
                    return <div style={{ color: context.colors.dark.brand00 }}>Dark theme!</div>;
                case ThemeStyle.HighContrast:
                    return <div style={{ color: context.colors.highContrast.black }}>High Contrast theme!</div>;
                case ThemeStyle.Light:
                    return <div style={{ color: context.colors.light.brand00 }}>Light theme!</div>;
                }
            }} />
        );
    }
}

export default App;

Dans ce code, un nouveau composant est défini appelé MyComponent.In this code, a new component is defined called MyComponent. Un composant spécial de la bibliothèque de contrôles appelé ConnectedComponent est ensuite ajouté.Then a special component from the control library called ConnectedComponent is added. ConnectedComponent possède une propriété appelée render qui prend une fonction en tant que paramètre.ConnectedComponent has a property called render which takes a function as a parameter. Au moment du rendu, cette fonction est appelée avec le contexte approprié pour votre onglet. Le contexte inclut le thème dans lequel la page est affichée, ainsi que l’objet de couleur globale que vous pouvez utiliser pour appliquer les couleurs de teams à votre onglet. Comme vous pouvez le voir dans switch l’instruction, l' <div> élément approprié est choisi en fonction du thème.At render time this function will be called with the appropriate context for your tab. The context includes the theme that the page is being rendered in as well as the global color object that you can use to apply Teams colors to your tab. As you can see in the switch statement, the appropriate <div> is chosen based on the theme.

Pour modifier les thèmes, nous devons transmettre au niveau racine TeamsComponentContext un autre thème.To change themes, we need to pass the root-level TeamsComponentContext a different theme. Lorsqu’un thème change, tous les éléments enfants encapsulés dans ConnectedComponent seront ré-rendus.When a theme changes, all the child elements wrapped in ConnectedComponent will be re-rendered. Voir la section précédente « gérer dynamiquement les modifications de thème ».See previous section “Dynamically Handle Theme Changes.”

Il existe d’autres façons de connecter votre composant à TeamsComponentContext.There are other ways to connect your component to TeamsComponentContext. Si vous êtes familiarisé avec Redux, vous pouvez préférer le modèle suivant :If you’re familiar with Redux, you may prefer the following pattern:

import React, { Component } from ‘react’;
import { TeamsComponentContext, ThemeStyle, connectTeamsComponent } from ‘msteams-ui-components-react’

class App extends Component {
    render() {
        return (
            <TeamsComponentContext
                fontSize={16}
                theme={ThemeStyle.HighContrast}>
                <MyComponent />
            </TeamsComponentContext>
        );
    }
}

class MyComponentInner extends Component {
    render() {
        const context = this.props.context;
        switch (context.style) {
            case ThemeStyle.Dark:
                return <div style={{ color: context.colors.dark.brand00 }}>Dark theme!</div>;
            case ThemeStyle.HighContrast:
                return <div style={{ color: context.colors.highContrast.black }}>High Contrast theme!</div>;
            case ThemeStyle.Light:
                return <div style={{ color: context.colors.light.brand00 }}>Light theme!</div>;
        }
    }
}

const MyComponent = connectTeamsComponent(MyComponentInner);

export default App;

Dans cette méthode, au lieu d’utiliser ConnectedComponent, vous utilisez la fonction connectTeamsComponent.In this method, instead of using ConnectedComponent, you use the connectTeamsComponent function. La fonction connectTeamsComponent prend votre composant actuel et renvoie un nouveau composant avec l’objet Context injecté.The connectTeamsComponent function takes your current component and returns a new component with the context object injected.

Étapes suivantesNext steps

Dirigez Team App Studio et découvrez tous les contrôles que nous proposons et un exemple de code expliquant comment les utiliser.Head to Teams App Studio and check out all the controls we offer and sample code of how to use them. N’oubliez pas de les explorer dans différents thèmes.Don’t forget to explore them in different themes.