Can I call UI scripts from the portal?

[bonsai]

I'm trying to call a UI script by clicking a button I've implemented in the portal.
However, even though I've implemented a script that works on the platform, it doesn't work from the portal...

Is it possible to use UI scripts on the portal?
I'd like to know how.

[KrishnaMohan]

Hi @bonsai 

• Create Dependency package for widget
  A dependency package is a collection of Javascript and CSS files that can be then connected to a widget.

                                

       

• In UI script we should use angular module and name of the module ex: KnowledgeSearchService

• To Pass or inject the service or module in widget , use module name in client controller.

• Call ui script methods using this module name ex : KnowledgeSearchService.subscribe().
  
  For reference : https://devxxxxxx.service-now.com/sp_widget.do?sys_id=ff26f2b1db12220099f93691f0b8f5ce&sysparm_recor....

Refer above OOB widget which is implemented UI  Scripts for portals. 

Servicenow docs for Create a widget dependency. 

If this helps, please mark this as correct/helpful.

Regards and Thanks!
Krishnamohan Pyneni 

[Juhi Poddar]

Hello @bonsai 

Steps to meet the requirement:

• Create a dependency for the widget
• Add JS include to the dependency

• Attach the UI script in JS include

  
• The Ui script is now linked to a widget.

Hope this helps!

"If you found my answer helpful, please like and mark it as an "accepted solution". It helps future readers to locate the solution easily and supports the community!"

Thank You

Juhi Poddar

[bonsai]

I tried creating a dependency.

However, I can't set it in the client controller.

Setting it with "function(~){~}" results in an error and the dependency cannot be saved.

If I don't set "api.controller = function() {~}", an error occurs.

[Juhi Poddar · Accepted solution]

Hello @bonsai 

After following the steps in my previous reply, you can directly call the UI Script function from the client controller.

For example, if your UI Script contains:

function showAlert() {
	alert("test");
}

Once you add this UI script as a dependency in the widget’s related list, you can simply call the function in the client controller:

For example:

api.controller = function($scope) {
  /* widget controller */
  var c = this;
  showAlert();
};

Hope this helps!

"If you found my answer helpful, please like and mark it as an "accepted solution". It helps future readers to locate the solution easily and supports the community!"

Thank You

Juhi Poddar