Erstellen einer persönlichen Registerkarte für Microsoft TeamsBuild a personal tab for Microsoft Teams

Registerkarten stellen eine einfache Möglichkeit dar, Inhalte in Ihrer APP zu Oberflächen, indem eine Webseite im Wesentlichen in Microsoft Teams eingebettet wird.Tabs are a simple way to surface content in your app by essentially embedding a webpage in Teams.

Es gibt zwei Arten von Registerkarten in Microsoft Teams.There are two types of tabs in Teams. In diesem Lernprogramm erstellen Sie grundlegende eine persönliche Registerkarte, eine voll Bildinhalts Seite für einzelne Benutzer.In this tutorial, you'll build basic a personal tab, a full-screen content page for individual users. (Persönliche Registerkarten sind die nächste Sache einer herkömmlichen Website Erfahrung in Microsoft Teams.)(Personal tabs are the closest thing to a traditional website experience in Teams.)

VorabinformationenBefore you begin

Für die ersten Schritte benötigen Sie eine grundlegende ausgeführte persönliche Registerkarte.You need a basic running personal tab to get started. Wenn Sie noch keinen haben, lesen Sie Erstellen und Ausführen ihrer ersten Teams-App.If you don't have one, see build and run your first Teams app.

Ihre ZuordnungYour assignment

Personen in Ihrer Organisation haben Probleme bei der Suche nach grundlegenden Kontaktinformationen für wichtige Funktionen (Helpdesk, HR usw.).People in your organization have trouble finding basic contact information for important functions (help desk, HR, etc.). Sie müssen sicherstellen, dass diese Informationen schnell an einer Stelle gefunden werden können.You're in charge of making sure they can quickly find this information in one place. Wie würden Sie das tun?How would you do that? Eine persönliche Registerkarte Teams, natürlich.A Teams personal tab, of course.

Was Sie lernenWhat you'll learn

  • Identifizieren einiger der Eigenschaften des App-Manifests und der für persönliche Registerkarten relevanten GerüsteIdentify some of the app manifest properties and scaffolding relevant to personal tabs
  • Erstellen von Registerkarten InhaltenCreate tab content
  • Aktualisieren des Farbdesigns einer Registerkarte basierend auf der BenutzereinstellungUpdate a tab's color theme based on user preference

1. Identifizieren der relevanten App-Projektkomponenten1. Identify relevant app project components

Ein Großteil des App-Manifests und Gerüste werden automatisch eingerichtet, wenn Sie Ihr Projekt mit dem Teams-Toolkit erstellen.Much of the app manifest and scaffolding are set up automatically when you create your project with the Teams Toolkit. Lassen Sie uns die Hauptkomponenten für die Erstellung einer persönlichen Registerkarte betrachten.Let's look at the main components for building a personal tab.

App-ManifestApp manifest

Der folgende Ausschnitt aus dem App-Manifest (die manifest.json Datei im Verzeichnis des Projekts .publish ) zeigt an staticTabs , welche Eigenschaften und Standardwerte für persönliche Registerkarten relevant sind.The following snippet from the app manifest (the manifest.json file in your project's .publish directory) shows staticTabs, which includes properties and default values relevant to personal tabs.

"staticTabs": [
    {
        "entityId": "index",
        "name": "Personal Tab",
        "contentUrl": "{baseUrl0}/tab",
        "scopes": [ "personal" ]
    }
],
  • entityId: Ein eindeutiger Bezeichner für die Seite, die von der Registerkarte angezeigt wird.entityId: A unique identifier for the page displayed by the tab.
  • name: Der Anzeigename der Registerkarte (beispielsweise "meine Kontakte").name: The tab's display name (for example, "My Contacts").
  • contentUrl: Die Host-URL die Registerkarteninhalts Seite (muss https sein).contentUrl: The host URL the tab content page (must be HTTPS).
  • scopes: Gibt an, dass die Registerkarte nur zur persönlichen Verwendung verwendet wird.scopes: Specifies the tab is for personal use only.

App-GerüsteApp scaffolding

Das App-Gerüst stellt die Komponenten zum Rendern Ihrer Registerkarte in Microsoft Teams bereit.The app scaffolding provides the components for rendering your tab in Teams. Es gibt eine Menge, mit der Sie arbeiten können, aber im Moment müssen Sie sich nur auf Folgendes konzentrieren:There's a lot you can work with, but for now you only need to focus on the following:

  • Tab.js Datei im src/components Verzeichnis des ProjektsTab.js file in the src/components directory of your project
  • Microsoft Teams JavaScript-Client-SDK, das in den Front-End-Komponenten Ihres Projekts vorinstalliert istMicrosoft Teams JavaScript client SDK, which comes pre-loaded in your project's front-end components

2. Anpassen der Inhaltsseite der Registerkarte2. Customize your tab content page

Kompilieren Sie eine Liste wichtiger Kontakte in Ihrer Organisation.Compile a list of important contacts in your organization. Kopieren Sie den folgenden Codeausschnitt, und aktualisieren Sie ihn mit Informationen, die für Sie relevant sind, oder verwenden Sie, um der Zeit Willen, den Code wie es ist.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>

Wechseln Sie zum src/components Verzeichnis, und öffnen Sie Tab.js .Go to the src/components directory and open Tab.js. Suchen render() Sie die-Funktion, und fügen Sie den Inhalt in das Bild ein return() (siehe Abbildung).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>
    );
}

