Connecter votre composant WebPart côté client à SharePoint (Hello World 2e partie)Connect your client-side web part to SharePoint (Hello World part 2)

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.Connect your web part to SharePoint to access functionality and data in SharePoint and provide a more integrated experience for end users. Cet article poursuit le développement du composant WebPart Hello World créé dans l’article précédent, Créer votre premier composant WebPart.This article continues building the Hello World web part built in the previous article Build your first web part.

Vous pouvez également suivre cette procédure en regardant la vidéo suivante sur la chaîne YouTube SharePoint PnP :You can also follow these steps by watching this video on the SharePoint PnP YouTube Channel:

Exécution de la commande gulp serveRun gulp serve

Assurez-vous que la commande gulp serve est en cours d’exécution.Ensure that you have the gulp serve command running. 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.If it is not already running, go to the helloworld-webpart project directory and run it by using the following commands.

cd helloworld-webpart
gulp serve

Accéder au contexte de la pageGet access to page context

Lorsque Workbench est hébergé localement, vous ne disposez pas du contexte de la page SharePoint.When the Workbench is hosted locally, you do not have the SharePoint page context. Vous pouvez toujours tester votre composant WebPart de différentes façons.You can still test your web part in many different ways. Par exemple, vous pouvez vous concentrer sur la création de l’expérience utilisateur du composant WebPart et utiliser des données fictives pour simuler l’interaction avec SharePoint lorsque vous n’avez pas le contexte SharePoint.For example, you can concentrate on building the web part's UX and use mock data to simulate SharePoint interaction when you don't have the SharePoint context.

En revanche, lorsque Workbench est hébergé dans SharePoint, vous avez accès au contexte de la page, qui fournit plusieurs propriétés clés, telles que :However, when the Workbench is hosted in SharePoint, you get access to the page context, which provides various key properties such as:

  • Le titre du site webWeb title
  • L’URL absolue du site webWeb absolute URL
  • L’URL relative au serveur du site webWeb server-relative URL
  • Le nom de connexion de l’utilisateurUser sign-in name

Pour obtenir l’accès au contexte de la pageTo get access to the page context

Pour accéder à des informations contextuelles dans votre composant WebPart, vous utiliserez l’objet suivant dans votre code :To access contextual information in your web part, you'll be using the following object in your code:

