PowerApps Repeating Tables like InfoPath Part 1 - Enter the data

Introduction

In this tutorial, you'll learn how to create repeating tables in PowerApps, similar to those in InfoPath, by utilizing SharePoint lists as data sources. The focus will be on building an expense report with a customized gallery for efficient data entry. This step-by-step guide will ensure you can replicate the functionality effectively.

Step 1: Set Up Your SharePoint List

1. Create a SharePoint List:

   • Navigate to your SharePoint site.
   • Click on "Site Contents" and then "New" followed by "List".
   • Name your list (e.g., "Expense Report") and define the necessary columns:
     • Title (Single line of text)
     • Amount (Currency)
     • Description (Multiple lines of text)
     • Date (Date and Time)

2. Populate the List with Sample Data:

   • Add a few entries to your list for testing purposes.

Step 2: Create a New PowerApp

1. Open PowerApps:

   • Go to PowerApps.
   • Select "Create" and choose "Canvas app from blank".

2. Connect to Your Data Source:

   • In the app creation interface, click on "Data" on the left panel.
   • Select "Add data" and choose your SharePoint connector.
   • Connect to the "Expense Report" list you created earlier.

Step 3: Customize Your Gallery

1. Insert a Gallery:

   • In the PowerApps designer, click on "Insert" and select "Gallery".
   • Choose a layout that suits your needs (e.g., Vertical).

2. Bind the Gallery to Your Data:

   • Set the Items property of the gallery to your SharePoint list:

     Items = 'Expense Report'
     

3. Design the Gallery Layout:

   • Select the gallery and customize the displayed fields (Title, Amount, Date, Description).
   • Use the right-hand properties panel to adjust text size, colors, and formatting.

Step 4: Add Functionality for Data Entry

1. Add Input Fields:

   • Below the gallery, insert input fields for each data point: Title, Amount, Description, Date.
   • Use the "Text input" control for Title, Amount, and Description, and the "Date Picker" for Date.

2. Create a Submit Button:

   • Insert a button labeled "Submit".
   • Set its OnSelect property to:

     Patch('Expense Report', Defaults('Expense Report'), {Title: TitleInput.Text, Amount: AmountInput.Text, Description: DescriptionInput.Text, Date: DateInput.SelectedDate})
     

   • This line of code submits the data from your input fields to the SharePoint list.

Step 5: Enable Repeating Functionality

1. Implement a Collection for Repeating Rows:

   • Create a collection to store multiple entries. Set the OnSelect property of the "Submit" button to:

     Collect(ExpenseCollection, {Title: TitleInput.Text, Amount: AmountInput.Text, Description: DescriptionInput.Text, Date: DateInput.SelectedDate});
     Clear(TitleInput); Clear(AmountInput); Clear(DescriptionInput); Reset(DateInput);
     

   • This collects all submitted entries into a temporary collection and clears input fields for new entries.

2. Bind the Gallery to the Collection:

   • Change the Items property of the gallery to:

     Items = ExpenseCollection
     

Conclusion

You have now successfully created a repeating table in PowerApps that mimics the functionality of InfoPath using SharePoint lists. You've set up a gallery for data entry, added input fields, and enabled the ability to submit multiple entries.

For further learning, consider exploring Part 2 of this series for advanced functionalities or check out the video links provided for additional resources. Happy app building!