PowerApps Forms - Introduction to Data Sources, Data Cards, and Layout
Updated: May 21, 2021
PowerApps Forms provides a powerful option for managing complex data across teams, making it a critical piece of development software for production.
Follow these steps to learn how to connect to your gallery so you can design forms, add data, and manage your layouts. Follow along with Shane's video on YouTube:
Getting Started with PowerApps Forms
Start with a blank tablet form. Click ‘Insert’ from the top ribbon, and then select ‘Gallery’ from the available options. PowerApps will load a vertical gallery.
Use the ‘Data’ tab to select your data source. It should be in a pane on the right. PowerApps will use it to populate your gallery.
Creating and Viewing a New Form
To create a form, use the ‘Form’ tab in the top ribbon. There should be two types available, edit and display. While an edit form will allow you to view and change information, a display form will only let you view it. Generally, you should select an edit form for more flexibility, unless you don’t want the information to be changed later on.
Next, PowerApps will ask you to select a data source. You should choose the same source that was used in your gallery to make sure the program syncs the data correctly.
PowerApps will now design your form. Wait a few seconds, and the new form window should pop up in the gallery. You can move and resize the window if necessary.
Adding and Populating Your Data
PowerApps displays the available fields for each card in the gallery. They will probably still be blank because you have not yet populated them with your data sources.
Click on the box that says ‘Data Source’ in the top left and choose ‘Item’ to change the item property. Setting the item property will determine what items populate the fields.
Now, type ‘Gallery1.Selected’ into the input box. PowerApps will now populate the information based on which rows you select.
Editing and Managing Data Cards
With your form selected, you should see the editing options on the right side. Selecting ‘Data,’ ‘Fields,’ or ‘Layout’ will open up another menu.
Depending on your data source, you may have the ‘Edit data’ option. This will have PowerApps open your source for easy editing. If you have made changes to your source or added a new column, use the ‘Refresh’ option to regenerate the database or save and reopen your file to force the information to refresh.
The ‘Snap to columns’ option is key to getting forms the way you want them to look. This option allows dynamic resizing of windows and ensures correct sizing every time. Choosing more columns allows you to place them more accurately and will allow you to obtain your desired layout.
Creating a Custom Data Card
In the ‘Fields’ section, press the ellipses to add a custom data card. Scroll down to the bottom of the list and find ‘DataCard1.’ Drag this up and place it beneath the ‘Title’ card. Press the play button to preview the app. Some whitespace should now appear beneath the title, giving the form a more professional look.
You can also select a picture to embed in the table. Click on your data card and select the ‘Icons’ tab from the top ribbon to insert an image into the field. The form is now ready to have text, images, and any other type of data embedded.
Managing Card Fields and Layouts
Go to the list in the left pane and click ‘Form 1.’ Here, you have the option to display the fields vertically or horizontally by changing the ‘Layout’ option.
PowerApps will display a card for every field that you have input into your form. Selecting a field will show the card’s configuration properties.
The left pane will display each card’s options:
StarVisible: Creates an asterisk in fields that are required.
ErrorMessages: Hides or displays the error message output in the app.
DataCardValue: General input field for changing the default behavior of the card (You will likely use this one the most)
PowerApps will choose the data type in each card. It is not possible to edit data per card, and issues should be resolved through the data source. Check the formatting of the source data cell if there are any problems.
Unlocking Data Cards For Further Editing
Data cards are locked by default to keep users from accidentally making changes. Click on ‘Advanced’ in the card properties and select ‘Unlock to change properties’ to unlock the card for editing. This tells PowerApps that it is a custom card that you want to have privileges to edit and make changes. The card’s color should change from purple to gray.
If the custom card is no longer working correctly, you can select ‘Delete this custom card’ and reselect the empty card at the bottom of the list to reset the properties back to default.
It is possible to change the data displayed on the card by unchecking it from the ‘Fields’ list. Changing the display won’t remove the information; only keep it from being viewable.
Implement Your Own Solutions with PowerApps Forms
These steps provide the framework necessary to get started with PowerApps forms. You should now be ready to implement your own data solutions.
Find out more about how to master PowerApps with our training program.