Migrer jQuery et la solution DataTables créée à l’aide du composant WebPart Éditeur de script vers SharePoint Framework

L’un des plug-ins jQuery fréquemment utilisés est DataTables. Avec DataTables, vous pouvez facilement créer des aperçus de données puissants provenant de SharePoint et d’API externes.

Liste des demandes IT créées à l’aide du composant WebPart Éditeur de Script

Pour illustrer le processus de migration d’une personnalisation SharePoint à l’aide de DataTables vers SharePoint Framework, utilisez la solution suivante qui affiche une vue d’ensemble des demandes de support informatique récupérées à partir d’une liste SharePoint.

Vue d’ensemble des demandes de support informatique affichée sur une page SharePoint

La solution est créée à l’aide du composant WebPart Éditeur de script SharePoint standard. Voici le code utilisé par la personnalisation.

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
<script src="https://momentjs.com/downloads/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
<table id="requests" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>ID</th>
      <th>Business unit</th>
      <th>Category</th>
      <th>Status</th>
      <th>Due date</th>
      <th>Assigned to</th>
    </tr>
  </thead>
</table>
<script>
  // UMD
  (function(factory) {
    "use strict";

    if (typeof define === 'function' && define.amd) {
      // AMD
      define(['jquery'], function ($) {
        return factory( $, window, document );
      });
    }
    else if (typeof exports === 'object') {
      // CommonJS
      module.exports = function (root, $) {
        if (!root) {
          root = window;
        }

        if (!$) {
          $ = typeof window !== 'undefined'
            ? require('jquery')
            : require('jquery')( root );
        }

        return factory($, root, root.document);
      };
    } else {
      // Browser
      factory(jQuery, window, document);
    }
  }
  (function($, window, document) {
    $.fn.dataTable.render.moment = function (from, to, locale) {
      // Argument shifting
      if (arguments.length === 1) {
        locale = 'en';
        to = from;
        from = 'YYYY-MM-DD';
      } else if (arguments.length === 2) {
        locale = 'en';
      }

      return function (d, type, row) {
        var m = window.moment(d, from, locale, true);

        // Order and type get a number value from Moment, everything else
          // sees the rendered value
          return m.format(type === 'sort' || type === 'type' ? 'x' : to);
        };
      };
    }));
</script>
<script>
$(document).ready(function() {
  $('#requests').DataTable({
    'ajax': {
      'url': "../_api/web/lists/getbytitle('IT Requests')/items?$select=ID,BusinessUnit,Category,Status,DueDate,AssignedTo/Title&$expand=AssignedTo/Title",
      'headers': { 'Accept': 'application/json;odata=nometadata' },
      'dataSrc': function(data) {
        return data.value.map(function(item) {
          return [
            item.ID,
            item.BusinessUnit,
            item.Category,
            item.Status,
            new Date(item.DueDate),
            item.AssignedTo.Title
          ];
        });
      }
    },
    columnDefs: [{
      targets: 4,
      render: $.fn.dataTable.render.moment('YYYY/MM/DD')
    }]
  });
});
</script>

Tout d’abord, la personnalisation charge les bibliothèques qu’elle utilise : jQuery, DataTables et Moment.js.

Ensuite, elle spécifie la structure de la table utilisée pour présenter les donnée.

Après avoir créé la table, elle inclut Moment.js dans un plug-in DataTables afin que les dates affichées dans la table puissent être mises en forme.

Enfin, la personnalisation utilise DataTables pour charger et présenter la liste des demandes de support informatique. Les données sont chargées à l’aide d’AJAX à partir d’une liste SharePoint.

Grâce à DataTables, les utilisateurs finals disposent d’une solution puissante dans laquelle ils peuvent facilement filtrer, trier et parcourir les résultats sans aucun effort de développement supplémentaire.

Liste des demandes de support informatique affichée à l’aide de DataTables filtrées par demandes affectées à Lidia et triées par ordre décroissant ainsi que par date d’échéance

