Power Apps Shopping Cart: Build an Interactive Multi-Item Order System

Order forms where users pick one or more items from a list are a common requirement in many business apps. Whether you're building a cafeteria lunch ordering system, a library book request tool, or a simple e‑commerce catalog, you'll need a way to let users add items, change their quantities, and review everything before final submission. This tutorial will guide you through creating a fully functional shopping cart in Power Apps using SharePoint as the data source.

We'll use a school fundraiser scenario: students can order spirit wear items like T‑shirts, hoodies, and hats. Each item has a price and a starting quantity of zero. Users increase or decrease the quantity using plus/minus buttons, and the app tracks the cart in a local collection. When they're ready, they can submit the order to a new SharePoint list.

Setting Up Your Product Catalog

First, create a SharePoint list named FundraiserProducts with these columns:

• ProductName (Single line of text)
• UnitPrice (Number, set format to no decimals or two decimals as you prefer)

Add a few sample items:

Your list is now ready to serve as the product catalog.

Building the Order Form Screen

Open Power Apps Studio and create a new blank canvas app (phone layout). Set the screen's Fill property to a soft light color, for example:

RGBA(240, 240, 240, 1)

Add a label at the top of the screen with Text set to "Spirit Wear Order" to act as the title bar. Style it with your app's color theme.

Next, insert a vertical gallery and set its Items property to the FundraiserProducts list. Configure the gallery’s layout:

• TemplateSize: 120
• TemplatePadding: 16

Now we'll design each row. Inside the gallery, add a Rectangle or a Button (set DisplayMode to View to prevent clicking) to serve as a white card background. Apply these properties:

BorderRadius: 12
DisplayMode: DisplayMode.View
Fill: White
Height: Parent.TemplateHeight
Width: Parent.TemplateWidth
X: 0
Y: 0

On top of the card, place two labels:

• One for the product name: set Text to ThisItem.ProductName.
• One for the price: set Text to Text(ThisItem.UnitPrice, "$#,##0.00").

Position them on the left side of the card.

Adding Quantity Controls

On the right side of each card, we need three controls: a text input for manual typing, a plus button, and a minus button.

Insert a Text input and apply these settings:

BorderColor: LightGray
BorderStyle: BorderStyle.Solid
BorderThickness: 1
Color: Black
Fill: White
Format: Format.Number
Height: 50
Width: 80
Size: 16

Place two Button controls on either side of the text input. Set their Text to "+" and "-" respectively. Style them uniformly:

BorderColor: LightGray
BorderStyle: BorderStyle.Solid
BorderThickness: 1
Color: Black
Fill: Transparent
FontWeight: FontWeight.Semibold
Height: 50
Width: 50
Size: 24

Your gallery row should now look like a product card with name, price, and quantity controls on the right.

Managing the Shopping Cart with a Collection

We need a way to remember the selected quantities for each product. We'll use a Power Apps collection called colCart that stores a record for each product with at least one item ordered. Each record will contain the product ID, name, quantity, and unit price.

Text Input – Default and OnChange

Set the Default property of the quantity text input to:

LookUp(colCart, ProductID = ThisItem.ID, Quantity)

This shows the current quantity from the collection, or blank if the product hasn't been added yet.

Now write the following code in the OnChange property of the text input. This handles three cases: adding a new product to the cart, updating an existing quantity, or removing the product when the quantity is zero or less.

If(
  IsBlank(LookUp(colCart, ProductID = ThisItem.ID)),
  // New product: add record
  Collect(
      colCart,
      {
          ProductID: ThisItem.ID,
          ProductName: ThisItem.ProductName,
          Quantity: Value(Self.Text),
          UnitPrice: ThisItem.UnitPrice
      }
  ),
  Value(Self.Text) > 0,
  // Existing product: update quantity
  Patch(
      colCart,
      LookUp(colCart, ProductID = ThisItem.ID),
      { Quantity: Value(Self.Text) }
  ),
  // Quantity is 0 or less: remove record
  Remove(colCart, LookUp(colCart, ProductID = ThisItem.ID))
)

