Power Apps Form Modes – NewForm, EditForm and ViewForm

Power Apps Form Modes – NewForm, EditForm and ViewForm

Forms are the most important skill you can master on your journey to becoming a master Power Apps maker. A single form in Power Apps can be used to create a new record, edit an existing record or view a record depending on its mode. We change the mode of a form by using the functions NewForm, EditForm, ViewForm and we reset a form with Reset Form function. In this article I will show you how to use Power Apps form modes to input, change and view data.

Table of Contents:
Introduction: The Restaurant Inspections App
Setup The SharePoint List
Create A New Screen With A Form
Create A New Screen With A Gallery
View A Gallery In The Form (ViewForm Function)
Edit A Gallery Item In The Form (EditForm Function)
Reset The Form When Leaving The Screen (ResetForm Function)
Add A New Item To The Gallery (NewForm Function)




Introduction: The Restaurant Inspections App

The Restaurant Inspections app is used by food safety inspectors to evaluate restaurants are following food safety procedures. Inspectors add new inspections, edit inspections and view inspections all in the same form.




Setup The SharePoint List

Create a new SharePoint list called Restaurant Inspections with the following columns:

  • RestaurantName (single-line text)
  • StreetAddress (single-line text)
  • InspectionDate (date ony)
  • PassedFailed (choices) with two options Passed or Failed



Then input this inspections data into the list:

RestaurantNameStreetAddressInspectionDatePassedFailed
Clementine Cafe120 North Haverbrook Drive9/21/2021Passed
Kenny Rogers Steakhouse13 Main Street9/21/2021Failed
Pho No 167 Selkirk Avenue9/21/2021Passed
Stella’s Bakery10 Cherry Lane9/22/2021Passed
Olive Garden123 Foxgrove Road9/22/2021Failed
Pony Corral90 Tuscon Avenue9/23/2021Passed
Taco Del Mar16 Macgregor Street9/23/2021Passed




Create A New Screen With A Form

The first screen we make will have a form to record inspection results. Open Power Apps Studio and create a new app from blank. Add a new screen called Form Screen and insert a label at the top of the screen with the text “Restaurant Inspections.”



Go to the left navigation bar and open the Data menu. Add the Restaurant Inspections SharePoint list to connect it to the app. Then insert a new form onto the screen and select Restaurant Inspections as the datasource.



Delete the title and attachments cards. We do not require any input for those fields. Then change the form to a 1 column/vertical layout by selecting form and changing those properties in the right-side menu.



To complete the form, insert a submit button at the bottom…



…and add this code to the OnSelect property to submit the form when the inspector presses it.

SubmitForm(frm_Inspection)

The next screen we will setup is a gallery to display all of the previously entered inspections. Duplicate the Form Screen and delete everything except the titlebar label. Then insert a gallery in the center of the screen and choose the Title, subtitle and body layout. Then click Edit fields to change the gallery’s contents.



Select these fields for the following options:

  • Title – RestaurantName
  • Subtitle – StreetAddress
  • Body – PassedFailed

A food safety inspector selects an inspection from the gallery to view its details in read-only mode.



Write this code in the OnSelect property of the gallery to get the inspection record, change the form to view mode and then navigate to the form screen.

Set(varRecordInspection, ThisItem);
ViewForm(frm_Inspection);
Navigate('Form Screen');



Then use the app in preview mode and select one of the inspections in the gallery. When the form screen opens it will not show any values. This is because we need to supply the inspection record to the form.



Fill-in this code in the Item property of the form to tell it which record to show.

varRecordInspection



Now the form shows data from the selected inspection. One more thing we need to do is hide the Submit button when the form is is view mode.



Use this code in the Visible property of the button.

frm_Inspection.Mode<>FormMode.View


Food safety inspectors must be able to edit an inspection to correct data-entry errors. Insert a new Edit icon onto the titlebar.



Then use this code in the OnSelect property of the Edit icon. Now when we click the icon it changes the form to edit mode and the input fields appear.

EditForm(frm_Inspection)



Before we submit the changes we must tell the form what to do when the data is successfully saved to the SharePoint list.



Use this code in the OnSuccess property of the form. After the form is saved, it stores the edited record in the varRecordInspection variable, changes the form to view mode and then notifies the inspector the form was saved by showing a green banner at the top of the scree.

Set(varRecordInspection, frm_Inspection.LastSubmit);
ViewForm(frm_Inspection);
Notify("Inspection Form was successfully saved.", NotificationType.Success);



We must also define what happens when the form cannot be saved. Write this code in the OnFailure property of the the form to show a red banner with an error message.

Notify("Error: inspection form was not saved", NotificationType.Error);



Now give the form a try. When we click the Submit button the form changes to view mode and we see a success notification at the top of the screen.




Reset The Form When Leaving The Screen (ResetForm Function)

When the food inspector leaves the screen we need to reset the form. If we do not reset the form any data entered into it will remain showing even though a another record might have been selected. Insert a new left arrow icon on the left side of the titlebar.



Then use this code to return to the gallery and reset the form.

Navigate('List Screen');
ResetForm(frm_Inspection);

The last feature food inspectors require is the ability to create a new inspection. Insert an Add icon on the right-side of the titlebar.



Then fill-in the OnSelect select property with this code. It will set the varRecordInspection to blank, change the form to new mode and navigates to the form screen.

Set(varRecordInspection, Blank());
NewForm(frm_Inspection);
Navigate('Form Screen');



When we click on the Add icon and go to the form screen initially the Edit icon is showing. An inspector should not have an option to edit while creating a new record.



