Prevent form from submitting until Modal is closed in onSubmit client script

[Mark Endsley]

In the service portal we would like to start using Modals instead of alerts. One issue I'm having is when I write a script like this:

function onSubmit() {
   
	   if (typeof spModal != 'undefined') {


       spModal.open({


           message: 'Hello',


           title: ''


       });


   } else {


       var gm = new GlideModal();


       gm.setTitle('');


       gm.renderWithContent('Hello');


   }



   
}

In the service portal after pushing submit, the form will submit after a few seconds without the user having pushed ok or closing the modal.

Is there any way to get it to perform more like an alert, requiring the modal to be closed before it submits and moves on to the next page?

[Mark Endsley]

1. The first error message is just because you aren't using the confirmed variable. I would think you would want to use this to decide whether or not the user wants to move forward, but if not, this is ok.

The confirmed variable will come in true if the user confirmed, false if they didn't confirm.

2. I'm not sure what will happen if you don't have a parameter for the title. If calling it this way causes problems, I would try sending a blank string. gm.renderWithContent('');

[Joseph Warner1]

Additional key points:

Make sure to include a return false; statement after the modal is instantiated (after the entire block, not inside the .then function). This will prevent the Form from submitting immediately after displaying the modal. Then, include a return true; statement inside a top-most if statement to submit the form after the modal is acknowledged. Include a g_form.submit statement within the .then function. You can use an additional record producer variable to store the ready-to-submit flag in case g_scratchpad is not/no longer available in Service Portal. Then hide this variable with a UI policy.

Summary

1. return true; inside top if statement
2. return false; after entire spModal block
3. g_form.submit inside .then
4. record producer checkbox variable to store state
5. hide the above variable with a UI policy
   
   

function onSubmit() {
	var ready = g_form.getValue("ready_to_submit");

	if (ready === "true") {
		return true;
	}

	var buttons = [{label: "Submit", primary: true }];
	var options = { 
		"title": "Acknowledgement", 
		"message": "I agree to the Terms & Conditions.", 
		"buttons": buttons 
	};

	spModal.open(options).then(function(confirmed){
		g_form.setValue("ready_to_submit", "true");
		g_form.submit();
	});

	return false;
}

[FroctorDealgood]

Additional key points:

Make sure to include a return false; statement after the modal is instantiated (after the entire block, not inside the .then function). This will prevent the form from submitting immediately after displaying the modal. Then include a return true; statement in a top-most if statement to submit the form once the modal is acknowledged. Include a g_form.submit statement within the .then function. You can use an additional record producer variable to store the ready-to-submit flag in case g_scratchpad is not/no longer available in Service Portal. Then hide this variable with a UI policy.

Summary:

1. return true; in top if statement
2. return false; after entire spModal block
3. g_form.submit inside .then
4. record producer checkbox variable to store state
5. hide the above variable with a UI policy

function onSubmit() {
	var ready = g_form.getValue("ready_to_submit");

	if (ready === "true") {
		return true;
	}

	var buttons = [{label: "Submit", primary: true }];
	var options = { 
		"title": "Acknowledgement", 
		"message": "I agree to the Terms & Conditions.", 
		"buttons": buttons 
	};

	spModal.open(options).then(function(confirmed){
		g_form.setValue("ready_to_submit", "true");
		g_form.submit();
	});

	return false;
}

[Joseph Warner1]

Additional key points:

Make sure to include a return false; statement after the modal is instantiated (after the entire block, not inside the .then function). This will prevent the form from submitting immediately after displaying the modal. Then include a return true; statement in a top-most if statement to submit the form once the modal is acknowledged. Include a  g_form.submit statement within the .then function. You can use an additional record producer variable to store the ready-to-submit flag in case g_scratchpad is not/no longer available in Service Portal. Then hide this variable with a UI policy.

Summary

1. return true; in top if statement
2. return false; after entire spModal block
3. g_form.submit inside .then function
4. record producer checkbox variable to store state
5. hide the above variable with a UI policy

function onSubmit() {
	var ready = g_form.getValue("ready_to_submit");

	if (ready === "true") {
		return true;
	}

	var buttons = [{label: "Submit", primary: true }];
	var options = { 
		"title": "Acknowledgement", 
		"message": "I agree to the Terms & Conditions.", 
		"buttons": buttons 
	};

	spModal.open(options).then(function(confirmed){
		g_form.setValue("ready_to_submit", "true");
		g_form.submit();
	});

	return false;
}