9

This is such a simple question I thought that it would have been answered somewhere else (but can't find a clear answer).... How do I get the list item url using the javascript object model?

I'm creating a blog slider and I want the user to be able to link to the article from the slider.

Relevant code as follows:

function retrieveListItems() {

var clientContext = new SP.ClientContext(siteUrl);
var oList = clientContext.get_web().get_lists().getByTitle('Posts');

var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml('<View><Query><Where><Geq><FieldRef Name=\'ID\' Ascending="False"/>' + 
    '<Value Type=\'Number\'>1</Value></Geq></Where><OrderBy><FieldRef Name =\'Modified\' Ascending="False"/></Query><RowLimit>3</RowLimit></OrderBy></View>');
this.collListItem = oList.getItems(camlQuery);

clientContext.load(collListItem, 'Include(Id, Title,  Summary, Image)');

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

}

function onQuerySucceeded(sender, args) {

var listItemInfo = '';

var listItemEnumerator = collListItem.getEnumerator();
      var itemHtml;
    var fullHtml;

while (listItemEnumerator.moveNext()) {
    var oListItem = listItemEnumerator.get_current();
    var htmlHead = '<div id="slider" class="nivoSlider">';
    var htmlFoot ='</div>';

    if(oListItem.get_item("Image")){
    listItemInfo += '\nID: ' + oListItem.get_id() + 
        '\nTitle: ' + oListItem.get_item('Title') + 
        '\nSummary: ' + oListItem.get_item('Summary') +
        '\nImage url: '+ oListItem.get_item('Image').get_url() +
        '\nItem url: ' + oListItem.get_item('urlfieldname').get_url();
     if (itemHtml === undefined || itemHtml === null) 
      {

         itemHtml = '<img src="' + oListItem.get_item('Image').get_url() + '" title="'+ oListItem.get_item('Title')+'" />';
        }
    else{
              itemHtml += '<img src="' + oListItem.get_item('Image').get_url() + '" title="'+ oListItem.get_item('Title')+'" />';
        }   

       }


        //create html block for slider div
        fullHtml =  itemHtml ;


}
//insert new html into innerHTML of slider div

   document.getElementById("slider").innerHTML = fullHtml;
alert(fullHtml);
$('#slider').nivoSlider(); 
}
  • @Anders solution should work for you. If so, then accept it. otherwise consider a bounty – Atish Dipongkor - MVP Sep 24 '15 at 6:00
  • Sure, I'm not able to test this week, so it will be next week before I can get back on site. Once I know which solution works I will accept, I agree though, the solutions look like they will work. Thank you in advance! – GrantMcW Sep 25 '15 at 1:48
13

There is a property on the list for the default dispform, newform and editform url.

Example:

var clientContext = SP.ClientContext.get_current();
var list = clientContext.get_web().get_lists().getByTitle("ListTitle");

var caml = new SP.CamlQuery();
caml.set_viewXml("<View />");

var listItemCollection = list.getItems(caml);

clientContext.load(list, "DefaultDisplayFormUrl");
clientContext.load(listItemCollection);

clientContext.executeQueryAsync(function() {

    for(var i in listItemCollection.get_data()) {

        console.log( "DispFormRelativeUrl: " + list.get_defaultDisplayFormUrl() + "?ID=" +listItemCollection.get_data()[i].get_id() );
    }

}, function(sender, args) {
    window.console && console.log(args.get_message());  
});
1

You can generate your list item URL manually by item id. Let say your

List Name: Post

Item ID: 10

Site URL: http://sharepoint.com

So item URL will be like following

http://sharepoint.com/Lists/Post/DispForm.aspx?ID=10

I am supposing that your default display form name is DispForm.aspx. If it is different in your case, then change it in URL.

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.