Load widget dependencies dynamically

[Tobias Persson_]

Hi,

is it possible to load an Angular Provider dynamically to a Service Portal widget? I have a case where I need to keep client side callbacks in different Angular Providers and don't want to load all providers but only the one that is needed.

Any ideas if this is possible?

Thanks and regards,

Tobias

[Community Alums · Accepted solution]

Hi @Tobias Persson_ ,

In your widget’s client script, create separate Angular providers for different functionality.

var app = angular.module('myWidgetApp', []);
app.provider('myDynamicProvider', function() {
    this.$get = function() {
        // return your dynamic provider logic here
        return {
            getData: function() {
                // return data or logic
            }
        };
    };
});

Instead of loading all providers at once, you can conditionally load the one needed by injecting it when required.

var injector = angular.injector(['myWidgetApp']);
var dynamicProvider = injector.get('myDynamicProvider');
dynamicProvider.getData();

[Tobias Persson_]

Hi @Community Alums ,

thanks for your answer. I had already found the solution with injectors after posting my question. But as your reply supported that idea and made me confident to try it out I will mark it as solution. 

But for ServiceNow I think it is better to not define the providers inside Client Script. I went to Angular Providers table in ServiceNow and created 2 Angular Providers. Then I took my Widget and opened in in Backend view. There I was able to add the Angular Providers to my Widget. This way I do not have to clutter my Client Script code inside the widget.

Normally you would then do the following to make these providers available inside Client Script. In the header of Client Script you would enter it like this (given the 2 providers are called "provOne" and "provTwo"):

api.controller=function($scope, provOne, provTwo) {
    // call function inside provOne
    provOne.callableFunctionInsideProvOne();
};

But as I wanted it dynamically I would now rather do this:

api.controller=function($scope, $injector) {
    var provOne = '';
    var provTwo = '';
	
    // load provider
    if ($injector.has('provOne') && someOtherChecks) {
        provOne = $injector.get('provOne');
        provOne.callableFunctionInsideProvOne();
    }
};

I am not sure if this has any effects on initial loading time for that widget. But I need this more to reduce the possibilities of function names being the same in multiple providers (with different functionalities inside ... too long to explain here 😉 ).

Hope this summary helps if someone needs to know how its done. 

Regards,

Tobias