pnp / List-Formatting

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

I have a question about Custom Header Formatting in Sharepoint. #746

Closed Elonmuskis closed 7 months ago

Elonmuskis commented 7 months ago

Hi, I have a problem with Formatting of Custom Header in Sharepoint, mainly because copying and pasting the code does not work, since the problem stays the same ( The problem is: The following code doesn't show the Formatting ).

PS: I made the columns as shown below but the code still didn't format the column header the way it should.

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json", "hideColumnHeader": true, "hideSelection": true, "rowFormatter": { "elmType": "div", "style": { "display": "flex", "flex-direction": "column", "align-items": "flex-start" }, "children": [ { "elmType": "div", "attributes": { "class": "ms-bgColor-themePrimary ms-fontColor-white" }, "style": { "display": "=if(@rowIndex == 0, 'flex', 'none')", "font-weight": "bold", "font-size": "18px", "width": "100%", "padding": "4px" }, "children": [ { "elmType": "div", "txtContent": "Title", "style": { "flex-grow": "1" } }, { "elmType": "div", "txtContent": "Deployed", "style": { "width": "100px" } } ] }, { "elmType": "div", "attributes": { "class": "ms-borderColor-neutralQuaternary" }, "style": { "display": "flex", "font-size": "16px", "width": "100%", "padding": "0 4px", "border-bottom-width": "1px", "border-bottom-style": "solid" }, "children": [ { "elmType": "div", "txtContent": "[$Title]", "style": { "flex-grow": "1" } }, { "elmType": "div", "txtContent": "=toLocaleDateString([$Deployed])", "attributes": { "class": "=if([$Active], '', 'ms-fontColor-redDark')" }, "style": { "width": "100px" } } ] } ] } }

tecchan1107 commented 7 months ago

Hi @Elonmuskis !

I tried it in my environment and it works fine!

image

image

image

What problems are you encountering? If possible, screenshots would be helpful!

Elonmuskis commented 7 months ago

All good. The Problem was, I was trying to format the code in a specific column not in the "View". Now since you showed me that it has to be formatted in the Layout "View", it worked.

Thanks again tecchan!