GlideModal client script

Dazler
Mega Sage

‎02-15-2024 10:01 PM - edited ‎02-15-2024 10:03 PM

Hi,

 

I am working on a UI Page for a custom app from an onChange client script.  I got everything working.  Based on a choice field which is set as mandatory, if a user selects an option then a UI Page popups up in and displays additional fields for them to fill out.  Once the user selects the acknowledge button it triggers a glideAjax that will update the work notes.  This is all working.

 

When the user selects an option and the script include updates the work notes, the work notes are updated but the form does not save due to other fields on the main form being mandatory.  It's like the user would have to make sure all the other fields are populated before selecting an option from this specific field to complete the UI Page form.  I can't have this, is there a way to force a save of the ticket even if there are mandatory fields?  I need it to save and stay on the same page even if there are mandatory fields.  The user would be able to  so that they can continue filling out the rest of the form.

 

I even tried to update the same field in the script include with the value they selected to open the UI Page and that works, however, it also causes a loop due to the onChange client script.

 

Client Script

 

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
    if (isLoading || newValue === '') {
        return;
    }
    var dialogClass = GlideModal ? GlideModal : GlideDialogWindow;
    var dialog = new dialogClass("risk_acknowledgement", true);
    dialog.setTitle(getMessage("Risk Category Acknowledgement"));
    dialog.setPreference('sysparm_sys_id', g_form.getUniqueValue());
    dialog.setPreference('sysparm_curr_cat', g_form.getValue('risk_id'));
    dialog.setPreference('sysparm_prev_cat', oldValue);
    dialog.render(); //Open the dialog
}

 

 

UI Page - 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">
	
	<!-- Get values from dialog preferences passed in -->
  
	<g:ui_form>
	   <!-- Set up form fields and labels -->
   <table width="95%">
	   <tr>
		<td colspan="5">
       <div class="form-group form-horizontal" id="category-wrapper">
	     <div class="col-md-3 text-right">
		   <g:form_label>
			 Risk Category
		   </g:form_label>
	     </div>
	     <div class="col-md-9">
		  <input type="text" class="form-control" id="curr-cat" name="curr-cat" readonly="true" value="${JS:sysparm_curr_cat}" />
		<input type="hidden" class="form-control" id="prev-cat" name="prev-category" readonly="true" value="${JS:sysparm_prev_cat}" />
		     </div>
       </div>
	   </td>

	   </tr>
	   
	   	   <tr><td style="height: 15px"></td></tr>
	   
			<tr>	
		<td colspan="5">
			
		<div class="form-group form-horizontal" id="rimpact-wrapper">
	     <div class="col-md-3 text-right">
   <g:form_label>
			 Potential Impact
		   </g:form_label>
	     </div>
	     <div class="col-md-9">
				<textarea name="r_impact" id="r_impact" class="form-control" required="true" type="text" oninput="validateOnChange()" onchange="validateOnChange()"></textarea>
   
	     </div>
       </div>
             
	   </td>
	   </tr>

	   <tr><td style="height: 15px"></td></tr>
	   
			<tr>	
		<td colspan="5">
			
		<div class="form-group form-horizontal" id="rdescription-wrapper">
	     <div class="col-md-3 text-right">
   <g:form_label>
			 Risk Description
		   </g:form_label>
	     </div>
	     <div class="col-md-9">
				<textarea name="r_description" id="r_description" class="form-control" required="true" type="text" value="" oninput="validateOnChange()" onchange="validateOnChange()"></textarea>

   
	     </div>
       </div>
             
	   </td>
	   </tr>

<tr><td style="height: 25px"></td></tr>
	     <tr id="dialog_buttons">
        <td colspan="2" align="right">

		<footer class="modal-footer">
			
			<div id="dialog_buttons" class="clearfix pull-right no_next">
		<button type="button" class="btn btn-default" onclick="closeWindow()" title="${gs.getMessage('Close the dialog')}">${gs.getMessage('Cancel')}</button>
		<button type="button" class="btn btn-primary" id="acknowledge-button" title="${gs.getMessage('Acknowledgement')}" onclick="riskAcknowledge()">${gs.getMessage('Acknowledgement')}</button>
</div>
		</footer>
       </td>
     </tr>
	   
  </table>	
	</g:ui_form>
</j:jelly>

 

 

 

