Présentation de conceptions SharePoint WebPart : créer un volet de propriétés de liste des tâches

Cet article décrit comment créer un composant WebPart de liste des tâches. Cet exemple utilise le type de volet de propriété unique, il est dynamique et basé sur la grille de dynamisme Office UI Fabric.

Création d’un composant WebPart de liste des tâches

  1. Ajoutez une description pour aider l’utilisateur à mieux comprendre le composant WebPart et ses propriétés.

    Dans cet exemple, la description est « Sélectionner une source pour vos tâches et personnaliser l’affichage de la liste des tâches ».

    Ajout d’une description


  2. Ajouter un composant déroulant Fabric connecté à une liste.

    Ajout d’une liste déroulante Fabric


  3. Ajouter un composant de case à cocher Fabric pour afficher les tâches terminées.

    Ajout d’une case à cocher Fabric


  4. Ajoutez deux cases à cocher pour contrôler les options d’affichage.

    Ajout de deux cases à cocher Fabric


  5. Ajouter un curseur Fabric pour indiquer le nombre maximal d’éléments à afficher.

    Ajout d’un curseur Fabric


  6. Ensuite, l’auteur de la page sélectionne une liste ou ajoute manuellement des tâches pour préremplir le composant WebPart de liste des tâches.

    Sélection d’une liste dans le volet


    Sélection d’une liste dans le volet développé


    Ajout manuel de tâches dans la liste


  7. Le composant WebPart affiche un indicateur d’éléments en cours de chargement sur la page.

    Indicateur d’éléments


  8. Les éléments de liste sont en cours de chargement.

    Chargement des éléments de liste


    Quand les nouvelles tâches ont fini de charger, elles se fondent dans l’affichage à l’aide des composants d’animation d’Office UI Fabric.

    Nouvelles tâches chargées


  9. Le volet de propriétés contrôle l’interface utilisateur. Les tâches avec des tableaux croisés dynamiques activés sont affichées via les cases à cocher Afficher dans le volet de propriétés.

    Volet de propriétés contrôlant des éléments de composant WebPart


Affichages réactifs

L’exemple suivant montre l’affichage en colonne 2/3 du composant WebPart.

Vue de la colonne deux tiers


L’exemple suivant montre l’affichage en colonne 1/3 du composant WebPart.

Vue de la colonne un tiers


L’exemple suivant montre l’affichage mobile (lecture seule) du composant WebPart.

Affichage mobile du composant WebPart de liste des tâches


Voir aussi