--- title: "Comment installer List Filter Online et l'ajouter à une page" description: "Pas à pas : téléversez le package Vitextra List Filter Online dans le catalogue d'applications SharePoint, ajoutez le composant WebPart List Filter à une page moderne, effectuez la configuration minimale (site, liste ou bibliothèque, colonnes), publiez la page et mettez à jour le composant WebPart vers une nouvelle version." url: https://vitextra.com/fr/support/kb/10251 language: fr published: 2026-10-13 modified: 2026-10-13 products: - "List Filter Online" author: "Lidija Reising" tags: ["installer List Filter Online", "déployer un package SharePoint Framework", "sppkg catalogue d'applications", "ajouter un composant WebPart à une page SharePoint", "composant WebPart List Filter", "Configure Web Part", "Data Source Site List Columns", "mettre à jour un composant WebPart SPFx", "configuration Vitextra List Filter Online"] --- # Comment installer List Filter Online et l'ajouter à une page Pas à pas : téléversez le package Vitextra List Filter Online dans le catalogue d'applications SharePoint, ajoutez le composant WebPart List Filter à une page moderne, effectuez la configuration minimale (site, liste ou bibliothèque, colonnes), publiez la page et mettez à jour le composant WebPart vers une nouvelle version. ## Introduction [List Filter Online](https://vitextra.com/fr/products/list-filter-online) est livré sous la forme d'un seul package ::SharePoint Framework::. Son installation comporte deux étapes, généralement réalisées par deux personnes : un administrateur SharePoint téléverse le package dans le ::catalogue d'applications (App Catalog):: du tenant, puis un propriétaire de site ajoute le composant WebPart à une page et le relie à une liste ou à une bibliothèque. Cet article présente les deux étapes, du fichier ZIP téléchargé à la page publiée, et explique comment mettre à jour le composant WebPart lorsqu'une nouvelle version est publiée. ## Prérequis Avant de commencer, assurez-vous que : - le tenant dispose d'un catalogue d'applications. Si ce n'est pas le cas, un administrateur SharePoint le crée dans le SharePoint admin center sous **More features** > **Apps** ; - vous êtes administrateur SharePoint, ou membre du groupe des propriétaires du catalogue d'applications, pour téléverser le package ; - vous êtes propriétaire du site, ou disposez des autorisations de modification sur la page, pour ajouter et configurer le composant WebPart ; - vous disposez du package téléchargé. Il s'agit d'un fichier ZIP nommé `Vitextra.ListFilterOnline.Q.zip`, par exemple `Vitextra.ListFilterOnline.2026Q4.zip`, qui contient le fichier de solution `vitextra.list-filter.sppkg`. Extrayez le fichier `.sppkg` avant de le téléverser. 📝 **Remarque** List Filter Online lit les données via l'::API REST:: native de SharePoint et ne demande aucune autorisation d'API supplémentaire. Il n'y a rien à approuver sur la page **API access** du SharePoint admin center. ## Étape 1. Téléverser le package dans le catalogue d'applications 1. Ouvrez le site du catalogue d'applications du tenant et accédez à **Apps for SharePoint**. 2. Téléversez `vitextra.list-filter.sppkg` ou faites-le glisser dans la liste. 3. Dans la boîte de dialogue qui s'ouvre, sélectionnez **Enable this app and add it to all sites** (Activer cette application et l'ajouter à tous les sites) et confirmez avec **Enable app** (Activer l'application). Le package est conçu pour un déploiement à l'échelle du tenant : après cette étape, le composant WebPart est disponible sur tous les sites du tenant et n'a pas besoin d'être ajouté à un site via **Add an app**. La procédure générale, avec des captures d'écran du catalogue d'applications et de la boîte de dialogue de déploiement, est décrite dans [KB10035. Installation d'un produit cloud](https://vitextra.com/fr/support/kb/10035). ![Activation du package List Filter Online dans le catalogue d'applications](https://static.vitextra.com/articles/10251/enable-app-dialog-fr.png) *Activation du package List Filter Online dans le catalogue d'applications* 📝 **Remarque** Le même package enregistre également la commande **Open in List Filter** pour la barre de commandes des listes et des bibliothèques. La commande reste masquée dans toutes les listes tant qu'un administrateur ne l'a pas configurée dans les extensions à l'échelle du tenant et n'a pas défini la page qu'elle doit ouvrir. Si vous ne la configurez pas, rien ne change dans vos listes. La configuration est décrite dans [KB10254. Ouvrir les éléments sélectionnés dans List Filter Online depuis une liste SharePoint native](https://vitextra.com/fr/support/kb/10254). ## Étape 2. Ajouter le composant WebPart à une page 1. Ouvrez la page moderne qui doit afficher la liste et cliquez sur **Edit** (Modifier) dans le coin supérieur droit. Si vous avez besoin d'une nouvelle page, créez-la depuis **New** > **Page** sur le site. 2. Survolez l'emplacement d'une section où le composant WebPart doit être placé et cliquez sur le bouton **+** (plus). 3. Dans la boîte à outils, saisissez *List Filter* dans la zone de recherche, ou faites défiler jusqu'au groupe **Documents, lists, and libraries**, puis sélectionnez **List Filter**. Le composant WebPart est ajouté à la page et affiche immédiatement la liste de contrôle de configuration décrite à l'étape suivante. ![Le composant WebPart List Filter dans la boîte à outils de la page](https://static.vitextra.com/articles/10251/web-part-toolbox-fr.png) *Le composant WebPart List Filter dans la boîte à outils de la page* ## La liste de contrôle de configuration Tant que la source de données n'est pas complète, le composant WebPart affiche une liste de contrôle avec l'en-tête **Not Configured** et trois lignes, chacune marquée soit d'une coche, soit de **Not Configured** : 1. **Site** — le site qui contient la liste. Par défaut, le site actuel est déjà sélectionné ; cette ligne est donc généralement complète d'emblée. 2. **List or Library** — la liste ou la ::bibliothèque de documents:: à afficher. 3. **Columns** — les colonnes à afficher dans le tableau. Tant qu'au moins une colonne n'est pas sélectionnée, la ligne affiche le message *You must select at least one column to display for this view.* En mode édition, la liste de contrôle se termine par le bouton **Configure Web Part**, qui ouvre le volet des propriétés du composant WebPart. Le même volet s'ouvre avec l'icône en forme de crayon du composant WebPart. ![La liste de contrôle de configuration du composant WebPart](https://static.vitextra.com/articles/10251/configuration-checklist-fr.png) *La liste de contrôle de configuration du composant WebPart* ## Configuration minimale Les trois paramètres obligatoires se trouvent dans le groupe **Data Source**, le premier groupe du volet des propriétés. 1. **Scope.** Conservez **Current Site** pour afficher une liste du site auquel appartient la page. Sélectionnez **Other Site** pour afficher une liste d'un autre site du tenant : le sélecteur **Site URL** apparaît en dessous ; saisissez le nom ou l'URL du site et sélectionnez-le parmi les suggestions. Le site sélectionné est affiché avec son logo, son titre et son URL. 2. **List.** Sélectionnez la liste ou la bibliothèque dans la liste déroulante. Celle-ci répertorie les listes et les bibliothèques du site sélectionné. 3. **Columns.** Cliquez sur **Select Columns**. Dans le panneau **Columns**, cochez les colonnes à afficher dans la colonne **Display** du tableau, puis cliquez sur **Save**. Vous pouvez également modifier à ce stade le **Caption** et l'**Order** d'une colonne ; les autres options sont décrites dans [KB10258. Configurer les colonnes dans List Filter Online : libellés, formats et options d'affichage](https://vitextra.com/fr/support/kb/10258). Dès que le troisième paramètre est en place, la liste de contrôle disparaît et le composant WebPart affiche les premiers éléments de la liste. ![Le groupe Data Source du volet des propriétés](https://static.vitextra.com/articles/10251/data-source-group-fr.png) *Le groupe Data Source du volet des propriétés* ❗ **Important** Modifier le site ou la liste réinitialise les paramètres dépendants : les colonnes sélectionnées, les colonnes du volet de filtres et le filtre prédéfini sont effacés, car ils appartiennent à la liste précédente. Choisissez d'abord la source de données, puis configurez le reste. ## Publier et vérifier Cliquez sur **Republish** (ou **Publish** pour une nouvelle page). Ouvrez la page comme le ferait un utilisateur et vérifiez que : - le tableau affiche les colonnes et les éléments attendus ; - les utilisateurs ne voient que les éléments auxquels ils ont accès — le composant WebPart lit la liste au nom de l'utilisateur actuel, les autorisations de la liste s'appliquent donc sans modification ; - le volet de filtres et la barre d'outils de commandes sont affichés, si vous le souhaitez. Les deux sont activés par défaut et peuvent être désactivés dans les groupes **Filter pane** et **Command toolbar**. 💡 **Astuce** Le composant WebPart peut aussi constituer le seul contenu d'une page : créez la page à partir du modèle **Apps** (page d'application à composant unique) et sélectionnez **List Filter**. Une telle page est pratique comme onglet dans un canal Microsoft Teams. ## Mise à jour vers une nouvelle version Une nouvelle version de List Filter Online s'installe de la même manière que la première : téléversez le nouveau `vitextra.list-filter.sppkg` dans **Apps for SharePoint**, confirmez que vous souhaitez remplacer le fichier existant, puis sélectionnez à nouveau **Enable this app and add it to all sites**. Comme le package est déployé à l'échelle du tenant, chaque page contenant le composant WebPart récupère la nouvelle version lors du prochain chargement ; rien n'est à reconfigurer, et les paramètres des composants WebPart existants sont conservés. Lorsqu'une version plus récente que celle qui s'exécute sur une page est disponible, le composant WebPart affiche à l'éditeur de la page le message *There is a new version of this app. Get it now.* ## Résumé Installer List Filter Online consiste à téléverser un fichier `.sppkg` dans le catalogue d'applications avec un déploiement à l'échelle du tenant, puis à ajouter le composant WebPart **List Filter** à une page et à renseigner les trois paramètres obligatoires — **Site**, **List or Library** et **Columns**. Ensuite, le composant WebPart fonctionne pour chaque utilisateur de la page avec ses propres autorisations. 💡 **Astuce** Tous les paramètres du volet des propriétés — dossiers, limite d'éléments, tri, regroupement, totaux, filtre prédéfini et volet de filtres — sont décrits dans [KB10201. Configuration du composant WebPart List Filter Online](https://vitextra.com/fr/support/kb/10201). Pour les personnes qui utiliseront la page, consultez [KB10252. List Filter Online : guide rapide pour les utilisateurs finaux](https://vitextra.com/fr/support/kb/10252).