this.context.pageContext
  1. Passez sur Visual Studio Code (ou votre IDE préféré) et ouvrez src\webparts\helloWorld\HelloWorldWebPart.ts.Switch to Visual Studio code (or your preferred IDE) and open src\webparts\helloWorld\HelloWorldWebPart.ts.

  2. À l’intérieur de la méthode render, remplacez le bloc de code innerHTML par le code suivant :Inside the render method, replace the innerHTML code block with the following code:

    this.domElement.innerHTML = `
      <div class="${ styles.helloWorld }">
        <div class="${ styles.container }">
          <div class="${ styles.row }">
            <div class="${ styles.column }">
              <span class="${ styles.title }">Welcome to SharePoint!</span>
              <p class="${ styles.subTitle }">Customize SharePoint experiences using web parts.</p>
              <p class="${ styles.description }">${escape(this.properties.description)}</p>
              <p class="${ styles.description }">${escape(this.properties.test)}</p>
              <p class="${ styles.description }">Loading from ${escape(this.context.pageContext.web.title)}</p>
              <a href="https://aka.ms/spfx" class="${ styles.button }">
                <span class="${ styles.label }">Learn more</span>
              </a>
            </div>
          </div>
        </div>
      </div>`;
    
  3. Vous pouvez remarquer que ${ } est utilisé pour afficher la valeur de la variable dans le bloc de code HTML.Notice how ${ } is used to output the variable's value in the HTML block. Un élément HTML p supplémentaire est utilisé pour afficher this.context.pageContext.web.title.An extra HTML p is used to display this.context.pageContext.web.title. Comme ce composant WebPart est chargé à partir de l’environnement local, le titre est Workbench local.Because this web part loads from the local environment, the title is Local Workbench.

  4. Enregistrez le fichier.Save the file. La commande gulp serve exécutée dans votre console détecte cette opération d’enregistrement et :The gulp serve running in your console detects this save operation and:

    • Crée et inclut automatiquement le code mis à jour dans un fichier groupé.Builds and bundles the updated code automatically.
    • Actualise votre page Workbench locale (car le code du composant WebPart doit être chargé de nouveau).Refreshes your local Workbench page (as the web part code needs to be reloaded).

    Notes

    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.Keep the console window and Visual Studio Code side-by-side to see gulp automatically compile as you save changes in Visual Studio Code.

  5. Dans votre navigateur, accédez à l’onglet SharePoint Workbench local. Si vous avez déjà fermé l’onglet, l’URL est https://localhost:4321/temp/workbench.html.In your browser, switch to the local SharePoint Workbench tab. If you have already closed the tab, the URL is https://localhost:4321/temp/workbench.html.

    Vous devriez voir ce qui suit dans le composant WebPart :You should see the following in the web part:

    Contexte de la page SharePoint dans l’hôte local

  6. Accédez à l’instance SharePoint Workbench hébergée dans SharePoint.Navigate to the SharePoint Workbench hosted in SharePoint. L’URL complète est https://your-sharepoint-site-url/_layouts/workbench.aspx.The full URL is https://your-sharepoint-site-url/_layouts/workbench.aspx. Côté SharePoint Online, vous devez actualiser la page pour afficher les modifications.Notice that on the SharePoint Online side, you need to refresh the page to see the changes.

    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.You should now see your SharePoint site title in the web part now that page context is available to the web part.

    Contexte de la page SharePoint dans un site SharePoint

Définition d’un modèle de listeDefine list model

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.You need a list model to start working with SharePoint list data. To retrieve the lists, you need two models.

  1. Passez sur Visual Studio Code et accédez à src\webparts\helloWorld\HelloWorldWebPart.ts.Switch to Visual Studio Code and go to src\webparts\helloWorld\HelloWorldWebPart.ts.

  2. Définissez les modèles interface suivants juste au-dessus de la classe HelloWorldWebPart :Define the following interface models just above the HelloWorldWebPart class:

    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.The ISPList interface holds the SharePoint list information that we are connecting to.

Récupération des listes dans une banque de données fictiveRetrieve lists from mock store

Pour tester l’instance Workbench locale, il vous faut une banque de données fictive qui renvoie des données fictives.To test in the local Workbench, you need a mock store that returns mock data.

Pour créer une banque de données fictiveTo create a mock store

  1. Créez un fichier à l’intérieur du dossier src\webparts\helloWorld nommé MockHttpClient.ts.Create a new file inside the src\webparts\helloWorld folder named MockHttpClient.ts.

  2. Copiez le code suivant dans MockHttpClient.ts :Copy the following code into MockHttpClient.ts:

    import { ISPList } from './HelloWorldWebPart';
    
    export default class MockHttpClient  {
    
        private static _items: ISPList[] = [{ Title: 'Mock List', Id: '1' },
                                            { Title: 'Mock List 2', Id: '2' },
                                            { Title: 'Mock List 3', Id: '3' }];
    
        public static get(): Promise<ISPList[]> {
        return new Promise<ISPList[]>((resolve) => {
                resolve(MockHttpClient._items);
            });
        }
    }
    

    Éléments à noter concernant le code :Things to note about the code:

    • HelloWorldWebPart.ts contient plusieurs instructions export ; pour spécifier celle que vous devez importer, utilisez { }.Because there are multiple exports in HelloWorldWebPart.ts, the specific one to import is specified by using { }. Dans ce cas, seul le modèle de données ISPList est obligatoire.In this case, only the data model ISPList is required.
    • Vous n’avez pas besoin d’entrer l’extension de fichier lors de l’importation à partir du module par défaut, ici : HelloWorldWebPart.You do not need to type the file extension when importing from the default module, which in this case is HelloWorldWebPart.
    • Il exporte la classe MockHttpClient comme module par défaut afin qu’il puisse être importé dans d’autres fichiers.It exports the MockHttpClient class as a default module so that it can be imported in other files.
    • Il crée le tableau fictif ISPList initial et renvoie une valeur.It builds the initial ISPList mock array and returns.
  3. Enregistrez le fichier.Save the file.

