Considérations relatives à la création de composants WebPart côté client SharePoint

Avant de créer des composants WebPart, voici quelques notions à savoir sur Office UI Fabric. Tous les styles de Fabric Core, notamment les icônes, la typographie, l’utilisation des couleurs, les animations et la grille dynamique, sont chargés par défaut et mis à la disposition de votre composant WebPart.

N'importez pas une copie de Fabric pour votre composant Web car cela pourrait entrer en conflit avec la copie globale. Ces classes fournissent une base pour le style de votre composant Web, dont vous pouvez toujours vous écarter si vous avez besoin de visuels différents pour correspondre à la marque de votre entreprise.

Composants d’Office UI Fabric React

En plus d'Office UI Fabric, vous pouvez utiliser les composants Office UI Fabric React pour construire vos composants Web. Fabric React est une collection de composants réactifs et orientée mobile conçue pour vous permettre de créer rapidement et simplement des expériences web en utilisant le langage de conception Office.

L’exemple de liste de tâches suivant utilise des composants de l’infrastructure dans le volet des propriétés afin de permettre à l’auteur de la page de configurer un composant WebPart.

Exemple de composant WebPart Todo qui utilise la structure

Vous trouverez une liste complète des styles, des typographies, des couleurs, des icônes et des animations Office UI Fabric sur la page des styles Office UI Fabric.

Comportement réactif

Les pages de la nouvelle interface de création SharePoint utilisent la grille dynamique d’Office UI Fabric pour vous aider à créer des pages impeccables.

Largeur maximale

Nous vous recommandons d’appliquer à tous les composants WebPart une largeur maximale de 100 % pour qu’ils s’affichent et fonctionnent correctement sur n’importe quelle page. La largeur de page et de colonne est définie par le modèle de page, mais peut être modifiée par l’auteur. Si vous définissez un nombre de pixels maximal dans le composant WebPart, les fonctionnalités et la mise en page peuvent produire des résultats inattendus si la page est affichée avec différentes largeurs.

Dynamisme du composant WebPart - Largeur maximale

Largeur minimale

Tous les composants WebPart doivent pouvoir s’ajuster dynamiquement quand la largeur de page ou de colonne est réduite à une largeur minimale de 320 px.

Dynamisme du composant WebPart - Largeur minimale


Mode Édition du composant WebPart

La nouvelle interface de création de pages SharePoint comporte deux modes :

  • Le mode Publié, qui permet à votre équipe ou à vos visiteurs d’afficher le contenu et d’interagir avec les composants WebPart.
  • Le mode Édition, qui permet aux auteurs de pages d’ajouter et de configurer des composants WebPart pour ajouter du contenu à une page.

Les sections suivantes concernent le mode Édition.

Indicateur d’ajout et boîte à outils

L’indicateur d’ajout est une ligne horizontale avec une icône plus qui est visible lorsqu’un composant WebPart est sélectionné et pointé pour indiquer où les auteurs de page peuvent ajouter de nouveaux composants WebPart à leur page. La boîte à outils s’ouvre lorsqu’un utilisateur sélectionne l’icône plus. La boîte à outils contient tous les composants WebPart qui peuvent être ajoutés à une page.

Boîte à outils et indicateur d’ajout de composants WebPart

Barre d'outils

L’infrastructure de chaque composant WebPart comporte une barre d’outils verticale et un cadre englobant qui sont fournis par la page. La barre d’outils offre une option de modification et de suppression pour chaque composant WebPart.

Barre d’outils verticale de composant Web

Modifications contextuelles

Une expérience WYSI URLG doit être conçue pour les composants WebPart afin de renseigner des informations ou d’ajouter du contenu affiché à l’utilisateur lors de la publication. L’entrée de ce contenu doit être effectuée sur la page afin que l’utilisateur comprenne comment la visionneuse voit le contenu. Par exemple, les titres et les descriptions doivent être renseignés là où le texte s’affiche, ou de nouvelles tâches doivent être ajoutées et modifiées dans le contexte de la page.

