Configurer le formulaire de liste

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. Tout personne pouvant créer et gérer des affichages dans une liste peut utiliser la configuration de formulaire pour configurer le formulaire avec un en-tête, un pied de page et un corps de texte incluant 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 des formulaires permet d’utiliser certains éléments et attributs prédéfinis pour créer l’en-tête, le pied de page et le corps personnalisés incluant une ou plusieurs sections.

Prise en main

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

  1. Accédez à la liste ou à la bibliothèque pour laquelle vous voulez configurer le formulaire.

  2. Si vous êtes dans une liste :

    • Ouvrez un élément pour afficher les détails de l’élément dans le formulaire d’affichage.
  3. 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
  4. En haut du formulaire, développez l’icône Modifier le formulaire, puis sélectionnez Configurer la disposition

    Configurer un formulaire de liste

  5. 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é

  1. 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 à.

  2. Collez votre formateur d’en-tête personnalisé dans la zone de saisie de texte JSON.

    Notes

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

  3. 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]"
                    }
                ]
            }
        ]
    }
    
  4. Pour afficher un aperçu de vos modifications, cliquez sur le bouton Aperçu.

  5. Pour enregistrer vos modifications, cliquez sur le bouton Enregistrer.

  6. Fermez et rouvrez le formulaire pour afficher l’en-tête personnalisée.

  1. 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 à.

  2. Collez votre formateur de pied de page personnalisé dans la zone de saisie de texte JSON.

    Notes

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

  3. 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"
                        }
                    }
                ]
            }
        ]
    }
    
  4. Pour afficher un aperçu de vos modifications, cliquez sur le bouton Aperçu.

  5. Pour enregistrer vos modifications, cliquez sur le bouton Enregistrer.

  6. Fermez le formulaire et rouvrez-le pour afficher le pied de page personnalisé.

Configurer le corps personnalisé incluant une ou plusieurs sections

  1. 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 à.

  2. Collez votre formateur de corps personnalisé dans la zone de saisie de texte JSON.

  3. 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 a la priorité.
    • 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.
  4. 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
                ]
            }
        ]
    }
    
  5. 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"
                ]
            }
        ]
    }
    
  6. 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.

    Notes

    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.

    Corps de formulaire de liste personnalisé avec sections

  7. Pour afficher un aperçu de vos modifications, cliquez sur le bouton Aperçu.

  8. Pour enregistrer vos modifications, cliquez sur le bouton Enregistrer.

  9. Fermez le formulaire et rouvrez-le pour afficher le corps personnalisé.