Vous pouvez maintenant utiliser la classe MockHttpClient dans la classe HelloWorldWebPart. Vous devez tout d’abord importer le module MockHttpClient.You can now use the MockHttpClient class in the HelloWorldWebPart class. You first need to import the MockHttpClient module.

Import du module MockHttpClientTo import the MockHttpClient module

  1. Ouvrez le fichier HelloWorldWebPart.ts.Open the HelloWorldWebPart.ts file.

  2. Copiez et collez le code suivant juste sous import * as strings from 'HelloWorldWebPartStrings';.Copy and paste the following code just under import * as strings from 'HelloWorldWebPartStrings';.

    import MockHttpClient from './MockHttpClient';
    
  3. Ajoutez la méthode privée suivante, qui crée une récupération de listes fictive, à l’intérieur de la classe HelloWorldWebPart.Add the following private method that mocks the list retrieval inside the HelloWorldWebPart class.

    private _getMockListData(): Promise<ISPLists> {
      return MockHttpClient.get()
        .then((data: ISPList[]) => {
          var listData: ISPLists = { value: data };
          return listData;
        }) as Promise<ISPLists>;
    }
    
  4. Enregistrez le fichier.Save the file.

Récupération de listes à partir du site SharePointRetrieve lists from SharePoint site

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.Next you need to retrieve lists from the current site. You will use SharePoint REST APIs to retrieve the lists from the site, which are located at 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. Elle ajoute des en-têtes par défaut, gère le digest nécessaire pour les écritures et collecte la télémétrie qui permet au service de surveiller les performances d’une application.SharePoint Framework includes a helper class spHttpClient to execute REST API requests against SharePoint. It adds default headers, manages the digest needed for writes, and collects telemetry that helps the service to monitor the performance of an application.

Pour utiliser cette classe d’assistance, importez-les à partir du module @microsoft/sp-http.To use this helper class, import them from the @microsoft/sp-http module

  1. Faites défiler vers le haut du fichier HelloWorldWebPart.ts.Scroll to the top of the HelloWorldWebPart.ts file.

  2. Copiez et collez le code suivant juste sous import MockHttpClient from './MockHttpClient'; :Copy and paste the following code just under import MockHttpClient from './MockHttpClient';:

    import {
      SPHttpClient,
      SPHttpClientResponse
    } from '@microsoft/sp-http';
    
  3. Ajoutez la méthode privée suivante pour récupérer les listes à partir de SharePoint et les placer à l’intérieur de la classe HelloWorldWebPart.Add the following private method to retrieve lists from SharePoint inside the HelloWorldWebPart class.

    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();
        });
    }
    

    La méthode utilise la classe d’assistance spHttpClient et émet une requête get. Elle utilise le modèle ISPLists et applique également un filtre afin de ne pas récupérer les listes masquées.The method uses the spHttpClient helper class and issues a get request. It uses the ISPLists model and also applies a filter to not retrieve hidden lists.

  4. Enregistrez le fichier.Save the file.

  5. Revenez à la fenêtre de la console qui exécute gulp serve et vérifiez s’il existe des erreurs.Switch to the console window that is running gulp serve and check if there are any errors. S’il existe des erreurs, Gulp les signale dans la console et vous devez les corriger pour pouvoir continuer.If there are errors, gulp reports them in the console, and you need to fix them before proceeding.

