Everything You Need To Know About Power Apps Patch Forms

In Power Apps there are two techniques for making a form: an Edit Form and a Patch form. I favor using Patch forms and I regularly get asked the questions “why should I use a patch form?” and “what are the best practices when creating a patch form?” In this article I will teach you everything I know about creating awesome Power Apps patch forms and guide you through an in-depth tutorial.

Table Of Contents:
When To Use A Patch Form Vs. An Edit Form?
Introduction: The Gradebook App
Setup The SharePoint List
Design The Form Patch Form Layout - Title, Inputs & Submit Button
Submit Form Data With The Patch Function
Check For Errors After Patching A Record
Validate Patch Form Data Before Submission
Change Patch Form Controls From Edit Mode To View Mode
Select A Record To Edit From A Gallery
Edit A Record With A Patch Form
Reset Patch Form Input Fields
Add A New Record To A Patch Form

When To Use A Patch Form Vs. An Edit Form

Edit Forms are the fastest way to add a form to your Power Apps. Their input fields are automatically generated which cuts down development time, implementing your own logic for data validation and error-handling is easy to do and they have a consistent look and feel. If they suit your purpose, you should use them instead of a patch form.

However, there are many reasons you may want to use a Power Apps Patch Forms instead:

• Patch forms give you total control over the design/layout of the form as opposed to Edit Forms which have a highly-defined structure
• Patch forms are easier to maintain since you can select all of the controls at once to change their style and re-positioning their input fields is drag-and-drop
• Patch forms can write their data back to a local collection which useful when a form has multiple screens or the app has an offline-mode

Introduction: The Gradebook App

The Gradebook App is used by teachers at a high-school to record test scores. Teachers input the student name, subject, test name and score into a form and the data gets saved to a SharePoint list.

Setup The SharePoint List

Create a new SharePoint list called Test Scores with the following columns:

• StudentName (single-line text)
• Subject (choices: math, language arts, geography, science)
• TestName (single-line text)
• Score (number)

No data is required to be loaded into the the Test Scores SharePoint list initially. We will write data to the SharePoint list once the form is created.

StudentName	Subject	TestName	Score

Design The Patch Form Layout – Title, Inputs & Submit Button

When using an Edit Form control in our apps we insert the form onto the screen, select a datasource and then a form is automatically generated with input fields for each field found in the datasource. Oppositely, when we choose to build a Power Apps Patch Form, we must do all of that work manually. We will start by connecting to the datasource and designing the layout of our form.

Open Power Apps Studio and create a new tablet app from blank. Name the blank screen Gradebook Form Screen and add a new label to it with the text “Gradebook App” to serve as a titlebar.

Connect the Test Scores SharePoint list to the app.

Then insert 3 pairs of labels and text inputs onto the screen. Each label should display a the title of text input field (Student Name, Test Name, Score). Position the controls vertically as shown below as use the use control names found in the tree view on the left side of the screen.

Create one more pairing of a label and combobox. The Subject field in our Test Scores SharePoint list is a Choices data type and the combobox allows those choices to be selected from a list.

Use this code in the Items property of the ComboBox to populate it with values.

Choices('Test Scores'.Subject)

Finally, place a green-colored button submit button at the bottom of the form. Now our form layout is completed and we are ready to apply some code to it.

Submit Form Data With The Patch Function

With an Edit Form we use the SubmitForm function to save form data back to a SharePoint list. When building a Power Apps Patch Form our own form we must use the Patch function instead to submit data. The Patch function creates a new record or modifies an existing record in a datasource. It takes 3 arguments: the datasource name, the base record to modify or create, and a record containing the properties to modify the base record.

Write this code in the OnSelect property of the submit button. It will create a new record in the SharePoint list containing the input field values found in our form. We specify a new record should be created by using the Defaults function in the 2nd parameter.

Patch(
    'Test Scores',
    Defaults('Test Scores'),
    {
        StudentName: txt_Form_TestName.Text,
        Subject: cmb_Form_Subject.Selected,
        TestName: txt_Form_TestName.Text,
        Score: Value(txt_Form_Score.Text)
    }
)

For more information on how to patch every SharePoint column type check out this handy guide.

Check For Errors After Patching A Record

