ui macro script not opening dialouge window

Debasis Pati
Tera Guru

Hello All,

i have a requirement there is a link called Read Policy and when i click it it should open a diaouge window which will have policy details and two buttons Accept and cancel if i click on cancel it should close hthe dialouge window and if i accept it there is another variable call click accept policy that should be checked as true.

I ahev created aan ui page and as well as a macro but its not opening the dialouge window.
the same functionality i have already achieved in portal view using widgets but for nqtive i am trying to achieve it but i am not able to get it.

ui page script below

<?xml version="1.0" encoding="UTF-8"?>
<j:jelly xmlns:j="jelly:core" xmlns:g="glide" xmlns:gs="jelly:script">
    <g:include src="scripts/sn_ui_dialog.js"/>
    <g:script>
        function acceptPolicy() {
            g_form.setValue('click_accept_policy', 'true');
            GlideDialogWindow.get().destroy();
        }
    </g:script>
   
    <div>
        <p>Please review and accept the policy.</p>
        <br/>
        <button onclick="acceptPolicy()">Accept</button>
        <button onclick="GlideDialogWindow.get().destroy();">Cancel</button>
    </div>
</j:jelly>


Ui macro
<?xml version="1.0" encoding="UTF-8"?>
<j:jelly xmlns:j="jelly:core" xmlns:g="glide" xmlns:gs="jelly:script">
    <g:script>
        function openPolicyDialog() {
            var dialog = new GlideDialogWindow('policy_modal');
            dialog.setTitle('Policy Agreement');
            dialog.render();
        }
    </g:script>

    <div>
        <a href="javascript&colon;openPolicyDialog();" style="cursor:pointer;">Read Policy</a>
    </div>
</j:jelly>


@Ankur Bawiskar  can you suggest what is going wrong with the script?









1 ACCEPTED SOLUTION

KrishnaMohan
Giga Sage

Hi @Debasis Pati ,

Recently we have implemented the same may be text is different. Please try with below code and modify as per your requirement.
UI page : accept_policy

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<g:ui_form>
	<input type="hidden" id="sysparm_proceed" name="sysparm_proceed" value="false"/>
	<div style="text-align:left;">
		<br/>
		<j:set var="jvar_objList" value="${sysparm_delobj_list}"/>
		<j:set var="jvar_is_domain_used" value="${sysparm_is_domain_used}" />
		<j:choose>
			<div>
				<br/>${JS:sysparm_body_message}
			</div><br/>
			<div>
				${JS:sysparm_body_message_2}<br/>
				<label>
					<br/>
					<br/>
					<input type="checkbox" id="agree_checkbox" style="margin: 0 4px 4px 0"></input>
					${JS:sysparm_body_message_3}
				</label>
			</div>
		</j:choose>
		<br/>
		<div align="right" class="modal-footer">
			<g:dialog_buttons_ok_cancel ok="return ok()" ok_type="button" ok_style_class="btn btn-primary" ok_text="${sysparm_ok_text}" cancel_text="${gs.getMessage('Cancel')}" cancel="return destroyDialog()" cancel_type="button"/>
		</div>
	</div>
</g:ui_form>
	<script>
		var ok_button = document.getElementById("ok_button");
		ok_button.disabled = true;
		var checkbox = document.getElementById("agree_checkbox");
		checkbox.focus();
		checkbox.addEventListener("change", function() {
			if (this.checked) {
				ok_button.disabled = false;
			} else {
				ok_button.disabled = true;
			}
		});
	</script>
</j:jelly>

Client Script :  

function ok() {
    var checkbox = document.getElementById("agree_checkbox");
    if (!checkbox.checked) {
        return;
    }
	var functionName = '${JS:sysparm_ok_function}';
	if(functionName == 'Apply') {
		var sysId = '${JS:sysparm_policy_sys_id}';
		applyConfirmed(sysId);
	} else {
		resetConfirmed();
	}
	destroyDialog();
	return true;
}

function cancel() {
    destroyDialog();
    return false;
}

