1

I am trying to make title column values to work as a link. I have used javascript as given below

<html>

<script type="text/javascript">
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', retrieveListItems);
var siteUrl = '/projects/demo/';
var oList = null;
var web = null;
    var clientContext  = null;
function retrieveListItems() {

clientContext = new SP.ClientContext.get_current();
web = clientContext.get_web();

    clientContext.load(web);


    clientContext.executeQueryAsync(Function.createDelegate(this, this.LoadWeb), Function.createDelegate(this, this.onQueryFailed));        

}


function LoadWeb()
{
    oList = web.get_lists().getByTitle('testA');

 clientContext.load(this.oList);
 clientContext.executeQueryAsync(Function.createDelegate(this, this.LoadList), Function.createDelegate(this, this.onQueryFailed));   



}


function LoadList()
{

 var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml('<View><Query><Where><Geq><FieldRef Name=\'ID\'/>' + 
        '<Value Type=\'Number\'>1</Value></Geq></Where></Query><RowLimit>10</RowLimit></View>');

    this.collListItem = oList.getItems(camlQuery);


    clientContext.load(collListItem);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));   

}

function onQuerySucceeded(sender, args) {

    var listItemInfo = '';


    var listItemEnumerator = collListItem.getEnumerator();

    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();
        var ID= oListItem.get_id();

        listItemInfo = '\n' + oListItem.get_item('Title');


        //var href = oList.get_defaultDisplayFormUrl() + "?ID=" + ID;
    var href = web.get_url()+"/Lists/"+oList.get_title()+"/DispForm.aspx?ID=" + ID;
     listItemInfo.link(href);

}

    alert(listItemInfo.toString());
document.getElementById("myDiv1").innerText =listItemInfo.link(href);

}

function onQueryFailed(sender, args) {

    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

</script>
<div id="myDiv1" />
</html>

Here I am getting the hyperlink as output but I need column value instead of it.

But this is not working. Title column values are still not working as a link.

What changes are required?

  • Where do you want to display Title as a link? list view or in dispaly form? – Taran Goel Jul 13 '15 at 12:54
3

If you want to display your title as a link, just use "Title (linked to item with edit menu)" in your list view. Though it is there by default but it can be a case where it was removed from view settings.

If you want to change the URL to something else, I suggest you to use Client Side Rendering (CSR). It will render your title field as a hyperlink pointing to url of your choice. You can read about CSR here.

(function () {
    var favoriteColorContext = {};

    // You can provide templates for:
    // View, DisplayForm, EditForm and NewForm
    favoriteColorContext.Templates = {};
    favoriteColorContext.Templates.Fields = {
        "FavoriteColorField": {
            "View": favoriteColorViewTemplate
        }
    };

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(
        favoriteColorContext
        );
})();

// The favoriteColorViewTemplate provides the rendering logic
// the custom field type when it is displayed in the view form.
function favoriteColorViewTemplate(ctx) {
    var color = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
    return "Your HTML content here";
}
1

The code above need a little modification only. I just replaced the div by table and it worked.

<html>
<script type="text/javascript">
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', retrieveListItems);
var siteUrl = '/projects/SharePoint2013-Demo/HRM/';
var oList = null;
var web = null;
    var clientContext  = null;
function retrieveListItems() {

clientContext = new SP.ClientContext.get_current();
web = clientContext.get_web();

    clientContext.load(web);


    clientContext.executeQueryAsync(Function.createDelegate(this, this.LoadWeb), Function.createDelegate(this, this.onQueryFailed));        

}


function LoadWeb()
{
    oList = web.get_lists().getByTitle('testA');

 clientContext.load(this.oList);
 clientContext.executeQueryAsync(Function.createDelegate(this, this.LoadList), Function.createDelegate(this, this.onQueryFailed));   



}


function LoadList()
{

 var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml('<View><Query><Where><Geq><FieldRef Name=\'ID\'/>' + 
        '<Value Type=\'Number\'>1</Value></Geq></Where></Query><RowLimit>10</RowLimit></View>');

    this.collListItem = oList.getItems(camlQuery);


    clientContext.load(collListItem);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));   

}

function onQuerySucceeded(sender, args) {

    var listItemInfo = '';


    var listItemEnumerator = collListItem.getEnumerator();

    while (listItemEnumerator.moveNext()) {
                var oListItem = listItemEnumerator.get_current();
                var ID= oListItem.get_id();
var i;

                          listItemInfo = '\n' + oListItem.get_item('Title');
                          //var href = oList.get_defaultDisplayFormUrl() + "?ID=" + ID;

            var href = web.get_url()+"/Lists/"+oList.get_title()+"/DispForm.aspx?ID=" + ID;
            var m =listItemInfo.link(href);
    var table = document.getElementById("t");
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
   cell1.innerHTML = m;



//document.getElementById("t").innerHTML=m;
}

}

function onQueryFailed(sender, args) {

    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

</script>
<table id="t">
</table>
</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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