Critical incident submission

Snow214 · ‎10-29-2024

I wanted to show a dialogue box similar to this that shows when user attempts to submit an incident with critical priority, with ok and cancel buttons on it when click on ok it will continue submitting the form and cancel will return back on form.

I am currently showing it as below which is servicenow's oob functionality in client script. but i want to show it same as it as above.

Please let me know if anyone is configured this.

Thanks.

Runjay Patel · ‎10-29-2024

Hi @Snow214 ,

You can do below configuration.

1. Create one UI Page with below code.

UI Action name: confirm_p1

HTML Code:

<?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 onsubmit="return invokeConfirmCallBack('ok');">
<table border="0" width="100%">
	<tr><td/>
		<h2 style="color:red; font-weight:bold; text-align:center;">Warning!</h2>
		<p style="font-weight:bold; text-align:center; font-size: larger;">Type your message here......</p>
		<div  style="text-align:center;">To close the window instead, click Cancel, then navigate BACK</div>
	<td/></tr>
        
		<tr>
     	<td nowrap="true"><g:no_escape>${title}</g:no_escape></td>	
	</tr>
        <tr><td/><td/></tr>
        <tr>
            <td  style="padding: 10px;" colspan="2" align="right">
                <g:dialog_buttons_ok_cancel 
                   ok="invokePromptCallBack('ok');" 
                   ok_type="button" 
                   cancel="invokePromptCallBack('cancel')" 
                   cancel_type="button" />
            </td>
        </tr>	
</table>
</g:ui_form>
</j:jelly>

Client Script code:

function invokePromptCallBack(type) {
    var gdw = GlideDialogWindow.get();
    if (type == 'ok') {
       var f = gdw.getPreference('onPromptComplete');
		gsftSubmit(null, g_form.getFormElement(), 'sysverb_insert');
	}
        
    gdw.destroy();
    return false;
}

2. Create new UI action and give same action name as OOB "Submit" one. You can insert and stay of "Submit" UI Action.

3. Make is client callable.

UI Action Code:

function confirmMe(){

if(g_form.getValue('priority') ==1){
var confirm = new GlideModal('confirm_p1');
	confirm.setTitle('Confirmation');
	confirm.setPreference("onPromptComplete", "ok");
	confirm.setPreference("onPromptCancel", "cancel");
	confirm.render();
}else{
	gsftSubmit(null, g_form.getFormElement(), 'sysverb_insert');
}
}

answer = current.insert();
gs.include('ActionUtils');
var au = new ActionUtils();
au.postInsert(current);

-------------------------------------------------------------------------

If you found my response helpful, please consider selecting "Accept as Solution" and marking it as "Helpful." This not only supports me but also benefits the community.

Regards
Runjay Patel - ServiceNow Solution Architect
YouTube: https://www.youtube.com/@RunjayP
LinkedIn: https://www.linkedin.com/in/runjay

-------------------------------------------------------------------------

Runjay Patel · ‎10-29-2024

Hi @Snow214 ,

Output from above code would be like below. You change the message and make window small and big.

-------------------------------------------------------------------------

If you found my response helpful, please consider selecting "Accept as Solution" and marking it as "Helpful." This not only supports me but also benefits the community.

Regards
Runjay Patel - ServiceNow Solution Architect
YouTube: https://www.youtube.com/@RunjayP
LinkedIn: https://www.linkedin.com/in/runjay

-------------------------------------------------------------------------

Snow214 · ‎11-06-2024

Thanks for the reply. But I dont want UI action button. The requirement is when user attempts to save or submit the Incident with critical priority it will show dialogue box warning msg with cancel and ok button where clicking on ok will continue submitting the form.

for this I have created on submit client script below. This script currently only works for existing records and only when incident is submitting through the UI action buttons submit and save and given "Record not found" error when saving through right click > save from top header it does not inserts record into table.

Also I want to make it work for workspaces as well. So how can I do that.

Please let me know if anyone is configured this.

Thanks.

function onSubmit() {
    var priority = g_form.getValue('priority');
    
    if (priority == '1') {
        showConfirmationDialog(); 
        return false; 
    }

    return true;
}

