Building immersive user experiences with SharePoint view formatting

Published Sep 07 2018 01:17 PM 38.9K Views
Microsoft

Last May, at SharePoint Conference 2018, we previewed new user experiences built with view formatting (previously called “row formatting”).  It’s based on the column formatting feature introduced last year, which allows you to format the appearance of individual columns using JSON. 

 

The view formatter enables you to customize the entire SharePoint list view experience using a similar JSON-based approach.  You can use this feature to apply conditional formatting to list and library rows, or create entirely new immersive list and library experiences.

 

What does this mean?  Simply put, it lets you turn this list:Before view formattingBefore view formatting

Into this:

 

After view formattingAfter view formatting

The simplest way to use view formatting is to apply conditional formatting to rows.  The example below applies a CSS class to each list view row depending on the item’s value in the DueDate field:

Conditional formattingConditional formatting

{

  "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",

   "additionalRowClass": "=if([$DueDate] <= @now, 'sp-field-severity--severeWarning', ''"

}

A more complex example is shown below.  This example uses the view formatter to build a totally custom multi-line view.  The JSON to accomplish this is a bit longer – you can find it on our documentation page.

Multiline formattingMultiline formatting

 

We recognize that JSON, while not technically code, can be a delicate format to write.  That’s why we’ve also introduced a new parser that works with Excel-like expressions for both view formatting and column formatting.  What does that mean?  Here’s a JSON snippet using the old syntax that assigns a property the value “red” if the field is less than 40, and “green” otherwise:

{

        "operator": ":",

        "operands": [

          {

            "operator": "<",

            "operands": [

              "@currentField",

              40

            ]

          },

          "red",

          "green"

        ]

}

 

This format can be difficult to read and modify.  Our expression parser now supports writing this same conditional expression in a much friendlier way:

“=if(@currentField < 40, ‘red’, ‘green’)”

 

Where do you put all this “not quite code”?  You can tell you have the feature in any view using the selector control on the command bar.  Format current view will open a pane where you can cut-and-paste formatting scripts.

Format current viewFormat current view 

And you don’t have to write all these scripts yourself.  You can find samples to meet your needs.  Our dynamic and vibrant community contributions on our SharePoint Patterns and Practices community has already shared many great examples of column formatting.  We’ll be continuing to build on the momentum, allowing community contributions to be highlighted on the GitHub repo for SharePoint patterns and practices,

 

Custom view formatting will be rolling out to commercial customers in September 2018.   For more information, please visit our GitHub repository or our support article.  Thank you.

 