Migrer la solution d’aperçu de demandes informatiques du Composant WebPart Éditeur de Script vers SharePoint Framework

La transformation de cette personnalisation en SharePoint Framework offre un certain nombre d’avantages, tels que la configuration plus conviviale et la gestion centralisée de la solution. Vous trouverez ci-dessous une description détaillée de la façon dont vous migreriez la solution vers SharePoint Framework. Tout d’abord, vous allez migrer la solution vers SharePoint Framework avec le moins de modifications possible du code d’origine. Plus tard, vous allez transformer le code de la solution en TypeScript pour tirer parti de ses fonctionnalités de sécurité de type au moment du développement.

Création d’un projet SharePoint Framework

  1. Commencez par créer un dossier pour votre projet :

    md datatables-itrequests
    
  2. Accédez au dossier du projet :

    cd datatables-itrequests
    
  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 ? : DataTables-itrequests
    • Quel type de composant côté client voulez-vous créer ? : composant WebPart
    • Quel est le nom de votre composant WebPart ? : demandes informatiques
    • Quelle est la description de votre composant WebPart ? : affiche une vue d’ensemble des demandes de support informatique
    • Quelle infrastructure voulez-vous utiliser ? : Aucune infrastructure JavaScript
  5. Ouvrez votre dossier de projet dans votre éditeur de code. Dans ce didacticiel, vous allez utiliser Visual Studio Code.

Charger les bibliothèques JavaScript

Comme pour la solution d’origine créée à l’aide du composant WebPart Éditeur de script, vous devez d’abord charger les bibliothèques JavaScript requises par la solution. Dans SharePoint Framework, cela nécessite généralement deux étapes : spécifier l’URL à partir de laquelle la bibliothèque doit être chargée et faire référence à la bibliothèque dans le code.

  1. Spécifiez les URL à partir desquelles les bibliothèques doivent être chargées. Dans l’éditeur de code, ouvrez le fichier ./config/config.json et modifiez la section externals comme suit :

    {
      // ..
      "externals": {
        "jquery": {
          "path": "https://code.jquery.com/jquery-1.12.4.min.js",
          "globalName": "jQuery"
        },
        "datatables.net": {
          "path": "https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js",
          "globalName": "jQuery",
          "globalDependencies": [
            "jquery"
          ]
        },
        "moment": "https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"
      },
      // ..
    }
    

    Cela a deux objectifs :

    1. Lorsque la chaîne de l'outil de la build SharePoint Framework crée l’offre pour le composant WebPart, elle ignore les instructions import ou require pour ces trois packages et n’inclut pas sa source dans le bundle. En l’absence de ceux-ci, WebPack (l’outil utilisé pour créer le bundle) importerait ces bibliothèques JavaScript dans le groupe de composants SPFx obtenu.
    2. La version de la chaîne de l'outil de la build de SharePoint Framework ajoute les trois packages comme dépendances dans le manifeste du composant. Cela indique au chargeur de module de SharePoint Framework de s’assurer que ces bibliothèques ont été chargées sur la page avant de charger l’offre du composant.

    Notes

    Pour plus d’informations sur le référencement de bibliothèques externes dans les projets SharePoint Framework, consultez Ajouter une bibliothèque externe à votre composant WebPart côté client SharePoint.

  2. Ouvrez le fichier ./src/webparts/itRequests/ItRequestsWebPart.ts et, après la dernière instruction import, ajoutez :

    import 'jquery';
    import 'datatables.net';
    import 'moment';
    

Définir la table de données

Comme dans la solution d’origine, l’étape suivante consiste à définir la structure de la table utilisée pour afficher les données.

Dans l’éditeur de code, ouvrez le fichier ./src/webparts/itRequests/ItRequestsWebPart.ts et modifiez la méthode render() comme suit :

