SAP FIORI Application context Architecture Model

Following the MVC design principle the Approve Sales Order application consists of the following main pieces:
- Component.js: Acts as a root or component container of the whole application. Implements logic to create the
applications root view (App view) and used model instances.
- Views with related controllers: App, Master and Detail. App is our top-level view, containing the Master and
Detail views. In the App view we use a SplitApp control to contain the Master and Detail views via the App
controls pages aggregation.
- Models: i18n for locale-dependant texts, JSON model with mock data (to be replaced with e.g. an OData
model in real applications, a device model for device specific data needed at runtime.

Lets learn these models in detail while developing an application components in phases.
1) Start your Eclipse IDE with the SAPUI5 developer tools installed. Go to File->New->Other to
create a new SAPUI5 Application.

Rahul AGARWAL

SAP Technical Consultant CGI Bangalore

Page 1

2) Filter for Wizards including UI5 and select Application Project. Click Next.

3) Enter your project name MyFioriUI5, chose mobile [sap.m] as the target device, uncheck Create an
Initial View and click on Finish.

Rahul AGARWAL

SAP Technical Consultant CGI Bangalore

Page 2

Eclipse generated initial VIEW is not required for the moment.

At event Finish button clicked. Following project wizard is opened.

myFiori0.zip

Now, unzip this package

And copy all these components and In Eclipse, select the folder WebContent of your SAPUI5 Application
project and paste the sample files (CTRL-V). Confirm with Yes to All.
So, the final architecture file hierarchy would be:-

Rahul AGARWAL

SAP Technical Consultant CGI Bangalore

Page 3

Here, is the project files hierarchy describing the MVC architecture.

Right-click on the project node MyFioirUI5 and select context menu item Run As->Web App Preview.

Rahul AGARWAL

SAP Technical Consultant CGI Bangalore

Page 4

Preview in Eclipse looks like as:-

SO Data comes from JSON file which we used as a substitute of OData services.

Rahul AGARWAL

SAP Technical Consultant CGI Bangalore

Page 5

Eclipse is in-built with Web application server to render the UI components. Thus copy this URL and run in
Google chrome browser.

Press F12 to start the Chrome Developer Tools

Rahul AGARWAL

SAP Technical Consultant CGI Bangalore

Page 6

To bring / dock the debugger window to same FIORI app running web window, follow

Click on highlighted icon

To change the device matrix style to desktop or mobile, make selection among models.

Rahul AGARWAL

SAP Technical Consultant CGI Bangalore

Page 7

Open the tab Sources. Press CTRL-O and enter Master in the search field. Now the file
Master.controller.js is selected and you press the Enter key.

Rahul AGARWAL

SAP Technical Consultant CGI Bangalore

Page 8

Master controller here binding the main [master view SO Items] to detailed view list like its description
So, lets put a break-point at it to trace the navigation between main view to list or detailed view.

Now click on a line item in the running application. This causes the application to stop at the breakpoint.

At selection of SO line debugger event is triggered.

Rahul AGARWAL

SAP Technical Consultant CGI Bangalore

Page 9

Event calls stack, scope variables and other windows to check the context memory elements.
Collapse the panel Call Stack and open Scope Variables. Investigate the event parameter evt in the right
panel. With this you can understand the current state at runtime.

Click on the Play button (blue) to resume the application execution.

Rahul AGARWAL

SAP Technical Consultant CGI Bangalore

Page 10

The application now displays the DetailPage

NOTE: Keep the preview in Eclipse open throughout the session. If you close the preview you cannot test the
application in Chrome anymore. If you have closed the preview you need to reopen it one more time and COPY
& PASTE THE NEW URL to the Chrome browser again.
Since you, noticed the titles for master and detail page is not proper and can be set to aka i18n model, i18n
stands for internationalization).

Were going to replace the hardcoded texts in the views with references to texts in a separate properties file. This
is done via a resource model, which is used as a wrapper for resource bundles and has a one-time binding
mode. Once the texts are abstracted into separate files, they can then be maintained, and translated,
independently.
So well modify the Master and Detail views, and create the properties file with the text contents.
Changes
i18n/messageBundle.properties
Create a new folder named i18n, add new file messageBundle.properties and put the content there
Save the new message bundle file with CTRL+S

Component.js
The message bundle is loaded with the help of a ResourceModel
The ResourceModel is made available as global model under the name i18n

Rahul AGARWAL

SAP Technical Consultant CGI Bangalore

Page 11

// set i18n model

var i18nModel = new sap.ui.model.resource.ResourceModel({
bundleUrl : "i18n/messageBundle.properties"
});
oView.setModel(i18nModel, "i18n");

view/Master.view.xml
This file is opened with the XML editor of Eclipse. Switch to the Source tab of the XML editor to change the
source code. Switch the title to point to the i18n model and there to the text MasterTitle.
Save the modified Master.view.xml file with keyboard shortcut CTRL+S.

<core:View
controllerName="sap.ui.demo.myFiori.view.Master"
xmlns="sap.m"
xmlns:core="sap.ui.core" >
<Page
title="{i18n>MasterTitle}" >

Rahul AGARWAL

SAP Technical Consultant CGI Bangalore

Page 12

Similar for view/Detail.view.xml

Google Chrome browser

Open the (already started) Google Chrome browser window and reload the index.html via toolbar icon or
keyboard shortcut F5.

Rahul AGARWAL

SAP Technical Consultant CGI Bangalore

Page 13

Now, lets use the Object controls

SAPUI5 controls for example sap.m.ObjectListItem and sap.m.ObjectHeader enables the view customization of
layout style.

We will replace a couple of controls; one in the Master view and the other in the Detail view.
In the Master view, rather than the simple flat list item style presented by the StandardListItem control that is in use
currently, well present the overview of the sales orders in a more readable and useful way by using the
ObjectListItem control instead. In the Detail view, well make a similar change, replacing the simple layout
(currently afforded by the VBox control) with a more readable display thanks to the ObjectHeader control.
Along the way well add a few more properties from the data model, such as CurrencyCode.

Rahul AGARWAL

SAP Technical Consultant CGI Bangalore

Page 14

view/Master.view.xml
Replace the StandardListItem control with the more powerful ObjectListItem
Attributes and statuses are defined by own objects
Save the modified Master.view.xml file with shortcut CTRL+S

<ObjectListItem
type="Active"
press="handleListItemPress"
title="{SoId}"
number="{GrossAmount}"
numberUnit="{CurrencyCode}" >
<attributes>
<ObjectAttribute text="{BuyerName}" />
</attributes>
<firstStatus>
<ObjectStatus text="{LifecycleStatus}" />
</firstStatus>
</ObjectListItem>

Rahul AGARWAL

SAP Technical Consultant CGI Bangalore

Page 15

view/Detail.view.xml
Replace the texts with the more beautiful ObjectHeader control (which has almost the same API as the
ObjectListItem control but utilizes the space in a different way).
Save the modified Detail.view.xml file with shortcut CTRL+S
<ObjectHeader
title="{SoId}"
number="{GrossAmount}"
numberUnit="{CurrencyCode}" >
<attributes>
<ObjectAttribute text="{BuyerName}" />
<ObjectAttribute text="{CreatedByBp}" />
<ObjectAttribute text="{CreatedAt}" />
</attributes>
<firstStatus>
<ObjectStatus text="{LifecycleStatus}" />
</firstStatus>
</ObjectHeader>

Rahul AGARWAL

SAP Technical Consultant CGI Bangalore

Page 16

Rahul AGARWAL

SAP Technical Consultant CGI Bangalore

Page 17

FORMATTER
Format status color and date properly by implementing custom formatters that are used in data binding

we will introduce a couple of formatting functions and use them in the application. They are custom functions so
we put them in a module file Formatter.js in a separate folder (in this case weve chosen the folder name util).
One of the functions uses an SAPUI5 static class for date formatting so we specify that requirement (for
sap.ui.core.format.DateFormat) before defining our functions.
We then use the formatting functions in the Detail and Master views; in order to do this, we need to require the
new module in the respective controllers. To execute the formatting on the property paths from the data model
(such as CreatedAt or LifecycleStatus) we need a different binding syntax and for that we have to add a
bindingSyntax parameter in the SAPUI5 bootstrap
Changes
i18n/messageBundle.properties
Add two new texts to the properties file that are used to display the status

Rahul AGARWAL

SAP Technical Consultant CGI Bangalore

Page 18

util/Formatter.js (ADD NEW FOLDER util > ADD NEW FILE Formatter.js)
This file contains functions to format dates, status text and status colors.
jQuery.sap.declare("sap.ui.demo.myFiori.util.Formatter");
jQuery.sap.require("sap.ui.core.format.DateFormat");
sap.ui.demo.myFiori.util.Formatter = {
_statusStateMap : {
"P" : "Success",
"N" : "Warning"
},
statusText : function (value) {
var bundle = this.getModel("i18n").getResourceBundle();
return bundle.getText("StatusText" + value, "?");
},
statusState : function (value) {
var map = sap.ui.demo.myFiori.util.Formatter._statusStateMap;
return (value && map[value]) ? map[value] : "None";
},
date : function (value) {
if (value) {
var oDateFormat = sap.ui.core.format.DateFormat.getDateTimeInstance({pattern: "yyyy-MM-dd"});
return oDateFormat.format(new Date(value));
} else {
return value;
}
}
};

