Column formatting SharePoint

How to use column format examples from Github

geertby Geert•Posted 16 August 2020

In the previous post we explored the usage of standard column formatting in SharePoint. The logical next step is to look at the JSON that is generated and use the Github resource SharePoint Column Formatting samples to extend the format with a bunch of examples.

Github SharePoint List Formatting Samples

The Github sp-dev-list-formatting environment contains 4 elements

For now we are going to focus on the column samples.

Start using the examples.

One of my favourite examples is the multi-person-facepile from Chris Kent who created many of the available examples. The nice thing about the example is that it can be used on any people-type-column, including Created by and Modified by. As the name suggests, it will even work when multiple people are selected, but the will never be the case for Modified by– and Created by-columns. 🙂

In SharePoint we need a library or lists containing a few documents/lines and the Modified by-column visible.

Copy the code

  1. Lets’s navigate to the multi-person-facepile example in Github
    ( sp-dev-list-formatting / Column samples / multi-person-facepile )
As you can see there is a brief description, a screenshot and some JSON code.
  1. When we click on the multi-person-facepile.json, we get to see the code.
  2. Now let’s copy the code, I personally prefer to click on “Raw” [1], hit CTRL+A to select all, followed by THE keyboard shortcut of all CTRL+C.

Paste the code

  1. With the code copied, we turn to SharePoint.
  2. We click on the triangle next to the header [1], select Column settings [2]and Format this column [3].
  3. Click on Advanced mode [4]

Almost there, now we simply have to CTRL+V our code into the advanced mode and hit the Save-button. You can even first preview the code before saving, this is really helpful in a later stage when we start writing the JSON ourselves.

Tips:

Right above the Save-button there is a link that allows you to return to the design mode (as opposed the current Advanced view), if we would return to the design view, we will loose our copied code. But even at that point we can download the code we have used.

The code can also be pasted in the old-fashioned edit column window. This is very handy if you want to apply the format on a Sitecolumn.