Configurer le formulaire de liste

2025-04-04

Vous pouvez configurer le formulaire de liste dans une liste ou une bibliothèque avec un en-tête, un pied de page et un corps personnalisés du formulaire incluant une ou plusieurs sections avec des champs dans chacune de ces sections. La configuration de formulaire ne modifie pas les données dans l’élément de liste ou le fichier ; elle change uniquement la façon dont le formulaire apparaît lorsque les utilisateurs parcourent la liste ou la bibliothèque. Toute personne qui peut créer et gérer des affichages dans une liste peut utiliser la configuration de formulaire pour configurer le formulaire avec l’en-tête, le pied de page et le corps avec des sections.

Pour configurer un formulaire, vous utilisez les formateurs JSON que vous connaissez déjà lorsque vous mettez en forme une colonne ou un affichage dans une liste ou une bibliothèque. La configuration du formulaire permet à certains éléments et attributs prédéfinis de générer l’en-tête, le pied de page et le corps personnalisés avec une ou plusieurs sections.

Prise en main

Pour configurer le formulaire dans une liste ou une bibliothèque :

Accédez à la liste ou à la bibliothèque pour laquelle vous voulez configurer le formulaire.
Si vous êtes dans une liste :
- Ouvrez un élément pour afficher les détails de l’élément dans le formulaire d’affichage.
Si vous vous trouvez dans une bibliothèque de documents :
- Sélectionnez un fichier.
- Sélectionner ...
- Sélectionner plus
- Sélectionner des propriétés
En haut du formulaire, développez l’icône Modifier le formulaire, puis sélectionnez Configurer la disposition
Dans le volet Format, vous pouvez choisir d’appliquer une mise en forme aux sections de formulaire suivantes :
- En-tête
- Corps
- Pied de page

Configurer un en-tête personnalisé

Pour appliquer une mise en forme à l’en-tête, sélectionnez En-tête dans la liste déroulante Appliquer la mise en forme à.
Collez votre formateur d’en-tête personnalisé dans la zone de saisie de texte JSON.

Remarque

La configuration des formulaires permet d’utiliser certains éléments et attributs prédéfinis pour créer l’en-tête personnalisé.

Voici un exemple d’en-tête et JSON personnalisés :

En-tête de formulaire de liste personnalisé

{
  "elmType": "div",
  "attributes": {
    "class": "ms-borderColor-neutralTertiary"
  },
  "style": {
    "width": "99%",
    "border-top-width": "0px",
    "border-bottom-width": "1px",
    "border-left-width": "0px",
    "border-right-width": "0px",
    "border-style": "solid",
    "margin-bottom": "16px"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "display": "flex",
        "box-sizing": "border-box",
        "align-items": "center"
      },
      "children": [
        {
          "elmType": "div",
          "attributes": {
            "iconName": "Group",
            "class": "ms-fontSize-42 ms-fontWeight-regular ms-fontColor-themePrimary",
            "title": "Details"
          },
          "style": {
            "flex": "none",
            "padding": "0px",
            "padding-left": "0px",
            "height": "36px"
          }
        }
      ]
    },
    {
      "elmType": "div",
      "attributes": {
        "class": "ms-fontColor-neutralSecondary 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": "='Contact details for ' + [$Title]"
        }
      ]
    }
  ]
}

Pour afficher un aperçu de vos modifications, cliquez sur le boutonAperçu.
Pour enregistrer vos modifications, cliquez sur le bouton Enregistrer.
Fermez et rouvrez le formulaire pour afficher l’en-tête personnalisée.

Pour appliquer une mise en forme au pied de page, dans le volet Format, sélectionnez Pied de page dans la liste déroulante Appliquer la mise en forme à.
Collez votre formateur de pied de page personnalisé dans la zone de saisie de texte JSON.

Remarque

La configuration des formulaires permet d’utiliser certains éléments et attributs prédéfinis pour créer le pied de page personnalisé.

Voici un exemple de pied de page et JSON personnalisés :

Pied de page de formulaire de liste personnalisé

{
    "elmType": "div",
    "style": {
        "width": "100%",
        "text-align": "left",
        "overflow": "hidden",
        "border-top-width": "1px"
    },
    "children": [
        {
            "elmType": "div",
            "style": {
                "width": "100%",
                "padding-top": "10px",
                "height": "24px"
            },
            "children": [
                {
                    "elmType": "a",
                    "txtContent": "='Contact Details for ' + [$Title]",
                    "attributes": {
                        "target": "_blank",
                        "href": "='https://aka.ms/contacts?email=' + [$Email]",
                        "class": "ms-fontColor-themePrimary ms-borderColor-themePrimary ms-fontWeight-semibold ms-fontSize-m ms-fontColor-neutralSecondary–hover ms-bgColor-themeLight–hover"
                    }
                }
            ]
        }
    ]
}

Pour afficher un aperçu de vos modifications, cliquez sur le boutonAperçu.
Pour enregistrer vos modifications, cliquez sur le bouton Enregistrer.
Fermez le formulaire et rouvrez-le pour afficher le pied de page personnalisé.

Configurer le corps personnalisé incluant une ou plusieurs sections