index.html
Open the index.html with the HTML editor of eclipse by right clicking on the file and chosing Open With >
HTML Editor
For the formatting we want to use the complex binding syntax of SAPUI5. This we enable in the bootstrap
script tag.
data-sap-ui-xx-bindingSyntax="complex"

Rahul AGARWAL

SAP Technical Consultant CGI Bangalore

Page 19

view/Detail.view.xml
Use a complex binding with a formatter for the text field.
Use a complex binding with a formatter for the text and state field (which controls the semantical color of the
status text).

Rahul AGARWAL

SAP Technical Consultant CGI Bangalore

Page 20

view/Detail.controller.js
Require the formatter file in the controller of the view

view/Master.view.xml
Use a complex binding with a formatter for the text and state field (which controls the semantical color of the
status text).

view/Master.controller.js
Require the formatter file in the controller of the view

Rahul AGARWAL

SAP Technical Consultant CGI Bangalore

Page 21

Rahul AGARWAL

SAP Technical Consultant CGI Bangalore

Page 22

SEARCH
Implement a search on the master list by using sap.m.SearchField

Now were going to add a SearchField control to the initial page of the application. Well add it as a child within
the Pages subHeader aggregation which expects a Bar (sap.m.Bar) control.
To handle the search, well specify a handler for the SearchFields search event. This handler handleSearch is
defined in the views controller, and the search effect is achieved by adding a contains string filter to the binding
of the List controls items aggregation.
Changes
view/Master.view.xml
The search field is put to a bar that is placed in the sub header of the page.
Set the search field to 100% width to utilize all the space
Do not forget to add an id to the list in order to access the list later on in the controller

Rahul AGARWAL

SAP Technical Consultant CGI Bangalore

Page 23

view/Master.controller.js
Implement a new handler function on the view controller. Make sure to separate the function from the other
handler function with a ,
Access the query as a parameter of the event object
If the query is not empty add a FilterOperator to the array of filters.
Access the list instance by calling byId on the view.
Apply the filter array on the binding object of the list.

Rahul AGARWAL

SAP Technical Consultant CGI Bangalore

Page 24

Rahul AGARWAL

SAP Technical Consultant CGI Bangalore

Page 25

SPLIT APP & SHELL

Objective
Utilize the additional space by using the sap.m.SplitApp control which shows the master and detail view next to
each other. Wrap the split app in a shell that fills the remaining space on the desktop.
So far weve had 3 views in our application App, Master and Detail. App is our top-level view, containing the
Master and Detail views. In the App view we used an App control (yes, the same name) to contain the Master
and Detail views via the App controls pages aggregation.
This is a typical scenario for an app designed primarily for a smartphone-sized screen. But if the screen size is
larger (e.g. on a tablet or desktop) we want to automatically utilize the extra space and for that we will switch
from the App control to the SplitApp control. Alongside swapping out the control, well add new view Empty
which will be shown in the detail part of the SplitApp straightaway, if there is enough space.
Finally, for optimal utilization of space on larger devices such as desktops, we will wrap the whole thing in a Shell
control.
Changes
view/Empty.view.xml (create NEW XML view view/Empty.view.xml)
This is only a very empty page, add specific highlighted code.

Rahul AGARWAL

SAP Technical Consultant CGI Bangalore

Page 26

view/App.view.js
Load the empty view instead of the detail view.

index.html
Wrap the split app in a shell control using the title defined before.
Why in the index.html? This is done outside of the component because if you would plug a component in the
SAP Fiori Launchpad this already renders the shell.

Rahul AGARWAL

SAP Technical Consultant CGI Bangalore

Page 27

In the Chrome Dev Tools, remove flags for User Agent and Device Metrics override. This will display the SplitApp
control.

Rahul AGARWAL

SAP Technical Consultant CGI Bangalore

Page 28

ADDITIONAL DEVICE ADAPTATION

Adapt the controls to phone/tablet/desktop devices:
Show the back button in the detail page only on the phone.
Switch the list to selection mode on the tablet and desktop.

If the user can see both the master and detail section of the SplitApp at the same time because, say, theyre
using a tablet, theres not much point in showing a back button on the detail section its only really relevant on
smaller screen sizes where either one or the other section is visible. So we will set the visibility of the back button
(referred to as the navigation button in the control) to be device dependent.
Also, depending on the device, we will set different list and item selection modes. Notice that we do the device
determination up front when the application starts (in Component.js) setting the results of the determination in a
one-way bound named data model, data from which can then be used in property path bindings in the Detail and
Master views.
Changes
Component.js
Set a global model named device
Set isPhone, listMode and listItemType with the help of the device API.

