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.
    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
    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.

GitHub Repo – https://github.com/JasonDunbar/SharePoint-CSR-TS

Enjoy!

Never miss an update by following us and subscribing to our monthly newsletter!

Summary
SharePoint Client Side Rendering in Typescript
Article Name
SharePoint Client Side Rendering in Typescript
Description
Here we present a starting point for client side rendering using Typescript.
Author
Publisher Name
Atos Consulting
Publisher Logo
Jason Dunbar

Jason Dunbar

Jason is a Microsoft evangelist with many years experience as a SharePoint Architect.
Jason Dunbar

Leave a Reply

Your email address will not be published. Required fields are marked *