Créer une expérience utilisateur dans Microsoft Teams

Microsoft Teams est le hub de collaboration. Il s’agit de l’endroit où vous rencontrez vos collègues, où vous échangez des idées et où vous travaillez ensemble sur des fichiers. C’est là que vous pouvez ouvrir les applications de votre organisation sans quitter le contexte de votre travail. C’est également l’endroit où vous rencontrez vos partenaires commerciaux.

Microsoft Teams se concentre sur le travail d’équipe. À l’aide de ses fonctionnalités d’extensibilité, vous pouvez l’étendre pour placer vos collègues au centre et leur offrir un endroit central pour commencer leur journée de travail et préparer la journée.

Cet article présente un exemple de scénario d’extension de Microsoft Teams à l’aide de SharePoint Framework afin d’offrir à vos collègues une expérience utilisateur dans laquelle ils peuvent commencer leur journée et consulter leurs informations personnelles.

Exemple d’expérience utilisateur dans Microsoft Teams

Dans les sections suivantes, nous présentons plusieurs façons d’implémenter une expérience utilisateur dans Microsoft Teams à l’aide de SharePoint Framework, et pour chacune d’entre elles, nous mentionnons ses avantages et considérations à prendre en compte.

Incorporer une page de SharePoint moderne

Récemment SharePoint Online a introduit la possibilité d’incorporer des pages SharePoint modernes dans Microsoft Teams. Grâce à cette fonctionnalité, vous pouvez créer une page SharePoint moderne avec plusieurs composants Web SharePoint Framework qui montrent des informations personnalisées pour l’utilisateur actuel, telles que des documents récents ou des réunions à venir.

Page SharePoint moderne avec plusieurs composants Web SharePoint Framework affichant des informations personnalisées pour l’utilisateur actuel

Une fois la page prête, dans Microsoft Teams, vous créez une application personnelle pointant vers la page SharePoint page.

Création d’une application Teams personnelle à l’aide d’App Studio

Attention

Lorsque vous incorporez une page SharePoint moderne dans Teams, vous ne devez pas utiliser l’URL de la page, car elle ne fonctionne pas dans l’application Teams bureau. Utilisez plutôt une URL spéciale pointant vers la teamslogon.aspx page.

Pour améliorer l’expérience, vous activez l’affichage de la page en plein écran, ce qui supprime l’en-tête et la navigation permettant aux utilisateurs de se concentrer sur le contenu.

Avantages de l’incorporation d’SharePoint pages en tant qu’onglets

Créer l’expérience utilisateur dans Microsoft Teams à l’aide d’une page SharePoint moderne est le moyen le plus simple d’offrir aux utilisateurs un tableau de bord personnalisé dans Microsoft Teams. Voici quelques-uns des avantages notables de l’utilisation de cette approche.

Aucun code requis

Cette approche utilise des fonctionnalités SharePoint de modification de page standard et, en supposant que vous disposez des composants Web Parts nécessaires, ne nécessite aucun code personnalisé.

Présenter des informations à l’aide SharePoint de modification de page standard

Lors de la création de la page SharePoint de tableau de bord, vous pouvez utiliser toutes les fonctionnalités de page telles que les colonnes verticales ou horizontales, les sections mises en surbrillez ou les composants Web Parts pleine largeur pour mettre en page les différents éléments d’une page de manière significative. En outre, si les composants Web Parts que vous utilisez sont configurables, vous pouvez les ajuster à vos besoins spécifiques.

Combiner des informations provenant de différentes sources

À l’aide d’une combinaison de composants Web Parts, vous pouvez combiner des informations véritablement personnelles, telles que des e-mails, des réunions ou des documents sur qui la personne a récemment travaillé, avec d’autres informations provenant de l’organisation, mais néanmoins pertinentes pour la personne en fonction de son rôle ou de sa région.

Peu importe également si les composants Web Parts que vous avez placés sur la page sont fournis par Microsoft ou créés par votre organisation et s’ils sont déployés dans une ou plusieurs solutions.

Package et distribution d’application dans votre organisation sans code

