3 - Configure the Shopping Cart Page

Previously, we made a data resource to the CAP service and enabled the Products entity. Now we need some other entities.

1. Back in your ShoppingApp project, open the Integrations tab.

2. Look SAP Systems, and under CodeJamOrdersService

   Click Enable More Data Entities.

   

3. Select Orders, and click Enable Data Entity.

   

   Select OrderItems, and click Enable Data Entity.

   

4. Click Save (upper right).

   Click Exit to return to the previous screen.

You should now be able to see Orders and OrderItems appearing under the Integrations > CodeJamOrdersService section.

Now that you have defined the connection to the CAP service, let’s create a data variable, which will automatically include the logic for making the call as well as holding the retrieved data.

1. Navigate to the Cart page by clicking on the Home pages link on the upper-left corner, below the app name.

   Select the Cart tile.

   

2. Toggle to Variables.

3. Click Data Variables on the left side.

   Click Add Data Variable and choose OrderItems.

   

   With OrderItems data variable selected, in the right pane, the type should already be set to Collection of data records. Keep this type.

   

4. Select the X next to Filter condition, then select Object with properties.

   

5. Click Add Condition.

   

   Set up the condition as follows:

   Property	Condition type	Compared value
   order_ID	equal	6c25e827-15c2-4e7f-be1a-89fb4304d4fa

   IMPORTANT: The order ID represents some dummy data we entered into the service so you will see some data in the UI. Later, you will update the condition so you only see your own data.

   DO NOT delete any order items.

   Click Save.

6. Click Save (upper right).

In order to display the data in the cart from the OrderItems entity, you need to map the backend data that is in the data variable to the UI components.

1. Toggle back to View.

2. Select the Row - Items component.

   Set the Repeat with to the data variable OrderItems1 (you just created).

   

   With the repeat set, we’ll bind the individual text components.

3. In the Tree View, select Row - Items > Cell #1 > Text - Product.

   

   Once selected, in the Properties pane, click the ABC binding icon for the Content property.

   Choose Data item in repeat > current > product, and set Preview Value to Product.

   

   Click Save.

4. Repeat the binding for Quantity, Price and Total as follows:

   UI Component	Tree View Location	Binding	Preview
   Quantity	Cell #2 > Text - Quantity	Data item in repeat > current > quantity	Qty
   Price	Cell #3 > Text - Price	Data item in repeat > current > price	Price
   Total	Cell #4 > Text - Total	Data item in repeat > current > total	Total

5. Select the Cart Total: $ field and click the binding icon for its Content property.

   

   Instead of Static value, change the binding type to Formula and replace the formula with the following formula:

   JavaScript

   Copy

   "CART TOTAL: $" + FORMAT_LOCALIZED_DECIMAL(NUMBER(SUM(MAP(data.OrderItems1,item.price * item.quantity))), "en", 2,2)
   

   What does the formula do?

   The formula uses the MAP function, one of the more powerful and useful functions. Here, the function goes through all the order items, multiplies the quantity and the price, and creates a new list with just integers representing the total cost of each item.

   The SUM function then adds it all together, and then the formula formats the result.

   Click Save twice.

6. Click Save (upper right).

Now that you have set up the Cart page, you need to let users get to the page. There are 2 ways users can navigate between pages.

You can create a button or other UI component, and then create logic to respond to a button click or other event, and then use the Open Page flow function. That is what you did to navigate from the product list page to the product detail page.

But users might want to navigate to the Cart page at any time. So you can create a static menu that is available all the time. Every new app comes with a menu and a single item to return to the home page. In this step, you will create a new menu item for the Cart page.

1. Click the Navigation tab.

   You will see the Home page menu item.

   

2. Click Add item.

   This will add a menu item, but likely not to the page you want.

3. Select the new menu item, and set the following properties:

   Icon	Tab name	Page
   shopping-basket	Cart	Cart

   

4. Click Save (upper right)

Return to your web preview.

Once you saved your app, the page should refresh and you should see the Cart menu item below the Homepage icon on the left navigation menu.

Click Cart.

The Cart page should open and you will see the order items for the dummy cart.