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