Build A Shopping Cart In Power Apps

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

TitlePrice
T-Shirt30
Coffee Mug15
Winter Jacket95
Mousepad5
Vest65
Golf Balls10
Baseball Cap20
Winter Hat20

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: 100




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 OnSelect 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),
        {
            ID: 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),
        {
            ID: 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.




Save Items In The Shopping Cart To A 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.



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.

Matthew Devaney

Subscribe
Notify of
guest
29 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Necdet Saritas
Necdet Saritas
11 months ago

Hi Matthew,
Thanks for the great article. I have a dummy question: Where did you create a collection in which property?
Thanks in advance

Nedia
Nedia
11 months ago

HI Matthew,

I had an issue getting the “Place Order” button to add the items to the Company Store Orders list. Per your instructions, I named the column on this list PerPer, instead of PricePer. I figured that this must have been a typing error in the instructions, so changed it on the list to read PricePer. The collection column is still displaying as “PerPer”. How can I correct this column name in the collections?

Yusuf Başpınar
Yusuf Başpınar
11 months ago

Hi Matthew,

I have 2 questions. First;

// insert a new row for each product ordered into the SharePoint list
Patch(
‘Company Store Orders’,
AddColumns(
colOrderItems,
“TotalPrice”,
Quantity * PricePer
)
);
code block shows an error that expecting record value instead since colOrderItems is a Table.

Second:
// reset the text input to show the new value
Reset(txt_Number)

What is txt_Number to put. I am confused.

Thanks in advance

Daniel N
Daniel N
10 months ago
I have this problem with the place order button, in my case I made the table in SQL Server, I do not know if for this to patch the collection the table is not possible, or if I am making an error

Screenshot 2021-11-07 011724.png
Juliana Prado Ferreira
Juliana Prado Ferreira
8 months ago

Hello, I’m trying to use your tutorial to build a stock app. So I can’t put the price, I need to appear the quantity in the stock and how many things I want to take of the stock, but I am not getting how to do this. Can you help me? My email is julianapradoferreiraa@gmail.com

Anthony Robinson
4 months ago

I’m getting the following error message when adding the OnSelct code:

Incompatible types for comparison. These types can’t be compared, Error, Number,

Anthony Robinson
4 months ago

Hello Matthew,

Thanks for your reply.

It’s happening on all of them. Here are the screen shots for: Use this code in the OnSelect property of the down button.

Error_message.jpg
Anthony Robinson
4 months ago

Here is the one for OnSelct Property.

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

Error_message-2.jpg
base
base
4 months ago

Wow Thank you so much Matthew, can you please teach us how can we print the order like invoice pdf
Thanks

Jarrad
Jarrad
4 months ago

Hi Matthew,

Thankyou for the great article.

I am new to PowerApps and following your guide worked great until I tried to sort (or sortbycolumn) the gallery items (we have a search box for our list of items). When I add a Sort to the Item property on the Gallery, the quantity value updates for every gallery item and the collection only adds/changes the item at the top of the search. Pressing the +/- buttons change the quantities for every quantity box in the gallery.

Here is what we have in our Gallery Item property:

SortByColumns(
  Search(
	'SourceTable',
	searchinputbox.Text,
	"partnumber","productname"
	),
  "partnumber")

The quantity works with just a Search but as soon as we add a Sort the functionality breaks.

I have been searching for a solution but haven’t found anything so far. Have you seen this before? Any advice would be appreciated.

Jarrad
Jarrad
4 months ago

You pointed me in the right direction. Our ‘ProductID’ field wasn’t unique so I added a column from our source that was unique and now it works with the Sort.

Not sure why it worked without the sort and then changes behaviour when sorted but it works now and using a unique field is better practice so thankyou for your help.

Eyleen
Eyleen
3 months ago

Hi Matthew,
Thanks for the tutorial, pretty helpful.

I could not proceed with the last “OnSelect” code.

I received an error in this part:

Patch(
   ‘STAR Program – Point of sales’,
   AddColumns(
       colOrderItems,
       “Total Amount”,
       Quantity * PricePer
   )
);

Appreciate your help.

noah
3 months ago

This could be it because I got the same thing

error.png
Tom
Tom
2 months ago
Reply to  noah

Getting the exact same error

kim
kim
3 months ago

Hi Matthew,
I am working on an internal catalog for our project teams to order signage and swag, and for both of those items we need to be able to select sizes relative to the item. In all honesty, I’m a newbie and have limited experience building powerapps, but what you have produced is exactly what I need… I just need to take it a step further. Would you be able to guide me a little on how best to setup these options? For example, not all of our signage has a size option, but some do. And all of our company branded tees, golf shirts, etc. have sizes. Appreciate any guidance you can provide.

Rob Clark
Rob Clark
1 month ago

Hi Matthew

I’m receiving an error on the Place Order button’s code.

Patch(
  ‘Asset Orders’,
  AddColumns(
    colOrderItems,
    “TotalPrice”,
    Quantity * PricePer
  )
);

Is saying “Invalid argument type (Table). Expecting a record value instead.”

There is also an error under the Clear command stating “Expected Operator. We expect an operator such as +, *, or & at this point in the formula.”

Thanks for your help.