Niveaux des composants WebPart SharePoint

Lorsque vous concevez un composant WebPart SharePoint, vous devez parfois avoir un niveau d’interaction secondaire ; par exemple, un élément dans une liste ou une photo individuelle dans une galerie. Cet article explique comment utiliser les barres d’état secondaires, les commandes par défaut, l’échelle et les états d’interaction pour sélectionner un élément individuel.

Les configurations et barres d’outils de composants WebPart secondaires suivent les mêmes modèles que les composants WebPart primaires, comme par exemple une visionneuse d’image ou de fichier. Les éléments de second niveau peuvent avoir leurs barres d’outils et volets de propriétés respectifs, pour faciliter aux auteurs la configuration du composant WebPart avec des données et contenu significatifs. N’oubliez pas qu’il doit y avoir une séparation entre les options de configuration dans des composants WebPart à deux niveaux. Nous vous conseillons de garder la configuration de Source, Filtrage et Mise en page, ainsi que les autres options qui affectent le composant WebPart dans son ensemble, au premier niveau.

Voici quelques exemples de composants WebPart à utiliser comme référence :

  • Galerie d’images
  • Liens rapides

Sélection d’une image individuelle dans le composant WebPart Bibliothèque d’images avec volet de propriétés ouvert

Barres d’outils secondaires

Les barres d’outils secondaires sont utilisées sur les éléments individuels dans une disposition de composant WebPart qui a besoin de prendre en charge la configuration au niveau de l’élément dans le volet de propriétés - et des autres commandes comme Déplacer - pour réorganiser des éléments dans une disposition, ou pour supprimer/effacer un élément. Vous pouvez également ajouter des commandes personnalisées dans cette barre d’outils, qui s’intègrent aux besoins de votre composant WebPart.

Modifier l’état du composant WebPart Bibliothèque d’images avec volet de propriétés ouvert

États de sélection

Les barres d’outils de deuxième niveau dans un composant WebPart disposent de trois principales commandes : Modifier, Déplacer et Supprimer. Il est important de prendre en considération l’implémentation des états de sélection lors de la création d’un composant WebPart avec un niveau secondaire.

La barre d’outils de second niveau doit afficher uniquement lorsque l’auteur sélectionne un élément individuel (cliquer/appuyer). N’affiche pas toutes les barres d’outils de second niveau pour tous les éléments en une fois, car ceci peut submerger l’utilisateur. Par ailleurs, évitez l’affichage de la barre d’outils par pointage, car cela peut entraîner des problèmes d’utilisation avec les appareils tactiles.

Le cadre englobant et/ou le plan de chaque élément de second niveau doit différer de son état par défaut de la couleur principale par pointage et rester de la couleur primaire par sélection. Il est important que la zone et les icônes englobants conservent leurs états actifs afin que l’utilisateur comprenne quel élément est sélectionné lorsqu’ils ont recours au volet de propriétés ou lorsqu’ils réorganisent des éléments.

Voici un exemple d’un élément de second niveau individuel dans le composant WebPart Image Bibliothèque d'images :

Modifier le niveau de l’élément – ouvre le volet de propriétés avec des options de configuration spécifiques au niveau élément. Notez que le cadre englobant reste dans l’état actif/sélectionné.

Déplacer - la transparence de l’élément descend à 65 % et une ombre portée entoure l’élément.

Supprimer - Lorsque l’icône X Supprimer est sélectionnée, la barre d’outils disparaît et l’élément s’estompe, faisant place à la disposition spécifique.

États de sélection d’un élément deuxième niveau, exemple d’image individuelle dans le composant WebPart Bibliothèque d’images

Volets de propriétés

Les volets de propriétés fonctionnent de la même manière au niveau du deuxième élément d’un composant WebPart que lorsque vous sélectionnez le composant WebPart en entier. Le focus sur le premier niveau est déplacé vers la sélection du deuxième niveau et permet à l’auteur de configurer un élément individuel.

Dans l’exemple suivant, le premier niveau est la Source de l’Image et la Configuration de la Mise en page pour le composant WebPart Bibliothèque d'images. Lorsque l’utilisateur sélectionne une image individuelle, ils peuvent configurer le Titre, Légende et un Texte de remplacement dans le volet de propriétés de second niveau.

Comparaison de volets de propriétés entre 1er et 2ème niveaux

Voir aussi