Sunday, 11 August 2019 18:44

SAPUI5 – How to Build Master Detail UI5 App along with Search?

Written by https://sapyard.com/sapui5-how-to-build-master-detail-ui5-app-along-with-search/
Rate this item
(0 votes)

There are various patterns of applications as per Fiori design guidelines in SAP. One of the pattern is Master Detail pattern. It can be achieved by using SplitApp

Control. It is available in the sap.m library. It is meant for providing a main column on the screen typically on the left side (1/4 of the screen size) and another column on the right side(3/4 of the screen size). The left column contains a list of Items which the user can scroll through and select an appropriate item from the list. The selected item’s details are displayed on the right column which is of a larger width.

Let us continue with the example of Employee information application which we built in last tutorial and design it in a master details fashion. The left column i.e. the master view would display a List with ObjectListItem as the template of items aggregation. On click of the ObjectListItem, we would use routing with parameter to display clicked objects details on the detail page. The detail page would consist of another List control displaying projects information.

Also Read Custom Controls in SAPUI5

Let’s start..

In your SAP Web IDE, create a new project from template. Name it ‘demomasterdetail‘. After the project creation wizard finishes, your project structure will look like shown below.

Add SplitApp Control

Next, add a SplitApp control in View1.xml file. SplitApp control has 2 main aggregations called masterpages and detailpages. In these aggregations, you can add multiple Master Pages and multiple Detail Pages. The SplitApp control provides navigation feature as well between the master<->master pages and detail<->detail pages. For the sake of simplicity, in this tutorial, lets add one master page and one detail page in our SplitApp. In the Master Page, we’ve added a List containing Object List Item. In the Detail Page, we’ve added a List containing Standard List Item. We’ve done binding of both these lists with a JSON model created in the controller of the view.

Further, lets add a header toolbar in the Master Page’s List Control. In this toolbar, there is a search field which does the search/filter function. Based on this explanation, the code of xml view is shown below for your reference.

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
<code>&lt;mvc:ViewcontrollerName="org.unity.DemoMasterDetail.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;SplitAppid="splitappid" masterButtonText="Master" masterNavigate="" afterMasterNavigate="" masterButton="" detailNavigate="">
&lt;masterPages>
&lt;Pageid="masterpageid" title="Employee Basic Info" titleLevel="Auto" showNavButton="true" showHeader="true" showSubHeader="true"
navButtonText="" navButtonTooltip="" enableScrolling="true" icon="" navButtonTap="" navButtonPress="">
&lt;content>
&lt;Listid="emplist" items="{/emp}" headerText="Employee Data" headerDesign="Standard" footerText="End of the List" noDataText="No Employees"
showNoData="true">
&lt;items>
&lt;ObjectListItemtype="Navigation" title="{empname}" number="{age}" numberUnit="years" intro="{empid}" press="onObjectItemPress">
&lt;attributes>
&lt;ObjectAttributetitle="" text="{cadre}">&lt;/ObjectAttribute>
&lt;/attributes>
&lt;firstStatus>
&lt;ObjectStatustitle="{exp}" text="{designation}">&lt;/ObjectStatus>
&lt;/firstStatus>
&lt;secondStatus>
&lt;ObjectStatustitle="{city}" text="{country}">&lt;/ObjectStatus>
&lt;/secondStatus>
&lt;/ObjectListItem>
&lt;/items>
&lt;headerToolbar>
&lt;Toolbar>
&lt;content>
&lt;Titletext="Employees" title="Search">&lt;/Title>
&lt;ToolbarSpacer/>
&lt;SearchFieldsearch="onSearch" width="50%">&lt;/SearchField>
&lt;/content>
&lt;/Toolbar>
&lt;/headerToolbar>
&lt;/List>
&lt;/content>
&lt;/Page>
&lt;/masterPages>
&lt;detailPages>
&lt;Pageid="detailpageid" title="Employee Project Information" titleLevel="Auto" showNavButton="true" showHeader="true" showSubHeader="true"
navButtonText="" navButtonTooltip="" enableScrolling="true" icon="" navButtonTap="" navButtonPress="">
&lt;content>
&lt;Listid="projectlistid" items="{projects}">
&lt;items>
&lt;StandardListItemtitle="{projectid}" description="{projectname}">&lt;/StandardListItem>
&lt;/items>
&lt;/List>
&lt;/content>
&lt;/Page>
&lt;/detailPages>
&lt;/SplitApp>
&lt;/content>
&lt;/Page>
&lt;/pages>
&lt;/App>
&lt;/Shell>
&lt;/mvc:View></code>

