Add repeating section in PowerApps

As we already discussed, Gallery is a multipurpose control in the canvas app. One of the use-cases of gallery is the repeating section, this scenario will be applicable between Parent-Child relationships in Lists or tables and if the form is converted from Nintex, InfoPath (OOTB repeating section control available there) to PowerApps then this post will be useful.

With the help of other controls and formulas, repeating section can be implemented in Power Apps.

Gallery needs collection or table (direct query from the table or list) as datasource. In this example, we used Dataverse as a table

1. Create a collection on Screen “OnVisible” to feed it to the gallery. We cannot use variables inside “ForAll” so “colTemp” is used as increment variable. It is used to display the S.No.

//Increment Variable
ClearCollect(colTemp,{counter:0});

//Gallery Data
Clear(colGalleryData);
Collect(
    colGalleryData,
    ForAll(Sort(
        Filter(
            365Stack_ReviewData,
            ReviewID = currentItem.ID
        ),'Created On',Ascending),
        {
            stage: Stage,
            action: Action,
            user: User,
            date: ReviewedDate,
            no:Patch(colTemp,First(colTemp),{counter:Sum(First(colTemp).counter,1)}).counter,
            ID:ID

        };

    )

);

2. Add gallery control in the screen and map the created collection in the “Items” property. Click the edit icon and add controls inside the gallery. Each control should be mapped “ThisItem” with collection properties. For Eg: the label control is mapped with ID property from the collection. To set gallery height dynamically use the following formula.

Items: colGalleryData
//To adjust the gallery height dynamically
Height: Self.TemplateHeight * CountRows(Self.AllItems) + 60

3. Added rows can be deleted, So the delete option is provided. The record has to be deleted from the collection then it has to be deleted from the list or table and the S.No has to be updated in the collection because if any in between record is deleted remaining numbers have to be re-arranged.

Use the below formula in Delete icon OnClick

//Reset Counter variable
ClearCollect(
    colTemp,
    {counter: 0}
);

//Remove the record from collection
RemoveIf(
    colGalleryData,
    no = ThisItem.no
);

//Remove the record from table or list
If(!IsBlank(lblID.Text),RemoveIf(365Stack_ReviewData,ID = lblID.Text));

//Update the S.No in collection and increment the counter
ForAll(
    gal365Stack_ReviewData.AllItems,
    UpdateIf(
        colGalleryData,
        no = Value(lblSno.Text),
        {no: Sum(First(colTemp).counter,1)}
    );
    Patch(colTemp,First(colTemp),{counter:Sum(First(colTemp).counter,1)})   
)

4. Need to provide an option to add a record in the gallery. For this, we need to use the patch function to add empty rows to the collection.

In Add Rows Icon

Patch(colGalleryData,Defaults(colGalleryData),{no:Sum(CountRows(gal365Stack_ReviewData.AllItems),1),stage:"",action:"",user:"",date:Now()})

5. Next step is to save the gallery data, In this case, we are not saving on each row processing. All the gallery data is saved in one button link. Here we are checking whether the data is already present in the table, if it is there update patch will be called otherwise it will create a new record.

On Form Save

//Loop gallery data and save the data.
ForAll(
        gal365Stack_ReviewData.AllItems As gal,
        If(
            IsBlank(gal.lblID.Text),
            Patch(
                365Stack_ReviewData,
                Defaults(365Stack_ReviewData),
                {
                    Stage: lblStage.Text,
                    User: cmbUser.Selected.Mail,
                    Action: txtAction.Text,
                    Date: dtDate.SelectedDate
                }
            ),
            Patch(
                365Stack_ReviewData,
                LookUp(
                    365Stack_ReviewData,
                    ID = Value(gal.lblID.Text)
                ),
                {
                    Stage: lblStage.Text,
                    User: cmbUser.Selected.Mail,
                    Action: txtAction.Text,
                    Date: dtDate.SelectedDate
                }
            )
        )
    )

This post might be hard to digest because there are more formulas are used and other controls are shown in the screenshot which itself can be created as a separate post. For Eg: People Picker control in the Canvas app, Difference between Patch, UpdateIf functions, ForAll usage, Collection usage, Query formulas, gallery usage.

Please post your queries in the comments. Happy building 🙂