export default class ItRequestsWebPart extends BaseClientSideWebPart<IItRequestsWebPartProps> {
  public render(): void {
    this.domElement.innerHTML = `
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
      <table id="requests" class="display ${styles.itRequests}" cellspacing="0" width="100%">
        <thead>
          <tr>
            <th>ID</th>
            <th>Business unit</th>
            <th>Category</th>
            <th>Status</th>
            <th>Due date</th>
            <th>Assigned to</th>
          </tr>
        </thead>
      </table>`;
  }
  // ...
}

Inscrire le plug-in Moment.js pour DataTables

L’étape suivante consiste à définir le plug-in Moment.js pour DataTables afin que les dates de la table puissent être mises en forme.

  1. Dans le dossier ./src/webparts/itRequests, créez un fichier nommé moment-plugin.js et collez le code ci-dessous :

    // UMD
    (
      function (factory) {
        "use strict";
    
        if (typeof define === 'function' && define.amd) {
          // AMD
          define(['jquery'], function ($) {
            return factory($, window, document);
          });
        } else if (typeof exports === 'object') {
          // CommonJS
          module.exports = function (root, $) {
            if (!root) {
              root = window;
            }
    
            if (!$) {
              $ = typeof window !== 'undefined'
                ? require('jquery')
                : require('jquery')(root);
            }
    
            return factory($, root, root.document);
          };
        } else {
          // Browser
          factory(jQuery, window, document);
        }
      }
    
      (function ($, window, document) {
        $.fn.dataTable.render.moment = function (from, to, locale) {
          // Argument shifting
          if (arguments.length === 1) {
            locale = 'en';
            to = from;
            from = 'YYYY-MM-DD';
          } else if (arguments.length === 2) {
            locale = 'en';
          }
    
          return function (d, type, row) {
            var moment = require('moment');
            var m = moment(d, from, locale, true);
    
            // Order and type get a number value from Moment, everything else
            // sees the rendered value
            return m.format(type === 'sort' || type === 'type' ? 'x' : to);
          };
        };
      })
    );
    
  2. Pour que le composant WebPart charge le plug-in, il doit faire référence au fichier moment-plugin.js nouvellement créé. Dans l’éditeur de code, ouvrez le fichier ./src/webparts/itRequests/ItRequestsWebPart.ts et, après la dernière instruction import, ajoutez :

    import './moment-plugin';
    

Lancer DataTables et charger les données

La dernière étape consiste à inclure le code qui lance la table de données et charge les données à partir de SharePoint.

  1. Dans le dossier ./src/webparts/itRequests, créez un fichier nommé script.js et collez le code ci-dessous :

    $(document).ready(function () {
      $('#requests').DataTable({
        'ajax': {
          'url': "../../_api/web/lists/getbytitle('IT Requests')/items?$select=ID,BusinessUnit,Category,Status,DueDate,AssignedTo/Title&$expand=AssignedTo/Title",
          'headers': { 'Accept': 'application/json;odata=nometadata' },
          'dataSrc': function (data) {
            return data.value.map(function (item) {
              return [
                item.ID,
                item.BusinessUnit,
                item.Category,
                item.Status,
                new Date(item.DueDate),
                item.AssignedTo.Title
              ];
            });
          }
        },
        columnDefs: [{
          targets: 4,
          render: $.fn.dataTable.render.moment('YYYY/MM/DD')
        }]
      });
    });
    

Notes

Veillez à utiliser le nom interne (ou nom statique) des colonnes dans les paramètres $select et $expend.

  1. Pour faire référence à ce fichier dans le composant WebPart, dans l’éditeur de code, ouvrez le fichier ./src/webparts/itRequests/ItRequestsWebPart.ts et ajoutez require('./script'); à la fin de la méthode render(). La méthode render() doit se présenter comme suit :

    export default class ItRequestsWebPart extends BaseClientSideWebPart<IItRequestsWebPartProps> {
      public render(): void {
        this.domElement.innerHTML = `
          <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
          <table id="requests" class="display ${styles.itRequests}" cellspacing="0" width="100%">
            <thead>
              <tr>
                <th>ID</th>
                <th>Business unit</th>
                <th>Category</th>
                <th>Status</th>
                <th>Due date</th>
                <th>Assigned to</th>
              </tr>
            </thead>
          </table>`;
    
        require('./script');
      }
      // ...
    }
    
  2. Vérifiez que le composant WebPart fonctionne comme prévu dans la ligne de commande en exécutant ce qui suit :

    gulp serve --nobrowser
    

Étant donné que le composant WebPart charge ses données à partir de SharePoint, vous devez tester le composant WebPart à l’aide de SharePoint Framework Workbench hébergé. Accédez à https://{nom-client-nom}. SharePoint. com/_layouts/Workbench.aspx et ajoutez le composant WebPart à la zone de dessin. Vous devez maintenant voir les demandes informatiques affichées à l’aide du plug-in jQuery DataTables.

Demandes informatiques affichées dans un composant WebPart SharePoint Framework côté client

Ajouter la prise en charge de la configuration du composant WebPart via les propriétés du composant WebPart

Dans les étapes précédentes, vous avez migré les solutions de demandes informatiques du composant WebPart Éditeur de script vers SharePoint Framework. Bien que la solution fonctionne déjà comme prévu, elle n’utilise aucun des avantages de SharePoint Framework. Le nom de la liste à partir de laquelle les demandes informatiques sont chargées est inclus dans le code et le code lui-même est du JavaScript simple, qui est plus difficile à refactoriser que TypeScript.

Les étapes suivantes montrent comment étendre la solution existante pour permettre aux utilisateurs de spécifier le nom de la liste à partir de laquelle charger les données. Vous allez ensuite transformer le code en TypeScript pour utiliser ses fonctionnalités de sécurité des types.

Définir la propriété du composant WebPart pour stocker le nom de la liste

  1. Définissez une propriété de composant WebPart pour stocker le nom de la liste à partir de laquelle les demandes informatiques doivent être chargées. Dans l’éditeur de code, ouvrez le fichier ./src/webparts/itRequests/ItRequestsWebPart.manifest.json, puis renommez la propriété par défaut description à listName et effacez sa valeur.

    Propriété listName dans le manifeste de composant WebPart mise en surbrillance dans le code Visual Studio

  2. Mettez à jour l’interface des propriétés du composant WebPart pour refléter les changements dans le manifeste. Dans l’éditeur de code, ouvrez le fichier ./src/webparts/itRequests/IItRequestsWebPartProps.ts et modifiez son contenu comme suit :

    export interface IItRequestsWebPartProps {
      listName: string;
    }
    
  3. Mettez à jour les étiquettes d’affichage de la propriété listName. Ouvrez le fichier ./src/webparts/itRequests/loc/mystrings.d.ts et modifiez son contenu comme suit :

    declare interface IItRequestsStrings {
      PropertyPaneDescription: string;
      BasicGroupName: string;
      ListNameFieldLabel: string;
    }
    
    declare module 'itRequestsStrings' {
      const strings: IItRequestsStrings;
      export = strings;
    }
    
  4. Ouvrez le fichier ./src/webparts/itRequests/loc/en-us.js et modifiez son contenu comme suit :

    define([], function() {
      return {
        "PropertyPaneDescription": "IT Requests settings",
        "BasicGroupName": "Data",
        "ListNameFieldLabel": "List name"
      }
    });
    
  5. Mettez à jour le composant WebPart pour utiliser la propriété nouvellement définie. Dans l’éditeur de code, ouvrez le fichier ./src/webparts/itRequests/ItRequestsWebPart.ts et modifiez la méthode getPropertyPaneConfiguration() comme suit :

    export default class ItRequestsWebPart extends BaseClientSideWebPart<IItRequestsWebPartProps> {
    // ...
      protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
        return {
          pages: [{
            header: {
              description: strings.PropertyPaneDescription
            },
            groups: [{
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('listName', {
                  label: strings.ListNameFieldLabel
                })
              ]
            }]
          }]
        };
      }
    
      protected get disableReactivePropertyChanges(): boolean {
        return true;
      }
    }
    

