link need to open when click on title column

Question

Some trick request came. We had list with columns as "Title", "Owner", "Description", "External Path", "Requester". In "title" column, we have given name of item, under "Description" some matter given and "external path" column, we have given some URL.

Now our request is when we click on "Title" column, it need to open "External path" column link. Hope someone got my point. Is it possible achieve my request?

Answer 1

If the "External Path" field is a single text field, we can add the following code into a script editor in list view page to achieve it.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function () { 
    // Create object that have the context information about the field that we want to change it's output render  
    var fieldContext = {}; 
    fieldContext.Templates = {}; 
    fieldContext.Templates.Fields = { 
        // Apply the new rendering for Available field on List View 
        "LinkTitle": { "View": fieldTemplate } 
    }; 
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(fieldContext);
})(); 

// This function provides the rendering logic for list view 
function fieldTemplate(ctx) { 
    var title = ctx.CurrentItem["Title"];     
    var externalPath = ctx.CurrentItem["External_x0020_Path"];  
    return "<a href='"+$(externalPath).text()+"' target='_blank'>"+title+"</a>"
}
</script>

If the "External Path" field is a multiple line of text field, and not in the list view. We can use the code below to achieve it.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
    $("div[field='LinkTitle']>a").attr("href","#");
    $("div[field='LinkTitle']>a").removeAttr("onclick");
    $("div[field='LinkTitle']>a").click(function(){
        var listGUID=$(".ms-listviewtable").attr("id").split("}-")[0].split("{")[1];
        var itemId=$(this).parent().attr("id");
        OpenExternalPath(listGUID,itemId);
    });
});
function OpenExternalPath(listGUID,itemId){
    $.ajax({
        url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists(guid'"+listGUID+"')/items("+itemId+")",
        type: "GET",
        headers: {
            "Accept": "application/json;odata=verbose",
        },
        success: function (data) {
            var externalPath=data.d.External_x0020_Path;
            if($(externalPath).text()!=""){
                window.open($(externalPath).text(), '_blank');
            }           
        },
        error: function (data) {
            //alert("Error");
        }
    });
}
</script>

Answer 2

You could just create a "Hyperlink" column and hide the title column on the form and list view.

Or you can use jquery to get the href and replace your title columns href.

<script src="/...../SiteAssets/jquery/jquery-1.8.3.min.js"></script>
<script>
$( document ).ready(function() {

    $('.ms-listviewtable > tbody > tr > td > a').each(function() {
        var getLink = $(this).attr('href');
        console.log("TEST: " + getLink);
        $(this).parent().prev().prev().children().children().removeAttr("href").removeAttr("onclick").attr("href",getLink);
    });
});
</script>

This will just swap out the href for each row. Might need some cleaning up of the code, but it should do the trick. In my case the link column was located right next to the title column.

UPDATE I "Single Line of Text" column pretty much works the same way.

I've added a new column at the end and modified the code as follows.

<script src="/./SiteAssets/jquery/jquery-1.8.3.min.js"></script>
<script>
$( document ).ready(function() {

    $('.ms-listviewtable > tbody > tr > td:nth-child(8) > a').each(function() {
        var getLink = $(this).attr('href');
        console.log("TEST: " + getLink);
        $(this).parent().prev().prev().prev().prev().prev().prev().children().children().removeAttr("href").removeAttr("onclick").attr("href",getLink);
    });
});
</script>

Make sure to include the jquery-1.8.3.min.js file