Pour proposer à vos utilisateurs l’expérience utilisateur conçue de cette façon, vous devez la mettre en package en tant qu’application Teams personnelle. À l’aide d’App Studio,vous pouvez créer l’application personnelle et la publier dans votre catalogue d’organisation pour que tout le monde puisse l’utiliser.

Éléments à prendre en compte pour l’incorporation SharePoint pages en tant qu’onglets

Bien que l’utilisation de pages SharePoint modernes soit le moyen le plus simple d’offrir aux utilisateurs un tableau de bord personnalisé dans Microsoft Teams, vous devez tenir compte de certaines considérations avant d’utiliser cette approche.

Spécifique à votre organisation

L’application personnelle offrant l’expérience utilisateur basée sur une page SharePoint pointe vers une URL spécifique dans votre environnement SharePoint client. Étant donné qu’il est spécifique à votre client, il n’est pas approprié pour une utilisation par d’autres organisations.

La même page pour tout le monde

Pour que les choses restent simples pour vos utilisateurs, vous devez créer une page SharePoint unique qui servirait de tableau de bord, puis l’exposer en tant qu’application Teams personnelle. Bien que les composants Web Parts de la page afficheront des informations personnalisées (mes e-mails, mes réunions, mes documents), les éléments de la page seront les mêmes pour tout le monde. Les utilisateurs ne peuvent pas configurer eux-mêmes les éléments d’informations qu’ils souhaitent voir ou le nombre d’éléments que les différents composants Web Parts doivent afficher. La mise en page et la configuration des éléments sur la page sont identiques pour tout le monde.

Cette approche est idéale pour les organisations qui souhaitent offrir à leurs utilisateurs une expérience utilisateur dans Microsoft Teams avec le moins d’efforts et de développement personnalisé possible.

Créer une application de Teams multi-onglets

Une autre approche pour offrir à vos utilisateurs une expérience utilisateur dans Microsoft Teams l’SharePoint Framework consiste à créer une application de Teams multi-onglets.

Application de Teams multi-onglets conçue à l’aide de SharePoint Framework

Les Teams applications personnelles peuvent se composer d’un ou de plusieurs onglets. Chaque onglet pointe vers une URL différente. Lorsque vous construisez une application Teams’aideSharePoint Framework, vous pouvez faire pointer chaque onglet vers un SharePoint Framework web. En combinant des composants Web Parts pertinents dans une seule application Teams personnel, vous pouvez offrir aux utilisateurs un seul endroit pour accéder aux informations pertinentes.

Dans cette approche, vous commencez par placer tous les composants Web Parts que vous souhaitez exposer dans un SharePoint Framework projet.

SharePoint Framework projet avec les différents composants Web Parts qui font l’expérience utilisateur

Ensuite, vous devez mettre à jour le manifeste Teams, en référençant les différents composants Web Parts sous forme d’onglets à l’application personnelle, par exemple :

{
  "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.5/MicrosoftTeams.schema.json",
  "manifestVersion": "1.5",
  "packageName": "MyContoso",
  "id": "e81a1b68-686e-412f-90ac-cb80f2544398",
  // ... trimmed for readability
  "staticTabs": [
    {
      "entityId": "com.contoso.my.meetings",
      "name": "Meetings",
      "contentUrl": "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26personal%26componentId=e81a1b68-686e-412f-90ac-cb80f2544398%26forceLocale={locale}",
      "scopes": [
        "personal"
      ]
    },
    {
      "entityId": "com.contoso.my.mail",
      "name": "Mail",
      "contentUrl": "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26personal%26componentId=e81a1b68-686e-412f-90ac-cb80f2544398%26forceLocale={locale}",
      "scopes": [
        "personal"
      ]
    },
    {
      "entityId": "com.contoso.my.files",
      "name": "Files",
      "contentUrl": "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26personal%26componentId=e81a1b68-686e-412f-90ac-cb80f2544398%26forceLocale={locale}",
      "scopes": [
        "personal"
      ]
    },
    {
      "entityId": "com.contoso.my.settings",
      "name": "Settings",
      "contentUrl": "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26personal%26componentId=e81a1b68-686e-412f-90ac-cb80f2544398%26forceLocale={locale}",
      "scopes": [
        "personal"
      ]
    }
  ],
  // ...trimmed for readability
}