UI Page - Client script

 

    //get data from html
    currCategory = $("curr-category").value;
    prevCategory = $("prev-category").value;
    issTask = $("isstask").value;
    var impactWrapper = $('rimpact-wrapper');
    var descrWrapper = $('rdescription-wrapper');
    var acknowledgementBtn = $('acknowledge-button');

    if (currCategory == 'Compliance') {

        $("r_impact").value = 'penalties.';
        $("r_description").value = 'Failure to adhere .';

        $("r_impact").writeAttribute('disabled', true);
        $("r_description").writeAttribute('disabled', true);

    }  else {

        if (currCategory == 'Unknown') {

            impactWrapper.addClassName('is-required');
            descrWrapper.addClassName('is-required');
            acknowledgementBtn.addClassName('disabled');
            acknowledgementBtn.writeAttribute('aria-disabled', false);

        }
    }


    function validateOnChange() {

        var riskCategory = $("curr-category").value;
        var riskImpact = $("r_impact");
        var riskDescription = $("r_description");

        if (riskCategory == 'Unknown') {

            if (riskImpact.value.trim() != '') {

                impactWrapper.removeClassName('is-filled');

                acknowledgementBtn.removeClassName('disabled');
                acknowledgementBtn.writeAttribute('aria-disabled', false);

            } else {

                acknowledgementBtn.addClassName('disabled');
                acknowledgementBtn.writeAttribute('aria-disabled', true);
            }
        }
    }

    function riskAcknowledge() {

        var riskImpactSel = $("r_impact").value;
        var riskDescrSel = $("r_description").value;

        var gaRisk = new GlideAjax('RiskAck');
        gaRisk.addParam('sysparm_name', 'risknotes');
        gaRisk.addParam('sysparm_risk', currCategory);
        gaRisk.addParam('sysparm_descr', riskDescrSel);
        gaRisk.addParam('sysparm_impact', riskImpactSel);
        gaRisk.addParam('sysparm_isstask', issTask);
        gaRisk.getXML(riskNotes);

    }

    function riskNotes(response) {

        var respAnswer = response.responseXML.documentElement.getAttribute("answer");

        if (respAnswer) {

            g_form.addInfoMessage(respAnswer);

        } else {

            g_form.addErrorMessage('We are unable to update');

        }

	GlideDialogWindow.get().destroy(); //Close the dialog window

    }

    function closeWindow() {

        g_form.setValue('risk_identifier', prevCategory);
        GlideDialogWindow.get().destroy();
        return false;

    }

 

 

 

Script Include

 

var RiskAcknowledgement = Class.create();
RiskAcknowledgement.prototype = Object.extendsObject(global.AbstractAjaxProcessor, {

    //User has cancelled, revert Risk Category option back to previous save option

    risknotes: function() {

		var loggedUser = gs.getUserDisplayName();
		var getDate = new GlideDateTime();
        var riskCategory = this.getParameter('sysparm_risk');
        var riskImpact = this.getParameter('sysparm_impact');	
        var riskDescription = this.getParameter('sysparm_descr');			
        var issTask = this.getParameter('sysparm_isstask');

		var gr = new GlideRecordSecure('iss_task');
		gr.addQuery('sys_id', issTask);
		gr.query();

		if(gr.next()){

			gr.work_notes = 'Risk Category acknowledged on ' + getDate + ' by ' + loggedUser + '.\n\nRisk Category: ' + riskCategory + '\nPotential Impact: ' + riskImpact + '\nRisk Description: ' + riskDescription;
			gr.update();

			return 'Risk Category acknowledged on ' + getDate + ' by ' + loggedUser + '.<br/><br/>Risk Category: ' + riskCategory + '<br/>Potential Impact: ' + riskImpact + '<br/>Risk Description: ' + riskDescription;

		}
    },

    type: 'RiskAcknowledgement'
});

 

 

 

Any help would be appreciated.

0 Helpfuls
  • 2,166 Views
4 REPLIES 4

Aniket Chavan
Tera Sage
Tera Sage

‎02-15-2024 10:29 PM

Hello @Dazler ,

Can you please give a try to the modified script below for riskNotes function in your UI Page client script with the added force update:

function riskNotes(response) {
    var respAnswer = response.responseXML.documentElement.getAttribute("answer");

    if (respAnswer) {
        g_form.addInfoMessage(respAnswer);

        // Force update to save the form even if there are mandatory fields
        g_form.submit('sysverb_force_update');
    } else {
        g_form.addErrorMessage('We are unable to update');
    }

    GlideDialogWindow.get().destroy(); // Close the dialog window
}

 

Please Mark ✅Correct if this solves your query and also mark 👍Helpful if you find my response worthy based on the impact.

 

Thanks,

Aniket

 

0 Helpfuls

Dazler
Mega Sage
In response to Aniket Chavan

‎02-16-2024 09:56 AM

Hi @Aniket Chavan,

 

I added the code that you suggested, but it didn't work.  It didn't save the form at all.

0 Helpfuls

ricker
Tera Guru

‎02-16-2024 10:08 AM

@Dazler,

Sounds like those fields should not be mandatory yet....what about looping through the fields shown on the form, remove mandatory on everything, save and reload?  Seems like that could work.

 

Rick

0 Helpfuls

Dazler
Mega Sage
In response to ricker

‎02-16-2024 10:21 AM - edited ‎02-16-2024 10:23 AM

Thank you, @ricker.  I will look into that. I was hoping there was a more simpler way.

0 Helpfuls