ECS19 - Chris Kent - List Formatting in Office 365 and SharePoint 2019

LIST FORMATTING IN OFFICE 365 AND SHAREPOINT 2019
Chris Kent
O365 Practice Lead
DMI

♡ DIAMOND AND PLATINUM SPONSORS ♡

theChri sKent.c omaka.ms/sppnp
@theChrisKent
theChrisKent.com
Office 365 Practice Lead
Indianapolis, IN

GOALS

COLUMN
FORMATTING
What | Why | How

What | Why | How
VIEW
FORMATTING

RESOURCES
Samples | Guidance | Tools

The Modern Listview
• Responsive
• Fancy
• Boring
• No XSLT
• No Calculated Column
Trickery

The Modern Listview

List Formatting
Declarative
modern listview
customization
Column Formatting
View Formatting

List formatting allows you to quickly and easily
add instant meaning, visual appeal, and
dynamic visualizations directly to your lists.

Checkboxes
vs
Yes/No
Missed Due
Dates in
Red

Items Assigned
To the Current
User
Dynamic
Progress
Bars

Column Formatting
• JavaScript Object
Notation (JSON)
• Apply directly to list
fields or site columns
• Field Settings
• Format this column
menu
• Stored with the
Field
Paste
Here
O365 & 2019

Column Formatting Design Mode
Calculated Date Columns Too Calculated Yes/No Columns Too

Column Formatting Design Mode
Pre-selected
Color Classes
Adjusts for
Dark Themes
Switch to JSON

SP-Dev-List-Formatting Samples
• 50+ Sample Formats
• Instructions & Screenshots
• Copy & Paste directly from GitHub
bit.ly/LF-samples

Demo: Column Formatting

View Formatting
• Superset of Column
Formatting
• Apply directly to views
• Format current view
menu
• Stored with the View
• Overrides Column
Formats (Row Formats)
Paste
Here
Online Only

View Formatting Flavors
Row Class Row Format
• Uses additionalRowClass
• Applies class(es) to each
row
• Can be conditionally
applied
• Ignored when
rowFormatter is used
• Uses rowFormatter
• Responsible for full
rendering of the row
Online Only

Demo: View Formatting

Supported Column Types
• Calculated
• Choice
• ContentType
• Counter (ID)
• Currency*
• Date/Time
• Hyperlink
• Lookup
• Multi-Choice
• Multi-Line Text*
• Multi-Person
• Number
• Person
• Picture
• Single line of
text
• Title (in Lists)
• Yes/No
• Managed Metadata
• Retention Label
• Filename (in Document
Libraries)
Can’t Reference:
Same support applies to both Column and View
Formatting
*Apply Format through Field Settings

JSON Syntax Crash Course
• An object is a set of name/value pairs
• Objects begin with a { and end with a }
• Each name is followed by a :
• Name/value pairs are separated by a ,
{
“elmType”: “div”,
“debugMode”: false
}
Adapted from json.org

• An array is an ordered collection of values
• Arrays begin with a [ and end with a ]
• Array values are separated by a ,
{
“debugMode”: false,
“children”: [
{
“elmType”: “span”,
“txtContent”: “Yo”
},
{
“txtContent”: “ Dawg!”
}
]
}

{
“debugMode”: false,
“children”: [
{
“txtContent”: “Yo”
},
{
“txtContent”: “ Dawg!”
}
],
“style”: {
“color”: “red”,
“padding-left”: “4px”
}
}
• An array is an ordered collection of values
• Arrays begin with a [ and end with a ]
• Array values are separated by a ,
• A value can be a string in double quotes, a
number, true, false, null, object, or array

- FORMATTING -

div
span span
<div class="sp-field-customFormatter sp-field-severity--severeWarning">
<span style="padding-left:4px;" iconname="Warning" class=" css-148"></span>
<span style="padding-left:4px;">Wise Polar Bear</span>
</div>
Format JSON Rendered Column
Element Visualization
Generated HTML

