How to Create Power Apps Repeating Table With New Form?

Last month, I developed a Travel Request application in Power Apps. The app has a travel request form that includes three SharePoint list details. This form includes the employee’s personal information and flight and family details.

Here, I need to create repeating tables for family and flight details so employees can enter more details. Finally, I must simultaneously save the data to three SharePoint lists with a single Power Apps save button.

In this tutorial, I will explain how to create Power Apps repeating table with new form. Also, we will discuss how to save the repeating data to single and multiple SharePoint lists.

Create Power Apps Repeating Table With New Form [Save Data in Multiple SharePoint Lists]

In the example below, you can see that I have the employee’s personal information, family data, and flight details on one screen.

Flight details and family data are entered through a repeating table. After clicking the save button, the data is stored in three SharePoint lists at a time.

The SharePoint list “Employee Travel Request Details” stores employees’ personal information.

This “Flight Details” SharePoint lists the store’s employee flight details.

The third SharePoint list is “Family Details,” which stores the employee’s family data.

Note: Employee Name field is the common field in all the three SharePoint lists.

Follow the steps below!

1. In Power Apps, connect with the three SharePoint lists. Then, add a Scrollable screen from +NewScreen. If you have more content, then the screen will be scrollable.

2. The scrollable screen has a Canvas object within that DataCard is present. Add a Power Apps Container to this data card, and add an Edit Form control within the container.

Then, connect the form with the “Employee Travel Request” SharePoint list.

3. Add a Blank Vertical Gallery control within the container to create repeating tables for flight details SharePoint list. Also, add some Text labels for headings and the Add (+) icon.

4. Now, add the below code in the OnSelect property of the Add icon.

Collect(
    colFlight,
    {
        SerialNumber: Text(Last(colFlight).SerialNumber + 1),
        FlightFrom: "",
        FlightTo: "",
        FlightDate: "",
        FlightTicketType:""
    }
);

Here, we’re creating a collection for flight details, so I took all the columns we need to provide in the repeating table. So when I click on this add icon, a new record will be created with empty values every time.

5. Then, within the Power Apps gallery, add the following controls.

• Three Text input controls: For S.No, Flight From, Flight To.
• Date Picker control: Flight Date.
• Dropdown control: Flight Ticket Type.
• Cancel Icon: To remove the rows.

Fetch the flight details SharePoint list choice column “flight ticket type” values into the Power Apps dropdown control within the gallery by providing the below formula in the Items property of the dropdown control.

Choices([@'Flight Details'].FlightTicketType)

6. Add the below collection name in the Items property of the gallery control present in the container.

colFlight

7. Then, provide the below formulas on the default property of each control present within the Power Apps gallery.

S.No text input control’s Default property:

ThisItem.SerialNumber

S.No text input control’s Format property:

Number

Flight From text input control’s Default property:

ThisItem.FlightFrom

Flight To text input control’s Default property:

ThisItem.FlightTo

Flight Date date picker control’s DefaultDate property:

ThisItem.FlightDate

Flight Ticket Type dropdown control’s Default property:

ThisItem.FlightTicketType

Additionally, provide the formula below in the OnSelect property of the cancel icon in the Power Apps gallery.

RemoveIf(colFlight,SerialNumber=ThisItem.SerialNumber)

This code will remove the record that we select.

8. Let’s have an overall look at how the add icon and cancel icon are working.

Note: If you're not able to increate the height of scrollable screen, drag the DataCard present in canvas object to down also the container you'll get space how much you dragged.

9. By following the same steps, create another repeating table for the Family Data SharePoint list. Here, I’m providing code for each step; you add the required fields and provide the below formulas.

Add icon’s OnSelect property:

Collect(
    colFamily,
    {
        SerialNumber: Text(Last(colFamily).SerialNumber + 1),
        FullName: "",
        Age: "",
        FamilyRelationship: ""
    }
)

Gallery control’s Items property:

colFamily

Add four text input controls and one cancel icon within the gallery. For the “S.NO” and “Age” text input controls, set the Format property to Number.

Then, add the below formulas for each control specified properties:

1. S.No text input Default property                      : ThisItem.SerialNumber
2. FullName text input Default property           : ThisItem.FullName
3. FamilyRelation text input Default property: ThisItem.FamilyRelationship
4. Age text input field Default property             : ThisItem.Age
5. Cancel icon OnSelect property                        :RemoveIf (colFamily ,SerialNumber =ThisItem .   SerialNumber)

Now, save the changes and preview once; you can see the family data repeating table.

Let’s see how to save the form, flight, and family details repeating tables data to three SharePoint lists.

10. Add a Power Apps Button control within the container. Then, add the code below to the button control’s OnSelect property.

//Submit Form Data to Employee Travel RequestDetails
SubmitForm(Form);

