SharePoint Client Side Rendering in TypeScript

In this short post we’re offering a Typescript implementation of SharePoint client side rendering overrides. The compiled output is a Javascript file that can be used in the JSLink property for list web parts and forms.

What’s SharePoint Client Side Rendering?

SharePoint client side rendering refers to the client side scripting that takes care of the rendering of list views, forms and behaviours. In addition, you might also implement a degree of business logic. Anyhow, let’s not go too deep into explanation – the fact that you’re here suggests you already know what it is. For those of you that are not too familiar, this is an excellent intro – https://www.codeproject.com/Articles/620110/SharePoint-Client-Side-Rendering-List-Views

How Typescript helps

For the purpose of speeding up the creation of client side rendering object creation, we’ve creaöted a small Typescript project with two distinct advantages over the traditional javascript way of doing things:

It’s modular – I’ve tried, to some extent, to keep the classes separate from one and other to improve development workflow and maintainability. Add and remove them as you need to.

Tree structure showing the Typescript class breakdown.

Intellisense! Yes, that’s right, intellisense for many of the SharePoint JSOM objects that are available for you to use.

Intellisense for in Visual Studio Code for SharePoint JSOM objects

Get the code

I’m not a developer (far from it) but I do like to familiarise myself with new concepts, that way I can better better help and advise our partners and customers. With this in mind, it’s highly likely that the more developer-minded of you out there will look at my code and shudder; and that’s fine. It is most likely far from best practice, but as I’ve already said, it’s a starting point and I hope saves time for somebody.