Créer un tableau de bord dans Teams

Ce guide pas à pas vous aide à créer un onglet de tableau de bord, à ajouter un widget au tableau de bord et à implémenter l’API Graph. Vous voyez la sortie suivante :

Configuration requise

• 23 minutes restantes

Créer un tableau de bord

• 22 minutes restantes

Teams Toolkit prend en charge la création d’un tableau de bord et d’une structure.

Pour créer un tableau de bord :

1. Sélectionnez l’icône Teams Toolkit dans la barre d’activité de Visual Studio Code.

2. Sélectionnez Créer une application.

   

3. Sélectionnez Tab pour créer un projet d’onglet.

   

4. Sélectionnez Tableau de bord.

   

5. Sélectionnez TypeScript comme langage de programmation.

   

6. Sélectionnez Dossier par défaut pour stocker le dossier racine de votre projet à l’emplacement par défaut.

   

7. Entrez un nom approprié pour votre application, puis sélectionnez Entrée.

   

   L’application d’onglet Teams est créée en quelques secondes.

   

   Une fois votre application créée, le Kit de ressources Teams affiche le message suivant :

   

8. Sélectionnez l’icône Teams Toolkit dans la barre latérale.

9. Sélectionnez Se connecter à Microsoft 365.

   

10. Sélectionnez Connexion.

    

11. Sélectionnez le F5 pour exécuter l’application en mode débogage.

12. Sélectionnez Ajouter.

    

    Le tableau de bord de l’application d’onglet est correctement créé dans Teams.

    

    Teams prend également en charge différents thèmes, notamment les thèmes sombres et à contraste élevé.

    • Thème sombre
    • Thème à contraste élevé

    L’image suivante montre l’utilisation du thème Sombre dans le client de bureau Teams :

    

Dans l’interface CLI TeamsFx,

• Si vous préférez un mode interactif, exécutez teamsfx new la commande, puis utilisez le clavier pour passer par le même flux que dans Visual Studio Code.

• Si vous préférez le mode non interactif, entrez tous les paramètres requis dans une commande :

  teamsfx new--interactive false--capabilities "dashboard-tab"--programming-language "TypeScript"--folder "./"--app-name dashboard-cli-001

Découvrez le code source de l’application

• 22 minutes restantes

Après avoir créé le projet, vous pouvez afficher les dossiers et fichiers du projet dans l’Explorateur dans Visual Studio Code. L’implémentation principale du tableau de bord se trouve dans le dossier onglets.

Les fichiers suivants fournissent la logique métier de l’onglet tableau de bord. Vous pouvez mettre à jour les fichiers en fonction de vos besoins en matière de logique métier. L’implémentation par défaut fournit un point de départ pour vous aider à démarrer.

Les fichiers suivants sont des fichiers liés au projet. En règle générale, vous n’avez pas besoin de personnaliser ces fichiers.

Ajouter un widget au tableau de bord

• 20 minutes restantes

Pour ajouter un nouveau widget au tableau de bord, procédez comme suit :

1. Définir un modèle de données
2. Créer un service de récupération de données
3. Créer un fichier de widget
4. Ajouter le widget au tableau de bord

Définir un modèle de données

1. Dans Visual Studio Code, accédez à Explorer>modèles src>.

2. Créez un fichier sampleModel.ts .

3. Ajoutez le code suivant dans le fichier sampleModel.ts :

     export interface SampleModel {
     content: string;
     }
   

   

Créer un service de récupération de données

1. Dans Visual Studio Code, accédez à Explorer>services src>.

2. Créez un fichier sampleService.ts .

3. Ajoutez le code suivant dans le fichier sampleService.ts :

   import { SampleModel } from "../models/sampleModel";
   
   export const getSampleData = (): SampleModel => {
     return { content: "Hello world!" };
     };
   

   

Créer un fichier de widget

1. Dans Visual Studio Code, accédez à Explorer>src>widgets.

2. Créez un fichier SampleWidget.tsx .

