0

enter image description here

enter image description here

Wondering if anyone can help me out with figuring out the formatting my multiple values person field on my list. I cannot figure out how to space out the names of each individual under the "Maintenance Technicians"?

I tried using some other basic JSON to get the profile circles under "additional site staff", however it is not connecting to our Delve accounts?

So when you hover over it, you cannot pull up their profile.?

See current JSON below:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "forEach": "personIterator in @currentField",
      "elmType": "div",
      "style": {
        "width": "32px",
        "height": "32px",
        "overflow": "hidden",
        "border-radius": "50%",
        "margin": "2px",
        "display": "=if(loopIndex('personIterator') >= 3, 'none', '')"
      },
      "children": [
        {
          "elmType": "img",
          "attributes": {
            "src": "='/_layouts/15/userphoto.aspx?size=S&accountname=' + [$personIterator.email]",
            "title": "[$personIterator.title]"
          },
          "style": {
            "position": "relative",
            "top": "50%",
            "left": "50%",
            "width": "100%",
            "height": "auto",
            "margin-left": "-50%",
            "margin-top": "-50%",
            "display": "=if(length(@currentField) > 3 && loopIndex('personIterator') >= 2, 'none', '')"
          }
        },
        {
          "elmType": "div",
          "attributes": {
            "title": "=join(@currentField.title, ', ')",
            "class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary"
          },
          "style": {
            "width": "100%",
            "height": "100%",
            "text-align": "center",
            "line-height": "30px",
            "font-size": "14px",
            "display": "=if(length(@currentField) > 3 && loopIndex('personIterator') == 2, '', 'none')"
          },
          "children": [
            {
              "elmType": "span",
              "txtContent": "='+' + toString(length(@currentField) - (2))"
            }
          ]
        }
      ]
    }
  ]
}

Any help with the JSON coding or spacing out the names on the default setting?

Thanks!

2
  • It would help if you could post the JSON you have already so we can assist you in finding improvements. – willman Jan 22 '20 at 19:54
  • @willman I have added it to the post! – Francis Jan 22 '20 at 20:02
1

We can use the JSON formatting below to achieve it. Note: Modify the "tenant" of "tenant-my.sharepoint.com" in JSON code below to make it works.

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "div",
    "style": {
        "min-height": "1.5em",
        "flex-direction": "column",
        "align-items": "flex-start"
    },
    "children": [       
        {
            "elmType": "div",
            "forEach": "person in @currentField",
            "style": {
                "margin-top": "=if(loopIndex('person') == 0, '0', '1em')"
            },
            "children": [
                {
                    "elmType": "div",
                    "style": {
                        "display": "flex",
                        "flex-direction": "row"
                    },
                    "children": [
                        {
                            "elmType": "img",
                            "attributes": {
                                "src": "='/_layouts/15/userphoto.aspx?size=S&accountname='+ [$person.email]"
                            },
                            "style": {
                                "width": "3em",
                                "height": "3em",
                                "border-radius": "3em"
                            }
                        },
                        {
                            "elmType": "a",
                            "attributes": {
                                "href": "='https://tenant-my.sharepoint.com/PersonImmersive.aspx?accountname=i:0%23.f|membership|'+ [$person.email]",
                                "target":"_blank"
                            },
                            "style": {
                                "margin-left": "0.5em"
                            },
                            "children": [
                                {
                                    "elmType": "div",
                                    "txtContent": "[$person.title]",
                                    "style": {
                                        "font-size": "1.2em"
                                    }
                                } 
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

enter image description here

4
  • Lifesaver! Wondering if there is an additional line of code that could open their delve account in a new tab instead on the same tab? Or the option to hover over their name/photo and get the drop down/preview of their delve account? – Francis Jan 23 '20 at 18:43
  • To open delve account in a new tab, please check my updated reply above, add the "target":"_blank" in "attributes" of "a" tag. – LZ_MSFT Jan 24 '20 at 1:14
  • That worked! Last question-- Would it be possible to have the hover pop up (Delve preview box) work? -Like the little info screen that pops up if you hover over a default name/group in a list? Or would that not be a JSON capability? – Francis Jan 24 '20 at 20:31
  • I am having trouble with the Delve profile pictures not updating. Is there an adjust I need to make for it to update and reflect the Delve profile pic? – Francis Mar 3 '20 at 16:56
0

I already experienced this issue weeks ago, and I managed to solve that using Column Formatting, here is the code JSON:

{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "txtContent": "=join(@currentField.title, ', ')",
  "attributes": {
    "class": "=if(indexOf(join(@currentField.email,';'), @me) != -1, 'ms-fontColor-themePrimary ms-fontWeight-semibold', '')"
  }
}

you will get a person, separated with comma !

enter image description here

ps: it include also that the current user will find his name coloured in blue.

Source: sp-dev-list-formatting

Best regards.

2
  • Thanks Aimen! The comma part worked, but it doesn't seem to link the current user colored in blue? Did you have to adjust your code to get it to link to their account? – Francis Jan 22 '20 at 22:07
  • no, for me it's working – AIMEN BOULAHIA Jan 26 '20 at 9:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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