Verwenden der Steuerelementbibliothek in App StudioUsing the control library in App Studio

Microsoft Teams App Studio bietet Ihnen eine Reihe von Steuerelementen, die Sie in ihren eigenen Apps verwenden können.Microsoft Teams App Studio provides you with a set of controls that you can use in your own apps. Diese Steuerelemente werden auf der Registerkarte Steuerelementbibliothek von App Studio bereitgestellt.These controls are provided in the Control Library tab of App Studio.

Diese Steuerelemente wurden von den Microsoft Teams-Designern erstellt, um Ihre eigenen Workflows zu rationalisieren, das Steuerungsverhalten zu standardisieren und die Standarddesigns des Support Teams zu standardisieren.These controls were created by the Microsoft Teams designers to streamline their own workflows, standardize control behavior and support Team's default themes. Sie können diese Bibliothek in ihren eigenen Apps verwenden, um ein einheitliches Aussehen und Verhalten zu erzielen.You can use this library in your own apps to achieve a unified look and feel.

Zu den Steuerelementen gehören:Controls include:

  • SchaltflächenButtons
  • DropDownsDropdowns
  • KontrollkästchenCheckboxes
  • OptionsfelderRadio Buttons
  • SchaltetToggles
  • Test BereicheTest Areas
  • LinksLinks
  • RegisterkartenTabs
  • TabellenTables
  • SymboleIcons

Optionales Verwenden von Reaktions SteuerelementenOptionally use React controls

Die vollständige Teams-Steuerelementbibliothek verwendet das Reaktions JavaScript-UI-Framework , wird jedoch so erstellt, dass Sie nicht an ein bestimmtes UI-Framework gebunden ist.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. Es gibt vier verschiedene NPM-Pakete:There are four different npm packages:

  • msteams-UI-Styles-Core Die wichtigsten CSS-Formatvorlagen von Benutzeroberflächenkomponenten.msteams-ui-styles-core The core CSS styles of UI components. Es ist unabhängig von einem UI-Framework.It’s independent of any UI framework.
  • msteams-UI-Icons-Core Die Hauptgruppen Symbole.msteams-ui-icons-core The core set of Teams icons.
  • msteams-UI-Components-reagiere Die Bindungs Bibliothek reagieren.msteams-ui-components-react The React binding library. Es hängt von msteams-UI-Styles-Core ab.It depends on msteams-ui-styles-core.
  • msteams-UI-Icons-reagiere Die Reaktions Bindungs Bibliothek für die Gruppe von Teams-Symbolen.msteams-ui-icons-react The React binding library for the set of Teams icons. Es hängt von msteams-UI-Icons-Core ab.It depends on msteams-ui-icons-core.

Diese Bibliotheken sind alle Open Source, und Sie können msteams-UI-Styles-Core und msteams-UI-Icons-Core ohne Reaktion verwenden.These libraries are all open source, and you can use msteams-ui-styles-core and msteams-ui-icons-core without React.

Hinzufügen der SteuerelementbibliothekAdding the control library

Installieren der Steuerelementbibliothek und ihrer Peer typestyleAbhängigkeit:Install the control library and its peer dependency typestyle:

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

Optional: Installieren Sie die Teams-Symbole.Optional: Install the Teams icons.

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

Suchen und öffnen src/App.js und ersetzen Sie den Inhalt durch den folgenden Code: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;

Ausführen der AppRun the app

npm run start

Wenn Sie zu http://localhost:3000navigieren, sollte der folgende Bildschirm angezeigt werden:When you navigate to http://localhost:3000, you should see the following screen:

<img width="530px" src="~/assets/images/get-started/control-library-button.png" title="Schaltfläche "Steuerelementbibliothek""/>

Dynamisches behandeln von DesignänderungenDynamically handling theme changes

Ihre APP muss Designs behandeln, wenn:Your app needs to handle themes when:

  • Die Registerkarte wird anfänglich geladen.The tab is initially loaded
  • Ein Benutzer ändert das Design, nachdem die Registerkarte bereits geladen wurde.A user changes the theme after the tab is already loaded

