1- On your website or team site, click Settings
, and then click Site Contents.
2- On the Site Contents page, click Add an Apps
3- On the App, click Promoted Link Library.
4- On the Promoted Links List , Create new Item on List.
5- On the Promoted Links List under link location Column, put the custom list URL or document list Url like as /Shared%20Documents/Forms/AllItems.aspx. You need not to put full url.
6- All information fill up.
7- Click the Save button.
You add to this app as web part on Home Page. Look like as
When you will click any tiles of this list.
Your page redirect to reference url of relative item.
Put JavaScript code all item page in promoted custom list
1- Open the page following url
https://ascogroup.sharepoint.com/Projects/PT/Lists/Project%20Tiles/AllItems.aspx?toolpaneview=2
1- Add a script editor web part on the page
2- Put the following code
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>
<script type="text/javascript">
$(document).ready(function () { dispalyTileDetails(); });
function dispalyTileDetails() {
var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('Project%20Tiles')/items?";
var requestHeaders = { "accept": "application/json;odata=verbose" }; Put the name
custom list $.ajax({
url: requestUri,
contentType: "application/json;odata=verbose",
headers: requestHeaders,
success: onSuccess,
error: onError
});
}
function onSuccess(data, request) {
var Logg = data.d;
for (var i = 0; i < data.d.results.length; i++) {
var linkUrl=data.d.results[i].LinkLocation.Url;
var TilesId=data.d.results[i].Id;
var LinkDescription=data.d.results[i].LinkLocation.Description;
if(linkUrl.indexOf(_spPageContextInfo.webAbsoluteUrl) > -1)
{
var hostName='https://' + window.location.hostname;
var res = linkUrl.replace(_spPageContextInfo.webAbsoluteUrl, hostName);
var linkLocationUrl=res;
var context = SP.ClientContext.get_current();
var oList = context.get_web().get_lists().getByTitle('Project Tiles');
var listItems = oList.getItemById(TilesId);
var hyperLink = new SP.FieldUrlValue();
hyperLink.set_url(linkLocationUrl);
hyperLink.set_description(LinkDescription); Put the custom list name
listItems.set_item("LinkLocation", hyperLink);
listItems.update();
context.executeQueryAsync(updateSuccess, updateFailed);
}
else
{
}
}
}
function updateFailed(sender, args) {
}
function updateSuccess() {
}
function onError(error) {
}
</script>
3- Save the page .
After that following code written when you display promotional tile
1- Add a script editor web part on page
2- Put the following code.
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>
<script type="text/javascript">
$(document).ready(function () { dispalyTileDetails(); });
function dispalyTileDetails() {
var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('Project%20Tiles')/items?";
var requestHeaders = { "accept": "application/json;odata=verbose" };
Put the custom list name
$.ajax({
url: requestUri,
contentType: "application/json;odata=verbose",
headers: requestHeaders,
success: onSuccess,
error: onError
});
}
function onSuccess(data, request) {
var Logg = data.d;
for (var i = 0; i < data.d.results.length; i++) {
var linkUrl=data.d.results[i].LinkLocation.Url;
var TilesId=data.d.results[i].Id;
var LinkDescription=data.d.results[i].LinkLocation.Description;
if(linkUrl.indexOf(_spPageContextInfo.webAbsoluteUrl) > -1)
{
}
else
{
var hostName='https://' + window.location.hostname;
var res = linkUrl.replace(hostName, _spPageContextInfo.webAbsoluteUrl);
var linkLocationUrl=res;
var context = SP.ClientContext.get_current();
var oList = context.get_web().get_lists().getByTitle('Project Tiles');
var listItems = oList.getItemById(TilesId);
var hyperLink = new SP.FieldUrlValue(); Put the custom list name
hyperLink.set_url(linkLocationUrl);
hyperLink.set_description(LinkDescription);
listItems.set_item("LinkLocation", hyperLink);
listItems.update();
context.executeQueryAsync(updateSuccess, updateFailed)
}
}
}
function updateFailed(sender, args) {
}
function updateSuccess() {
}
function onError(error) {
}
</script>
Save the page.
When you refresh the page referential link url set in promoted links custom list.