Standard service - a fixed amount of work that is performed at a fixed price.  Post Service

  

Tuesday, 06 August 2019 03:32

SAPUI5 – Understanding the ObjectListItem Control of UI5

Written by  https://sapyard.com/sapui5-understanding-the-objectlistitem-control-of-ui5/
Rate this item
(0 votes)

Object List Item is a variant among the other variants of List Items in SAPUI5. List Item can be a Object List Item, Standard List Item, Display List

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<code>onInit:function(){
varoEmpData=
{
"emp": [{
"empid": "111111",
"empname": "John Walter",
"exp": "120 months",
"age": "34",
"city": "Colombo",
"country":"Sri Lanka",
"cadre": "Band 5",
"designation": "Delivery Manager"
"projects": [{
"projectid": "PGIMPL",
"projectname": "P &amp; G SAP Implementation"
},
{
"projectid": "ARMSUPPORT",
"projectname": "Aramco Support"
}
]
},
{
"empid": "222222",
"empname": "Rashid Khan",
"exp": "40 months",
"age": "34",
"city": "Mumbai",
"country":"India",
"cadre": "Band 1",
"designation": "Software Engineer",
"projects": [{
"projectid": "TATAIMPL",
"projectname": "Tata SAP Implementation"
},
{
"projectid": "AIRIMPL",
"projectname": "AIRBUS Implementation"
}
]
},
{
"empid": "333333",
"empname": "Supriya Singh",
"exp": "60 months",
"age": "34",
"city": "Tokyo",
"country":"Japan",
"cadre": "Band 3",
"designation": "Sr. Software Engineer",
"projects": [{
"projectid": "PGIMPL",
"projectname": "P &amp; G SAP Implementation"
},
{
"projectid": "ARMSUPPORT",
"projectname": "Aramco Support"
}
]
}
]
};
varoModel=newJSONModel(oEmpData);
this.getView().setModel(oModel);
},</code>

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.

View Showing use of ObjectListItem Control
Another List to display projects the employee has worked on
  • 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.
1
2
3
4
5
6
7
8
<code>onObjectItemPress:function(oEvent)
{
varoItem=oEvent.getSource();
varoCtx=oItem.getBindingContext();
varpath=oCtx.getPath();
this.getView().byId("projectlistid").bindElement(path);
}</code>
  • 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 TakeFree Video Course on New Syntax on ABAP on HANA

This is it… Lets run the application.

Output showing Employee Info in Object fashion using ObjectLIstItem. Another List below showing the projects of clicked item using StandardListItem.

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.

Please SUBSCRIBE to SAPYard’s Youtube Channel for Free End to End SAP Video Course and Training.

Step by Step Tutorials on SAPUI5

Read 37 times

Leave a comment

Make sure you enter all the required information, indicated by an asterisk (*). HTML code is not allowed.