After attempting to patch a record (i.e. submit a record) to the SharePoint list it is a best practice to check for errors. We cannot simply assume that because we submitted the record that it saved successfully. Then, once we know what happened we ought to execute different code for a success and a failure. Edit Forms have a built in OnSuccess and OnFailure property but since we have chosen to build a Power Apps Patch Form we must write our own error-handing manually.

Update the submit button OnSelect property with the following code below. The Errors function returns error information for the previous write to a datasource. Or if there were no errors it returns nothing. Here we are writing an if statement to check whether the errors function is empty. When empty, we show a success message and when not empty, we show a failure message. We have essentially replicated the OnSuccess and OnFailure property of an Edit Form with this code.

// submit the form data
Patch(
    'Test Scores',
    Defaults('Test Scores'),
    {
        StudentName: txt_Form_TestName.Text,
        Subject: cmb_Form_Subject.Selected,
        TestName: txt_Form_TestName.Text,
        Score: Value(txt_Form_Score.Text)
    }
);
// check for errors
If(
    IsEmpty(Errors('Test Scores')),
    // on success
    Notify(
        "Success: Gradebook Form Saved",
        NotificationType.Success
    ),
    // on failure
    Notify(
        "Errors: Gradebook Form Was Not Saved",
        NotificationType.Error
    )
)

For a full-tutorial on how to perform error-handling in Power Apps check out this article.

Validate Patch Form Data Before Submission

Performing a data validation check on a form prior to submission ensures a good user experience. If the form data is not valid, we disable the submit button. This way the user cannot make a form submission when it we know it will not be accepted by the SharePoint list and avoids having to wait and find out the record was rejected.

In an Edit Form we perform data validation in the Valid property of each Card control. When creating a Power Apps Patch Form we write the data validation code inside the DisplayMode property of the submit button.

Use this code to ensure that no fields are blank when submitting the form and that test scores are not less than 0 or greater than 100. If any of the conditions are met the submit button becomes disabled.

If(
    Or(
        IsBlank(txt_Form_StudentName.Text),
        IsBlank(cmb_Form_Subject.Selected),
        IsBlank(txt_Form_TestName.Text),
        IsBlank(txt_Form_Score.Text),
        Value(txt_Form_Score.Text) < 0,
        Value(txt_Form_Score.Text) > 100
    ),
    DisplayMode.Disabled,
    DisplayMode.Edit
)

Here’s how the form should look when a teacher is filling-in the form. The submit button is disabled until the teacher fully completes the form.

For more advanced data validation techniques check out this article.

Change Patch Form Controls From Edit Mode To View Mode

When the form is submitted successfully the input fields should become locked and no-longer accept changes. In an Edit Form we do this by changing the entire form mode to View mode. With a Power Apps Patch Form we must update each individual input’s DisplayMode to View mode.

Go to the submit button, browse to the OnSelect property and scroll to the error-checking section of the code.

Add an UpdateContext function to the code’s on success branch and create a variable called locFormDisplayMode. This text variable will track the current DisplayMode of the Patch form: New, Edit or View mode.

// submit the form data
Patch(
    'Test Scores',
    Defaults('Test Scores'),
    {
        StudentName: txt_Form_TestName.Text,
        Subject: cmb_Form_Subject.Selected,
        TestName: txt_Form_TestName.Text,
        Score: Value(txt_Form_Score.Text)
    }
);
// check for errors
If(
    IsEmpty(Errors('Test Scores')),
    // on success
    UpdateContext({locFormDisplayMode: "View"}); // <-- new code
    Notify(
        "Success: Gradebook Form Saved",
        NotificationType.Success
    ),
    // on failure
    Notify(
        "Errors: Gradebook From Was Not Saved",
        NotificationType.Error
    )
)

Then, select all of the input fields at once…

…and use this code in the DisplayMode property to control whether they are editable or are locked.

If(
    locFormDisplayMode="View",
    DisplayMode.View,
    DisplayMode.Edit
)

The submit button should also disappear when the form is in view mode to prevent form submission.

Use this code in the Visible property of the submit button to hide it.

locFormDisplayMode<>"View"

Select A Record To Edit From A Gallery