Pour éviter que le composant WebPart soit rechargé lorsque les utilisateurs tapent le nom de la liste, vous avez également configuré le composant WebPart pour qu’il utilise le volet de propriétés non réactif en ajoutant la méthode disableReactivePropertyChanges() et en définissant sa valeur renvoyée sur true.

Utiliser le nom configuré de la liste à partir de laquelle charger les données

Initialement, le nom de la liste à partir de laquelle les données doivent être chargées était incorporé dans la requête REST. Maintenant que les utilisateurs peuvent configurer ce nom, la valeur configurée doit être injectée dans la requête REST avant de charger les données. Le moyen le plus simple de procéder consiste à déplacer le contenu du fichier script.js vers le fichier du composant WebPart principal.

  1. Dans l’éditeur de code, ouvrez le fichier ./src/webparts/itRequests/ItRequestsWebPart.ts et modifiez la méthode render() comme suit :

    var $: any = (window as any).$;
    
    export default class ItRequestsWebPart extends BaseClientSideWebPart<IItRequestsWebPartProps> {
      public render(): void {
        this.domElement.innerHTML = `
          <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
          <table class="display ${styles.itRequests}" cellspacing="0" width="100%">
            <thead>
              <tr>
                <th>ID</th>
                <th>Business unit</th>
                <th>Category</th>
                <th>Status</th>
                <th>Due date</th>
                <th>Assigned to</th>
              </tr>
            </thead>
          </table>`;
    
        $(document).ready(() => {
          $('table', this.domElement).DataTable({
            'ajax': {
              'url': `../../_api/web/lists/getbytitle('${escape(this.properties.listName)}')/items?$select=ID,BusinessUnit,Category,Status,DueDate,AssignedTo/Title&$expand=AssignedTo/Title`,
              'headers': { 'Accept': 'application/json;odata=nometadata' },
              'dataSrc': function (data) {
                return data.value.map(function (item) {
                  return [
                    item.ID,
                    item.BusinessUnit,
                    item.Category,
                    item.Status,
                    new Date(item.DueDate),
                    item.AssignedTo.Title
                  ];
                });
              }
            },
            columnDefs: [{
              targets: 4,
              render: $.fn.dataTable.render.moment('YYYY/MM/DD')
            }]
          });
        });
      }
    
      // ...
    }
    
  2. Au lieu de référencer le code à partir du fichier script.js, tout son contenu fait partie de la méthode render du composant WebPart. Dans la requête REST, vous pouvez désormais remplacer le nom fixe de la liste par la valeur de la propriété listName qui contient le nom de la liste tel que configuré par l’utilisateur. Avant d’utiliser la valeur, elle est placée dans une séquence d’échappement à l’aide de la fonction escape Lodash pour désactiver l’injection de scripts.

    À ce stade, le bloc de code est toujours écrit à l’aide d’un code JavaScript simple. Pour éviter les problèmes de génération avec la variable jQuery $, vous deviez la définir comme type any avant la définition de la classe. Plus tard, lors de la transformation du code en TypeScript, vous la remplacerez par une définition de type appropriée.

    Comme vous venez de déplacer le contenu du fichier script.js dans le fichier du composant WebPart principal, script.js n’est plus nécessaire et vous pouvez le supprimer du projet.

  3. Pour vérifier que le composant WebPart fonctionne comme prévu, exécutez la ligne de commande suivante :

    gulp serve --nobrowser
    
  4. Accédez au Workbench hébergé et ajoutez le composant WebPart au canevas. Ouvrez le volet de propriétés du composant WebPart, spécifiez le nom de la liste des demandes informatiques et cliquez sur le bouton Appliquer pour confirmer les modifications.

    Vous devez maintenant voir les demandes informatiques affichées dans le composant WebPart.

    Demandes informatiques chargées à partir de la liste configurée et affichées dans un composant WebPart SharePoint Framework côté client

Transformer le code JavaScript simple en TypeScript

