Using Lookup Value in a JS Link Context - SP2013 Foundation

Question

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.

Answer 1

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'];