{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)

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

  1. AYAN DEB

    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

    Reply
    1. Lynton Bassett

      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.

      Reply
      1. Debajit Post author

        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

    2. Debajit Post author

      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.

      Reply

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