Recently I had a requirement where my customer asked me to put an additional button on the Edit page of a account form that will perform a set of operations before saving the record.
They didn’t want to tamper the OOB functionality of Submit button that comes with the portal. So basically on Account edit form, you should have two buttons, one OOB submit button and other the custom button – “Validate & Save”.
On click of Save & Validate, some custom validations shall be performed and then the record should save with the same behavior of click of Submit button.
So there has two steps to it.
Step 1 : Create the button
Trust me this one is easy with a little bit of DOM element modification. In the Custom Javascript box of the content web page of Entity form, paste the below script.
$(document).ready(function () {
$("div.actions").append("<input type=’button’ id='btnSaveValidate' name=btnSaveValidate’ value='Save & Validate' class='submit-btn btn btn-primary form-action-container-left' />");
});
And the button would appear.Basically the submit button is inside a div element with class = “actions”. With a future release of the portal this may change. all you need to find the appropriate place to put in the button
Step 2 : Save the Record on Click of the button
The usual thought that comes to mind is we will submit the form. Something like this should work
document.forms[0].submit();
But unfortunately it does not work out. This is because saving the record is being handled by server side event handler of the OOB Submit button. So basically you need to mimic the call of the submit button.
And the below code does just that.
$("#btnSaveValidate").bind("click", function () {
// perform your own logic here.
WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions($(this).prev().attr("name"), '', true, '', '', false, true));
});All I need is to pass the name of the Submit button in the WebForm_PostBackOptions and this is achieved by using $(this).prev().attr(“name”). And now the server side event handler for the Submit button is called and the record is saved.
And now you are all set and running. You might think why not trigger the client click of Submit button. Well this can be done off course. But then you execute the client side logic if any of the submit button. Our intention was to put custom client side validation and then invoke the server side handler to save the record.
Hope this helps!
Debajit Dutta
(Dynamics MVP)
For consultation/ corporate training visit www.xrmforyou.com or reach out to us at info@xrmforyou.com
Hello Debajit. it is working fine.
i added it on web form step.
can you pls give me some idea, i need to stay on the same page , as now after saving it is going to next page
Hello Debajit,
i would love to know the above also to have a “save” button on an initial web form step, this is beneficial in a scenario when the first step has alot of content on it and needs to be saved and returned to later.
also if there is SharePoint integration it would be beneficial to fire this call on load so it creates the record and the SharePoint grid appears.
Hi Lynton,
Thanks for reading my blog post. practically i believer you can insert it anywhere as webform step also has a load scenario. I haven’t tried it though.
Cheers!
Debajit
Hi Lynton Bassett,
I just got a requirement today and completed it.
May be you would like to visit this blog – https://debajmecrm.com/2020/06/30/want-to-have-a-custom-button-to-save-a-record-and-stay-on-the-same-step-without-moving-to-the-next-or-previous-step-inside-a-webform-step-in-powerapps-portals-dynamics-365-portals-check-this-out/
That depends on what you have provided in the entity form settings post successful save. You have an option to show success message or redirect post save.
Hi Debajit, Can you explain how to do redirect post save? I have tried to put it into actionUrl parameters and still no luck. I have also tried to add location.replace after the function.
Thanks for reading my blog. I will try that and let you know.
-Debajit
Hi Debajit,
Thanks for this lovely post.
i need this feature on web form step, after saving the data , it should not go to next page