PowerApps repeating section data to SharePoint list step by step tutorial

In this PowerApps Tutorial (PowerApps repeating section), we will learn how to create a repeating section in PowerApps and save data to the SharePoint list. Earlier, in InfoPath form, we had repeating table control for multiple line items, similarly, in PowerApps we have the gallery control to save the multiple line items. In this demo, we will explore how repeating sections in PowerApps work.

For this demo, we have created an on “How to make a purchase order in ERP” using PowerApps, we will walk you through this app step by step.

PowerApps repeating section – what you will learn from this article?

• PowerApps repeating section demo
• How to make Purchase Order in ERP – PO Entry Page
• Purchase order header and line item page in PowerApps
• Create a purchase order header and line item in a SharePoint list
• Save PowerApps repeating section data to the SharePoint Online list
• Purchase order table design in SharePoint Online list
• Purchase order table design in PowerApps
• Add a form control and keep the purchase order header information inside the form control
• Add Gallery control in PowerApps for repeating section data
• Add a new row to the PowerApps Gallery control
• Automatic price calculation in PowerApps Gallery control
• Remove the current row from the PowerApps Gallery control
• Save the PowerApps repeating section data SharePoint list
• PowerApps navigate to the home page on successful submission of the form
• How to display the SharePoint list data in PowerApps datatable control?

PowerApps repeating section demo

We have already developed this app, so, just started running this app.

How to make Purchase Order in ERP – PO Entry Page

Click on the + icon to create to go to the Purchase Order entry page.

Purchase order header and line item page in PowerApps

Enter the Purchase Order header details like title, PO number, and PO created date.

Then click on the “+ add” icon to enter Purchase Order line item details.

PowerApps repeating section control to create purchase order header and line item in a SharePoint list

After entering the Purchase Order header information, click on the “+ add” icon to create the purchase order line item.

Fill out the Purchase Order line item details one by one. As many clicks you hit on the + icon, those many new empty rows will be created in the gallery control. In order to remove a particular row from the PowerApps Gallery control, we need to click on the remove icon (multiplication sign).

Save PowerApps repeating section data to the SharePoint Online list

Click on the “Save PO” button to save the PowerApps repeating section data to the SharePoint Online list.

If we notice, once we click on the “Save PO” button and if all validation passes (like mandatory field checking), the “Save PO” button will be in disabled mode, which means data is being processed or is being saved in the SharePoint list.

After a few seconds, we can see that the purchase order header line item creation page is automatically navigated to the home page of the app, and the purchase order that we have created, we can see in the dashboard report.

Now, let’s view the same Purchase Order details in the SharePoint list.

Below is the SharePoint Purchase Order list, all the purchase orders in this list have been created from the Purchase Order creation PowerApps.

Purchase order table design in SharePoint Online list

Create the below columns in SharePoint “PurchaseOrderList”:

• PO – Single line of text
• RepeatedSection – Multiple lines of text
• PO Created Date – Date and Time

 

By now we are ready with all prerequisites for this app development, now, we will move on to how to develop this PowerApps repeating section app. We assume that you have a basic understanding of app creation PowerApps and that you know how to create the canvas app in PowerApps.

PowerApps repeating section data to SharePoint list – Technical implementation

Step 1:  Create Home Page Screen

Create an empty screen, and add the below controls:

• Plus (+) Icon along with a label control (Go to PO Entry page)
• Add a data table control and configure the data source as the SharePoint “PurchaseOrderList”

Click on the Edit fields link to add or remove the fields in the PowerApps data table.

This is how the SharePoint list data is populated in PowerApps datatable control in read-only mode.

Now click on the “+ icon Go to PO Entry page” to navigate the purchase order header and line item creation screen.

Select the “+” icon, and OnSelect we write the below text:

ResetForm(Form1); 
NewForm(Form1); 
Clear(NewCollection_POItems); 
UpdateContext({AllItemsString: ""}); 
Navigate( 
Form1, 
ScreenTransition.None 
);

In the above, “Form1” is the purchase order creation form, we will navigate to the purchase order creation page once we click on the “+” add icon.

Step2: Purchase order table design in PowerApps

Design the Purchase Order entry screen for the proof of concept by adding some textbox control in the purchase order header section and some controls inside the gallery control for the repeated section line items.

Here we have added the below fields for the purchase order header section:

• Title
• PO Number
• PO Created date

Add a form control and keep the purchase order header information inside the form control

Select the form control, and from the data source, select the “PurchaseOrderList” (SharePoint list).

