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]()