Ajout de nouveaux stylesAdd new 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.The SharePoint Framework uses Sass as the CSS pre-processor, and specifically uses the SCSS syntax, which is fully compliant with normal CSS syntax. 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.Sass extends the CSS language and allows you to use features such as variables, nested rules, and inline imports to organize and create efficient style sheets for your web parts. SharePoint Framework contient déjà un compilateur SCSS qui convertit vos fichiers Sass en fichiers CSS normaux et fournit également une version typée à utiliser lors des phases de développement.The SharePoint Framework already comes with a SCSS compiler that converts your Sass files to normal CSS files, and also provides a typed version to use during development.

Pour ajouter de nouveaux stylesTo add new styles

  1. Ouvrir HelloWorldWebPart.module.scss.Open HelloWorldWebPart.module.scss. Il s’agit du fichier SCSS dans lequel vous définissez vos styles.This is the SCSS file where you define your styles.

    Par défaut, les styles s’appliquent uniquement à votre composant WebPart.By default, the styles are scoped to your web part. Vous pouvez constater que les styles sont définis sous .helloWorld.You can see that as the styles are defined under .helloWorld.

  2. Ajoutez les styles suivants après le style .button, mais toujours à l’intérieur de la section de style .helloWorld principale :Add the following styles after the .button style, but still inside the main .helloWorld style section:

    .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;
    }
    
  3. Enregistrez le fichier.Save the file.

    Gulp recompose le code de la console dès que vous enregistrez le fichier.Gulp rebuilds the code in the console as soon as you save the file. Cela génère les typages correspondants dans le fichier HelloWorldWebPart.module.scss.ts.This generates the corresponding typings in the HelloWorldWebPart.module.scss.ts file. Une fois ces styles compilés dans TypeScript, vous pouvez les importer et les référencer dans le code de votre composant WebPart.After compiled to TypeScript, you can then import and reference these styles in your web part code.

    Vous pouvez voir l’élément suivant dans la méthode render du composant WebPart :You can see that in the render method of the web part:

    <div class="${styles.row}">
    

Rendu des listes d’informationsRender lists information

Ouvrez la classe HelloWorldWebPart.Open the HelloWorldWebPart class.

SharePoint Workbench vous donne la possibilité de tester les composants WebPart dans votre environnement local et à partir d’un site SharePoint. SharePoint Framework vous apporte une aide supplémentaire en vous indiquant l’environnement à partir duquel votre composant WebPart est exécuté, à l’aide du module EnvironmentType.SharePoint Workbench gives you the flexibility to test web parts in your local environment and from a SharePoint site. SharePoint Framework aids this capability by helping you understand which environment your web part is running from by using the EnvironmentType module.

