Power apps portal - Multistep webform. Exit and edit button

[UmerJaved]

Hi,

We have a multistep webform with 2 buttons on the steps (Previous, "Save and Next") connected to CDS case entity. We have couple of enhancements requirements where we need the following

1:  Provide "Save and Exit" button  - therefore user should be able to exit from any step and return later for completion/submission

2:  Provide "Edit" button in the list view if case is not submitted yet. 

I wonder how we can achieve this?

Thanks

[OliverRodrigues]

Hi @UmerJaved 

1 - You can't achieve that OOB, this requires an HTML post, and it's only achievable with the Next page or Submit button

If you really need this, you might be able to achieve it with the following strategy (just brainstorming here, I never done it myself though):

• Add a custom attribute to your entity (a flag just to trigger a custom plugin)
• Add the button via JS
• The button will set your flag to trigger the Plugin
• Add sync Plugin that once the record is updated you revert the Web Form Session associated to the previous step

Just thinking out-loud here, that Plugin/attribute might be in the Web Form Session and not your entity, but not sure.

2 - You can add actions to your subgrid similar as we do for Entity Lists: https://docs.microsoft.com/en-us/powerapps/maker/portals/configure/configure-web-form-subgrid

I've been facing issues lately that the Edit action is not really working, what you can do is add a Details action and point to an Edit Entity Form (and add a custom button label)

------------

If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

[v-xida-msft]

Hi @UmerJaved ,

Do you want to add a custom "Save and Edit" button in your Web Form Step?

Do you want to add a "Edit" option in the List View?

For your first question, do you want to add a custom "Save and Edit" button in your Web Form Step? Regarding the needs that you mentioned, I afraid that there is no direct way to achieve your needs.

As an possible solution, I think custom JavaScript code could achieve your needs. Please check and see if the following blog could help in your scenario:

https://debajmecrm.com/2020/03/11/quick-tip-save-a-record-in-powerapps-portals-using-custom-button-o...

On your side, you should open the specific Web Form Step in your Portal, then switch to "Form Options" option, then scroll down to the "Custom JavaScript" part:

$(document).ready(function() {
   // Type your custom code here. Details Steps as below:
   $("div.actions").append("<input type='button' id='btnSaveAndExit' name='btnSaveAndExit' value='Save and Exit' class='submit-btn btn btn-primary form-action-container-left' />")


   // bind the click event to this custom buttton
   $("#btnSaveAndExit").bind("click", function () {
            // perform your own logic here.
            WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions($(this).prev().attr("name"), '', true, '', '', false, true));

            });
});

For your second question, please make sure you have enabled "Enabled Permission" option for the Case Entity List in your Portal:

then the "Edit" icon would be shown up as below:

Please try above solution, then check if the issue is solved.

Regards,

[UmerJaved]

Hi @v-xida-msft 

Thanks for the reply.

Regarding 1:  I'll try this option however upon clicking on this button (Save  & Exit)  the form should be saved as well as closed therefore redirection to "my support cases" page should happen.

Regarding 2:  Just to make it clear, the "Edit" option should appear conditionally and not all the time. i.e. As long as web form is not fully submitted(consent flag is not ticked on final page before submission) the "Edit"  option should appear in the list against respective support case otherwise the "Edit" option should be hidden and the form is therefore read only. Can we make it conditionally visible?

Thanks

[UmerJaved]

Thanks @OliverRodrigues  I am currently exploring the suggestion given by other folk in the thread. If needed, will revert back to your idea..

[OliverRodrigues]

You can add condition by adding a fetch filter

Please refer to this post: http://oliverrodrigues365.com/2020/04/26/power-apps-portals-entity-list-conditional-action/

[v-xida-msft]

Hi @UmerJaved ,

I agree with @OliverRodrigues 's thought almost. Please try his solution to achieve your needs.

Regards,

[UmerJaved]

Hi @OliverRodrigues  and @v-xida-msft 

Thanks I can get the conditional fetch xml working. However when  "Edit" option displays and if I click on it, I want user to be able to edit the multi step web form. So in the "Edit" option I am pointing to the multi step web form which loads however it is the same web form which is used for creating a case hence it doesn't show my existing saved values given the first step is "insert" mode. Can I make the same multi step web form conditional using a conditional step(and what would be the condition) so it serves both purpose? i.e. "Create a case" as well as "Edit a case"?

Thanks

[UmerJaved]

Hi @v-xida-msft,

Following your sample code for point 1,I have got the button displayed on the web form step(called "Save and Exit") however clicking on it takes to the next step instead whereas I want kind of save and complete exit from this web form and redirect to home page for support. i.e. My list of cases.  How do I achieve this redirect?

Thanks

[justinburch]

Hi @UmerJaved - for the first issue, I would recommend having a field (I would recommend Option Set) hidden on the step's form (hide using JavaScript/CSS - if a field is hidden at the form level, it won't transfer to the Portal at all), and on load clear it [$("new_fieldid").val("");] and in your validations set the field to the correct value [$("new_fieldid").val(100000);].

Now you can insert a Condition Web Form step after this that does a check to see if the value is the "correct value" (new_fieldid == 100000), and if so redirect to a Redirect step for your cases. Else, move on to the next step that was used previously.

This could be re-used in multiple places.

For the second issue, you won't be able to use the same Web Form and will need to create a second. This is the same as Entity Form, where you can have either Insert or Edit but not both. You'll just need to point the Edit button to that other form's web page.