Skip to Content
Previous

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.

Details

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 HANA 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"
                    press="handleListItemPress"
                    title="{ProductName}"
                    number="{= ((${UnitPrice} * 100) / 100).toFixed(2) }"
                    numberUnit="{i18n>currency}" >
    	<attributes>
    		<ObjectAttribute text="{QuantityPerUnit}" />
    	</attributes>
    	<firstStatus>
    		<ObjectStatus text="{= ${Discontinued}? 'Discontinued' : 'Available' }"
                          state="{= ${Discontinued}? 'Error' : 'Success' }" />
    	</firstStatus>
    </ObjectListItem>
    
    Replace StandardListItem
  2. Open the file webapp/i18n/i18n.properties, and add a placeholder for the EURO currency:

    currency=EUR
    
    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}" >
    	<statuses>
    		<ObjectStatus text="{= ${Discontinued}? 'Discontinued' : 'Available' }"
    	                  state="{= ${Discontinued}? 'Error' : 'Success' }" />
    		<ObjectStatus text="{= (${UnitsOnOrder} > 0)? 'Ordered' : '' }"
    	                 state="Success" />
    	</statuses>
    	<attributes>
    		<ObjectAttribute text="Product #{ProductID}" />
    		<ObjectAttribute text="Category #{CategoryID}" />
    		<ObjectAttribute text="Supplier #{SupplierID}" />
    	</attributes>
    </ObjectHeader>
    
    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 12/08/2016

Time to Complete

10 Minutes.

Beginner

Tags

Prerequisites

Next Steps

Next
Back to top