4

I`m working on building a Dashboard to show data from multiple SharePoint 2013 Lists on to the Intranet homepage.

Please check the screenshot for better understanding -

enter image description here

MY research so far has got me into more confused stage as what would be the appropriate options -

Will it be:

a) CSWP ( Wondering how it can fetch data from multiple lists and that too show only the summation data from each List)

b) CQWP (Not sure if it can show Data view for not only one column)

c) Another SharePoint List called Dashboard and do reference to the summation data from multiple list using LOOKUP feature.

So far my brain says option c would work in my case, however I know that is not an appropriate data display tool.

Thus, please suggest what are the options.

Kindly support.

  • Are you familiar with using SharePoint's REST API to pull list data? – Submits Jun 21 '16 at 8:07
  • Nope, but keen to learn the required module to get the solution working. – Jason Jun 21 '16 at 8:43
  • Do you need to show the item counts from multiple lists separately or a single count showing the sum of items from all lists? – Submits Jun 21 '16 at 8:46
  • Total Item count of list 1 on dashboard's column 1 and so on for other list. – Jason Jun 21 '16 at 8:58
2

Try something like this. You will need to add this JavaScript and a reference to jQuery on your page.

It uses jQuery deferred/promises to wait for three REST calls to return successfully before showing the list counts on the page.

Note I haven't tested this so you may need to debug.

var listCounts = [];

$.when(
    RestGet("listname1", "yourErrorDiv", "Couldn't get from listname1"),
    RestGet("listname2", "yourErrorDiv", "Couldn't get from listname2"),
    RestGet("listname3", "yourErrorDiv", "Couldn't get from listname3")).done(function () {
        // Output results to screen, e.g.:
        var table = "<table>";
        listCounts.forEach(function (obj) {
            table += "<tr><td>" + obj.listName + "</td></tr>\
                      <tr><td>" + obj.count + "</td></tr>";
        });
        table +=    "</table>";
        yourdiv.html(table);
});

// @listName, the name of the list to pull data from
// @errorDiv, a string containing the ID attribute of the DIV that the error message should be displayed in. If this is ommitted, no error message will be displayed on the page
// @errorMessage, a string containing the error message that should be displayed if the call fails
function RestGet(listName, errorDiv, errorMessage) {
    var dfd = $.Deferred();
    $.ajax({
        url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items",
        type: "GET",
        headers: {
            "accept": "application/json;odata=verbose",
        },
        success: function (data) {
            var obj = {};
            obj.listName = listName;
            obj.count = data.d.results.length;
            listCounts.push(obj);
            dfd.resolve();
        },
        error: function (data) {
            $(String.format("[id='{0}']", errorDiv)).html(message + " Check your browser's console for details of the error.");
            console.log(JSON.stringify(data));
            dfd.reject();
        }
    });
    return dfd;
}
  • thanks for your response. Kindly give me day`s time to respond. – Jason Jun 22 '16 at 1:15
  • I`ve updated my initial query with more updates and screeshot. Request if you can and confirm if the Jquery will still be a valid option? – Jason Jun 23 '16 at 0:53
  • Yes my solution is still a viable option and one that gives you a lot of flexibility. You just need to build out the HTML for the output table appropriately. Try it and see how you get on. – Submits Jun 23 '16 at 1:17

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.