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!

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

Few months back I posted an article on how you can develop a custom button for Save as draft functionality on an Entity form in PowerApps portals. On that post I have received multiple queries on how we can do the same inside a webform. It’s quite easy and my blog is dedicated to that.

But before I go ahead and write how I can do the same in WebForms, let’s see under what circumstances you would need that solution.

Inside a WebForm in Dynamics 365 Portals or PowerApps portals, we always have the following behavior.

The first step in the WebForm has the “Next” button. Obviously you can rename the Next button, but the behavior is always when you click that button it goes to the next step.

In all intermediate steps, you have the next and previous button

In the final step, you have the Submit button.

Now the issue here is whatever button you click, you are either taken to the next step or previous step. There is no button which when clicked will save the record but will not redirect you to the next page kind of “Save” button which just save the record and does not navigate.

Now that we understand the requirement, the next step is to implement the same.

The first thing is to insert the “Save” button. And let’s say we will always put it after the first button.

So to make the code generic, we write the following code.

$(window).on("load", function () {
    $fb = $("div.actions input[type='button']:first");
    $("<input type='button' id='btnSave' name='btnSave' value='Save' class='submit-btn btn btn-primary form-action-container-left' />")
       .insertAfter($fb);   $("#btnSave").bind("click", function () {
       // if you want you can perform some custom logic before you call save.
       WebForm_DoPostBackWithOptions
          (new WebForm_PostBackOptions(undefined, '', true, '', '', false, true));
    });
});

If you observe the code carefully, we are taking the first button from the action buttons and inserting our custom save button right after that. Also the trick is to call the WebForm_PostBackOptions with the name of the previous button.

And then finally use the code in the Custom javascript section of each webform step.

And now once you refresh the portal cache and browse the webform, you can see the Save button.

And now let’s see all this in action. Just observe the below video where I click on Next and it saves the record but does not move to the next step. Kind of stuff we expected right?

Hope this helps!

Debajit Dutta

(Microsoft MVP)