Partager via

Concepts avancés de mise en forme

Vous pouvez utiliser certaines des fonctionnalités suivantes pour rendre votre mise en forme d’affichage et de colonne plus riche en informations et interactive.

Création d’un bouton pour démarrer un flux

La capture d’écran suivante montre une liste avec un bouton de flux ajouté à la colonne Action :

capture d’écran de l’exemple

La mise en forme des colonnes vous permet de créer des boutons qui exécutent des flux sur l’élément de liste correspondant lorsque vous les sélectionnez. Pour les flux qui prennent en charge la solution, le panneau lancement de flux s’affiche après avoir choisi le bouton , et vous devez sélectionner Exécuter le flux pour démarrer le flux. Pour les flux qui ne prennent pas en charge la solution, le panneau lancement de flux s’affiche après avoir sélectionné le bouton et le flux s’exécute simplement.

Pour utiliser l’exemple ci-dessous, vous devez remplacer l’ID de flux que vous souhaitez exécuter. Cet ID est contenu dans la actionParamspropriété decustomRowAction l’attribut à l’intérieur de button l’élément.

Pour obtenir l’ID d’un flux qui est sensible à la solution :

  1. Sélectionnez Flux > Afficher vos flux dans la liste SharePoint où le flux est configuré.
  2. Le cas échéant, basculez vers l’environnement dans lequel le Flow est hébergé.
  3. Sélectionnez la zone Solutions.
  4. Sélectionnez la solution dans laquelle le flux a été créé.
  5. Filtrez les flux cloud et sélectionnez le Flow que vous souhaitez exécuter.
  6. Sélectionnez Exporter > Obtenir l’identificateur de flux.
  7. Copiez l’ID.

Pour obtenir l’ID d’un flux qui ne prend pas en charge la solution :

  1. Basculez vers l’environnement dans lequel le flux est hébergé.

  2. Sélectionnez le flux que vous souhaitez exécuter.

  3. Sélectionnez Exporter > Obtenir l’identificateur de flux.

  4. Copiez l’ID.

    {
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "button",
  "customRowAction": {
    "action": "executeFlow",
    "actionParams": "{\"id\": \"edf627d9-20f4-45ba-8bc9-4494bf2ff1be\"}"
  },
  "attributes": {
    "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
  },
  "style": {
    "border": "none",
    "background-color": "transparent",
    "cursor": "pointer"
  },
  "children": [
    {
      "elmType": "span",
      "attributes": {
        "iconName": "Flow"
      },
      "style": {
        "padding-right": "6px"
      }
    },
    {
      "elmType": "span",
      "txtContent": "Send to Manager"
    }
  ]
}

De plus, vous pouvez utiliser les options headerText et runFlowButtonText dans la propriété actionParams pour personnaliser des parties du volet Flux. Pour plus d’informations, consultez la partie concernant les éléments de bouton de la référence de syntaxe détaillée.

Cartes personnalisées sur pointage

L’image suivante montre une liste avec un point de suspension personnalisé ajouté à une Liste :

En survol : les métadonnées de la colonne « État » sont disponibles dans la mise en forme de l’affichage :

Image d’aperçu 1

En survol : les métadonnées de la colonne « État » sont disponibles dans la mise en forme de la colonne :

Image d’aperçu 2

Vous pouvez utiliser la mise en forme pour définir une légende personnalisée qui peut être une base définie par l’utilisateur, comme cliquer ou pointer.

Cet exemple utilise customCardProps, openOnEvent, directionalHintet isBeakVisible:

{
  "elmType": "div",
  "style": {
    "font-size": "12px"
  },
  "txtContent": "[$Status]",
  "customCardProps": {
    "formatter": {
      "elmType": "div",
      "txtContent": "Define your formatter options inside the customCardProps/formatter property"
    },
    "openOnEvent": "hover",
    "directionalHint": "bottomCenter",
    "isBeakVisible": true,
    "beakStyle" : {
      "backgroundColor": "white"
    }
  }
}

Cartes par défaut sur pointage

Les utilisateurs peuvent désormais disposer d’un profil carte ou d’un pointage de fichier carte sur les formateurs également. Voici quelques-unes des actions que les utilisateurs peuvent désormais effectuer :

  • Carte de profil ou carte de pointage de fichier dans n’importe quelle colonne
  • Carte de profil ou carte avec pointage avec mise en forme d’affichage

Pointez sur un nom de fichier avec la mise en forme avec le fichier par défaut carte :

Image d’aperçu 3

Pointez sur une colonne de personne avec la mise en forme avec le profil par défaut carte :

Image d’aperçu 4

Cet exemple utilise defaultHoverField:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "img",
      "style": {
        "width": "32px",
        "height": "32px",
        "overflow": "hidden",
        "border-radius": "50%",
        "margin": "2px"
      },
      "attributes": {
        "src": "=getUserImage([$Editor.email], 's')",
        "title": "[$Editor.title]"
      }
    },
    {
      "elmType": "span",
      "style": {
        "vertical-align": "middle",
        "margin-left": "2px"
      },
      "txtContent": "[$Editor.title]"
    }
  ],
  "defaultHoverField": "[$Editor]"
}

Référence de formateur de colonne

Les utilisateurs peuvent faire référence au JSON formateur de la colonne à l’intérieur d’un autre formateur de vue/colonne et l’utiliser avec d’autres éléments pour créer une visualisation de colonne personnalisée. Vous pouvez effectuer cette action en utilisant la propriété columnFormatterReference.

L’image suivant présente une liste dans une disposition Galerie référençant le formateur de colonne Catégorie :

Disposition de la galerie faisant référence à la colonne Catégorie

