Notes
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de vous connecter ou de modifier des répertoires.
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de modifier des répertoires.
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 de copie de Fabric pour votre composant WebPart, car cela peut créer un conflit avec la copie globale. Ces classes fournissent une base pour la mise en forme de votre composant WebPart, dont vous pouvez toujours vous écarter si vous souhaitez utiliser d’autres éléments visuels pour coller à la marque de votre société.
Composants d’Office UI Fabric React
En plus de la structure de l’interface utilisateur d’Office, vous pouvez utiliser des composants React adaptés à cette structure pour créer vos composants WebPart. Fabric React est un ensemble orienté mobile et dynamique de composants conçus pour simplifier et accélérer la création d’expériences web à l’aide du 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 dotée d’une icône plus qui est visible lorsque vous passez le curseur sur un composant WebPart sélectionné, afin d’indiquer les emplacements où les auteurs de pages peuvent ajouter de nouveaux composants WebPart à sa page. La boîte à outils s’ouvre quand un utilisateur sélectionne l’icône plus. Elle 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 WYSIWYG permet aux utilisateurs d’ajouter des informations ou du contenu qui s’affichent une fois publiés. Ce contenu doit être ajouté à la page pour que l’utilisateur voit comment il s’affiche pour le visiteur. Par exemple, les titres et les descriptions doivent être ajoutés là où le texte s’affiche, et les nouvelles tâches doivent être ajoutées ou 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és 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 appellent 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éroulante d’options. Imaginons par exemple que vous ayez trois groupes nommés Propriétés, Apparence et Disposition, ayant chacun 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
Le composant WebPart Liste de tâches donné en exemple utilise un seul volet et est réactif. Les diagrammes suivants présentent chaque composant Fabric React et la conception obtenue.
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.
