Connexion à SharePoint à l’aide du modèle objet JavaScript (JSOM)

Lors de la création de personnalisations SharePoint, vous avez peut-être utilisé le modèle objet JavaScript (JSOM) SharePoint pour communiquer avec SharePoint. Il ne s’agit plus du chemin recommandé (consultez Considérations plus loin dans cet article). Toutefois, il existe toujours des cas d’utilisation valides pour l’utilisation de l’API JSOM, comme la migration de code.

Pour utiliser le modèle JSOM SharePoint dans votre composant SharePoint Framework, vous devez l’inclure dans votre projet. Cela n’était pas nécessaire auparavant, car il était déjà disponible sur les pages SharePoint que vous pouvez utiliser. Dans SharePoint Framework, vous devez le charger explicitement dans votre composant.

Il existe deux manières de référencer le modèle JSOM dans SharePoint Framework, comme indiqué ci-dessous :

  • Méthode déclarative : via la configuration
  • Méthode impérative : via le code

Chacune de ces approches présente des avantages et des inconvénients. Il est important que vous les compreniez.

Créer un projet

  1. À partir de la console, créez un dossier pour votre projet comme suit :

    md react-sharepointlists
    
  2. Accédez au dossier du projet :

    cd react-sharepointlists
    
  3. Dans le dossier du projet, exécutez le générateur Yeoman pour SharePoint Framework afin de structurer un projet SharePoint Framework :

    yo @microsoft/sharepoint
    
  4. Lorsque vous y êtes invité, entrez les valeurs suivantes (sélectionnez l’option par défaut pour toutes les invites qui ne sont pas mentionnées ci-dessous) :

    • Quel est le nom de votre solution ?: react-sharepointlists
    • Quels packages de base voulez-vous cibler pour votre ou vos composants ? : SharePoint Online uniquement (dernière version)
    • Quel type de composant côté client voulez-vous créer ? : WebPart
    • Quel est le nom de votre composant WebPart ? : listes SharePoint
    • Quelle est la description de votre composant WebPart ? : affiche les noms des listes dans le site actuel
    • Quelle infrastructure voulez-vous utiliser ? : React
  5. Ouvrez le dossier de votre projet dans votre éditeur de code. Dans cet article, Visual Studio Code est utilisé dans les étapes et les captures d’écran, mais vous pouvez utiliser un autre éditeur si vous le souhaitez.

  6. Pour ouvrir le répertoire dans Visual Studio Code à partir du type de console, saisissez ce qui suit :

    code .
    

Référencer le modèle JSOM de manière déclarative

Inscrire l’API JSOM SharePoint en tant que scripts externes

Lorsque vous référencez le modèle JSOM de manière déclarative, la première étape consiste à enregistrer l’API JSOM SharePoint en tant que scripts externes dans votre projet SharePoint Framework.

  1. Dans l’éditeur de code, ouvrez le fichier ./config/config.json et réalisez l’ajout suivant à la section externals :

    {
      // ...
      "externals": {
        "sp-init": {
          "path": "https://contoso.sharepoint.com/_layouts/15/init.js",
          "globalName": "$_global_init"
        },
        "microsoft-ajax": {
          "path": "https://contoso.sharepoint.com/_layouts/15/MicrosoftAjax.js",
          "globalName": "Sys",
          "globalDependencies": [
            "sp-init"
          ]
        },
        "sp-runtime": {
          "path": "https://contoso.sharepoint.com/_layouts/15/SP.Runtime.js",
          "globalName": "SP",
          "globalDependencies": [
            "microsoft-ajax"
          ]
        },
        "sharepoint": {
          "path": "https://contoso.sharepoint.com/_layouts/15/SP.js",
          "globalName": "SP",
          "globalDependencies": [
            "sp-runtime"
          ]
        }
      }
      // ...
    }
    

    Chacune des entrées pointe vers différents fichiers de script qui, ensemble, vous permettent d’utiliser le modèle JSOM SharePoint dans votre composant SPFx. Tous ces scripts sont distribués en tant que scripts non-module. C’est pourquoi chaque entrée d’inscription nécessite une URL (spécifiée à l’aide de la propriété path) et le nom utilisé par le script (fourni dans la propriété globalName). Pour vous assurer que ces scripts sont chargés dans le bon ordre, les dépendances entre ces scripts sont spécifiées à l’aide de la propriété globalDependencies.

    Vous devrez peut-être ajouter d’autres scripts selon la fonctionnalité JSOM que vous utilisez (par exemple : sp.taxonomy.js).

