Making client-side easy — Part 2

We’re still trying to get to that wire-frame the client sent through, so we need to change the HTML to how we want it, create a CSS file, and call the CSS from the Announcements.js file. In my case, please note that Bootstrap3 and jQuery is already on the page.

Following on from Making client-side easy — Part 1

Let’s make a CSS file in the same directory called Announcements.css.

Edit Announcements.js to include the following code at the top of the file which calls the CSS. Be sure to change the link to your own CSS file.

Code to add:

Call Style-sheet from your JSLink file

Now edit the HTML return to contain your fields as you need them laid out. We’re trying to get to this:

So let’s modify the HTML return at the bottom of Announcements.js.

Code to add:

I’ve classed everything I need to style, so I can simply add those classes to my CSS file and they will render.

Let’s take a look at the FULL JSLink file, Announcements.js now. You should have this:

Which in turn, after saving and refreshing your page, should now give you this:

Ok awesome. We’re getting there. Now let’s add some CSS to style everything. So open the Announcements.css file and add the style you need. For our scenario I’ve added the following classes:

Save, check-in, publish all and then go to your page and refresh. In theory you should be seeing this:

Final render (Please note that Bootstrap 3 as well as jQuery are Already on the page — which is why we used the Bootstrap classes)

And there we go :)

From this:

Boring spreadsheet feel, non responsive, terrible to style

To this:

Custom Layout, put fields where YOU want them, responsive, ready for mobile

So, to wrap this up, although it may have seemed quite an effort to get here reading two articles, but at the end of the day it’s really simple.

Let’s recap:

1. Copy my Announcements.js file
2. Edit the Header, Footer, List name, Field names in the variables and change the HTML to what you need
3. Edit the list-view web part properties > Miscellaneous > add ~sitecollection/Style Library/CSR/Announcements.js (Making sure its the root relative link to your site collection Style Library after ~sitecollection)
4. Create a CSS file
5. Add styles (or copy my CSS)
6. Add code in the .js to call the CSS (Or just grab the latest version of Announcements.js)
7. Refresh page, DONE !

I hope I made this process simple enough and I also hope I didn’t over simplify, let me know your thoughts, or ask me questions regarding this specific tutorial if you have any. I’m here to help, and maybe learn a thing or two in the process from the readers as well.

Next up, I think let’s add an image, a few more records, go find a lightweight jQuery slider plugin we like or Carousel plugin maybe, and see if we can take what we already have and show you how to integrate your data with your favourite plugins.

Till the next one, cheers and take care,

Gavin