Working with Forms and Controls in Power Apps – Complete Guide

📌 Introduction

Forms and controls are fundamental building blocks in Power Apps, enabling users to interact with data, capture inputs, and create dynamic applications. Whether you’re designing a data entry form, customizing controls, or integrating external data sources, understanding how to effectively use forms and controls will enhance your Power Apps development.

This guide will cover:
✔ Types of Forms in Power Apps
✔ Adding and Configuring Forms
✔ Understanding Controls
✔ Working with Different Controls (Buttons, Text Inputs, Dropdowns, Galleries, etc.)
✔ Customizing Forms and Controls
✔ Managing Form Submissions and Data Updates

🔹 Step 1: Understanding Forms in Power Apps

Forms in Power Apps allow users to enter, edit, and display data from different sources such as SharePoint, Dataverse, SQL Server, and Excel.

✅ Types of Forms

Power Apps provides three primary types of forms:

1️⃣ Edit Form – Used for editing existing data in a connected data source.
2️⃣ New Form – Used for creating a new record in a data source.
3️⃣ View Form – Used for displaying data without allowing edits.

✅ Adding a Form to a Power Apps Screen

🔹 Step 1: Insert a Form

Open Power Apps Studio.
Click on Insert > Forms > Edit Form (or select another type).
The form will appear on your screen.

🔹 Step 2: Connect the Form to a Data Source

Click on the form.
In the right-hand properties panel, select Data Source.
Choose a data source (e.g., SharePoint, SQL Server, Dataverse).

🔹 Step 3: Configure Fields

Click on Edit Fields and add or remove fields as needed.
Drag and rearrange fields for a better layout.

🔹 Step 2: Working with Controls in Power Apps

Controls in Power Apps allow users to interact with forms and data.

✅ Common Controls in Power Apps

Control Type	Description
Label	Displays text or data from a source.
Button	Executes an action when clicked.
Text Input	Allows users to enter text.
Dropdown	Provides a list of selectable options.
Combo Box	Similar to a dropdown but allows searching and multi-selection.
Toggle	Provides a switch between two states (on/off).
Slider	Allows users to select a value from a range.
Date Picker	Enables users to select a date.
Gallery	Displays multiple records in a scrollable list.

🔹 Step 3: Customizing Forms and Controls

Power Apps allows extensive customization of forms and controls to match your design needs.

✅ Changing Control Properties

Each control has properties that define its behavior and appearance.

📌 Example: Customizing a Button

Select a Button control.
In the Properties Panel, modify:
- Text → Change button text (e.g., “Submit”).
- Color → Set to a different color (Red, Blue).
- OnSelect → Define what happens when the button is clicked.

🔹 Changing Button Color Based on Condition

If(txtInput.Text = "", Red, Green)

📌 Behavior: The button turns red if the input field is empty and green otherwise.

🔹 Step 4: Handling Form Submission and Data Updates

✅ Submitting a Form

📌 Scenario: You want to save user-entered data to a SharePoint list.

🔹 Step 1: Add a Button for Submission

Insert a Button control.
Set the OnSelect property to:

SubmitForm(EditForm1)

📌 Behavior: When clicked, the form will save data to the connected data source.

✅ Resetting a Form

📌 Scenario: Reset the form after submission.

🔹 Step 1: Add a Reset Button

Insert another Button.
Set OnSelect property to:

ResetForm(EditForm1)

📌 Behavior: Clears the form fields.

🔹 Step 5: Validating User Input in Forms

To prevent incorrect data entry, Power Apps allows validation before form submission.

✅ Example: Making a Field Required

📌 Scenario: Ensure a user enters their name before submitting.

🔹 Step 1: Display an Error Message

Add a Label under the text input field.
Set its Visible property to:

IsBlank(txtName.Text)

📌 Behavior: Shows the label if the field is empty.

🔹 Step 2: Disable the Submit Button Until Valid

Set the DisplayMode of the Submit button:

If(IsBlank(txtName.Text), DisplayMode.Disabled, DisplayMode.Edit)

📌 Behavior: The button stays disabled until the user enters text.

🔹 Step 6: Working with Galleries to Display Data

A Gallery control is used to display a list of records dynamically.

✅ Adding a Gallery

Insert a Gallery (Insert > Gallery > Vertical Gallery).
Connect it to a data source (e.g., SharePointList).
Set Items property to:

SharePointList

📌 Behavior: Displays all records from the SharePoint list.

🔹 Step 7: Navigating Between Screens in Multi-Screen Apps

Navigation between screens improves the user experience.

✅ Adding Navigation Buttons

Insert a Button.
Set its OnSelect property to:

Navigate(Screen2, ScreenTransition.Fade)

📌 Behavior: Moves to Screen2 with a fade transition.

✅ Going Back to the Previous Screen

Insert another Button.
Set OnSelect to:

Back()

📌 Behavior: Returns to the previous screen.

🔹 Step 8: Customizing the User Experience

✅ Changing Theme Colors

Modify Fill property of controls for a consistent theme:

RGBA(0, 120, 215, 1) // Blue

✅ Making Forms Responsive

To ensure forms adjust to screen sizes, use the Width property:

Parent.Width * 0.8

📌 Behavior: The form takes 80% of the screen width dynamically.

🔹 Step 9: Handling Error Messages in Forms

To handle errors when submitting forms, use:

If(Form1.Valid, SubmitForm(Form1), Notify("Please correct errors!", NotificationType.Error))

📌 Behavior: Shows an error message if the form contains invalid data.

🔹 Step 10: Best Practices for Forms & Controls

✅ Use consistent color schemes for a professional look.
✅ Validate inputs before submission to avoid data issues.
✅ Use labels and tooltips to improve user guidance.
✅ Optimize performance by limiting unnecessary controls.
✅ Test forms on mobile and desktop views for responsiveness.

🔹 Conclusion

Mastering forms and controls in Power Apps allows you to create dynamic, user-friendly applications that interact efficiently with data sources. By understanding how to add, configure, and customize forms and controls, you can build powerful apps that enhance business processes.