View Formatting Syntax
• hideColumnHeader
• When true, the view won’t have any column headers
• hideSelection
• When true, users can’t select rows
• additionalRowClass
• Class(es) to apply to the whole row
• You can use expressions
• Only applied when rowFormatter is not specified
• rowFormatter
• Column Formatting syntax to create elements
Top level props

“elmType”: “”
• div (box)
• span (inline box)
• a (link)
• img (picture)
• button (clicky thing)
• svg (fancy picture)
• path (part of the fancy picture)
Only Required Property

Element Content
• txtContent
• Text value
OR
• children
• Sub elements
• Ignored when txtContent is specified
What’s in the Box

“attributes”: { }
Everybody
• class – CSS class(es)
• title - tooltip
• iconName – UIFabric icon
• role - accessibility
• aria-* -accessibility
a (links)
• href – where to go
• target – open in new
window or not
• rel – relationship
img
• src – image location
path
• d – path to be drawn
Directly in the element

“style”: { }
• background-color
• fill
• background-image
• border
• border-bottom
• border-bottom-color
• border-bottom-style
• border-bottom-width
• border-color
• border-left
• border-left-color
• border-left-style
• border-left-width
• border-right
• border-right-color
• border-right-style
• border-right-width
• border-style
• border-top
• border-top-color
• border-top-style
• border-top-width
• border-width
• outline
• outline-color
• outline-style
• outline-width
• border-bottom-left-radius
• border-bottom-right-
radius
• border-radius
• border-top-left-radius
• border-top-right-radius
• box-decoration-break
• box-shadow
• box-sizing
• overflow-x
• overflow-y
• overflow-style
• rotation
• rotation-point
• opacity
• cursor
• height
• max-height
• max-width
• min-height
• min-width
• width
• flex-grow
• flex-shrink
• flex-flow
• flex-direction
• flex-wrap
• flex
• justify-content
• align-items
• box-align
• box-direction
• box-flex
• box-flex-group
• box-lines
• box-ordinal-group
• box-orient
• box-pack
• font
• font-family
• font-size
• font-style
• font-variant
• font-weight
• font-size-adjust
• font-stretch
• grid-columns
• grid-rows
• margin
• margin-bottom
• margin-left
• margin-right
• margin-top
• column-count
• column-fill
• column-gap
• column-rule
• column-rule-color
• column-rule-style
• column-rule-width
• column-span
• column-width
• columns
• padding
• padding-bottom
• padding-left
• padding-right
• padding-top
• bottom
• clear
• clip
• display
• float
• left
• overflow
• position
• right
• top
• visibility
• z-index
• border-collapse
• border-spacing
• caption-side
• empty-cells
• table-layout
• color
• direction
• letter-spacing
• line-height
• text-align
• text-decoration
• text-indent
• text-transform
• unicode-bidi
• vertical-align
• white-space
• word-spacing
• hanging-punctuation
• punctuation-trim
• text-align-last
• text-justify
• text-outline
• text-shadow
• text-wrap
• word-break
• word-wrap
Nest in the style attribute
132

“customRowAction”: { “action”: “”}
• defaultClick – opens the info pane
• editProps – opens the info pane in edit mode
• share – opens the sharing dialog
• delete – opens the delete confirmation dialog
• executeFlow – launches the flow panel
Only work within button elements
(Use the style and children properties to get fancy!)
You cannot use expressions in the action property

“customRowAction”: { “actionParams”: “”}
• Only used for “action”: “executeFlow”
• Escaped JSON
• ”ID”: required
• ID of Flow to launch
• ”headerText”: optional
• Sets the text at the top of the flow panel
• ”runFlowButtonText” optional
• text of the primary button
Online Only

Live List Updates
• Formats are automatically redrawn as items
update
• Magic
• Does NOT (yet?) work in the list/library web parts
• sadness
Online Only

Demo: customRowAction

…
“txtContent”: “@currentField”
…
• Works great for simple values (text,
choice, yes/no, and numbers)
• Type is respected
• Dates should use one of the format
operations:
“toLocaleString()” – date and time
“toLocaleDateString()” – just the date
“toLocaleTimeString()” – just the time
• Always resolves to Title in view
formatting
Placeholder Tokens
• “@currentField”
• Get the current item’s
value

