ui page processing script is not working

Roshani · ‎03-19-2021

Hi All,

I have a ui page , its processing script is not working can somebody help me where i am doing wrong on code

HTML :

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide"
xmlns:j2="null" xmlns:g2="null">

<body onload="hide()">
<g:ui_form>
<input type="hidden" id="type" value="" name="type"/>
<table style="width:600px">
<input type="hidden" id="document_id" name="document_id" value="${sysparm_document_id}" />
<input type="hidden" id="table_id" name="table_id" value="${sysparm_table}" />
<input type="hidden" id="table_name" name="table_name" value="dms_document" />
<input type="hidden" id="generated_by" name="generated_by" value="user" />
<input type="hidden" id="add_clicked" name="add_clicked" value="ok" />
<input type="hidden" id="user1" name="user1" />
<input type="hidden" id="generated_byy" name="generated_byy" value="group" />
<input type="hidden" id="group" name="group" />
<tr>
<td>
<label for="name">Please select the required approval</label>
</td>
<td>
<select id="quick_message_dropdown" onChange="showHide(this)">
<option value="">None</option>
<option value="user">User</option>
<option value="group">Group</option>
</select>
</td>
</tr><br/>
<tr id="userReference">
<td>
<label for="name">${gs.getMessage('User')}</label>
</td>
<td nowrap="true" align="left">
<g:ui_reference name="user_query" id="user_query" table="sys_user" query="active=true" />
</td>
</tr>

<tr id="groupReference">
<td>
<label for="name">${gs.getMessage('Group')}</label>
</td>
<td nowrap="true" align="left">
<g:ui_reference name="group_query" id="group_query" table="sys_user_group" query="active=true"/>
</td>
</tr>

<tr>
<td>
<label for="revision">${gs.getMessage('Comments')}</label>
</td>
<td>
<input id="sequence" name="sequence" />
</td>
</tr>

<tr>
<td colspan="2" height="20px"></td>
</tr>
<tr>
<td colspan="2">
<g:dialog_button onclick=" return validateApprover();"
name="" id="add">${gs.getMessage('Add')}</g:dialog_button>
</td>
</tr>
</table>
</g:ui_form>
</body>

</j:jelly>

CLIENT SCRIPT :

addLoadEvent(hide);

function hide() {
gel('userReference').style.display = 'none';
gel('groupReference').style.display = 'none';
}

function showHide(object) {

if (object.value == 'user') {
gel('userReference').style.display = '';
gel('groupReference').style.display = 'none';
gel("type").value = 'user';
} else if (object.value == 'group') {
gel('groupReference').style.display = '';
gel('userReference').style.display = 'none';
gel("type").value = 'group';
} else {
gel('userReference').style.display = 'none';
gel('groupReference').style.display = 'none';
gel("type").value = '';
}

$("user1").setValue($($('user_query').getValue()).getValue());
$("group").setValue($($('group_query').getValue()).getValue());

return true;

}

function validateApprover() {
gel("add_clicked").value = 'ok';
var userfield = gel('user_query').value;
var groupfield = gel('group_query').value;
var apprtype = gel('type').value;
var addButton = gel('add');
//alert(instanceName);
//document.getElementById('add').style.display='none';

//var invalidFields = new Array();
if (apprtype == 'user' && userfield == "" && $("sequence").getValue() == "") {

alert("${gs.getMessage('Enter a user')}");
alert("${gs.getMessage('Enter a comments')}");
//addButton.disabled = true;
return false;
}

if (apprtype == 'group' && groupfield == "" && $("sequence").getValue() == "") {

alert("${gs.getMessage('Enter a group')}");
alert("${gs.getMessage('Enter a comments')}");

return false;
}

if (apprtype == '') {
alert("${gs.getMessage('Select User or Group Approval')}");
return false;
}
if ($("sequence").getValue() == "") {
alert("${gs.getMessage('Enter a comments')}");
return false;
}
g_form.save();

document.getElementById('add').disabled = 'true';
return true;

}

PROCESSING SCRIPT:

(function(_this) {
var urlOnStack = gs.getSession().getUrlOnStack();

gs.addInfoMessage('loop');
if (add_clicked == 'ok') {

if(type == 'user'){
var gr = new GlideRecord('sysapproval_approver');
gr.initialize();
gr.source_table = table_id;
gr.document_id = document_id;
gr.state= 'requested';
gr.sysapproval = document_id;
gr.approver = request.getParameter("user_query"); //you had user, rather it should be id value
gr.comments = sequence;
gr.insert();
gs.addInfoMessage("User added in approver list " );

var gra = new GlideRecord('sn_hr_core_case_payroll');
gra.get(document_id);
gra.state = 11;
gra.approval = 'requested';
gra.update();
}

if(type == 'group'){
var group1 = new GlideRecord('sysapproval_group');
group1.initialize();
group1.assignment_group = request.getParameter("group_query"); //you had group, rather it should id value
group1.approval = 'requested';
group1.parent = document_id;
group1.comments = sequence;
group1.insert();
gs.addInfoMessage("Group added in approver list " );
var grpcase = new GlideRecord('sn_hr_core_case_payroll');
grpcase.get(document_id);
grpcase.state = 11;
grpcase.approval = 'requested';
grpcase.update();
action.setRedirectURL(current);
}
response.sendRedirect(urlOnStack);
}
response.sendRedirect( "/" + table_id + ".do?sys_id=" + document_id);
})(this);

Ankur Bawiskar · ‎03-20-2021

@Roshani

I did this and it went inside the processing script

Update as this

Part in blue is added

