Erstellen einer Kanal-und Gruppenregisterkarte für Microsoft TeamsBuild a channel and group tab for Microsoft Teams

In diesem Lernprogramm erstellen Sie eine einfache Kanal Registerkarte (auch als Gruppe Registerkartebezeichnet), bei der es sich um eine voll Bild Seite für einen Teamkanal oder Chat handelt.In this tutorial, you'll build a basic channel tab (also known as a group tab), which is a full-screen page for a team channel or chat. Im Gegensatz zu einer persönlichen Registerkarte können Benutzer einige Aspekte dieser Registerkarte konfigurieren (beispielsweise benennen Sie die Registerkarte so um, dass Sie für Ihren Kanal sinnvoll ist).Unlike a personal tab, users can configure some aspects of this kind of tab (for example, rename the tab so it's meaningful to their channel).

Ihre ZuordnungYour assignment

Vor kurzem hat Ihre Organisation eine Registerkarte "Teams" mit Informationen zur Kontaktaufnahme mit wichtigen Funktionen (Help Desk, HR usw.) erstellt.Not long ago, your organization created a Teams tab with information on how to contact important functions (help desk, HR, etc.). Da die Registerkarte jedoch nur für den persönlichen Gebrauch verwendet wurde, muss jeder Benutzer die Registerkarte installieren, um ihn anzuzeigen, und die Annahme ist niedriger als erwartet.However, since the tab was scoped only for personal use, each user must install the tab to see it and adoption is lower than expected. In anderen Worten: zu viele Arbeitskräfte wissen immer noch nicht, wie Sie zum Helpdesk gelangen.In other words, too many workers still don't know how to reach the help desk.

Sie können diese Informationen leichter finden, indem Sie eine Kanal RegisterkarteErstellen, wodurch die Belastung der Installation einer APP durch alle Benutzer beseitigt wird.You can make this information easier to find by building a channel tab, which will remove the burden of requiring everyone to install an app. Stattdessen kann ein Benutzer die Registerkarte in einem Kanal oder Chat zum Nutzen einer ganzen Gruppe installieren.Instead, one user can install the tab in a channel or chat for the benefit of an entire group.

Was Sie lernenWhat you'll learn

  • Erstellen eines App-Projekts mithilfe des Microsoft Teams-Toolkits für Visual Studio CodeCreate an app project using the Microsoft Teams Toolkit for Visual Studio Code
  • Identifizieren einiger der Eigenschaften des App-Manifests und der für Kanal-und Gruppenregisterkarten relevanten GerüsteIdentify some of the app manifest properties and scaffolding relevant to channel and group tabs
  • Lokal Hosten einer APPHost an app locally
  • Erstellen von Registerkarten InhaltenCreate tab content
  • Erstellen von Inhalten für die Konfigurationsseite einer RegisterkarteCreate content for a tab's configuration page
  • Zulassen der Konfiguration und Installation einer RegisterkarteAllow a tab to be configured and installed
  • Angeben eines vorgeschlagenen Registerkarten namensProvide a suggested tab name

1. Erstellen des App-Projekts1. Create your app project

Das Microsoft Teams-Toolkit hilft Ihnen beim Einrichten des App-Manifests und der für Kanal-und Gruppenregisterkarten relevanten Gerüste, einschließlich einer grundlegenden Konfigurationsseite und einer Inhaltsseite, auf der ein "Hello, World!" angezeigt wird.The Microsoft Teams Toolkit helps you set up the app manifest and scaffolding relevant to channel and group tabs, including a basic configuration page and content page that displays a "Hello, World!" Nachricht.message.

Tipp

