Project Dashboard in SharePoint 2013

Question

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 -

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.

Answer 1

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;
}