HTML:

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide"
       xmlns:j2="null" xmlns:g2="null">

   <body onload="hide()">
       <g:ui_form>
           <input type="hidden" id="type" value="" name="type"/>
           <table style="width:600px">
               <input type="hidden" id="document_id" name="document_id" value="${sysparm_document_id}" />
               <input type="hidden" id="table_id" name="table_id" value="${sysparm_table}" />
               <input type="hidden" id="table_name" name="table_name" value="dms_document" />
               <input type="hidden" id="generated_by" name="generated_by" value="user" />
               <input type="hidden" id="add_clicked" name="add_clicked" value="ok" />
               <input type="hidden" id="user1" name="user1" />
               <input type="hidden" id="generated_byy" name="generated_byy" value="group" />
               <input type="hidden" id="group" name="group" />
               <tr>
                   <td>
                       <label for="name">Please select the required approval</label>
                   </td>
                   <td>
                       <select id="quick_message_dropdown" onChange="showHide(this)">
                           <option value="">None</option>
                           <option value="user">User</option>
                           <option value="group">Group</option>
                       </select>
                   </td>
               </tr><br/>
               <tr id="userReference">
                   <td>
                       <label for="name">${gs.getMessage('User')}</label>
                   </td>
                   <td nowrap="true" align="left">
                       <g:ui_reference name="user_query" id="user_query" table="sys_user" query="active=true" />
                   </td>
               </tr>

               <tr id="groupReference">
                   <td>
                       <label for="name">${gs.getMessage('Group')}</label>
                   </td>
                   <td nowrap="true" align="left">
                       <g:ui_reference name="group_query" id="group_query" table="sys_user_group" query="active=true"/>
                   </td>
               </tr>

               <tr>
                   <td>
                       <label for="revision">${gs.getMessage('Comments')}</label>
                   </td>
                   <td>
                       <input id="sequence" name="sequence" />
                   </td>
               </tr>

               <tr>
                   <td colspan="2" height="20px"></td>
               </tr>
               <tr>
                   <td colspan="2">

                       <g:dialog_buttons_ok_cancel id="add" ok_text="${gs.getMessage('Add')}" ok="return validateApprover();"/>
                   </td>
               </tr>
           </table>
       </g:ui_form>
   </body>

</j:jelly>

Client Script:

addLoadEvent(hide);

function hide() {
   gel('userReference').style.display = 'none';
   gel('groupReference').style.display = 'none';
}

function showHide(object) {

   if (object.value == 'user') {
       gel('userReference').style.display = '';
       gel('groupReference').style.display = 'none';
       gel("type").value = 'user';
   } else if (object.value == 'group') {
       gel('groupReference').style.display = '';
       gel('userReference').style.display = 'none';
       gel("type").value = 'group';
   } else {
       gel('userReference').style.display = 'none';
       gel('groupReference').style.display = 'none';
       gel("type").value = '';
   }

// commented this

   //$("user1").setValue($($('user_query').getValue()).getValue());
   //$("group").setValue($($('group_query').getValue()).getValue());

   return true;

}

function validateApprover() {
   gel("add_clicked").value = 'ok';
   var userfield = gel('user_query').value;
   var groupfield = gel('group_query').value;
   var apprtype = gel('type').value;
   var addButton = gel('add');
   //alert(instanceName);
   //document.getElementById('add').style.display='none';

   alert('inside validateApprover');

   //var invalidFields = new Array();
   if (apprtype == 'user' && userfield == "" && $("sequence").getValue() == "") {

       alert("${gs.getMessage('Enter a user')}");
       alert("${gs.getMessage('Enter a comments')}");
       //addButton.disabled = true;
       return false;
   }

   if (apprtype == 'group' && groupfield == "" && $("sequence").getValue() == "") {

       alert("${gs.getMessage('Enter a group')}");
       alert("${gs.getMessage('Enter a comments')}");
       return false;
   }

   if (apprtype == '') {
       alert("${gs.getMessage('Select User or Group Approval')}");
       return false;
   }
   if ($("sequence").getValue() == "") {
       alert("${gs.getMessage('Enter a comments')}");
       return false;
   }
   //g_form.save();

   document.getElementById('add').disabled = 'true';
   return true;

}

Processing Script:

No change

Regards
Ankur

Regards,
Ankur
✨ Certified Technical Architect || ✨ 9x ServiceNow MVP || ✨ ServiceNow Community Leader

-O- · ‎03-20-2021

Normally UI Pages have nothing to do with g_form. In your case it is available because you are showing the UI Page in a dialog on a form that has g_form. But it still has nothing to do with the UI Page. Calling any method of it will act over the form, not the UI Page (in the dialog).

Back to the problem, to execute the processing script you need to submit the form generated by the ui_form UI Macro, doing one of two things:

- configure the OK button to act as a submit button:

<g:dialog_button>${gs.getMessage('Add')}</g:dialog_button>

or if you want to express that explicitly:

<g:dialog_button type="submit">${gs.getMessage('Add')}</g:dialog_button>

- or, because you want validation, replace

g_form.save();

with code to submit the form.

The form is generated with an id that is the concatenation of the text 'form.' and the sys_id of the UI Page. Knowing that the sys_id of the UI Page is contained in a global variable named... sys_id, you might

1. add a new line at the beginning of the UI Page, to save this sys_id the same way the ui_form UI Macro does:

<j2:set var="jvar_form_name" value="form.${sys_id}"/>

2. re-write the relevant line in the Client script, in place of

g_form.save();

something like this:

jQuery(document.getElementById('$[ jvar_form_name; ]')).submit();

(yes, phase 2 jelly expansion works in Client script of UI Pages too.)