Easiest way to Create SharePoint New or Edit Form Using PowerApps

Loading

Easiest way to Create SharePoint New or Edit Form Using PowerApps

Introduction

In order to proceed with the creation of any PowerApps, we need form creation. It depends on our requirements whether the form mode will be edited or new, or displayed. We will see here how to create forms in the easiest manner.

Scenario

A list is created with several column types. This SharePoint list will be associated with the data source in PowerApps.

Objective

Creating a form in PowerApps is the most basic need in order to create PowerApps app. In this post, we'll look at how to create a new or edited form in PowerApps. We shall create only one form, which will play the dual role of new and edit forms.

We shall see the form creation only for learning purposes; the form could be customized as needed.

Step 1. The list structure would look like below

Create SharePoint New or Edit Form Using PowerApps

We will not create a lookup column here because the lookup value in PowerApps could be stored in a single line of text too.

Step 2. Select the form to be added on the PowerApps screen.

Here in this example, we are going to add Edit Form, which also plays the role of the new form. The same form could be used as a display form as well.

Create SharePoint New or Edit Form Using PowerApps

Step 3. Fit the form size as per the UI design

After adding the edit form, the form would get added to the screen. Make the size fit into the screen as per the UI design. Pull the size of the form on the screen.

Create SharePoint New or Edit Form Using PowerApps

Step 4. Choose the DataSource

Click on Add data. Enter SharePoint in the search. Scroll the search results to select SharePoint.

Create SharePoint New or Edit Form Using PowerApps

Choose connection

Create SharePoint New or Edit Form Using PowerApps

After the connection is chosen by clicking the connection or created, Popup to select site popup.

Create SharePoint New or Edit Form Using PowerApps

Once the site is selected, we need to select the list.

Create SharePoint New or Edit Form Using PowerApps

After the data source is added, it appears in Data left pane.

Create SharePoint New or Edit Form Using PowerApps

When we click on the form which selects the form, enable the data source selection in the right panel.

Create SharePoint New or Edit Form Using PowerApps

On click of the arrow on Data Source in the right panel populates all the data sources. In the current scenario, it looks like below.

Create SharePoint New or Edit Form Using PowerApps

When the data source is chosen, the form looks as shown below; we could customize the rows and columns by selecting the Columns property as shown below.

Create SharePoint New or Edit Form Using PowerApps

Adding Buttons on the UI

To add buttons, we need space like mentioned at the beginning of the article; We need to fit the form as per UI design. So, now the UI is pulled up to bring submit and cancel buttons.

We would write the formula to save the form on submit button and on the cancel button to come out of the form. We can choose columns as per our choice. In the below screenshot, we can see a 3 in drop-down value. This could be changed as per our choice from the drop-down value, which is appearing in the right-hand side property pane (Columns property).

Create SharePoint New or Edit Form Using PowerApps

Click on the button twice. It looks like below.

Create SharePoint New or Edit Form Using PowerApps

Align next to each other and change the Text property.

Create SharePoint New or Edit Form Using PowerApps

Write the formula on the OnSelect of buttons

For Submit button

SubmitForm(Form2);Notify("The record has been submitted",NotificationType.Success)

Create SharePoint New or Edit Form Using PowerApps

For the Cancel button

That's how the form is designed, and to set the display mode of the form we can write the formula on the form's property. As soon as we select the form, its property gets highlighted.

ResetForm(Form2); Notify ("The form has been re loaded");

Create SharePoint New or Edit Form Using PowerApps

Default mode

If the default mode of the form is new, then the form gets loaded as soon as the app navigates to that screen. Here, DefaultMode is FormMode.New

Create SharePoint New or Edit Form Using PowerApps

Click here to preview the app.

Create SharePoint New or Edit Form Using PowerApps

When the default mode is set as FormMode.New, the form loads by default as a new form. In this case, we will open the form in edit mode from where ever we would like to navigate to see the form in edit mode. Most of the cases, we navigate from gallery items. So, over there Onselect event of the icon will have EditForm(Form2) formula written.

Create SharePoint New or Edit Form Using PowerApps

Let us see another example of display mode. I have added a new button, for example, to show now. To create the button above-mentioned steps (Adding Buttons on UI ) were followed.

FormMode.Edit

Create SharePoint New or Edit Form Using PowerApps

By default, the mode will be an edit of the form when there is no value passed to be displayed in the edit form. Then the form by default opens like the one below, and the formula needs to be written to display the item details in the edit form.

Create SharePoint New or Edit Form Using PowerApps

The formula on Create New item button can be written as shown below.

OnSelect: ResetForm(Form2);NewForm(Form2); This resets the form and opens with blank values for all fields.

Final O/p

Create SharePoint New or Edit Form Using PowerApps