You will learn
To explore a bit more of SAP Web IDE, you will use the Web IDE search feature to identify which file to edit.
You will also learn how to add a field to your app. This is useful since the template can quickly generate a working app for you, but you are not restricted to what it generates.
The UnitPrice field is defined as a decimal number, with “scale” of 4 in the OData service
Now that you know how to round the number, the trick is to figure out where to use this approach.
To make the change so it affects the master and detail views, you want to make the change as far “upstream” as possible, which is in the _setModel function of Component.js.
You will do this by adding an attachRequestCompleted() function near the top of the _setModel function as shown in the image below.
The code to insert:
// Reformat UnitPrice string to show only two decimal places
var NUM_DECIMAL_PLACES = 2;
//Get all objects
var products = this.getModel().mContexts;
// loop through the objects and round to NUM_DECIMAL_PLACE
for (var i in products)
var product = products[i].getObject();
product.UnitPrice = Number(product.UnitPrice).toFixed(NUM_DECIMAL_PLACES);
Note that if you want to round to an integer, you can just change var NUM_DECIMAL_PLACES = 0; (and update the comment).
Save your edits, click on index.html and click the Run button to test this change. Your app should look like this: