Skip to Content

Add a List Control to the View

test
0 %
Add a List Control to the View
Details
// Explore More Tutorials

Add a List Control to the View

04/15/2019

Add a list view to a SAPUI5 page.

You will learn

Add a list to the 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.


Step 1: Add a list control to the view

Open the file mta_app/app/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
Log on to answer question
Step 2: Add controller logic

Open the mta_app/app/webapp/controller/View1.controller.js file. You will add an event handler function for the press event and import a new library to the header.

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/m/MessageBox"
], function (Controller, MessageBox) {
	"use strict";

	return Controller.extend("sapcp.cf.tutorial.app.controller.View1", {
		onInit: function () {

		},

		// show in a pop-up which list element was pressed
		handleListItemPress: function (oEvent) {
			MessageBox.show(
				"You pressed item: " + oEvent.getSource().getBindingContext(), {
					icon: sap.m.MessageBox.Icon.INFORMATION,
					title: "It works!",
					actions: [sap.m.MessageBox.Action.OK]
				}
			);
		}
	});
});
controller
Log on to answer question
Step 3: Re-run your app

Now Run your application again.

rerun

This time the deploy job should be way faster.

Running application with list view
Log on to answer question
Step 4: Re-run your app

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

Alert pop-up
Is the index of the list items zero-based or one-based? Hint: You can find out by clicking on the first item of the list.
×

Additional Reading

Next Steps

Back to top