Modification contextuelle des composants WebPart

Modifications au niveau de l’élément

L’interface utilisateur peut changer au sein du composant WebPart, par exemple, en convertissant du texte en champ de texte pour indiquer des liens ou en affichant l’interface utilisateur pour réorganiser les éléments ou pour vérifier des tâches dans un composant WebPart.

Modification de composants WebPart au niveau de l’élément

Volets de propriété

Les volets de propriété sont appelés via l’icône d’action de modification de la barre d’outils. Les volets doivent contenir principalement les paramètres de configuration qui activent/désactivent les fonctionnalités qui apparaissent sur la page ou qui effectuent un appel à un service pour afficher du contenu.

Modèle de volet de propriétés de composant WebPart

Il existe trois types de volets de propriété, qui vous permettent de concevoir et de développer des composants WebPart adaptés aux besoins de votre entreprise ou de vos clients.

Volet unique

Un seul volet est utilisé pour les composants WebPart simples pour lesquels seul un petit nombre de propriétés doivent être configurées.

Modèle de volet de propriétés unique pour les composants WebPart

Volet accordéon

Un volet accordéon peut contenir un ou plusieurs groupes de propriétés avec de nombreuses options, dans le cas où l’affichage de tous les groupes entraînerait l’affichage d’une longue liste d’options qui obligerait l’utilisateur à faire défiler le panneau. Imaginons par exemple que vous ayez trois groupes nommés Propriétés, Apparence et Disposition, ayant chacune dix composants.

Accordéon - Un groupe ouvert

Volet de propriétés accordéon de composant WebPart avec un groupe ouvert

Accordéon - Deux groupes ouverts et barre de défilement

Volet de propriétés accordéon de composant WebPart avec deux groupes ouverts et la barre de défilement

Volet de propriétés organisé en étapes/pages

Un volet à étapes sert à regrouper les propriétés en plusieurs étapes ou pages quand le composant WebPart doit être configuré dans un ordre linéaire ou quand les choix effectués à la première étape modifient les options qui s’affichent à la deuxième.

Étape 1 sur 3

Volet de propriétés à étapes - 1 sur 3

Étape 2 sur 3

Volet de propriétés à étapes - 2 sur 3

Étape 3 sur 3

Volet de propriétés à étapes - 3 sur 3

Composants WebPart réactifs et non réactifs

Les composants WebPart dynamiques sont conçus pour être entièrement côté client. En d’autres termes, chaque composant configuré dans le volet de propriétés reflète instantanément chaque modification apportée au sein du composant WebPart sur la page. Pour le composant WebPart Liste de tâches, le fait de désactiver l’option « Tâches achevées » masque cet affichage dans le composant WebPart.

Modèle de composant WebPart réactif

Les composants WebPart non dynamiques ne sont pas entièrement côté client. En règle générale, une ou plusieurs propriétés doivent appeler un service pour définir/extraire ou stocker des données sur un serveur. Dans ce cas, vous devez activer les boutons Appliquer et Annuler au bas du volet de propriétés.

Modèle de composant WebPart non réactif

Création du volet de propriétés Liste de tâches

L’exemple de liste de tâches utilise le volet unique et est un composant WebPart réactif. Les diagrammes suivants montrent chaque composant Fabric React et la conception résultante.

Ajout d’une description à la liste de tâches

Ajout d’une description à la liste de tâches

Menu déroulant pour sélectionner des tâches d’une liste existante

Sélection des cases pour afficher/masquer les différents affichages

Case à cocher pour afficher ou masquer les différents affichages

Utilisation du curseur pour définir le nombre de tâches à afficher

Curseur pour définir le nombre de tâches à afficher

Chargement des éléments sur la page après la sélection d’une liste dans le menu déroulant

Indicateur de chargement des éléments affiché par le composant WebPart

Intégration des nouvelles tâches chargées dans l’affichage à l’aide des styles d’animation d’Office UI Fabric.

Composant WebPart utilisant des animations Fabric

Voir aussi