Using Angular Service Providers in Service Portal

[jonlind]

Hello.   I'm trying to create an Angular Service Provider to share information amongst widgets.   There seem to be a lot of examples of Directives, but I have not been able to find an example of an Angular Service Provider in Service Portal for ServiceNow (you can see how this might be a tough item to search for).

Being intrepid I tried it anyway, and went and created a new Angular Provider of type "Service", named it "breadcrumbServiceProvider", and added it to the Angular Provider related list on my widget.

The widget's client script declaration looks like this:

The error I get from the browser on load is:

js_includes_sp.jsx?v=05-03-2016_1034&lp=Wed_May_04_13_01_59_PDT_2016&c=11_202:11755 Error: [$injector:unpr] Unknown provider: breadcrumbServiceProvider <- breadcrumbService

The provider is configured thusly:

So the question is: how do you set up and inject a Widget Angular Service Provider?

[guy_boulton]

No news about it yet. A workaround I use is to access the configuration fields via the Widget Instance record for the widget you want to configure. Its a bit of a pain as you need to write your configuration as valid JSON but it gets the job done. Hopefully they will resolve it soon.

[jamesfreund]

changing the options on the record will definitely do for now. Thanks for the heads up on that one! Really hope it gets fixed soon or at least with istanbul

[guy_boulton]

No problem. Another method is rather than adding options via the widget editor, you extend one of the Instance tables and add the options in there and then make those fields visible on the instance form if you don't want to write JSON. We reserver that for settings that might be reusable across multiple widgets but up to you.

[jamesfreund]

I've posted this same issue here at the unofficial github of service portal documentation:

Service Portal - Page designer does not play nice with shared services · Issue #187 · service-port...

Perhaps we can finally get some of this functionality fixed up. Has anyone found any workarounds to using services and still having the widgets work in the page designer?

[aaronradford]

I just had this same issue. I resolved it using the following (basic) approach.

Define your provider service using the service name as the function:

Angluar provider name: spCustomService

function spCustomService(){

this.myFunc=function(s){

return 'hello from spCustomService.myFunc:'+s;

};

}

Define any additional functions/variables under the this keyword (same as function prototype extensions).

Next, in your widget client script, add spCustomService to the list of parameters (without the $ symbol):

You can then reference the custom service functions from within the widget.

function ($scope, $http, spUtil, nowAttachmentHandler, $rootScope, $sanitize, $window, $sce, spCustomService ) {

var customServiceMessage=spCustomService.myFunc("Hello from my widget controller");

console.log(customServiceMessage);

}

Load your widget and look in the browser console, your output will be this:

hello from spCustomService.myFunc:Hello from my widget controller