Pour appliquer une mise en forme au corps, dans le volet Format, sélectionnez Corps dans la liste déroulante Appliquer la mise en forme à.
Collez votre formateur de corps personnalisé dans la zone de saisie de texte JSON.
Contrairement à l’en-tête et au pied de page, la configuration du corps autorise uniquement la définition d’une ou plusieurs sections et l’ajout d’une ou plusieurs colonnes à chacune de ces sections.
- Une ou plusieurs sections peuvent être définies pour un corps.
- Chaque section peut faire référence à une ou plusieurs colonnes de la liste ou de la bibliothèque.
- Une colonne ne peut être référencée que dans une seule section.
- Si une colonne est référencée dans plusieurs sections, la première section dans laquelle la colonne est référencée est prioritaire.
- Une colonne non référencée dans une section est automatiquement référencée dans la dernière section.
- Les nouvelles colonnes ajoutées sont automatiquement référencées dans la dernière section.

Vous trouverez ci-dessous la structure JSON qui vous permet de commencer à définir des sections et de référencer des colonnes dans les sections :

{
  "sections": [
    {
      //give a display name for the section
      "displayname": "",
      "fields": [
        //reference your fields here using their display name
        "Title"
      ]
    },
    {
      //give a display name for the section
      "displayname": "",
      "fields": [
        //reference your fields here using their display name
      ]
    }
  ]
}

Voici ci-dessous un exemple de corps JSON personnalisé incluant des sections :

{
  "sections": [
    {
      "displayname": "",
      "fields": [
        "Title"
      ]
    },
    {
      "displayname": "Details",
      "fields": [
        "Department",
        "Email",
        "Country"
      ]
    },
    {
      "displayname": "Application",
      "fields": [
        "Application Id",
        "Approver",
        "Reviewer"
      ]
    }
  ]
}

Une fois le corps personnalisé avec une ou plusieurs sections, le formulaire de liste ou de bibliothèque basculera vers une mise en page sur plusieurs colonnes.

Remarque

La configuration d’un corps de formulaire entraîne le basculement de la disposition de votre formulaire de liste ou de bibliothèque d’une mise en page à une seule colonne vers une mise en page sur plusieurs colonnes. Nous ajouterons la prise en charge de la configuration du corps avec une mise en page à une seule colonne dans une prochaine mise à jour.
Pour afficher un aperçu de vos modifications, cliquez sur le boutonAperçu.
Pour enregistrer vos modifications, cliquez sur le bouton Enregistrer.
Fermez le formulaire et rouvrez-le pour afficher le corps personnalisé.

Formateur personnalisé pour les champs Read-Only

Introduction

Listes Microsoft offre un moyen puissant d’organiser les informations et de collaborer avec votre équipe. Avec la montée en puissance de la création d’éléments de liste basés sur l’IA, les utilisateurs doivent souvent afficher, mais pas modifier certains champs, comme les données générées par le système ou les détails ajoutés au bot. Pour répondre à ce besoin, une nouvelle fonctionnalité de formateur personnalisé est proposée pour permettre aux champs d’apparaître en lecture seule dans les formulaires de liste.

Pourquoi Read-Only champs sont importants

Actuellement, les champs en lecture seule sont masqués dans les formulaires Nouvel élément et Modifier. Cela crée des défis lorsque les bots IA ou les processus automatisés créent des éléments contenant des données critiques que les utilisateurs doivent voir, mais pas modifier. Par exemple :

Un bot crée un ticket de service client avec les détails du problème Titre du problème et Description du problème.
Les utilisateurs doivent voir ces informations pour prendre des mesures (par exemple, envoyer un e-mail), mais ne peuvent pas les modifier.

Le nouveau formateur personnalisé résout ce problème en autorisant l’affichage de ces champs en lecture seule.

Fonctionnement du formateur personnalisé

Le formateur personnalisé introduit une nouvelle configuration JSON pour marquer les champs en lecture seule dans les affichages de formulaire.

JSON Structure

{
    "sections": [{}],
    "fieldsettings": [
        {
            "name": "fieldName",
            "readonly": true
        }
    ]
}

name : nom interne du champ.
readonly : lorsque la valeur est true, le champ est affiché en lecture seule.

Comportement dans différents affichages de formulaire

Le formateur personnalisé garantit une expérience utilisateur cohérente :

Formulaire Nouvel élément : le champ en lecture seule ne s’affiche pas.
Formulaire de modification : le champ s’affiche sans zone de texte modifiable, semblable à une colonne calculée.
Modifier tout le mode : le champ reste visible et non modifiable.

Le bouton Enregistrer fonctionne comme prévu : aucune modification accidentelle des champs en lecture seule.

Exemple de cas d’usage

Imaginez un bot CRM créant des tickets avec les détails du problème préremplis. À l’aide de ce format :

Titre du problème (en lecture seule) : les utilisateurs peuvent voir et copier le titre du problème, mais ne peuvent pas le modifier.
Description du problème (en lecture seule) : les utilisateurs peuvent voir et copier la description du problème, mais ne peuvent pas la modifier.
Source du problème (lecture seule) : les utilisateurs peuvent cliquer sur le lien Source du problème, mais ne peuvent pas le modifier.

Partager via