Custom Button on Entity form to Save a record in PowerApps portals/ Dynamics 365 Portals

Follow my blog for more interesting topics on Dynamics 365, Portals and Power Platform. For training and consulting, write to us at info@xrmforyou.com

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

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

Advertisements

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' />");

});

Advertisements

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

});

Advertisements

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.

Advertisements

Hope this helps!

Debajit Dutta

(Dynamics MVP)

For consultation/ corporate training visit www.xrmforyou.com or reach out to us at info@xrmforyou.com

9 thoughts on “Custom Button on Entity form to Save a record in PowerApps portals/ Dynamics 365 Portals”

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

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

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

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

Leave a Reply to Lynton Bassett Cancel 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