How to store common code for UI Action script in a UI Script to be shared by many similar UI Action

Egil Kjørstad
Tera Contributor
In a scoped app Prosjekt (Project) we want to use UI Action buttons to change Project status.
In table Instruks, we keep instructions on what to remember before proceeding to next Status.
From the UI Action we call method getInstruksTekst (from a script include) and get the instructions in return.
This is presented in a popup confirmation.
If the user confirms (by OK) we call another method updateProsjektstatus in the same script include to update the Project record with the new status.
 
A major part of the code in the script field of the UI Action is common for all 8 Statuses the Project must go through.
How can i call this code from a common place, i.e UI Script, with newStatus as parameter?
 
 
//------------------------------
//UI Action for changing Status
//Client-side 'onclick' function
//------------------------------
 
function runClientCode_20() {
 
    //Get instruction before changing to next Projectstatus stage
 
    var newStatus = "20";  //Awaiting customer confirmation
    var ajaxUtil = 'x_gehas_nisprosjek.geh_UIActionUtils'; //Script include
 
    var refProsjekt = g_form.getUniqueValue();
 
// Common code START
// Same code for alle UI Actions from here. How can i call this code from a common place, i.e UI Script, with newStatus as parameter?
 
    var ga = new GlideAjax(ajaxUtil);
    ga.addParam('sysparm_name', 'getInstruksTekst'); Get instruction before next Project stage
    ga.addParam('sysparm_nykode', newStatus);
    ga.getXMLAnswer(function(response) {
        var tekst = response; //Return the instructions for 
 
        //Show instructions in a popup confirm
        //confirm('Instructions befor next stage: ' + tekst);
        var answer = confirm(tekst + '\n\n' + "Continue?");
        if (answer == true) {
            
            //Call to another GlidAjax if user clicks OK to continue. Will update the Project status on the "refProsjekt" record
            var gaUpdate = new GlideAjax(ajaxUtil);
            gaUpdate.addParam('sysparm_name', 'updateProsjektstatus');
            gaUpdate.addParam('sysparm_prosjekt', refProsjekt);
            gaUpdate.addParam('sysparm_newstatus', newStatus);
            gaUpdate.getXMLAnswer(function(responseUpdate) {
                var updateResult = responseUpdate;
                //alert("End of story: \n" + updateResult);
                location.reload(true);
            });
        }
            
    });
//Common code END
 
}
 
===================
I have tried UI Script below, and called it from a UI Action like this:
x_gehas_nisprosjek.geh_Prosjektstatus_Change.oppdaterProsjektstatus(nyKode);
Browser says:
Uncaught ReferenceError: x_gehas_nisprosjek is not defined
===================
 
var x_gehas_nisprosjek = x_gehas_nisprosjek || {};
 
x_gehas_nisprosjek.geh_Prosjektstatus_Change = (function() {
"use strict";
 
    /* set your private variables and functions here. For example: 
        var privateVar = 0; 
        function private_function() {
            return ++privateVar;
        }
    */
 
    /* Share variables between multiple UI scripts by adding them to your scope object. For example: 
        x_gehas_nisprosjek.sharedVar = 0; 
 
    Then access them in your scripts the same way. For example: 
        function get_shared() {
            return x_gehas_nisprosjek.sharedVar;
        }
    */
 
return {
 
oppdaterProsjektstatus: function(nyKode) {
 
            alert("oppdaterProsjektstatus [1]"); // Proof of concept 😉
 
},
 
        /* set your public API here. For example:
                incrementAndReturnPrivateVar: function() {
                    return private_function();
                },
        */
 
type:  "geh_Prosjektstatus_Change"
};
})();

 

6 REPLIES 6

Maik Skoddow
Tera Patron
Tera Patron

I'm not a fan of UI Scripts. Any JavaScript error in a UI Script can lead to a broken instance. Trust me, I know what I'm talking about. With a broken UI Script in place I wasn't able anymore to log in.

As a workaround, I recommend using an onLoad Client Script which has no code in the onLoad function. But below that empty function you can place any client-side code like a utils class which encapsulates all the required code. As the code is present in the form also the client-side part of a UI Action then can invoke it.

Egil Kjørstad
Tera Contributor

Thanks for the advice and the workaround ðŸ™‚
Can you also provide an example "utils class" that i.e returns "Hello world" just as POC?
I'm not so familiar with that kind of construction 😉
Egil

MaikSkoddow_0-1717162037029.png

 

call method doWhatEverYouWant() in your UI Action

Egil Kjørstad
Tera Contributor

Sorry, I can't make it work:
UI Action:

EgilKj_rstad_0-1717163433070.png

Client Script:

EgilKj_rstad_1-1717163492971.png

Result:

EgilKj_rstad_2-1717163544630.png

Uncaught ReferenceError: showNewStatusCode is not defined

 

Can you spot the error?

Egil