function destroyDialog() {
    GlideDialogWindow.get().destroy();
}
function resetConfirmed() {
    var ga = new GlideAjax('global.ResetDefaultConsentPolicyOnCountries');
    ga.addParam('sysparm_name', "reset");
    ga.getXML(updateRecords);
}

function applyConfirmed(sysId) {
    var ga = new GlideAjax('global.ApplyConsentPolicyOnCountries');
    ga.addParam('sysparm_name', "apply");
	ga.addParam('sysparm_policy_sys_id', sysId);
    ga.getXML(updateRecords);
}

function updateRecords(response) {
    var answer = response.responseXML.documentElement.getAttribute("answer");
	var u_g_form = new GlideForm('',true,true,true,true);
	if (answer && answer !== '')
		u_g_form.addInfoMessage(new GwtMessage().getMessage('Accepted successfully.'));
	else
		u_g_form.addErrorMessage(new GwtMessage().getMessage('Action failed.'));
}


UI action :  Accept policy 

function acceptPolicy(){
		var sysId = "";
	var name = "";
	if (typeof rowSysId == 'undefined')
		sysId = gel('sys_uniqueValue').value;
	else
		sysId = rowSysId;
	var gr = new GlideRecord("sys_analytics_consent_policy");
	if (gr.get(sysId)) {
		name = gr.name + "";
	}
	var policyName = name;
	var bodyMessage = new GwtMessage().getMessage('You are about to apply the {0} policy to all countries. This selection overrides any previously assigned policy.', policyName);
	var bodyMessage2 = new GwtMessage().getMessage('Are you sure you want to apply {0} policy to All countries?', policyName);
	var bodyMessage3 = getMessage('Yes, I agree.');
	var okText = getMessage('Agree');

    var dialogClass = (typeof GlideModal !== 'undefined') ? GlideModal : GlideDialogWindow;
    var dlg = new dialogClass('accept_policy');
    dlg.setTitle(new GwtMessage().getMessage('Apply {0} Policy to All Countries', policyName));
    dlg.setWidth(450);
    dlg.setPreference('sysparm_body_message', bodyMessage);
    dlg.setPreference('sysparm_body_message_2', bodyMessage2);
    dlg.setPreference('sysparm_body_message_3', bodyMessage3);
    dlg.setPreference('sysparm_ok_text', okText);
	dlg.setPreference('sysparm_policy_sys_id', sysId);
	dlg.setPreference('sysparm_ok_function', 'Apply');
    dlg.setPreference('sysparm_parent_form', this);
    dlg.render();
}

 output : 

KrishnaMohan_0-1748356632450.png


If my response helped please mark it correct and close the thread so that it benefits future readers.

Best Regards,
Krishnamohan

 

View solution in original post

4 REPLIES 4

Ankur Bawiskar
Tera Patron
Tera Patron

@Debasis Pati 

so what debugging did you perform?

If my response helped please mark it correct and close the thread so that it benefits future readers.

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

Hello Ankur,

I have tried different methods like dialogue window and as well i have tried modals but no luck.

Regards
Debasis

KrishnaMohan
Giga Sage

Hi @Debasis Pati ,

Recently we have implemented the same may be text is different. Please try with below code and modify as per your requirement.
UI page : accept_policy

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<g:ui_form>
	<input type="hidden" id="sysparm_proceed" name="sysparm_proceed" value="false"/>
	<div style="text-align:left;">
		<br/>
		<j:set var="jvar_objList" value="${sysparm_delobj_list}"/>
		<j:set var="jvar_is_domain_used" value="${sysparm_is_domain_used}" />
		<j:choose>
			<div>
				<br/>${JS:sysparm_body_message}
			</div><br/>
			<div>
				${JS:sysparm_body_message_2}<br/>
				<label>
					<br/>
					<br/>
					<input type="checkbox" id="agree_checkbox" style="margin: 0 4px 4px 0"></input>
					${JS:sysparm_body_message_3}
				</label>
			</div>
		</j:choose>
		<br/>
		<div align="right" class="modal-footer">
			<g:dialog_buttons_ok_cancel ok="return ok()" ok_type="button" ok_style_class="btn btn-primary" ok_text="${sysparm_ok_text}" cancel_text="${gs.getMessage('Cancel')}" cancel="return destroyDialog()" cancel_type="button"/>
		</div>
	</div>
