Sharepoint - SP.SOD how to use correctly?

This code is the basic implementation of LoadSodByKey, this is the best implementation of the function as it has the override to allow you to have a callback for when the script is loaded.

After jquery is loaded, the anonymous function will write "Hello World" to the console

<script type="text/javascript">
   LoadSodByKey("js/jquery-1.9.0.min.js", function () {
       console.log("Hello world!")
   });
</script>

These are my thus far best practices for loading and using scripts, and I will continue to update this post as time goes on, and understanding of this increases.

[UPDATE]

A full working compatible pattern for doing this is: Note the called JS file needs to be registered, and run the Notify SOD command

// Callback method
var callback = function () {
    // Code goes here
};

// Expected namespace after loaded
var namespace = "SP.RequestExecutor";

// SOD Key of target js file
var key = "sp.requestexecutor.js";

// Load straight away, or in queue
var bSync = false;

SP.SOD.executeFunc(key, namespace, function () {
    console.log(key + ": Type available (" + namespace + ")");
}, bSync);

// Execute when script has notified loading (Event call)
SP.SOD.executeOrDelayUntilScriptLoaded(callback, key);

SP.SOD.executeFunc works with OnDemand scripts while ExecuteOrDelayUntilScriptLoaded does not.

Here is an excellent resource on SP.SOD:

SHAREPOINT SCRIPTS ON DEMAND (SP.SOD)

ExecuteOrDelayUntilScriptLoaded(func, scriptName) schedules an asynchronous callback function (func) which will be called when the script has signaled finished loading. Signaled finished loading means that the script has called notifyScriptLoadedAndExecuteWaitingJobs(scriptName). All SharePoint built-in scripts will call notifyScriptLoadedAndExecuteWaitingJobs when they have finished loading. ExcuteOrDelayUntilScriptLoaded does not trigger loading an on demand script (SOD)!

SP.SOD.executeFunc(key, functionName, fn) is used to load on demand scripts (ScriptLink.OnDemand=true). The “key” parameter must match to the ScriptLink’s Name property (Use small letters for key, because an issue with string normalizing in RegisterSodDep)


SP.SOD.executeFunc(key, functionName, fn) method ensures that the specified file (key) that contains the specified function (functionName) is loaded and then runs the specified callback function (fn). Use case for SP.SOD.executeFunc can be that at some point you wish a JavaScript library like jQuery be loaded before you call a function defined inside it via callback function.

SP.SOD.executeOrDelayUntilScriptLoaded(func, depScriptFileName) method executes the specified function (func) if the file (depScriptFileName) containing it is loaded; otherwise, adds it to the pending job queue. Use case for SP.SOD.executeOrDelayUntilScriptLoaded can be that you want to override a function definition within the Core.js, sample code

function CustomCIMOpt() {
CIMOpt = function (menuElement, title, action, imageSource, sequence, description){
    if(title == 'Compliance Details') return '';
    ULSrLq:;
    var menuOption = CMOpt(title, action, imageSource, sequence, description);
    if(!menuOption) return null;
    for(var i=0; i < menuElement.childNodes.length; i++) {
            var iSeq = menuElement.childNodes[i].getAttribute("sequence");
                if(iSeq)
                if(iSeq > description){
                    menuElement.childNodes[i].parentNode.insertBefore(menuOption, menuElement.childNodes[i]);
                    return menuOption
                }
        }
        AChld(menuElement, menuOption);
        return menuOption;
    };
}

ExecuteOrDelayUntilScriptLoaded(CustomCIMOpt, "core.js");

Tags:

Javascript