Maintaining Sharepoint/HTML elements using Sharepoint List

Question

As titled,

I'm thinking of managing Sharepoint elements or HTML using Sharepoint list, like for example, i have a Sharepoint list which stores the attribute data for Promoted Links (id, class, text, info, href, etc..).

From here, i can use that same Sharepoint list to create a Promoted Links dynamically on the site page, where if i insert a new item into the list, it will automatically create a new Promoted Links straight on my site page on Sharepoint.

I want to know if this kind of thing (not limited to Promoted Links only, can be other HTML elements too) can be done in Sharepoint 2010/2013?

Thanks

Answer 1

You can have a list with the requisite column - and on page load, fire a rest to the list in order to fetch all the data for the link. The code would something like this :

$(document).ready(function() {

  initPromotedLinks();
})

function initPromotedLinks() {

  //get from the list - rest
  var linkStruct = "";

  $.ajax({
    method: 'GET',
    url: < url > +"/_api/web/lists/getByTitle('" + < name of the list with promoted links >
      +"')/items" + < filter params, if any > ,
    header: {
      "Accept": "application/json; odata=verbose"
    },
    success: function(data) {
      for (var i = data.d.results.length - 1; i >= 0; i++) {
        linkStruct += "<div class='tile'><a href=" + data.d.results[i].url + ">" + data.d.results[i].description+ "</a></div>";
      }

      // now that the link structure is built - append it to the requisite div 

      $('#target').html(linkStruct)
    },
    failure: function(data) {
      req.deferred.reject(data);
    },

  });

}

You can change the structer of the html you are appending into linkStruct above according to the structure used for promoted tile markup that you are using.