L’utilisation de TypeScript à la place du code JavaScript simple présente de nombreux avantages. Non seulement parce que TypeScript est plus facile à gérer et à refactoriser, mais aussi car il vous permet de détecter des erreurs plus rapidement. Les étapes suivantes décrivent comment transformer le code JavaScript d’origine en TypeScript.

Ajouter des définitions de type pour les bibliothèques utilisées

Pour fonctionner correctement, TypeScript requiert des définitions de type pour les différentes bibliothèques utilisées dans le projet. Les définitions de type sont souvent distribuées sous forme de packages npm dans l’espace de noms @types.

  1. Installez les définitions de type pour jQuery et DataTables en exécutant ce qui suit dans la ligne de commande :

    npm install @types/jquery@1.10.34 @types/datatables.net@1.10.15 --save-dev --save-exact
    

    Conseil

    Dans cet exemple, nous spécifions la version exacte du package NPM que nous voulons installer. Cela permet de s’assurer que NPM installe un package de déclaration de type qui correspond à la version jQuery et à la bibliothèque de tableaux de données que nous utilisons dans le cadre de notre projet.

    L’argument --save-dev indique à NPM d’enregistrer les références à ces deux packages dans la collection devDependencies dans le fichier package.json. Les déclarations de type « TypeScript » ne sont nécessaires qu’au développement, c’est pourquoi nous ne les voulons pas dans la collection dependencies .

    L’argument --save-exact indique à NPM d’ajouter des références à la version spécifique dans le fichier package.json et de ne pas ajouter la notation pour activer les mises à niveau automatiques vers une version plus récente.

    Les définitions de types pour Moment.js sont distribuées avec le package Moment.js. Même si vous chargez Moment.js à partir d’une URL, pour pouvoir utiliser ses typages, vous devez installer le package Moment.js dans le projet.

  2. Installez le package Moment.js en exécutant ce qui suit dans la ligne de commande :

    npm install moment@2.27.0 --save-exact
    

Mettre à jour les références de package

Pour utiliser des types provenant des définitions de type installées, vous devez modifier la façon dont vous référencez les bibliothèques.

  1. Dans l’éditeur de code, ouvrez le fichier ./src/webparts/itRequests/ItRequestsWebPart.ts et modifiez l’instruction import 'jquery'; comme suit :

    import * as $ from 'jquery';
    
  2. Étant donné que vous avez défini $ comme jQuery, vous pouvez maintenant supprimer la définition locale du $ que vous avez ajoutée précédemment :

    var $: any = (window as any).$;
    

Mettre à jour les fichiers de composants WebPart principaux en TypeScript

