SOLVED

View Formatting - Can't display People Field

Brass Contributor

Hey,


I'm creating a custom view for a list with JSON. So far everything works fine, with one excaption. I'm not able to display the information from a people field.

 

My Field has the name "Director" (Checked with the url) and regarding to the docs the Name of the person should be "[$Director.title]". When I insert this in my view the row is empty. (Same with ID, Email, ...)

Here is my JSON and my result: 

 

List-View.png

 

 

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "hideListHeader": true,
  "hideSelection": true,
  "debugMode": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "flex-wrap": "wrap",
      "align-items": "stretch",
      "padding": "8px",
      "margin-bottom": "16px",
      "max-width": "100%",
      "border-radius": "8px"
    },
    "attributes": {
      "class": "ms-bgColor-neutralLighter"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "flex-grow": "1",
          "display": "flex",
          "flex-wrap": "wrap",
          "align-items": "stretch",
          "max-width": "100%"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "flex-grow": "1",
              "display": "flex",
              "flex-direction": "column",
              "flex-wrap": "nowrap",
              "align-items": "stretch",
              "max-width": "30%",
              "min-width": "30%",
              "padding-left": "10px"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "flex-grow": "1"
                },
                "children": [
                  {
                    "elmType": "div",
                    "txtContent": "Client:",
                    "style": {
                      "display": "block"
                    },
                    "attributes": {
                      "class": "ms-fontWeight-semibold ms-fontColor-neutralPrimary"
                    }
                  },
                  {
                    "elmType": "div",
                    "txtContent": "[$Title]",
                    "style": {
                      "display": "block"
                    },
                    "attributes": {
                      "class": "ms-fontWeight-regular ms-fontColor-neutralPrimary"
                    }
                  },
                  {
                    "elmType": "div",
                    "txtContent": "Director:",
                    "style": {
                      "display": "block"
                    },
                    "attributes": {
                      "class": "ms-fontWeight-semibold ms-fontColor-neutralPrimary"
                    }
                  },
                  {
                    "elmType": "div",
                    "txtContent": "Hier könnte Ihr Name stehen",
                    "defaultHoverField": "[$Director]",
                    "style": {
                      "display": "block"
                    }
                  },
                  {
                    "elmType": "div",
                    "txtContent": "Project Manager:",
                    "style": {
                      "display": "block"
                    },
                    "attributes": {
                      "class": "ms-fontWeight-semibold ms-fontColor-neutralPrimary"
                    }
                  },
                  {
                    "elmType": "div",
                    "txtContent": "[$ProjectManager.Title]",
                    "style": {
                      "display": "block"
                    },
                    "attributes": {
                      "class": "ms-fontWeight-regular ms-fontColor-neutralPrimary"
                    }
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "flex-grow": "1",
              "display": "flex",
              "flex-wrap": "wrap",
              "align-items": "stretch",
              "max-width": "310px"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "flex-grow": "1",
                  "display": "flex",
                  "flex-direction": "column",
                  "flex-wrap": "nowrap",
                  "align-items": "stretch",
                  "max-width": "30%",
                  "min-width": "30%",
                  "padding-left": "10px"
                },
                "children": [
                  {
                    "elmType": "div",
                    "style": {
                      "flex-grow": "1"
                    },
                    "children": [
                      {
                        "elmType": "span",
                        "txtContent": "Start Date:",
                        "style": {
                          "display": "block"
                        },
                        "attributes": {
                          "class": "ms-fontWeight-semibold ms-fontColor-neutralPrimary"
                        }
                      },
                      {
                        "elmType": "span",
                        "txtContent": "=toLocaleDateString([$Date])",
                        "style": {
                          "display": "block"
                        },
                        "attributes": {
                          "class": "ms-fontWeight-regular ms-fontColor-neutralPrimary"
                        }
                      },
                      {
                        "elmType": "span",
                        "txtContent": "End Date:",
                        "style": {
                          "display": "block"
                        },
                        "attributes": {
                          "class": "ms-fontWeight-semibold ms-fontColor-neutralPrimary"
                        }
                      },
                      {
                        "elmType": "span",
                        "txtContent": "=toLocaleDateString([$EndDate])",
                        "style": {
                          "display": "block"
                        },
                        "attributes": {
                          "class": "ms-fontWeight-regular ms-fontColor-neutralPrimary"
                        }
                      },
                      {
                        "elmType": "span",
                        "txtContent": "Status:",
                        "style": {
                          "display": "block"
                        },
                        "attributes": {
                          "class": "ms-fontWeight-semibold ms-fontColor-neutralPrimary"
                        }
                      },
                      {
                        "elmType": "span",
                        "txtContent": "[$Status]",
                        "style": {
                          "display": "block"
                        },
                        "attributes": {
                          "class": "ms-fontWeight-regular ms-fontColor-neutralPrimary"
                        }
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}

 

 

Thanks a lot!

2 Replies
best response confirmed by wit4r7 (Brass Contributor)
Solution

@wit4r7 

In the below code from your post the 'Director' div you have given the txtcontent directly, for the Project Manager, you have given [$ProjectManager.Title], it should be lowercase title. Can you please correct the json and try, instead of trying with the whole json, just try to use only 'Director' and 'Project Manager' field for testing and then you can append the rest of the code, since it is working fine.

 

{
                    "elmType": "div",
                    "txtContent": "Director:",
                    "style": {
                      "display": "block"
                    },
                    "attributes": {
                      "class": "ms-fontWeight-semibold ms-fontColor-neutralPrimary"
                    }
                  },
                  {
                    "elmType": "div",
                    "txtContent": "Hier könnte Ihr Name stehen",
                    "defaultHoverField": "[$Director]",
                    "style": {
                      "display": "block"
                    }
                  },
                  {
                    "elmType": "div",
                    "txtContent": "Project Manager:",
                    "style": {
                      "display": "block"
                    },
                    "attributes": {
                      "class": "ms-fontWeight-semibold ms-fontColor-neutralPrimary"
                    }
                  },
                  {
                    "elmType": "div",
                    "txtContent": "[$ProjectManager.Title]",
                    "style": {
                      "display": "block"
                    },
                    "attributes": {
                      "class": "ms-fontWeight-regular ms-fontColor-neutralPrimary"
                    }
                  }

 

@Sudharsan K 

 

Thanks a lot. If I use only one field it works for me. I will digg in my code to find the error when displaying multiple Fields

1 best response

Accepted Solutions
best response confirmed by wit4r7 (Brass Contributor)
Solution

@wit4r7 

In the below code from your post the 'Director' div you have given the txtcontent directly, for the Project Manager, you have given [$ProjectManager.Title], it should be lowercase title. Can you please correct the json and try, instead of trying with the whole json, just try to use only 'Director' and 'Project Manager' field for testing and then you can append the rest of the code, since it is working fine.

 

{
                    "elmType": "div",
                    "txtContent": "Director:",
                    "style": {
                      "display": "block"
                    },
                    "attributes": {
                      "class": "ms-fontWeight-semibold ms-fontColor-neutralPrimary"
                    }
                  },
                  {
                    "elmType": "div",
                    "txtContent": "Hier könnte Ihr Name stehen",
                    "defaultHoverField": "[$Director]",
                    "style": {
                      "display": "block"
                    }
                  },
                  {
                    "elmType": "div",
                    "txtContent": "Project Manager:",
                    "style": {
                      "display": "block"
                    },
                    "attributes": {
                      "class": "ms-fontWeight-semibold ms-fontColor-neutralPrimary"
                    }
                  },
                  {
                    "elmType": "div",
                    "txtContent": "[$ProjectManager.Title]",
                    "style": {
                      "display": "block"
                    },
                    "attributes": {
                      "class": "ms-fontWeight-regular ms-fontColor-neutralPrimary"
                    }
                  }

 

View solution in original post