PowerApps repeating table

In this PowerApps Tutorial, We will see how to create a PowerApps repeating table in the PowerApps App.

PowerApps repeating table

First of all, you need to know what is Repeating rows or repeating table? Repeating row means each and every column in a row that matches with another row in the same table. Shortly, We can say it is a Duplicate row of the same table.

Similarly, PowerApps Repeating rows means it contains a set of controls and allows the user to insert multiple objects (rows) of data as per their need. However, It looks like the below screenshot:

Requirements to do in PowerApps:

• Here, When you will click on the “+” icon, then a new row will add with all the same controls (including the serial number).
• When you will click on the Cancel icon of a specific row, then it will delete that particular row from the table.
• If you want to store all the row values in a SharePoint list, then you can click on the Save button.
• If you want to clear all the data or records from the table, then you can click on the Clear button as in the above screenshot.

Follow the below steps to cover all these above requirements:

Step – 1:

At first, Create a SharePoint List named Purchase Order Details. This list has these below columns with different data types as:

1. Title = This is the By default column. Just I renamed it to Purchase Date.
2. Repeated Section = This is the multiline text column.

Step – 2:

On the PowerApps screen, Insert these below controls and set some formula to their related properties:

1. Add some Label controls for the heading purposes that looks like as below:

For example, Insert a Label control and set its Text property to Product Name. Similarly, do the same thing for rest headings.

2. Add a + icon and set its OnSelect property as:

OnSelect = Collect(
    PurchaseCollection,
    {
        CSerialNumber: Text(Last(PurchaseCollection).CSerialNumber + 1),
        CProductName: "",
        CProductQuantity: "",
        CProductPrice: "",
        CMulQuantityAndPrice: "",
        CVendorPhoneNumber: ""
    }
)

Where,

• PurchaseCollection = PowerApps Collection name
• CSerialNumber, CProductName, CProductQuantity, CProductPrice, CMulQuantityAndPrice, CVendorPhoneNumber = These are the headers that will create in the PowerApps Collection

3. Save and Publish the app. Reopen the app again and click on the Add (+) icon. Once you will click on the + icon, the new row will increment with the same labels. The same rows will increment when you will click on the + icon number of times. That means Number of Clicks on + icon = Number of times create the Rows

Step – 3:

• Next, add a Gallery control (Blank vertical) below the headers. Add some Text input controls for each field or header (inside the gallery control).
• That means, In the below Product Name header, I have added one Text input control (set its Default property to blank). For the rest headers also, I did the same thing that looks like as shown in the below screenshot.
• I have a column named “Quantity * Price” that helps to multiply both Quantity and Price value. Here, I have used this below formula on Text input’s Default property as:

Default = txtProductQuantity*txtProductPrice

Where,

1. txtProductQuantity = Product Quantity text input control name
2. txtProductPrice = Product Price text input control name

• You can see this multiply field is in Disable mode because I don’t want that the user will edit it. I want the user will only view it without editing.

Step – 4:

• Select the Gallery control and set it’s Items property to the Collection name:

Items = PurchaseCollection

Where,

PurchaseCollection = Powerapps Collection name

• Now to increment the serial number (like 1, 2, 3, and so on), you need to specify the value in its Properties pane. Select the Serial Number input control -> Go to Properties pane -> Select CSerialNumber in the txtPurchaseSerialNumber field as shown in the below screenshot.

Step – 5:

• Next, to remove each row from the gallery control, you can use a Cancel icon. For that, Add a Cancel icon and apply its OnSelect property to:

OnSelect = RemoveIf(
    PurchaseCollection,
    CSerialNumber = ThisItem.CSerialNumber
)

Where,

1. PurchaseCollection = Collection name
2. CSerialNumber = Serial Number column name

• This formula helps if you want to remove unnecessary row from the gallery, then you can click on the cancel icon directly and that specific row will remove.

Step – 6:

• Now it’s time to save the rows in the SharePoint list data source. Insert a Button (should be outside the gallery control) and rename it to Save that will help you to store the values in the SharePoint list.
• Select the save button input and apply this below formula on its OnSelect property as:

OnSelect = Set(
    AllPurchasesString,
    Concat(
        Gallery1.AllItems,
        Concatenate(
            txtPurchaseSerialNumber.Text,
            "; ",
            txtProductName.Text,
            "; ",
            txtProductQuantity.Text,
            "; ",
            txtProductPrice.Text,
            "; ",
            txtQuantityPrice.Text,
            "; ",
            txtVendorPhoneNumber.Text,
            " | "
        )
    )
);
Patch(
    'Purchase Order Details',
    Defaults('Purchase Order Details'),
    {
        Title: Text(Today()),
        'Repeated Section': AllPurchasesString
    }
);
Notify(
    "Record Submitted Succesfully!",
    NotificationType.Success
)

Where,

1. AllPurchasesString = Variable name
2. Gallery1 = Gallery control name
3. Concatenate = This is the PowerApps function that helps to concatenate a mix of individual texts
4. txtPurchaseSerialNumber, txtProductName to txtVendorPhoneNumber = These are the text input control names
5. “ | ” = This is one type of delimiter that will help you to separate the number of repeating rows
6. Patch = PowerApps Patch Function is used to modify single or multiple records of a data source. Also, it helps to create new records as well.
7. Purchase Order Details = This is the SharePoint list name where the row values will store
8. Title = This is the SharePoint By default column name where it will store today’s or the current date
9. Repeated Section = This is the multiline text column where the values will store
10. Notify = This function helps to notify that the record has been submitted successfully in the SharePoint list

Step – 7:

• Suppose in case you want to clear all the rows from the gallery control. Then you can take another button and rename it to Clear. Select the clear button and apply this below formula on its OnSelect property as:

OnSelect = Clear(PurchaseCollection)

Where,

PurchaseCollection = Collection name

• Once you will click on the Clear button, then all the row values will removed and the gallery will clear.

Step – 8:

• Save and Publish the app. Reopen the app again. Click on the + icon to add a new row. Enter all the field values and click on the Save button as shown below.

• Once you will save the data, a successful notification will appear that “Record Submitted Successfully!“.
• Next, go to the specific SharePoint list (Purchase Order Details) and refresh it. You can see the new items have been created with the separation of “|”.

Also, you may like these PowerApps Tutorials as:

• PowerApps CountIf Function with Examples
• PowerApps CountRows function with Examples
• PowerApps Count Function with Examples
• PowerApps CheckBox – How to use
• PowerApps First, FirstN, Last, and LastN function with examples
• PowerApps LastSubmit() with Examples
• PowerApps AddColumns Function with Examples
• PowerApps if statement with examples
• PowerApps ForAll Function with examples
• PowerApps Replace Function with examples
• PowerApps SharePoint Lookup Column + PowerApps Dropdown Example
• PowerApps Pen input control (PowerApps signature)

Hence in this PowerApps Tutorial, We saw how to create the repeating rows or a repeating table in the PowerApps screen.