//Submit Family Details
ForAll(
    Gal_FamilyDetails.AllItems,
    Patch(
        'Family Details',
        Defaults('Family Details'),
        {
            'S.NO': Value(txt_sno.Text),
            'Full Name': txt_fullname.Text,
            FamilyRelation: txt_FamilyRelation.Text,
            Age: Value(txt_Age.Text),
            'Employee Name': {
                '@odata.type': "#Microsoft.Azure.Connectors.SharePoint.SPListExpandedUser",
                Claims: "i:0#.f|membership|" & User().Email,
                Department: "",
                DisplayName: User().FullName,
                Email: User().Email,
                JobTitle: "",
                Picture: ""
            }
        }
    )
);
// Save Flight Details
ForAll(
    'Gal_Flight Details'.AllItems,
    Patch(
        'Flight Details',
        Defaults('Flight Details'),
        {
            'S.NO': Value(txt_sno.Text),
            'Flight From': txt_FlightFrom.Text,
            'Flight To': txt_FlightTo.Text,
            'Flight Date': dtp_FlightDate.SelectedDate,
            'Flight Ticket Type': {Value: drp_ticketType.Selected.Value},
            EmployeeName: {
                '@odata.type': "#Microsoft.Azure.Connectors.SharePoint.SPListExpandedUser",
                Claims: "i:0#.f|membership|" & User().Email,
                Department: "",
                DisplayName: User().FullName,
                Email: User().Email,
                JobTitle: "",
                Picture: ""
            }
        }
    )
);
Notify("Your Details Submitted Successfully",NotificationType.Success)

We first submitted the form details to the “Employee Travel Request” SharePoint list in the above code.

Then, using the ForAll function, we fetch all items present in the gallery, and with the help of the Patch function, we submit data to SharePoint lists. This process is the same for both repeating tables.

This way, we can simultaneously save multiple repeating tables and form details to different SharePoint lists.

Save Power Apps Repeating Table and Form Data in a Single SharePoint List

In the above section, we’ve seen storing the Power Apps repeating tables and form data for different SharePoint lists. Now, I will explain how to save both repeating table and Power Apps form data to the same SharePoint list.

Look at the example below. After submitting the Power Apps form, multiple repeating table values are stored in a single SharePoint list.

Here is the SharePoint list named Travel Authorization.

This list contains the following columns.

Column Names	Data Type
Employee name	Title(Single line of text)
Position	Single line of text
Department	Choice(HR,IT,Finance,Marketing)
Family data	Multiline of text
FlightDetails	Multiline of text

1. In Power Apps, add a scrollbar screen and container by following the first two steps in the above section. Add an Edit form within the container that connects with the above Sharepoint list.

Note: Set the Visible property of “Family data” and “FlightDetails” data cards to false.

2. To create a repeating table for the family data field. Add a Blank Vertical Gallery -> Within the gallery, add four text input controls and a cancel icon. Outside the gallery, add four text labels and an Add icon.

3. Add the below code in the OnSelect property of the Add icon.

Collect(
    FamilyDetails,
    {
        SerialNumber: Text(Last(FamilyDetails).SerialNumber + 1),
        FullName: "",
        Age: "",
        Relationship: ""
    }
);

4. Add the below collection name to the gallery’s Items property.

FamilyDetails

5. Then, add the formulas below for each text input control’s Default property where the controls are present within the gallery. Ensure the S.No and Age text input controls, and the Format property is Number.

1. S.No text input Default property                      : ThisItem.SerialNumber
2. FullName text input Default property           : ThisItem.FullName
3. FamilyRelation text input Default property: ThisItem.FamilyRelationship
4. Age text input field Default property             : ThisItem.Age
5. Cancel icon OnSelect property                        :RemoveIf (FamilyDetails ,SerialNumber =ThisItem .   SerialNumber)

6. Create another repeating table for the flight details field by following Steps 4-8 in the above section. The code is also the same.

7. Add a Power Apps Button control, then provide the code below to its OnSelect property.

UpdateContext(
    {
        NewItemStrings: Concat(
            galFamilyDetails.AllItems,
            Concatenate(
                "SNO:",
                txt_sno_Fam.Text,
                ",",
                " FullName: ",
                txt_surname_Fam.Text,
                ","," Age: ",
                txt_age_Fam.Text,
                ","," Relation: ",
                txt_relation_Fam.Text,
                Char(10),Char(10)
            )
        )
    }
);
UpdateContext(
    {
        NewItemString_Flight: Concat(
            Gal_FlightDetails.AllItems,
            Concatenate(
                "SNO:",
                txt_SNo_Fli.Text,
                ",", " FlightFrom: ",
                txt_FlightFrom_Fli.Text,
                ","," FlightTo: ",
                txt_FlightTo_Fli.Text,
                ","," FlightDate: ",
                dtp_FlightDate_Fli.SelectedDate,
                ","," FlighTicketType: ",
                drp_ticketType_Fli.Selected.Value,
                Char(10),Char(10)
            )
        )
    }
);

SubmitForm(TravelRequestForm);
NewForm(TravelRequestForm)

Here, we’re creating two local variables that store family and flight details, repeating table data.

• NewItemStrings: Local variable stores family data.
• NewItemString_Flight: Local variable stores flight data.

8. Provide the below variable in the Default property of the family data field data card value within the edit form.

NewItemStrings

9. Provide the variable in the Default property of the flight details data card value in the form.

Now, save and publish the app. Then, preview and test it once; you can save data to a single SharePoint list.

I hope you understand how to create Power Apps repeating tables and save repeating tables data to multiple and single SharePoint lists.

By following this article, you can create multiple Power Apps repeating tables and store data in multiple or single SharePoint lists, depending on your requirements.

Also, you may like:

• Generate Unique ID in Power Apps
• Power Apps collection examples
• Power Apps modern button control
• Power Apps functions
• Display Power Apps collection gallery