Use this code in the Visible property of the Edit icon to hide it.

frm_Inspection.Mode=FormMode.View



Now we are ready to test the form. Fill-in the form with inspection details and click the Submit button.



When we submit the form a success notification shows at the top of the screen…



…and the new inspection shows at the bottom of the gallery.





Questions?

If you have any questions or feedback about Power Apps Form Modes – NewForm, EditForm and ViewForm please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion.

Matthew Devaney

Subscribe
Notify of
guest

34 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Necdet Saritas
Necdet Saritas
2 years ago

Not only enjoy I love it

Necdet Saritas
Necdet Saritas
2 years ago

Hi Matthew,
Are you sure the button OnSelect property must have SubmitForm(btn_submit) ???

Dominik Petri
Dominik Petri
2 years ago

Great article! Thanks! One question :
Why do you use the Lookup function to populate varRecordInspection and not Gallery1.Selected?

Thanks!

Dominik Petri
Dominik Petri
2 years ago

What I meant is why not use Set(varRecordInspection, Gallery1.Selected)?

Kam
Kam
2 years ago

the reason why i prefer the LOOKUP instead of Gallery1.Selected, is because if you use Gallery1.Selected and use the Form.Unsaved property on another screen.. then unsaved will give incorrect results.

wont it?

Ramesh Mukka
Ramesh Mukka
2 years ago

Why Set(varRecordInspection, LookUp(‘Restaurant Inspections’, ID=ThisItem.ID)); and why not Set(varRecordInspection, ThisItem);

Zewdu Kebad
Zewdu Kebad
2 years ago

Hello Sir!!!!
I have no word to express you. I can say just simply fantastic!!!
I have a question, may be I am not right
Why don’t you make a record power apps and power automate full course and sell for those who are demanding it???
Could you please make a video and help us?
please don’t keep this much priceless knowledge only with you.
I never see a power app expert like you.
please please please help us!!!
Many thanks.
I am really interested to catch your brilliant knowledge at any cost.
I hope, you will give the answer for my question.
I apricate you
Many thanks Mr Mattew Davaney
sincerely
Zewdu Kebad

Columbus,OH,USA

Zewdu Kebad
Zewdu Kebad
2 years ago

Thanks So much Matt for your positivity. I am waiting.

Bala
Bala
2 years ago

Hi Matthew thanks for sharing the valuable information for us.I really appreciate the way you are doing for others that sharing your knowledge

Bala
Bala
2 years ago

Can you please share a detailed knowledge on power Automate.that could be a great

Bob S
Bob S
2 years ago

I get an error saying ‘Title’ field is required when I try to submit a new entry. I expected that as Title field is a required field in SharePoint lists. How did you get around this please?

Zewdu Kebad
Zewdu Kebad
2 years ago

Hello Sir!!!
I have a question???
I saw that you built multiple forms on a single screen for one data Sources.
If we want build multiple forms on a single screen on different data sources for each form with out add gallery(all buttons are added on the screen .
The problem is when each form has been submitted by its on submit button and it is in view Mode, the rest forms do not display/ load any thing and even can’t edit /add each form in view mode by its own edit/add icon or by a single i con for all forms. I need to edit and add new item on each Form in view mode after submit. How could I do this for each form ???
many thanks

MikeL
MikeL
2 years ago

When using NewForm(frm_Inspection);Navigate(‘Form Screen’); can we specify SetFocus( Control ) when navigating to that new form screen with blank form fields, so that focus is on a specific form field without having to select, tab, or touch it first?

MikeL
MikeL
2 years ago

Matthew, LOL. I don’t know if what I suggested actually works. I’m asking if it would be possible, because I’m unclear if “NewForm” is different from an edit screen, which doesn’t seem to allow setting focus on fields.

Nithish
Nithish
1 year ago

@Matthew Devney. Everything works perfectly alright. I cannot save a new entry. Instead its editing the last saved entry. Can you please help me what am I missing here ?

Martin Opare
Martin Opare
1 year ago

Superb Matthew. Question: Pls how can I print to a zebra (z410) label printer from either a desktop, phone, or both. thanks

Martin
Martin
1 year ago

Thank you Mattew.

Ron Kochanowski
Ron Kochanowski
1 year ago

Hi Matthew, I thought I’d pull you back in time a bit… 🙂

Wondering if there’s a way to format a number on a New Form similar to how you do this on an Edit Form? I’ve added this to the Default of an Edit Form,

Text(Parent.Default, "$ #,###")

and the field displays perfectly. But, on a New Form I simply get the imputed text, no formatting…because the value isn’t saved yet. Any work-arounds?

Jose Tamez
5 months ago

Man, you are a lifesaver! I greatly appreciate all the hard work it took for you to get all of these examples online. I’m old school and I’ve been doing SharePoint since 2006 and I’ve always worked with Visual Studio C#. I’ve been reluctant to move to the modern technology and the Power platform. I’ve been doing Power Apps and Power Automate for almost two years now, and you’ve been instrumental in my success. Thank you!

Josh Morel
Josh Morel
5 months ago

Thanks Matthew. I want a button to cancel & refresh the form but stay on the ‘Form Screen’ switching it back to view. However, the edited data is retained. Sometimes it resets in a second or two. Sometimes it doesn’t at all. Any suggestions?

Ian Irvine
Ian Irvine
1 month ago

Hey, I really enjoyed this article. Found it when I got frustrated making a lovely form (we all know how hard that is) then discovering I had to make it all over again to be able to edit it