PowerApps Forms - Introduction to data sources, data cards, and layout

Introduction

This tutorial serves as an introduction to PowerApps Forms, focusing on key components such as data sources, data cards, and layout design. It is designed to provide foundational knowledge essential for creating effective forms in PowerApps. By following the steps outlined here, you'll learn how to connect to a data source, use data cards, and manage form layouts.

Step 1: Set Up Your PowerApps Environment

• Open PowerApps and create a new blank tablet form.
• To begin, you need to add a gallery to your screen:
  • Select "Insert" from the menu.
  • Choose "Gallery" and then select "Vertical Gallery."
• Connect the gallery to your data source:
  • For this tutorial, we'll use SharePoint, but any supported data source will work.
  • Set the gallery’s data source to your SharePoint list or appropriate data source.

Step 2: Add the Form

• Click on "Insert" and then select "Forms."
• Choose "Edit Form" since it allows for both editing and displaying data:
  • Remember, display forms are not flexible and should generally be avoided unless specifically needed.
• Set the data source for the form to match the gallery's data source:
  • For example, set it to "Employees" if using a SharePoint list named Employees.

Step 3: Configure the Form Item Property

• With the form selected, look for the "Item" property.
• Set the Item property to the selected item in the gallery:

  Item = Gallery1.Selected
  

• This ensures that the form displays the correct data based on the selected gallery item.

Step 4: Customize the Form Layout

• Adjust the layout to suit your needs:
  • Use the "Snap to Columns" feature to create a visually appealing layout.
  • You can switch between two, three, or even twelve columns based on your design requirements.
• To change the number of columns:
  • Select the form and adjust the column count in the properties pane.

Step 5: Utilize Data Cards

• Explore the data cards created for each field in the form:
  • Each field corresponds to a data card, which can be customized.
• To modify a data card:
  • Select the specific data card you want to customize.
  • Use the "Advanced" settings to unlock the card if needed.
• To add a custom card:
  • Click on the ellipsis (three dots) and select "Add Custom Card."
  • Position the new card as needed to adjust your layout.

Step 6: Manage Data Card Properties

• Understand the properties of each data card:
  • Visible: Control whether the card is displayed based on certain conditions.
  • Update: This property determines what data is sent back to the data source when the form is submitted.
  • To set the Update property, select the data card and look for the Update formula:

    Update = DataCardValue.Text
    

Step 7: Refresh Data Source and Layout Adjustments

• If you modify your data source (e.g., adding new columns), remember to refresh the form:
  • Use the "Refresh" button in the properties pane to update the form with the latest data.
• Adjust the visibility of specific fields based on the form mode (e.g., view, edit):
  • Use a conditional statement to control visibility based on the form's state.

Conclusion

You've successfully set up your PowerApps Form by connecting to a data source, designing the layout, and customizing data cards. The next steps involve exploring more advanced features, such as form modes and data validation. If you have further questions or need assistance, feel free to reach out to PowerApps911 for support. Happy creating!