Confirm/Cancel alert using Sweetalerts 2 doesn't stop form submission. How can I stop submission until button is pressed?

[Marcel H_]

I'm sure that I'm overlooking something obvious, and hoping that others have worked with Sweetalerts and gotten a confirm pop up working as expected.

I'm using an onSubmit catalog client script to check for a $0.00 amount in a variable, and if so stop form submission until the user clicks the confirm button so that they are warned if the value isn't what it's supposed to be.

Right now I have this working with a normal confirm alert:

function onSubmit() {
    var fieldName = 'u_new_request_amount';
    var fieldLabel = g_form.getLabelOf(fieldName);
    var nra = g_form.getValue(fieldName);
    var ec = g_form.getValue('u_existing_contract');

    //Check if this is an existing contract, if not proceed with submit
    if (ec == "No") {
        return;
    }
    //Check if this is an existing contract and for $0.00 before submitting
    if (ec == "Yes" && nra == 0 || nra == 0.00 || nra == "$0" || nra == "$0.00" || nra == "$-0" || nra == "$-0.00" || nra == "-$0" || nra == "-$0.00") {
		var answer = confirm("Check Amount" + '\n\n' + fieldLabel + " is currently $0.00" + '\n\n' + "Please confirm you want to submit a $0.00 amount.");
		if (answer == false) {
			return false;
		}
	}
}

Now, with Sweetalerts 2, following the various examples I can find, they show formatting like so:

function onSubmit() {
    var fieldName = 'u_new_request_amount';
    var fieldLabel = g_form.getLabelOf(fieldName);
    var nra = g_form.getValue(fieldName);
    var ec = g_form.getValue('u_existing_contract');

    //Check if this is an existing contract
    if (ec == "No") {
        return;
    }
    //Check for $0.00 before submitting
    if (ec == "Yes" && nra == 0 || nra == 0.00 || nra == "$0" || nra == "$0.00" || nra == "$-0" || nra == "$-0.00" || nra == "-$0" || nra == "-$0.00") {
        Swal.fire({
            title: 'Confirm Amount',
            text: '<b>' + fieldLabel + '</b> is $0.00. If this is correct click Submit, otherwise click Cancel and change the amount.',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Submit'
		}).then((result) => {
            if (result.value) {
                return true;
            } 
	else {
                return false;
            }
        });
    }
}

ServiceNow doesn't seem to like the arrow function, and I've tried a few different variations using things like

.then(function(result){
if (result.value == true){
return true;

but it submits anyway. Right now I'm just not sure what the confirm button is supposed to return and how to evaluate that properly, so I'm hoping someone had this figured out and can provide some suggestions or code. Thanks!

[Marcel H_]

Thanks Willem, it's definitely getting closer to the behavior that I'm looking for. When using the above code it works as expected in Service Portal, but in the native UI when going through the Service Catalog it submits without the swal dialog displaying at all.

I removed the line "if (typeof spModal != 'undefined')" and the submission is stopped via Service Catalog, but throws the error below, and Service Portal will hang on submission.

So far the closest that I've been able to get is with the below script. This submits as expected in Service Portal after clicking the Submit button on the swal popup, but submission in the Service Catalog in the native UI doesn't proceed until the Submit button on the catalog item is clicked again.

function onSubmit() {
    if (g_form._hasConfirmed == true) {
        // this means they have already confirmed via the spModal
        // so no need to check again
        return true;
    }
    var fieldName = 'u_new_request_amount';
    var fieldLabel = g_form.getLabelOf(fieldName);
    var nra = g_form.getValue(fieldName);
    var ec = g_form.getValue('u_existing_contract');

    //Check if this is an existing contract
    if (ec == "No") {
        return;
    }
    //Check for $0.00 before submitting
    if (ec == "Yes" && nra == 0 || nra == 0.00 || nra == "$0" || nra == "$0.00" || nra == "$-0" || nra == "$-0.00" || nra == "-$0" || nra == "-$0.00") {
        Swal.fire({
            title: 'Confirm Amount',
            html: '<b>' + fieldLabel + '</b> is $0.00. If this is correct click Submit, otherwise click Cancel and change the amount.',
            type: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Submit'
        }).then(function (result) {
            if (result) {
                if (typeof spModal != 'undefined') {
                    g_form._hasConfirmed = true;
                    g_form.submit();
                } else {
                    g_form._hasConfirmed = true;
                    g_form.orderNow();
                }
            }
        });
        g_form.hasConfirmed = false;
        return false;
    }
}

[Willem]

What happens if you replace both submits with the g_form.orderNow()?:

}).then(function (result) {
                if (result) {
                    g_form._hasConfirmed = true;
                    g_form.orderNow();
                }
            });

[Marcel H_]

After changing the lines to the above code, the following occurs:

• The swal confirmation dialog pops up on both Service Portal and Native UI Service Catalog Item
• Form submission is stopped and does not proceed while swal dialog is displayed
• Clicking the Submit (confirmation) button on the swal dialog closes the popup as expected and is assumed to set _hasConfirmed = true
• Form submission does not proceed and requires clicking the Submit form button a second time to complete the submit process

It's so close to doing what it needs to do, it's just almost like the script needs to programmatically click the form's Submit button again somehow to automate that process, or I'll need to provide the user with additional feedback to click Submit again (perhaps just changing the name of the swal confirmation button to avoid confusion).

It's interesting that the line if (typeof spModal != 'undefined') allows the submission to proceed normally in Service Portal when used in conjunction with g_form.submit() but doesn't with g_form.orderNow(). I don't think that there is a native UI equivalent, but have seen mention of using if (typeof window == 'undefined') as well as gsftSubmit(null, g_form.getFormElement(), '<UI action name>') but I wasn't able to get that to work based on the examples I saw (I'm sure it's a formatting issue on my part).

[Willem]

In the portal gsftSubmit is not supported.

Can you try:

g_form.submit(submitActionName)

[Willem]

@Marcel H. did this help you? If so, can you mark answer as helpful and correct? That way others can find the answer as well.