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