23 Comments
%3CLINGO-SUB%20id%3D%22lingo-sub-313683%22%20slang%3D%22en-US%22%3ERe%3A%20Building%20immersive%20user%20experiences%20with%20SharePoint%20view%20formatting%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-313683%22%20slang%3D%22en-US%22%3E%3CP%3EHello%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIs%20it%20possible%20to%20do%20more%20then%20one%20condition%3F%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EExample%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%7B%3CBR%20%2F%3E%26nbsp%3B%20%22schema%22%3A%20%22%3CA%20href%3D%22https%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fview-formatting.schema.json%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fview-formatting.schema.json%3C%2FA%3E%22%2C%3CBR%20%2F%3E%26nbsp%3B%20%22additionalRowClass%22%3A%20%22%3Dif(%5B%24due%5D%20%26lt%3B%3D%20%40now%2C%20'sp-field-severity--severeWarning'%2C%20''%22%3CBR%20%2F%3E%7D%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20want%20Color%20changing%20only%20if%20%3CSPAN%3E%24%3C%2FSPAN%3Edue%20%26lt%3B%3D%20now%20and%20if%20%24field%20not%20empty%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ERegards%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-245868%22%20slang%3D%22en-US%22%3EBuilding%20immersive%20user%20experiences%20with%20SharePoint%20view%20formatting%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-245868%22%20slang%3D%22en-US%22%3E%3CP%3ELast%20May%2C%20at%20%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2FMicrosoft-SharePoint-Blog%2FEnrich-your-SharePoint-Content-with-Intelligence-and-Automation%2Fba-p%2F194174%22%20target%3D%22_blank%22%3ESharePoint%20Conference%202018%3C%2FA%3E%2C%20we%20previewed%20new%20user%20experiences%20built%20with%20view%20formatting%20(previously%20called%20%E2%80%9Crow%20formatting%E2%80%9D).%26nbsp%3B%20It%E2%80%99s%20based%20on%20the%20column%20formatting%20feature%20introduced%20last%20year%2C%20which%20allows%20you%20to%20format%20the%20appearance%20of%20individual%20columns%20using%20JSON.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThe%20view%20formatter%20enables%20you%20to%20customize%20the%20entire%20SharePoint%20list%20view%20experience%20using%20a%20similar%20JSON-based%20approach.%26nbsp%3B%20You%20can%20use%20this%20feature%20to%20apply%20conditional%20formatting%20to%20list%20and%20library%20rows%2C%20or%20create%20entirely%20new%20immersive%20list%20and%20library%20experiences.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWhat%20does%20this%20mean%3F%26nbsp%3B%20Simply%20put%2C%20it%20lets%20you%20turn%20this%20list%3A%3C%2FP%3E%3CP%3EInto%20this%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3C%2FP%3E%3CP%3EThe%20simplest%20way%20to%20use%20view%20formatting%20is%20to%20apply%20conditional%20formatting%20to%20rows.%26nbsp%3B%20The%20example%20below%20applies%20a%20CSS%20class%20to%20each%20list%20view%20row%20depending%20on%20the%20item%E2%80%99s%20value%20in%20the%20DueDate%20field%3A%3C%2FP%3E%3CP%3E%3C%2FP%3E%3CP%3E%7B%3C%2FP%3E%3CP%3E%26nbsp%3B%20%22schema%22%3A%20%22%3CA%20href%3D%22https%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fview-formatting.schema.json%22%20rel%3D%22noopener%20noreferrer%22%20target%3D%22_blank%22%3Ehttps%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fview-formatting.schema.json%3C%2FA%3E%22%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%26nbsp%3B%20%22additionalRowClass%22%3A%20%22%3Dif(%5B%24DueDate%5D%20%26lt%3B%3D%20%40now%2C%20'sp-field-severity--severeWarning'%2C%20''%22%3C%2FP%3E%3CP%3E%7D%3C%2FP%3E%3CP%3EA%20more%20complex%20example%20is%20shown%20below.%26nbsp%3B%20This%20example%20uses%20the%20view%20formatter%20to%20build%20a%20totally%20custom%20multi-line%20view.%26nbsp%3B%20The%20JSON%20to%20accomplish%20this%20is%20a%20bit%20longer%20%E2%80%93%20you%20can%20find%20it%20on%20our%20%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fdeclarative-customization%2Fview-formatting%23build-custom-row-layouts%22%20rel%3D%22noopener%20noreferrer%22%20target%3D%22_blank%22%3Edocumentation%20page%3C%2FA%3E.%3C%2FP%3E%3CP%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWe%20recognize%20that%20JSON%2C%20while%20not%20technically%20code%2C%20can%20be%20a%20delicate%20format%20to%20write.%26nbsp%3B%20That%E2%80%99s%20why%20we%E2%80%99ve%20also%20introduced%20a%20new%20parser%20that%20works%20with%20Excel-like%20expressions%20for%20both%20view%20formatting%20and%20column%20formatting.%26nbsp%3B%20What%20does%20that%20mean%3F%26nbsp%3B%20Here%E2%80%99s%20a%20JSON%20snippet%20using%20the%20old%20syntax%20that%20assigns%20a%20property%20the%20value%20%E2%80%9Cred%E2%80%9D%20if%20the%20field%20is%20less%20than%2040%2C%20and%20%E2%80%9Cgreen%E2%80%9D%20otherwise%3A%3C%2FP%3E%3CP%3E%7B%3C%2FP%3E%3CP%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%20%22operator%22%3A%20%22%3A%22%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%20%22operands%22%3A%20%5B%3C%2FP%3E%3CP%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%20%7B%3C%2FP%3E%3CP%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%20%22operator%22%3A%20%22%26lt%3B%22%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%20%22operands%22%3A%20%5B%3C%2FP%3E%3CP%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%20%22%40currentField%22%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%2040%3C%2FP%3E%3CP%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%20%5D%3C%2FP%3E%3CP%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%20%7D%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%20%22red%22%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%20%22green%22%3C%2FP%3E%3CP%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%20%5D%3C%2FP%3E%3CP%3E%7D%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThis%20format%20can%20be%20difficult%20to%20read%20and%20modify.%26nbsp%3B%20Our%20expression%20parser%20now%20supports%20writing%20this%20same%20conditional%20expression%20in%20a%20much%20friendlier%20way%3A%3C%2FP%3E%3CP%3E%E2%80%9C%3Dif(%40currentField%20%26lt%3B%2040%2C%20%E2%80%98red%E2%80%99%2C%20%E2%80%98green%E2%80%99)%E2%80%9D%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWhere%20do%20you%20put%20all%20this%20%E2%80%9Cnot%20quite%20code%E2%80%9D%3F%26nbsp%3B%20You%20can%20tell%20you%20have%20the%20feature%20in%20any%20view%20using%20the%20selector%20control%20on%20the%20command%20bar.%26nbsp%3B%20Format%20current%20view%20will%20open%20a%20pane%20where%20you%20can%20cut-and-paste%20formatting%20scripts.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAnd%20you%20don%E2%80%99t%20have%20to%20write%20all%20these%20scripts%20yourself.%26nbsp%3B%20You%20can%20find%20samples%20to%20meet%20your%20needs.%26nbsp%3B%20Our%20dynamic%20and%20vibrant%20community%20contributions%20on%20our%20%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fsolution-guidance%2Foffice-365-development-patterns-and-practices-solution-guidance%22%20rel%3D%22noopener%20noreferrer%22%20target%3D%22_blank%22%3ESharePoint%20Patterns%20and%20Practices%3C%2FA%3E%20community%20has%20already%20shared%20many%20great%20examples%20of%20column%20formatting.%26nbsp%3B%20We%E2%80%99ll%20be%20continuing%20to%20build%20on%20the%20momentum%2C%20allowing%20community%20contributions%20to%20be%20highlighted%20on%20the%20GitHub%20repo%20for%20SharePoint%20patterns%20and%20practices%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ECustom%20view%20formatting%20will%20be%20rolling%20out%20to%20commercial%20customers%20in%20September%202018.%26nbsp%3B%26nbsp%3B%20For%20more%20information%2C%20please%20visit%20our%20GitHub%20repository%20or%20our%20support%20article.%20%26nbsp%3BThank%20you.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-TEASER%20id%3D%22lingo-teaser-245868%22%20slang%3D%22en-US%22%3E%3CP%3EThe%20new%20view%20formatter%20enables%20you%20to%20customize%20the%20entire%20SharePoint%20list%20and%20library%20view%20experience%20using%20scripts.%26nbsp%3B%20You%20can%20apply%20conditional%20formatting%20to%20list%20and%20library%20rows%2C%20or%20create%20entirely%20new%20immersive%20list%20and%20library%20experiences.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-TEASER%3E%3CLINGO-LABS%20id%3D%22lingo-labs-245868%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EProduct%20Updates%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ETips%20%26amp%3B%20Tricks%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-248191%22%20slang%3D%22en-US%22%3ERe%3A%20Building%20immersive%20user%20experiences%20with%20SharePoint%20view%20formatting%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-248191%22%20slang%3D%22en-US%22%3E%3CP%3EDoes%20every%20View%20needs%20it%20own%20Not-Quite-Code%3F%3C%2FP%3E%3CP%3EWill%20it%20be%20possible%20to%20re-use%20Not-Quite-Code%20to%20format%20multiple%20views%20on%20the%20same%20page%20using%20one%20function%20(with%20parameters)%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EKinda%20like%20this%20old%20CSR%20code%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20887px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F48016i18C7787E69925267%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22nPhiNJq%22%20title%3D%22nPhiNJq%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-250619%22%20slang%3D%22en-US%22%3ERe%3A%20Building%20immersive%20user%20experiences%20with%20SharePoint%20view%20formatting%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-250619%22%20slang%3D%22en-US%22%3E%3CP%3EIf%20I%20understand%20your%20question%20-%20I%20think%20yes.%26nbsp%3B%20You%20can%20use%20column%20formatting%20to%20create%20formats%20that%20persist%20across%20views%2C%20and%20then%20use%20view%20logic%20to%20customize%20a%20whole%20row.%26nbsp%3B%20There's%20a%20reference%20on%20the%20PnP%20site%20about%20how%20to%20override%20(or%20leave%20intact)%20a%20column%20format%20when%20a%20view%20format%20is%20also%20applied.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-250639%22%20slang%3D%22en-US%22%3ERe%3A%20Building%20immersive%20user%20experiences%20with%20SharePoint%20view%20formatting%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-250639%22%20slang%3D%22en-US%22%3E%3CP%3EHey%20Chris%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EDo%20you%20know%20if%20there%20is%20a%20tutorial%20anywhere%20on%20how%20to%20build%20the%20micronews%20list%20that%20looks%20like%20a%20classified%20list%20in%20the%20screens%20above%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-250700%22%20slang%3D%22en-US%22%3ERe%3A%20Building%20immersive%20user%20experiences%20with%20SharePoint%20view%20formatting%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-250700%22%20slang%3D%22en-US%22%3E%3CP%3EIs%20Multiple%20line%20of%20Text%20column%20with%20Enhanced%20Rich%20Text%20supported%20%3F%20Or%20any%20workaround%20to%20format%20it%20in%20the%20view%20formatter%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F49376i2B7E4FFAD2520302%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22formatted%20error.PNG%22%20title%3D%22formatted%20error.PNG%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-250736%22%20slang%3D%22en-US%22%3ERe%3A%20Building%20immersive%20user%20experiences%20with%20SharePoint%20view%20formatting%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-250736%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F98%22%20target%3D%22_blank%22%3E%40Chris%20McNulty%3C%2FA%3E%26nbsp%3BCan%20you%20please%20let%20us%20know%20where%20we%20can%20find%20this%20Expression%20Parser%20to%20translate%20Excel-logic%20into%20JSON%20format%3F%26nbsp%3BApparently%20not%20many%20people%20get%20the%20value%20of%20this%20-%20just%20think%20of%20any%20business%20people%20with%20not%20IT-savy%20background.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-250890%22%20slang%3D%22en-US%22%3ERe%3A%20Building%20immersive%20user%20experiences%20with%20SharePoint%20view%20formatting%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-250890%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F98%22%20target%3D%22_blank%22%3E%40Chris%20McNulty%3C%2FA%3E%26nbsp%3Bis%20there%20anyway%20to%20keep%20this%20formatting%20when%20using%20the%20List%20View%20webpart%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-250896%22%20slang%3D%22en-US%22%3ERe%3A%20Building%20immersive%20user%20experiences%20with%20SharePoint%20view%20formatting%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-250896%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F705%22%20target%3D%22_blank%22%3E%40Jeff%20Collins%3C%2FA%3E%2C%20you%20can%20accomplish%20something%20similar%20by%20following%20either%20the%20%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-list-formatting%2Ftree%2Fmaster%2Fview-samples%2Fcontact-card-format%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3EContact%20Card%3C%2FA%3E%20or%20%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-list-formatting%2Ftree%2Fmaster%2Fview-samples%2Fmulti-line-view%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3EMulti-line%20view%20examples%3C%2FA%3E.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-250917%22%20slang%3D%22en-US%22%3ERe%3A%20Building%20immersive%20user%20experiences%20with%20SharePoint%20view%20formatting%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-250917%22%20slang%3D%22en-US%22%3E%3CP%3EDid%20some%20one%20allready%20create%20a%20helper%20tool%20for%20the%20row%20format%2C%20like%20the%20column%20formatter%20tool%20on%20GitHub%3F%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-251264%22%20slang%3D%22en-US%22%3ERe%3A%20Building%20immersive%20user%20experiences%20with%20SharePoint%20view%20formatting%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-251264%22%20slang%3D%22en-US%22%3ESo%20Chris%20%2C%20how%20did%20you%20actually%20create%20the%20picture%20%22In%20to%20this...%22%20with%20the%20Currency%20format%20of%20the%20dollar%3F%20Since%20the%20currency%20column%C2%B4s%20not%20supported!%3F!%20And%20to%20clearify%20the%20picture%20you%20can%20use%20%22img%22%20as%20elmType%20and%20%22src%22%20as%20attribute%2C%20ie%3A%20%7B%20%22elmType%22%3A%20%22img%22%2C%20%22attributes%22%3A%20%7B%20%22src%22%3A%20%22%5B%24Bild%5D%22%20%7D%2C%20%22style%22%3A%20%7B%20%22width%22%3A%20%2260px%22%2C%20%22height%22%3A%20%2280px%22%20%7D%20%7D%2C%20Regards%2C%20Fredrik%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-251389%22%20slang%3D%22en-US%22%3ERe%3A%20Building%20immersive%20user%20experiences%20with%20SharePoint%20view%20formatting%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-251389%22%20slang%3D%22en-US%22%3E%3CP%3EI've%20made%20a%20little%20prototype%20web%20app%20to%20help%20with%20building%20JSON%20Conditional%20Formatting.%20It%20doesn't%20use%20the%20new%20if%2Fthen%20syntax%2C%20but%20it%20works%20just%20the%20same.%3CBR%20%2F%3E%3CBR%20%2F%3EMaybe%20it%20will%20help%20someone%20here.%3CBR%20%2F%3E%3CBR%20%2F%3EApp%3A%20%3CA%20href%3D%22https%3A%2F%2Fsharepoint-json-formatter.herokuapp.com%26nbsp%3B%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fsharepoint-json-formatter.herokuapp.com%26nbsp%3B%3C%2FA%3E%3CBR%20%2F%3E%3CBR%20%2F%3ESource%20code%3A%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Falecjmaly%2FSharePoint-JSON-Helper%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2Falecjmaly%2FSharePoint-JSON-Helper%3C%2FA%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-251535%22%20slang%3D%22en-US%22%3ERe%3A%20Building%20immersive%20user%20experiences%20with%20SharePoint%20view%20formatting%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-251535%22%20slang%3D%22en-US%22%3E%3CP%3ESorry%20if%20this%20is%20a%20bit%20off-topic%20but%20is%20there%20any%20chance%20Microsoft%20can%20look%20at%20overcoming%20some%20of%20the%20limitations%20in%20SharePoint%20List%20Columns%3F%20I%20would%20like%20to%20be%20able%20to%20use%20Lookup%20columns%20in%20Calculated%20columns%20which%20is%20currently%20unsupported.%3C%2FP%3E%3CP%3E%26nbsp%3BIt's%20great%20that%20Microsoft%20is%20improving%20the%20user%20experience%20of%20SharePoint%20but%20there%20are%20still%20some%20limitations%20such%20as%20above%20that%20can%26nbsp%3Breally%20make%20it%20difficult%20to%20meet%20a%20lot%20of%20user%20requirements%20in%20SharePoint.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-252268%22%20slang%3D%22en-US%22%3ERe%3A%20Building%20immersive%20user%20experiences%20with%20SharePoint%20view%20formatting%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-252268%22%20slang%3D%22en-US%22%3E%3CP%3EStill%20struggling%20to%20understand%20how%20pasting%20and%20maintain%20a%20bunch%20of%20weird%20JSON%20or%20complex%20%E2%80%9CExcel%20expressions%E2%80%9D%20into%20different%20view%20pages%20is%20a%20better%20idea%20than%20just%20referencing%20a%20shared%20CSS.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-259826%22%20slang%3D%22en-US%22%3ERe%3A%20Building%20immersive%20user%20experiences%20with%20SharePoint%20view%20formatting%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-259826%22%20slang%3D%22en-US%22%3E%3CP%3EWhen%20using%20%22Group%20By%22%20in%20a%20view%20is%20it%20possible%20to%20format%20that%20row%3F%20One%20use%20for%20this%20is%20would%20be%20to%20remove%20the%20%22%5BFieldName%5D%3A%22%20from%20the%20row%20and%20just%20show%20the%20field%20value.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-268488%22%20slang%3D%22en-US%22%3ERe%3A%20Building%20immersive%20user%20experiences%20with%20SharePoint%20view%20formatting%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-268488%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F98%22%20target%3D%22_blank%22%3E%40Chris%20McNulty%3C%2FA%3EWe%20have%20tested%20the%20View%20Formatting%20and%20it%20works%20great%20-%20except%20it%20doesn't%20save%20the%20view.%26nbsp%3B%20When%20we%20click%20save%20but%20refresh%20the%20view%2C%20the%20formatting%20isn't%20displayed%20in%20the%20view.%26nbsp%3B%20When%20we%20click%20%22Format%20this%20view%22%20the%20JSON%20is%20still%20there%2C%20but%20it%20isn't%20displaying%20in%20the%20view.%26nbsp%3B%20It%20is%20only%20visible%20in%20the%20view%20when%20we%20click%20Preview.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-271688%22%20slang%3D%22en-US%22%3ERe%3A%20Building%20immersive%20user%20experiences%20with%20SharePoint%20view%20formatting%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-271688%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F98%22%20target%3D%22_blank%22%3E%40Chris%20McNulty%3C%2FA%3E%26nbsp%3Bmultiple%20people%20on%20this%20thread%20have%20asked%20but%20I%20have%20yet%20to%26nbsp%3Bsee%26nbsp%3Byour%20answer.%20How%20was%20the%20Micronews%20example%20above%20achieved%20using%20JSON%3F%20I've%20combed%20through%20the%20github%20repository%20and%20other%20examples%20(also%20reached%20out%20to%20our%20PFE)%20but%20so%20far%20have%20come%20up%20empty%20handed.%20That%20example%20is%20exactly%20what%20I'm%20trying%20to%20achieve%20with%20our%20internal%20classified%20listings.%20Any%20guidance%20you%20can%20provide%20is%20greatly%20appreciated!%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-278489%22%20slang%3D%22en-US%22%3ERe%3A%20Building%20immersive%20user%20experiences%20with%20SharePoint%20view%20formatting%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-278489%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F98%22%20target%3D%22_blank%22%3E%40Chris%20McNulty%3C%2FA%3E%26nbsp%3BNice%20Feature!%20Is%20the%20view%20formatting%20supported%20in%20Sharepoint%202019%3F%20Just%20asking%20as%20this%20will%20be%20a%20kill%20feature%20to%20sell%20the%20product.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-288532%22%20slang%3D%22en-US%22%3ERe%3A%20Building%20immersive%20user%20experiences%20with%20SharePoint%20view%20formatting%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-288532%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F98%22%20target%3D%22_blank%22%3E%40Chris%20McNulty%3C%2FA%3E%26nbsp%3BWhat%20are%20the%20settings%20to%20avoid%20rendering%20a%20multi%20line%20rich%20text%20field%20with%20all%20the%20html%20tags%3F%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-326629%22%20slang%3D%22en-US%22%3ERe%3A%20Building%20immersive%20user%20experiences%20with%20SharePoint%20view%20formatting%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-326629%22%20slang%3D%22en-US%22%3E%3CP%3EPost%20failed%20then%20when%20refreshed%20this%20was%20the%20wrong%20thread%20and%20I%20have%20no%20option%20to%20delete%20-%20please%20ignore...%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-333338%22%20slang%3D%22en-US%22%3ERe%3A%20Building%20immersive%20user%20experiences%20with%20SharePoint%20view%20formatting%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-333338%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F262314%22%20target%3D%22_blank%22%3E%40wellisi%3C%2FA%3E%2C%3C%2FP%3E%3CP%3EYou%20can%20use%20multiple%20conditions%20by%20using%20%22%26amp%3B%26amp%3B%22.%3C%2FP%3E%3CP%3EExample%3A%26nbsp%3B%3Dif(%5B%24City%5D%20%3D%3D%20''%20%26amp%3B%26amp%3B%20%5B%24State%5D%20%3D%3D%20''%20%26amp%3B%26amp%3B%20%5B%24ZipCode%5D%20%3D%3D%20''%2C%20'none'%2C%20'block')%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-354047%22%20slang%3D%22en-US%22%3ERe%3A%20Building%20immersive%20user%20experiences%20with%20SharePoint%20view%20formatting%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-354047%22%20slang%3D%22en-US%22%3E%3CP%3EIs%20it%20possible%20to%20format%20a%20view%20using%20JSON%20based%20on%20a%20Yes%20%2F%20No%20Column%20in%20SharePoint%20so%20that%20you%20only%20see%20current%20items%20in%20a%20view.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAlso%20can%20use%20this%20view%20as%20a%20look%20up%20in%20another%20SharePoint%20list%20when%20you%20add%20from%20existing%20site%20columns%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20am%20not%20familiar%20with%20JSON%20so%20any%20guidance%20would%20be%20very%20much%20appreciated%2C%20or%20an%20example%20of%20the%20script%20to%20use.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThank%20you%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EClaire%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-369782%22%20slang%3D%22en-US%22%3ERe%3A%20Building%20immersive%20user%20experiences%20with%20SharePoint%20view%20formatting%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-369782%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F98%22%20target%3D%22_blank%22%3E%40Chris%20McNulty%3C%2FA%3EI%20see%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F900%22%20target%3D%22_blank%22%3E%40Jeffrey%20Thorpe%3C%2FA%3E%20reply%20on%20the%20syntax%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3Dif(%5B%24something%5D%20%3D%3D%20''%20%26amp%3B%26amp%3B%20%5B%24somethingElse%5D%20%3D%3D%20''%2C%20blah%2C%20blah)%20but%20I%20just%20tried%3C%2FP%3E%3CP%3E%3Dif(%5B%24something%5D%20%3D%3D%20''%20%7C%7C%20%5B%24somethingElse%5D%20%3D%3D%20''%2C%20one%20is%20blank%2C%20one%20is%20blank)%20and%20that%20doesn't%20work%20as%20expected.%3C%2FP%3E%3CP%3ECan%20you%20guys%20point%20to%20a%20COMPLETE%20syntax%20for%20the%20complex%20conditionals%3F%3C%2FP%3E%3CP%3EJust%20to%20complete%20this%2C%20I%20also%20tried%20the%20or(%20thisone%2C%20thisotherone)%20syntax%20and%20that%20didn't%20do%20it%20for%20me%20either.%3C%2FP%3E%3CP%3EHere's%20a%20more%20complete%20example%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%3E%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%22display%22%3A%20%22%3Dif(%5B%24Personal_x0020_Contact%5D%20!%3D%20''%20%26amp%3B%26amp%3B%20%5B%24Personal_x0020_Contact.email%5D%20!%3D%20%40me%2C%20'none'%2C%20'flex')%22%20%7D%20%20%2F%2F%20works%0A%0A%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%22display%22%3A%20%22%3Dif(%5B%24Personal_x0020_Contact%5D%20%3D%3D%20''%20%7C%7C%20%5B%24Personal_x0020_Contact.email%5D%20%3D%3D%20%40me%2C%20'flex'%2C%20'none')%22%20%7D%20%20%2F%2F%20doesn't%0A%0A%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%22display%22%3A%20%22%3Dif(or(%5B%24Personal_x0020_Contact%5D%20%3D%3D%20''%2C%20%5B%24Personal_x0020_Contact.email%5D%20%3D%3D%20%40me)%2C%20'none'%2C%20'flex')%22%20%7D%20%20%2F%2F%20doesn't%0A%0A%0A%3C%2FPRE%3E%3CP%3EI%20can%20see%20how%20the%20%7C%7C%20might%20not%20be%20the%20correct%20syntax%2C%20but%20the%20OR%20should%20work%2C%20right%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EBTW%2C%20these%20are%20not%20meant%20to%20be%20identical%20logic%20--%20just%20examples.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%3E%26nbsp%3B%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1844276%22%20slang%3D%22en-US%22%3ERe%3A%20Building%20immersive%20user%20experiences%20with%20SharePoint%20view%20formatting%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1844276%22%20slang%3D%22en-US%22%3E%3CP%3EIs%20this%20(view%20formatting)%20coming%20anytime%20soon%20on%20Sharepoint%202019%20(On%20premise)%3F%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
Version history
Last update:
‎Sep 07 2018 02:13 PM
Updated by: