Unanswered

Powerapps Portals - Custom Save button on webform step - issue

(0) Share

Report

Posted on by Daoneill

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

Categories:

Power Apps portals

I have the same question (0)

All responses (9)

Answers (0)

eugenevanstaden 441 on at

Like (0)

Report
Copy link

Link copied!

Can you move the existing save button with JS rather?

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

Was this reply helpful? Yes No
Daoneill 4 on at

Like (0)

Report
Copy link

Link copied!

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

Was this reply helpful? Yes No
eugenevanstaden 441 on at

Like (0)

Report
Copy link

Link copied!

@doneill2cc

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

By default the label is Next.

Was this reply helpful? Yes No
Daoneill 4 on at

Like (0)

Report
Copy link

Link copied!

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

Was this reply helpful? Yes No
eugenevanstaden 441 on at

Like (0)

Report
Copy link

Link copied!

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.

Was this reply helpful? Yes No
jamestredree 11 on at

Like (0)

Report
Copy link

Link copied!

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

Was this reply helpful? Yes No
eugenevanstaden 441 on at

Like (0)

Report
Copy link

Link copied!

@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

Was this reply helpful? Yes No
jamestredree 11 on at

Like (0)

Report
Copy link

Link copied!

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

Was this reply helpful? Yes No
eugenevanstaden 441 on at

Like (1)

Report
Copy link

Link copied!
@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");

Was this reply helpful? Yes No