Add labels and a new field to your app

In SAP Web IDE, click on the Search icon (the magnifying lens icon at the top of the right-hand toolbar), enter UnitsInStock in the search field and click Search.

In the search results, and you will see two files were found. One is in the Detail.view.xml file which is in the view folder. Since you want to change the detail view part of the app – that is the file to edit.

Tip: If you hover your cursor over an item in the search result list, a window opens to show some context around that item.

Double-click the UnitsInStock line in Detail.view.xml to open that file in the edit pane.

Notice that the search term is highlighted in the source file. You can click on the Search icon again to close the search pane.

You will need to modify two ObjectAttribute lines in the header: UnitsInStock and UnitsOnOrder.

Insert the titles as attributes into the ObjectAttribute areas highlighted on the right below. You can type in the title="xyz" strings, or replace the lines entirely with the text below. The edited lines should look like the screenshot below.

<ObjectAttribute title="Units In Stock" text="{UnitsInStock}"/>
<ObjectAttribute title="Units On Order" text="{UnitsOnOrder}"/>

Save your edits, select index.html and click the Run button to preview the Northwind application with the added labels. If you do not see your labels it is probably because the browser has cached the page. To fix this, see the browser cache section below.

In this section, you will add the Product ID field from the OData source to the header section of the detail page just above the Units In Stock and Units On Order. To do this you will add an XML element just above the ObjectAttribute elements that were edited in the previous section.

Go back to the northwind > view > Detail.view.xml in the edit pane (or reopen if you closed it). Add the following XML snippet inside the section as shown below.

<ObjectAttribute title="Product ID" text="{ProductID}"/>

Note: in this XML element, both the label (title field) and value (text field) are included.

Save your edits, and either:

• Switch to your preview tab with Developer Tools open and select Hard Reload or Empty Cache and Hard Reload
• or select the index.html and click the Run button to preview the northwind application with the added ProductID field. If you do this, you will probably have to follow the procedure above on Browser cache to see your change.

The browser cache will frequently prevent changes from showing up. There are a few options to handle this (all assume you have the Web IDE preview window displayed):

1. Hold down the shift key while clicking the refresh icon in the browser.
2. Turn on Developer Tools (Google Chrome: F12 on a PC, or Option-Command-I on a Mac), then right-click on the refresh icon and select Hard Reload or Empty Cache and Hard Reload
3. If you are doing a lot of web development, when you open Developer Tools, click on the Network tab and then select Disable Cache.
4. If you have Developer Tools enabled, and you are continuing to work through tutorials, it is convenient to leave the preview tab open. After you save a change in Web IDE, instead of selecting index.html and clicking Run, simply switch back to the preview tab and select Hard Reload or Empty Cache and Hard Reload to reload the app.