Build A Shopping Cart In Power Apps

Online order forms where the user is expected to select one or more items are a common requirement in many apps. The most popular example is a company store app where a user places many items into a shopping cart. In this article I will show you how to create a Power Apps shopping cart.

Table Of Contents
Introduction: The Company Store App
Setup The SharePoint List
Create A Gallery Of Store Products
Insert Text Input And Up-Down Quantity Controls For Each Product
Track The Shopping Cart Product Quantities With A Collection
Increase The Product Quantity In A Shopping Cart
Decrease The Product Quantity In A Shopping Cart
Create A Company Store Orders SharePoint List
Save Items In The Shopping Cart To A SharePoint List

Introduction: The Company Store App

The Company Store app is used by employees at a construction firm to order company-branded merchandise. Employees choose the quantity of each product they want to purchase, which places it in the shopping cart and then click the “Place Order” button to submit the order.

Setup The SharePoint List

Create a new SharePoint list called Company Store Products with the following columns:

Title (single-line text)
Price (number)

Load the table with this product pricing data.

Title	Price
T-Shirt	30
Coffee Mug	15
Winter Jacket	95
Mousepad	5
Vest	65
Golf Balls	10
Baseball Cap	20
Winter Hat	20

Create A Gallery Of Store Products

Open the Power Apps studio and create a new mobile app from blank. Add a label at the top of the screen with the text “Order Form” to act as a titlebar.

Change the Fill property of the screen to light gray with this RGBA color code.

RGBA(237, 237, 237, 1)

Connect the app to the Company Store Products SharePoint list. Then insert a new gallery and use Company Store Products as the datasource.

The Items property of the gallery should use this code.

'Company Store Products'

Additionally, apply these values to the following properties of the gallery to define the gallery row size and padding.

TemplatePadding: 20
TemplateSize: 100

The gallery will display a vertical list of the products being sold at the company store. To improve the style of the app we will use white buttons with rounded-corners as the background for each row. Select the first gallery row and add a new button.

Then apply these properties to the button to make the app match the picture shown above. By setting the DisplayMode property to View we ensure the button cannot be clicked.

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

Insert two labels on top of the white button: one for the product name and another for the price.

Use this code in the Text property of the product label to display its name.

ThisItem.Title

Then use this code in the Text property of the price label to display a dollar amount.

Text(ThisItem.Price, "$#,##0.00")

Insert Text Input And Up-Down Quantity Controls For Each Product

Employees choose a quantity of the product by typing a number into a text input or tapping the up-or-down buttons beside the text input. Create a new text input inside the gallery and position it on the right side of the row.

Update the properties of the text input with these values to match the styling in the image above.

BorderColor: LightGray
BorderStyle: BorderStyle.Solid
BorderThickness: 1
Color: Black
Fill: White
Format: Format.Number
Height: 60
Size: 18
Width: 100

Next, create two identical buttons on either side of the text input: one with a “plus” sign and the other with a “minus” sign in the Text property.

To match the styling of the image above use these values in the following properties for each button.

BorderColor: LightGray
BorderStyle: BorderStyle.Solid
BorderThickness: 1
Color: Black
Font Weight: FontWeight.Semibold 
Fill: Transparent
Height: 60
Size: 32
Width: 60

Track The Shopping Cart Product Quantities With A Collection

An employee types a number into the text input field to choose how many of an item they want to order. Each time the text input is updated we want to track the current value inside of a collection. This will allow us upload the order once the employee is ready to make a purchase and enable the use of the up-or-down buttons to change the product quantity.

Put this code in the the OnChange property of the text input. We will use the collection colOrderItems to store the product id numbers and quantities ordered.

If(
    // check whether the product already appears in the colOrderItems collection
    IsBlank(LookUp(colOrderItems, ProductID = ThisItem.ID)),

    // if the product if not found, add a new product to the collection
    Collect(
        colOrderItems,
        {
            ProductID: ThisItem.ID,
            Title: ThisItem.Title,
            Quantity: Value(Self.Text),
            PricePer: ThisItem.Price
        }
    ),

    Value(Self.Text) > 0,

    // update quantity for an existing product in the collection
    Patch(
        colOrderItems,
        LookUp(colOrderItems, ProductID = ThisItem.ID),
        {
            ProductID: ThisItem.ID,
            Title: ThisItem.Title,
            Quantity: Value(Self.Text)
        }
    ),

    // remove a product from the collection when quantity is zero or less
    Remove(
        colOrderItems,
        LookUp(colOrderItems, ProductID = ThisItem.ID)
    )
)