Plus Button – Increase Quantity

The OnSelect of the plus button should add 1 to the current quantity or create a new cart entry with quantity 1.

If(
  IsBlank(LookUp(colCart, ProductID = ThisItem.ID)),
  Collect(
      colCart,
      {
          ProductID: ThisItem.ID,
          ProductName: ThisItem.ProductName,
          Quantity: 1,
          UnitPrice: ThisItem.UnitPrice
      }
  ),
  Patch(
      colCart,
      LookUp(colCart, ProductID = ThisItem.ID),
      { Quantity: LookUp(colCart, ProductID = ThisItem.ID, Quantity) + 1 }
  )
);
// Refresh the text input to show the new value
Reset(txt_Quantity)

Replace txt_Quantity with the actual name of your text input control.

Minus Button – Decrease Quantity

The OnSelect of the minus button should subtract 1, but never go below 0. When the quantity reaches 1 and the button is clicked, the product should be removed from the cart.

If(
  LookUp(colCart, ProductID = ThisItem.ID, Quantity) > 1,
  Patch(
      colCart,
      LookUp(colCart, ProductID = ThisItem.ID),
      { Quantity: LookUp(colCart, ProductID = ThisItem.ID, Quantity) - 1 }
  ),
  LookUp(colCart, ProductID = ThisItem.ID, Quantity) = 1,
  Remove(colCart, LookUp(colCart, ProductID = ThisItem.ID))
);
Reset(txt_Quantity)

You can test the controls by adding a few items to the cart. Use File > Collections in Power Apps Studio to inspect the colCart collection and verify the records.

Reviewing and Submitting the Order

Once users finish adding items, they need a way to review the cart and confirm the order. Add a Button on the main screen labeled "Review Order" or "View Cart". Its OnSelect could navigate to a second screen that shows a gallery bound to colCart. For simplicity, we'll show how to submit directly from the main screen.

Create another SharePoint list called FundraiserOrders with these columns:

• ProductName (Single line of text)
• Quantity (Number)
• TotalPrice (Currency or Number)

On the OnSelect of a "Place Order" button, write:

ForAll(
  colCart,
  Patch(
      FundraiserOrders,
      Defaults(FundraiserOrders),
      {
          Title: ProductName,         // If Title is your primary column
          ProductName: ProductName,
          Quantity: Quantity,
          TotalPrice: Quantity * UnitPrice
      }
  )
);
// Clear the cart after successful submission
Clear(colCart)

After submission, the cart collection is cleared and the controls reset (the text inputs will become blank because the Default property looks up a now-empty collection).

Considerations and Best Practices

• Delegation: If your product catalog grows beyond 500 items, use a filter on the gallery to avoid delegation warnings. The shopping cart collection itself is local, so it's not a delegation concern.
• Data validation: Prevent users from entering non‑numeric values by setting the input format to Format.Number. For extra safety, you can wrap the Value(Self.Text) calls with If(IsMatch(Self.Text, "^\\d*\\.?\\d+$"), ...).
• Clearing the text input: After adding or changing quantity via buttons, use Reset(controlName) to refresh the displayed value. The Default property will then reflect the updated collection.
• Multiple quantities: The code above supports only one cart entry per product. If you need to capture variants (size, color), extend the collection with additional columns.

Common Troubleshooting

Final Recommendation

This shopping cart pattern can be customized for many scenarios. Add a running total, a cart summary screen, or a confirmation email with Power Automate. Keep the collection structure simple and always test with a small dataset first.

Share your implementation with colleagues and ask for feedback. The core logic—adding, updating, and removing items from a local collection—is a skill you'll reuse over and over in Power Apps.

References

• Original source article: Build A Shopping Cart In Power Apps by Matthew Devaney
• Microsoft Learn: Create and collect records in Power Apps
• Microsoft Learn: Patch function in Power Apps
• Microsoft Learn: Working with galleries in Power Apps