Installer les typages TypeScript pour le modèle JSOM SharePoint

L’étape suivante consiste à installer et à configurer des déclarations de type TypeScript pour le modèle JSOM SharePoint. Vous bénéficiez ainsi des fonctionnalités de sécurité de type de TypeScript lorsque vous utilisez le modèle JSOM SharePoint.

  1. À partir de la console, exécutez la commande suivante dans le répertoire de votre projet :

    npm install @types/microsoft-ajax @types/sharepoint --save-dev
    

    Le modèle JSOM SharePoint n’étant pas distribué en tant que module, vous ne pouvez pas l’importer directement dans votre code. Au lieu de cela, vous devez inscrire sa déclaration de type global TypeScript globalement.

  2. Dans l’éditeur de code, ouvrez le fichier ./tsconfig.json, puis dans la propriété types, après l’entrée webpack-env, ajoutez des références à microsoft-ajax et à sharepoint :

    {
      "compilerOptions": {
        // ...
        "types": [
          "es6-promise",
          "es6-collections",
          "webpack-env",
          "microsoft-ajax",
          "sharepoint"
        ]
      }
    }
    

Référencer les scripts JSOM SharePoint dans un composant React

Pour charger les bibliothèques JSOM SharePoint dans votre composant SPFx, référencez-les dans le code du composant. Dans cet exemple, vous ajoutez les références dans un composant React, où le modèle JSOM SharePoint est utilisé pour communiquer avec SharePoint.

Dans l’éditeur de code, ouvrez le fichier ./src/webparts/sharePointLists/components/SharePointLists.tsx. Après la dernière instruction import, ajoutez le code suivant :

require('sp-init');
require('microsoft-ajax');
require('sp-runtime');
require('sharepoint');

Comme ces noms correspondent aux références externes que vous avez ajoutées précédemment. Le SharePoint Framework charge ces scripts à partir des URL spécifiées.

Pour illustrer l’utilisation du modèle JSOM SharePoint pour la communication avec SharePoint, récupérez et affichez les titres de toutes les listes SharePoint situées dans le site actuel.

Ajouter siteUrl aux propriétés du composant React

Pour se connecter à SharePoint, le composant React doit connaître l’URL du site actuel. L’URL est disponible dans le composant WebPart parent et peut être transmise au composant via ses propriétés.

  1. Dans l’éditeur de code, ouvrez le fichier ./src/webparts/sharePointLists/components/ISharePointListsProps.ts et ajoutez la propriété siteUrl dans l’interface ISharePointListsProps :

    export interface ISharePointListsProps {
      description: string;
      siteUrl: string;
    }
    
  2. Pour transmettre l’URL du site actuel au composant, ouvrez le fichier ./src/webparts/sharePointLists/SharePointListsWebPart.ts dans l’éditeur de code et modifiez la méthode render() comme suit :

    export default class SharePointListsWebPart extends BaseClientSideWebPart<ISharePointListsWebPartProps> {
      public render(): void {
        const element: React.ReactElement<ISharePointListsProps > = React.createElement(
          SharePointLists,
          {
            description: this.properties.description,
            siteUrl: this.context.pageContext.web.absoluteUrl
          }
        );
    
        ReactDom.render(element, this.domElement);
      }
    
      // ...
    }
    

Définir l’état du composant React

Le composant React charge les données à partir de SharePoint et les restitue à l’utilisateur. L’état actuel du composant React est modélisé à l’aide d’une interface d’état que nous ajoutons.

Dans l’éditeur de code, dans le dossier ./src/webparts/sharePointLists/components, créez un fichier nommé ISharePointListsState.ts et collez le contenu suivant :

