Site icon @WonderLaura

SharePoint Conditional Formatting

228-image_ee6d8804-8896-484f-a893-cb5aa3fe6b86_7725B0D1.png

In SharePoint 2013 and Office 365, there is no more design view in SharePoint Designer, and of course InfoPath is slowly being depreciated between now and 2023.  Without these tools, how do we go about creating business solutions easily like we have been doing for years?  I’m not a programmer, and I know that most of my audience here… you’re not programmers either.  Well, there’s this thing called JSLink that was introduced in SharePoint 2013.  It is another tool we can use to create fairly simple conditional formatting and lots of other formatting on our forms and views… except it entails JavaScript.  Some of it is so simple that even *I* can do it.  I found a ton of blog posts  where developers (a lot even friends of mine) have been blogging about cool capabilities and tricks for a couple of years now.  The thing is, the people who read these blogs are also developers, so that’s who they’re tailored to.  Most of them don’t bother stating the basics like “what is a JS file and where do I put it?”, because their readers already know this stuff.

In this post, I will show you, the non-developers how to use JS Link, and some extreme basics about how it works.  Once you are armed with this knowledge and you want to research it further, you will better be able to translate what the developers are writing and maybe be able to use it.

Here we go, and remember that I am not a programmer and I don’t know anything technical, I’m just figuring it out as I go.  This blog post was my inspiration.

Okay, I’m going to use a super simple example here, because mostly what I’m demonstrating is not the script language and how to program, but how to get JSLink actually working in your environment.  Again, this is really cool to me, because it allows us to do conditional formatting in views and forms without the need for SharePoint Designer or InfoPath!  The example is a SharePoint list of patients in a hospital.  There is a column called “Progress Level”, and their level is either “Good” or “Bad”.  Very simple.  I want to show the good ones with green text and the bad ones in red.  Actually, in order to demonstrate an image in conditional formatting versus a text color, the good ones will show in green text, and the bad ones will show a red icon, like this:

So here are the steps to do this:

  1. Create a custom list with a choice column in it called Progress.  Make the two choice options Good and Bad.  When you create this column, make sure you call it Progress, and you’re not just renaming some other column and calling it that.  This is important to making it work correctly.
  2. Insert this new list on your homepage or some page on your SharePoint site, as a web part, and make sure the Progress column is showing.
  3. Download this file to your computer and extract the zip.  It’s just a text file, but you’ll need to save it as a .JS file.  See, I removed the .TXT and changed the Save as type to All Files.
    PatientList.js
  4. Download these image files to your computer:    Go to the root of your site collection, and to the default Library called Site Assets.  Upload these images to it.  The JavaScript file will reference that as the location of the indicator.
  5. If you have access to the root level of your site collection, go there and go to Site Settings.  In the Web Designer Galleries section, click Master Pages.  Then click the Display Templates folder.
  6. In this library, go to the Files tab of the ribbon, click the Upload Document button, pick your JS file you downloaded in step 3, and choose Javascript Display Template as the content type when prompted to fill in metadata.
  7. Here is what you are prompted with, and what to fill in, and click SAVE.
  8. Here are what some of the settings mean:
    Target Control Type:
    View – a view in a list of multiple items
    Form – a form that users are filling out, such as dispform/editform/newform.
    Field – just a single field, although I can’t find any references that really explain what this one is for and when it would be used.Standalone: Every reference I’ve seen says to set this to Override, but no one says what the purpose of the other option (Standalone) would be.

    Target Scope: This is the URL relative to the site collection.  So here I put a / because I want this JS file to be available to use anywhere in the site collection.  If I only wanted to be able to use this code on a sub-site called “IT”, I would type /IT in this box.

    Target List Template ID:  The list in my example is a custom list (see step 1), and the code for a custom list is 100Here is a list of a bunch of other codes for the other list types.  Scroll down to the section called Type, to see the long list of codes.  I know it says 2010, but I can’t seem to find a list of updated codes for the latest version.  There are only one or two new list types in 2013, and the rest are going to be the same.

    If you’ve got your file uploaded now, you can skip to step 12.

  9. If you don’t see the JavaScript Display Template at step 4, or if you don’t have access to the root of the site collection, here are your different instructions instead of step 4.  Create a document library on your site, and name it whatever you want.  I’m just calling mine “Test Files”.  In the Library Settings, go to Advanced Settings, and change Allow management of content types to YES.
  10. On your library settings page, in the content types section, click Add from existing site content types.  Choose JavaScript Display Template, add it, and click OK.
  11. Go to step 6.
  12. Anyway, now that your JS file has been uploaded, you’ll need the URL to it.  In the Files tab of the ribbon, click the View Properties button for this JS file you just uploaded.  Right click on the name of the file and click Copy Shortcut.
  13. Now that you have the URL to the JS file, remember that web part from step two?  Go to that web part in the browser, and open the web part properties toolpane.  Expand the Miscellaneous section (more on that in my other post).  Paste your URL in the JS Link box.  Notice that when you save the web part, nothing magical happens.  Go back into the web part properties and notice that the URL is now showing as relative, like since my library is “Test”, it changed the URL to /Test/PatientList.js 

    You need to put the ~site at the beginning, as shown here.  If your JS file were being stored in a library at the root of your site collection, and you were referencing it from web parts in sub-sites, you would use ~sitecollection instead.

Now, save your page, and your web part looks like that that first screenshot (at least the progress column does).  At step two, I instructed you to put your list on a page as a web part, but if you want to you can just go to any regular view of your list, click the (Settings) gear at the top right and click Edit Page.  From there you can do step 13.

9/29 update:  I see some confusion out there around this last step of using the link to the JS file.  Please refer to a seperate blog post I wrote called SharePoint URL Basics.  This will help you understand how to obtain the link to your site.  In my example screenshot above, “Test” is a library in my site, and PatientList.js is a file in that library.

Wes Preston has a great blog, with a lot of posts about JS Link, and here’s a great “primer” that he wrote about it.  There are also hundreds of other blog posts out there about JS Link.

http://www.idubbs.com/blog/2012/js-link-for-sharepoint-2013-web-partsa-quick-functional-primer/

I’ll get into dissecting the syntax in another post.  In the meantime, feel free to dig in and see how the conditional formatting works, and browse the plethora of posts about it.


Exit mobile version