New UI - How to intercept form submission (Quick Create) ?

Hi Guys,

Any update on this ?

Thank you

Meryem

In Object Definition - Pages - QC Page - Properties -> onsubmit event handler.

Configure an onsbumit event handler, which will give you the required callback on form submit.

Once the handler returns, validation will be performed.

However, in case, you want your handler code to run only in a scenario wherein there are no validation errors. Then you will have run the validation once yourself within the handler and only on success execute handler specific tasks.

Example:

function onSubmitHandler() {

 var formDetails = rb.newui.page.PageContext.getFormDetails(rb.newui.util.EDIT_FORM_NAME);

 if (formDetails) {

   var validator = formDetails.getKendoValidator();

   if (validator && validator.validate()) { //validation true...  

     //run handler tasks here

   }

 }

}

Hi Siraj,

Thank you for the reply, this is actually achieving what I needed.

Now the issue I am having, is that when the validation is all good, I need to open a popup asking the user for other information .. But it looks like the popup does not have time to open, i.e, after the validation is done, the QC page juste closes without opening the popup.

It was opening properly when I was calling it on click on Save.

Here is the code :

function onSubmitHandler() {

var formDetails = rb.newui.page.PageContext.getFormDetails(rb.newui.util.EDIT_FORM_NAME);

if (formDetails) {

  var validator = formDetails.getKendoValidator();

  if (validator && validator.validate()) {

     alert('all good');

     dialogWindow.data("kendoWindow").center().open(); // where dialog window is defined before

   }

  else{

    alert('something is wrong');

  }

}

}

// definition of dialog window

$(document).ready(function(){

var dialogWindow = $("#dialog").kendoWindow({

    actions: {},

    draggable: true,

    height: "300px",

    modal: true,

    resizable: false,

    title: "Hello",

    width: "500px",

    visible: false /*don't show it yet*/

 });

}); // end of document.ready  

Can you help with that please?

Thanks,

Meryem

Meryem, this is one unique requirement.

The problem here is, as part of handler callback, you are launching dialog. However, the handler thread will not block on this dialog launch & will finish succesfully, resulting in form submission & page refresh. As a result, you never get to see the dialog.

Ideally, we should add a custom button that will launch dialog on click event. On dialog close/return, submit form.

Since there is no way to replace 'Save' submit button in QC pages. Have worked out a scripting solution as per your requirement.

In QC page, add a script component as follows:

<script>

var kWindow = null; //declaring as global

function onSubmitHandler() {

 var formDetails = rb.newui.page.PageContext.getFormDetails(rb.newui.util.EDIT_FORM_NAME);

 if (!formDetails) { //some issue... abort submit handler processing

   return true;

 }

 var formNode = formDetails.getFormNode();

 var validator = formDetails.getKendoValidator();

 if (validator && validator.validate()) { //validation true...  

   if (kWindow === null) { //if dialog is never launched...

     kWindow = $('#myWindow').kendoWindow({

       actions: ['Close'],

       draggable: true,

       height: '300px',

       modal: true,

       resizable: false,

       title: 'Hello',

       width: '500px',

       close: function(){

         formNode.submit();//while closing dialog.. we want to process with form submit..

       },

       visible: false

     }).data('kendoWindow');

     kWindow.center().open();

     //stop onsubmit event on launching window...

     event.stopPropagation();

     event.stopImmediatePropagation();

     return false;

   }

   return true;

 } else {

   event.stopPropagation();

   event.stopImmediatePropagation();

   return false; //vvalidation failed

 }

}//onSubmitHandler

$(document).ready(function () {

 var formDetails = rb.newui.page.PageContext.getFormDetails(rb.newui.util.EDIT_FORM_NAME);

 if (formDetails) {

   var formEl = formDetails.getFormNode();

  //remove existing handler...

   formEl.removeAttr('onsubmit');

   //add custom handler... as we want to launch ui dialog as part of handler tasks..

   //formEl.attr('onsubmit', "onSubmitHandler()");

   formEl.on('submit',onSubmitHandler);

 }

});

</script>

What if we want to perform the submit on a button on the kendo window? So say we have a button called "Yes" and would like to proceed with the submission there rather than in this validator code. Can we do that?

Yes, so whatever we are doing on window close in the sample code above, the same can be done as part of some other event handler.

From the above snippet:

We are removing the default submit handler & adding a custom handler.

