IF-Blueprint Blog

Tutorial: How to modify the rendering of SharePoint Site Columns

Tipp Darstellung und Funktion von Websitespalte in SharePoint mit JavaScript anpassen (4)Tipp Darstellung und Funktion von Websitespalte in SharePoint mit JavaScript anpassen (3)

SharePoint offers a variety of options for changing the appearance of columns in lists or libraries. Since SharePoint 2013, client-side rendering (CSR) has become available as a new technology to replace the standard representation with an individual design of the output via JavaScript (JSLink). In addition, complex logic can also be executed. The advantage: Since no new column type is created, such adjustments can be reset to the standard at any time without leaving dependencies in the system.

Preliminary note

In general, the creation of an individual presentation method requires certain programming skills. For our example, we provide ready-made scripts as downloads. The prerequisite for using our script is that you are a website owner.

To reuse such custom column representations, the display method should be mapped to a site column. This allows users to add the site column to their list and have the new look in their forms and lists without further configuration.

1. Create a new site column in SharePoint

Tipp Darstellung und Funktion von Websitespalte in SharePoint mit JavaScript anpassen (1)In Site Settings, in the Web Designer Catalogs category, click the Site columns link. Assign Level of competence as the column name and select Choice (menu to choose from) as the information type. Click OK to create the site column.

2. Link site column to your own presentation method

Navigate through the Site contents to the Site Assets Library. Upload the downloaded files LevelOfCompetence.js and LevelOfCompetence.css to the library. These files contain the entire source code of the own presentation method.

For the next step you need PowerShell. In this case, we use the SharePointPnP.PowerShell Commands. Customize the URL in the Link Display Method Linking.ps1 script and run the Link Display Method Linking.ps1 script to link the new Level of competence site column to your own display method.

3. Add the site column to the list

Tipp Darstellung und Funktion von Websitespalte in SharePoint mit JavaScript anpassen (2)The Level of competence site column is now available in your SharePoint site using the new display method.

Navigate to a list and open the list settings. Click Add from existing site columns in the Columns section. In the Available site columns, select Level of competence and click Add. Click OK to add the site column to the list.

4. Testing the new presentation method

Tipp Darstellung und Funktion von Websitespalte in SharePoint mit JavaScript anpassen (3)Navigate to the list view and create a new item. The Level of competence column appears in the list form with the new design.

Recommendation

It’s a good idea to create the new site column in the site collection so it can be used throughout the site collection. The example described here is a relatively simple use case, but you can also implement very complex business applications with the methodology used. If you have any questions, please contact me at any time.

Note: The German Version of this post was already published at SharePoint360.de

Our related video tutorial might help you as well. For English translation, just adjust the settings to display English subtitles or your preset language.

The Video (German with English subtitles)