Display Site Usage & Quota Information in SharePoint

View story at Medium.com

This article describes how to display Site Usage & Quota Information in SharePoint using default SharePoint REST Services (SP.UsageInfo object) and a simple JavaScript.

The Result

The result looks like this:

SharePoint Storage & Quota Information

The REST Service Endpoint

You can query the service by navigating to the following URL:
http://<sitecollection>/<site>/_api/site/usage

Required Permissions

Keep in mind, that you will have to assign the following permissions within the SharePoint permission level to all users that should be able to see that information:
Site Permissions — View Web Analytics Data — View reports on Web site usage.

View Web Analytics Data

The Solution

The implementation consist of
1. The JavaScript that actually retrieves the values using REST and displays them on the SharePoint page
2. The Content Editor Web Part (CEWP) that is added to the SharePoint Page.

You could also implement it in your MasterPage, but this approach describes it by adding a CEWP to the page.

The JavaScript

Here’s the souce code:

var web = null;
var ctx = null;
$(document).ready(function () {
SP.SOD.executeFunc(‘sp.js’, ‘SP.ClientContext’, function () {
if (web == null) {
showQuotaInfo();
}
});
});
function showQuotaInfo() {
var context = new SP.ClientContext.get_current();
var site = context.get_site();
context.load(site,’Usage’);

context.executeQueryAsync(
function() {
var siteUsageInfo = site.get_usage();
var quotapercentage = siteUsageInfo.get_storagePercentageUsed() * 100;
var quotastorage = siteUsageInfo.get_storage() / 1000000000;

var quotapercentageFormatted = quotapercentage.toFixed(2);
var quotastorageFormatted = quotastorage.toFixed(2);

var output = document.getElementById(“container”);

var quotaInfo = “”;
quotaInfo +=


+ “


+ “


+ “


+ “


+ “

Quota

</td>”
+ “</tr>”
+ “<tr>”
+ “<td>Used:</td>”
+ “<td style=\”text-decoration:none;text-align:right;padding-right:10px\” >” + quotapercentageFormatted + “%</td>”
+ “</tr>”
+ “<td></td>”
+ “<td style=\”text-decoration:none;text-align:right;padding-right:10px\” >” + quotastorageFormatted + ” GB</td>”
+ “</tr>”
+ “</table></div>”;
// display the content below the quicklaunch
$(“#sideNavBox”).append(quotaInfo);
// display the content within the Web Part
output.innerHTML = quotaInfo;
}
);
}

 

The script connects to the REST service, retrieves the values for the current amount of storage used by the site and also that percentage of the quota limit, and posts the values within a nicely formatted table using a progress bar element.

Save the JavaScipt either to the SharePoint content, e.g. within the Site Assets Library, or in a central location, e.g. the _layouts folder
(C:\Program Files\Common Files\microsoft shared\Web Server Extensions\15\TEMPLATE\LAYOUTS).

In my example I chose the latter aproach.

The CEWP

I like to refer to a text file within the CEWP, rather than adding the pieces of code inside the Web Part.
Either way, you will have to add the following lines of code to the CEWP:

/_layouts/15/JS/jquery-1.5.1.min.js
/_layouts/15/JS/QuotaInfo.js

It includes the path to your jquery library, to the JavaScript retrieving and displaying the storage & quota details and the div-container that represents the placeholder for the output.

Original Article:

View story at Medium.com

View story at Medium.com

View story at Medium.com

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

Back to top