Calling client script from HTML Template's script section

[fact]

Hello Awesome Developers,

Please help me here.

I am developing a service portal page as I am new to this, started with a huge HTML Template with <script> and several functions in it. These functions parses the input fields from the HTML page and applies complex parsing logic. After processing, I want to store the results in a table and so need to call a client function which will then pass the data to the Server Script.

I can call the Client Script's function from the HTML using the ng-click , however I want to call the Client Script function from the <script> function. This is complaining as function_name is not defined when coded c.clientScriptFunctionName()

Is there a way to call the client script function Also can I put all the functions from the <script> section in to the Client Script section.

My Widget looks something like this

HTML Template
============
<script>
function f1(){
read the inputs from the html and parse
}
function f1(){
further processing
global_run_id = 1;
c.call_clientscriptfunction()
}
 </script>

<div class="panel panel-default">
<div class="col-sm-9"><input type="text" class="form-control" id="Readtext" /></div>
----
----

Client Script
==========
api.controller=function() {
/* widget controller */
var c = this;
c.call_clientscriptfunction = function()
{
c.data.run_id = global_run_id;
------
------
c.server.update();
}
};

Server Script:
==========
(function() {
if(input)
{
var gr = new GlideRecord('u_table');
gr.initialize();
gr.setValue('u_run_id',input.run_id);
}
})();

[jaheerhattiwale]

@fact You can write the functions directly in the Service Portal client controller. Why you are writing it in a <script> tag. Any specific reason?

[fact]

There is no specific reason, I just started to learn Service Portal. There are onChange events , can it be handled if I start to write it as Client Script?

[jaheerhattiwale]

@fact There is no way to trigger a function in client controller from <script> tag in HTML.

So to handle the onChange event you can use ng-change, like below

HTML:

<input type="text" ng-change="c.inputChanged()" />

Client Controller:

c.inputChanged = function(){

alert("input changed");

}

Please mark as correct answer or helpful if this solves your issue.

[Sonali Nimbalk1]

@fact 

The widget starts from the server script where the data objects get populated, then it reaches the client where it gets updated by form-based user action like save, then on the client side, the updated data is copied into the input object and passed back to the server.

For example: 

Here we will load an incident name and short description from server to the client using the data object. (This will update your short description in the incident table)

HTML

<div>
  {{data.number}}
 <textarea ng-model="data.short_description"></textarea>
 <button ng-click="save()">Save</button>
</div>

Client Script

function($scope, spUtil) {
    /* widget controller */
    var c = this;

    $scope.save = function() {
        spUtil.update($scope)
    }


    spUtil.recordWatch($scope, "incident", "number=INC0009009",
        function(name, data) {
            spUtil.update($scope)
        });
}

Server Script:

(function() {

    var incRec = new GlideRecord('incident');
    incRec.addQuery('number', 'INC0009009');
    incRec.query();
    if (incRec.next()) {
        data.number = incRec.number.toString();
        data.short_description = incRec.short_description.toString();
    }

    if (input) {

        var incRec1 = new GlideRecord('incident');
        incRec1.addQuery('number', 'INC0009009');
        incRec1.query();
        if (incRec1.next()) {
            incRec1.short_description = input.short_description;
			incRec1.update();
        }
    }

})();

Output:

Please hit like and mark my response as correct if that helps
Regards,
Sonali