Create repeating section in PowerApps (Canvas App) and save data in the SharePoint list

 Hello readers,

Welcome to the new article, from our "PowerApps" training series - Today, we will learn how to create Repeating sections in PowerApps.

What is Repeating sections -

Repeating sections in PowerApps allows us to create dynamic forms or tables where users can add multiple rows of data.

Think of them as a way to handle repeating sets of information, like line items in an expense report or products in an order form

Whether we are building a complex data entry form, a dynamic survey, or an inventory tracking system, the ability to replicate sections dynamically can significantly enhance the user experience and streamline data collection.

This article will walk through the steps to achieve repeating sections in PowerApps, ensuring our applications are dynamic and user-friendly.

Technical requirements -

Before creating the PowerApp, we need a data source and also we need to ensure that our data source can handle repeating data.

Typically, this involves using a relational data model where a primary table is linked to a secondary table via a foreign key.

E.g., we might have an "Orders" table (primary) and an "OrderItems" table (secondary) linked by an "OrderID".

Step 1 - Setting up our Data Source

For this lab session, we will create a new SharePoint list named “Orders.” This list should have columns corresponding to the data you want to capture and will be treated as our primary list for storing order-related details.

  • OrderID (Unique Identifier, use ID column)
  • CustomerName (Text)
  • OrderDate (Date/Time)
  • TotalAmount (Currency)
  • Status (Choice: Pending, Shipped, Delivered, Cancelled)
  • ShippingAddress (Text)
  • BillingAddress (Text)

Article content
Orders SharePoint List

Also, we will create a secondary list named "OrderDetails" to store the Items under each order and treat it as a child list for Parent-Child relations.

  • DetailID (Unique Identifier, ID)
  • OrderID (Lookup to Orders List)
  • ProductID (Lookup or Choice based on available products)
  • ProductName (Text)
  • Quantity (Number)
  • Unit Price (Currency)
  • Total Price (Calculated Column: [Quantity] * [Unit Price])

Article content
OrderDetails SharePoint List

Step 2 - Designing our PowerApp screen (User Interface)

Open PowerApps Studio and create a new canvas app from scratch or use the existing app and add a new screen.

Let's dive into creating repeating sections using the form control -

  • Create a Form - Use the Form control to create a form for the primary data, in our case we will make this form to store the data for the "Orders" list.

Article content
Form control in PowerApps

  • Add a Gallery Control - Use a Gallery control to display the repeating items (e.g., order items). This control will allow users to see multiple items in a list format.

Article content
Gallery control in PowerApps

  • Bind the Gallery to the Data Source - Set the Gallery's Items property to filter the items based on the selected primary record. 

Filter(OrderItems, OrderID = ThisItem.OrderID)

Step 3 - Performing CRUD operations in the form

To enable our users to add new items to the repeating section, we need to provide a mechanism for adding new rows dynamically.

Add new items

  • Enable adding new items - Place a button inside or near the Gallery control with the "Add Item" label.
  • Create a Collection for New Items - Use a collection to temporarily store new items before they are saved to the database. When the "Add Item" button is clicked, append a new blank row to the collection: 

Collect(colOrderItems, {OrderID: ThisItem.OrderID, ItemName: "", Quantity: 0, Price: 0})

  • Bind the Gallery to the Collection - Update the Gallery’s Items property to include both saved and unsaved items: 

Filter(OrderItems, OrderID = ThisItem.OrderID) & colOrderItems.

Edit and Save Items

Now we need to allow users to edit and save items within the repeating section.

  • Editable Fields in the Gallery - Set up the fields within the Gallery to be editable. For example, use TextInput controls for item names, quantities, and prices.
  • Save Changes - Add a "Save" button to save changes to the database. This button should update both existing items and new items: 

ForAll(colOrderItems, 
Patch
(
OrderItems, Defaults(OrderItems), 
{OrderID: OrderID, ItemName: ItemName, Quantity: Quantity, Price: Price}
)); 
Clear(colOrderItems);

Delete Items

Now it's time to implement functionality to delete items from the repeating section.

  • Add a 'Delete' Button - Place a delete button in each row of the Gallery.
  • Remove from Collection - When the delete button is clicked, remove the item from the collection:

 Remove(colOrderItems, ThisItem)

Step 4 - Adding validations & testing

  • Validation: Add validation to ensure required fields are filled and data is correct before saving.
  • User Feedback: Provide feedback to users after saving or deleting items, such as notifications or confirmations.
  • Testing: Thoroughly test the functionality to ensure it works as expected with various data scenarios.

Conclusion

Implementing repeating sections in PowerApps enhances the flexibility and functionality of your applications, making them more dynamic and user-centric.

Following the above steps, we can create powerful forms that accommodate varying data entries, thus improving user experience and data management.

Stay tuned for upcoming articles on PowerApps, where we will explore their functionalities in various scenarios.

Comments

Post a Comment