…
“txtContent”: “@currentField.title”
…
• Can’t use “@currentField” directly, use
dot-notation to get properties:
“@currentField.title”
“@currentField.id”
“@currentField.email”
“@currentField.sip”
“@currentField.picture”
“@currentField.department”
“@currentField.jobTitle”
• Person field props
Placeholder Tokens
value

…
“txtContent”:
“@currentField.lookupValue”
…
• Can’t use @currentField directly, use
“@currentField.lookupValue”
“@currentField.lookupId”
• Lookup field props
Placeholder Tokens
value

• Hyperlink field props
…
“txtContent”:
“@currentField.desc”
…
• Can use @currentField directly AND
“@currentField” – URL value
“@currentField.desc” - Description
Placeholder Tokens
value

…
“txtContent”: “[$Title]”
…
• Wrap internal name in [$FIELD]
• Access Person/Lookup/URL properties
in same way as with @currentField
“[$Author.email]”
“[$OtherListItem.lookupValue]”
• Other Fields (same row)
Placeholder Tokens
value

…
“txtContent”: “@me”
…
• “@me” resolves to the current user’s
email address
• “@now” resolves to the date/time
at render (doesn’t keep getting evaluated)
• Uses the browser’s timezone!
• “@me”
• “@now”
Placeholder Tokens
value

Placeholder Tokens …
“txtContent”:
“@window.innerHeight”
…
• “@window.innerHeight” resolves to a
number equal to the height of the
browser window (in pixels) at render
• “@window.innerWidth” resolves to a
number equal to the width of the
browser window (in pixels) at render
• “@me”
• “@now”
• “@window”
These do NOT update
as the window resizes
value
Online Only

“txtContent”: “@currentWeb”
…
• Same as page context webAbsoluteUrl
• Does not end with a slash
• “@me”
• “@now”
• “@window”
• “@currentWeb”
• “[$FieldName]”
Hardcoded URL
• Always works
• Not reusable across sites
Relative URL
• Reusable across sites
• URLs dependent on relative location
Online Only

“txtContent”: “@rowIndex”
…
• Evaluates to the rendered index of a
row within a view
• Independent of sorts or filters
• Starts at 0
• Alternating Rows!
• “@me”
• “@now”
• “@window”
Online Only
• “@rowIndex”

“src”: “@thumbnail.medium”
…
• Provides the URL to the thumbnail of a
file (document libraries only)
• No value for list items or folders
“@thumbnail.small”
“@thumbnail.medium”
“@thumbnail.large”
@thumbnail.<width>x<height>
“@thumbnail.100x200”
@thumbnail.<width>
“@thumbnail.150”
• Aspect ratio is maintained
• Only value of src, auto hidden when
unavailable
• “@me”
• “@now”
• “@window”
Online Only
• “@rowIndex”
• “@thumbnail”

Expressions
• Abstract Syntax Tree
(AST)
• operator/operands
• Nest additional
expressions
• Excel-style expressions
• Single line
• Combine expressions
• Online Only

Expressions
• Abstract Syntax Tree
(AST)
• operator/operands
• Nest additional
expressions
• Excel-style expressions
• Single line
• Combine expressions
• Electrolytes

Arithmetic Operators
Operator Does Examples Results
+ Adds stuff
(numbers & text)
“=4 + 5”
“=@currentWeb+‘/lists‘”
9
https://t.sharepoint.com/sites/s/lists
- Subtracts stuff “=97 - 10” 87
/ Divides stuff “=25 / 5” 5
* Multiplies stuff “=5 * 5” 25
% Modulus* (remainder) “=@rowIndex % 2” 1 or 0
cos Cosine “=cos(5) 0.28366218546322625
sin Sine “=sin(90)” 0.8939966636005579
abs Absolute Value* “=abs(-45)” 45
*Online Only