export interface ISharePointListsState {
  listTitles: string[];
  loadingLists: boolean;
  error: string;
}

Ajouter un état au composant React

Une interface décrivant la forme de l’état du composant définie, l’étape suivante consiste à indiquer au composant React d’utiliser cette interface d’état.

  1. Dans l’éditeur de code, ouvrez le fichier ./src/webparts/sharePointLists/components/SharePointLists.tsx. Sous les instructions import existantes, ajoutez ce qui suit :

    import { ISharePointListsState } from './ISharePointListsState';
    
  2. Modifiez la signature de la classe SharePointLists comme suit :

    export default class SharePointLists extends React.Component<ISharePointListsProps, ISharePointListsState> {
      // ...
    }
    
  3. Dans la classe SharePointLists, ajoutez un constructeur avec la valeur d’état par défaut suivante :

    export default class SharePointLists extends React.Component<ISharePointListsProps, ISharePointListsState> {
      constructor(props?: ISharePointListsProps, context?: any) {
        super();
    
        this.state = {
          listTitles: [],
          loadingLists: false,
          error: null
        };
      }
    
      // ...
    }
    

Charger des informations sur les listes SharePoint à partir du site actuel à l’aide de JSOM

L’exemple de composant WebPart côté client utilisé dans l’article charge des informations sur les listes SharePoint dans le site actuel lorsque l’utilisateur sélectionne un bouton.

Composant WebPart côté client de SharePoint Framework affichant des titres de listes SharePoint dans le site actuel

  1. Dans l’éditeur de code, ouvrez le fichier ./src/webparts/sharePointLists/components/SharePointLists.tsx. Dans la classe SharePointLists, ajoutez une méthode nommée getListsTitles() :

    export default class SharePointLists extends React.Component<ISharePointListsProps, ISharePointListsState> {
      constructor(props?: ISharePointListsProps, context?: any) {
        super();
    
        this.state = {
          listTitles: [],
          loadingLists: false,
          error: null
        };
    
        this.getListsTitles = this.getListsTitles.bind(this);
      }
    
      // ...
      private getListsTitles(): void { }
    }
    
  2. Assurez-vous que l’étendue correcte de la méthode, liez-la au composant WebPart dans le constructeur. Dans la méthode getListsTitles(), utilisez le modèle objet JavaScript SharePoint pour charger le titre des listes SharePoint dans le site actuel :

    export default class SharePointLists extends React.Component<ISharePointListsProps, ISharePointListsState> {
      // ...
      private getListsTitles(): void {
        this.setState({
          loadingLists: true,
          listTitles: [],
          error: null
        });
    
        const context: SP.ClientContext = new SP.ClientContext(this.props.siteUrl);
        const lists: SP.ListCollection = context.get_web().get_lists();
        context.load(lists, 'Include(Title)');
        context.executeQueryAsync((sender: any, args: SP.ClientRequestSucceededEventArgs): void => {
          const listEnumerator: IEnumerator<SP.List> = lists.getEnumerator();
    
          const titles: string[] = [];
          while (listEnumerator.moveNext()) {
            const list: SP.List = listEnumerator.get_current();
            titles.push(list.get_title());
          }
    
          this.setState((prevState: ISharePointListsState, props: ISharePointListsProps): ISharePointListsState => {
            prevState.listTitles = titles;
            prevState.loadingLists = false;
            return prevState;
          });
        }, (sender: any, args: SP.ClientRequestFailedEventArgs): void => {
          this.setState({
            loadingLists: false,
            listTitles: [],
            error: args.get_message()
          });
        });
      }
    }
    

Commencez par réinitialiser l’état du composant pour indiquer à l’utilisateur que le composant charge des informations à partir de SharePoint. À l’aide de l’URL du site actuel transmise au composant via ses propriétés, vous instanciez un nouveau contexte SharePoint. À l’aide du modèle JSOM SharePoint, vous chargez des listes à partir du site actuel. Pour optimiser la performance de la requête, vous spécifiez que seule la propriété Title doit être chargée.