Important

Assurez-vous que les composants Web Parts que vous souhaitez exposer dans l’application Teams personnelle ont dans leur manifeste, dans la propriété, la valeur supportedHosts TeamsPersonalApp spécifiée.

Pour que les utilisateurs configurent les composants Web Parts exposés sous les différents onglets, vous pouvez créer un composant Web Paramètres distinct et l’exposer sous forme d’onglet.

{
  "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.5/MicrosoftTeams.schema.json",
  "manifestVersion": "1.5",
  "packageName": "MyContoso",
  "id": "e81a1b68-686e-412f-90ac-cb80f2544398",
  // ... trimmed for readability
  "staticTabs": [
    // ... trimmed for readability
    {
      "entityId": "com.contoso.my.settings",
      "name": "Settings",
      "contentUrl": "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26personal%26componentId=e81a1b68-686e-412f-90ac-cb80f2544398%26forceLocale={locale}",
      "scopes": [
        "personal"
      ]
    }
  ],
  // ...trimmed for readability
}

Avantages de la création d’applications de Teams multi-onglets

La création de l’expérience Utilisateur en tant qu’application Teams multi-onglets nécessite du travail de développement. En retour, il offre davantage d’avantages liés à la personnalisation et à la distribution de la solution.

Configuration spécifique à l’utilisateur

Les utilisateurs installent des Teams personnelles et peuvent les configurer selon leurs besoins spécifiques. En construisant l’expérience utilisateur en tant qu’application Teams personnelle et en exposant certaines options de configuration, vous pouvez permettre aux utilisateurs de spécifier le type d’informations qu’ils souhaitent voir et comment elles doivent être affichées. Alors que l’ensemble d’onglets, les types d’informations affichés dans l’application personnelle sont résolus, leur contenu peut être configuré par tout le monde selon ses besoins spécifiques.

Package en tant que solution réutilisable

Les Teams personnelles conçues à l’SharePoint Framework peuvent être utilisées par plusieurs organisations différentes. Si l’organisation dispose du package SharePoint Framework avec des composants Web Parts déployés dans son client, elle peut installer l’application Teams personnelle et l’utiliser également. Microsoft Teams ajustera automatiquement les URL afin qu’elles pointent vers le client SharePoint de l’organisation.

Considérations pour la création d’applications de Teams multi-onglets

La création d’applications de Teams multi onglets vous offre plus de flexibilité en matière de personnalisation et de distribution de la solution. Toutefois, elle insérait certaines considérations que vous devez prendre en considération avant d’utiliser cette approche.

Nécessite un développement personnalisé

En comparaison de la création d’un tableau de bord à l’aide d’une page SharePoint moderne et de son exposition en tant qu’application Teams personnelle à l’aide d’App Studio, la création d’une application Teams personnelle à l’aide de SharePoint Framework nécessite un développement personnalisé. La complexité de cet effort dépend en grande partie de votre solution et du type d’informations que vous choisissez d’exposer.

Limité aux composants Web Parts personnalisés

Lorsque vous construisez des applications de Teams multi-onglets, vous ne pouvez pointer que vers des composants Web Parts personnalisés. Le référencement de l’élément Web Part standard fourni par Microsoft n’est pas pris en charge.

Tous les composants Web Parts doivent se faire dans le même projet

Bien que cela ne soit pas nécessaire, le fait d’avoir tous les composants Web Parties dans le même projet vous aidera à simplifier la maintenance de votre solution. Si les composants Web Parts sont stockés dans plusieurs projets, la gestion de leurs références et de leur configuration au fil du temps vous sera plus coûteuse.

Partie Web personnalisée requise pour l’exposition des paramètres

Les Teams personnelles n’ont pas d’interface utilisateur standard pour configurer les paramètres. Au lieu de cela, le modèle recommandé consiste à exposer les paramètres sous un onglet distinct. Le développeur contrôle l’expérience utilisateur de cet onglet et peut l’ajuster pour qu’il corresponde aux exigences spécifiques de l’application.

