Can't able to Submit UI page on Onsubmit catalog client script. How to resolve this?

[prasannakumard]

Hi Team,

I've created a UI page for to Acknowledge some terms and conditions in submission of a catalog item. But, after submit the catalog item, that UI will appear and with out clicking on accept / reject, catalog item is submitted.

I've created following steps for above functionality:

1) Created a Checkbox field and UI page

2) Write a onsubmit catalog client script as mentioned below:

function onSubmit() {
//Type appropriate comment here, and begin script below
var ack = g_form.getValue('requires_acknowledgement'); alert (ack);
if (ack == 'Yes') {
var gm = new GlideModal("Acknowledgement");
//Sets the dialog title
gm.setTitle('Acknowledgement');
gm.setWidth(550);
gm.render();

}

}

FYI, UI Page contains, "Accept" and "Reject" buttons

When I'm clicking the Ordernow button, The UI page is appearing and in fraction of seconds without any user intervention, UI page disappeared and catalog item submitted. How to stop/wait the Catalog item submission upto submit the UI page (Clicking on Accept/Reject buttons).

Experts: @palani, @Bert_c1, @vkachineni @Chuck Tomasi  

Thanks & Regards,

Prasanna Kumar
 

[Astrid Sapphire]

Hi Prasanna,

onSubmit Client Scripts, including Catalog Client Scripts, evaluate their content and only halt submission if the script returns false. Since you’re not returning anything explicitly, you’re returning undefined which is enough to permit submission.

To get your desired functionality, you need to do a couple of things. You need a way to capture whether your user has accepted (think a catalog variable, or a Client Data variable), you need a check for whether that variable is in an ‘accepted’ state (from which you’d return true), and otherwise you need to trigger your modal and return false. Lastly, as part of your modal, you need a way to set that variable to an ‘accepted’ state on Accept and trigger the submission.

From scratch, your flow then becomes:

1. User submits your item

2. onSubmit is triggered, and identifies that the accepted state isn’t met. It triggers your modal and then returns false

3. User interacts with modal and if Accepting, the variable gets set to the accepted state.

4. onSubmit script gets triggered again, either by the user clicking submit again or by script.

5. Validation of accepted state is successful this time, so the item gets submitted.

Good luck! Kind regards,

Astrid

[prasannakumard]

@Astrid Sapphire I've modified the script as mentioned below. Here my issue is after submitting the UI page, still catalog item stay on previous page only, it is not submitting. Please let me know how can I achieve the same.

UI page client scrpt:

function cancel(){
GlideDialogWindow.get().destroy(); //Close the dialog window
return false;
}
function submit(){
GlideDialogWindow.get().destroy();
return true;
}

Catalog item onSubmit script:

function onSubmit() {

//show modal dialog

var dialogClass = window.GlideModal ? GlideModal : GlideDialogWindow;

var dialog = new dialogClass("Acknowledgement");

dialog.setTitle("Acknowledgement");

dialog.setWidth(600);

dialog.render();

return false;

}

Thanks & Regards,

Prasanna Kumar

[Dubz]

I think the best practice in this case would be to change your client script to onChange and have a mandatory checkbox on the form that the user has to tick to confirm they want to submit and trigger the client script on that.

You could keep it hidden away and stick with onSubmit by following Astrid's solution.

[prasannakumard]

@Astrid Sapphire @Dubz  if you have previous experience like this requirement, please provide the script details of OnSubmit Catalog client script, UI page script. It is very helpful to me.

I've tried like below in Catalog onSubmit script: It is working as expected. but, if I add the below highlighted code, 

After submitting the catalog form, POP UP appearing in backend form submission also happening parallelly. 

It is working as expected, if I'm not using the below Highlighted code. Please suggest any possible solution for the same. 

 var catItem = g_form.getUniqueValue();
var ga = new GlideAjax('AdditioalVariablesHelper');
ga.addParam('sysparm_name','getAckRequire');
ga.addParam('sysparm_catID',catItem);
ga.getXML(myFunCallback);
}
function myFunCallback(response) {
var answer = response.responseXML.documentElement.getAttribute("answer");

if(answer == 'true' || answer == true){

if (typeof spModal != 'undefined' && !g_form._hasConfirmed) {

spModal.open({
message: "<p>MY MESSAGE</p>",
title: 'Agree to Terms & Conditions',
buttons: [{
label: '✘ Disagree',
cancel: true
},
{
label: '✔ I Accept',
primary: true
}
]
}).then(function(confirm) {
if (confirm) {
g_form._hasConfirmed = true;
if (typeof g_form.orderNow != 'undefined') {
g_form.orderNow();
} else {
g_form.submit();
}
}
});

return false;
}
}

}

Thanks & Regards,

Prasanna Kumar