{Quick tip} Save a record in PowerApps portals using custom button on Entity Form

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”.

image

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 &amp; 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

Our product offerings:

Role based views for Dynamics 365 (http://www.xrmforyou.com/role-based-views.html)

Author: Debajit

I am a Dynamics CRM Most Valuable Professional (MVP) with 12 years of experience in Microsoft .NET Technologies and 9 years of dedicated experience in Microsoft Dynamics CRM. I have worked with companies like Microsoft, SanDisk, PwC, TMF Group and have extensive experience of implementing complex CRM solutions from both offshore and client side. Currently the face of XrmForYou.com with significant experience in delivering corporate training on Dynamics CRM and have already delivered multiple projects to client through XrmForYou.com Author of multiple tools on codeplex including the 'Role Based Views' and 'CRM-Sharepoint Metadata manager & Attachment Extractor' which are available for commercial use under XrmForYou.com For consulting/ training, drop me a note at info@xrmforyou.com or visit our website www.xrmforyou.com

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s