openSAP Build Your Own SAP Fiori App in the

Cloud
Exercise - Week 4 Part 2: Advanced Enhancements
Add a View to a Fiori Master Detail App

SAP Web IDE is a browser-based development tool. It accelerates building modern

applications for desktop and mobile devices by using the latest UI technologies. SAP Web
IDE simplifies the end-to-end application lifecycle for SAPUI5 and Fiori applications:
prototyping, development, packaging, deployment, and extensions.

Prerequisites
Before starting with this exercise, you need to finish week 2, week 3, and Part 1 of this
week 4 exercise and have a working and tested Fiori Master Detail app project.
Optionally, you can import the provided sample app as your starting point for this exercise:
1. Download MyFirstFioriApp_w4u2_start.zip file from the same openSAP page where
you found this exercise
2. Launch SAP Web IDE
3. Right-click on your project explorer called Local and choose New Folder
4. Right-click on the created folder and choose Import Archive

Exercise - Week 4 Part 2: Advanced Enhancements

Add a View to a Fiori Master Detail App

5. Browse for the provided ZIP file just downloaded (MyFirstFioriApp_w4u2_start.zip) and
confirm the import by pressing OK

Note

All screenshots are based on SAP Web IDE version 1.9. Future versions of SAP Web IDE
might look different.

Learning Objectives
In this exercise, you will continue to enhance your existing Fiori Master Detail app. This
time, you will learn how to add a new Detail View to your app. After selecting an item in
your app (in the Master View area), the results will be shown in the Detail View area. In
case there are multiple result entries, these sub-items should be displayed in a result
table. You will create this new tab, add a table element to its main area, and create a link
to a further Detail View page that shows more information for each of these sub-items. You
will also learn how to setup the navigation between these views. The Fiori app can then be
best described as a Fiori Master-Detail-Detail app by the end of the exercise.
You can perform this exercise (Part 2) by starting with the outcome of Part 1. However,
this exercise also works without the steps in Part 1, but it still has as a prerequisite an
already created Fiori Master Detail app (as described in the exercise from week 3).

Exercise - Week 4 Part 2: Advanced Enhancements

Add a View to a Fiori Master Detail App

The following steps are explained to add and include a new Detail View to your app:
1. Create a new tab and add a table element in your first Detail View
2. Create a new Detail View component
3. Link the new Item Detail View and the first Detail View of your app
4. Add an event to your table in your tabs main content area
5. Change the Detail View controller for navigating to the Item Detail View
6. Add logic to the new Item Detail Controller and its View
7. Create the navigation back from your Item Detail View to your Detail View
8. Add a Simple Form layout to the Item Detail View
9. Run the application

1. Create a new tab and add a table element in your first Detail View
First, you need to create a new tab for the Detail View of your Fiori app and add a table
element into the tabs main area. Use the code editor to proceed through this exercise.
Note

In case something goes wrong in this exercise, you can always re-load the archive
project MyFirstFioriApp_w4u2_start.zip as a starting point.
Note

For this exercise, the Outline Pane will be used to support you navigation through
the code parts. To open the Outline Pane, go to the SAP Web IDE menu View
Outline Pane.

1.1

Double-click on the file Detail.view.xml in the projects file browser to open it in the
code editor.

1.2

Search inside the XML-tag section <IconTabBar for the last closing tag of the
IconTabFilter element (the last entry of </IconTabFilter>).

1.3

Right after this last IconTabFilter closing tag (and before the </items> tag), create
a new Tab, using the IconTabFilter tag, by copying and pasting the following
example code.

Exercise - Week 4 Part 2: Advanced Enhancements

Add a View to a Fiori Master Detail App

Syntax
<IconTabFilter id="filter99" icon="sap-icon://task">
</IconTabFilter>

1.4

Inside the newly created IconTabFilter, insert a new table element that shows the
fields {Item} and {Description} in one table row and a column for each field from
your data source all bound to the context of SOItems. Do this by copying and
pasting the following code:

Exercise - Week 4 Part 2: Advanced Enhancements

Add a View to a Fiori Master Detail App

Syntax
<content>
<Table id="idItemsTable"
itemPress=""
items="{path: 'SOItems'}">
<columns>
<Column
minScreenWidth="Tablet"
demandPopin="true">
<Text text="Item" />
</Column>
<Column
minScreenWidth="Tablet"
demandPopin="true">
<Text text="Description" />
</Column>
</columns>
<items>
<ColumnListItem type="Navigation">
<cells>
<Text
text="{Item}" />
<Text
text="{Description}" />
</cells>
</ColumnListItem>
</items>
</Table>
</content>