Conditional & Logical Operators
? or if if(condition, when true, when false)
< Less than “=if(1 < 2, ’cat’, ’dog’)” cat
> Greater than “=if(1 > 2, ’cat’, ’dog’)” dog
<= Less than or Equal “=if(2 <= 2, ’horse’, ’duck’)” horse
>= Greater than or Equal “=if(2 >= 3, ’horse’, ’duck’)” duck
== Equals “=if(5 == 5, ’badger’, ’hen’)” Badger
!= Not equals “=if(7 != 7, ’badger’, ’hen)” hen
|| Or “=if(1<2 || 1<0, ‘man’, ‘elf’)” man
&& And “=if(1<2 && 1<0, ‘man’, ‘elf’)” elf
This Photo by Unknown Author is licensed under CC BY-SA-NC

Conversion Operators
toString To text “=toString(45)” “45”
Number To a number “=Number(‘365’)”
“=Number(‘Wowee’)”
“=Number(Date(‘12/26/1981’))”
365
NaN
378190800000
Date To datetime “=Date(‘12/26/1981’)”
“=Date(378190800000)”
12/26/1981 12:00:00 AM
12/26/1981 12:00:00 AM
toLowerCase* Text to lowercase “=toLowerCase(‘DogFood’)” dogfood
toLocaleString Datetime to locale
text
“=toLocaleString(@now)” “5/21/2019, 2:25:12 PM”
toLocaleDateString Datetime to locale
date only text
“=toLocaleDateString(@now)” “5/21/2019”
toLocaleDateTimeString Datetime to locale
time only text
“=toLocaleDateTimeString(@now)” “2:25:12 PM”
*Online Only

Mulit-Value & Loop Operators
indexOf Character index (starting at 0)
of some text within text
“=indexOf(‘DogFood’, ‘Dog’)”
“=indexOf(‘DogFood’, ‘F’)”
“=indexOf(‘DogFood’, ‘Cat’)”
“=indexOf(‘DogFood’, ‘f’)”
0
3
-1
-1
length Number of multi-value values “=length([$MultiChoice])”
“=length(‘Some Text’)”
“=length(‘’)”
3
1
0
join Turns multi-values into text
with a separator
=“join([$MultiChoice], ‘, ‘)”
=“join([$MultiChoice], ‘|‘)”
“A, B, C”
“A|B|C”
loopIndex Current index of an iterator
(forEach)
“=loopIndex(‘personIterator’)” 2
Online Only

Demo: Operators & Tokens

Column Formatting vs Field Customizer

Customization Column Formatting Field Customizer
Conditional Formatting Supported Supported

Actions Simple actions and links (no script) Any type

Visualizations Static visualizations (HTML & Styles) Whatever!

Page Context @now, @me, @window, @currentWeb Full context!

JavaScript Nope Yep
Custom CSS Classes Nope, limited subset & inline styles Yep
Interactivity Nope Yep

JavaScript Nope Yep
Custom CSS Classes Nope, limited subset & inline styles Yep
Interactivity Nope Yep
Developer Required “No” (but also yes) Yes
Solution Deployment Anyone with Designer Permissions App/Site Catalog
• 90% of list customization use cases can be covered by Column Formatting*
• Another 5% by View Formatting*
• For everything else, use SPFx
*made up by me

List Formatting Limitations
• No Real String Operations
• No Custom Date Formats or Date Parts
• No viewbox attribute for SVG elements
• Unable to use parenthesis in style props
(except for rgba)
• No Gradients
• No image backgrounds
• Numbers are floats and you can’t round
them
• Missing ms-Grid support
• Schema discrepancies
• No localization
• List Web Part Inconsistencies & Limits
• Standard User Interface is lacking

List Formatting Awesomeness
• Quick & “easy” visualizations that
can have a significant impact
• Site Column integration
• Text based (easy source control)
• Can be applied by Site Designers
• Supported in Site Designs &
Remote Provisioning
• Great performance
• Getting better all the time
• NO Solution Package deployment
required
• List Formatter fills the UI gap

List Formatter
ListFormatter.com
Easy editor for modern listview Formatting

Final Tips & Tricks
• UI Fabric Classes
• Theme Colors
• Hover Styles
• Font Sizes & Weights
• Purge AST from your brain
• Turn debugMode off
• Write HTML 1st
• Dynamic Images
• 1000+ icons – use them!
• Test in multiple themes
• Use List Formatter
The Modern Listview

PnP SIG
SharePoint General
Development Call
• Every other Thursday,
16:00 CEST
• Recorded to YouTube
• Next call on 5/30
• Recurring List
Formatting tips & tricks
• currentWeb
• forEach, loopIndex
• Contains, StartsWith, indexOf
• Design Mode
• Alternating Row Styles
• Conditionally launching flows
• Multi-line field formats
• ContentTypes
• Custom Row Actions
• UI Fabric Classes (themed formats)
• Customizing the Flow Panel
• SVG Icons
Previous List Formatting Tips covered

thank you
questions?
THECHRISKENT.COM@THECHRISKENT
ListFormatter.com
bit.lyLF-samples
bit.ly/LF-docs

Extra stuff just for you!
• The next few slides were cut for time
• They still (mostly) have valuable content
• Reach out with any questions (@theChrisKent)
• Enjoy!

Predefined Classes
sp-field-severity--good background-color
sp-field-severity--low background-color
sp-field-severity--warning background-color
sp-field-severity--severeWarning background-color
sp-field-severity--blocked background-color
sp-field-dataBars background-color, padding, color, border-top
sp-field-trending--up text color
sp-field-trending--down text color
sp-field-quickActions font, padding (used with icons)
Use UIFabric.io color & typography classes to match theme

“attributes”: { “iconName”: “Cat” }
uifabricicons.azurewebsites.net

Design Mode Classes
sp-css-backgroundColor-
• neutralBackground (50,40,30)
• blueBackground07 (17,27,37)
• successBackground (50,40,30)
• warningBackground (50,40,30)
• blockingBackground (50,40,30)
• errorBackground (50,40,30)

Don’t Use Rich Text
• List Formatting
encodes values
• Rich text values
contain HTML
• HTML will be
encoded and
displayed

forEach
• Cannot add to Root Element
• Turns element into a template
• Repeated for each item in the array
• Creates Virtual Field
• Access using Field Syntax [$personIterator]
• Name appropriately (don’t clobber your fields)
• Can be nested
“VirtualFieldName in ArrayField”
@currentField
or
[$SomeOtherField]

loopIndex
• Zero-Based
• Position in forEach loop
• Meaningless outside of loop
• Specify the iterator name
• “=loopIndex(‘personIterator’)”
• Rhymes with PoopWindex

Scalable Vector Graphics (SVGs)
• “elmType”: “svg”
• “elmType”: “path”
• No viewbox attribute
• Makes them just VGs
• Provides lots of options, but can get confusing
• Use with care
• Dynamic SVGs using expressions in d attribute!

Bi-Weekly
SP General Development
• aka.ms/sppnp-core-sig-call
• List Formatting, PowerApps, CSOM,
PowerShell, Provisioning, Flow
• Next Call: Thursday, 2/21
Bi-Weekly
SharePoint Framework
• aka.ms/sppnp-js-sig-call
• SPFx, PnP JS Core
Monthly
Community Calls
• aka.ms/sppnp-call
• Monthly Summary
• Next Call: Tuesday, 3/12
Bi-Weekly
SP General Development
• aka.ms/sppnp-core-sig-call
• List Formatting, PowerApps, CSOM,
PowerShell, Provisioning, Flow
Bi-Weekly
SharePoint Framework
• aka.ms/sppnp-js-sig-call
• SPFx, PnP JS Core
Monthly
Community Calls
• aka.ms/sppnp-call
• Monthly Summary
• Next Call: Tuesday, 6/11

Official Blog
dev.office.com/blogs
Twitter
@OfficeDevPnP
Tech Community
aka.ms/sppnp-
community

ECS19 - Chris Kent - List Formatting in Office 365 and SharePoint 2019

More Related Content

What's hot (6)

Similar to ECS19 - Chris Kent - List Formatting in Office 365 and SharePoint 2019 (20)

More from European Collaboration Summit (20)

Recently uploaded (20)

ECS19 - Chris Kent - List Formatting in Office 365 and SharePoint 2019

Editor's Notes