Making client-side easy — Part 1
Today I’d like to get started on client-side rendering. A tutorial of sorts. If you Google JSLink, you will find the same articles over and over… conditional formatting this and progress indicators that and making fields do clever stuff.
We’re going to focus on a VERY simple tutorial using JSLink to make a SharePoint List, well, not look like a SharePoint List
The problem with most of the online JSLink tutorials is that they don’t make it simple enough for 1st-timers (the designer-integrator-getting-into-front-end-newbies-type-folk) and/or each example/coding style is very different to the previous article you just read.
Well we’re going to fast-track those out there that want to make content look good, quickly and easily without needing to know too much code. So I’ll be including a starter JSLink file in this article as well to get things moving along quickly and only focus on the parts that need to be changed so you guys can start getting some results today.
Right. Let’s begin. You’ve got a custom list. It’s got data. The list-view web part dropped onto your page looks like an Excel spreadsheet. You want to create your own layout. You want to get data from the list and put it into your own containers. But how!?
For my example I’m going to create a simple Announcements list. Columns being Title (Single line of text), Description ( Multiple lines of text) and Link (Single line of text)
And then you drop your list-view web part onto a page and it looks like this:
Trying to add CSS to the above (yes, don’t deny it, we’ve all been there at some stage of our lives) is a nightmare and can do basic styling at best.
How do we make the above list look like the wire-frame the client sent us?:
Well simple really. We have a JavaScript file. We edit the list-view web part and insert the link under Miscellaneous. Boom. Done. “Do I need to learn JavaScript?” Well yes, eventually but for now to get into the swing of things you dont need to worry too much about it, I’ll give you the JS you need and you only need to change the variable names to match your own field names. Oh and change the HTML to what you want (Heads-up, I’m using Bootstrap, so there will be Bootstrap classes in my HTML — later)
First step. Let’s create our JSLink file. Fire up good ‘ol SharePoint Designer. For this example I’m going to create a folder inside the Style Library called CSR. In that folder I’m going to create a folder called Announcements. Where you put your files is up to you. I’m going to create a .js file called Announcements.js and add the following code to it.
What the code looks like:
The only items we need to focus on are
itemCtx.Templates.Header = “Open a DIV here”;
itemCtx.Templates.Footer = “Close the DIV here”;
if (ctx.ListTitle == “List Name MUST go here”)
var _fieldName = ctx.CurrentItem.InternalFieldName;
return “Add your HTML here”;
The header and footer will open and close our main container.
The ListTitle is specified here otherwise JSLink will make ALL custom lists on the page (if you have others) try and render to the same template.
We specify our fields we want to pull through.
And then we render the HTML
Save the file, check it in. Let’s test it and see what happens. Copy the path relative to the root of the site collection you’re on. e.g.: yourdomain.com/sites/clientside/Style Library/CSR/Announcements.js.
Now edit your page and edit the list-view web part
In the edit panel open the bottom tab “Miscellaneous” and in the JSLink field add ~sitecollection + the relative url as above (/Style Library/CSR/Announcements.js)
You should have: ~sitecollection/Style Library/CSR/Announcements.js
Click OK and save the page. You should now have something like this:
Ok, so we’re not quite at that 4-block client wire-frame yet but as you can see, the JSLink file has opened a world of options for you now. Your list, your fields and your layout.
Let’s build on the above example in Part 2 where we can start adding some styling and see where that takes us.
Take Care,
Gavin
