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.
Dans le monde classique SharePoint, vous avez été utilisé pour personnaliser le rendu des listes et bibliothèques à l’aide de XSLT (eXtensible Stylesheet Language for Transformation) et du contrôle XsltListViewWebPart . De nos jours, dans le monde moderne, vous pouvez obtenir de meilleurs résultats en vous appuyant sur la mise en forme de liste.
Importante
Cet article fait référence aux composants, exemples et/ou outils PnP qui sont des ressources open source soutenues par une communauté active qui les prend en charge. Il n’existe aucun contrat de niveau de service pour la prise en charge des outils open source des canaux de support Microsoft officiels. Toutefois, ces composants ou exemples utilisent des API et des fonctionnalités prêtes à l’emploi prises en charge par Microsoft.
Si vous préférez, vous pouvez watch la vidéo suivante, au lieu de lire l’article entier, que vous pouvez toujours considérer comme une référence beaucoup plus détaillée.
En fait, grâce à la mise en forme de liste, vous pouvez personnaliser le rendu d’un seul champ, via la mise en forme des colonnes ou le rendu d’un affichage liste entier, via la mise en forme de l’affichage liste. Pour ce faire, vous pouvez facilement utiliser l’interface utilisateur web de SharePoint et un concepteur convivial, ou écrire vos propres modèles JSON personnalisés. En couverture, la mise en forme de liste traite le rendu côté client de vos données, sans affecter ni modifier les données réelles, mais simplement appliquer un modèle de rendu personnalisé par-dessus.
En outre, la mise en forme des listes peut être appliquée à des listes et bibliothèques SharePoint, ainsi qu’à des listes de Listes Microsoft, qui, sous le capot, s’appuie sur SharePoint Online. Dans cet article, vous allez apprendre à tirer parti de la mise en forme de liste dans vos solutions.
Mise en forme des colonnes
La mise en forme des colonnes vous permet de personnaliser le rendu d’un seul champ dans une liste ou une bibliothèque. Pour savoir comment l’utiliser, nous allons créer une liste dans un site cible, par exemple à l’aide du modèle de liste « Demandes de voyage ». La sortie ressemble à celle de la capture d’écran suivante.
Mise en forme des colonnes avec le concepteur
À présent, imaginez que vous souhaitez personnaliser le rendu de la colonne « Durée du voyage (jours) » pour mettre en évidence les voyages les plus durables. Cliquez sur la flèche juste en regard du nom de la colonne, choisissez « Paramètres de colonne », puis « Mettre en forme cette colonne », comme illustré dans la capture d’écran suivante, pour activer l’interface utilisateur afin de personnaliser le rendu de la colonne.
Sur le côté droit de l’écran s’affiche un panneau latéral, que vous pouvez utiliser pour personnaliser la mise en forme des colonnes. Sélectionnez « Mise en forme conditionnelle » et commencez à personnaliser le rendu de la colonne sélectionnée.
Une fois sélectionnée, l’option vous permet de configurer les règles de rendu pour la colonne sélectionnée.
Vous pouvez créer autant de règles que vous le souhaitez. Une règle de rendu conditionnel peut être globale, non liée à une condition spécifique, ou peut être spécifique lorsqu’une ou plusieurs conditions (égales ou non égales à) sont vérifiées par rapport à un ou plusieurs champs. Pour chaque règle, vous pouvez ensuite définir un style de rendu personnalisé. Dans la capture d’écran suivante, vous pouvez voir l’interface utilisateur de base pour définir une règle.
Lorsque vous configurez le style de rendu, vous pouvez simplement choisir l’un des styles prêts à l’emploi, ou vous pouvez cliquer sur « Autres styles » et accéder à un ensemble complet de paramètres de style, comme illustré dans la capture d’écran suivante.
Comme vous pouvez le voir, un style personnalisé peut être constitué de nombreux paramètres tels que la police, la couleur du texte, la couleur de remplissage, l’icône, la couleur d’icône et les bordures. Dans la capture d’écran suivante, vous pouvez voir une règle définie pour la colonne « Durée du voyage (jours) », où les durées comprises entre 1 et 3 jours sont « ok » et mises en surbrillance avec une couleur verte, les durées de 4 jours sont « risquées » et mises en surbrillance de couleur orange, tandis que les durées de 5 jours (la semaine entière) sont considérées comme trop longues et mises en surbrillance avec une couleur rouge.
Comme vous venez de le voir, vous pouvez définir ce type de règles simplement à l’aide du navigateur web et du concepteur.
Mise en forme des colonnes avec un modèle JSON personnalisé
Toutefois, que se passe-t-il si vous devez définir des règles plus avancées ? Par exemple, que se passe-t-il si vous souhaitez définir une plage de valeurs de référence pour la colonne « Durée du voyage (jours) » au lieu de valeurs explicites ? Ou que se passe-t-il si vous souhaitez définir un rendu entièrement personnalisé pour vos colonnes ?
Heureusement, vous pouvez cliquer sur le « mode avancé » que vous voyez dans la partie inférieure de l’écran et commencer à modifier un modèle JSON à un niveau inférieur.
Remarque
Le json du modèle est basé sur un schéma défini par Microsoft et disponible à l’URL suivante . Vous trouverez les informations de référence sur le schéma dans le document Informations de référence sur la syntaxe de mise en forme.
Assez intéressant, lorsque vous choisissez de passer en mode avancé, le modèle JSON commence à vous montrer le modèle JSON de la mise en forme conditionnelle réelle que vous avez déjà définie. Par conséquent, vous pouvez commencer facilement avec le concepteur et, lorsque vous en avez besoin, vous pouvez passer au mode avancé et continuer à partir de là où vous étiez déjà.
Même s’il est hors contexte pour cet article d’explorer tous les détails de la syntaxe du modèle JSON, il est utile d’inspecter le json généré pour la colonne « Durée du voyage (jours) », qui est illustré dans l’extrait de code suivant.
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"style": {
"box-sizing": "border-box",
"padding": "0 2px",
"overflow": "hidden",
"text-overflow": "ellipsis"
},
"attributes": {
"class": {
"operator": ":",
"operands": [
{
"operator": "||",
"operands": [
{
"operator": "||",
"operands": [
{
"operator": "==",
"operands": [
"[$TravelDuration]",
"1"
]
},
{
"operator": "==",
"operands": [
"[$TravelDuration]",
"2"
]
}
]
},
{
"operator": "==",
"operands": [
"[$TravelDuration]",
"3"
]
}
]
},
"sp-css-backgroundColor-BgMintGreen sp-css-borderColor-MintGreenFont sp-field-fontSizeSmall sp-css-color-MintGreenFont",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$TravelDuration]",
"4"
]
},
"sp-css-backgroundColor-BgGold sp-css-borderColor-GoldFont sp-field-fontSizeSmall sp-css-color-GoldFont",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$TravelDuration]",
"5"
]
},
"sp-css-backgroundColor-BgDustRose sp-css-borderColor-DustRoseFont sp-field-fontSizeSmall sp-css-color-DustRoseFont",
""
]
}
]
}
]
}
},
"txtContent": "[$TravelDuration]"
}
Le modèle JSON définit que la sortie sera un élément HTML div avec des styles de rendu prédéfinis.
"elmType": "div",
"style": {
"box-sizing": "border-box",
"padding": "0 2px",
"overflow": "hidden",
"text-overflow": "ellipsis"
}
Ensuite, il définit un ensemble d’opérateurs et d’opérandes pour définir toutes les règles (valeur égale à 1, 2 ou 3 ; valeur 4 ; valeur 5) et le style CSS correspondant à appliquer lorsque la condition de règle est effective. À l’aide du modèle JSON de bas niveau, au lieu du concepteur web, vous pouvez même améliorer la qualité et la maintenabilité du modèle. Par exemple, au lieu de répertorier toutes les valeurs (1, 2 ou 3) pour le style vert, vous pouvez simplement déclarer une seule règle pour les valeurs inférieures ou égales à 3 (<= 3). Il en va de même pour le style rouge, où vous pouvez déclarer que la règle s’applique à toute valeur supérieure à 5 (>>5). Dans l’extrait de code suivant, vous pouvez lire le modèle JSON révisé.
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"style": {
"box-sizing": "border-box",
"padding": "0 2px",
"overflow": "hidden",
"text-overflow": "ellipsis"
},
"attributes": {
"class": {
"operator": ":",
"operands": [
{
"operator": "<=",
"operands": [
"[$TravelDuration]",
"3"
]
},
"sp-css-backgroundColor-BgMintGreen sp-css-borderColor-MintGreenFont sp-field-fontSizeSmall sp-css-color-MintGreenFont",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$TravelDuration]",
"4"
]
},
"sp-css-backgroundColor-BgGold sp-css-borderColor-GoldFont sp-field-fontSizeSmall sp-css-color-GoldFont",
{
"operator": ":",
"operands": [
{
"operator": ">=",
"operands": [
"[$TravelDuration]",
"5"
]
},
"sp-css-backgroundColor-BgDustRose sp-css-borderColor-DustRoseFont sp-field-fontSizeSmall sp-css-color-DustRoseFont",
""
]
}
]
}
]
}
},
"txtContent": "[$TravelDuration]"
}
Il s’agit d’un exemple très simple et de base, mais vous pouvez créer des règles de rendu vraiment complexes. Par exemple, vous pouvez imbriquer des éléments HTML dans la sortie d’une colonne, ou vous pouvez afficher des images personnalisées, etc.
Remarque
Vous trouverez de nombreux exemples utiles sur la mise en forme des colonnes en parcourant le référentiel GitHub Exemples de mise en forme de liste SharePoint et plus particulièrement les exemples de mise en forme de colonne.
Mise en forme de l’affichage liste
Comme vous pouvez personnaliser le rendu d’une seule colonne, vous pouvez utiliser la mise en forme de liste pour personnaliser le rendu d’une vue entière d’une liste ou d’une bibliothèque.
Pour personnaliser l’affichage liste d’une liste ou d’une bibliothèque, vous pouvez simplement cliquer sur le menu déroulant pour choisir l’affichage actuel et sélectionner l’option « Format de l’affichage actuel », comme illustré dans la capture d’écran suivante.
En cliquant sur l’élément de menu, vous activez un panneau latéral à droite, via lequel vous pouvez choisir d’appliquer un modèle très simple pour afficher les « styles de lignes alternés », ou vous pouvez activer la « mise en forme conditionnelle » et créer un modèle de mise en forme plus persolisé. Comme c’était le cas avec la mise en forme des colonnes, vous pouvez ensuite définir des conditions et des règles de style, qui s’appliquent désormais au niveau de la ligne, au lieu du niveau colonne.
En outre, dans la liste déroulante « Choisir la disposition », vous pouvez choisir de créer un modèle personnalisé de type Liste, qui est celui par défaut, ou Galerie, qui vous donne une sortie basée sur carte où vous pouvez personnaliser les champs et le rendu des cartes.
Lorsque vous sélectionnez Galerie et que vous activez le « Concepteur de cartes » en cliquant sur la commande « Modifier carte », vous pouvez choisir les champs à afficher dans les cartes, leur ordre et certains paramètres de configuration généraux pour le carte.
Si vous souhaitez en faire plus, vous pouvez cliquer sur « Mode avancé » et définir un modèle JSON entièrement personnalisé, qui s’appliquera à l’ensemble de la liste, au lieu de cibler une seule colonne.
Remarque
Vous trouverez de nombreux exemples utiles sur la mise en forme des affichages de liste en parcourant le référentiel GitHub Exemples de mise en forme de liste SharePoint et en particulier les exemples de mise en forme de l’affichage liste.
Mise en forme des formulaires de liste
Une autre option consiste à personnaliser la forme d’une liste ou d’une bibliothèque, en définissant un en-tête, un pied de page ou un corps personnalisé. En fait, si vous êtes dans une liste, vous pouvez simplement afficher les propriétés d’un élément, puis cliquer sur la commande « Modifier le formulaire » en haut à droite de l’écran et sélectionner l’option « Configurer la disposition », comme illustré dans la capture d’écran suivante.
Un panneau latéral s’affiche à droite et vous serez en mesure de configurer un json personnalisé pour personnaliser le rendu de l’en-tête, du pied de page ou du corps. Dans la capture d’écran suivante, vous pouvez voir à quoi ressemble le panneau.
Le même comportement s’applique aux bibliothèques de documents, mais pour activer le panneau de mise en forme, vous devez sélectionner un document, cliquez sur les trois points (menu BCE), sélectionnez Plus, puis Propriétés. Dans le volet de propriétés du document, vous pouvez ensuite choisir l’option « Modifier le formulaire » et l’option « Configurer la disposition ».
À présent, voyons le type de personnalisations que vous pouvez appliquer à l’aide de cette fonctionnalité. Par souci de simplicité, continuez à utiliser la liste « Demandes de voyage » créée dans les sections précédentes et modifiez l’en-tête des éléments de liste. Par exemple, supposons que vous souhaitiez remplacer l’en-tête par défaut par une zone personnalisée qui affiche l’avatar du demandeur et la destination du voyage. Dans la capture d’écran suivante, vous pouvez voir la sortie.
Dans l’extrait de code suivant, vous pouvez voir le modèle JSON pour obtenir le résultat ci-dessus.
{
"elmType": "div",
"attributes": {
"class": "ms-bgColor-themePrimary ms-fontColor-white ms-borderColor-neutralTertiary"
},
"style": {
"width": "99%",
"margin": "10px",
"border": "1px solid",
"padding": "10px"
},
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"box-sizing": "border-box",
"align-items": "center"
},
"children": [
{
"elmType": "img",
"attributes": {
"src": "=getUserImage('[$Requester.email]','medium')"
},
"style": {
"border-radius": "50%",
"margin-bottom": "10px"
}
}
]
},
{
"elmType": "div",
"attributes": {
"class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-24"
},
"style": {
"box-sizing": "border-box",
"width": "100%",
"text-align": "left",
"padding": "21px 12px",
"overflow": "hidden"
},
"children": [
{
"elmType": "div",
"txtContent": "='Travel request to ' + [$Destination.DisplayName]"
}
]
}
]
}
Le modèle JSON définit un élément DIV HTML avec la couleur primaire du thème actuel comme couleur d’arrière-plan, la couleur blanche du texte et une bordure unie de 1 pixel.
"elmType": "div",
"attributes": {
"class": "ms-bgColor-themePrimary ms-fontColor-white ms-borderColor-neutralTertiary"
},
"style": {
"width": "99%",
"margin": "10px",
"border": "1px solid",
"padding": "10px"
}
Il existe ensuite deux éléments DIV en tant qu’enfants de la DIV ci-dessus. La première DIV à gauche restitue l’image de l’utilisateur demandeur.
{
"elmType": "div",
"style": {
"display": "flex",
"box-sizing": "border-box",
"align-items": "center"
},
"children": [
{
"elmType": "img",
"attributes": {
"src": "=getUserImage('[$Requester.email]','medium')"
},
"style": {
"border-radius": "50%",
"margin-bottom": "10px"
}
}
]
}
Tandis que la deuxième DIV restitue une chaîne personnalisée avec le nom de la destination.
{
"elmType": "div",
"attributes": {
"class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-24"
},
"style": {
"box-sizing": "border-box",
"width": "100%",
"text-align": "left",
"padding": "21px 12px",
"overflow": "hidden"
},
"children": [
{
"elmType": "div",
"txtContent": "='Travel request to ' + [$Destination.DisplayName]"
}
]
}
Notez la syntaxe utilisée pour lire les propriétés de l’élément actif, basée sur les crochets et le symbole dollar ($) pour référencer un champ, en spécifiant finalement les propriétés détaillées du champ, comme l’e-mail pour le $Requester ou le DisplayName pour le $Destination. Notez également que vous pouvez vous appuyer sur des fonctions personnalisées telles que getUserImage pour récupérer des informations avancées à partir des champs de l’élément sélectionné.
Le pied de page personnalisé est personnalisable comme en-tête, en utilisant exactement la même approche qu’auparavant.
Au contraire, le corps peut être personnalisé en déclarant une ou plusieurs sections personnalisées et une ou plusieurs colonnes pour chaque section. Toutefois, n’oubliez pas qu’une colonne ne peut être référencée que dans une seule section, et si vous ne faites référence à aucune colonne dans une section, elle s’affiche automatiquement dans la dernière section. De même, les nouvelles colonnes ajoutées à la liste ou à la bibliothèque sont automatiquement répertoriées dans la dernière colonne.
Dans l’extrait de code suivant, vous pouvez voir un modèle JSON pour un corps avec une section « Plus d’informations », composée des champs Titre, Demandeur et Destination, et une autre section fourre-tout nommée « Autres ».
{
"sections": [
{
"displayname": "Main information",
"fields": [
"Title",
"Requester",
"Destination"
]
},
{
"displayname": "Others",
"fields": []
}
]
}
Notez que chaque objet de section est constitué d’un nom d’affichage et d’un tableau de champs.
Provisionnement PnP et mise en forme JSON
La dernière chose importante à savoir lorsque vous utilisez la mise en forme de liste est que si vous extrayez un modèle de site ou un modèle de liste à l’aide du moteur d’approvisionnement PnP, le moteur exportera également toute mise en forme de colonne personnalisée ou mise en forme d’affichage de liste et les stockera dans les attributs CustomFormatter pour les colonnes ou les éléments des vues. Par conséquent, vous pouvez personnaliser vos colonnes et affichages de liste, exporter la personnalisation et l’appliquer à vos sites de production et/ou clients à l’aide d’un ensemble de scripts PowerShell.
Remarque
Si vous ne savez pas ce qu’est le moteur d’approvisionnement PnP ou si vous souhaitez en savoir plus sur ce qu’il est, vous pouvez lire l’article Présentation de l’approvisionnement moderne des artefacts.
Par exemple, vous pouvez voir ici la syntaxe avec PnP PowerShell pour extraire un modèle des « demandes de voyage », y compris les modèles de mise en forme des colonnes et des affichages liste.
Connect-PnPOnline https://<source-tenant-name>.sharepoint.com/sites/<SourceSite>
Get-PnPSiteTemplate -Out .\travel-requests.xml -ListsToExtract "Travel requests" -Handlers Lists
Dans l’extrait de code suivant, vous pouvez voir comment appliquer le modèle qui vient d’être extrait sur un site cible.
Connect-PnPOnline https://<target-tenant-name>.sharepoint.com/sites/<TargetSite>
Invoke-PnPSiteTemplate -Path .\travel-requests.xml
Notez que l’extraction et l’application du modèle peuvent même se produire sur différents locataires Microosft 365.
Contenu recommandé
Vous trouverez des informations supplémentaires sur cette rubrique en lisant les documents suivants :