How to set a field to mandatory in a UI page?

snow_beginner
Mega Guru

‎05-23-2023 06:19 AM

Hi everyone, so I have this UI page for an escalate button. It is 4 questions in there but about 3 are mandatory. I am not sure how to set them to mandatory. Please help I have written the code below for the UI page and the UI action. If I check the isolate script checkbox on the UI action, then it does make the first field mandatory but upon choosing the option it then goes to a new window and just does not work. I have put mandatory="true" in the text area in the html but that does not work on the actual form, but when I try the UI page then it works fine. 

 

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">
<body onload="hideonload()"> <!--calling method hideonload when form loads - 16606-->
	

	<g:ui_form>

		<g:evaluate var="jvar_esChoices" object="true"> //SFSTRY0016606
			var grChoice = new GlideRecord('sys_choice');
			grChoice.addEncodedQuery("nameSTARTSWITHincident^element=u_escalation_reason");
			grChoice.query();
			grChoice;

		</g:evaluate>
		
		<!-- from line 7 - 13 we are querying the sys_choice table, where element is u_escalation_reason and showing these choices into the dropdown field which is reason for escalation-->


		<div class="row"> 
			<div >
				<label for="dialog_comments_1" style="padding:16px;font-weight:bold;">Reason for escalation:</label>
				<select id="dialog_comments_1" name="dialog_comments_1" class="form-group" style="margin-left:16px !important;margin-right:16px !important" required="true" onload="escalateIncident()" onchange="processOther()" >
					<option value="">None</option> 
					<j:while test="${jvar_esChoices.next()}">
						<option value="${jvar_esChoices.getValue('label')}">${jvar_esChoices.getValue('label')}</option> 
					</j:while>
					<!-- lines 22-24 showing the choices into the selectbox which were queried in the above gliderecord-->
				</select>
		</div>

		</div>
		
		
		<div class="row" id="name1"> 
		<div id="other_label"> 
			<span style="padding:16px;font-weight:bold;" >
				Please provide your reason for escalation</span>
		</div>
		<div class="form-group" style="margin-left:16px !important;margin-right:16px !important">
			<textarea  mandatory="true" id="dialog_comments_4" name="dialog_comments_4" class="form-control" ></textarea>	
		</div>	
	</div>
		
	
		<div class="row">
		<div >
			
			<span style="padding:16px;font-weight:bold;" >
				Please provide any additional information that you believe will be relevant to the investigation</span>
		</div>
		<div class="form-group" style="margin-left:16px !important;margin-right:16px !important" >
			<textarea mandatory="true" id="dialog_comments_3" name="dialog_comments_3" class="form-control" ></textarea>	
		</div>	
	</div>
		
	
	<div class="row">
		<div >
			<span style="padding:16px;font-weight:bold;" >
				Name and number of an alternative contact should you be unavailable</span>
		</div>
		<div class="form-group" style="margin-left:16px !important;margin-right:16px !important">
			<textarea mandatory="true" id="dialog_comments_2" name="dialog_comments_2" class="form-control" ></textarea>	
		</div>	
	</div>
		
		<!--using divs to organize form elements of fields into 1 row per one element, so in row we are showing just 1 field-->

	<div class="modal-footer">
		<span class="pull-right">
			<button  id="cancel_button" onclick="window.GlideModalForm.prototype.locate(this).destroy(); return false" title="" type="cancel">
				Cancel
			</button>
			<button class="btn btn-primary" id="ok_button" onclick="escalateIncident()"  title="" type="submit">
				Escalate
			</button>


		</span>
	</div>
	</g:ui_form>
	</body>
</j:jelly>

UI page - client script

 

addLoadEvent(hideonload);
document.getElementById("dialog_comment_1").setAttribute("class","required"); 
function hideonload() {
    document.getElementById("name1").style.display = "none"; 
	
	
	//hiding the div id=name1 when the form loads since that holds the question for the other option. 
    
}

function escalateIncident() {
    //Make sure there are comments to submit
    var reason1 = document.getElementById("dialog_comments_1").value; 
	
	//getting the value of dropdown and storing them into the variable comments below
	
    var comments = '';
    if (reason1 == 'Other') { //16606-FA - capturing value of questions from escalation in the comments
        comments = 'Reason for escalation: ' + document.getElementById("dialog_comments_1").value + ' \n Name and number of an alternative contact \n ' + document.getElementById("dialog_comments_2").value + '\n reason for escalation \n' + document.getElementById("dialog_comments_4").value + ' \n additional information \n ' + document.getElementById("dialog_comments_3").value;


    } else {
        comments = 'Reason for escalation: ' + document.getElementById("dialog_comments_1").value + ' \n Name and number of an alternative contact \n ' + document.getElementById("dialog_comments_2").value + ' \n additional information \n ' + document.getElementById("dialog_comments_3").value;
    }
    escalate(comments, document.getElementById("dialog_comments_1").value);

    function getResponse(response) {

    }
}

