Professional Documents
Culture Documents
INTRODUCTION
1.1
Goal
In this exercise, you start to explore the different components of your app. Also, you will learn how to generally
enhance your app with the Layout Editor and the Code Editor of SAP Web IDE.
You will use the SAP Fiori Master Detail Application that you created in the previous exercise as a starting point
and add further features as we go through the steps. Optionally, you can import the provided sample app as a
starting point of this exercise.
Exercise Description
1.2
Note
This exercise is based on SAPUI5 version 1.34.
All screenshots are based on SAP Web IDE version 160324 (that means March 24, 2016). Future versions
of SAP Web IDE might look different.
SAP Web IDE supports numerous browsers, however, the Layout Editor is currently supported on Google
Chrome browser only.
Prerequisites
1.3
-
Before starting with this exercise, you need to finish exercises from both week 1 and week 4 and have a
tested SAP Fiori Master Detail app project.
Optionally, you can import the provided sample app as your starting point for this exercise (see chapter
2)
You run the latest version of Google Chrome. Before starting SAP Web IDE, we recommend to clear the
browser cache.
This exercise deals with SAPUI5 coding. You can easily follow just using copy & paste, even without
having SAPUI5 knowledge. To understand all involved concepts ,we recommend to look at
https://sapui5.netweaver.ondemand.com to find loads of information on SAPUI5. These topics are out of
scope for this openSAP course.
openSAP
2.1
Explanation
1.
2.
Screenshot
Note
It is recommended that you use the
Google Chrome browser for the entire
course and for all exercises.
3.
4.
5.
6.
Copyright/Trademark
openSAP
Explanation
7.
Screenshot
Note
Alternatively, you can go to folder
webapp/test, select
testFLPService.html and click the
button Run from the top menu.
If the pop-up Store files on this device
is displayed, choose Allow.
8.
9.
Copyright/Trademark
openSAP
3.1
Explanation
1.
2.
3.
4.
5.
Screenshot
Copyright/Trademark
openSAP
Explanation
Screenshot
Note
In case you need to delete a control,
select the control (highlighted with a
blue frame) and press the delete key on
your keyboard (or Fn+Backspace key
on a Mac).
6.
7.
8.
9.
Copyright/Trademark
openSAP
Explanation
Screenshot
Copyright/Trademark
openSAP
Explanation
Screenshot
Copyright/Trademark
openSAP
3.2
In this step, you modify the Detail View with the Layout Editor and
Add a Simple Form to an Icon Tab Filter
Apply data binding for this Simple Form
Remove/Add and adapt another Icon Tab Filter
Explanation
1.
2.
3.
4.
5.
6.
Screenshot
Note
The Simple Form consists of different
elements. These elements are
surrounded by a dashed lined box. The
right drop-off area is indicated by the
bluish highlighted layout control title
Icon Tab Filter > Content.
7.
8.
Copyright/Trademark
openSAP
Explanation
9.
Screenshot
Copyright/Trademark
openSAP
Explanation
Screenshot
Copyright/Trademark
openSAP
Explanation
Screenshot
Note
The Detail.view.xml is opened in a
new tab inside the SAP Web IDE. In
the code, the element you selected in
the Layout Editor is highlighted. You
can check how code was added to the
view according to your modifications in
the Layout Editor.
Copyright/Trademark
openSAP
Explanation
Screenshot
Note
SAPUI5 comes with a built-in set of 500
icons that you can easily use in your
applications. Find these icons in the
Icon Explorer:
https://sapui5.netweaver.ondemand.co
m/sdk/iconExplorer.html
All you need to do is to add the icons
name after the value sap-icon://
36. Drag and drop a Simple Form
from the Controls tab to the white
space below the newly created
Icon Tab Filter.
Copyright/Trademark
openSAP
Explanation
Screenshot
Copyright/Trademark
openSAP
Explanation
Screenshot
Note
The respective input field in the canvas
shows the defined values differently.
You will see the following:
{GrossAmount, CurrencyCode}
Copyright/Trademark
openSAP
Explanation
Screenshot
Copyright/Trademark
openSAP
Explanation
Screenshot
58. In the Outline pane, find and rightclick the entry negativeAction.
59. In the context menu, choose Add.
Copyright/Trademark
openSAP
Explanation
Screenshot
Note
For both buttons, a function call was
created. Next, these functions will need
more logic to let something happen if
you click one of the buttons. See more
in the next chapter.
74. For now, save your changes by
choosing the button Save.
Note
Unsaved files (or tabs) have an asterisk
(*) symbol that disappears after the file
is saved.
Copyright/Trademark
openSAP
Explanation
Screenshot
Note
In case, your app is connected to the
ES4 Gateway service, you can run the
app with the option Run with Server
and display backend data.
Copyright/Trademark
openSAP
ADVANCED ENHANCEMENTS
4.1
In this step, you will create a message toast notification which offers a simple feedback about an operation in a popup.
Note
There is no business logic behind the click event. In this example, it is important to understand where a
possible business logic must be implemented.
Explanation
1.
Screenshot
Note
It is possible that you get an information
pop-up when you open the file for the
first time. Confirm with OK.
2.
3.
sap.ui.define([
"com/so/controller/BaseController",
"sap/ui/model/json/JSONModel",
"com/so/model/formatter",
"sap/m/MessageToast"
], function(BaseController, JSONModel, formatter,
MessageToast) {
"use strict";
return
BaseController.extend("com.so.controller.Detail", {
formatter: formatter,
Note
Please work accurately and take care
of additional commas and semi-colons.
All characters to be included are
highlighted in yellow.
Copyright/Trademark
openSAP
Explanation
Screenshot
4.
5.
onApprove: function() {
MessageToast.show("The sales order has been
approved.");
},
6.
onReject: function() {
MessageToast.show("The sales order has been
rejected.");
}
7.
});
});
Note
To beautify and align the code, make a
right-click within the code area in the
Code Editor and choose Beautify from
the context menu.
8.
9.
Note
In case, your app is connected to the
ES4 Gateway service, you can run the
app with the option Run with Server
and display backend data.
10. Click on each button, Approve and
Reject, and check the appearing
message.
11. Finally, close the app preview
window again.
Copyright/Trademark
openSAP
4.2
In this step, you will create a new Detail View page. Since SAP Fiori is using the Model View Controller (MVC)
model, you may either create the different elements (View and Controller) manually or let SAP Web IDE create the
whole component for you automatically.
In the end, the new Detail View shall be accessed by clicking a product from the line items in the first Detail View
of your app and display more detail information for the selected product.
Explanation
Screenshot
1.
2.
Note
In case, other project tabs are still
open, close all of them to start with a
fresh environment.
3.
Entry
XML
com.so
ProductDetails
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 Detail View
and its Controller belong to your app.
4.
Copyright/Trademark
openSAP
Explanation
5.
Screenshot
Note
Make sure that both files exist in their
folders. In case, you created the
SAPUI5 component with a right-click on
the project folder, you must cut and
paste each file in the mentioned folder.
Note
Generally, be aware that the
development inside SAP Web IDE is
case sensitive as in other
development environments, too.
In this example, you were asked to
create a new SAPUI5 view called
ProductDetails. There is a capital D
used for details.
Copyright/Trademark
openSAP
4.3
Next, a navigation between the two Detail View pages (Detail and ProductDetails) must be configured by defining
routes. The creation of navigation routes between app pages is the basis for making each page accessible via a
unique URL.
Explanation
1.
2.
3.
4.
5.
6.
7.
8.
9.
Screenshot
Note
Make sure that you enter the values
exactly as given above taking care of
upper-case and lower-case.
Copyright/Trademark
openSAP
Explanation
Screenshot
Copyright/Trademark
openSAP
Explanation
Screenshot
Note
Make sure that all the lines and, in
particular, the commas and quotation
marks are set correctly.
Note
In case you want to learn more about
the routing and navigation topic, check
out the chapters on navigation (Steps
31-33) in the Walkthrough tutorial
available via the SAPUI5 Developer
Guide:
https://sapui5.netweaver.ondemand.co
m/#docs/guide/3da5f4be63264db99f2e
5b04c5e853db.html
"routes": [{
"pattern": "",
"name": "master",
"target": ["object", "master"]
}, {
"pattern": "SalesOrderSet/{objectId}",
"name": "object",
"target": ["master", "object"]
}, {
"name": "productDetails",
"pattern": "productDetails/{productId}",
"greedy": false,
"target": ["master", "productDetails"]
}],
"targets": {
"master": {
"viewName": "Master",
"viewLevel": 1,
"viewId": "master",
"controlAggregation": "masterPages"
},
"object": {
"viewName": "Detail",
"viewId": "detail",
"viewLevel": 2
},
"detailObjectNotFound": {
"viewName": "DetailObjectNotFound",
"viewId": "detailObjectNotFound"
},
"detailNoObjectsAvailable": {
"viewName": "DetailNoObjectsAvailable",
"viewId": "detailNoObjectsAvailable"
},
"notFound": {
"viewName": "NotFound",
"viewId": "notFound"
},
"productDetails": {
"viewType": "XML",
"transition": "slide",
"clearAggregation": true,
"viewName": "ProductDetails",
"viewId": "productDetails"
}
}
Copyright/Trademark
openSAP
4.4
Next, you define the transition between a ColumnListItem and the resulting output. In this case, it is the navigation
from each item in your list to the new ProductDetail view.
Explanation
1.
2.
3.
4.
5.
6.
Screenshot
<items>
<ColumnListItem press="onPress" type="Navigation">
<cells>
<ObjectIdentifier text="{ItemPosition}"
title="{ProductID}" />
<ObjectNumber number="{ path: 'GrossAmount',
formatter: '.formatter.currencyValue' }"
unit="{CurrencyCode}" />
</cells>
</ColumnListItem>
</items>
</Table>
</semantic:content>
Note
In case, your app is connected to the
ES4 Gateway service, you can run the
app with the option Run with Server
and display backend data.
Copyright/Trademark
openSAP
Explanation
7.
8.
9.
Screenshot
Copyright/Trademark
openSAP
4.5
Change the Detail View Controller for Navigating to the Product Details
View
Explanation
1.
2.
3.
4.
Note
Generally, it doesnt matter, where you
add a new function declaration inside a
controller file. In this case, you add the
onPress function next to other binding
events.
5.
6.
Screenshot
_onObjectMatched: function(oEvent) {
var sObjectId =
oEvent.getParameter("arguments").objectId;
this.getModel().metadataLoaded().then(function() {
var sObjectPath =
this.getModel().createKey("SalesOrderSet", {
SalesOrderID: sObjectId
});
this._bindView("/" + sObjectPath);
}.bind(this));
},
onPress: function(oEvent) {
var oItem = oEvent.getSource();
var oRouter =
sap.ui.core.UIComponent.getRouterFor(this);
oRouter.navTo("productDetails", {
productId:
oItem.getBindingContext().getObject().ProductID
});
},
Copyright/Trademark
openSAP
4.6
When navigating to the view ProductDetails, you need to ensure that this view is showing a result. Following the
Model View Controller (MVC) model, you need to add code to the ProductDetails controller and view.
Explanation
Screenshot
1.
2.
3.
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";
oRouter.getRoute("productDetails").attachPatternMatched(th
is._onObjectMatched, this);
},
_onObjectMatched: function(oEvent) {
this.getView().bindElement({
path: "/ProductSet('" +
oEvent.getParameter("arguments").productId + "')"
});
}
});
});
4.
5.
return
Controller.extend("com.so.controller.ProductDetails", {
onInit: function() {
var oRouter =
sap.ui.core.UIComponent.getRouterFor(this);
Note
In case, your app is connected to the
ES4 Gateway service, you can run the
app with the option Run with Server
and display backend data.
Copyright/Trademark
openSAP
Explanation
6.
7.
8.
Screenshot
ProductDetails.view.xml
Note
If the navigation does not work, check
in both ProductDetails.view.xml and
ProductDetails.controller.js that the
references to the ProductDetails
controller and its naming are correct.
9.
ProductDetails.controller.js
Note
In case that the code snippets are not
formatted properly after copy/paste, go
into the SAP Web IDE menu Edit and
choose Beautify to align the code.
<content>
<ObjectHeader title="{Name}" number="{Price}"
numberUnit="{CurrencyCode}">
<attributes>
<ObjectAttribute text="ProductID: {ProductID}" />
<ObjectAttribute text="Description: {Description}"
/>
<ObjectAttribute text="Weight Measure:
{WeightMeasure} {WeightUnit}" />
<ObjectAttribute text="Dimension: {Width} x
{Depth} x {Height} {DimUnit}" />
</attributes>
</ObjectHeader>
</content>
Copyright/Trademark
openSAP
Explanation
Screenshot
Note
In case, your app is connected to the
ES4 Gateway service, you can run the
app with the option Run with Server
and display backend data.
15. Click on a line item from the first
Detail View to navigate to your
newly created Product Details
view.
Check that product specific data
from this line item is displayed.
16. Finally, close the app preview
window again.
Copyright/Trademark
openSAP
4.7
Create the Navigation Back from the Product Detail View to the Detail
View
Finally, you need to be able to navigate back from the ProductDetails view to the previous Detail View. In this step,
you create the navigation call as an event in the ProductDetails view and implement the called function in the
ProductDetails controller.
Explanation
1.
2.
3.
4.
5.
6.
7.
Screenshot
<pages>
<Page title="Product Details" showNavButton="true"
navButtonPress="onNavBack">
<content>
Copyright/Trademark
openSAP
8.
Note
In case you want to learn more about
the navigation topic, check out Step 33:
Routing Back and History in the
Walkthrough tutorial available via the
SAPUI5 Developer Guide:
https://sapui5.netweaver.ondemand.co
m/#docs/guide/3da5f4be63264db99f2e
5b04c5e853db.html
9.
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/core/routing/History"
], function(Controller, History) {
"use strict";
return
Controller.extend("com.so.controller.ProductDetails", {
onInit: function() {
var oRouter =
sap.ui.core.UIComponent.getRouterFor(this);
oRouter.getRoute("productDetails").attachPatternMatched(th
is._onObjectMatched, this);
},
_onObjectMatched: function(oEvent) {
this.getView().bindElement({
path: "/ProductSet('" +
oEvent.getParameter("arguments").productId + "')"
});
},
onNavBack: function() {
var oHistory = History.getInstance();
var sPreviousHash = oHistory.getPreviousHash();
if (sPreviousHash !== undefined) {
window.history.go(-1);
} else {
var oRouter =
sap.ui.core.UIComponent.getRouterFor(this);
oRouter.navTo("object", true);
}
}
});
});
Note
In case, your app is connected to the
ES4 Gateway service, you can run the
app with the option Run with Server
and display backend data.
Copyright/Trademark
openSAP
FURTHER INFORMATION
So, whats next? Now, you may think about what further steps you can do to go deeper into SAPUI5 development.
Take a look at https://sapui5.netweaver.ondemand.com/ and check out the UI development toolkit for HTML5
(SAPUI5) to find loads of information on SAPUI5.
For code examples and snippets to reuse in your SAPUI5 app project, go to the SAPUI5 Explored app:
https://sapui5.hana.ondemand.com/sdk/explored.html
Congratulations!
You enhanced your SAP Fiori app using the Layout Editor and the Code Editor of
SAP Web IDE.
Copyright/Trademark