Friday, 02 August 2019 21:01

SAPUI5 – Binding JSON Model Data in SAPUI5 List Control using SAP Web IDE

Written by https://sapyard.com/sapui5-binding-json-model-data-in-sapui5-list-control-using-sap-web-ide/
Rate this item
(0 votes)

There are 4 types of Model in UI5 namely JSON model, OData Model, XML Model and Resource Model. Of these, JSON, Resource and XML are client side Models

while OData is a server side Model.

In this tutorial, we will create a JSON model and bind it to sap.m.List Control. We shall do this exercise using the SAP Web IDE. The data in JSON model will be that of the employees of a company. The data will contain attributes like employee ID, employee name, location and contact number.

Also Read: How to Consume Custom OData in SAPUI5 Application

Let’s start our development.

Login to your Web IDE account. Once you are logged in and navigated to the Web IDE service, below page will be displayed.

SAP Web IDE Initial Page

Next, lets create a new project. So, go to File->New->Application from Template.

Below wizard will start. Select the template as SAPUI5 Application.

Click Next, then enter basic information like name and name space of the application.

Click next and then select which type of view you want to create in your application (xml,js,html or json). XML is the preferred view type as recommended by SAP, I’ve selected XML. Provide a name of the view. I’ve let the name remain the same as populated by the wizard.

Click Finish. Below shown project will be created in your Web IDE workspace.

Next, Open View1.controller.js file and add below code in the onInit method of the view.

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
<code>sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel"
],function(Controller,JSONModel){
"use strict";
returnController.extend("demo.sap.EmployeeList.controller.View1", {
onInit:function(){
//CreateEmployeeDatainJSONformat.Inbelowdata,'emp'istherootnode.
varoEmpData=
{
emp:[{
empid:"111111",
empname:"John Walter"
},
{
empid:"222222",
empname:"Rashid Khan"
},
{
empid:"333333",
empname:"Supriya Singh"
}
]
};
//CreateaninstanceofJSONModelusingtheEmployeedataavailableabove.
varoModel=newJSONModel(oEmpData);
//SettheModeltothecurrentviewsothatModel's data is available to
// the entire view. It means any control within that view can use this
// Model'sdataforbindingunlessanotherModelisboundtothatspecificcontrol.
this.getView().setModel(oModel);
}
});
});</code>

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

After this, lets create the view part. So, open view1.view.xml file and add below code in it.

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
<code>&lt;mvc:ViewcontrollerName="demo.sap.EmployeeList.controller.View1" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
&lt;Shellid="shell">
&lt;Appid="app">
&lt;pages>
&lt;Pageid="page" title="{i18n>title}">
&lt;content>
&lt;List
id="emplist"
items="{/emp}"
headerText="Employee Data"
headerDesign="Standard"
footerText="End of the List"
noDataText="No Employees"
showNoData="true">
&lt;items>
&lt;StandardListItemtitle="{empid}" description="{empname}">&lt;/StandardListItem>
&lt;/items>
&lt;/List>
&lt;/content>
&lt;/Page>
&lt;/pages>
&lt;/App>
&lt;/Shell>
&lt;/mvc:View></code>

For better visibility and understanding, screenshot of xml view code is given below.

In the XML view, I’ve highlighted 3 areas namely:

  • items aggregation of List Control, title and description properties of StandardListItem. Since ’emp’ is the rootnode of our JSON model, it is used to bind the items of List control. It indicates that all records/line items of JSON model will be displayed in the List by the virtue of the so called aggregation binding. items=”{/emp}”
  • Also, We need to tell the view that which control will be used as template for populating all the line items of the list. So, in our case, we’ve chosen StandardListItem. <StandardListItem></StandardListItem>
  • Then, we’ve bound the title and description properties of StandardListItem to empid and empname attributes of JSON model. “{empid}” “{empname}”
XML view showing binding

Also TakeEnd to End Video Course on New Syntaxes in SAP ABAP 7.4+

Let’s Test

Time to execute the application…Click on Play button available on the toolbar of Web IDE.

And this is the output, We have successfully created a List Control which is responsive(can render well on Desktop, Laptop, Mobile and Tablet devices).

SAPUI5 List Control showing Employee code and name in Title and Description properties respectively

Navigation Feature in the App

Further, lets add navigation feature in the list to make our application dynamic. Let us make the list clickable and display the clicked item details in a ObjectHeader Control below the List.

To achieve this click, navigation and display, we need to perform below 3 activities:

  • Add a ObjectHeader Control below the List in our View.
  • Define the type property of StandardListItem to ‘Navigation‘ so that the list items become clickable
  • Finally we define a press event handler to handle the event of press on the StandardListItem.

After these changes, xml view code will look like below. New changes are highlighted in yellow.

Also CheckFirst Program in ABAP HANA

Also, we need to define event handler for the press event of StandardListItem. The event handler called onItemPress is defined in controller. Please refer below code for it.

1
2
3
4
5
6
7
8
9
<code>onItemPress:function(oEvent)
{
varoItem=oEvent.getSource();
varoCtx=oItem.getBindingContext();
varpath=oCtx.getPath();
this.getView().byId("objectid").bindElement(path);
//alert(oEvent.getSource());
}</code>

Screenshot of the code is also given below:

Let’s understand the Event Handler code:

  • In this event handler, we are passing oEvent as the parameter. This is framework defined parameter and using this we can identify which control had triggered the event.
  • Once we have the instance of the control which triggered event, we can easily obtain its binding context and hence the path of the binding within a list of items.
  • We can then use the path to do a Element binding on any other control (ObjectHeader in this case) and display the data available on that path.

For example, when item no. 3 in the list is clicked, the path gets calculated as ‘/emp/3′. This path is passed to bindElement method. As a result data of third list item gets displayed in the ObjectHeader Control. This is shown below.

Third Item in the list was clicked to display its details in the ObjectHeader Control below the List

Also Check –An ABAPer’s First SAPUI5 App in SAP WebIDE

Summary :

In this tutorial, we learned about:

  • Types of Models,
  • Creation and binding of JSON model with List Control
  • Usage of Navigation Property of StandardListItem Control.
  • We also saw how standard oEvent parameter can be used to derive the binding context and the exact path of binding within the Model data.
  • We learned about aggregation binding (List Control), property binding (StandardListItem Control) and then we learned about Element binding (ObjectHeader Control).

Please send your feedback about this tutorial and I will happy to reply to your comments and questions.

Join our SAP Technical Telegram Group . 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 259 times

Leave a comment

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