How to Create Reusable Form Control in PowerApps

Introduction

In this article, I will be representing to open form as a new form for the items in PowerApps as well as in edit form in PowerApps. I have tried to provide the scenario with solutions in the below steps.

Scenario

One of the most fundamental requirements is opening a form in a different mode depending on the requester or user. This article will discuss how to open different ways of new, display, and edit in the same form. This solution is the foundation of Power Apps. On top of this, further functionalities could be added.

Objective

I've employed a common gallery with one button to create an item and two icons, Copy and Arrow (We shall ignore the copy icon and focus only on the arrow icon). When a user clicks on the button, the form opens in a new form, and when the user clicks on the arrow icon, the form opens in the edit form.

Here is my gallery with a button and icons to perform the specific action. I shall link this article in my future articles so that end-to-end knowledge is transitioned.

Step 1. Click on Create Item button

Step 2. Navigate the form depending on the requirement.

There are 3 properties on which the form could be navigated.

Below are examples for OnSuccess and OnFailure. In the below example, Back() navigates to the gallery back.

OnSuccess

OnFailure

Step 3. Save/Submit button functionality

On the Save button OnSelect property, all the logic/validation could be written; all the variables could be reset, which could be used for validations. In the end, the Form could be submitted with the below methods. All the functions could be separated with a comma separated, as shown below.

The screenshot below shows how to write multiple methods on the same button.

ResetForm(Form1) will be written to cancel the request and make the form clear.

There are two ways the edit form could be opened. One method in which the forum could be opened directly, as shown in Step 4 (a), and another method could open the form in display form and edit form. The second method, the edit form will navigate from the display form instead of the gallery directly.

Step 4 (a). Open form in edit mode

On click of the arrow, the form opens in the edit form for that particular item from the gallery.

Note - On Edit Form, we need to pass the variable so that Edit Form understands which item details are to be displayed. For me, ActionForm is playing the role of Edit Form.

Step 4 (b). Open the form in display form, then edit form

We shall see how the form will navigate from the display form to the edit form.

The screenshot below shows how to open the form in view form.

Now in display form, an icon will be provided to open the edit form. Without any action from the display form, the edit form can not open.

Here is the screenshot of the display form.

After the Edit button is clicked, On Edit button the formula will be like

Once the edit button is clicked, the form opens like the below screenshot.

Once the Edit form opens edit button visibility property can have its formula to hide the button.

The home button has the formula to navigate back to the gallery, and the formula is Navigate(ScrnAllItems) on the OnSelect property.

The save button will have the same formula, just like the new form.

Conclusion

This article discussed the feature form module, its benefits, and one practical example with step-by-step implementation.