SharePoint 2019 Column Formatting On Premise doesn't work when you add it on a Page with List Web P

%3CLINGO-SUB%20id%3D%22lingo-sub-1183152%22%20slang%3D%22en-US%22%3ESharePoint%202019%20Column%20Formatting%20On%20Premise%20doesn't%20work%20when%20you%20add%20it%20on%20a%20Page%20with%20List%20Web%20P%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1183152%22%20slang%3D%22en-US%22%3E%3CP%3ESharePoint%202019%20Column%20Formatting%20On%20Premise%20doesn't%20work%20when%20you%20add%20it%20on%3C%2FP%3E%3CP%3Ea%20Page%20with%20List%20Web%20Part%3C%2FP%3E%3CP%3E%26nbsp%3BHow%20to%20test%26nbsp%3B%3C%2FP%3E%3CP%3ETry%20this%20on%20SharePoint%20online%20and%20On%20premise%3C%2FP%3E%3CP%3EDo%20column%20formatting%20with%20this%20json%3C%2FP%3E%3CP%3EThen%26nbsp%3B%20add%20a%20page%26nbsp%3B%20with%20communication%20template%26nbsp%3B%3C%2FP%3E%3CP%3EAdd%20list%20select%20the%20view%26nbsp%3B%3C%2FP%3E%3CP%3Echeck%20the%20conditional%20formatting%20is%20gone%26nbsp%3B%20on%20On%20Prem%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3Bcheck%20the%20conditional%20formatting%20is%20working%20on%20On%20Office%20365%3C%2FP%3E%3CP%3EJson%20used%26nbsp%3B%20is%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3E%7B%0A%20%22%24schema%22%3A%20%22https%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fv2%2Fcolumn-formatting.schema.json%22%2C%0A%20%20%20%20%22debugMode%22%3A%20true%2C%0A%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%22txtContent%22%3A%20%22%40currentField%22%2C%0A%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22background-color%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22operator%22%3A%20%22%3F%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22operands%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22operator%22%3A%20%22%3D%3D%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22operands%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22%5B%24ColorCoded%5D%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22Red%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22red%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22operator%22%3A%20%22%3F%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22operands%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22operator%22%3A%20%22%3D%3D%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22operands%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22%5B%24ColorCoded%5D%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22Blue%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22aqua%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22operator%22%3A%20%22%3F%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22operands%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22operator%22%3A%20%22%3D%3D%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22operands%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22%5B%24ColorCoded%5D%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22Green%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22Green%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22silver%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%20%20%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22color%22%3A%20%22black%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22padding-left%22%3A%20%2210px%22%0A%20%20%20%20%7D%0A%0A%20%7D%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22tempsnip.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F172097i3287E4EC2252EF01%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20title%3D%22tempsnip.png%22%20alt%3D%22tempsnip.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1183152%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EResponsive%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1183393%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%202019%20Column%20Formatting%20On%20Premise%20doesn't%20work%20when%20you%20add%20it%20on%20a%20Page%20with%20List%20W%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1183393%22%20slang%3D%22en-US%22%3EI%20think%20this%20could%20be%20related%20to%20the%20fact%20that%20the%20list%20WebPart%20in%20SP%202019%20is%20not%20the%20most%20updated%20one%20we%20have%20in%20SPO...so%20if%20the%20version%20in%20SP%202019%20does%20not%20support%20column%20formatting%2C%20that's%20why%20you%20are%20not%20seeing%20your%20customizations%20in%20that%20WebPart%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1751647%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%202019%20Column%20Formatting%20On%20Premise%20doesn't%20work%20when%20you%20add%20it%20on%20a%20Page%20with%20List%20W%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1751647%22%20slang%3D%22en-US%22%3E%3CP%3EThere%20is%20some%20difference%20in%20JSON%20format%20in%20On-prem%20and%20Sharepoint%20online%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F530591%22%20target%3D%22_blank%22%3E%40jinthakur%3C%2FA%3E%3C%2FP%3E%3CP%3EExcel-style%20Syntax%20does%20not%20work%20in%20the%20On-prem%20version.%3C%2FP%3E%3CP%3EInbox%20me%20I%20can%20rectify%20this%20JSON.%3C%2FP%3E%3C%2FLINGO-BODY%3E
Frequent Visitor

SharePoint 2019 Column Formatting On Premise doesn't work when you add it on

a Page with List Web Part

 How to test 

Try this on SharePoint online and On premise

Do column formatting with this json

Then  add a page  with communication template 

Add list select the view 

check the conditional formatting is gone  on On Prem 

 check the conditional formatting is working on On Office 365

Json used  is 

{
 "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "debugMode": true,
    "elmType": "div",
    "txtContent": "@currentField",
    "style": {
                "background-color": {
                                        "operator": "?",
                                        "operands": [
                                        {
                                            "operator": "==",
                                            "operands": [
                                                "[$ColorCoded]",
                                                "Red"
                                            ]
                                        },
                                        "red",
                                        {
                                            "operator": "?",
                                            "operands": [
                                            {
                                                "operator": "==",
                                                "operands": [
                                                    "[$ColorCoded]",
                                                    "Blue"
                                                ]
                                            },
                                            "aqua",
                                            {
                                            "operator": "?",
                                            "operands": [
                                            {
                                                "operator": "==",
                                                "operands": [
                                                    "[$ColorCoded]",
                                                    "Green"
                                                ]
                                            },
                                            "Green",
                                            "silver"
                                        ]
                                    }
                                        ]
                                    }   

                                ]
                            },
                "color": "black",
                "padding-left": "10px"
    }

 }

tempsnip.png

2 Replies
I think this could be related to the fact that the list WebPart in SP 2019 is not the most updated one we have in SPO...so if the version in SP 2019 does not support column formatting, that's why you are not seeing your customizations in that WebPart

There is some difference in JSON format in On-prem and Sharepoint online@jinthakur

Excel-style Syntax does not work in the On-prem version.

Inbox me I can rectify this JSON.