1.5

Click Save to confirm your changes.

Exercise - Week 4 Part 2: Advanced Enhancements

Add a View to a Fiori Master Detail App

Note

You can run the application (using from the menu Run Run with Mock Data) to
view your changes.

2. Create a new Detail View component

Now you will create a new Detail View page. Since Fiori is using the MVC (Model View
Controller) model, you may create the different elements manually (View & Controller) or
let SAP Web IDE create the whole component for you automatically.
2.1

Select the folder view in your projects file browser.

2.2

Right-click on the view folder and choose New Component

2.3

You will see now that the file path is your app name and the subfolder view.

Exercise - Week 4 Part 2: Advanced Enhancements

Add a View to a Fiori Master Detail App

2.4

Click Next to confirm.

2.5

Choose the right component. In this case, choose SAPUI5 View.

2.6

Click Next to confirm.

2.7

You can decide what kind of view you want to create. For this exercise, the
following parameters are used:

2.7.1 View Type: XML

2.7.2 Namespace: myfioriapp_ns (this is the namespace we previously defined)
2.7.3 View Name: ItemDetail

Exercise - Week 4 Part 2: Advanced Enhancements

Add a View to a Fiori Master Detail App

Note

By using a value for the Project Namespace, you assign a kind of group definition
to your project files. In this exercise, you must use the same value as the Project
Namespace value to indicate that the new view and its controller belong to your
app.

2.8

Click Next to confirm.

2.9

Click Finish to confirm and finish the component creation wizard.

2.10

Check that two new files ItemDetail.view.xml and ItemDetail.controller.js were

created in your app projects folder view.

Exercise - Week 4 Part 2: Advanced Enhancements

Add a View to a Fiori Master Detail App

3. Link the new Item Detail View and the first Detail View of your app
Now you will configure the navigation between the Detail View and Item Detail View by
configuring routes. The creation of navigation routes between app pages is the basis for
making each page accessible via a URL.
3.1

Double-click on the file Component.js in your app projects folder to open it in the
code editor.

3.2

Search for the starting point of the routing object that starts with routing:, go to its
nested object called routes: and find another nested object called subroutes:.
There is one route definition there for the Detail view.

3.3

Create a second entry under the same subroutes: [ ] below the existing entry
for the Detail view that start with { pattern: {entity}/:tab: and endd with }
The value of the parameter view in the Controller defines the actual View file to be
called during navigation. In this case its the new ItemDetail view.
Syntax
,{
pattern : "{entity}/:tab:/{item}",
name : "itemDetail",
view : "ItemDetail"
}

Exercise - Week 4 Part 2: Advanced Enhancements

Add a View to a Fiori Master Detail App

Note

Between both subroutes entries framed with { } you must write a comma. The
final entry must look like this: subroutes: [{ }, { }]

3.4

Click the Save button to confirm your changes to the Component.js file.

4. Add an event to your table in your tabs main content area

After creating the layout of your new tab and table, you can now define an event handling:
you define the transition between a table entry and the resulting output. In this case, it is
the navigation from each item in your table to the new Item Detail View that includes more
data for each table line item.
With the current SAPUI5 framework, you can define the event handling once in the header
part of your table. You dont need to do this handling for each table row.
4.1

Double-click on the file Detail.view.xml in the folder view of the projects file
browser to open it in the code editor (if it isnt already open).

10

Exercise - Week 4 Part 2: Advanced Enhancements

Add a View to a Fiori Master Detail App

4.2

Find the opening tag of your table that starts with <Table id= that you created
earlier in this exercise inside the new IconTabFilter.

4.3

You need to create a navigation statement: Add a new table property a function
call itemPress that calls the function onItemDetailPressed. The statement should
look like: itemPress=onItemDetailPressed
Syntax
<Table id="idItemsTable"
itemPress="onItemDetailPressed"
items="{path: 'SOItems'}">

4.4

Click Save to confirm your changes to the Detail.view.xml file.

5. Change the Detail View controller for navigating to the Item Detail
View
In the second part of the event handling, the onItemDetailPressed function raised by the
itemPress event needs to have some logic in order to perform an action. This is called
binding. The binding, like other actions in the MVC model, is coded in the Controller of the
Detail View.

11

Exercise - Week 4 Part 2: Advanced Enhancements

Add a View to a Fiori Master Detail App

5.1

Double-click on the file Detail.controller.js in the view folder of the project to open
it in the code editor.

5.2

