Load SP.js, Taxonomy and other utilities in SharePoint 2013, 2016 and Office 365

With greater implementation of JSOM and JavaScript in SharePoint and Office 365, properly and easily loading dependencies are becoming more of an issue and due to poor documentation and some functionality that don’t function according to the documentation.

This prompted me to put this example together.  I am actively working on a framework that will do this with much less code, but until that’s complete, this is a nice bit of code to get it all loaded and is robust.

In this example:

• We will be loading data from a SharePoint list and pulling data from the Term Store (this requires SP.js and SP.Taxonomy.js)

Basic Structure

if (myStronglyTypedObj === undefined) {
    var myStronglyTypedObj = {};
}

myStronglyTypedObj = {
    // Object Globals 
    "g": {},
    // Pre-initialization functions ensure scripts SharePoint dependencies are loaded
    "preinit": function() {
            // Load necessary libraries
            SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function() {
            	// Register what you need from SharePoint (in this case the term store)
                SP.SOD.registerSod('sp.taxonomy.js', SP.Utilities.Utility.getLayoutsPageUrl('sp.taxonomy.js'));
                // Load the registered items
                SP.SOD.executeFunc('sp.taxonomy.js', 'SP.Taxonomy.TaxonomySession', myStronglyTypedObj.init());
            });
    },
    // The main Initialization function
    "init": function() {
        /* Check if SP.Taxonomy actually exists yet
         * PLEASE NOTE that it's common that these objects aren't available, even if you've properly loaded them in the "preinit" function. 
         * This bit of code checks if the object is available, and if it's not, waits for 200ms and then tries again until this object is loaded
         */
        if (SP.Taxonomy) {
            console.log("SP.Taxonomy ready... continuing scripts...");
            myStronglyTypedObj.therest();
        } else {
            console.log("SP.Taxonomy not ready...  set timeout and try again after 200ms");
            setTimeout(myStronglyTypedObj.init, 200);
        }
    },
    "therest": function() {
    	// Continue with your code here...
    }
}

// Run whatever pre-initialisation checks you need to, and then load "preinit" as the starting point, for instance 
myStronglyTypedObj.preinit();

Code Explained

• I use a strongly typed variable for the entire framework.  This ensures my code is completely encapsulated and no overwriting of common global variables in JavaScript.
• “g” is a great place to store your global variables and is accessible via

  myStronglyTypedObj.g.myVar

• “preinit” is the first function that runs, which initializes the necessary libraries
• “init” is loaded after SharePoint’s libraries are loaded, and reruns itself multiple times until all necessary SharePoint objects are ready
• “therest” is just an example function, which is where you run your CAML query to get list data, and load data from the term store
• The very last line in the code example starts the scripts.  This is usually where I check if jQuery is loaded and ready, if page variables are available, etc. – to simplify the essence of this article, I did not include any of that here.

And as you can see from running it, that almost every time, the Taxonomy store isn’t ready from the get-go, which can cause errors in your code if that dependency is not properly loaded by the time you call it.