This is for SharePoint Online.

I have a lookup list called COURSES, which contains the CourseName and CourseLink. I also have a lookup list called ROLES, which contains organizational roles. The relationship between the two lists is many-many, so I bridge them with list called ROLE-COURSE. I then display the content of the ROLE-COURSE list in a nicely formatted page. All works, except I cannot lookup the CourseLink field if it is type URL, so I've created a text version of it. I can bring in the text version, but cannot get it to display as clickable URL in the page. Ultimately I'd like to also cast the CourseName field in the page as clickable to the CourseLink as well.

I could always simply add a CourseLink field to the ROLE-COURSE table, but then users would have to enter something repeatedly that they should be able to lookup.

1 Answer 1


As SharePoint does not support to have hyperlink column as lookup field, you might have to use some additional scripting to get the desired solution.

You may try following steps to get the desired output.

  1. Create CourseLink column in COURSE list as Single line of text.

  2. Update Course lookup column in ROLE-COURSE list as shown in following screenshot. i.e. CourseLink column is taken as an additional lookup field. enter image description here

Now with the help of following Client-Side Rendering script, we can modify the ROLE-COURSE list view.

Insert a Script-Editor web part in the ROLE-COURSE list view page and insert following script into it.

<script type="text/javascript">

    (function () 
        // jQuery library is required in this sample 
        // Fallback to loading jQuery from a CDN path if the local is unavailable 
        (window.jQuery || document.write('<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.0.min.js"><\/script>')); 

        // Create object that have the context information about the field that we want to change it's output render  
        var lookupHyperlinkContext = {}; 
        lookupHyperlinkContext.Templates = {};  
        lookupHyperlinkContext.Templates.OnPostRender = hideFields; 
        lookupHyperlinkContext.Templates.Fields = { 
            // convert lookup field hyperlink from 'ItemLink' to 'CourseLink'
            'Course': {'View':function(ctx) {
                var url = ctx.CurrentItem.Course_x003a_CourseLink;
                return String.format('<a href="{0}">{1}</a>', url, ctx.CurrentItem.Course[0].lookupValue);



    // logic to hide additional lookup column field
    function hideFields(ctx) 
        var cell = $("div [name='Course_x003a_CourseLink']").closest('th'); 
        var cellIndex = cell[0].cellIndex + 1; 

        $('td:nth-child(' + cellIndex + ')').hide(); 
        $('th:nth-child(' + cellIndex + ')').hide(); 


Output Now you should be able to see Course values with hyperlink as CourseLink.

enter image description here

  • Very thorough answer - thanks for posting. One problem I'd noticed was that I had the column names wrong - I'd been using what I'd thought was the internal name (by checking the field=___ portion of the link), but that was giving me %5F characters for any underscores in the column name.
    – BKsp13
    Jun 7, 2016 at 18:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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