function showConfirmationDialog() {
    // Add dimming effect for screen
    var dimBackground = document.createElement('div');
    dimBackground.id = 'dimBackground';
    dimBackground.style.position = 'fixed';
    dimBackground.style.top = '0';
    dimBackground.style.left = '0';
    dimBackground.style.width = '100%';
    dimBackground.style.height = '100%';
    dimBackground.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
    dimBackground.style.zIndex = '9998';
    document.body.appendChild(dimBackground);

    // Create the modal box
    var dialogBox = document.createElement('div');
    dialogBox.id = 'confirmationDialog';
    dialogBox.style.position = 'fixed';
    dialogBox.style.top = '50%';
    dialogBox.style.left = '50%';
    dialogBox.style.transform = 'translate(-50%, -50%)';
    dialogBox.style.backgroundColor = '#fff';
    dialogBox.style.padding = '20px 30px';
    dialogBox.style.borderRadius = '8px';
    dialogBox.style.width = '550px';
    dialogBox.style.boxShadow = '0px 0px 15px rgba(0,0,0,0.2)';
    dialogBox.style.fontFamily = 'Arial, sans-serif';
    dialogBox.style.zIndex = '9999';

    // Title with a close icon
    var titleBar = document.createElement('div');
    titleBar.style.display = 'flex';
    titleBar.style.justifyContent = 'space-between';
    titleBar.style.alignItems = 'center';
    titleBar.style.marginBottom = '15px';
    titleBar.style.borderBottom = '1px solid #ddd';
    titleBar.style.paddingBottom = '10px';

    var titleText = document.createElement('div');
    titleText.innerText = 'Confirmation';
    titleText.style.fontSize = '18px';
    titleText.style.color = '#333';

    var closeIcon = document.createElement('span');
    closeIcon.innerHTML = '&times;';
    closeIcon.style.fontSize = '20px';
    closeIcon.style.cursor = 'pointer';
    closeIcon.onclick = cancelSubmit;

    titleBar.appendChild(titleText);
    titleBar.appendChild(closeIcon);

    // Warning message content
    var message = document.createElement('div');
    message.innerHTML = `
        <h3 style="text-align: center; color: #FF7057; font-size: 16px; margin-top: 0; margin-bottom: 15px; font-weight: bold;">Warning!</h3>
        <p style="font-size: 14px; margin-bottom: 10px; color: #333; text-align: left;">
            You are submitting Incident with critical priority.
        </p>
        <p style="font-size: 14px; color: #333; text-align: left;">
            Do you want to continue?
        </p>
    `;

    // Buttons container
    var buttonsContainer = document.createElement('div');
    buttonsContainer.style.display = 'flex';
    buttonsContainer.style.justifyContent = 'flex-end';
    buttonsContainer.style.gap = '10px';
    buttonsContainer.style.marginTop = '20px';

    // Cancel button
    var cancelButton = document.createElement('button');
    cancelButton.className = 'btn btn-default';
    cancelButton.innerText = 'Cancel';
    cancelButton.style.backgroundColor = 'transparent';
    cancelButton.style.border = '1px solid #4F52BD'; // Dark blue thin border
    cancelButton.style.padding = '10px 15px';
    cancelButton.style.borderRadius = '4px';
    cancelButton.style.cursor = 'pointer';
    cancelButton.style.color = '#4F52BD'; // Dark blue text color
    cancelButton.onclick = cancelSubmit;

    // OK button
    var okButton = document.createElement('button');
    okButton.className = 'btn btn-danger';
    okButton.innerText = 'OK';
    okButton.style.backgroundColor = '#4F52BD'; // Dark red background
    okButton.style.border = '1px solid #4F52BD'; // Dark blue thin border
    okButton.style.padding = '10px 15px';
    okButton.style.borderRadius = '4px';
    okButton.style.cursor = 'pointer';
    okButton.style.color = '#fff'; // White text color
    okButton.onclick = proceedWithSubmit;

    // Modal
    buttonsContainer.appendChild(cancelButton);
    buttonsContainer.appendChild(okButton);
    dialogBox.appendChild(titleBar);
    dialogBox.appendChild(message);
    dialogBox.appendChild(buttonsContainer);
    document.body.appendChild(dialogBox);
}

// Cancel submission
function cancelSubmit() {
    document.getElementById('dimBackground').remove();
    document.getElementById('confirmationDialog').remove();
}

// Proceed form submission
function proceedWithSubmit() {
    document.getElementById('dimBackground').remove();
    document.getElementById('confirmationDialog').remove();

    var form = document.querySelector('form');
    form?.submit(); 
}