Item, Action List Item or a Feed List Item. Many of us might be using some or all of these list items without understanding them. In this tutorial, I will try to provide the explanation and usage of Object List Item.
In my previous post on JSON Model, I had created a List Control and added StandatdListItem as items aggregation of the List Control. Let us enhance the same code to replace StandardListItem with a ObjectListItem.
Below is my previous article I mentioned above:
While a StandardListItem can display only the Title and Description of any object, an ObjectListItem can further display Title, Key Figure, Attributes and Status.Such an list item is preferred while making a Master Detail type of an application. In a master detail application, the master view contains a List of ObjectListItems displaying the most important attributes of an object based on which user can make a decision whether to select the item and see its details or not.
Let us first enhance our JSON model to contain information which can be displayed on ObjectListItem. Also we need to enhance the model to contain the information which should be displayed on the press event of ObjectListItem. In our example of Employee data, so far, we have displayed only employee id and employee name. Lets add few more attributes like employee experience (in years), location and cadre (like band 1, band 2 etc…). These additional attributes would be displayed on the ObjectListItem. Let us also add the list of all projects the employee has worked on. So, on click of a ObjectListItem, another List should be get populated with a list of projects employee has worked on.
After enhancing the JSON model as described above, it will look like shown below.
"empname": "John Walter",
"exp": "120 months",
"cadre": "Band 5",
"designation": "Delivery Manager"
"projectname": "P & G SAP Implementation"
"projectname": "Aramco Support"
"empname": "Rashid Khan",
"exp": "40 months",
"cadre": "Band 1",
"designation": "Software Engineer",
"projectname": "Tata SAP Implementation"
"projectname": "AIRBUS Implementation"
"empname": "Supriya Singh",
"exp": "60 months",
"cadre": "Band 3",
"designation": "Sr. Software Engineer",
"projectname": "P & G SAP Implementation"
"projectname": "Aramco Support"
In the new JSON model, we’ve added experience, age, city, country, cadre and designation and projects information of the employee.
As explained in last article, in the above code, we are doing 3 things:
- First, creating Data of Employees in JSON format. ‘emp’ is the root node.
- Secondly, we are creating an instance of JSON model using Employee data. var oModel = new JSONModel(oEmpData);
- Lastly, we are setting the Model to the View so that its data is available to the control’s of the view for binding. this.getView().setModel(oModel);
Also check my friend Sagar’s tutorial on Custom Control in UI5
Now, lets add ObjectListItem control in the View. The updated code of View1.xml is below. In previous exercise, we used StandardListItem.
- In the updated view code, we’ve added an ObjectListItem Control. We’ve made use of its title, number, numberUnits and intro properties. Also we’ve used its attributes, firstStatus, secondStatus aggregations.
- We’ve used mentioned properties and aggregations to bind JSON model data to it. Please look at the above figures carefully to note which attribute of Model is bound to which property of ObjectListItem.
- We have made the list clickable by setting the type = “Navigation”.
- We’ve also defined a event Handler called onObjectItemPress in the controller of the view. Check below code for the event handler
- Also, we have used StandardListItem to display project details.
- This code derives the binding path of the clicked ObjectListItem based on oEvent parameter.
- It then takes handle of another List control which is there in the view and uses Element Binding to display the data available on selected item’s path. In our case it will display projects information of the employee.
Also Take – Free Video Course on New Syntax on ABAP on HANA
This is it… Lets run the application.
In the above output, the information of the employee as per binding done in the XML view is being displayed using ObjectListItem. The list is clickable because we have set type property to Navigation. The clicked employee’s project information is displayed in another list below the first list.
You can practice this exercise using code snippets provided in this tutorial. Please comment in case you face any difficulties doing this. I shall respond to your comments/questions promptly.
Join our SAP Technical Telegram Group for daily discussion and learning. Ask – Answer, Propose – Defend, Share and Learn in our Motto.You need to install Telegram App first and then click the link in your mobile device. You may also install it in your desktop.
Step by Step Tutorials on SAPUI5
- Journey to SAPUI5
- SAPUI5 Tutorial with WebIDE. Part I. How to Consume Custom OData in SAPUI5 Application
- SAPUI5 Tutorial with WebIDE. Part II. Routing and Navigation in SAPUI5 Application
- SAPUI5 Tutorial with WebIDE. Part III. Drop Down in SAPUI5 Applications (2 Methods)
- SAPUI5 Tutorial. Part IV with WebIDE. Routers and Routing in SAPUI5
- SAPUI5 Tutorial with WebIDE. Part V. Navigation in SAPUI5 without Routers
- SAPUI5 Tutorial with WebIDE. Part VI. Using Fragments in SAPUI5 Fiori Applications
- SAPUI5 Tutorial with WebIDE. Part VII. An ABAPer’s First SAPUI5 App in SAP WebIDE
- SAPUI5 Tutorial with WebIDE. Part VIII. Deploy my First SAPUI5 App in WebIDE
- SAPUI5 Tutorial with WebIDE. Part IX. Alternative to oModel.setSizeLimit()
- SAPUI5 Tutorial with WebIDE. Part X. Using Media Queries in UI5 Application
- SAPUI5 Tutorial with WebIDE. Part XI. An ABAPer’s Second SAPUI5 App
- SAPUI5 Tutorial with WebIDE. Part XII. SAPUI5 Basic Debugging for Beginners
- Routing and Navigation in SAP UI5 – Theoretical Explanation Part 1
- Routing and Navigation in SAP UI5 – Theoretical Explanation Part 2
- Add Delete & Save Multiple Records in SAPUI5. Part 1 – ADD
- Add Delete & Save Multiple Records in SAPUI5. Part 2 – DELETE
- Add Delete & Save Multiple Records in SAPUI5. Part 3 – SAVE
- Modularization and Large Scale Architecture in SAPUI5
- Use of Third Party (or) External Resources in SAPUI5. Part I – Overview
- Use of Third Party (or) External Resources in SAPUI5. Part II – Practical with Gauges
- SAPUI5 For ABAPers – Component Reuse with Real Time Example
- SAPUI5 for ABAPers – Consuming OData Service from SAPUI5 Application – CRUD Operations
- Trick to Send QR code or Barcode Data Remotely from Android to PC for SAPUI5 App
- Push Notification in SAP – ABAP Push Channel, ABAP Messaging Channel in SAPUI5 – a Real Time Interaction
- How to send e-mail in SAPUI5 Hybrid App?
- How to Get Weight from the Weigh Scale/Weigh Bridge Bluetooth Device using SAPUI5 Hybrid App?
- SAPUI5 – How to Change the Master List Item Selection Based on Changes in Hash Tag URL?
- SAPUI5 – How to Load a Full Screen and Navigate to Master-Detail Application? Approach 1
- SAPUI5 – How to Load a Full Screen and Navigate to Master-Detail Application – Approach 2
- SAPUI5 – How to change the background color of sap.m.Table’s cells of each row based on specific condition?
- SAPUI5 Binding Part 1- Aggregation Binding in Table Control
- SAPUI5 Binding Part 2 – Element Binding Approach 1
- SAPUI5 Binding Part 3 – Element Binding Approach 2
- SAPUI5 Binding Part 4 – Expression Binding Approach 1
- SAPUI5 Binding Part 5 – Expression Binding Approach 2
- Expression Binding Overview in SAPUI5
- SAPUI5 – Factory Functions for Beginners
- SAPUI5 – List Control Using Formatters
- SAPUI5 – How to Apply CSS in UI5 Apps?
- SAPUI5 – Hybrid App Tutorial
- SAPUI5 – Offline Application in 8 Steps
- SAPUI5 – Use of Formatter Function
- SAPUI5 – Voice Recognition
- SAPUI5 – Resource Model for Freshers
- How to Get Weight from the Weigh Scale/Weigh Bridge using Python for SAPUI5 Fiori Apps?
- SAP Fiori Tutorial. Part 7 – Custom Fiori App to Approve Change Requests in SOLMAN
- SAPUI5 – Promises in UI
- SAPUI5 – Binding JSON Model Data in SAPUI5 List Control using SAP Web IDE
- SAPUI5 – Custom Control in UI5
- SAPUI5 – Understanding the ObjectListItem Control of UI5
- SAPUI5 – How to Build Master Detail UI5 App along with Search?
- SAPUI5 – How to Consume OData Model Data in UI5 using WebIDE?