En le traduit en SharePoint Framework, cela signifie que vous devez créer un autre élément Web Part qui permet aux utilisateurs de configurer l’application. L’onglet Paramètres peut exposer la configuration de tous les autres onglets afin que les utilisateurs peuvent configurer l’application entière à partir d’un seul endroit.

Implémenter le stockage pour la configuration de l’utilisateur

Les Teams personnelles n’offrent aucune infrastructure pour la persistance de leur configuration. Chaque application doit décider par elle-même comment et où elle maintient les préférences de l’utilisateur.

Bien que les composants Web SharePoint Framework ont un moyen standard de faire persister les paramètres lorsqu’ils sont utilisés sur des pages SharePoint ou dans des onglets Microsoft Teams, lorsqu’ils sont exposés en tant qu’applications Teams personnelles, ils ne peuvent pas utiliser cette infrastructure. Au lieu de cela, vous devez choisir un moyen de stocker les préférences de l’utilisateur. En outre, vous devez vous assurer que vos composants Web Parts peuvent récupérer leur configuration à partir de cet emplacement.

Chaque partie Web est un onglet distinct

Lorsque vous construisez des Teams personnelles à l’SharePoint Framework, chaque onglet de l’application correspond à un seul élément Web. Selon la quantité d’informations que vous souhaitez exposer dans votre expérience utilisateur, votre application peut finir par avoir de nombreux onglets. Au lieu de pouvoir obtenir rapidement une vue d’ensemble, les utilisateurs doivent accéder aux différents onglets pour trouver toutes les informations nécessaires.

Cette approche convient aux organisations qui ont des développeurs professionnels qui ont de l’expérience dans la création de solutions SharePoint Framework et qui souhaitent distribuer l’expérience utilisateur à d’autres organisations ou sur le marché. En outre, les utilisateurs pourront utiliser l’application tant qu’elle n’expose pas trop de types d’informations (onglets).

Combiner plusieurs composants Web Parts dans un seul onglet d’une application Teams personnelle

Auparavant, lors de la discussion de l’idée de créer une application Teams personnalisée à l’aide de SharePoint Framework, nous avons mentionné que chaque onglet correspond à un seul et même élément Web. Dans le contexte d’une expérience utilisateur, cela entraîne une expérience fragmentée et de nombreux onglets différents entre lequel les utilisateurs doivent basculer pour obtenir une vue d’ensemble complète de leurs données.

Si vous créez vos composants Web Parts à l’aide de React, vous pouvez résoudre ce problème en combinant plusieurs composants React racines (le composant React référencé dans la classe de composant Web Part) dans un seul composant Web Part.

Pour le mettre en pratique, supposons que vous avez un projet avec les composants Web Parts suivants : calendrier personnel, contacts personnels, courrier électronique personnel et tâches personnelles. Par défaut, tous ces composants Web Parts sont mappés à des onglets distincts dans une application Teams personnelle. À la place, que se passe-t-il si nous pouvons les grouper dans un seul onglet pour fournir un affichage plus concis des informations ?

Plusieurs composants Web Parts regroupés sur un seul onglet

Pour simplifier l’expérience utilisateur, vous pouvez créer un nouveau composant Web Part et avoir sa référence de composant racine React React composants de chacun de ces composants Web, par exemple :

import { WebPartTitle } from '@pnp/spfx-controls-react/lib/WebPartTitle';
import * as React from 'react';
import { IPlanningProps } from '.';
import PersonalCalendar from '../../personalCalendar/components/PersonalCalendar';
import { PersonalTasks } from '../../personalTasks/components';
import RecentlyUsedDocuments from '../../recentlyUsedDocuments/components/RecentlyUsedDocuments';
import styles from './Planning.module.scss';