Ensuite, vous exécutez la requête en appelant la méthode executeQueryAsync() et en transmettant deux fonctions de rappel. Lorsque la requête est effectuée, vous réalisez une énumération via la collection des listes récupérées, stockez leurs titres dans un tableau et mettez à jour l’état du composant.

Affichage des titres des listes SharePoint dans le site actuel

Après le chargement des titres de listes SharePoint dans le site actuel, la dernière étape consiste à les afficher dans le composant.

  1. Dans l’éditeur de code, ouvrez le fichier ./src/webparts/sharePointLists/components/SharePointLists.tsx et mettez à jour la méthode render() :

    export default class SharePointLists extends React.Component<ISharePointListsProps, ISharePointListsState> {
      // ...
      public render(): React.ReactElement<ISharePointListsProps> {
        const titles: JSX.Element[] = this.state.listTitles.map((listTitle: string, index: number, listTitles: string[]): JSX.Element => {
          return <li key={index}>{listTitle}</li>;
        });
    
        return (
          <div className={styles.sharePointLists}>
            <div className={styles.container}>
              <div className={`ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}`}>
                <div className="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">
                  <span className="ms-font-xl ms-fontColor-white">Welcome to SharePoint!</span>
                  <p className="ms-font-l ms-fontColor-white">Customize SharePoint experiences using web parts.</p>
                  <p className="ms-font-l ms-fontColor-white">{escape(this.props.description)}</p>
                  <a className={styles.button} onClick={this.getListsTitles} role="button">
                    <span className={styles.label}>Get lists titles</span>
                  </a><br />
                  {this.state.loadingLists &&
                    <span>Loading lists...</span>}
                  {this.state.error &&
                    <span>An error has occurred while loading lists: {this.state.error}</span>}
                  {this.state.error === null && titles &&
                    <ul>
                      {titles}
                    </ul>}
                </div>
              </div>
            </div>
          </div>
        );
      }
      // ...
    }
    
  2. À ce stade, vous pouvez ajouter votre composant WebPart à la page et afficher le titre des listes SharePoint dans le site actuel. Exécutez la commande suivante à partir de la console pour vérifier que le projet fonctionne correctement :

    gulp serve --nobrowser
    
  3. Lorsque vous utilisez le modèle JSOM SharePoint pour communiquer avec SharePoint, vous devez tester le composant WebPart à l’aide de la version hébergée de SharePoint Workbench (c’est pourquoi le paramètre --nobrowser est spécifié afin d’empêcher le chargement automatique de Workbench local).

    Composant WebPart côté client de SharePoint Framework affichant des titres de listes SharePoint dans le site actuel

    Référencer les scripts JSOM SharePoint de manière déclarative comme des scripts externes est pratique et vous permet de conserver votre code propre. Cette méthode présente toutefois un inconvénient : il est nécessaire d’indiquer les URL absolues à l’emplacement à partir duquel les scripts JSOM SharePoint doivent être chargés. Si vous utilisez des clients SharePoint distincts pour le développement, le test et la production, des étapes supplémentaires sont nécessaires pour modifier ces URL pour les différents environnements. Dans ce cas, vous pouvez envisager de référencer le modèle JSOM de manière impérative à l’aide de SPComponentLoader pour charger les scripts dans le code du composant SPFx.

Référencer JSOM de manière impérative

Une autre méthode pour charger des bibliothèques JavaScript dans des projets SharePoint Framework consiste à utiliser SPComponentLoader, une classe d’utilitaire fournie avec SharePoint Framework conçue pour vous aider à charger des scripts et d’autres ressources dans les composants. L’un des avantages de l’utilisation de SPComponentLoader lors du chargement des scripts de manière déclarative est que cela vous permet d’utiliser les URL relatives à un serveur, ce qui est plus pratique lorsque vous utilisez des clients SharePoint différents pour les différentes étapes de votre processus de développement.

Pour cette partie du didacticiel, nous ajusterons le code que nous avons créé précédemment dans la section relative à la méthode déclarative.

Installer le module @microsoft/sp-loader

