Power Apps Form Modes - NewForm, EditForm and ViewForm

Imported reference from Matthew Devaney's blog for learning purposes. Original: https://www.matthewdevaney.com/power-apps-form-modes-newform-editform-and-viewform/. Author: Matthew Devaney.

Power Apps Form Modes – NewForm, EditForm and ViewForm Posted by - Matthew Devaney on - October 3, 2021 38 Comments

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: RestaurantName StreetAddress InspectionDate PassedFailed Clementine Cafe 120 North Haverbrook Drive 9/21/2021 Passed Kenny Rogers Steakhouse 13 Main Street 9/21/2021 Failed Pho No 1 67 Selkirk Avenue 9/21/2021 Passed Stella’s Bakery 10 Cherry Lane 9/22/2021 Passed Olive Garden 123 Foxgrove Road 9/22/2021 Failed Pony Corral 90 Tuscon Avenue 9/23/2021 Passed Taco Del Mar 16 Macgregor Street 9/23/2021 Passed 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) Create A New Screen With A Gallery

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

View A Gallery In The Form (ViewForm Function)

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' ); Code language: JavaScript ( javascript )

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 Code language: CSS ( css )

Edit A Gallery Item In The Form (EditForm Function)

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); Code language: JavaScript ( javascript )

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); Code language: JavaScript ( javascript )

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); Code language: JavaScript ( javascript )

Add A New Item To The Gallery (NewForm Function)

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' ); Code language: JavaScript ( javascript )

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. Did You Enjoy This Article? 😺

Subscribe to get new Copilot Studio articles sent to your inbox each week for FREE Enter your email address Sign Me Up 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. EDITFORM function Forms NEWFORM function RESETFORM function SUBMITFORM function VIEWFORM function Matthew Devaney M365 Copilot Power Apps

How To Create Copilot Custom UI Widgets In Power Apps