Skip to Content
Previous

SAPUI5 - Add a list to the view

By Jonathan Baker

Add a list view to a UI5 page

You will learn

Add a list to first XML view (View1.xml). The list will display data from the data model, that got filled with data from the Northwind data service. Every list element will represent a product entity in the data model. Thanks to the data binding, SAPUI5 takes the path of the aggregation and automatically creates as many list items as the aggregation includes (all the product entities).

Details

For now, you will just display the product names, more specifically the attribute ProductName. In a future tutorial, you will add a detail view with additional information per list element, so you will also implement a mock function for the press event, which is triggered on key-press or tap on mobile devices.

You will also change the master view and controller. To fix a design-flaw of the template, we will also quickly update the CSS styling.


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 file webapp/view/View1.view.xml in your editor.

    You will add a new <List> element, and define how every item will be displayed.

    <List items="{/Products}" >
    	<StandardListItem type="Active"
    	      press="handleListItemPress"
            title="{ProductName}" />
    </List>
    

    View1.view.xml file

  2. Open the webapp/css/style.css file, and then add the following CSS parameters. This will prevent overflow from hiding elements in the view on the screen.

    .sapMPage>section {
    	overflow-x: initial !important;
    	overflow-y: initial !important;
    }
    

    If you see a warning icon on the left hand side, you can safely ignore it. These are information messages generated by the editor.

    style.css file

  3. Open the webapp/controller/View1.controller.js file. You will add an event handler function for the press event.

    return Controller.extend("HelloWorld.controller.View1", {
    	handleListItemPress: function (evt) {
    		// show in a pop-up which list element was pressed
          jQuery.sap.require("sap.m.MessageBox");
    		sap.m.MessageBox.show(
    			"You pressed item: " + evt.getSource().getBindingContext(), {
    				icon: sap.m.MessageBox.Icon.INFORMATION,
    				title: "It works!",
    				actions: [sap.m.MessageBox.Action.OK]
    			}
    		);
    	}
    });
    

    style.css file

    NOTE: See that alert box, red with the X? That is a warning, and not an error. The editor has detected that you are using Windows, and has noticed that the linefeed characters are not what it expected. You can ignore this.

  4. Now RUN your application.

    Running application with list view

  5. Click on an item in your application, and a pop-up will appear.

    Notice that the pop-up displays the number of the item pressed, in parenthesis (in the image below: Products(6)).

    Alert pop-up

Next Steps

Additional Reading

Updated 09/13/2016

Time to Complete

15 Minutes.

Beginner

Tags

Prerequisites

Next Steps

Next
Back to top