Wenn Sie noch kein Teams-App-Projekt erstellt haben, ist es möglicherweise hilfreich, diese Anweisungen zu befolgen, mit denen Projekte detaillierter erläutert werden.If you haven't created a Teams app project before, you might find it helpful to follow these instructions that explain projects in more detail.

  1. Wählen Sie in Visual Studio Code Microsoft Teams in der linken Aktivitäts Leiste aus, und wählen Sie neue Teams-app erstellenaus.
  2. Geben Sie einen Namen für Ihre Teams-App ein.Enter a name for your Teams app. (Dies ist der Standardname für Ihre APP und auch der Name des App-Projektverzeichnisses auf Ihrem lokalen Computer.)(This is the default name for your app and also the name of the app project directory on your local machine.)
  3. Wählen Sie auf dem Bildschirm Funktionen hinzufügen die Register Karte dann Gruppe oder Teams Kanal Registerkarte.On the Add capabilities screen, select Tab then Group or Teams channel tab.
  4. Klicken Sie unten auf dem Bildschirm auf Fertig stellen , um Ihr Projekt zu konfigurieren.Select Finish at the bottom of the screen to configure your project.

2. Identifizieren der relevanten App-Projektkomponenten2. 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 zum Erstellen einer Kanal-und Gruppenregisterkarte betrachten.Let's look at the main components for building a channel and group tab.

App-ManifestApp manifest

Der folgende Ausschnitt aus dem App-Manifest zeigt configurableTabs , der die Eigenschaften und Standardwerte für Kanal-und Gruppenregisterkarten enthält.The following snippet from the app manifest shows configurableTabs, which includes the properties and default values relevant to channel and group tabs.

"configurableTabs": [
    {
        "configurationUrl": "{baseUrl0}/config",
        "canUpdateConfiguration": true,
        "scopes": [
            "team",
            "groupchat"
        ]
    }
],
  • configurationUrl: Die Host-URL für Ihre Registerkarten-Konfigurationsseite (muss https sein).configurationUrl: The host URL for your tab configuration page (must be HTTPS).
  • canUpdateConfiguration: Wenn Sie auf festgelegt true ist, können Benutzer die Registerkarteneinstellungen ändern, die Registerkarte umbenennen oder aus einem Kanal oder Chat entfernen.canUpdateConfiguration: If set to true, users can change tab settings, rename the tab, or remove it from a channel or chat.
  • scopes: Gibt an, ob Benutzer die app in Kanälen ( team ) und Chats installieren können ( groupchat ).scopes: Specifies if users can install the app in channels (team) and chats (groupchat). Mindestens ein Wert ist erforderlich.At least one value is required.

App-GerüsteApp scaffolding

Das App-Gerüst stellt eine TabConfig.js Datei bereit, die sich im src/components Verzeichnis des Projekts befindet, um die Konfigurationsseite der Registerkarte zu rendern (Weitere Informationen dazu in Kürze).The app scaffolding provides a TabConfig.js file, located in the src/components directory of your project, for rendering your tab's configuration page (more on this soon).

3. führen Sie Ihre APP aus.3. Run your app

Im Interesse der Zeit erstellen und führen Sie Ihre APP lokal aus.In the interest of time, you'll build and run your app locally.

  1. Wechseln Sie in einem Terminal zum Stammverzeichnis des App-Projekts, und führen Sie es aus npm install .In a terminal, go to the root directory of your app project and run npm install.
  2. Ausführen npm start .Run npm start.

Nach Abschluss des Vorgangs wird ein erfolgreiches kompiliert!Once complete, there's a Compiled successfully! Nachricht im Terminal.message in the terminal.

4. Einrichten eines sicheren Tunnels für Ihre APP4. Set up a secure tunnel to your app

