Exercice : récupérer et afficher les données de la liste avec l’API REST de SharePoint
- 15 minutes
Dans cet exercice, vous allez créer un composant WebPart SharePoint Framework (SPFx) qui vous permettra d’obtenir et d’afficher les données d’une liste SharePoint à l’aide de l’API REST SharePoint.
Créer une liste SharePoint à des fins de test
Avant de pouvoir afficher les données d’une liste SharePoint à l’aide de l’API REST SharePoint, vous devez créer une liste et y entrer des données.
Ouvrez un navigateur et accédez à une collection de sites de SharePoint Online. Sélectionnez Contenu du site dans le volet de navigation de gauche, puis sélectionnez Nouvelle > liste dans la barre d’outils.
Sélectionnez le modèle Liste vierge.
Définissez le nom de la liste sur Pays et sélectionnez Créer.
Ajoutez des éléments à la liste en entrant les noms des différentes régions, comme illustré dans l’image suivante.
Configuration requise
Importante
Dans la plupart des cas, installer la dernière version des outils suivants est la meilleure option. Les versions répertoriées ici ont été utilisées lors de la publication et du dernier test de ce module.
- Node.js v22.*
- Gulp-cli v3.*
- Yeoman v5.*
- Générateur Yeoman pour SharePoint v1.21.1
- Visual Studio Code
Créer le composant WebPart permettant d’afficher des données à l’aide de l’API REST SharePoint
Ouvrez une invite de commandes et accédez au dossier dans lequel vous voulez créer le projet.
Exécutez le générateur Yeoman SharePoint à l’aide de la commande suivante :
yo @microsoft/sharepoint
Utilisez ce qui suit pour compléter l’invite affichée (si d’autres options sont présentées, acceptez la réponse par défaut) :
- Quel est le nom de votre solution ? : SpFxHttpClientDemo
- Quel type de composant côté client voulez-vous créer ? : WebPart
- Quel est le nom de votre composant WebPart ? : SPFxHttpClientDemo
- Quel modèle souhaitez-vous utiliser ? React
Après avoir approvisionné les dossiers requis pour le projet, le générateur installe tous les packages de dépendances en exécutant npm install automatiquement. Lorsque npm a terminé le téléchargement de toutes les dépendances, ouvrez le projet dans Visual Studio Code.
Créer une interface pour les éléments de liste SharePoint
Recherchez le dossier ./src dans le projet. Créez un sous-dossier models dans le dossier src.
Créez un fichier ICountryListItem.ts dans le dossier models et ajoutez-y le code suivant :
export interface ICountryListItem {
Id: string;
Title: string;
}
Créer un type pour un gestionnaire d’événements ClickButton
Créez un fichier ButtonClickedCallback.ts dans le dossier models et ajoutez-y le code suivant :
export type ButtonClickedCallback = () => void;
Créer un tonneau pour les types implémentés dans le dossier models
Créez un fichier index.ts dans le dossier models et ajoutez-y le code suivant :
export * from './ButtonClickedCallback';
export * from './ICountryListItem';
Mettre à jour l’interface publique pour le composant React
Ouvrez le fichier ./src/webparts/spFxHttpClientDemo/components/ISpFxHttpClientDemoWebPartProps.ts. Cette interface permet d’accéder aux propriétés publiques du composant React. Mettez-le à jour pour accepter une liste d’éléments.
Ajoutez le code suivant en haut du fichier :
import {
ButtonClickedCallback,
ICountryListItem
} from '../../../models';
Mettez à jour l’interface afin de remplacer la propriété description existante par une collection d’éléments à transmettre et d’ajouter un événement lorsqu’un bouton est sélectionné :
export interface ISpFxHttpClientDemoWebPartProps {
spListItems: ICountryListItem[];
onGetListItems?: ButtonClickedCallback;
isDarkTheme: boolean;
environmentMessage: string;
hasTeamsContext: boolean;
userDisplayName: string;
}
Implémenter l’interface utilisateur pour le composant WebPart
Recherchez et ouvrez le fichier ./src/webparts/spFxHttpClientDemo/components/SpFxHttpClientDemo.module.scss.
Ajoutez ce qui suit au bas du fichier :
.buttons {
padding-top: 20px;
> button {
margin-right: 10px;
}
}
Recherchez et ouvrez le fichier ./src/webparts/spFxHttpClientDemo/components/SpFxHttpClientDemo.tsx.
Recherchez la méthode render() et remplacez-la par le code suivant. Cette opération crée une liste affichant les données contenues dans la propriété spListItems. Remarquez également qu'il y a un bouton auquel est associé un gestionnaire de onClick.
public render(): React.ReactElement<ISpFxHttpClientDemoWebPartProps> {
const {
spListItems,
isDarkTheme,
environmentMessage,
hasTeamsContext,
userDisplayName
} = this.props;
return (
<section className={`${styles.spFxHttpClientDemo} ${hasTeamsContext ? styles.teams : ''}`}>
<div className={styles.welcome}>
<img alt="" src={isDarkTheme ? require('../assets/welcome-dark.png') : require('../assets/welcome-light.png')} className={styles.welcomeImage} />
<h2>Well done, {escape(userDisplayName)}!</h2>
<div>{environmentMessage}</div>
</div>
<div className={styles.buttons}>
<button type="button" onClick={this.onGetListItemsClicked}>Get Countries</button>
</div>
<div>
<ul>
{spListItems && spListItems.map((list) =>
<li key={list.Id}>
<strong>Id:</strong> {list.Id}, <strong>Title:</strong> {list.Title}
</li>
)
}
</ul>
</div>
</section>
);
}
Ajoutez le gestionnaire d’événements suivant à la classe SpFxHttpClientDemo pour gérer l’événement de clic sur le bouton. Ce code empêchera l’action par défaut de l’élément <a> de quitter la page (ou de l’actualiser) et appellera le rappel défini sur la propriété publique, informant le consommateur du composant qu’un événement s’est produit.
private onGetListItemsClicked = (event: React.MouseEvent<HTMLButtonElement>): void => {
event.preventDefault();
if (this.props.onGetListItems) this.props.onGetListItems();
}
Extraire des données à partir de l’API REST SharePoint
Recherchez et ouvrez le fichier ./src/webparts/spFxHttpClientDemo/SpFxHttpClientDemoWebPart.ts.
Après les instructions existantes import en haut du fichier, ajoutez les instructions suivantes import :
import { SPHttpClient } from '@microsoft/sp-http';
import { ICountryListItem } from '../../models';
Recherchez la classe SpFxHttpClientDemoWebPart et ajoutez-y le membre privé suivant :
private _countries: ICountryListItem[] = [];
Recherchez la méthode render(). Notez que cette méthode crée une instance du composant SpFxHttpClientDemo, puis définit ses propriétés publiques. Le code par défaut définit la propriété description, mais celle-ci a été supprimée de l’interface ISpFxHttpClientDemoWebPartProps lors des étapes précédentes. Supprimez la description propriété et ajoutez les propriétés suivantes pour définir la liste des régions sur le membre privé ajouté précédemment et l’attacher au gestionnaire d’événements :
spListItems: this._countries,
onGetListItems: this._onGetListItems,
Ajoutez la méthode suivante en tant que gestionnaire d’événements à la classe SpFxHttpClientDemoWebPart. Cette méthode appelle une autre méthode (que vous ajouterez à l’étape suivante) qui renvoie une collection d’éléments de liste. Une fois ces éléments renvoyés via une promesse JavaScript, la méthode met à jour le membre _countries interne et affiche de nouveau le composant WebPart. Cela lie la collection de régions retournée par la _getListItems() méthode à la propriété publique sur le composant React qui affiche les éléments.
private _onGetListItems = async (): Promise<void> => {
const response: ICountryListItem[] = await this._getListItems();
this._countries = response;
this.render();
}
Ajoutez la méthode suivante à la classe SpFxHttpClientDemoWebPart. La méthode extrait les éléments de la liste Pays à l’aide de l’API REST SharePoint. Elle utilise l’objet spHttpClient pour interroger l’API REST SharePoint. Lorsqu’elle reçoit la réponse, elle appelle response.json(), qui la traite en tant qu’objet JSON, puis renvoie la propriété value dans la réponse destinée à l’appelant. La propriété value est une collection d’éléments de liste qui correspondent à l’interface créée précédemment.
private async _getListItems(): Promise<ICountryListItem[]> {
const response = await this.context.spHttpClient.get(
this.context.pageContext.web.absoluteUrl + `/_api/web/lists/getbytitle('Countries')/items?$select=Id,Title`,
SPHttpClient.configurations.v1);
if (!response.ok) {
const responseText = await response.text();
throw new Error(responseText);
}
const responseJson = await response.json();
return responseJson.value as ICountryListItem[];
}
Tester le composant WebPart
Exécutez la commande suivante pour vous assurer que le certificat de développeur est installé :
gulp trust-dev-cert
Exécutez la commande suivante pour démarrer le serveur web local :
gulp serve --nobrowser
Gulp serve de SharePoint Framework avec le commutateur nobrowser crée le projet et démarre un serveur web local.
Attendez la fin de l’exécution de la sous-tâche de rechargement. À ce stade, le composant WebPart est prêt pour le test.
Ouvrez un navigateur et accédez au site SharePoint Online où vous avez créé la liste Pays. Ajoutez /_layouts/workbench.aspx à la fin de l’URL du site pour ouvrir le workbench hébergé par SharePoint.
Sélectionnez le bouton d’icône du composant WebPart pour ouvrir la liste des composants WebPart disponibles, puis sélectionnez le composant WebPart SPFxHttpClientDemo dans la section Local :
Le composant WebPart apparaîtra sur la page avec un seul bouton et sans aucune donnée dans la liste.
Sélectionnez le bouton Obtenir les pays et notez que la liste affiche les données de l’API REST SharePoint.
Arrêtez le serveur web local en appuyant sur CTRL+C dans la fenêtre de la console ou du terminal.
Résumé
Dans cet exercice, vous avez créé un composant WebPart SharePoint Framework (SPFx) qui vous a permis d’extraire et d’afficher les données d’une liste SharePoint à l’aide de l’API REST SharePoint.
Testez vos connaissances
Commentaires
Cette page a-t-elle été utile ?
No
Vous avez besoin d’aide pour cette rubrique ?
Vous souhaitez essayer d’utiliser Ask Learn pour clarifier ou vous guider dans cette rubrique ?