How To Load Objects using SharePoint JSOM

The following article applies to SharePoint 2010, SharePoint 2013, SharePoint 2016 and SharePoint Online.

Our team recently ran into an interesting issue where they needed to load multiple similar objects using the SharePoint JavaScript Object Model (JSOM).

They were nervous about the thought of having to load each of them into separate JavaScript variables.  This was especially true because the number of objects to be loaded was going to be dynamic.

The scenario was this:

  • Must display a list of all the SharePoint libraries and their views within a specific site
  • Must be aware of JavaScript caching
  • Using the jQuery UI accordion plugin in SharePoint

 

Typically, the team would put JavaScript code and CSS stylings into either a text file to be referenced by a Content Editor web part or, if just JavaScript, into a .JS file and use a Script Editor web part to load the file.

This will make your life so much easier when it’s time to make updates without having to edit the page > edit the web part > update the code > save the web part > save the page > and so on.

 

Step 1 – Let’s get JQuery Loaded

First, create a text file in the Site Assets library to store your code. We will need jQuery and jQuery UI so add that.

Just in case someone uses this on a page that has jQuery loaded, let’s check if it is there before loading. We will also need a DIV to stick our HTML in when we are done.



 

 

Step 2 – Get the JavaScript NameSpace In Place

If you are not doing it yet, start. It doesn’t take that long to put in place and will save you from headaches in the future.

script type="text/javascript">
var IncWorx = IncWorx || {};
IncWorx.SP = IncWorx.SP || {};
IncWorx.SP.LibraryViews = { 
    allViews: [], 
    init: function () {} 
} 

 

Step 3 – Get SharePoint Client Context and Load Lists

Here we are going to create our client context object and query the site to find all lists/libraries. This code is going in the “init” function above.

// Add any list/library names you want to exclude
// Let's omit some SharePoint internal list/library names
var excludedLists = ["fpdatasources", "Master Page Gallery", "MicroFeed", "Site Assets", "Style Library", "Tasks", "TaxonomyHiddenList", "User Information List", "wfpub", "wfsvc", "Workflow History", "Workflow Tasks", "Workflows"];

// Add any specific view names you want to exclude
var excludedViewNames = [];

var context = new SP.ClientContext();
var web = context.get_web();

// Get all lists and libraries from the site
var lists = web.get_lists();
context.load(lists);

context.executeQueryAsync( 
    Function.createDelegate(this, function ()
    { 
		// Code in next step
    }),
	Function.createDelegate(this, function (sender, args)
    { 
        console.log(args.get_message());
    })
);

 

Step 4 – Load an Array of SharePoint Objects

Here is where we will load all the View objects for the Lists/Libraries that we have retrieved. Since we don’t want to create a JavaScript variable for every single view object (realistically we can’t because it will be ever-changing), let’s add those objects into an array to reference later.

Function.createDelegate(this, function ()
{ 
    var enumerator = lists.getEnumerator(); 
    while (enumerator.moveNext()) 
    { 
        var list = enumerator.get_current(); 

        // If you want to only show document libraries
        //if(list.get_baseType() == 1) // If you want to only show lists //if(list.get_baseType() == 0)

        // We're going to exclude some OOTB SharePoint lists that we do not want to display
        if (excludedLists.indexOf(list.get_title()) < 0) 
        { 
            // Create an object to store the views collection for the list/library
            var viewObj = { 
                title: list.get_title(), 
                views: list.get_views()
            }; 

            // Add the object to an array to access later
            IncWorx.SP.LibraryViews.allViews.push(viewObj);
            context.load(viewObj.views); 
        }
    }
}),

Here, we create a custom object “viewObj” with a property of title and views.

We need the title property so we know what List/Library those views are associated with.

The views property will ultimately contain the collection of SharePoint view objects that will be loaded from the Client Context.

We tell SharePoint to load each of the lists views and then we will run a single executeQueryAsync to get the information.

 

Step 5 – Process those Views!

Here is where we access those view objects in our array and start building the jQuery Accordion HTML.

IMPORTANT: Replace the red *** located in the code snippet below with a < . 

context.executeQueryAsync( 
    Function.createDelegate(this, function () 
    { 
        var finalContent = "";

        // This is where we can access our array of objects loaded by SharePoint.
        // We dynamically added the references into an Array
        // No need for multiple JavaScript variables or multiple Execute Queries.
        // We can just loop through the array. 
        for (var x = 0; x < IncWorx.SP.LibraryViews.allViews.length; x++)
        { 
            var viewObj = IncWorx.SP.LibraryViews.allViews[x];
            var viewsList = [];
            finalContent += "" + viewObj.title + "
"; var viewEnum = viewObj.views.getEnumerator(); while (viewEnum.moveNext()) { var view = viewEnum.get_current(); var viewTitle = view.get_title(); // Skip any view names that we have chosen to ignore if (viewTitle.length > 0 && excludedViewNames.indexOf(viewTitle) < 0) { finalContent += "- ***a href='" + view.get_serverRelativeUrl() + "'>" + viewTitle + "
" } } finalContent += "
"; //close the div surrounding the views } // Dump the HTML into our DIV and use the jQuery UI Accordion to make it look nice $("#libraryAccordion").html(finalContent); $("#libraryAccordion").accordion(); // Let’s put the final values into the Session cache so we don’t have to reload it each time – stays in cache as long as the tab is open sessionStorage["LibraryViewCache"] = finalContent; }), Function.createDelegate(this, function (sender, args) { console.log(args.get_message()); }) );

The Final Result

Here we have all of the lists and views from a SharePoint site formatted nicely in a jQuery UI accordion.

 

Wrap Up and Final Code

What we have done here is load multiple SharePoint objects using a single JavaScript array so there is no need to create specific variables for each object.

Additionally, loading all of the objects using a single executeQueryAsync helps with the performance of the script.

A word of caution – SharePoint does have some limits on how many objects can be loaded with a single executeQueryAsync so be careful!

Our complete code:





Related Articles to Help Grow Your Knowledge

Microsoft Teams Adoption Strategy: 5 Critical Considerations
Microsoft Teams Adoption Strategy: 5 Critical Considerations

Microsoft Teams is growing at an incredible rate. In October of 2020, Microsoft reported a 50 percent rise in daily active users from the numbers six months prior. More and more IT business strategies include implementing Teams as a hub for communication and...

Microsoft RPA: Get More Done With Robotic Process Automation
Microsoft RPA: Get More Done With Robotic Process Automation

Every business runs into mundane, time-consuming tasks every now and then. Maybe your team members keep repeating the same navigation steps, clicking the same buttons, just to pull a report. Or perhaps they're constantly forced to look up information in one app so...

Is Power BI Good For Big Data?
Is Power BI Good For Big Data?

The rise of Power BI from a little-known platform to one of the most powerful business analytics tools in the world is nothing short of spectacular. In just under seven years, Power BI has accrued more than 5 million subscribers, a feat that lays testament to just how...

Join over 1,000 people who receive insights, guides and advice for Microsoft technologies every month.