Disposition de liste avec colonne Catégorie mise en forme 

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": 127,
  "width": 254,
  "hideSelection": false,
  "formatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-card-container"
    },
    "children": [
      {
        "elmType": "button",
        "attributes": {
          "class": "sp-card-defaultClickButton"
        },
        "customRowAction": {
          "action": "defaultClick"
        }
      },
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondaryAlt sp-card-label"
                },
                "txtContent": "[!Title.DisplayName]"
              },
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$Title]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent"
                },
                "txtContent": "=if ([$Title] == '', '–', [$Title])"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-lastTextColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondaryAlt sp-card-label"
                },
                "txtContent": "[!Category.DisplayName]"
              },
              {
                "elmType": "div",
                "attributes": {
                  "class": "sp-card-content"
                },
                "style": {
                  "height": "32px",
                  "font-size":"12px"
                },
                "children": [
                  {
                    "columnFormatterReference": "[$Category]"
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}

Modification intraligne

Avec l'édition en ligne, les formateurs ont la possibilité de charger des éditeurs de champ pour modifier les données de champ d'un élément. Les utilisateurs doivent disposer d’autorisations de modification sur l’élément de liste, et le type de champ doit appartenir à un ensemble de types pris en charge pour que cette fonctionnalité fonctionne.

Une propriété inlineEditField JSON spéciale est utilisée avec value comme nom [$FieldName] interne de champ au niveau de l’élément cible dans le JSON.

{
  "elmType": "div",
  "inlineEditField": "[$FieldName]",
  "txtContent": "[$FieldName]"
}

Modification inline à l’aide de la propriété inlineEditField

Cela permet aux utilisateurs de modifier des éléments sur place, à l’intérieur de l’affichage, sans accéder à la modification basée sur la grille ou à un formulaire de modification d’élément.

Types de champs pris en charge

Liste des types de champs pris en charge pour l'édition en ligne :

  • Texte d’une seule ligne
  • Texte multiligne (sans RTF)
  • Nombre
  • Date/heure
  • Choix et choix multiples
  • Utilisateur et multiutilisateur
  • Recherche

Bordures et personnalisations de pointage

L’édition inline ajoute une bordure de pointage sur les éléments pour indiquer que ces éléments ont une action associée. La bordure par défaut est neutralSecondary, et lorsque vous cliquez dessus, l’éditeur s’affiche avec une themePrimary bordure. Ces couleurs de bordure peuvent être remplacées en définissant le style sur le même élément avec inlineEditField à l’aide d’attributs spéciaux : --inline-editor-border-width, --inline-editor-border-style, --inline-editor-border-radiuset --inline-editor-border-color.

{
  "elmType": "div",
  "inlineEditField": "[$FieldName]",
  "txtContent": "[$FieldName]",
  "style": {
    "--inline-editor-border-color": "transparent transparent red transparent",
    "border-color": "gray",
    "border-width": "1px",
    "border-style": "solid"
  }
}

Définir plusieurs valeurs de champ d’un élément à l’aide de customRowAction

Avec les nouvelles setValue propriétés et customRowAction , les formateurs peuvent afficher les boutons d’action qui modifient l’élément en interne sans ouvrir d’éditeurs ou de formulaires. setValue permet également de définir plusieurs valeurs de champ de l’élément à la fois.

Le code JSON ci-dessous définit la valeur de FieldInternalName_1, FieldInternalName_2et FieldInternalName_3avec les valeurs fournies :

{
  "elmType": "div",
  "txtContent": "[$FieldName]",
  "customRowAction":{
    "action": "setValue",
    "actionInput": {
      "FieldInternalName_1": "FieldValue_1",
      "FieldInternalName_2": "FieldValue_2",
      "FieldInternalName_3": "=if([$Status] == 'Completed', 'yes', 'no')"
    }
  }
}

Types de champs pris en charge

  • Texte d’une seule ligne
  • Texte multiligne (sans RTF)
  • Nombre
  • Date/heure
  • Choix et choix multiples
  • Utilisateur et multiutilisateur

Valeurs de champ de valeur dans actionInput:

  • Valeurs de texte :

    • une chaîne valide comme "Choice 1"

    • valeur d’autres colonnes : [$ColumnName]

    • une expression telle que :

      "if([$column]> 10, "Choice A", "Choice B")"

      ou

      {operator: "+", operands" : ["Choice", "A"]}

  • Nombre :

    • un nombre valide
    • valeur d’autres colonnes : [$ColumnName]
    • une expression

  • Valeurs de date :

    • une chaîne de date
    • @now jeton
    • expressions qui retournent une date à l’aide de fonctions de date intégrées
    • addDays et addMinutes, deux nouvelles fonctions pour prendre en charge des expressions telles que sept jours à partir d’aujourd’hui
    • une chaîne vide ""efface la valeur du champ

  • Multi-choix et plusieurs-personnes :

    • Les champs à valeurs multiples sont spéciaux, car ils ont besoin d’une valeur de tableau pour enregistrer plusieurs valeurs.
    • appendTo, removeFromet replace, trois fonctions qui peuvent fonctionner sur des champs à valeurs multiples.
      • appendTo([$MultiChoiceField], 'MyValue')
      • removeFrom([$MultiUserField], @me): supprime toutes les occurrences qui correspondent au deuxième paramètre
      • replace([$MultiChoiceField], 'Choice 1', 'Choice 3'): remplace toutes les occurrences du deuxième paramètre par le troisième.

  • Valeurs de champ de personne :

    • nom d’utilisateur ou e-mail

    • Une chaîne vide ""efface la valeur du champ

    • expression qui renvoie ces valeurs

      Remarque

      Une requête s’exécute avec la valeur de chaîne fournie sur la colonne people, et la première personne dans les résultats retournés est utilisée.

  • Last updated on