Maintenant que vous avez des définitions de type pour toutes les bibliothèques installées dans le projet, vous pouvez commencer à transformer le code JavaScript simple en TypeScript.

  1. Définissez une interface pour les informations de demande informatique que vous récupérez dans la liste SharePoint. Dans l’éditeur de code, ouvrez le fichier ./src/webparts/itRequests/ItRequestsWebPart.ts et juste au-dessus de la classe de composant WebPart, ajoutez l’extrait de code suivant :

    interface IRequestItem {
      ID: number;
      BusinessUnit: string;
      Category: string;
      Status: string;
      DueDate: string;
      AssignedTo: { Title: string; };
    }
    
  2. Ensuite, dans la classe de composant WebPart, modifiez la méthode render() comme suit :

    export default class ItRequestsWebPart extends BaseClientSideWebPart<IItRequestsWebPartProps> {
      public render(): void {
        this.domElement.innerHTML = `
          <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
          <table class="display ${styles.itRequests}" cellspacing="0" width="100%">
            <thead>
              <tr>
                <th>ID</th>
                <th>Business unit</th>
                <th>Category</th>
                <th>Status</th>
                <th>Due date</th>
                <th>Assigned to</th>
              </tr>
            </thead>
          </table>`;
    
          $('table', this.domElement).DataTable({
            'ajax': {
              'url': `../../_api/web/lists/getbytitle('${escape(this.properties.listName)}')/items?$select=ID,BusinessUnit,Category,Status,DueDate,AssignedTo/Title&$expand=AssignedTo/Title`,
              'headers': { 'Accept': 'application/json;odata=nometadata' },
              'dataSrc': (data: { value: IRequestItem[] }): any[][] => {
                return data.value.map((item: IRequestItem): any[] => {
                  return [
                    item.ID,
                    item.BusinessUnit,
                    item.Category,
                    item.Status,
                    new Date(item.DueDate),
                    item.AssignedTo.Title
                  ];
                });
              }
            },
            columnDefs: [{
              targets: 4,
              render: ($.fn.dataTable.render as any).moment('YYYY/MM/DD')
            }]
          });
      }
    
      // ...
    }
    
  3. Regardez comment la demande AJAX, pour récupérer les données de la liste SharePoint, est désormais tapée et vous permet de vérifier que vous faites référence aux propriétés correctes lorsque vous les faites passer à DataTables dans un tableau. La structure de données utilisée par DataTables pour représenter une ligne dans la table est un tableau de types mixtes. Par souci de simplicité, elle a été définie comme any[]. L’utilisation du type any dans ce contexte n’est pas mauvaise en soi, car les données renvoyées à l’intérieur de la propriété dataSrc sont utilisées en interne par DataTables.

    Lorsque vous avez mis à jour la méthode render(), vous avez également ajouté deux autres modifications. Tout d’abord, vous avez supprimé l’attribut id de la table. Cela vous permet de placer plusieurs instances du même composant WebPart sur la page. Vous avez également supprimé la référence à la fonction $(document).ready() qui n’est pas nécessaire, car le DOM de l’élément où la table de données est affichée est défini avant le code d’initiation de DataTables

Mettre à jour le plug-in DataTables Moment.js en TypeScript

La dernière partie de la solution qui doit être transformée en TypeScript est le plug-in DataTables Moment.js.

  1. Renommez le fichier ./src/webparts/itRequests/moment-plugin.js en ./src/webparts/itRequests/moment-plugin.ts afin qu’il soit traité par le compilateur TypeScript.

  2. Ouvrez le fichier moment-plugin.ts dans l’éditeur de code et remplacez son contenu par :

    import * as $ from 'jquery';
    import * as moment from 'moment';
    
    /* tslint:disable:no-function-expression */
    ($.fn.dataTable.render as any).moment = function (from: string, to: string, locale: string): (d: any, type: string, row: any) => string {
    /* tslint:enable */
      // Argument shifting
      if (arguments.length === 1) {
        locale = 'en';
        to = from;
        from = 'YYYY-MM-DD';
      } else if (arguments.length === 2) {
        locale = 'en';
      }
    
      return (d: any, type: string, row: any): string => {
        let m: moment.Moment = moment(d, from, locale, true);
    
        // Order and type get a number value from Moment, everything else
        // sees the rendered value
        return m.format(type === 'sort' || type === 'type' ? 'x' : to);
      };
    };
    
  3. Vous commencez par charger les références à jQuery et Moment.js pour indiquer à TypeScript à quoi font référence les variables correspondantes. Ensuite, vous définissez la fonction du plug-in. Généralement, dans TypeScript, vous utilisez la notation fléchée pour les fonctions (=>). Dans ce cas toutefois, étant donné que vous avez besoin de l’accès à la propriété arguments, vous devez utiliser la définition de fonction standard. Pour empêcher que tslint envoie un avertissement signalant que vous n’avez pas utilisé la notation fléchée, vous pouvez désactiver explicitement la règle no-function-expression autour de la définition de fonction.

  4. Pour vérifier que tout fonctionne comme prévu, exécutez ce qui suit dans la ligne de commande :

    gulp serve --nobrowser
    
  5. Accédez au Workbench hébergé et ajoutez le composant WebPart au canevas. Bien que rien n’ait changé visuellement, la nouvelle base de code utilise TypeScript et ses définitions de type pour vous aider à gérer la solution.