2

I am tasked with styling some lists for our Intranet Home Page. While I was fairly capable of this in SharePoint 2010 using Data Views and XSLT, I am trying to learn the new (and I think better) way using CSR. The documentation is still sparse on CSR but I found a tutorial that allowed me to take a list of events and inject my own classes which I styled with CSS and it worked well. Before I begin the code I will point out that the column Category was initially misspelled when created and therefore the Field Name has to keep the misspelling. This is that JS file:

(function () {
    var itemCtx = {};
    itemCtx.Templates = {};

    itemCtx.Templates.Header = "<div id='corp_cal' class='corp_web_part'><h1>CORPORATE <span class='thickTtl'>EVENTS</span></h1><div class='ewp_inner'>";
    itemCtx.Templates.Item = ItemOverrideFun;
    itemCtx.Templates.Footer = "</div></div>";

    itemCtx.BaseViewID = 1;
    itemCtx.ListTemplateType = 100;

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(itemCtx);
})();

function ItemOverrideFun(ctx) {
    var _calID = ctx.CurrentItem.ID;
    var _calEvent = ctx.CurrentItem.Title;
    var _calDate = new Date(ctx.CurrentItem.Event_x0020_Date);
    var _calLoc = ctx.CurrentItem.Location;
    var _calCat = ctx.CurrentItem.Caetegory;
    var _calSponsor = ctx.CurrentItem.Sponsor;
    var options = { weekday: "long", year: "numeric", month: "long", day: "numeric" };

     var retBloc = "<div id='listitem-" + _calID + "' class='cal_container'>";
     retBloc += "<table style='width:100%;'><tr><td style='width:20%;' valign='top' align='center'>";
     retBloc += "<img src='/SiteAssets/" + _calCat + ".png' />";
     retBloc += "</td>";
     retBloc += "<td style='width:80%;'>";
     retBloc += "<span class='cal_date'>" + _calDate.toLocaleDateString("en-us", options) + "</span>";
     retBloc += "<hr>";
     retBloc += "<span class='cal_title'>" + _calEvent + "</span>";
     retBloc += "<br>";
      if(_calLoc){
         retBloc += "<span class='cal_body'>Location: " + _calLoc + "</span><br>";
     } // end if
     retBloc += "<br></td></tr></table></div>";

    return retBloc;
} // end function

Again, the code above WORKS!

However, as I worked through my tasks, I realized that the Categories were being reused through the Intranet so I decided to create a separate Custom List of just the categories and use a lookup field to control user data entry. Since I couldn't edit an existing column into a lookup, I had to create a new column that was the lookup named Taxonomy.

In my code above I tried to re-assign the _calCat variable to the lookup field and either get undefined or an error. The name of the field in Taxonomy that I need is Title so I have tried these:

var _calCat = ctx.CurrentItem.Taxonomy;
var _calCat = ctx.CurrentItem.Taxonomy.Title;
var _calCat = ctx.CurrentItem.Taxonomy['Title'];

Is there a way to grab the value of a lookup field or will I have to leave it as a stand-alone field in several lists and use drop-down selects to protect data entry?

I would also appreciate any links to resources which will help me learn this CSR branding.

Thanks in Advance.

  • Out of interest did you do something like an alert statement to see what the variable holds? (You can use the "debugger;" statement in your JavaScript file and then use google chrome to check it out using developer tools and a variable watch so you know what you are working with...? – Wonderboy Jan 30 '14 at 15:02
  • I used console.log(ctx) in the ItemOverrideFun and the objects were logged but there were seemingly thousands of lines of info output which I couldn't fathom. I tried to alert(ctx) but no alert showed. – jgravois Jan 30 '14 at 15:23
  • I added debugger; and set a variable watch on ctx. Taxonomy wasn't listed in the FieldSchema – jgravois Jan 30 '14 at 15:35
  • Make sure Taxonomy is actually in the view (edit the view). If it isn't there, it won't be in the context. – Wonderboy Jan 30 '14 at 21:18
  • Once you have, the first statement in your list of three should be the correct one – Wonderboy Jan 30 '14 at 21:19
3

This is great! I'll re-iterate what I wrote here so it can get accepted, thanks!

Insert a javascript line "debugger;" into your code so you can set a breakpoint when viewing it in google chrome.

There, you can set up a watch on the ctx and ctx.CurrentItem variable so you can see what you are working with.

With regards to what fields are available, they must be available in the view, so, you must edit the view (select it from the ribbon menu) to include that column. This will make it appear in the view, and so, you can then access it from the ctx.CurrentItem

Access the CurrentItem as you did before (thanks for your feedback)

var _calCat = ctx.CurrentItem.Taxonomy[0]['lookupValue'];
  • Thanks, I couldn't get it to work until I added the lookup to the view! – kitsu.eb Jan 23 '18 at 23:57
  • Ktsu.eb --- This would make sense. Without putting the data on there you couldn't do a lookup... :) – Wonderboy Apr 16 '18 at 4:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.