search

pnp / List-Formatting

List Formatting Samples for use in SharePoint and Microsoft Lists
https://pnp.github.io/List-Formatting/
MIT License
1.74k stars 834 forks source link

I need some help for a new sample "staff formatting" #556

Closed chris883773 closed 2 years ago

chris883773 commented 2 years ago

Sample (which sample are you talking about)

I want something like this image

Actual Columns

image

Actual Code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "debugMode": false,
  "hideSelection": true,
  "hideListHeader": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "float": "left",
      "margin": "10px",
      "padding": "5px",
      "min-width": "340px",
      "border-radius": "15px"
    },
    "attributes": {
      "class": "ms-bgColor-neutralLighterAlt ms-bgColor-neutralLight--hover ms-fontColor-themePrimary--hover"
    },
    "children": [
      {
        "elmType": "div",
        "children": [
          {
            "elmType": "img",
            "style": {
              "display": "block",
              "height": "auto",
              "max-height": "120px",
              "border-radius": "50%"
            },
            "attributes": {
              "src": "='/_layouts/15/userphoto.aspx?size=S&username=' + [$Person.email]"
            }
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "text-align": "center",
          "padding": "5px",
          "margin": "auto",
          "font-size": "1.1rem"
        },
        "children": [
          {
            "elmType": "span",
            "style": {
              "font-weight": "500",
              "font-size": "1.5rem",
              "margin-bottom": "0.5rem"
            },
            "txtContent": "=[$chLastName]+', '+[$chFirstName]"
          },
          {
            "elmType": "span",
            "txtContent": "[$chCompany]"
          },
          {
            "elmType": "span",
            "style": {
              "font-weight": "500",
              "font-size": "1.1em",
              "overflow": "hidden",
              "max-width": "280px",
              "white-space": "nowrap"
            },
            "txtContent": "[$chJobTitle]"
          },
          {
            "elmType": "div",
            "txtContent": "[$chBusinessPhone]"
          }
        ]
      },
      {
        "elmType": "div",
        "children": [
          {
            "elmType": "span",
            "style": {
              "height": "2rem",
              "width": "2rem",
              "font-size": "2em",
              "cursor": "pointer",
              "margin": "0px 5px",
              "vertical-align": "text-bottom"
            }
          },
          {
            "elmType": "span",
            "style": {
              "height": "2rem",
              "width": "2rem",
              "font-size": "2em",
              "cursor": "pointer",
              "margin": "0px 5px",
              "vertical-align": "text-bottom",
              "display": "=if([$chMail]=='','none','')"
            },
            "children": [
              {
                "elmType": "a",
                "style": {
                  "cursor": "pointer"
                },
                "attributes": {
                  "class": "ms-bgColor-neutralLighterAlt ms-bgColor-neutralLight--hover ms-fontColor-themePrimary--hover",
                  "iconName": "OutlookLogo",
                  "href": "='mailto:' + [$chMail]",
                  "title": "Email"
                }
              }
            ]
          },
          {
            "elmType": "button",
            "customRowAction": {
              "action": "defaultClick"
            },
            "attributes": {
              "title": "See more details",
              "class": "ms-fontColor-neutralPrimary ms-fontColor-red--hover ms-fontSize-xl"
            },
            "style": {
              "border": "none",
              "background-color": "transparent",
              "cursor": "pointer"
            },
            "children": [
              {
                "elmType": "span",
                "attributes": {
                  "iconName": "ContactInfo"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}

Question

I do not saw any content. I do not find the problem. And i hope you can help me. image

aaclage commented 2 years ago

Grüezi @chris883773,

Give a look and use your JSON, made small changes but should appear some content. Can you confirm the columns are included in the View that JSON can get the fields to display content? image

updated json

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "debugMode": false,
  "hideSelection": true,
  "hideListHeader": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "float": "left",
      "margin": "10px",
      "padding": "5px",
      "min-width": "340px",
      "border-radius": "15px"
    },
    "attributes": {
      "class": "ms-bgColor-neutralLighterAlt ms-bgColor-neutralLight--hover ms-fontColor-themePrimary--hover"
    },
    "children": [
      {
        "elmType": "div",
        "children": [
          {
            "elmType": "img",
            "style": {
              "display": "block",
              "height": "auto",
              "max-height": "120px",
              "border-radius": "50%"
            },
            "attributes": {
              "src": "='/_layouts/15/userphoto.aspx?size=S&username=' + [$Person.email]"
            }
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "text-align": "center",
          "padding": "5px",
          "margin": "auto",
          "font-size": "1.1rem"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "font-weight": "500",
              "font-size": "1.5rem",
              "margin-bottom": "0.5rem"
            },
            "txtContent": "=[$chLastName]+', '+[$chFirstName]"
          },
          {
            "elmType": "div",
            "txtContent": "[$chCompany]"
          },
          {
            "elmType": "span",
            "style": {
              "font-weight": "500",
              "font-size": "1.1em",
              "overflow": "hidden",
              "max-width": "280px",
              "white-space": "nowrap"
            },
            "txtContent": "[$chJobTitle]"
          },
          {
            "elmType": "div",
            "txtContent": "[$chBusinessPhone]"
          }
        ]
      },
      {
        "elmType": "div",
        "children": [
          {
            "elmType": "span",
            "style": {
              "height": "2rem",
              "width": "2rem",
              "font-size": "2em",
              "cursor": "pointer",
              "margin": "0px 5px",
              "vertical-align": "text-bottom"
            }
          },
          {
            "elmType": "span",
            "style": {
              "height": "2rem",
              "width": "2rem",
              "font-size": "2em",
              "cursor": "pointer",
              "margin": "0px 5px",
              "vertical-align": "text-bottom",
              "display": "=if([$chMail]=='','none','')"
            },
            "children": [
              {
                "elmType": "a",
                "style": {
                  "text-decoration": "none",
                  "cursor": "pointer"
                },
                "attributes": {
                  "class": "ms-bgColor-neutralLighterAlt ms-bgColor-neutralLight--hover ms-fontColor-themePrimary--hover",
                  "iconName": "OutlookLogo",
                  "href": "='mailto:' + [$chMail]",
                  "title": "Email"
                }
              }
            ]
          },
          {
            "elmType": "button",
            "customRowAction": {
              "action": "defaultClick"
            },
            "attributes": {
              "title": "See more details",
              "class": "ms-fontColor-neutralPrimary ms-fontColor-red--hover ms-fontSize-xl"
            },
            "style": {
              "border": "none",
              "background-color": "transparent",
              "cursor": "pointer"
            },
            "children": [
              {
                "elmType": "span",
                "attributes": {
                  "iconName": "ContactInfo"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}
chris883773 commented 2 years ago

Well i used your code but i have nothing to see.

image

In my lists are one item. image

sympmarc commented 2 years ago

Are the columns you are using shown in the view, though?

chris883773 commented 2 years ago

Ah well.

Sorry i did not read your question: Can you confirm the columns are included in the View that JSON can get the fields to display content?

That was the solution. In my view i have no visiblity for the fields. image

Thank you to @sympmarc and @aaclage. Have a great day.

sympmarc commented 2 years ago

That bites me all the time. :)