question Calling widget's client controller from Body HTML script tag in Developer forum

Calling widget's client controller from Body HTML script tag

Nisar2 — Wed, 25 Oct 2023 12:15:56 GMT

I've the following in the Body HTML template of widget.

The alert is working. But I've not been able to figure out how to pass that info to the client controller or server side. Any suggestions?

Re: Calling widget's client controller from Body HTML script tag

Nisar2 — Thu, 26 Oct 2023 03:48:06 GMT

Hi all,

Any suggestions for this?

Re: Calling widget's client controller from Body HTML script tag

ChrisBurks — Thu, 26 Oct 2023 15:07:26 GMT

I have never tried pulling in React in Service Portal, but the following might work.

In the client controller define some variables on $scope or c.

api.controller = function($scope){ var c = this; $scope.geoLoc = { "lat": "", "long": "" }; //to test if this works watch the variables for changes and log out values $scope.$watch( 'geoLoc ', function (newValue, oldValue ) { if(newValue.lat || newValue.long) console.log(newValue) }, true) ... }

Since your React script is outside AngularJS scope you'll need to grab it within the script tags in the HTML template. You'll also want to wrap within a setTimeout to ensure the elements are present before the script runs.

I know that doing this works without using React, so theoretically it should work with it.

Re: Calling widget's client controller from Body HTML script tag

Nisar2 — Fri, 27 Oct 2023 09:38:50 GMT

Brilliant answer. It does work. However, it takes a good 10-15 seconds for the watch() to trigger (after onSubmit() function is executed)

Is that normal or can something be done about it? I've written the code to send that info to server side but given that it's taking a long time to trigger, I'm wondering if that would be a good UX.

Re: Calling widget's client controller from Body HTML script tag

chrisism — Fri, 27 Oct 2023 13:23:29 GMT

Re: Calling widget's client controller from Body HTML script tag

ChrisBurks — Fri, 27 Oct 2023 13:31:31 GMT

Watch() triggers when the value is actually changed on the variables it's watching. I have never used React mix with AngularJS and in the Service Portal; so I don't know if that is the issue. However, the watch() isn't needed unless you really are needing it to do something once the value changes. I put that in the script just to have it console log out.

Re: Calling widget's client controller from Body HTML script tag

Nisar2 — Mon, 30 Oct 2023 04:06:55 GMT

@ChrisBurks wrote:
However, the watch() isn't needed unless you really are needing it to do something once the value changes

Unfortunately, I do need something to happen once the lat/long is selected. I make a call to the server script to update those values in the backend. So I'm assuming $watch() is the only way to do it in this case?

Re: Calling widget's client controller from Body HTML script tag

ChrisBurks — Mon, 30 Oct 2023 12:59:50 GMT

No, $watch() is not the only way. When the script reaches into the scope, if the call to the server script is created on $scope or c, then it is accessible just like the other variables. In this case don't use the $watch(), just pass the data straight to the script that calls to the server.

For example I'll replace the $watch() with a script that calls and passes data to the server.

api.controller = function($scope){ var c = this; $scope.geoLoc = { "lat": "", "long": "" }; //pass the longitude and latitude to server c.doAnUpdate = function (geoLoc) { c.server.get({ "action":"UPDATE", "geoLoc": geoLoc }) } //a .then() can be used after teh c.server.get() if you need to bring something back to the client after the server has done. it's job ... }

Now in the HTML <script> use that function

Server Script:

(function() { if(input && input.action == "UPDATE"){ //do what is needed with your values input.geoLoc } })();

Re: Calling widget's client controller from Body HTML script tag

Nisar2 — Tue, 31 Oct 2023 07:52:35 GMT

That's great. Thanks. I just wan't sure if I could pass that from the <script> tag. Looks like we can.