Add a new function call to implement the table event. In this exercise, it was called
onItemDetailPressed.
Syntax
onItemDetailPressed: function(oEvent) {
var oSelectedItem = oEvent.getParameters().listItem;
var sPath = oSelectedItem.getBindingContextPath().substr(1);
this.getRouter().navTo("itemDetail",{
from: "detail",
entity: "ItemDetail",
item: sPath
},false);
},

Note

The new function can be added as a further function call after the getRouter
function call.
Note

Make sure to add a comma after the closing bracket } of function getRouter to
separate the existing functions and your new function call.

5.3

Click Save to confirm your changes to the Detail.controller.js file.

12

Exercise - Week 4 Part 2: Advanced Enhancements

Add a View to a Fiori Master Detail App

6. Add some logic to the new Item Detail Controller and its View
When navigating to the Item Detail View, you need to make sure that this view is showing
a result. Following the MVC (Model View Controller) model, you need to add code to the
Controller and View files of this Item Detail View.
Start with the initiation of the Item Detail View by configuring a binding in the
ItemDetail.component.js.
6.1

Double-click on the file ItemDetail.controller.js in the folder view of the projects

file browser to open it in the code editor.

6.2

Check that your ItemDetail.component.js file belongs to your projects

namespace. In this exercise and example, the namespace is myfioriapp_ns.
Therefore, check the first code line in the Item Detail Controller. It should look like:
Syntax
sap.ui.controller("myfioriapp_ns.view.ItemDetail", {

6.3

Since the Item Detail Controller consists of the controller declaration only, you need
to create a new binding declaration to instantiate the Item Detail View, to attach a
route and to bind the view. In this example, the instantiation of the Item Detail View
consists of a separate routing determination function. Therefore, consider adding
below the onInit function a second function called getRouter
Check the following code to get familiar with the initiation of the new Item Detail
View:
Syntax
onInit: function() {
var view = this.getView();
this.getRouter().attachRouteMatched(function(oEvent) {
var
sContextPath
=
new
sap.ui.model.Context(view.getModel(),"/"
oEvent.getParameter("arguments").item);
view.setBindingContext(sContextPath);
},this);
},

getRouter : function () {
return sap.ui.core.UIComponent.getRouterFor(this);
}

13

Exercise - Week 4 Part 2: Advanced Enhancements

Add a View to a Fiori Master Detail App

6.4

Click Save to confirm your changes to the ItemDetail.controller.js file.

6.5

As a second task, double-click on the file ItemDetail.view.xml in the folder view of

the projects file browser to open it in the code editor.

6.6

Check that the parameter controllerName corresponds to the projects

namespace, too. In this example, the namespace is myfioriapp_ns.
Therefore, the full parameter in the Item Detail View file must look like:
Syntax
controllerName="myfioriapp_ns.view.ItemDetail"

14

Exercise - Week 4 Part 2: Advanced Enhancements

Add a View to a Fiori Master Detail App

6.7

Click Save to confirm your changes to the ItemDetail.view.xml file.

7. Create the navigation back from your Item Detail View to your Detail
View
Finally, you need to be able to navigate back from the Item Detail View to the table on the
previous Detail View. The navigation call is triggered in the tag <Page as an event on the
Item Detail View XML file. The called function of this event will be implemented in the
controller of the item Detail View.
7.1

Double-click on the file ItemDetail.view.xml in the folder view of the projects file
browser to open it in the code editor (if it isnt already open).

7.2

Go to the starting tag of <Page and define additional parameters for the navigation.
7.2.1 To display the standard back-arrow button, add the parameter and value:
showNavButton=true
7.2.2 To raise the event and call a function that handles the navigation back to the
Detail View page, add the parameter and value:
navButtonPress=onNavBack
Syntax
<Page title="Item Detail" navButtonPress="onNavBack" showNavButton="true">

15

Exercise - Week 4 Part 2: Advanced Enhancements

Add a View to a Fiori Master Detail App

7.3

Click Save to confirm your changes to the ItemDetail.view.xml file.

7.4

Double-click on the file ItemDetail.controller.js in the folder view of the projects

file browser to open it in the code editor (if it isnt already open).

7.5

Create a new function that uses the router functionality of SAPUI5 to determine the
right view in your app to navigate to. In this example, the name of the function was
defined as onNavBack.
Syntax
,
onNavBack: function(){
this.getRouter().myNavBack("detail");
}

16

Exercise - Week 4 Part 2: Advanced Enhancements

Add a View to a Fiori Master Detail App

Note

Be sure to add a comma after the closing bracket of function getRouter to separate
the existing functions and your new function call.
7.6

Click Save to confirm your changes to the ItemDetail.controller.js file.

8. Add a Simple Form layout to the Item Detail View

In the Item Detail View, you need to create at least a basic layout with some elements to
display additional details for the previously selected item from your table. In this exercise,
the SimpleForm element is used.
The SimpleForm element does not belong to the sap.ui.core library that is the default
library declared for all layout elements you have used so far. It belongs to the library
sap.ui.layout.form and must be declared as an additional xmlns (XML namespace)
property.
Note

On the SAPUI5 Explored page, you can search for each element. The SimpleForm
belongs to the layout elements found here:

https://sapui5.netweaver.ondemand.com/sdk/explored.
html#/entity/sap.ui.layout.form.SimpleForm/samples
Inside the SimpleForm element, you will add fields like Item, Material, and Description.

17

Exercise - Week 4 Part 2: Advanced Enhancements

Add a View to a Fiori Master Detail App

8.1

Double-click on the file ItemDetail.view.xml in the folder view of the projects file
browser to open it in the code editor.

8.2

Add a new xmlns property after an existing xmlns property in the file. The property
definition consists of the parameter xmlns followed by the addressed tag name,
e.g. form, that should use the library, e.g. sap.ui.layout.form. Later in the tag
definition, the library elements from sap.ui.layout.form will be used when the tag
<form> is interpreted.
Syntax
xmlns:form="sap.ui.layout.form"

8.3

Add inside the tag <Content the layout element <form:SimpleForm

8.4

Add inside the tag <form:SimpleForm some content, like:

8.4.1 A title like Item Details
8.4.2 Label and Value of Item
8.4.3 Label and Value of Material
8.4.4 Label and Value of Description

18

Exercise - Week 4 Part 2: Advanced Enhancements

Add a View to a Fiori Master Detail App

Syntax
<form:SimpleForm minWidth="1024">
<core:Title text="Item Details"/>
<Label text="Item" />
<Text text ="{Item}" />
<Label text="Material" />
<Text text ="{Material}" />
<Label text="Description" />
<Text text ="{Description}" />
</form:SimpleForm>

8.5

Click Save to confirm your changes to the ItemDetail.view.xml file.

9. Run the application

Finally, the application is ready to run without errors. To view the changes in the
application, it must be restarted if it was already running in a browser window.
9.1

Select the entry index.html in the projects file browser.

9.2

Click the Run button to open a new browser tab/window and run your Fiori app with
back-end data.

9.3

In your app, open the new tab and select an entry to navigate to the Item Detail
View.

19

Exercise - Week 4 Part 2: Advanced Enhancements

Add a View to a Fiori Master Detail App

9.4

Check the Item Detail View and navigate back to check it, too.

9.5

To test again with your mock data, go back to SAP Web IDE and right-click on the
index.html entry in the projects file browser and go to the menu Run Run with
Mock Data to open a new browser tab/window.
Congratulations, you have completed Part 2 of the Week 4 exercise!

20

www.sap.com

2015 SAP SE or an SAP affiliate company. All rights reserved.

No part of this publication may be reproduced or transmitted in any form
or for any purpose without the express permission of SAP SE or an SAP
affiliate company.
SAP and other SAP products and services mentioned herein as well as their
respective logos are trademarks or registered trademarks of SAP SE (or an
SAP affiliate company) in Germany and other countries. Please see
http://www.sap.com/corporate-en/legal/copyright/index.epx#trademarkfor
additional trademark information and notices. Some software products
marketed by SAP SE and its distributors contain proprietary software
components of other software vendors.
National product specifications may vary.
These materials are provided by SAP SE or an SAP affiliate company for
informational purposes only, without representation or warranty of any kind,
and SAP SE or its affiliated companies shall not be liable for errors or
omissions with respect to the materials. The only warranties for SAP SE or
SAP affiliate company products and services are those that are set forth in
the express warranty statements accompanying such products and services,
if any. Nothing herein should be construed as constituting an additional
warranty.
In particular, SAP SE or its affiliated companies have no obligation to pursue
any course of business outlined in this document or any related presentation,
or to develop or release any functionality mentioned therein. This document,
or any related presentation, and SAP SEs or its affiliated companies
strategy and possible future developments, products, and/or platform
directions and functionality are all subject to change and may be changed by
SAP SE or its affiliated companies at any time for any reason without notice.
The information in this document is not a commitment, promise, or legal
obligation to deliver any material, code, or functionality. All forward-looking
statements are subject to various risks and uncertainties that could cause
actual results to differ materially from expectations. Readers are cautioned
not to place undue reliance on these forward-looking statements, which
speak only as of their dates, and they should not be relied upon in making
purchasing decisions.