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.

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.

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.

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.

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.

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.

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.

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.

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.

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

Accordéon - Deux groupes ouverts et 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

Étape 2 sur 3

Étape 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.

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.

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

Sélection des tâches d’une liste existante dans le menu déroulant

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

Utilisation du 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

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