Forum Discussion

jsantos489's avatar
jsantos489
Copper Contributor
May 03, 2022

Inline Editing On Person Fields

Hi guys,

 

I am trying to implement the Inline Editing on a Person/Group Field.

I am using this condition.

{
  "elmType": "div",
  "inlineEditField": "[$Pessoa]",
  "txtContent": "@currentField"
}

 

 

And it works! I can edit inline. 

Thing is it doesnt show me the person name, it shows [Object Object]

 

Any solution?

Thanks in advance

  • jhersko's avatar
    jhersko
    Copper Contributor

    jsantos489 Give this a try.  

    {
        "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
        "elmType": "div",
        "inlineEditField": "[$fieldName]",
        "txtContent": "[$FieldName.email]"
                }

     

    • mstevens22's avatar
      mstevens22
      Copper Contributor

      jhersko 

       

      This shows the email though. Is there a way for it to still display the person's name?

      • SvenSieverding's avatar
        SvenSieverding
        Bronze Contributor

        mstevens22 

        in that case you can use the "title" property instead of the "email" property

        {
          "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
          "elmType": "div",
          "inlineEditField": "@currentField",
          "txtContent": "@currentField.title"
        }
  • Vanloss's avatar
    Vanloss
    Copper Contributor

    A bit late, but if anyone looking for a solution, unfortunatelly it's not as simple as adding only a txtContent like in a text column.

     

    For that, I rebuilt the formatting the best way I could to mimic the original formatting for person field. It will organise the people in a grid with their images and names. It's also clickable to see the people M365 profile. Just change the [$PERSON_COLUMN] to the name/id of your column and it's ready to go.
    I hope it helps someone in the future 🙂

     

     

    {
      "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
      "_comment": "MAIN DIV ===================",
      "elmType": "div",
      "inlineEditField": "[$PERSON_COLUMN]",
      "style": {
        "display": "inline-block",
        "width":"100%",
        "height": "100%",
        "padding": "6px",
        "box-sizing": "border-box",
        "-moz-box-sizing": "border-box",
        "-webkit-box-sizing": "border-box"
      },
      "children": [
        {
          "_comment": "FLEX DIV ===================",
          "elmType": "div",
          "style": {
            "display": "flex",
            "height": "100%",
            "width": "100%",
            "flex-wrap": "wrap",
            "box-sizing": "border-box",
            "-moz-box-sizing": "border-box",
            "-webkit-box-sizing": "border-box"
          },
          "children": [
            {
              "_comment": "LIST DIV ===================",
              "elmType": "div",
              "style": {
                "display":"flex",
                "flex-wrap": "wrap",
                "width": "auto",
                "margin": "auto 0px",
                "padding": "6px",
                "box-sizing": "border-box",
                "-moz-box-sizing": "border-box",
                "-webkit-box-sizing": "border-box"
              },
              "children": [
                {
                  "_comment": "EACH PERSON =========",
                  "elmType": "div",
                  "forEach": "person in [$PERSON_COLUMN]",
                  "defaultHoverField": "[$person]",
                  "customRowAction": {
                    "action": "defaultClick"
                  },
                  "style": {
                    "display": "flex",
                    "text-decoration": "none",
                    "color": "white",
                    "cursor": "pointer",
                    "margin": "5px 5px",
                    "text-align": "left",
                    "border-radius": "10px"
                  },
                  "attributes": {
                    "class": "ms-bgColor-neutralQuaternaryAlt ms-bgColor-themeSecondary--hover"
                  },
                  "children": [
                    {
                      "_comment": "PICTURE =========",
                      "elmType": "div",
                      "style": {
                        "display": "flex",
                        "width": "20px",
                        "height": "20px",
                        "margin": "auto 0px"
                      },
                      "children": [
                        {
                          "elmType": "img",
                          "attributes": {
                            "src": "=getUserImage([$person.email], 'S')"
                          },
                          "style": {
                            "width": "25px",
                            "height": "25px",
                            "border-radius": "25px",
                            "margin": "auto",
                            "position": "relative",
                            "top": "-15%"
                          }
                        }
                      ]
                    },
                    {
                      "_comment": "NAME =========",
                      "elmType": "a",
                      "txtContent": "[$person.title]",
                      "style": {
                        "color": "#9C9A98",
                        "font-size": "11px",
                        "font-weight": "400",
                        "margin": "auto 15px auto 15px"
                      }
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }

     

     

    • Good work Vanloss !

       

      Anyone trying to use above JSON formatting, Note - In JSON [$PERSON_COLUMNis an internal name of your person or group column in this format: [$InternalNameOfColumn].

       

      You can get the internal name of your SharePoint list columns by following this article: How to find the Internal name of columns in SharePoint Online?


      Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

Resources