This custom handler, if validation succeeds, launches a dialog. This will happend only once. That is once the dialog is launched, for the following onsubmit events we will just return TRUE from handler.

Also note that when we close the dialog, we are submitting the form programmatically. This will cause the custom handler to execute but as explained earlier, it will not re-launch the dialog but simply return TRUE.

Siraj, I actually have another issue with what you are suggesting :

I need to open many popups successively, as I am asking for validation on a list of items, but doing this validation on the items one by one (one popup per item).

So I am not really using your code as it is mainly working for opening the popup ONLY once. Instead I am doing this :

$("#theForm").submit(function(e){

   return false;

 });

on document.ready when the QC page opens.

Then I have a function onSubmitHandler() am calling as an event on submit of the page.

This function opens the first popup, and carries on with the validation by opening other popups if more items are there. Until now it is working fine.

Now when I am done with all the items , I want to submit the form.

How can I achieve that please?

I tried  

$("#theForm").submit(function(e){

   return true

 });

and

formNode.submit();

But none of these is submitting the form.

How can I do this please?

Thank you

Meryem

Meryem, looks like you are attaching multiple submit handlers. That is each invocation like,

$("#theForm").submit(function(e){

  return false;

});

will attach a new submit handler to your form. And, if any ONE of the submit handlers returns false or calls event.preventDefault(), then form submission will fail.

Would suggest you have just one handler i.e. onSubmitHandler that you have described above. This same handler should have the necessary logic to lauch all popups & once you are ready to submit, this handler should return TRUE.

That is, when it is launching pop-ups only then it should return false. When all popups are done, invoke formNode.submit() or $("#theForm").submit() from within handler. This will cause onSubmitHandler  to be called again, this time it should  return TRUE.

Hi Siraj,

I had a question about the validator we are using above as you explained earlier.

I just realized that this :

 var formDetails = rb.newui.page.PageContext.getFormDetails(rb.newui.util.EDIT_FORM_NAME);

 var formNode = formDetails.getFormNode();

 if (formDetails) {

   var validator = formDetails.getKendoValidator();

   if (validator && validator.validate()) {  

      alert('Validation Done');

  }

}

is alerting "Validation Done" many times, so because all my code is running inside of that if, it is running multiple times.

Is that the correct behavior? How this Validator works exactly ? Is it done on fields one by one or checking for the validation of all the form at once?

If that is normal, how do I workaround it please? because now it is resulting in the record created multiple times.

Thank you

Meryem

Siraj, another question please :

You are saying in one of your previous posts that :

" Would suggest you have just one handler i.e. onSubmitHandler that you have described above. This same handler should have the necessary logic to lauch all popups & once you are ready to submit, this handler should return TRUE.

That is, when it is launching pop-ups only then it should return false. When all popups are done, invoke formNode.submit() or $("#theForm").submit() from within handler. This will cause onSubmitHandler  to be called again,  this time it should  return TRUE. "

I am trying to do exactly what you are saying here, but returning false does not seem to prevent the form from submitting.

I tried it outside of this code, by creating a function mySubmitHandler(){

return false;

}

and call it as an event on submit of  a simple QC page. This is not preventing the save.

So to do this, I am calling:

       $("#theForm").submit(function(e){

          e.preventDefault();

       });

inside of the onSubmitHandler and when opening a popup, and then doing this :

$("#theForm").unbind('submit').submit();  

when all popups are done.

The issue with that, is that the submit() I am doing at the end is calling the OnSbumitHandler again, and everything is done again ... Maybe this would explain what I was saying before regarding the Validator. Maybe its is not related to the Validator I mean.

I need to avoid calling the sumbit() multiple times as I am doing quite a lot of things and it is slowing the process and creating multiple record sometimes, and also opening the same popup multiple times before moving to the next one.

How can we manage to handle that with just return true and return false please?

Thanks and sorry for the long explanation..

Meryem

Siraj,

Can we manage to schedule a call for that please? It is taking time to sort this out, I was thinking it would be quicker if we do it live.

Thank you :)

Meryem

Hi Meryem,

Discussed with Siraj. Can you please log a support case, so that I will schedule a call and get this issue fixed.

Regards,

Mani.

Hello Mani Kumar,

I just opened a support case for that, with Case Number : 00330091.

What is next now ?

Thank you

Meryem

HI Meryem,

Thanks for logging ticket.

I've already sent a comment for you on the case. We will shift to the support case for any future communications on this discussion.

Regards,

Mani.