Skip to Content

Improve User Experience of the List and Detail Page

Display more detailed information for each list item and on the detail page.
You will learn
  • About localized strings in SAPUI5
  • How to import new modules in a controller
  • How to improve the user experience of the list with a search field
  • Many new controls that come with SAPUI5
cjbernalConrad BernalJune 17, 2022

So far, the web app is working, but it doesn’t show much information yet. In order to improve our web app, you can display more detailed information for each list item and on the detail page.

  • Step 1

    Localized strings are necessary to translate the application in various languages. You need to bind all exposed strings to the i18n model and avoid hard-coded strings so that the web app can be translated easily. This tutorial’s views already come with bound strings, so you only need to add the properties file.

    Replace the content of the webapp/i18n/ file with the following lines.

    appDescription=Displays products
    # List View
    ListTitle=Product Overview
    # Detail View
    DetailTitle=Product Details
    NotOrdered=Not Ordered
    OrderDialogTitle=Order Product
    OrderDialogMsg=Do you want to order this product now?
    OrderDialogSuccessMsg=The product has been ordered

    You can use language codes to add more i18n files.

    Log in to complete tutorial
  • Step 2

    In this step, we will add a search field on the top of the list to make it searchable and more appealing by using custom list items. You will add a <SearchField> control to the initial page of the application. We’ll add it as a child within the pages subHeader aggregation, which expects a <Bar> control.

    1. Open the webapp/view/List.view.xml file, and change the highlighted lines.

      <mvc:View controllerName="sap.btp.sapui5.controller.List" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
      	<Page id="listPage" title="{i18n>ListTitle}" >
      			<Bar id="_IDGenBar1">
      					<SearchField id="_IDGenSearchField1" search="handleSearch"/>
      		<List id="list" items="{/Products}">
      			<ObjectListItem id="_IDGenObjectListItem1" type="Navigation" press="handleListItemPress" title="{ProductName}" number="{= ((${UnitPrice} * 100) / 100).toFixed(2) }" numberUnit="{i18n>Currency}">
      					<ObjectAttribute id="_IDGenObjectAttribute1" text="{QuantityPerUnit}"/>
      					<ObjectStatus id="_IDGenObjectStatus1" text="{= ${Discontinued} ? ${i18n>Discontinued} : ${i18n>Available} }" state="{= ${Discontinued}? 'Error' : 'Success' }"/>
    2. To handle the search, we’ll specify a handler for the search field’s ‘search’ event. This handler, handleSearch, is defined in the view’s controller, and the search effect is achieved by adding a ‘contains string’ filter to the binding of the List control’s items aggregation. Add a listener for the search event in the webapp/controller/List.controller.js.

      function (Controller, Filter, FilterOperator) {
          "use strict";
          return Controller.extend("sap.btp.sapui5.controller.List", {
              handleSearch: function (evt) {
                  // create model filter
                  var filters = [];
                  var query = evt.getParameter("query");
                  if (query && query.length > 0) {
                      filters.push(new Filter({
                          path: "ProductName",
                          operator: FilterOperator.Contains,
                          value1: query
                  // update list binding
                  var list = this.getView().byId("list");
                  var binding = list.getBinding("items");
              handleListItemPress: function (oEvent) {
                  var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
                  var selectedProductId = oEvent.getSource().getBindingContext().getProperty("ProductID");
                  oRouter.navTo("detail", {
                      productId: selectedProductId
    Log in to complete tutorial
  • Step 3

    Similarly to the previous step, this step will add additional controls to the existing page. Add an ObjectHeader and a footer to use the full width of the page for the content.

    1. Open the webapp/view/Detail.view.xml file, and replace the highlighted lines.
      <mvc:View controllerName="sap.btp.sapui5.controller.Detail" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
      	<Page id="detail" title="{i18n>DetailTitle}" showNavButton="true" navButtonPress="handleNavButtonPress" >
      		<ObjectHeader id="_IDGenObjectHeader1" title="{ProductName}" number="{= ((${UnitPrice} * 100) / 100).toFixed(2) }" 	numberUnit="{i18n>Currency}">
                  <ObjectStatus id="_IDGenObjectStatus1" text="{= ${Discontinued} ? ${i18n>Discontinued} : ${i18n>Available} }" state="{= ${Discontinued} ? 'Error' : 'Success' }"/>
                  <ObjectStatus id="_IDGenObjectStatus2" text="{= (${UnitsOnOrder} > 0) ?  ${i18n>Ordered} : ${i18n>NotOrdered} }" state="Success"/>
                  <ObjectAttribute id="_IDGenObjectAttribute1" text="Product #{ProductID}"/>
                  <ObjectAttribute id="_IDGenObjectAttribute2" text="Category #{CategoryID}"/>
                  <ObjectAttribute id="_IDGenObjectAttribute3" text="Supplier #{SupplierID}"/>
              <Bar id="_IDGenBar1">
                      <Button id="_IDGenButton1" text="{i18n>OrderButtonText}" type="Accept" icon="sap-icon://accept" press="handleOrder"/>
      1. The previous snippet contains a button. Let’s implement the logic to display a MessageBox once this button has been pressed. Add a missing imports and the listener for the press event in the webapp/controller/Detail.controller.js.
        function (Controller, MessageBox, MessageToast) {
            "use strict";
            return Controller.extend("sap.btp.sapui5.controller.Detail", {
                onInit: function () {
                    var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
                    oRouter.getRoute("detail").attachMatched(this._onRouteMatched, this);
                _onRouteMatched: function (oEvent) {
                    var oArgs, oView;
                    oArgs = oEvent.getParameter("arguments");
                    oView = this.getView();
                        path: "/Products(" + oArgs.productId + ")",
                        events: {
                            dataRequested: function () {
                            dataReceived: function () {
                handleNavButtonPress: function (evt) {
                    var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
                handleOrder: function (evt) {
                    // show confirmation dialog
                    var bundle = this.getView().getModel("i18n").getResourceBundle();
                        function (oAction) {
                            if (MessageBox.Action.OK === oAction) {
                                // notify user
                                var successMsg = bundle.getText("OrderDialogSuccessMsg");
                                // TODO call proper service method and update model (not part of this tutorial)
    Log in to complete tutorial
  • Step 4

    Re-run your application. You should see the search box at the top of the list, right below the words Product Overview.

    Try to search for a word.

    Demo - Search field is displayed

    You can follow this tutorial to deploy the application to SAP BTP, Cloud Foundry environment.

    Search for "Choco". How many search results do you get?

    Log in to complete tutorial
Back to top