Load dynamically JavaScript file inside Custom Action

This starts to be very common scenario in the SharePoint online projects:

You want to have custom actions (“My Action”) that execute custom logic.

The main challenge is how to load the JavaScript file with this custom logic (/sites/demo/SiteAssets/Actions/dts.demo.script.js) only when the custom action needs it.

One approach described in many posts is to use a Script link. 

Here is a working example:

    function RegisterScriptLink() {

        var scriptBlock = 'var headID = document.getElementsByTagName("head")[0];var newScript = document.createElement("script");newScript.type = "text/javascript";newScript.src = "'
        scriptBlock += '/sites/demos/SiteAssets/Actions/dts.demo.script.js' + '?ver=' + ((new Date()) * 1);
        scriptBlock += '";headID.appendChild(newScript);';

        var context = new SP.ClientContext.get_current;
        this.site = context.get_web();
        var collUserCustomAction = this.site.get_userCustomActions();
        var scriptLink = collUserCustomAction.add();
        scriptLink.set_name('DTSDemo Script');
        scriptLink.set_title('DTSDemo Script');
        scriptLink.set_scriptBlock(scriptBlock);
        scriptLink.set_location('ScriptLink');
        scriptLink.set_group('');
        scriptLink.update();
        context.executeQueryAsync(
            function (a, b) {
                console.log('success');
            },
                function (a, b) {
                    console.log('error');
                    console.log(a);console.log(b);
                });
    }
    

The problem here is that you will load the script to all pages inside the web (!), which is not the best architecture.

The solution I find better is to load the file inside the custom Action.

Note that I create the custom actions with JavaScript instead of SharePoint designer! This one way to automate and simplify the deployment of your project. Also this provides you more options to configure the action.

Ribbon Action
Use the EnabledScript methold to load you script. Here is an example:

ECB Action

Here is the link to the code from this post.



PS: Your feedback is highly appreciated.