XML code’s screenshot taken from the Web IDE. Entire view’s code split in 3 screenshots.

Also ReadHow to Add Multiple Entities in One Operation in OData Service

Adjust the View Controller

Now time to code in the View’s Controller. In the onInit() method of the controller, we will create a data set which contain employees data. We will use this data set to create a JSON model and then we will set this Model in the view. Refer the code below for onInit() method of the controller.

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
<code>onInit:function(){
varoEmpData={
"emp": [{
"empid": "111111",
"empname": "John Walter",
"exp": "12",
"age": "40",
"city": "Tokyo",
"country": "Japan",
"designation": "Delivery Manager",
"cadre": "Band 5",
"projects": [{
"projectid": "PGIMPL",
"projectname": "P &amp; G SAP Implementation"
},{
"projectid": "ARMSUPPORT",
"projectname": "Aramco Support"
}]
},{
"empid": "222222",
"empname": "Rashid Khan",
"exp": "3",
"age": "24",
"city": "Tokyo",
"country": "Japan",
"cadre": "Band 1",
"designation": "Software Engineer",
"projects": [{
"projectid": "AIRBNB",
"projectname": "AIRBNB Implementation"
},{
"projectid": "TATA",
"projectname": "Tata Power Support"
}]
},{
"empid": "333333",
"empname": "Supriya Singh",
"exp": "5",
"age": "34",
"city": "Tokyo",
"country": "Japan",
"cadre": "Band 3",
"designation": "Sr. Software Engineer",
"projects": [{
"projectid": "INDIAGOV",
"projectname": "INDIA GOV SAP Implementation"
},{
"projectid": "ARMSUPPORT",
"projectname": "Aramco Support"
}]
}]
};
varoModel=newJSONModel(oEmpData);
this.getView().setModel(oModel);
},</code>

Handle the Events

Further, lets add the code for event handler of onPress event of the Object List Items which are populated in the Master page of the SplitApp. In the onPress event handler, we shall derive the binding path of the item which was clicked by the user and then use this binding path to do Element binding of the List which needs to be displayed in the Detail Page of SplitApp.

Here is the code for your reference..

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

Also CheckWhat is HANA-tization?

Provision to Search

Further, lets write code for another event handler for the event which is triggered when user performs a search on the Master List. Below is the code. The comments written in this code explain each line of the code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<code>onSearch:function(oEvent){
//createablankfilterarray
varaFilter=[];
//getthestringwhichwassearchedbytheuser
varsQuery=oEvent.getParameter("query");
//createnewfilterobjectusingthesearchedstring
varoFilter=newsap.ui.model.Filter("empname", FilterOperator.Contains, sQuery);
//pushthenewlycreatedfilterobjectintheblankfilterarraycreatedabove.
aFilter.push(oFilter);
//getthebindingofitemsaggregationoftheList
varoBinding=this.getView().byId("emplist").getBinding("items");
//applyfilterontheobtainedbinding
oBinding.filter(aFilter);
}</code>

On the onSearch event, we are performing below activities:

  1. Creating an empty filter array (table)
  2. Getting the input search string
  3. Create the filter object using the searched string
  4. Push the filter object to the filter array
  5. Retrieve the binding of items aggregation of the list
  6. Finally apply the filter

Pre-requisites for Filter Operation

For the Filter and FilterOperator objects to work, we need to define both these in the sap.ui.define statement on top of the controller.

Download WebIDE Zipped Project

With this, our development is complete. You may import the attached Master Detail Project to your WebIDE in case you want to refer to my development.

Take this Free Video Course on ABAP 7.4 for S/4HANA

Testing Time

Lets now run the application to see our Master Detail Application in action. Click on the run icon shown on the toolbar of your WebIDE. This will launch the application in a new browser window. The application is not yet deployed on any repository like ABAP, Cloud, GIT etc.. It is running on the SAP WebIDE.

Output…

By default no employee is selected, so the detail page does not show any projects information and shows a ‘No Data’ text.

When an employee info form the Master list is clicked, corresponding project details are shown in the Detail section by the virtue of Element binding.

Enter a Search term in the Search Field in the Master Section. List will be filtered based on empname attribute of the JSON Model.

Summary

What we learnt today?

  1. Usage of SplitApp Control
  2. Usage of Master and Details Pages
  3. Element Binding
  4. Usage of Filter in List Control

Comments Please..

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 258 times

Leave a comment

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