At this point we’ve covered how to submit an new record with the Patch function. The next scenario we must tackle is editing an existing record. Create a new screen called Gradebook List Screen. Insert a new gallery showing the list of Test Scores along with the student name and test name.

The Items property of the gallery should be the Test Scores SharePoint list.

'Test Scores'

When the teacher selects a record in the gallery they should be taken to the Gradebook Form Screen and be able to edit test details.

Write this code in the OnSelect property of the gallery.

// get the record
Set(
    varCurrentRecord,
    LookUp(
        'Test Scores',
        ID = ThisItem.ID
    )
);
// go to next screen
Navigate(
    'Gradebook Form Screen',
    Fade,
    {locFormDisplayMode: "Edit"}
);

Edit A Record With A Patch Form

Once the teacher selects a test score from the gallery the test data must appear in the Patch form. To make this happen, go to the Gradebook Form Screen and change the Default property of the Student Name text input…

…to this code. It supplies the StudentName field from the varRecordCurrent variable.

varCurrentRecord.StudentName

Continue the same pattern for the Default property of the Test Name and Score text input fields.

// Test Name
varCurrentRecord.TestName

// Score
varCurrentRecord.Score

The Subject field must be handled differently because it is a combobox.

Put this code in the DefaultSelectedItems property of the Subject combobox.

varCurrentRecord.Subject

Then we make two updates to the submit button’s OnSelect code. First, we replace the 2nd parameter of the patch function to supply the varCurrentRecord variable which holds our record to be edited. Then we encapsulate the patch function inside of the Set function and capture the response inside the same variable, varCurrentRecord.

// submit the form data
Set(  //<-- new code
    varCurrentRecord,
    Patch(
        'Test Scores',
        varCurrentRecord,  // <-- new code
        {
            StudentName: txt_Form_StudentName.Text,
            Subject: cmb_Form_Subject.Selected,
            TestName: txt_Form_TestName.Text,
            Score: Value(txt_Form_Score.Text)
        }
    )
);
// check for errors
If(
    IsEmpty(Errors('Test Scores')),
    // on success
    UpdateContext({locFormDisplayMode: "View"});
    Notify(
        "Success: Gradebook Form Saved",
        NotificationType.Success
    ),
    // on failure
    Notify(
        "Errors: Gradebook From Was Not Saved",
        NotificationType.Error
    )
)

Now the Patch form functionality to edit records is completed.

Reset Patch Form Input Fields

After editing a record the teacher will navigate back to the Gradebook List Screen to perform their next activity. We must reset the form so it is ready to display the next record the teacher chooses. With an Edit Form we would simply use the ResetForm function to do this. But with a Power Apps Patch Form, as always, we must define the form reset manually.

Insert a right arrow icon onto the left-side of the title bar.

Then use this code in the icon’s OnSelect property to navigate back to the Gradebook List Screen.

Navigate('Gradebook List Screen', Fade)

Our form reset code will trigger when the teacher leaves the form Gradebook Form Screen.

Use this code in the OnHidden property of the screen to clear all variables to blank and reset each form control individually.

// clear variables
Set(varCurrentRecord, Blank());
UpdateContext({locFormDisplayMode: Blank()});
// reset controls
Reset(txt_Form_StudentName);
Reset(cmb_Form_Subject);
Reset(txt_Form_TestName);
Reset(txt_Form_Score);

Add A New Record To A Patch Form

When we created the previous functionality to edit an existing record we removed the ability to create a new test score. We will now add that functionality back to the Gradebook app. With an Edit Form we would add a new record by changing the form to New mode. In a Power Apps Patch Form we specify a new record should be created by supplying a blank record in the 2nd argument of the patch function.

Insert an Add icon and a label on the right-side of the Gradebook List Screen titlebar with text “Add Test Score”.

Use this code in the OnSelect property of both controls.

// get the record
Set(
    varCurrentRecord,
    Defaults('Test Scores')
);
// go to next screen
Navigate(
    'Gradebook Form Screen',
    Fade,
    {locFormDisplayMode: "New"}
);

That’s all you have to do. When we input data into the form and click submit it will create a new record.

Questions?

If you have any questions or feedback about Everything You Need To Know About Power Apps Patch Forms 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.