15 - Implement Conditional Formatting to Change Color Based on Data
Amend the shopping cart page - to highlight any items that have a Unit Quantity of 50 or higher – as part of the SAP Build CodeJam.
Overview
You will learn
- How to use a formula to change a row background color.
Prerequisites
Prerequisites
- You have completed the tutorial for the SAP Build CodeJam, Implement Spinner for Product Details Page.
Steps
Intro
In this exercise, you will be enhancing the Cart page of the SAP Build CodeJam app with data and functionality.
Specifically, you will change the background color of the row showing the cart entries. If the quantity ordered is less than 5 the color will be white, and if it is 5 or more the background color will be changed to amber.
Open the Cart page.
Select the Row - Items component.

Row - Cart Item In the Style tab, click on the Background color, likely set to Home.

Background color Select the NEW PALETTE item.

New Palette Item Select Formula.

Edit Formula Then click the existing formula, which is just a string representing a color.

Open formula editor Enter the following formula:
JavaScriptIF(repeated.current.quantity > 4, "#f0ab00", "#f7f7f7")
Edit Formula Click Submit, and then save your formula by clicking Convert.

Edit Formula Click Save (upper right).
Open the app again.
Select Notebook Basic 15.
Keep the quantity as 1 and then click Add to Cart.

Cart product 1 Go back to the home page, and select ITelO Vault.
This time change the quantity to 10, and click Add to Cart.

Cart product 2 Open the Cart page.
You should see that the ITelO Vault order item is highlighted.

Cart highlight
Resources
Discussion
Share feedback on this tutorial or join the conversation in SAP Community.