Edit fields in PowerApps form control

Click on the Edit Fields link to add, remove or order the column in PowerApps form control.

Add Gallery control in PowerApps for repeating section data

Add gallery control in the PowerApps screen outside the form control, and configure the data source as “NewCollection_POItems” for the items property.

And for the Purchase Order line items, we have added the below fields inside the PowerApps gallery control:

• S.No – auto-generated
• Item Type – dropdown list
• Item Name – Textbox
• Description – Textbox
• QTY (Quantity) – Number
• U.Price (Unit Price) – Number
• Total – Label (calculated)

Purchase order table design in PowerApps

Add a new row to the PowerApps Gallery control

Add a new item to the PowerApps Gallery collection by clicking the +Add icon.

Select the +Add icon, and for the  “OnSelect” function write the below text:

Collect( 
NewCollection_POItems, 
{ 
CItemLineNumber: Text(Last(NewCollection_POItems).CItemLineNumber + 1), 
CLevel: "", 
CTC: "", 
CDescription: "",
CQTY: "" ,
CUnitPrice: "",
CTotalPrice: "" 
} 
);

Add a new item to the PowerApps Gallery collection by clicking the +Add icon

Note:

• As many times you click on the “Add (+)” icon, an empty row will be added to the gallery control.

Automatic price calculation in PowerApps Gallery control

To calculate the price for the item we used the math function and displayed the result on the label control.

Select the total price label control “lblTotalPrice” from the gallery control, and add the below formula for the text property of the Label control:

txtQuantity*txtUnitPrice

Here the quantity is multiplied by the item price, and the result is displayed on total price label control.

Remove the current row from the PowerApps Gallery control

Select the cancel icon from the gallery control and write the below function at the OnSelect event:

RemoveIf(NewCollection_POItems,CItemLineNumber = ThisItem.CItemLineNumber)

The above “RemoveIf” function will remove the current row from the collection variable.

Step3: Save the PowerApps repeating section data SharePoint list

Select the “Save PO” button and in the “OnSelect” event write the below function:

UpdateContext( 
{ 
StringToAddNewItemInSPOList: Concat( 
GalleryRepeattingTable.AllItems, 
Concatenate( 
serialNo.Text, 
";", 
ddlPO_OrderType.SelectedText.Value, 
";", 
txtPOItemName.Text, 
";", 
txtOrderDescription.Text, 
";", 
txtQuantity.Text, 
";", 
txtUnitPrice.Text, 
";",
lblTotalPrice.Text, 
";", 
"|" 
) 
) 
} 
); 
SubmitForm(Form1);

Note:

• In the above “UpdateContext()” function we are sending the dynamic purchase order header and line item control values.

PowerApps navigate to the home page on successful submission of the form

Select the form control and “OnSuccess” event and write the below function:

Navigate('Welcome Screen - PO Report',ScreenTransition.None)

Note:

• The above PowerApps  “Navigate()” function will redirect the purchase order creation screen to the home page screen once the date gets submitted to the SharePoint list.

Summary: What we had here (PowerApps repeating section)?

Thus, in this article, we have learned the repeating section control in PowerApps and how we can save PowerApps gallery control data in the SharePoint list from the PowerApps canvas app.

See Also: Power Apps Tutorial

You may also like the below PowerApps articles:

• Read PowerApps toggle control value
• PowerApps: Hide and show textbox based on dropdown selection
• Change PowerApps dropdown sample value to custom options
• How to send email from PowerApps button click?
• How to open outlook from PowerApps step by step?
• Create your first chatbot in PowerApps step by step
• Cascading dropdown in PowerApps using SharePoint data
• CRUD operations in PowerApps using SharePoint online list
• CRUD Operation in PowerApps Using Excel OneDrive
• Phone number and email validation in PowerApps
• Connect to a SharePoint list in PowerApps step by step
• Collection variable in PowerApps
• Understand the difference between Set and UpdateContext function
• String concatenation function in PowerApps
• 3 ways to create Power Apps – Types of Power Apps
• Overview view of PowerApps development environment in Power Platform
• Customize SharePoint List Forms Using PowerApps step by step – Office 365
• Create free development environment using Power Apps Community Plan
• Show or hide columns conditionally in SharePoint list form
• SharePoint Online – Power Automate: How to Export and Import Microsoft Team Flows across environment

Buy SharePoint Online & Office 365 administration eBook

Buy the premium version of SharePoint Online & Office 365 administration eBook from here:

Reference URL

• Gallery control in Power Apps

About Post Author