Für Testzwecke hosten wir die Registerkarte auf einem lokalen Webserver (Port 3000).For testing purposes, let's host your tab on a local web server (port 3000).

  1. Führen Sie in einem Terminal aus ngrok http 3000 .In a terminal, run ngrok http 3000.
  2. Kopieren Sie die HTTPS-URL, die Sie bereitgestellt haben.Copy the HTTPS URL you're provided.
  3. Öffnen Sie in Ihrem .publish Verzeichnis Development.env .In your .publish directory, open Development.env.
  4. Ersetzen Sie den baseUrl0 Wert durch die kopierte URL.Replace the baseUrl0 value with the copied URL. (Ändern Sie beispielsweise baseUrl0=http://localhost:3000 in baseUrl0=https://85528b2b3ca5.ngrok.io .)(For example, change baseUrl0=http://localhost:3000 to baseUrl0=https://85528b2b3ca5.ngrok.io.)

Ihr App-Manifest zeigt auf die Stelle, an der Sie die Registerkarte hosten.Your app manifest is pointing to where you're hosting the tab.

5. Anpassen der Inhaltsseite für Registerkarten5. Customize your tab content page

Öffnen Sie das App-Manifest ( manifest.json ) im .publish Verzeichnis, und legen Sie die folgenden Eigenschaften in fest staticTabs , die die Inhaltsseite ihrer Registerkarte definiert.Open the app manifest (manifest.json) in the .publish directory and set the following properties in staticTabs, which defines your tab's content page.

"staticTabs": [
    {
        "entityId": "index",
        "name": "My Contacts",
        "contentUrl": "{baseUrl0}/tab",
        "scopes": [ "personal" ]
    }
],

Kopieren Sie den folgenden Codeausschnitt, und aktualisieren Sie ihn mit Informationen, die für Ihre Organisation 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 your organization 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;
}

6. Erstellen Ihrer Registerkarten-Konfigurationsseite6. Create your tab configuration page

Jede Registerkarte in einem Kanal oder Chat verfügt über eine Konfigurationsseite, eine modale mit mindestens einer Setup Option, die angezeigt wird, wenn Benutzer ihre App installieren.Every tab in a channel or chat has a configuration page, a modal with at least one setup option that displays when users install your app. Auf der Konfigurationsseite werden Benutzer standardmäßig gefragt, ob Sie den Kanal oder den Chat benachrichtigen möchten, wenn die Registerkarte installiert ist.The configuration page by default asks users if they want to notify the channel or chat when the tab is installed.

Fügen Sie der Konfigurationsseite einige Inhalte hinzu.Add some content to your configuration page. Wechseln Sie zum Verzeichnis Ihres Projekts src/components , öffnen Sie TabConfig.js und fügen Sie einige Inhalte in ein return() (siehe Abbildung).Go to your project's src/components directory, open TabConfig.js, and insert some content inside return() (as shown).

return (
    <div>
      <h1>Add My Contoso Contacts</h1>
      <div>
        Select <b>Save</b> to add our organization's important contacts to this workspace.
      </div>
    </div>
);

Tipp

Geben Sie mindestens einige kurze Informationen zu Ihrer APP auf dieser Seite, da dies das erste Mal sein kann, dass Benutzer davon erfahren.At minimum, provide some brief information about your app on this page since this may be the first time users are learning about it. Sie können auch benutzerdefinierte Konfigurationsoptionen oder einen Authentifizierungs Workfloweinschließen, was bei Registerkarten-Konfigurationsseiten üblich ist.You also could include custom configuration options or an authentication workflow, which is common on tab configuration pages.

7. zulassen, dass die Registerkarte konfiguriert und installiert wird7. Allow the tab to be configured and installed

Damit Benutzer die Registerkarte erfolgreich konfigurieren und installieren können, müssen Sie die sichere Host-URL hinzufügen, die Sie der Konfigurationsseiten Komponente eingerichtet haben.For users to successfully configure and install the tab, you must add the secure host URL you set up to the configuration page component.

Wechseln Sie zu TabConfig.js und suchen Sie microsoftTeams.settings.setSettings .Go to TabConfig.js and locate microsoftTeams.settings.setSettings. "contentUrl"Ersetzen Sie dabei den localhost:3000 Teil der URL durch die Domäne, in der Sie den Registerkarteninhalt hosten (siehe Abbildung).For "contentUrl", replace the localhost:3000 part of the URL with the domain where you're hosting the tab content (as shown).

microsoftTeams.settings.setSettings({
  "contentUrl": "https://<MY_HOST_DOMAIN>/tab"
});

