Skip to Content

SAPUI5 - Add a list to the view

0 %
SAPUI5 - Add a list to the view
// Explore More Tutorials

SAPUI5 - Add a list to the view


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).

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 SAP 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"
            title="{ProductName}" />
    View1.view.xml file
  2. 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
    			"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.

  3. Now RUN your application.

    Running application with list view
  4. 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

Next Steps


Back to top