Das Design ist im Kontexteiner Registerkarte enthalten, die abgerufen werden kann, bevor die Registerkarte über URL-Platzhalterwerte geladen wird, oder jederzeit mithilfe des Microsoft Teams-JavaScript-Client-SDK.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.

Hier wird erläutert, wie das aktuelle Design abgerufen wird und wie auf Designänderungen geantwortet wird: Kontext für Ihre Microsoft Teams-Registerkarte abrufen.How the current theme is retrieved and how to respond to theme changes is discussed here: Get context for your Microsoft Teams tab.

In diesem Beispielcode wird gezeigt, wie dies geschieht.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);
}

Verbinden Ihrer eigenen Komponente mit dem TeamsComponentContextConnect your own component to the TeamsComponentContext

Wenn Sie Ihren eigenen CSS-Code verwenden möchten, können Sie weiterhin auf Designänderungen reagieren und die von Microsoft Teams definierten Farben verwenden.If you want to use your own CSS code you can still respond to theme changes and use colors defined by teams. TeamsComponentContext ermöglicht es Ihnen, dies zu tun.TeamsComponentContext allows you to do this.

Bearbeiten Sie die Datei erneut src/App.js , und ersetzen Sie den Inhalt durch den folgenden Code: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;

In diesem Code wird eine neue Komponente als MyComponent definiert.In this code, a new component is defined called MyComponent. Anschließend wird eine spezielle Komponente aus der Steuerelementbibliothek namens ConnectedComponent hinzugefügt.Then a special component from the control library called ConnectedComponent is added. ConnectedComponent verfügt über eine Eigenschaft render mit dem Namen, die eine Funktion als Parameter verwendet.ConnectedComponent has a property called render which takes a function as a parameter. Zum Zeitpunkt des Renderns wird diese Funktion mit dem entsprechenden Kontext für die Registerkarte aufgerufen. Der Kontext enthält das Design, in dem die Seite gerendert wird, sowie das globale Color-Objekt, das Sie verwenden können, um Microsoft Teams-Farben auf die Registerkarte anzuwenden. Wie Sie in der switch Anweisung sehen können, wird basierend <div> auf dem Design das entsprechende ausgewählt.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.

Um Designs zu ändern, müssen wir die TeamsComponentContext auf Stammebene mit einem anderen Design übergeben.To change themes, we need to pass the root-level TeamsComponentContext a different theme. Wenn sich ein Design ändert, werden alle untergeordneten Elemente, die in ConnectedComponent umbrochen werden, erneut gerendert.When a theme changes, all the child elements wrapped in ConnectedComponent will be re-rendered. Siehe vorheriger Abschnitt "dynamisches behandeln von Designänderungen".See previous section “Dynamically Handle Theme Changes.”

Es gibt andere Möglichkeiten, um Ihre Komponente mit TeamsComponentContext zu verbinden.There are other ways to connect your component to TeamsComponentContext. Wenn Sie mit reduxvertraut sind, bevorzugen Sie möglicherweise das folgende Muster: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;

Verwenden Sie in dieser Methode anstelle von ConnectedComponent die connectTeamsComponent-Funktion.In this method, instead of using ConnectedComponent, you use the connectTeamsComponent function. Die connectTeamsComponent-Funktion verwendet Ihre aktuelle Komponente und gibt eine neue Komponente zurück, wobei das Context-Objekt injiziert wird.The connectTeamsComponent function takes your current component and returns a new component with the context object injected.

Weitere SchritteNext steps

Wechseln Sie zu Teams App Studio, und schauen Sie sich alle Steuerelemente an, die wir anbieten, und Beispielcode für deren Verwendung.Head to Teams App Studio and check out all the controls we offer and sample code of how to use them. Vergessen Sie nicht, diese in verschiedenen Designs zu erkunden.Don’t forget to explore them in different themes.