When working on the development requirements related to JSLink I came across a scenario where a lookup value needed to be shown in a list view web part.
I wanted to show with the following code how to show the lookup values from a single-valued or multi-valued lookup.
Before that I would like to show the relationship between the lists I used to show the demonstration.
I have created the following two custom lists for demonstration.
The first list has the following columns.
![]()
The content in the first list will be something like:
![]()
The second list has the lookup column from the first list.
![]()
The content in the second list is like the following.
![]()
The following code will show how to get the single-valued or multi-valued lookup values and show them.
- (function()
- {
-
- var overrideCtx = {};
- overrideCtx.Templates = {};
- overrideCtx.Templates.Item = CustomPortalPageItem;
- SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
- })();
-
- function CustomPortalPageItem(ctx)
- {
- var html = "";
- html += '<div title="' + ctx.CurrentItem.Title + '"></div><div>' + GetLookupValues(ctx.CurrentItem.Test11, "lookupValue") + '</div>';
- return html;
- }
-
- function GetLookupValues(inputArry, originalColumnName)
- {
- var retHtml = "";
- if (inputArry != null)
- {
- for (var loopcnt = 0; loopcnt < inputArry.length; loopcnt++) {
- if (typeof(inputArry[loopcnt][originalColumnName]) != 'undefined' && inputArry[loopcnt][originalColumnName] != null) {
- retHtml += inputArry[loopcnt][originalColumnName];
- }
- }
- }
- return retHtml;
- }
After this it will look like the following. You can then apply beautiful HTML to it.