Rahul AGARWAL

SAP Technical Consultant CGI Bangalore

Page 29

view/Detail.view.xml
Bind the showNavButton property to the device model

view/Master.view.xml
Bind the list mode and the list item type to the device model
Add a select event to the list

view/Master.controller.js
Implement the select event in the views controller

Rahul AGARWAL

SAP Technical Consultant CGI Bangalore

Page 30

Rahul AGARWAL

SAP Technical Consultant CGI Bangalore

Page 31

SUPPLIER TAB
Add an info tab to the detail page that shows a little form with data of the business partner of the sales order.
In this exercise we will enhance the display of the sales order detail view with a section showing the supplier
name and address.
In the Detail view, well use an IconTabBar control to introduce the information visually, and a SimpleForm control
to display the information. The SimpleForm control is from the sap.ui.layout library, so we need to add this to the
SAPUI5 bootstrap in the index.html too.
Changes
index.html

Load the additional UI library sap.ui.layout

view/Detail.view.xml
Set xml namespaces for the new package (form)
Implement a sap.m.IconTabBar
Implement a sap.ui.layout.SimpleForm and bind the data. The data source will be connected in the next step.

Rahul AGARWAL

SAP Technical Consultant CGI Bangalore

Page 32

Bind the supplier form we just created to the data of the structure BusinessPartner
view/Detail.Controller.js

Rahul AGARWAL

SAP Technical Consultant CGI Bangalore

Page 33

LINE ITEM
Extend the detail page with a table that shows the line items of the sales order. The rows are active and allow
navigating to the new line item page.
In this exercise were going to add some more details to the existing Detail view, specifically a new Table control
containing the line items from the selected order. Well put the Table control underneath the IconTabBar that we
introduced in an earlier exercise.
To format each order items quantity, well add a further function called quantity to the Formatter.js module we
already have. This will then be used in the complex binding definition of the respective quantity text in the table
ColumnListItems cells aggregation.
Well handle the selection of a line in the line items table with a handleLineItemsPress function in the Detail
views controller. This is bound to the press event of the Tables ColumnListItem as you can see in the Detail view
XML below. On selection, we want to navigate to a new view, LineItem, passing the context of the selected item.
So well create a new LineItem view, also containing a Page control with a Bar in the footer aggregation, like all
the other views, and display line item details. When the navigation button is pressed we transition back to the
Detail view with a simple handler handleNavBack in the LineItem controller.

Rahul AGARWAL

SAP Technical Consultant CGI Bangalore

Page 34

Changes
i18n/messageBundle.properties
Add more message texts

util/Formatter.js
We need a new formatter for quantities that removes the trailing zeros from the number

view/Detail.view.xml
We set a CSS class on the page control that will set proper margins on the table control in this page.
There is quite a bit of change to implement the table with the help of a list

Rahul AGARWAL

SAP Technical Consultant CGI Bangalore

Page 35

Add the following text

view/Detail.controller.js
When a line item is pressed we navigate to the new line item page

Rahul AGARWAL

SAP Technical Consultant CGI Bangalore

Page 36

view/LineItem.view.xml (ADD NEW XML view LineItem, REPLACE all initial code)
For the sake of simplicity we only put an object header to the line item page.

NOTE: To add the new XML view LineItem select node item MyFioriUI5 in the Project Explorer. Select
context menu item New > View (1). In the New View popup dialog change folder name to WebContent/view
(2), enter name LineItem (3), select Development Paradigm XML (4) and press Finish.
The New View function creates two files LineItem.controller.js and LineItem.view.xml with initial JS/XMLcode inside. In both files, select all code with CTRL+A and delete it before adding the highlighted code of this
exercise.

Rahul AGARWAL

SAP Technical Consultant CGI Bangalore

Page 37

Rahul AGARWAL

SAP Technical Consultant CGI Bangalore

Page 38

view/LineItem.controller.js (gets NEWLY added with view/LineItem.view.xml, REPLACE all initial code)
We only need to handle the back navigation to the Detail page

Rahul AGARWAL

SAP Technical Consultant CGI Bangalore

Page 39

FIORI_WebContent.zip

Thus final code to these exercises

References and further reading:https://sapui5.netweaver.ondemand.com/sdk/#content/Overview.html

Rahul AGARWAL

SAP Technical Consultant CGI Bangalore

Page 40

ABAP in Eclipse [ADT Shortcut Reference Card]

Rahul AGARWAL

SAP Technical Consultant CGI Bangalore

Page 41