</g:ui_form>
	<script>
		var ok_button = document.getElementById("ok_button");
		ok_button.disabled = true;
		var checkbox = document.getElementById("agree_checkbox");
		checkbox.focus();
		checkbox.addEventListener("change", function() {
			if (this.checked) {
				ok_button.disabled = false;
			} else {
				ok_button.disabled = true;
			}
		});
	</script>
</j:jelly>

Client Script :  

function ok() {
    var checkbox = document.getElementById("agree_checkbox");
    if (!checkbox.checked) {
        return;
    }
	var functionName = '${JS:sysparm_ok_function}';
	if(functionName == 'Apply') {
		var sysId = '${JS:sysparm_policy_sys_id}';
		applyConfirmed(sysId);
	} else {
		resetConfirmed();
	}
	destroyDialog();
	return true;
}

function cancel() {
    destroyDialog();
    return false;
}

function destroyDialog() {
    GlideDialogWindow.get().destroy();
}
function resetConfirmed() {
    var ga = new GlideAjax('global.ResetDefaultConsentPolicyOnCountries');
    ga.addParam('sysparm_name', "reset");
    ga.getXML(updateRecords);
}

function applyConfirmed(sysId) {
    var ga = new GlideAjax('global.ApplyConsentPolicyOnCountries');
    ga.addParam('sysparm_name', "apply");
	ga.addParam('sysparm_policy_sys_id', sysId);
    ga.getXML(updateRecords);
}

function updateRecords(response) {
    var answer = response.responseXML.documentElement.getAttribute("answer");
	var u_g_form = new GlideForm('',true,true,true,true);
	if (answer && answer !== '')
		u_g_form.addInfoMessage(new GwtMessage().getMessage('Accepted successfully.'));
	else
		u_g_form.addErrorMessage(new GwtMessage().getMessage('Action failed.'));
}


UI action :  Accept policy 

function acceptPolicy(){
		var sysId = "";
	var name = "";
	if (typeof rowSysId == 'undefined')
		sysId = gel('sys_uniqueValue').value;
	else
		sysId = rowSysId;
	var gr = new GlideRecord("sys_analytics_consent_policy");
	if (gr.get(sysId)) {
		name = gr.name + "";
	}
	var policyName = name;
	var bodyMessage = new GwtMessage().getMessage('You are about to apply the {0} policy to all countries. This selection overrides any previously assigned policy.', policyName);
	var bodyMessage2 = new GwtMessage().getMessage('Are you sure you want to apply {0} policy to All countries?', policyName);
	var bodyMessage3 = getMessage('Yes, I agree.');
	var okText = getMessage('Agree');

    var dialogClass = (typeof GlideModal !== 'undefined') ? GlideModal : GlideDialogWindow;
    var dlg = new dialogClass('accept_policy');
    dlg.setTitle(new GwtMessage().getMessage('Apply {0} Policy to All Countries', policyName));
    dlg.setWidth(450);
    dlg.setPreference('sysparm_body_message', bodyMessage);
    dlg.setPreference('sysparm_body_message_2', bodyMessage2);
    dlg.setPreference('sysparm_body_message_3', bodyMessage3);
    dlg.setPreference('sysparm_ok_text', okText);
	dlg.setPreference('sysparm_policy_sys_id', sysId);
	dlg.setPreference('sysparm_ok_function', 'Apply');
    dlg.setPreference('sysparm_parent_form', this);
    dlg.render();
}

 output : 

KrishnaMohan_0-1748356632450.png


If my response helped please mark it correct and close the thread so that it benefits future readers.

Best Regards,
Krishnamohan

 

@Debasis Pati  is this issue sorted?

 

If my response helped please mark it correct and close the thread so that it benefits future readers.

 

Thanks!
Krishnamohan