Category Archives: SPC14

Client-Side Rendering (CSR) demystified – Slides

At SPC14 – the SharePoint Conference 2014 – I initially presented a session on Client-Side Rendering in SharePoint 2013 as implemented using JS Link through the web interface. CSR and JS Link using uploaded JavaScript files and the JS Link web part property pointed at the appropriate JavaScript files – to be differentiated from JS Link baked into managed code.

The recording and slides for the SPC session are available here – on Channel9: http://channel9.msdn.com/events/SharePoint-Conference/2014/SPC318

This content has also since been presented (in slight variations of the original) at a few SharePoint Saturday events.

JS Link – Highlighting a Row with CSR

One conditional formatting scenario in SharePoint 2010 and SharePoint Designer 2010 was to highlight a row in a list view based on a rule: data within the item/row. SharePoint Designer 2013 unfortunately does not have the same design view available, so we need to use some relatively simple code to get the same results. This article discusses one method to get the same results using SharePoint 2013 with Client-Side Rendering (CSR) and the JS Link web part property.

Referring back to a few of my other posts you can get an idea of the general approach using CSR here:

When creating the JavaScript file this time we aren’t doing any Field or Item overrides, but we are using the PostRender functionality:

OverrideCtx.OnPostRender = {

As the name describes, we’re tweaking the page output after the rest of the page has been rendered. Using Field overrides we could alter the formatting of text, but not cells and wouldn’t have access to the row either. Using the Item override we could build the row from scratch and highlight the row, but it would take a lot more work rebuilding the view when we can just use the PostRender method to tweak the existing view.

I won’t get into all the JavaScript details but want to highlight what’s important to replicate this functionality on your own. The code essentially steps through each item/row in the table and runs the logic on each item.

There are only a few snippets you need to customize to fit your scenario:

if (listItem.Priority == “(1) High”) {

The code above is your condition / rule. ‘Priority’ is the column you’re checking the value on – remember that ‘Priority’ is the internal name of the column. You can use any column that’s included in the view for your rule criteria.

row.style.backgroundColor = “rgba(255, 0, 0, 0.5)”; //red

This (above) is setting the row background color. You can set whichever color you need. You can have multiple rules checking different rows and applying various colors if you wish.

OK! Once the JavaScript is written and uploaded to the site (see other posts for details) and the JS Link property is set, if everything is working the list should now show a highlighted row for data that matches the rule:

Using the PostRender approach makes highlighting an entire row pretty easy. If you wanted to highlight a specific cell, it would be possible but would take some more code (we’ll show that another time) to get the right column selected. It’s not as easy as just calling out the column/field name. Depending on what you’re trying to accomplish on the cell/field level, that kind of change might be easier using the Field override.

Thanks again to Jon Campbell (MS), Raymond Mitchell and Phil Jirsa for hammering through much of the JavaScript details on this one. Jon clued us into some of these JS Link innerds back when he was on the SharePoint team. 🙂

JS Link – CSR View Conditional Formatting

This post builds on the JS Link – CSR Simple View Field Formatting post.

If you can format a single field as was done in the previous example, it’s not a big step from there to using conditional formatting.

In SharePoint Designer (pre-2013) one of relatively easy yet powerful features was conditional formatting – the ability to dynamically change how content was displayed based on rules. In the last post we went over how to do simple formatting, in this post we’ll review how to incorporate some simple rules or conditions.

In the previous example we bolded everything in the Issue Status field.

In this example we’ll ‘conditionally’ select which items are bolded based on data values for each item.

We’ll start with a couple of individual fields and go from there. For this example and similar to the last post, I created a page in the Site Pages library and added the Office Issues web part to the page. I’ll be setting the JS Link property of the web part here in a few steps.

In this post we’re adding three concepts:

JavaScript – Calling a function.
If you are a JavaScript developer this concept isn’t really even worth mentioning. If you are not a developer, we’re moving the code around a little bit to keep it organized, easier to read, etc…‘Status’:{‘View’: ConditionalStatus},
In this line rather than setting the value of the field outright like we did with simple field formatting, we’re calling a function ‘ConditionalStatus’ where addition work is being done.
Checking for the ‘condition’ or rule.
Without getting into all the JavaScript details, what we’re doing in the function is checking the value of the ‘Issue Status’ field and either making the contents bold, or leaving them in the default format.if (ctx.CurrentItem.Status == “Active” ) {
Building the HTML for what is displayed or rendered in the web part on the page.In this example we’re just using a the HTML tags necessary to bold the content being displayed. You could use virtually any HTML or CSS you wanted when it comes to formatting the data:ret = “<b>” + ctx.CurrentItem.Status + “</b>”;
You should also note the way we set up the data. The HTML and field data need to be built into a string – which is different than the way we did it in the previous post.

The full sample code can be found HERE.

The completed file is then uploaded to your chosen location: Master Page Gallery in this case. The web part JS Link property is configured to point to your JavaScript file:

~site/_catalogs/masterpage/[yourFileName].js

Notes:

You are not limited to pairing the conditional field with the field that is custom rendered.
If Issue Status is ‘Active’, bold the Status field…
You can just as easily define a rule for the Title field to check the value of the Issue Status field.
If the Issue Status field is ‘Active’, bold the Title field…
You can also combine rules into more complicated criteria
If Issue Status is ‘Active’ and Priority is ‘High’, then bold the Title field…

Rather than customizing how each field is displayed separately, you can use a different override – the Item override – to customize each field or how the entire item is displayed. This will be covered in a separate post.

SPC14 MySPC, Sessions and Schedule

SPC14 is going to be pretty darn cool. Looking at the sessions and how things are going to be organized is amazing. Microsoft is doing a great job integrating Yammer into the mix for this conference.

If you haven’t already, sign in to MySPC and then link your Yammer account to MySPC. Once you’ve gotten into the SPC 2014 network in Yammer, you’ll be able to search by session numbers to find session presentation information, slide decks, related links and files, etc. The Yammer network integration and ‘second screen’ experience is going to change how you experience the conference – before, during and after the event.

Be sure to check out the sessions you’re interested in on the Yammer network to properly set expectations for what you’re going to see during the presentations.

Here’s information about my session:
#SPC318 – Client-Side Rendering (CSR) demystified
MySPC Link | Yammer Link

It is a developer session and I will be talking about JavaScript code that applies to the web interface, specifically list views but also touching on forms. From a practical viewpoint the content I’ll be covering can be used by what I would call power users, citizen developers, etc. –> folks comfortable tweaking HTML, CSS and a little JavaScript given some guidance.

There’s more information available on the Yammer page. Log on, ask questions, participate in the conversation and I’ll see you on Tuesday!