SPComponentLoader est déclaré dans un module séparé, @microsoft/sp-loader, qui doit être installé sur votre projet.

  1. À partir de la console, exécutez la commande suivante dans le répertoire de votre projet :

    npm install @microsoft/sp-loader --save
    

Nettoyage de référence déclarative

Si vous avez suivi les étapes décrites précédemment dans les sections relatives à la référence déclarative, vous devez supprimer ces références.

  1. Supprimez les références de scripts externes existantes. Dans l’éditeur de code, ouvrez le fichier ./config/config.json et, à partir de la propriété externals, supprimez toutes les entrées :

    {
      "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
      "version": "2.0",
      "bundles": {
        "share-point-lists-web-part": {
          "components": [
            {
              "entrypoint": "./lib/webparts/sharePointLists/SharePointListsWebPart.js",
              "manifest": "./src/webparts/sharePointLists/SharePointListsWebPart.manifest.json"
            }
          ]
        }
      },
      "externals": {},
      "localizedResources": {
        "SharePointListsWebPartStrings": "lib/webparts/sharePointLists/loc/{locale}.js"
      }
    }
    

    Une fois que les scripts JSOM SharePoint ne sont plus inscrits comme des scripts externes, vous ne pouvez pas les référencer directement dans votre code.

  2. Dans l’éditeur de code, ouvrez le fichier ./src/webparts/sharePointLists/components/SharePointLists.tsx et supprimez les instructions require() pointant vers les différents scripts JSOM SharePoint.

Attendre la fin du chargement des scripts JSOM SharePoint pour charger les données

La fonctionnalité principale du composant WebPart côté client que nous créons dans ce didacticiel dépend du modèle JSOM SharePoint. Selon un certain nombre de facteurs, le chargement de ces scripts peut prendre quelques instants. Lorsque vous créez des composants SPFx qui utilisent le modèle JSOM SharePoint, vous devez en tenir compte. Lorsqu’il est ajouté à la page, le composant WebPart doit communiquer à l’utilisateur qu’il charge ses prérequis et qu’il doit indiquer clairement quand il est prêt à être utilisé.

Pour ce faire, étendez l’état du composant React avec une propriété supplémentaire pour suivre l’état du chargement des scripts JSOM.

  1. Dans l’éditeur de code, ouvrez le fichier ./src/webparts/sharePointLists/components/ISharePointListsState.ts et collez le code suivant :

    export interface ISharePointListsState {
      listTitles: string[];
      loadingLists: boolean;
      error: string;
      loadingScripts: boolean;
    }
    
  2. Ajoutez la propriété récemment ajoutée aux définitions d’état dans le composant React. Dans l’éditeur de code, ouvrez le fichier ./src/webparts/sharePointLists/components/SharePointLists.tsx. Mettez à jour le constructeur avec le code suivant :

    export default class SharePointLists extends React.Component<ISharePointListsProps, ISharePointListsState> {
      constructor(props?: ISharePointListsProps, context?: any) {
        super();
    
        this.state = {
          listTitles: [],
          loadingLists: false,
          error: null,
          loadingScripts: true
        };
    
        this.getListsTitles = this.getListsTitles.bind(this);
      }
      // ...
    }
    
  3. Dans le même fichier, mettez à jour la méthode getListsTitles() avec le code suivant :

    export default class SharePointLists extends React.Component<ISharePointListsProps, ISharePointListsState> {
      // ...
      private getListsTitles(): void {
        this.setState({
          loadingLists: true,
          listTitles: [],
          error: null,
          loadingScripts: false
        });
    
        const context: SP.ClientContext = new SP.ClientContext(this.props.siteUrl);
        const lists: SP.ListCollection = context.get_web().get_lists();
        context.load(lists, 'Include(Title)');
        context.executeQueryAsync((sender: any, args: SP.ClientRequestSucceededEventArgs): void => {
          const listEnumerator: IEnumerator<SP.List> = lists.getEnumerator();
    
          const titles: string[] = [];
          while (listEnumerator.moveNext()) {
            const list: SP.List = listEnumerator.get_current();
            titles.push(list.get_title());
          }
    
          this.setState((prevState: ISharePointListsState, props: ISharePointListsProps): ISharePointListsState => {
            prevState.listTitles = titles;
            prevState.loadingLists = false;
            return prevState;
          });
        }, (sender: any, args: SP.ClientRequestFailedEventArgs): void => {
          this.setState({
            loadingLists: false,
            listTitles: [],
            error: args.get_message(),
            loadingScripts: false
          });
        });
      }
    }
    
  4. Pour indiquer à l’utilisateur l’état de chargement des scripts JSOM SharePoint, mettez à jour la méthode render() avec le code suivant :

    export default class SharePointLists extends React.Component<ISharePointListsProps, ISharePointListsState> {
      // ...
      public render(): React.ReactElement<ISharePointListsProps> {
        const titles: JSX.Element[] = this.state.listTitles.map((listTitle: string, index: number, listTitles: string[]): JSX.Element => {
          return <li key={index}>{listTitle}</li>;
        });
    
        return (
          <div className={styles.sharePointLists}>
            <div className={styles.container}>
              {this.state.loadingScripts &&
                <div className="ms-Grid" style={{ color: "#666", backgroundColor: "#f4f4f4", padding: "80px 0", alignItems: "center", boxAlign: "center" }}>
                  <div className="ms-Grid-row" style={{ color: "#333" }}>
                    <div className="ms-Grid-col ms-u-hiddenSm ms-u-md3"></div>
                    <div className="ms-Grid-col ms-u-sm12 ms-u-md6" style={{ height: "100%", whiteSpace: "nowrap", textAlign: "center" }}>
                      <i className="ms-fontSize-su ms-Icon ms-Icon--CustomList" style={{ display: "inline-block", verticalAlign: "middle", whiteSpace: "normal" }}></i><span className="ms-fontWeight-light ms-fontSize-xxl" style={{ paddingLeft: "20px", display: "inline-block", verticalAlign: "middle", whiteSpace: "normal" }}>SharePoint lists</span>
                    </div>
                    <div className="ms-Grid-col ms-u-hiddenSm ms-u-md3"></div>
                  </div>
                  <div className="ms-Grid-row" style={{ width: "65%", verticalAlign: "middle", margin: "0 auto", textAlign: "center" }}>
                    <span style={{ color: "#666", fontSize: "17px", display: "inline-block", margin: "24px 0", fontWeight: 100 }}>Loading SharePoint JSOM scripts...</span>
                  </div>
                  <div className="ms-Grid-row"></div>
                </div>}
              {this.state.loadingScripts === false &&
                <div className={`ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}`}>
                  <div className="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">
                    <span className="ms-font-xl ms-fontColor-white">Welcome to SharePoint!</span>
                    <p className="ms-font-l ms-fontColor-white">Customize SharePoint experiences using web parts.</p>
                    <p className="ms-font-l ms-fontColor-white">{escape(this.props.description)}</p>
                    <a className={styles.button} onClick={this.getListsTitles} role="button">
                      <span className={styles.label}>Get lists titles</span>
                    </a><br />
                    {this.state.loadingLists &&
                      <span>Loading lists...</span>}
                    {this.state.error &&
                      <span>An error has occurred while loading lists: {this.state.error}</span>}
                    {this.state.error === null && titles &&
                      <ul>
                        {titles}
                      </ul>}
                  </div>
                </div>
              }
            </div>
          </div>
        );
      }
      // ...
    }
    
  5. Lorsque l’état du composant React indique que les scripts JSOM SharePoint sont en cours de chargement, il affiche un espace réservé. Une fois les scripts chargés, le composant WebPart affiche le contenu attendu avec le bouton permettant aux utilisateurs de charger les informations sur les listes SharePoint dans le site actuel.

Charger les scripts JSOM SharePoint avec SPComponentLoader

