Repeating Tables in Power Apps using SharePoint List Form 2.0

In my previous blog post, I’ve created a guide explaining how to create “Repeating Tables” in Power Apps. This time, I made changes in the functions and ways on how to enhance the forms. In the past few months of customizing forms in SharePoint, I’m looking for ways to improve them. I stumbled upon videos of Reza Dorani & April Dunham about ‘Power Apps Editable Table in the Gallery .’

This time, I will focus only on Create and Edit Screen of the Forms as the View Screen doesn’t change.

Requirements:

The requirements with regards to the fields are the same as my previous blog. I’ve added additional fields for the Child List:

• Paid
• Payment Method

I replaced the ‘SAVE’ icon in the repeating tables (Gallery) to ‘ADD’ icon.

FOR THE CREATESCREEN:

• Set the function of the OnVisible of the CreateScreen to ClearCollect a collection name colInvoice. This collection will be used in the Gallery.

	ClearCollect(
	    colInvoice,
	    {
	        LineItem: "",
	        LinePrice: "",
	        LineQty: "",
	        LinePayment: false,
	        LinePaymentMethod: ""
	    }
	)

• In the CreateGalleryItems, set the Items properties to colInvoice 

• Add fields and set their Default properties to their corresponding data source from the colInvoice collection.

• After setting all the Default properties, in the OnChange properties add this function below: 

	If(
	    !IsBlank(ThisItem.LineItem) && ThisItem.LineItem in colInvoice.LineItem,
	    Update(
	        colInvoice,
	        LookUp(
	            colInvoice,
	            LineItem = ThisItem.LineItem
	        ),
	        {
	            LineItem: txtItemNameCreate.Text,
	            LinePrice: Value(txtPriceCreate.Text),
	            LineQty: Value(txtQtyCreate.Text),
	            LinePayment: chkPaid.Value,
	            LinePaymentMethod: rdPaymentMethod.Selected.Value
	        }
	    )
)

What it does: The function will update the collection colInvoice every time you update the fields. It will check if the item updated is already in the colInvoice collection; if not, it will update the item (ThisItem in the Gallery) in the collection. The function should be set in all of the fields in the CreateGalleryItems.

• In the Add icon function in the OnSelect properties:

	Patch(
	    colInvoice,
	    ThisItem,
	    {
	        LineItem: txtItemNameCreate.Text,
	        LinePrice: Value(txtPriceCreate.Text),
	        LineQty: Value(txtQtyCreate.Text),
	        LinePayment: chkPaid.Value,
	        LinePaymentMethod: rdPaymentMethod.Selected.Value
	    }
	);
	Collect(
	    colInvoice,
	    {
	        LineItem: "",
	        LinePrice: "",
	        LineQty: "",
	        LinePayment: false,
	        LinePaymentMethod: ""
	    }
)

What it does: This function will Patch the item that you added and then create a new item in the Collection.

• In the OnSucess of the CreateItemForm (this is the Master List Form), add this function:

	ForAll(
	    CreateGalleryItems.AllItems,
	    If(
	        !IsBlank(txtItemNameCreate.Text),
	        Patch(
	            'Child Lists',
	            Defaults('Child Lists'),
	            {
	                Title: CreateItemForm.LastSubmit.Title,
	                cldItemName: txtItemNameCreate.Text,
	                cldPrice: Value(txtPriceCreate.Text),
	                cldQty: Value(txtQtyCreate.Text),
	                Paid: chkPaid.Value,
	                Payment_x0020_Method: rdPaymentMethod.Selected
	            }
	        )
	    )
	);
	ResetForm(Self);
RequestHide();

What it does: The function will create all the items from the CreateGalleryItems to the ‘Child List’ in SharePoint. The obstructive thing about the function from my previous blog post is that the user needs to select the ‘ADD’ icon in the CreateGalleryItems to save the collection. If the user added one item and forgot to save it, it will not save in the SharePoint list. This time, they don’t need to select the ‘ADD’ or ‘SAVE’ icon in the Gallery to save the item in the collection to SharePoint List after saving the form.

FOR THE EDITSCREEN

• In the EditScreen, the OnVisible properties add this function:

What it does: The editcolinvoice collection will have the table of records from the SharePoint list, but we are only showing selected columns that we need in our forms.

• The item of our EditGalleryItems is Filter('Child Lists', DatacardValue1.Text = Title). It means getting the data from the filtered ‘Title,’ which is the Reference ID of the Master Lists, to the ‘Title‘ field of the Child Lists.

• Then in each of the fields in the EditGalleryItems, add this function in their OnChange properties: This function will update the item in the editcolinvoice every time you made changes in those fields.

	If(
	    ThisItem.ID in editcolinvoice.ID,
	    Update(
	        editcolinvoice,
	        LookUp(
	            editcolinvoice,
	            ID = ThisItem.ID
	        ),
	        {
	            ID: ThisItem.ID,
	            cldItemName: txtItemName.Text,
	            cldPrice: Value(txtPrice.Text),
	            cldQty: Value(txtQty.Text),
	            Paid: chkeditPaid.Value,
	            Payment_x0020_Method: rdeditPaymentMethod.Selected
	        }
	    ),
	    Collect(
	        editcolinvoice,
	        {
	            ID: ThisItem.ID,
	            cldItemName: txtItemName.Text,
	            cldPrice: Value(txtPrice.Text),
	            cldQty: Value(txtQty.Text),
	            Paid: chkeditPaid.Value,
	            Payment_x0020_Method: rdeditPaymentMethod.Selected
	        }
	    )
)

• On the EditItemForm, add the function under OnSuccess

	If(
	    CountRows(editcolinvoice) > 0,
	    Patch(
	        'Child Lists',
	        editcolinvoice
	    )
	);
	ResetForm(Self);
        RequestHide();

What it does: This function will count all the rows in the editcolInvoice. If there are items in the collection, it will Patch or update an item in Child Lists.

Save all the changes and Publish them.

Conclusion: If you have any other recommendations or anything that I missed in this blog, let me know. Happy Building 🙂

Featured Photo by Oleg Magni from Pexels