PowerApps repeating section data to SharePoint list - Demo

PowerApps repeating section data to SharePoint list

No comments

 2,133 total views,  14 views today

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 lines items. In this demo, we will explore how repeating sections in PowerApps work.

For this demo, we have created an on “How to make 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 purchase order header and line item in a SharePoint list
  • Save PowerApps repeating section data to 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 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.

PowerApps repeating section demo home page
PowerApps repeating section demo home page

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

Purchase order header and line item page in PowerApps
Purchase order header and line item page

Enter the Purchase Order header details like title, PO number, 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.

PowerApps repeating section to create purchase order header and line item
PowerApps repeating section to create purchase order header and 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 SharePoint Online list

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

PowerApps repeating section data is being saved in SharePoint list
PowerApps repeating section data is being saved in the SharePoint 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 SharePoint list.

After 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 what we have created, we can see in the dashboard report.

PowerApps repeating section SharePoint datatable
PowerApps repeating section SharePoint data table

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.

Using PowerApps repeating section create purchase order in SharePoint list
Using PowerApps repeating section create a purchase order in a SharePoint list

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

 

Purchase order table design for PowerApps repeating section POC
Purchase order table design for PowerApps repeating section POC

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 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, add the below controls:

  • Plus (+) Icon along with a label control (Go to PO Entry page)
  • Add a datatable control and configure the data source as the SharePoint “PurchaseOrderList”
Add Datatable in PowerApps for repeating section data
Add Datatable in PowerApps for repeating section data

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

Edit fields in PowerApps datatable control
Edit fields in PowerApps datatable control

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.

PowerApps onselect function plus icon to navigate to purchase order creation page
PowerApps onselect function plus icon to navigate to purchase order creation page

Step2: Purchase order table design in PowerApps

Desing 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).

Add form control in PowerApps with SharePoint data source
Add a form control in PowerApps with SharePoint data source

Edit fields in PowerApps form control

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

Edit fields in PowerApps form control
Edit fields in PowerApps form control

Add Gallery control in PowerApps for repeating section data

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

Add Gallery control in PowerApps for repeating section
Add Gallery control in PowerApps for repeating section

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

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 new item in PowerApps Gallery collection by clicking +Add icon

Add new item in PowerApps Gallery collection by clicking +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 have 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 being multiplied with the item price, and the result is being displayed on total price label control.

Automatic price calculation in PowerApps Gallery control
Automatic price calculation in PowerApps Gallery control

Remove 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.

Remove current row from the PowerApps Gallery control
Remove current row from the PowerApps Gallery control

Step3: Save the PowerApps repeating section data SharePoint list

Select the “Save PO” button and in “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.
Save Purchase Order header and line items to SharePoint from PowerApps
Save Purchase Order header and line items to SharePoint from PowerApps

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

Select the form control and “OnSuccess” event 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.
PowerApps navigate to home page on successful submission of the form
PowerApps navigate to the home page on successful submission of the form

Summary: What we had here?

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

You may also like the below PowerApps articles:

Buy SharePoint Online & Office 365 administration eBook

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


Buy SharePoint Online & Office 365 Administration eBook

Reference URL