Stellen Sie außerdem sicher, dass microsoftTeams.settings.setValidityState(true); .Also, make sure that microsoftTeams.settings.setValidityState(true);. Standardmäßig ist false die Schaltfläche Speichern auf der Konfigurationsseite jedoch deaktiviert, wenn Sie auf festgelegt ist.It is by default, but if set to false, the Save button is disabled on the configuration page.

8. Angeben eines vorgeschlagenen Registerkarten namens8. Provide a suggested tab name

Wenn Sie eine Registerkarte zur persönlichen Verwendung installieren, ist der Anzeigename die name Eigenschaft im staticTabs Teil des App-Manifests (beispielsweise " meine Kontakte").When you install a tab for personal use, the display name is the name property in the staticTabs portion of the app manifest (for example, My Contacts). Wenn Sie eine Kanal Registerkarte installieren, wird standardmäßig der App-Name angezeigt (beispielsweise First-App).When you install a channel tab, by default the app name displays (for example, first-app).

Dies ist möglicherweise in Ordnung, je nachdem, was Sie Ihre APP aufrufen, aber Sie möchten möglicherweise einen Namen angeben, der im Kontext der Gruppenzusammenarbeit sinnvoller ist (beispielsweise Team Kontakte).This may be fine depending on what you call your app, but you may want to provide a name that makes more sense in the context of group collaboration (for example, Team Contacts).

TabConfig.jsWechseln Sie in zu zurück zu microsoftTeams.settings.setSettings .In TabConfig.js, go back to microsoftTeams.settings.setSettings. Fügen suggestedDisplayName Sie die Eigenschaft mit dem Registerkartennamen hinzu, den Sie standardmäßig anzeigen möchten (siehe Abbildung).Add the suggestedDisplayName property with the tab name you want to display by default (as shown). Verwenden Sie den angegebenen Namen, oder erstellen Sie einen eigenen.Use the provided name or create your own. Denken Sie daran, dass Sie in dem Manifest Benutzern erlauben, den Namen zu ändern, wenn Sie möchten.Remember, in the manifest you're allowing users to change the name if they want.

microsoftTeams.settings.setSettings({
  "contentUrl": "https://<MY_HOST_DOMAIN>/tab",
  "suggestedDisplayName": "Team Contacts"
});

9. Anzeigen der Registerkarte9. View the tab

Um die Konfigurations-und Inhaltsseiten ihrer Registerkarte anzuzeigen, müssen Sie Sie in einem Kanal oder Chat installieren.To see your tab's configuration and content pages, you must install it in a channel or chat.

  1. Wählen Sie im Microsoft Teams-Client appsaus.In the Teams client, select Apps.
  2. Wählen Sie Upload a custom app aus, und wählen Sie Ihre apps aus Development.zip .Select Upload a custom app and choose your app's Development.zip.
  3. Wählen Sie zu einem Team hinzufügen oder zu einem Chat hinzufügen aus, und suchen Sie nach einem Kanal oder Chat, den Sie zum Testen verwenden können.Choose Add to a team or Add to a chat and locate a channel or chat you can use for testing.
  4. Wählen Sie Einrichten einer Registerkarteaus. Die Konfigurationsseite wird angezeigt.Select Set up a tab. The configuration page displays.
    Screenshot einer Kanal Registerkarten-Konfigurationsseite.
  5. Wählen Sie Speichern aus, um die Registerkarte zu konfigurieren. Der Inhalt wird angezeigt.Select Save to configure the tab. The content displays.
    Screenshot einer Kanal Registerkarten-Konfigurationsseite.

Gut gemachtWell done

Herzlichen Glückwunsch!Congratulations! Sie verfügen über eine Teams-App mit einer Registerkarte, in der Sie nützliche Inhalte in Kanälen und Chats anzeigen können.You have a Teams app with a tab for displaying useful content in channels and chats.

Weitere InformationenLearn more

Nächste LektionNext lesson

Sie wissen, wie Sie eine Registerkarte für die Zusammenarbeit erstellen.You know how to build a tab for collaboration. Möchten Sie versuchen, eine andere Art von Teams-APP zu erstellen?Want to try building a different kind of Teams app?