Powerapps Portals - Custom Save button on webform step - issue

[doneill2cc]

Custom Save Button On Web Form Step @debajit 

I have followed the above articles steps to add a custom save button to a webform step. The issue I am having is that the code seems to do something but the WebForm_DoPostBackWithOptions function seems to do nothing, no new data is being posted back to CRM when the button is clicked. 

$(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 () {
       console.log('Save Button Clicked')
       WebForm_DoPostBackWithOptions
          (new WebForm_PostBackOptions(undefined, '', true, '', '', false, true));
    });
});

Would anybody have any idea how I could fix this? I am pulling what little hair I have left out with this one 🤣.

Thanks in advance,

David 

[eugenevanstaden]

Can you move the existing save button with JS rather?

Any specific reason you want to hide it and submit via a secondary button?

[doneill2cc]

Hi @eugenevanstaden 

Thanks for the reply. This issue is not hiding the existing button. To the best of my knowledge there is no simple "save" button available on a web flow steps. There have been some blog posts about how to add a button that will save the current form step and do a postback to CRM as an update task. Following a very helpful chat with the author of the code above he discovered that the code now no longer works due to changes to the portals. 

So unfortunately, as it stands I do not know if there is a solution or if another method/process to achieve the same functionality.

Going to keep digging and breaking things!

Thanks again Eugene

[eugenevanstaden]

@doneill2cc 

The Next button will post the form and save and move on to the next step.

By default the label is Next.

[doneill2cc]

Hi @eugenevanstaden 

Thanks, I'm aware of the next button functionality. I'm looking to stay on the same Web form step without having to move to the next step to initiate a save.

Thanks

[eugenevanstaden]

hi @doneill2cc 

If you want to save the form without doing a Postback, which is what they save button will do, then best is to submit a POST via the Portal CRUD Api.

https://docs.microsoft.com/en-us/power-apps/maker/portals/web-api-overview

This way you can push the data back without submitting the form.

Then the Save button submits and moves to the next step.

[jamestredree]

Hey Eugene, 

Regarding your Portal CRUD Api post.

Do you have an example how might this be implemented on a web form step to post data to a dynamics table without moving onto the next web form step?

I can code a button, I just don't now how to post the data.

James 

[eugenevanstaden]

@jamestredree 

There are a number of ways, its all Javascript.
One way is to create your own custom button, hide the current and submit the hidden Submit button once your API returns successful

Then you

[jamestredree]

Can you post the whole Javascript here so I can see if I can apply it to my requirements please? 

[eugenevanstaden]

@jamestredree 

https://docs.microsoft.com/en-us/power-apps/maker/portals/write-update-delete-operations

 ApiHelper.safeAjax({
                type: "PATCH",
                url: "/_api/xx_yourentity(" + data.id + ")",
                contentType: "application/json",
                async: false,
                data: JSON.stringify(data),
                success: function (res) {
                    response.code = 200;
                },
                fail: function (xhr, status, error) {
                    response.code = 500;
                    response.message = error;
                }
            });

        // Add a new Save button and hide the out of the box one so we can call the Api update 
        // on our one and then if its successful we can trigger the out of the box one.
        let nextButton = $("#NextButton");
        if ($(nextButton).length) {
            $(nextButton).hide();
            $(nextButton).before("<button type='button' name='ApiSaveButton' value= 'Save and continue' id = 'ApiSaveButton' class='btn btn-default' nonactionlinkbutton='true'>Save and continue</button>");
        }

Then in the ClickEvent of this new button you can submit your data via the API, and then you click the hidden NextButton.

            ).then(function (response) {
                console.log("Save Completed Successfully");
                $("#NextButton").trigger("click");