0

I have a Microsoft List with a Person column called Picture and with the setting Show Picture to True. I have copied the example header code from the Microsoft site Which shows some other picture. How can i replace this picture with the profile picture stored in the column Picture.

The header Example code: https://learn.microsoft.com/en-us/sharepoint/dev/declarative-customization/list-form-configuration#configure-custom-header I know i have to replace the line "iconName": "Group" and change it to get the profile picture from the column Picture.

How can I do that? Does anyone know the code?

1
  • You will have to use the img element instead of div element with iconName. I will provide the full JSON once I open my laptop. Aug 6, 2023 at 16:00

1 Answer 1

1

Use this JSON:

{
  "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": "img",
          "attributes": {
            "src": "=getUserImage([$PersonColumn.email], 's')",
            "class": "ms-fontSize-42 ms-fontWeight-regular ms-fontColor-themePrimary"
          },
          "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]"
        }
      ]
    }
  ]
}

Where PersonColumn is the name of your person or group column. You can get the internal name of your column by following this article: How to find the Internal name of columns in SharePoint Online?

Output:

enter image description here

5
  • Thank you for the code i have used the internalname whichs is "Foto" which is an Person column. But i get an empty profile picture. And the user has a profile picture set. Gr. P. Aug 7, 2023 at 12:48
  • I have tried but no luck with this code: "src": "=@currentWeb + '/_layouts/15/userphoto.aspx?size=S&accountname=' + [$personIterator.email]", "src": "=@currentWeb + '/_layouts/15/userphoto.aspx?size=S&accountname=' + [$Foto.email]", "src": "$Foto.email", Aug 7, 2023 at 14:51
  • I did a test if it shows my profilepicture by adding: "src": "=getUserImage(@me, 's')" and it works but i need the name in the Peron column "Foto" and not myself. Aug 7, 2023 at 19:15
  • Is your person column of type single selection or multiple selection is allowed? Also, make sure you are using correct internal name of your column in place of `` in JSON I provided above. Find the internal name of your SharePoint person column by following: ganeshsanapblogs.wordpress.com/2023/04/17/… Aug 8, 2023 at 7:13
  • I have used the powershell script you have posted. And the internalname of "Foto" is the same as the normal name "Foto". And the column Foto is a single selection. Aug 8, 2023 at 16:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.