function processOther() { //showing and hidhing the other related field, checking if reason is other, then show the field, otherwise hide it
    var reason = document.getElementById("dialog_comments_1").value;
    if (reason == 'Other') {
        document.getElementById("name1").style.display = '';
    } else {
        document.getElementById("name1").style.display = "none";
    }

}

 

UI Action = script

var dialogClass;
var justification;
function loadJustificationDialog() {

	dialogClass = new GlideModal('incident_escalation_justification');
	dialogClass.setTitle('Escalate Incident Justification');
	dialogClass.setSize(700,400);
	dialogClass.render();
}
//added line 7 to set the size of the escalate window which pops up.
function escalate(comments,escalation_reason) {
	dialogClass.destroy();
	
	//g_form.save();
		var ga = new GlideAjax('LBGEscalateIncident');
	ga.addParam('sysparm_name','escalate');
	ga.addParam('incident', g_form.getUniqueValue());
	ga.addParam('justification', comments);
	ga.addParam('escalation_reason', escalation_reason);
	ga.getXML(gaEscalateIncident);
	
	function gaEscalateIncident(response) {
		reloadWindow(window);
	}
}

if(typeof window == 'undefined')
	escalate_incident_confirmation();

//Server-side code
function escalate_incident_confirmation() {
	current.work_notes = 'This incident has been escalated';
	current.update();
	gs.addInfoMessage(gs.getMessage('{0} has been escalated', current.getDisplayValue()));
	action.setRedirectURL(current);
}

 

UI Action workspace script

function onClick(g_form) {
	
	openPopup();
	
	function openPopup() {
        if (!g_form.getControl('work_notes')) {
            getMessage('Cannot escalate incident as Worknotes is not visible', function(msg) {
                g_form.addErrorMessage(msg);
            });
            return false;
        }

        var url = "/lbg_inc_escalate_sow.do?sysparm_stack=no&sysparm_workspace=" + true;
        g_modal.showFrame({
            title: getMessage("Escalate Incident Justification"),
            url: url,
            size: 'lg',
            autoCloseOn: 'URL_CHANGED',
            callback: function(ret, data) {
                if (ret)
                    escalateIncident(data);
            }
        });
    }
	
    function escalateIncident(data) {
        var escalateComments = data.comments;
        escalate(escalateComments.toString());
	}
	
	function escalate(comments) {
        var ga = new GlideAjax('LBGEscalateIncident');
        ga.addParam('sysparm_name', 'escalate');
        ga.addParam('incident', g_form.getUniqueValue());
        ga.addParam('justification', comments);
        ga.getXML(gaEscalateIncident);

        function gaEscalateIncident(response) {
            g_form.save();
        }		
	}
}

 I 

0 Helpfuls
  • 1,737 Views
3 REPLIES 3

sourav1999
Mega Guru

‎05-23-2023 06:36 AM

• Go to the UI page you want to set the field to mandatory.
• Click on the field you want to make mandatory.
• Select the ‘Mandatory’ checkbox.
• Click ‘Save’.

 

For asking ServiceNow-related questions try this :

For a better and more optimistic result, please visit this website. It uses a Chat Generative Pre-Trained Transformer ( GPT ) technology for solving ServiceNow-related issues.

Link - https://nowgpt.ai/

 

For the ServiceNow Certified System Administrator exams try this :

https://www.udemy.com/course/servicenow-csa-admin-certification-exam-2023/?couponCode=NOW-DEVELOPER

0 Helpfuls

snow_beginner
Mega Guru
In response to sourav1999

‎05-30-2023 12:49 AM

Hi,

 

That does not work. There is an 'Escalate' button on the incident form which when pressed brings up a dialog box with questions asking why etc. When you click the question nothing happens. That dialog box or pop up is the code I have put in my question and is done in UI page. I have tried to set mandatory=true in the UI page code but that's not working. 

0 Helpfuls

jaheerhattiwale
Mega Sage
Mega Sage
In response to snow_beginner

‎05-30-2023 12:56 AM

@snow_beginner Set required="true" and then try.

 

Please mark as correct answer if this solves your issue.

Please mark the answer as correct or helpful based on impact
ServiceNow Community Rising Star, Class of 2023
0 Helpfuls