none
Modify the Lookup column onClick in Grouped view in SharePoint 2013 online list

    Question

  • Hi,

    I have a lookup column to the pages library in a SharePoint list. When user clicks on the Page title lookup column value, the page display form opens. We have a requirement, where user wants to open the page url instead of display form to page item.

    I have written jQuery code, which makes a REST call to grab the FileRef of the selected Page item and opens the url in a new tab. This is working fine for all the views except the grouped view.

    There is a ExpCollGroup method attached to the row which makes a REST call to bind the items for a grouped item. I had added the following code to execute my code after the items are loaded on the page:

    var defaultExpCollGroupMethod = ExpCollGroup;
    ExpCollGroup = function(){
    	defaultExpCollGroupMethod.apply(this, arguments);
    	setTimeout(CreateDynamicPageLink(), 2000);
    }

    This code is not working for me, because the items are getting loaded after my custom method call. Since ExpCollGroup is making an asynchronous REST call, it is an expected behaviour.

    Is there any way to achieve this in grouped list view?


    Regards, Shruti


    Thursday, March 30, 2017 3:36 PM

Answers

  • Hi Shruti,

    I would recommend you to use JSLink instead for changing the lookup field.

    Please check the demo for the JS file below:

    (function () {
        var overrideCtx = {};
        overrideCtx.Templates = {};
        overrideCtx.Templates.Fields = {
            'Lookup': { 'View' : Change } 
        }; //change 'Lookup' to your lookup column name
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
    })();
     
    function Change(ctx){
        var len=ctx.CurrentItem["Lookup"].length;
        var html="";
    	if(len>0)
    	{
    		for(var i=0; i<len; i++)
    		{
    			var value =ctx.CurrentItem["Lookup"][i].lookupValue;
    		    if(value!="")
    		    {
    		    	html+='<a href="https://o365e3w15.sharepoint.com/sites/vic/Pages/'+value+'.aspx">'+value+'</a><br/>'; //change to your site URL
    		    }
    		}
    	}
        return html;
    }

    When using the JSLink, the results would show as below. And you can click the page title in the lookup column to access the pages.

    About how to use JSLink in SharePoint, please refer to the links below:

    https://www.dynamics101.com/jslink-sharepoint-2013-get-started/

    https://zimmergren.net/sp-2013-using-the-spfield-jslink-property-to-change-the-way-your-field-is-rendered-in-sharepoint-2013/

    Best Regards,

    Victoria  


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com


    Saturday, April 1, 2017 3:23 AM
    Moderator

All replies

  • Hi Shruti,

    I would recommend you to use JSLink instead for changing the lookup field.

    Please check the demo for the JS file below:

    (function () {
        var overrideCtx = {};
        overrideCtx.Templates = {};
        overrideCtx.Templates.Fields = {
            'Lookup': { 'View' : Change } 
        }; //change 'Lookup' to your lookup column name
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
    })();
     
    function Change(ctx){
        var len=ctx.CurrentItem["Lookup"].length;
        var html="";
    	if(len>0)
    	{
    		for(var i=0; i<len; i++)
    		{
    			var value =ctx.CurrentItem["Lookup"][i].lookupValue;
    		    if(value!="")
    		    {
    		    	html+='<a href="https://o365e3w15.sharepoint.com/sites/vic/Pages/'+value+'.aspx">'+value+'</a><br/>'; //change to your site URL
    		    }
    		}
    	}
        return html;
    }

    When using the JSLink, the results would show as below. And you can click the page title in the lookup column to access the pages.

    About how to use JSLink in SharePoint, please refer to the links below:

    https://www.dynamics101.com/jslink-sharepoint-2013-get-started/

    https://zimmergren.net/sp-2013-using-the-spfield-jslink-property-to-change-the-way-your-field-is-rendered-in-sharepoint-2013/

    Best Regards,

    Victoria  


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com


    Saturday, April 1, 2017 3:23 AM
    Moderator
  • Thanks Victoria!

    This is what I was looking for. Your script worked perfectly fine after I changed int to var in the for loop :) 


    Regards, Shruti

    Saturday, April 1, 2017 8:28 AM