Fügen Sie die folgende Regel hinzu, App.css damit die e-Mail-Links leichter lesbar sind, unabhängig davon, welches Design verwendet wird.Add the following rule to App.css so the email links are easier to read no matter which theme is used.

a {
  color: inherit;
}

Speichern Sie Ihre Änderungen.Save your changes. Wechseln Sie zur Registerkarte ihrer app in Microsoft Teams, um den neuen Inhalt anzuzeigen.Go to your app's tab in Teams to view the new content.

Screenshot einer persönlichen Registerkarte mit statischem Inhalt.

3. Aktualisieren des Registerkarten Designs3. Update the tab theme

Gute apps fühlen sich nativ für Teams, daher ist es wichtig, dass Ihre Registerkarte mit dem Microsoft Teams-Design kombiniert wird, das Ihre Benutzer bevorzugen: Standard (hell), dunkel oder hoher Kontrast.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. Wie Sie vielleicht schon im letzten Screenshot bemerkt haben, hat ihre Registerkarte immer noch einen hellen Hintergrund, wenn der Client das dunkle Design verwendet.As you might have noticed in the last screenshot, your tab still has a light background when the client's using the dark theme. Dies ist keine empfohlene Benutzeroberfläche.This is not a recommended user experience.

Das Microsoft Teams-JavaScript-Client-SDK kann Ihre APP auf Designänderungen im Client aufmerksam machen und darauf reagieren.The Teams JavaScript client SDK can make your app aware of and react to theme changes in the client. Lassen Sie uns die Vorgehensweise durchgehen.Let's walk through how to do this.

Abrufen des Kontexts zum Microsoft Teams-ClientGet context about the Teams client

In Ihrer Tab.js Datei gibt es einen microsoftTeams.getContext() Anruf, context der einige Informationen zu dem konfigurierten Client Design enthält, unter anderem.In your Tab.js file, there's a microsoftTeams.getContext() call that provides some context about, among other details, the configured client theme. Dank des App-Gerüsts verwenden Sie diesen Code wie für den Zugriff auf die context Schnittstelle und ihre Eigenschaften.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
}

Erstellen eines Handlers für die DesignänderungCreate a theme change handler

Mit den context Eigenschaften in der Hand hat Ihre APP ein fundiertes Verständnis dessen, was in Microsoft Teams geschieht.With the context properties in hand, your app has a solid understanding of what's happening around it in Teams. Die APP weiß jedoch noch nicht, dass Ihr Aussehen das Design reflektieren sollte, das ein Benutzer auswählt.But the app still doesn't know its appearance should reflect whatever theme a user chooses.

Sie benötigen einen Handler, damit sich der Zustand Ihrer APP mit dem Design ändert.You need a handler so that your app's state changes with the theme. Fügen Sie den folgenden Design änderungshandler unmittelbar nach dem microsoftTeams.getContext() Aufruf ein.Insert the following theme change handler immediately after the microsoftTeams.getContext() call.

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

Zuordnen von DesignstilenMatch theme styles

Ihr Design änderungshandler ist vorhanden, aber Sie benötigen Code, der auf diese Änderungen reagiert und die Farben ihrer Registerkarten mit dem aktuellen Design ausrichtet.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.

Hinweis

Das folgende Beispiel ist nur eine Möglichkeit, wie Sie Formatvorlagen auf die Registerkarte anwenden können. Verwenden Sie den Code wie folgt, erweitern Sie ihn, oder schreiben Sie einen eigenen.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.

Speichern Sie den vom Design änderungshandler in bereitgestellten Zustand isTheme .Store the state provided by the theme change handler in isTheme.

  const isTheme = this.state.theme

Bereitstelleneiner bedingten Logik zum Rendern der Formatvorlagen ihrer Registerkarten basierend auf dem aktuellen Design.Provide some conditional logic to render your tab's styles based on the current theme. Das folgende Beispiel zeigt eine einfache Möglichkeit, dies zu tun, indem 1) das aktuelle Design in isTheme , 2) das Erstellen eines newTheme Objekts mit CSS-Eigenschaften, die für das aktuelle Design relevant sind, und 3) Überprüfen des CSS auf das HTML-Stammelement Ihres Registerkarteninhalts ( <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"
  };
}

Überprüfen Sie Ihre Registerkarte in Microsoft Teams.Check your tab in Teams. Die Darstellung sollte eng mit dem dunklen Design übereinstimmen.The appearance should closely match the dark theme.

Screenshot einer persönlichen Registerkarte mit statischem Inhalt.

Gut gemachtWell done

Herzlichen Glückwunsch!Congratulations! Sie verfügen über eine Teams-App mit einer persönlichen Registerkarte, die es einfacher macht, wichtige Kontakte in Ihrer Organisation zu finden.You have a Teams app with a personal tab that makes it easier to find important contacts in your organization.

Weitere InformationenLearn more

Nächste LektionNext lesson

Sie wissen, wie Sie eine Registerkarte zur persönlichen Verwendung erstellen.You know how to build a tab for personal use. Schauen wir uns an, was es braucht, um eine Registerkarte für Team Kanäle und Chats zu erstellen.Let's look at what it takes to build a tab for team channels and chats.