Skip to Content

SAPUI5 - Improve the list and detail view

By Jonathan Baker

Multi-line list items using ObjectListItem and ObjectHeader controls


You will learn

In this exercise you will replace a couple of controls; one in the View1 and the other in the Detail view. In the Master view, rather than the simple flat list item style presented by the <StandardListItem> control that is in use currently, you will present the overview of the products in a more appealing way by using the <ObjectListItem> control.

In the Detail view, you will make a similar change, replacing the simple layout (currently afforded by the <VBox> control) with a more readable display thanks to the <ObjectHeader> control. Along the way you will add one more property to the i18n model (“currency”).

Web IDE If you don’t have the Web IDE open, follow these steps: Enable and open the SAP Cloud Platform Web IDE

  1. Open the webapp/view/View1.view.xml file, and replace the <StandardListItem> control with the following code:

    <ObjectListItem type="Navigation"
                    number="{= ((${UnitPrice} * 100) / 100).toFixed(2) }"
                    numberUnit="{i18n>currency}" >
    		<ObjectAttribute text="{QuantityPerUnit}" />
    		<ObjectStatus text="{= ${Discontinued}? 'Discontinued' : 'Available' }"
                          state="{= ${Discontinued}? 'Error' : 'Success' }" />
    Replace StandardListItem
  2. Open the file webapp/i18n/, and add a placeholder for the EURO currency:

    Update i18n file
  3. Open the webapp/view/Detail.view.xml, and replace the <VBox> element with this code:

    <ObjectHeader title="{ProductName}"
                  number="{= ((${UnitPrice} * 100) / 100).toFixed(2) }"
                  numberUnit="{i18n>currency}" >
    		<ObjectStatus text="{= ${Discontinued}? 'Discontinued' : 'Available' }"
    	                  state="{= ${Discontinued}? 'Error' : 'Success' }" />
    		<ObjectStatus text="{= (${UnitsOnOrder} > 0)? 'Ordered' : '' }"
    	                 state="Success" />
    		<ObjectAttribute text="Product #{ProductID}" />
    		<ObjectAttribute text="Category #{CategoryID}" />
    		<ObjectAttribute text="Supplier #{SupplierID}" />
    Replace VBox with ObjectHeader
  4. Run your application. The master list will now have a multi-line view:

    View of master list

    The detail list will also have a new layout, with more information and better design:

    View of detail screen

Next Steps

Additional Information

Updated 03/22/2017

Time to Complete

10 Minutes.




Next Steps

Back to top