Utilisation du module EnvironmentTypeTo use the EnvironmentType module

  1. Importez les modules Environment et EnvironmentType à partir du fichier groupé @microsoft/sp-core-library.Import the Environment and the EnvironmentType modules from the @microsoft/sp-core-library bundle. Ajoutez-le à la section import située en haut, comme illustré dans le code suivant :Add it to the import section at the top as shown in the following code:

    import {
      Environment,
      EnvironmentType
    } from '@microsoft/sp-core-library';
    
  2. Ajoutez la méthode privée suivante à l’intérieur de la classe HelloWorldWebPart.Add the following private method inside the HelloWorldWebPart class:

    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>`;
      });
    
      const listContainer: Element = this.domElement.querySelector('#spListContainer');
      listContainer.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.This method references the new CSS styles added earlier by using the styles variable and is used to render list information which will be received from REST API.

  3. Enregistrez le fichier.Save the file.

  4. Ajoutez la méthode privée suivante à l’intérieur de la classe HelloWorldWebPart afin d’appeler les méthodes requises pour récupérer les données des listes.Add the following private method inside the HelloWorldWebPart class to call the respective methods to retrieve list data:

    private _renderListAsync(): void {
      // Local environment
      if (Environment.type === EnvironmentType.Local) {
        this._getMockListData().then((response) => {
          this._renderList(response.value);
        });
      }
      else if (Environment.type == EnvironmentType.SharePoint ||
                Environment.type == EnvironmentType.ClassicSharePoint) {
        this._getListData()
          .then((response) => {
            this._renderList(response.value);
          });
      }
    }
    

    Éléments à noter concernant EnvironmentType dans la méthode _renderListAsync :Things to note about EnvironmentType in the _renderListAsync method:

    • La propriété Environment.type vous permet de vérifier si vous êtes dans un environnement local ou SharePoint.The Environment.type property helps you check if you are in a local or SharePoint environment.
    • La méthode correcte est appelée en fonction de l’emplacement d’hébergement de Workbench.The correct method is called depending on where your Workbench is hosted.
  5. Enregistrez le fichier.Save the file.

Récupération des données de listeRetrieve list data

  1. Accédez à la méthode render et remplacez le code à l’intérieur de la méthode par le suivant :Navigate to the render method, and replace the code inside the method with the following code:

    this.domElement.innerHTML = `
      <div class="${ styles.helloWorld }">
        <div class="${ styles.container }">
          <div class="${ styles.row }">
            <div class="${ styles.column }">
              <span class="${ styles.title }">Welcome to SharePoint!</span>
              <p class="${ styles.subTitle }">Customize SharePoint experiences using web parts.</p>
              <p class="${ styles.description }">${escape(this.properties.description)}</p>
              <p class="${ styles.description }">${escape(this.properties.test)}</p>
              <p class="${ styles.description }">Loading from ${escape(this.context.pageContext.web.title)}</p>
              <a href="https://aka.ms/spfx" class="${ styles.button }">
                <span class="${ styles.label }">Learn more</span>
              </a>
            </div>
          </div>
          <div id="spListContainer" />
        </div>
      </div>`;
    
    this._renderListAsync();
    
  2. Enregistrez le fichier.Save the file.

    Comme vous pouvez le voir, cette opération 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.Notice in the gulp serve console window that it rebuilds the code. Make sure you don't see any errors.

  3. Accédez à votre instance Workbench locale et ajoutez le composant WebPart HelloWorld.Switch to your local Workbench and add the HelloWorld web part.

    Vous devriez normalement voir les données fictives renvoyées.You should see the mock data returned.

    Affichage des données de listes à partir de l’hôte local

  4. Passez sur l’instance Workbench hébergée dans SharePoint.Switch to the Workbench hosted in SharePoint. Actualisez la page et ajoutez le composant WebPart HelloWorld.Refresh the page and add the HelloWorld web part.

    Vous devriez voir les listes renvoyées par le site actuel.You should see lists returned from the current site.

    Affichage des données de listes à partir de SharePoint

  5. Vous pouvez maintenant arrêter l’exécution du serveur.Now you can stop the server from running. Passez sur la console et arrêtez gulp serve.Switch to the console and stop gulp serve. Sélectionnez ctrl+c pour mettre fin à la tâche gulp.Select ctrl+c to terminate the gulp task.

Étapes suivantesNext steps

Félicitations, vous avez connecté votre composant WebPart aux données des listes SharePoint.Congratulations on connecting your web part to SharePoint list data!

Vous pouvez continuer à développer votre composant WebPart HelloWorld dans la rubrique suivante, Déployer votre composant WebPart sur une page SharePoint.You can continue building out your Hello World web part in the next topic Deploy your web part to a SharePoint page. Vous allez découvrir comment déployer le composant WebPart HelloWorld et en afficher un aperçu dans une page SharePoint.You will learn how to deploy and preview the Hello World web part in a SharePoint page.

Notes

Si vous trouvez un problème dans la documentation ou dans SharePoint Framework, signalez-le aux ingénieurs SharePoint en utilisant la liste des problèmes dans le référentiel sp-dev-docs ou en ajoutant un commentaire à cet article.If you find an issue in the documentation or in the SharePoint Framework, please report that to SharePoint engineering by using the issue list at the sp-dev-docs repository or by adding a comment to this article. Nous vous remercions par avance pour vos commentaires.Thanks for your input in advance.