1. Create List and items similar to below. In my case list name is Site Links.
2. Download latest jquery.js bootstrap.js and bootstrap.css
<div class="col-xs-12 siteLinksDiv siteLinksDivAlone" style="height: 254px;">
<div class="row">
<div class="col-xs-12">
<h4>Site Links <span style="width:40%;display: block;margin-top: 10px;" class="customBordered_h3 displayBlock"></span></h4>
<ul id="sitelinks" class="paddingLeftZero">
</ul>
</div>
</div>
</div>
<script>
var siteurl = _spPageContextInfo.webAbsoluteUrl;
$.ajax({
url: siteurl + "/_api/web/lists/getbytitle('Site Links')/items",
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
success: function (data) {
if (data.d.results.length > 0 ) {
var markupQL='';
for(var i=0;i<data.d.results.length;i++)
{
var lnkUrlQL1 = data.d.results[i].LinkLocation;
var lnkUrlQL = data.d.results[i].LinkLocation.Url;
var titleQL = data.d.results[i].LinkLocation.Description;
markupQL += '<li><a target="_blank" href="'+lnkUrlQL+'">'+ titleQL + '</a></li>';
}
$("#sitelinks").html(markupQL);
}
},
error: function (data) {
alert("Error: "+ data);
}
});
</script>


Comments
Post a Comment