How to display additional fields from Lookup table with JsLink
-
06-01-2021 - |
Domanda
I have a list (Jobs) with a lookup field (Market) to another list (Markets) which contain the Market details (city,state,zip).
In the View display, I want to show the Market name from Jobs as well as the additional fields from Markets.
Is what I'm trying to do, doable in this way?
This is what I have so far...
var itemCtx = [];
itemCtx.Templates = {};
itemCtx.Templates.Fields = {
'JobTitle': {
'View': TitleToLink
},
'Market': {
'View': MarketNoLink
},
'Market_x003a_Office_x0020_City': {
'View': locationTemplate
},
'Market_x003a_StateLU': {
'View': locationTemplate
}
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(itemCtx);
function MarketNoLink(ctx) {
var market = ctx.CurrentItem.Market[0].lookupValue;
var city = ctx.CurrentItem.Market_x003a_Office_x0020_City;
var state = ctx.CurrentItem.Market_x003a_StateLU;
console.log(market);
var newMarket = "<span class='text-capitalize'>" + market.toLowerCase() + "
</span>";
newMarket = newMarket + "<div>" + city + ", " + state + "</div>";
//"<span class='custWidthField'>"+item.Market[0].lookupValue+"</span>";
return newMarket;
}
function locationTemplate(ctx) {
var city = ctx.CurrentItem.Market_x003a_Office_x0020_City;
var state = ctx.CurrentItem.Market_x003a_StateLU;
return "<span>" + city + ", " + state + "</span>";
}
Soluzione
If the City and State are coming back as undefined, make sure they are included in the view that your JSLink is being applied to. If they are not included in the view, they will return undefined.
Hope that helps!
Tony
Altri suggerimenti
Which bits of this are working for you? I've tested the code and it works for me
var itemCtx = [];
itemCtx.Templates = {};
itemCtx.Templates.Fields = {
'JobTitle': {
'View': "jjjj"
},
'Market': {
'View': MarketNoLink
},
'Market_x003a_Office_x0020_City': {
'View': locationTemplate
},
'Market_x003a_State_x0020_UI': {
'View': locationTemplate
}
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(itemCtx);
function MarketNoLink(ctx) {
var market = ctx.CurrentItem.Market[0].lookupValue;
var city = ctx.CurrentItem.Market_x003a_Office_x0020_City;
var state = ctx.CurrentItem.Market_x003a_State_x0020_UI;
console.log(market);
var newMarket = "<span class='text-capitalize'>tttt" + market.toLowerCase() + "</span>";
newMarket = newMarket + "<div>cccc" + city + ", " + state + "</div>";
//"<span class='custWidthField'>"+item.Market[0].lookupValue+"</span>";
return newMarket;
}
function locationTemplate(ctx) {
var city = ctx.CurrentItem.Market_x003a_Office_x0020_City;
var state = ctx.CurrentItem.Market_x003a_State_x0020_UI;
return "<span>" + city + ", " + state + "</span>";
}
It seems you haven't added city and State column in the view.Make sure columns used in code are selected in view also.