Also, write this code in the Default property of the text input. In a moment when we write the up-and-down button code this will make it possible to see a live update of the product quantity.

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

To test the text input code, write a number in the first row and check if a new row was added to the colOrderItems collection. We can inspect the collection by going to the View tab on the top menu and clicking Collections.

Increase The Product Quantity In A Shopping Cart

When an employee taps the up-button the product quantity in the shopping cart should increase by one.

Write this code in the OnSelect property of the up-button.

If(
    // check whether the product already appears in the colOrderItems collection
    IsBlank(LookUp(colOrderItems, ProductID = ThisItem.ID)),

    // if the product if not found, add a new product to the collection
    Collect(
        colOrderItems,
        {
            ProductID: ThisItem.ID,
            Title: ThisItem.Title,
            Quantity: 1,
            PricePer: ThisItem.Price
        }
    ),

    // update quantity for an existing product in the collection
    Patch(
        colOrderItems,
        LookUp(colOrderItems, ProductID = ThisItem.ID),
        {
            ProductID: ThisItem.ID,
            Title: ThisItem.Title,
            Quantity: LookUp(colOrderItems, ProductID = ThisItem.ID, Quantity)+1
        }
    )
);
// reset the text input to show the new value
Reset(txt_Number)

Now when we click on the up-button the value inside the text input increases by 1 each time.

Decrease The Product Quantity In A Shopping Cart

Oppositely, when an employee taps the down-button the product quantity in the shopping cart should decrease by one.

Use this code in the OnSelect property of the down button.

If(
    // check if the product quantity is greater than 1
    LookUp(colOrderItems, ProductID = ThisItem.ID, Quantity)>1,
    
    // update quantity for an existing product in the collection
    Patch(
        colOrderItems,
        LookUp(colOrderItems, ProductID = ThisItem.ID),
        {
            ProductID: ThisItem.ID,
            Title: ThisItem.Title,
            Quantity: LookUp(colOrderItems, ProductID = ThisItem.ID, Quantity)-1
        }
    ),

    LookUp(colOrderItems, ProductID = ThisItem.ID, Quantity)=1,

    // remove a product from the collection when current quantity is 1
    Remove(
        colOrderItems,
        LookUp(colOrderItems, ProductID = ThisItem.ID)
    )
);
// reset the text input to show the new value
Reset(txt_Number);

Click on the down-button to give it a test. We should see it decrease by 1 each time the button is clicked.

Create A Company Store Orders SharePoint List

Create a new SharePoint list called Company Store Orders with the following columns:

Title (single-line text)
Product ID (number)
Quantity (number)
PricePer (number)
TotalPrice (number)

Additionally, unhide the Created By and Created fields to show who submitted the order and when. These two fields are automatically created with every SharePoint list but are set as hidden by default.

Add the Company Store Orders SharePoint list to the app as a datasource.

Save Items In The Shopping Cart To A SharePoint List

Insert a new button at the top of the screen with the text “Place Order”. When an employee clicks this button all selected products and their quantities saved to the Company Store Orders along with their price and which employee made the order.

Input this code in the OnSelect property of the button. It creates multiple new rows at once in the Company Store Orders for each selected product and shows a success message on the screen.

// insert a new row for each product ordered into the SharePoint list
Patch(
    'Company Store Orders',
    AddColumns(
        colOrderItems,
        "TotalPrice",
        Quantity * PricePer
    )
);

// show a success message
Notify("Order was successfully submitted", NotificationType.Success);

// reset the collection and text input
Clear(colOrderItems);
UpdateContext({locResetTextInput: true});
UpdateContext({locResetTextInput: false});

Finally, use this variable in Reset property of the text input. When the Place Order button is pressed it will reset the text input to zero since the colOrderItems collection will be cleared.

locResetTextInput

We’re done creating the shopping cart. Go ahead and try out the app!

Questions?

If you have any questions or feedback about Build A Shopping Cart In Power Apps please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion.