Connecter votre composant WebPart côté client à SharePoint (Hello World 2e partie)

Article
03/21/2023

Connectez votre composant WebPart à SharePoint pour accéder aux fonctionnalités et aux données de SharePoint et offrir une expérience plus homogène aux utilisateurs finals.

Vous pouvez également suivre ces étapes en regardant cette vidéo sur la chaîne YouTube Microsoft 365 Platform Community (PnP) :

Remarque

Cet article poursuit le développement du composant WebPart Hello World créé dans l’article précédent, Créer votre premier composant WebPart.

Exécution de la commande gulp serve

Assurez-vous que la commande gulp serve est en cours d’exécution. Si ce n’est pas le cas, accédez au répertoire du projet helloworld-webpart et exécutez-la à l’aide des commandes suivantes.

cd helloworld-webpart
gulp serve

Accéder au contexte de la page

Le workbench hébergé dans SharePoint permet d’accéder au contexte de page, qui expose les propriétés clés suivantes, telles que :

Le titre du site web
L’URL absolue du site web
L’URL relative au serveur du site web
Le nom de connexion de l’utilisateur

Pour obtenir l’accès au contexte de la page

Pour accéder aux informations contextuelles dans votre composant WebPart, vous allez utiliser l’objet suivant dans votre code :

this.context.pageContext

Dans Visual Studio Code, recherchez &.\src\webparts\helloWorld\HelloWorldWebPart.ts.

Dans la render() méthode , remplacez le bloc de innerHTML code par ce qui suit :

this.domElement.innerHTML = `
<section class="${styles.helloWorld} ${!!this.context.sdks.microsoftTeams ? styles.teams : ''}">
  <div class="${styles.welcome}">
    <img alt="" src="${this._isDarkTheme ? require('./assets/welcome-dark.png') : require('./assets/welcome-light.png')}" class="${styles.welcomeImage}" />
    <h2>Well done, ${escape(this.context.pageContext.user.displayName)}!</h2>
    <div>${this._environmentMessage}</div>
  </div>
  <div>
    <h3>Welcome to SharePoint Framework!</h3>
    <div>Web part description: <strong>${escape(this.properties.description)}</strong></div>
    <div>Web part test: <strong>${escape(this.properties.test)}</strong></div>
    <div>Loading from: <strong>${escape(this.context.pageContext.web.title)}</strong></div>
  </div>
</section>`;

Vous pouvez remarquer que ${ } est utilisé pour afficher la valeur de la variable dans le bloc de code HTML. Un élément HTML div supplémentaire est utilisé pour afficher this.context.pageContext.web.title.
Enregistrez le fichier. La commande gulp serve exécutée dans votre console détecte cette opération d’enregistrement et :
- génère et regroupe automatiquement le code mis à jour
Remarque

Placez la fenêtre de la console et celle de Visual Studio Code côte à côte pour observer Gulp se compiler automatiquement à mesure que vous enregistrez les modifications dans Visual Studio Code.
Accédez au workbench hébergé de votre site SharePoint hébergé. L’URL complète est https://your-sharepoint-site-url/_layouts/workbench.aspx. Actualisez le workbench hébergé pour récupérer les modifications de l’offre groupée de code prédéfinie.

Maintenant que le contexte de la page est disponible pour le composant WebPart, le titre de votre site SharePoint doit s’afficher dans le composant WebPart.

Définition d’un modèle de liste

Vous avez besoin d’un modèle de liste pour commencer à travailler avec les données de liste SharePoint. Pour récupérer les listes, vous avez besoin de deux modèles.

Dans Visual Studio Code, recherchez et ouvrez .\src\webparts\helloWorld\HelloWorldWebPart.ts.
Définissez les interfaces suivantes immédiatement avant la déclaration de classe HelloWorldWebPart :
```
export interface ISPLists {
  value: ISPList[];
}

export interface ISPList {
  Title: string;
  Id: string;
}
```
L’interface ISPList conserve les informations de liste SharePoint auxquelles vous vous connectez.

Récupération de listes à partir du site SharePoint

Vous devez maintenant récupérer des listes à partir du site actuel. Vous allez utiliser l’API REST SharePoint pour extraire ces listes, qui se trouvent à l’emplacement https://yourtenantprefix.sharepoint.com/_api/web/lists.

SharePoint Framework inclut une classe d’assistance spHttpClient pour exécuter des requêtes API REST par rapport à SharePoint. Il ajoute des en-têtes par défaut, gère le résumé requis pour les écritures et recueille les données télémétriques qui permettent au service de surveiller les performances d’une application.

Pour utiliser cette classe d’assistance, importez-les à partir du @microsoft/sp-http module

Faites défiler vers le haut du fichier HelloWorldWebPart.ts.
Recherchez la ligne import * as strings from 'HelloWorldWebPartStrings'; et ajoutez le code suivant immédiatement après :
```
import {
  SPHttpClient,
  SPHttpClientResponse
} from '@microsoft/sp-http';
```
Ajoutez la méthode suivante pour récupérer des listes à partir de SharePoint à l’intérieur de la classe HelloWorldWebPart.
```
private _getListData(): Promise<ISPLists> {
  return this.context.spHttpClient.get(`${this.context.pageContext.web.absoluteUrl}/_api/web/lists?$filter=Hidden eq false`, SPHttpClient.configurations.v1)
    .then((response: SPHttpClientResponse) => {
      return response.json();
    })
    .catch(() => {});
}
```
La méthode utilise la classe d’assistance spHttpClient et émet une requête HTTP GET. Il utilise l’interface ISPLists et applique également un filtre pour ne pas récupérer les listes masquées.
Enregistrez le fichier.
Revenez à la fenêtre de la console qui exécute gulp serve et vérifiez s’il existe des erreurs. S’il existe des erreurs, Gulp les signale dans la console et vous devez les corriger pour pouvoir continuer.

Ajout de nouveaux styles

SharePoint Framework utilise Sass comme préprocesseur CSS et utilise plus spécifiquement la syntaxe SCSS, qui est entièrement conforme à la syntaxe CSS normale. Sass étend le langage CSS et vous permet d’utiliser des fonctionnalités telles que les variables, les règles imbriquées et les instructions import incorporées pour organiser et créer des feuilles de style efficaces pour vos composants WebPart. Le SharePoint Framework est déjà fourni avec un compilateur SCSS qui convertit vos fichiers Sass en fichiers CSS normaux et fournit également une version typée à utiliser pendant le développement.

Pour ajouter de nouveaux styles

Ouvrir HelloWorldWebPart.module.scss. Il s’agit du fichier SCSS dans lequel vous définissez vos styles.

Par défaut, les styles s’appliquent uniquement à votre composant WebPart. Vous pouvez constater que les styles sont définis sous .helloWorld.

Ajoutez les styles suivants après le style .links:

.list {
  color: #333333;
  font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  box-sizing: border-box;
  margin: 10;
  padding: 10;
  line-height: 50px;
  list-style-type: none;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}

.listItem {
  color: #333333;
  vertical-align: center;
  font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  box-shadow: none;
  *zoom: 1;
  padding: 9px 28px 3px;
  position: relative;
}

Enregistrez le fichier.

Gulp recompose le code de la console dès que vous enregistrez le fichier. Cela génère les typages correspondants dans le fichier HelloWorldWebPart.module.scss.ts. Une fois ces styles compilés dans TypeScript, vous pouvez les importer et les référencer dans le code de votre composant WebPart.

Conseil

Ce fichier est généré dynamiquement lorsque le projet est généré. Il est masqué dans la vue Explorateur de VS Code à l’aide du fichier .vscode/settings.json.

Vous pouvez voir l’élément suivant dans la méthode render() du composant WebPart :
```
<div class="${styles.welcome}">
```

Rendu des listes d’informations

Ouvrez la classe HelloWorldWebPart .

Remarque

SharePoint Framework vous offre des options pour détecter les détails de l’environnement et l’emplacement de l’hôte à l’aide de la propriété isServedFromLocalhost ou avec les détails d’EnvironmentType. Dans ce cas, nous allons nous concentrer sur la connexion aux données du site qui héberge le workbench en ligne.

Ajoutez la méthode privée suivante à l’intérieur de la classe HelloWorldWebPart :

private _renderList(items: ISPList[]): void {
  let html: string = '';
  items.forEach((item: ISPList) => {
    html += `
  <ul class="${styles.list}">
    <li class="${styles.listItem}">
      <span class="ms-font-l">${item.Title}</span>
    </li>
  </ul>`;
  });

  if(this.domElement.querySelector('#spListContainer') != null) {
    this.domElement.querySelector('#spListContainer')!.innerHTML = html;
  }
}

Cette méthode référence les nouveaux styles CSS ajoutés précédemment à l’aide de la variable styles et est utilisée pour afficher les informations de liste qui seront reçues de l’API REST.

Enregistrez le fichier.

Ajoutez la méthode privée suivante à l’intérieur de la classe HelloWorldWebPart afin d’appeler la méthode pour récupérer les données de liste :

private _renderListAsync(): void {
  this._getListData()
    .then((response) => {
      this._renderList(response.value);
    })
    .catch(() => {});
}

Enregistrez le fichier.

Récupération des données de liste

Accédez à la méthode render() et remplacez le code à l’intérieur de la méthode par le suivant :

this.domElement.innerHTML = `
<section class="${styles.helloWorld} ${!!this.context.sdks.microsoftTeams ? styles.teams : ''}">
  <div class="${styles.welcome}">
    <img alt="" src="${this._isDarkTheme ? require('./assets/welcome-dark.png') : require('./assets/welcome-light.png')}" class="${styles.welcomeImage}" />
    <h2>Well done, ${escape(this.context.pageContext.user.displayName)}!</h2>
    <div>${this._environmentMessage}</div>
  </div>
  <div>
    <h3>Welcome to SharePoint Framework!</h3>
    <div>Web part description: <strong>${escape(this.properties.description)}</strong></div>
    <div>Web part test: <strong>${escape(this.properties.test)}</strong></div>
    <div>Loading from: <strong>${escape(this.context.pageContext.web.title)}</strong></div>
  </div>
  <div id="spListContainer" />
</section>`;

this._renderListAsync();

Enregistrez le fichier.

Notez que cela régénère le code dans la fenêtre gulp serve de la console. Vérifiez qu’il n’y a pas d’erreurs.
Si vous utilisez SharePoint Framework v1.12.1 ou version antérieure, par exemple si vous êtes sur SharePoint Server en local, basculez vers votre workbench local et ajoutez le composant WebPart HelloWorld.

Vous devriez normalement voir les données de liste renvoyées.
Vous pouvez maintenant arrêter l’exécution du serveur. Passez sur la console et arrêtez gulp serve. Sélectionnez CTRL+C pour arrêter la tâche gulp.

Étapes suivantes

Félicitations, vous avez connecté votre composant WebPart aux données des listes SharePoint.

Vous pouvez continuer à créer votre composant WebPart Hello World dans l’article suivant Déployer votre composant WebPart sur une page SharePoint. Vous allez découvrir comment déployer le composant WebPart HelloWorld et en afficher un aperçu dans une page SharePoint.