Column Formatting Shortcut
Column formatting on SharePoint Online is an excellent way to make your list or document library more visually appealing by manipulating how your data is displayed. This can help you do things like conditional formatting or key performance indicators in your lists and libraries. Modern SharePoint leverages simple JSON (JavaScript Object Notation) objects, which will draw elements when a field is displayed and apply the styles as defined in your JSON object. In this article, I will cover a specific use case that we implemented for one of our clients using column formatting on SharePoint Online (Modern Experience). Before we dive into the solution, there are two essential prerequisites to help you perform the process yourself.
- Please refer to this article to get familiar with the syntax from essential to advanced column formatting, including logical operands.
- Download SP formatter (a chrome extension), which provides valuable assistance in constructing your JSON code. By clicking on the hyperlink mentioned above, you will be prompted to add the attachment. Click on the “Add to Chrome” button. Once you have your extension installed, you will see the SP Formatter Icon pop on the top right. Click to enable it.
Use Case:
- All uploaded documents need to open in a new tab with a display view instead of default edit mode.
Step 1: Navigate to the “Name” Column in your document library.
Step 2: Follow the highlighted clicks below to construct the JSON object.
Step 3: Enable enhanced column formatter
Step 4: Paste below JSON, removing my notations in brackets.
{
“$schema”: “https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json“, (load JSON schema for SharePoint Online only, use this schema for SP2019: https://developer.microsoft.com/json-schemas/sp/v1/column-formatting.schema.json)
“elmType”: “a”, (wrap current field with <a> tag)
“txtContent”: “@currentField”,
“attributes”: { “target”: “_blank”,
“href”: “=if(indexOf([$ContentTypeId], ‘0x0120’) >= 0, ‘?id=’ + [$FileRef], @currentWeb + ‘/_layouts/15/Doc.aspx?sourcedoc=’+ [$UniqueId] + ‘&action=View’)”
}
} (check if it is a folder, if yes –> open in a default mode; otherwise, open it in a Preview mode)
Step 5: Click “Save,” and you have overwritten the default edit mode behavior of a document in a document library.
After clicking on a document name, it opens in a new tab under a display mode. The outcome should look like this:
Are you stuck with an outdated intranet or digital workplace?
Klarinet Solutions specializes in enhancing system performance, optimizing user experience, and developing streamlined processes that support business objectives. To find out more about how we can help you optimize SharePoint, O365, or PowerApps, please contact our solutions delivery team or reach us by phone (866) 211-8191.
