How to Convert Glide_Prompt to Workspace Dialog?

[tiguin2798]

Hello!

I am not a developer, but have recently been tasked with creating popup dialog confirmation boxes for our change request forms to only allow blackout dates within certain parameters. I have the below client script which is working fine in the default view.

My issue is that I am not sure I can use the same "glide_prompt" glidemodal when converting this to work in Service Operations Workspace. See the link below.

https://www.servicenow.com/community/next-experience-articles/how-to-use-ui-actions-in-workspaces/ta...

I see where I could use a "confirm" or "cancel" prompt, but I would rather it force the user to enter text that has to be exact in SOW so that it draws attention to what they are confirming. I'm assuming to replicate this in workspace I would need to create a new Client Scrit using g_modal for workspace view, I just need some assistance as to if I can have the function the same or if it would indeed just have to be a "cancel" or "confirm" button prompt?

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
    if (isLoading || newValue === '') {
        return;
    }

    var newValueDate = new Date(newValue);
    var startDateBegin = new Date('2024-11-25 00:00:00');
    var startDateEnd = new Date('2024-11-27 23:59:59');

    if (newValueDate >= startDateBegin && newValueDate <= startDateEnd) {
		
        var gm = new GlideModal('glide_prompt', true, 600);
        gm.setTitle('You are scheduling during a blackout period.');
        gm.setPreference('title', 'Please enter "confirm" if you wish to proceed.');
        gm.setPreference('onPromptComplete', complete);
        gm.setPreference('onPromptCancel', cancel);
        gm.render();
    }

    function complete(value) {
        var msg = 'You have entered an invalid value: ' + value;
        if (value === 'confirm') {
            g_form.showFieldMsg('start_date', 'You have confirmed your planned start date for the blackout period of November 25-27th. Please ensure proper approvals are in place.');
        }
    }

	function cancel() {
        g_form.clearValue('start_date');
        g_form.clearValue('end_date');
        
        g_form.showFieldMsg('start_date', 'You have cancelled your submission. Please update your planned start date.', 'error');
    }
}

[tiguin2798]

I am updating this response. After much research I have pretty much been able to achieve my goal. I have updated the script below. It is verifying what the user is entering in the text field. In turn if it doesn't match it clears the planned start date and end date fields.

Now the only issue I'm having is I cannot get the 'cancel' function to work when the 'cancel button is clicked on the dialog box. Any help on this is greatly appreciated as it was working when using 'g_modal.confirm' vs 'g_modal.showFields'.

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
    if (isLoading || newValue === '') {
        return;
    }

    var newValueDate = new Date(newValue);
    var startDateBegin = new Date('2024-11-25 00:00:00');
    var startDateEnd = new Date('2024-11-27 23:59:59');

    if (newValueDate >= startDateBegin && newValueDate <= startDateEnd) {
        var msg = getMessage("Blackout period is for November 25th-November 27th. Type in 'confirm' to continue.");

        g_modal.showFields({
            title: "You are scheduling during a blackout.",
            fields: [{
                type: 'textarea',
                name: 'work_notes',
                label: getMessage('Blackout period is for November 25th-November 27th. Type in "confirm" to continue.'),
                mandatory: true
            }],
            size: 'lg'
        }).then(function(fieldValues) {
            var enteredValue = fieldValues.updatedFields[0].value.trim();

            // Validate that the entered text is "confirm"
            if (enteredValue.toLowerCase() !== "confirm") {
                g_form.clearValue('start_date');
                g_form.clearValue('end_date');
                g_form.showFieldMsg('start_date', 'Invalid input. You entered "' + enteredValue + '" Please type try again to proceed.', 'error');
                return;
            }

            g_form.showFieldMsg('start_date', 'You have confirmed your planned start date for the blackout period of November 25-27th. Please ensure proper approvals are in place.', 'info');
        });
    }
}

function cancel() {
    g_form.clearValue('start_date');
    g_form.clearValue('end_date');
    g_form.showFieldMsg('start_date', 'You have cancelled your submission. Please update your planned start date.', 'error');
}

[tiguin2798 · Accepted solution]

I finally figured out a solution to this as multiple threads leading to the article in my original post did not seem to have a clear solution or one that was still valid. Nothing in my below code is pertinent to our organization specifically, so I will share the entire code in case any one else has a similar use case.

I resolved having a function on the 'cancel' button by using the catch function near the bottom of the script. No need for creating a new modal this way for those like me who are very new to the developer end. Enjoy!

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
    if (isLoading || newValue === '') {
        return;
    }

    var newValueDate = new Date(newValue);
    var startDateBegin = new Date('2024-11-25 00:00:00');
    var startDateEnd = new Date('2024-11-27 23:59:59');

    if (newValueDate >= startDateBegin && newValueDate <= startDateEnd) {
        var msg = getMessage("Blackout period is for November 25th-November 27th. Type in 'confirm' to continue.");

        g_modal.showFields({
            title: "You are scheduling during a blackout.",
            fields: [{
                type: 'textarea',
                name: 'work_notes',
                label: getMessage('Blackout period is for November 25th-November 27th. Type in "confirm" to continue.'),
                mandatory: true
            }],
            size: 'lg'
        })
        .then(function(fieldValues) {
            var enteredValue = fieldValues.updatedFields[0].value.trim();

            if (enteredValue.toLowerCase() !== "confirm") {
                g_form.clearValue('start_date');
                g_form.clearValue('end_date');
                g_form.showFieldMsg('start_date', 'Invalid input. You entered "' + enteredValue + '". Please try again to proceed.', 'error');
                return;
            }

            g_form.showFieldMsg('start_date', 'You have confirmed your planned start date for the blackout period of November 25-27th. Please ensure proper approvals are in place.', 'info');
        })
        .catch(function() {
            g_form.clearValue('start_date');
            g_form.clearValue('end_date');
			
            g_form.showFieldMsg('start_date', 'You have cancelled your submission. Please update your planned start date or try again.', 'error');
        });
    }
}