Les composants SPFx doivent charger les scripts JSOM SharePoint une seule fois. Dans cet exemple, étant donné que le composant WebPart se compose d’un seul composant React, le meilleur emplacement pour charger les scripts JSOM SharePoint est à l’intérieur de la méthode componentDidMount() du composant React, qui est exécuté une seule fois après que le composant a été instancié.

  1. Dans l’éditeur de code, ouvrez le fichier ./src/webparts/sharePointLists/components/SharePointLists.tsx. Dans la section supérieure du fichier, ajoutez une instruction import faisant référence à SPComponentLoader. Dans la classe SharePointLists, ajoutez la méthode componentDidMount() :

    import { SPComponentLoader } from '@microsoft/sp-loader';
    
    export default class SharePointLists extends React.Component<ISharePointListsProps, ISharePointListsState> {
      // ...
      public componentDidMount(): void {
        SPComponentLoader.loadScript('/_layouts/15/init.js', {
          globalExportsName: '$_global_init'
        })
        .then((): Promise<{}> => {
          return SPComponentLoader.loadScript('/_layouts/15/MicrosoftAjax.js', {
            globalExportsName: 'Sys'
          });
        })
        .then((): Promise<{}> => {
          return SPComponentLoader.loadScript('/_layouts/15/SP.Runtime.js', {
            globalExportsName: 'SP'
          });
        })
        .then((): Promise<{}> => {
          return SPComponentLoader.loadScript('/_layouts/15/SP.js', {
            globalExportsName: 'SP'
          });
        })
        .then((): void => {
          this.setState((prevState: ISharePointListsState, props: ISharePointListsProps): ISharePointListsState => {
            prevState.loadingScripts = false;
            return prevState;
          });
        });
      }
      // ...
    }
    
  2. À l’aide d’une série de promesses chaînées, vous chargez les différents scripts qui permettent d’utiliser le modèle JSOM SharePoint dans votre composant SharePoint Framework. L’utilisation de SPComponentLoader vous permet de recourir à des URL relatives à un serveur qui chargent les scripts à partir du client SharePoint actuel. Une fois que tous les scripts ont été chargés, vous mettez à jour l’état du composant React, confirmant que tous les composants requis ont été chargés et que le composant WebPart est prêt à être utilisé.

  3. Vérifiez que le composant WebPart fonctionne comme prévu en exécutant la commande suivante à partir de la console :

    gulp serve --nobrowser
    

    Comme indiqué précédemment, le composant WebPart doit afficher le titre des listes SharePoint dans le site actuel.

    Composant WebPart côté client de SharePoint Framework affichant des titres de listes SharePoint dans le site actuel

Bien que l’utilisation de SPComponentLoader nécessite un effort supplémentaire, cela vous permet d’utiliser des URL relatives à un serveur, ce qui est utile dans les scénarios où vous utilisez des clients différents pour le développement, le test et la production.

Considérations

Auparavant, lors de la création de personnalisations côté client sur SharePoint, vous avez peut-être utilisé le modèle JSOM SharePoint pour communiquer avec SharePoint. Toutefois, l’approche recommandée consiste à utiliser l’API REST SharePoint, directement ou via la bibliothèque principale JavaScript PnP.

L’introduction du modèle objet JavaScript (JSOM) SharePoint est la première étape vers la prise en charge des solutions côté client dans SharePoint. Toutefois, il n’est plus maintenu de manière active et ne permet peut-être pas d’accéder à toutes les fonctionnalités disponibles via l’API REST. De plus, que vous utilisiez directement l’API REST SharePoint ou la bibliothèque principale JavaScript PnP, vous pouvez utiliser des promesses qui simplifient considérablement l’écriture du code asynchrone (un problème courant lorsque vous utilisez le modèle JSOM).

Même s’il existe toujours un nombre limité de cas où le modèle JSOM SharePoint fournit l’accès aux données et aux méthodes pas encore couvertes par l’API REST SharePoint, l’API REST doit être privilégiée dès que possible.

Si vous avez des personnalisations existantes utilisant le modèle objet JavaScript SharePoint et que vous envisagez de les migrer vers SharePoint Framework, cet article doit vous fournir les informations nécessaires sur l’utilisation du modèle objet JavaScript SharePoint dans les solutions SharePoint Framework. À long terme, vous devez envisager de modifier votre moyen de communication avec SharePoint et d’utiliser directement l’API REST SharePoint ou la bibliothèque principale JavaScript PnP.