export default class Planning extends React.Component<IPlanningProps, {}> {
  public render(): React.ReactElement<IPlanningProps> {
    return (
      <div className={styles.planning}>
        <WebPartTitle displayMode={this.props.displayMode}
          title='Planning'
          updateProperty={this.props.updateProperty} />
        <div className={styles.column}>
          <PersonalCalendar displayMode={this.props.displayMode}
            graphClient={this.props.graphClient}
            title='Upcoming meetings'
            daysInAdvance={4}
            numMeetings={0}
            refreshInterval={5}
            updateProperty={this.props.updateProperty} />
        </div>
        <div className={styles.column}>
          <PersonalTasks displayMode={this.props.displayMode}
            graphClient={this.props.graphClient}
            updateProperty={this.props.updateProperty}
            title='My tasks'
            showCompleted={false}
            userName={this.props.pageContext.user.loginName} />
        </div>
        <div className={styles.column}>
          <RecentlyUsedDocuments context={this.props.pageContext}
            title='My recent documents'
            displayMode={this.props.displayMode}
            graphClient={this.props.graphClient}
            updateProperty={this.props.updateProperty}
            nrOfItems={10} />
        </div>
      </div>
    );
  }
}

Ce dernier vous permet de réutiliser votre code existant sans le dupliquer. En outre, vous allez améliorer l’expérience utilisateur en combinant les informations associées et en diminuez le nombre d’onglets différents exposés.

Avantages de la combinaison de plusieurs composants Web Parts dans un seul onglet

La combinaison d’informations de plusieurs composants Web Parts dans un seul onglet vous permet de simplifier l’expérience utilisateur de votre application Teams personnelle.

La possibilité de réorganiser la présentation des informations lorsqu’elles sont exposées dans une application Teams personnelle vous permet d’améliorer l’expérience utilisateur. En çant des informations connexes ou similaires sur un seul onglet, vous aidez les utilisateurs à jeter rapidement un coup d’œil sur ce qui les concernant.

Le regroupement d’informations associées permet également de réduire le nombre d’onglets affichés dans l’application personnelle, ce qui permet aux utilisateurs de naviguer plus facilement entre les différentes sections.

Contrôler l’expérience utilisateur

Lors du regroupement d’informations connexes, vous créez un React et référencez les composants existants à partir de l’intérieur. Tout en faisant cela, vous avez le contrôle total de la présentation des informations et pouvez prendre en compte différents aspects tels que l’importance des informations affichées, sa pertinence pour l’utilisateur, l’appareil, la taille de l’écran, etc.

Réutilisation du code existant

Lorsque vous créez SharePoint Framework composants Web React, la fonctionnalité principale du composant Web Part est wrapped dans un composant React unique. En référentant ce composant à partir d’un autre composant, vous pouvez réutiliser toutes les fonctionnalités sans avoir à dupliquer du code. Cette possibilité vous offre une grande flexibilité et vous permet de créer un ensemble de blocs de construction réutilisables qui peuvent ensuite être composés dans des composants Web Teams plus volumineux.

Considérations pour le regroupement de plusieurs composants Web Parts dans un seul onglet

La combinaison de plusieurs composants Web Parts dans un seul onglet vous permet de mieux utiliser le patrimoine d’écran disponible et de fournir à l’utilisateur une vue complète des informations pertinentes. Vous devez toutefois prendre en compte certaines considérations spécifiques avant de choisir cette approche.

La combinaison de composants Web Parts nécessite un effort de développement

Pour combiner plusieurs React composants web en un seul composant Web Part, vous devez avoir une bonne compréhension des SharePoint Framework. Bien qu’il ne soit pas plus compliqué que de créer des composants Web Part à l’aide de React, vous devez comprendre comment les différents composants React que vous souhaitez intégrer fonctionnent afin de pouvoir les configurer correctement.

Uniquement pour les composants Web Parts personnalisés

Pour intégrer plusieurs React dans un seul composant Web Part, vous devez avoir accès à leur code source. Pour l’instant, le code source des composants Web Parts tiers n’est pas disponible, ce qui signifie que cette approche est limitée uniquement aux composants Web Parts tiers.

Cette approche est recommandée chaque fois que vous souhaitez offrir aux utilisateurs une expérience utilisateur enrichie présentant des informations provenant de nombreuses sources différentes. Les informations que vous avez affichées sont entièrement contrôlées par le code que vous possédez. En suivant cette approche, vous pouvez également créer une solution qui peut être distribuée à d’autres organisations directement ou via le marketplace.