15 - Implement Conditional Formatting to Change Color Based on Data
- How to use a formula to change a row background color.
Ian ThainSeptember 29, 2025
Prerequisites
- You have completed the tutorial for the SAP Build CodeJam, Implement Spinner for Product Details Page.
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.
- Step 1
-
Open the Cart page.
-
Select the Row - Items component.
-
In the Style tab, click on the Background color, likely set to Home.
-
Select the NEW PALETTE item.
-
Select Formula.
Then click the existing formula, which is just a string representing a color.
Enter the following formula:
JavaScriptCopyIF(repeated.current.quantity > 4, "#f0ab00", "#f7f7f7")
Click Submit, and then save your formula by clicking Convert.
-
Click Save (upper right).
-
- Step 2
-
Open the app again.
-
Select Notebook Basic 15.
Keep the quantity as 1 and then click Add to Cart.
-
Go back to the home page, and select ITelO Vault.
This time change the quantity to 10, and click Add to Cart.
-
Open the Cart page.
You should see that the ITelO Vault order item is highlighted.
What is the built-in component to which the background color was added?
-