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.


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)

Work Management in SharePoint 2016



Hi Folks,

As you all remember the well known productivity feature Work Management Services in SharePoint 2013. Well, let me drop the bomb. Work Management Services is no longer with us in SharePoint 2016. As Microsoft published in September 2014, Tasks (Work Management) got removed from Office 365. I could not find the official announcement anymore, but it is referenced here (The “Sync to Outlook” button and the “Tasks” link are missing in SharePoint Online)

As you all noticed earlier this month, Microsoft made SharePoint 2016 RTM officially available to download and trial. Central Administration

I noticed that Work Management Service got removed from the SharePoint 2016 Central Administration > Manage Service ApplicationsNew menu.


So I tried PowerShellWork Management PowerShell

Here is the result. I did not find any official record, and it is not in the What’s deprecated or removed from SharePoint Server 2016 list (This list is dated March 11, 2016 and it applies to the SharePoint 2016 Preview).

So in case you relay on Work Management Service in SharePoint 2013, be warned that there is no more in SharePoint 2016. It will properly be integrated in Exchange Server or maybe there is going to be a Planner on-premise version coming up.


SharePoint Newsfeed Insights

Newsfeed InsightsOne of my clients who is using SharePoint 2013 Sitefeeds extensively in his new social intranet asked me to build ‘something’ to get some insights out of the Social feeds.
So I went and build a little demonstration just to get the following insights out of a SharePoint Site Newsfeed.

  • total number of posts
  • total number of replies
  • total number of likes

I wrote the following peace of JavaScript code to get to the JSON response of a Newsfeed. From there it is just a matter of digging through the structure of the data object.

Here are a couple of examples on what to find were in the JSON Response

Total number of posts

number of replies of a single post

number of likes of a single post

number of likes of a single reply of a post

Here is the complete JavaScript code of my demo. You can use it in SharePoint WebParts, Add-Ins, Apps, or just put the js file in the Site Assets library and use it in a CEWP (Content Editor Web Part)

There is also a really good MSDN documentation on social feeds in SharePoint I want to share with you. https://msdn.microsoft.com/en-us/library/office/dn155789.aspx


I updated the script to be able to get more than the default 20 threads.
You can use the ‘MaxThreadCount’ Property of the feed to get more threads. I set it in the example to feed(MaxThreadCount=10000) to get up to 10000 threads back. A thread is a post in the newsfeed. This does not count for Replies.

Color palettes and fonts in SharePoint 2013

Today I want to talk just a little bit about designs in SharePoint 2013. You should know that I am not one of the greatest Web Designers and I believe I was never meant to be one of them. But Microsoft made it very easy to get your own corporate look and feel in SharePoint 2013 by just adjusting the color palettes and fonts. It’s not a full-blown design but its maybe just right for some of you.

But still it was just a bunch of hexadecimal color codes in an XML formatted file which looks like the following.

And to be honest I do not see the colors behind a six-digit hexadecimal code … yet!
And I think I want to keep it like that.

But today, a dear colleague of mine showed me how easy it can be to get started in less than 10 minutes when you have the right toolset which in this case is provided by Microsoft itself.

Here is what he showed me:

Download the SharePoint Color Palette Tool from the Microsoft Download Center here.


The tool is easy to handle and self-explaining. (Feel free to contact me if you have questions)

You can use one of the many tools out there to create a color scheme.
We used http://paletton.com in this example.

Just put the hexadecimal color codes into your SharePoint Color Palette and save the file.

Now you can upload the *.spcolor file to SharePoint manually or you use a SharePoint App to deploy the file to SharePoint. Chis O’Brien explained the second way in his blogpost SP2013 host web apps: provisioning files (e.g. master pages) to the host web.

Unfortunately there is no editor for for the *.spfont files. But you can use your own fonts in SharePoint 2013 by providing a custom .spfont file. For more Information about both file types take a look at the MSDN article Color palettes and fonts in SharePoint 2013

SharePoint 2013 URL Trailing Slash causes Video to disappear

It was like every other Monday in my work life.
I got a call that started like this: “SharePoint is not working…”
Well…after 10 minutes I got a more precise description of the problem and I found the issue kind of funny and share worthy.


We developed a Web Part that aggregates News using SharePoint Search.

Issue Description

A User created a new “News Article Page” and added a Video Web Part to it. Everything was working fine. This new page was picked up by the SharePoint Search Crawler and displayed in the Web Part we created. When a user clicked on the Link to the News Article Page the page was rendered fine except that the video was gone.


Obviously 😉 I first compared the two URLs and I found a trailing slash (/) in the URL that came from the Web Part. When I removed it everything worked fine. The “Path” Attribute you get from the search result has always a slash (/) at the end. I just fixed the source code by adding a .TrimEnd(‘/’) to the URL String and everything worked great.