7 min to read

SharePoint JavaScript Libraries

I’m constantly googling for this information, since the core SharePoint javascript methods are pretty useful. This post will be added to, so check back for updates.

Reference

The script reference is an issue that is overlooked. These libraries may not be loaded by default in certain pages. So to be safe, I recommend using the SharePoint On-Demand (SP.SOD) library to ensure the associated script is loaded. The “execute” method is pretty useful, since we can execute the method in one line.

The modal dialog is really useful for showing data in a popup dialog. Below are the available methods for this class. Microsoft Reference

JavaScript

Format
SP.SOD.execute("sp.ui.dialog.js", "SP.UI.ModalDialog.[Method]", [Method Properties])

// Example 1 - Show a Page
SP.SOD.execute("sp.ui.dialog.js", "SP.UI.ModalDialog.showModalDialog", {
    showMaximized: true,
    title: "Modial Dialog Title",
    url: "Page to load"
});

// Example 2 - Show a loading panel
SP.SOD.execute("sp.ui.dialog.js", "SP.UI.ModalDialog.showWaitScreenWithNoClose", "Saving the Item", "This dialog will close after the request completes.");

// Example 3 - Close the dialog
SP.SOD.execute("sp.ui.dialog.js", "SP.UI.ModalDialog.commonModalDialogClose");

Methods

Notify

The notify library comes in handy when you want to display a temporary message to the user. Microsoft Reference

JavaScript

Format
SP.SOD.execute("sp.js", "SP.UI.Notify.[Method]", [Method Properties])

// Example 1 - Show a notification
SP.SOD.execute("sp.js", "SP.UI.Notify.addNotification", "This is the notification.", false);

// Example 2 - Remove a notification
SP.SOD.execute("sp.js", "SP.UI.Notify.removeNotification", "[notification id]");

Methods

Status

The status library comes in useful when you want to add a message to the bar under the navigation. Microsoft Reference

JavaScript

Format
SP.SOD.execute("sp.js", "SP.UI.Status.[Method]", [Method Properties])

// Example 1 - Show a status
var statusId = SP.SOD.execute("sp.js", "SP.UI.Status.addStatus", "Title", "<h3>This is the message</h3>");

// Example 2 - Udpate a status color
SP.SOD.execute("sp.js", "SP.UI.Status.setStatusPriColor", statusId, "green");

// Example 3 - Close all status messages
SP.SOD.execute("sp.js", "SP.UI.Status.removeAllStatus");

Methods