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 Power Products: The Future of Business
Microsoft Power Products: The Future of Business

You are not alone if you are unsure about what is included in the Microsoft Power Products platform. These five Microsoft business applications make up the Microsoft Power Platform. Microsoft Power BI Microsoft Power Apps Microsoft Power Automate (originally called...

5 Benefits of SQL Server Consolidation
5 Benefits of SQL Server Consolidation

It's hard to remember a time without Microsoft SQL Server. After all, it's almost 50 years since its initial release. That's enough time for SQL instances to have multiplied across any enterprise. With SQL servers distributed throughout a network, IT departments may...

9 of the Most Common Microsoft Flow Examples
9 of the Most Common Microsoft Flow Examples

Analysts expect the global workflow automation market to grow by 5.8% from 2020 to 2025. Is your business part of this growing trend yet? If you use Office 365, you may already have access to a versatile automation tool. Microsoft Flow can help you save time and...

Get our free, 30-second weekly newsletter. Used by 2000+ people to keep up with always-changing Microsoft technology.