3. Ajoutez le code suivant dans le fichier SampleWidget.tsx :

   import { Button, Text } from "@fluentui/react-components";
   import { BaseWidget } from "@microsoft/teamsfx-react";
   import { SampleModel } from "../models/sampleModel";
   import { getSampleData } from "../services/sampleService";
   interface SampleWidgetState 
   {
     data?: SampleModel;
   }
   export class SampleWidget extends BaseWidget<any, SampleWidgetState>
   {
     override async getData(): Promise<SampleWidgetState>
     {
       return { data: getSampleData() };
     }
     override header(): JSX.Element | undefined
     {
       return <Text>Sample Widget</Text>;
     }
     override body(): JSX.Element | undefined
     {
       return <div>{this.state.data?.content}</div>;
     }
     override footer(): JSX.Element | undefined
     {
       return <Button>View Details</Button>;
     }
   }
   

   

Ajouter le widget au tableau de bord

Pour ajouter un widget au tableau de bord, procédez comme suit :

1. Dans Visual Studio Code, accédez à Explorer>src>dashboards>SampleDashboard.tsx.

2. Ajoutez le widget au tableau de bord en mettant à jour la override layout() méthode :

   override layout(): JSX.Element | undefined {
     return (<>
         <ListWidget />
         <ChartWidget />
         <SampleWidget />
       </>
     );
   } 
   

   ---

   

   Facultatif : reportez-vous au code suivant pour ajouter votre widget dans une colonne :

   .one-column {
     display: grid;
     gap: 20 px;
     grid-template-rows: 1fr 1fr;
   }
   

   override layout(): JSX.Element | undefined {
     return (<>
         <ListWidget />
         <div className="one-column">
           <ChartWidget />
           <SampleWidget />
         </div>
      </>
     );
   }
   

   Après avoir ajouté tous les détails pertinents pour la création d’un widget, enregistrez les fichiers respectifs.

   Vous pouvez afficher la disposition modifiée et le widget calendrier sur le tableau de bord.

   

Ajouter l’authentification unique et l’appel de l’API Graph

• 15 minutes restantes

Vous avez appris à créer un onglet de tableau de bord et à ajouter un widget au tableau de bord. Ajoutons l’authentification unique (SSO) et l’appel de l’API graph à l’onglet tableau de bord.

Ajouter l’authentification unique

Pour ajouter l’authentification unique, procédez comme suit :

Vous avez ajouté les fichiers d’authentification unique à votre projet et vous devez ensuite appeler les API Graph.

Ajouter un appel d’API Graph

Pour ajouter l’API Graph, procédez comme suit :

Le Kit de développement logiciel (SDK) TeamsFx implémente l’appel d’API graph.

1. Dans Visual Studio Code, accédez à EXPLORER>services src>>listService.ts.

2. Mettez à jour le code suivant dans le listService.ts :

   /**
     * Retrieve sample data
     * @returns data for list widget
     */
   import {TeamsUserCredentialContext} from "../internal/singletonContext";
   import {
     createMicrosoftGraphClientWithCredential,
     TeamsUserCredential,
     } from "@microsoft/teamsfx";
     import { ListModel } from "../models/listModel";
     import { loginAction } from "../internal/login";
   export const getListData = async (): Promise<ListModel[]> => {
     await loginAction(["User.Read"]);
     let credential = TeamsUserCredentialContext.getInstance().getCredential();
     const graphClient = createMicrosoftGraphClientWithCredential(credential, 
     ["User.Read",
     ]);
     const me = await graphClient.api("/me").get();
     return [
       {
         id: me.id,
         title: me.displayName,
         content: me.mail,
       },
     ];
     // {
     //   id: "id1",
     //   title: "Sample title",
     //   content: "Sample description",
     // },
     // {
     //   id: "id2",
     //   title: "Sample title",
     //   content: "Sample description",
     // },
     // {
     //   id: "id3",
     //   title: "Sample title",
     //   content: "Sample description",
     // },
   }
   

3. Accédez à EXPLORER>src>widgets>ListWidget.tsx.

4. Mettez à jour le export default class ListWidget() widget pour ajouter un profil utilisateur.

    export default class ListWidget extends BaseWidget<any, IListWidgetState> {
      async getData(): Promise<IListWidgetState> {
        return { data: await getListData() };
   

5. L’authentification unique et l’API Graph affichent le profil utilisateur connecté dans le widget de liste.

   

Relever le défi

• 10 minutes restantes

Tu as trouvé quelque chose comme ça ?

Félicitations !

• Tout est terminé !

Vous avez terminé le tutoriel !