Anda di halaman 1dari 34

March 29, 2016

openSAP course Build Your Own SAP Fiori


App in the Cloud 2016 Edition
Exercise Week 5
Enhance your SAP Fiori App with the Layout Editor

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

During the exercise you will:


Modify attributes in the Master View
Change and add elements in the Detail View
Add events to buttons
Add and adapt a new SAPUI5 view
Configure a navigation route, implement the navigation from one Detail View to another and apply data
binding as well as a navigation back function
Learn about more information sources from where to go on

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

GETTING STARTED WITH THE SAP FIORI MASTER DETAIL APPLICATION


Note
If you have done the exercises from week 4 and want to go on working with the app created there,
you can skip the steps to import the sample app.
As you learned, you can run the application either with backend data from an OData service or with mock
data. The imported sample app is based on the ES4 OData service, but in this exercise it will be run with
the Mock Server only.

2.1

Import App Code

Explanation
1.

Download the sample app project


(called
MySalesOrders_w5u1_start.zip)
from the openSAP course assets.
This project file can be found next
to this exercise.

2.

Launch the SAP Web IDE in your


browser.

Screenshot

Note
It is recommended that you use the
Google Chrome browser for the entire
course and for all exercises.
3.

In the Development area of SAP


Web IDE, right-click the topmost
folder called Workspace and
choose Import From File
System.

4.

In the Import dialog box, browse


for the provided zip file you just
downloaded
(MySalesOrders_w5u1_start.zip).

5.

In the field Import to, provide as


folder name /MySalesOrders
(there should not be any space in
the folder name).

6.

Make sure that the checkbox


Extract Archive is selected and
choose OK.

Copyright/Trademark

openSAP

Explanation
7.

Screenshot

Check that the project was


imported and right-click on the
project folder MySalesOrders,
then choose Run Run with
MockServer from the context
menu.

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.

Your app should show sample data


and is ready for further
enhancements.

9.

Finally, close the app preview


window again.

Copyright/Trademark

openSAP

ENHANCE THE SAP FIORI MASTER DETAIL APPLICATION WITH THE


LAYOUT EDITOR

3.1

Modify the Master View with the Layout Editor

In this step, you modify the Master View and


add the sales order ID to the list items (i.e. you add an object attribute control to the object list items)
add the delivery status of the sales orders to the list items (i.e. you add an object status control to the
object list items)
define data binding for the mentioned controls

Explanation
1.

In SAP Web IDE, expand the


folder webapp/view.

2.

Right-click the file


Master.view.xml

3.

Choose Open With Layout


Editor.

4.

In the Controls tab, expand the


Display panel and find Object
Attribute.

5.

Drag and drop Object Attribute to


the white space below
{CustomerName}.
In doing so, you add an Object
Attribute to the Object List Item.

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.

Next, the new Object Attribute


control properties need to be
bound. Therefore, a data set for
the view must be defined.
Choose the Outline tab and select
Master.view.xml

7.

In the Properties panel on the


right, select the SalesOrderSet
Data Set from the dropdown.

8.

Choose OK in the Confirmation


Needed dialog box to change the
data set for the Master View.
The binding for the Master View is
done.

9.

Now, the previously created Object


Attribute control will be configured.
Select the previously created
Object Attribute in the canvas (or,
optionally, via the Outline tab
content).

10. In the Properties panel on the


right, a chain symbol next to each
form field or dropdown list indicates
that a binding is possible.
Click the data binding button next
to the property Text of the new
Object Attribute control. Currently,
attribute text is displayed.

Copyright/Trademark

openSAP

Explanation

Screenshot

11. In the dialog box Data Binding


[Object Attribute] delete the
existing expression text (called
attribute text).
12. Double-click in the Data Fields
area on SalesOrderID (string).
13. Check that {SalesOrderID} is now
the only expression string.
14. Choose OK.

15. In this step, a status text is added.


Go to the Outline tab and expand
the path: Master.view.xml
sap.m.semantic.MasterPage
content sap.m.List items
sap.m.ObjectListItem
16. Select firstStatus.

17. Choose the plus (+) button from


the top.
18. Select ObjectStatus (sap.m) from
the pop-up.

19. Check the added


sap.m.ObjectStatus control to the
Outline pane and the canvas.
20. Select the newly added
sap.m.ObjectStatus control in the
Outline pane (or the canvas).
21. In the Properties panel on the
right, click the data binding button
next to the field Text. Currently,
status text is displayed.

Copyright/Trademark

openSAP

Explanation

Screenshot

22. In the dialog box Data Binding


[Object Status] delete the existing
expression text (called status text)
23. Double-click in the Data Fields
area on
DeliveryStatusDescription
(string).
24. Check that
{DeliveryStatusDescription} is
now the only expression string.
25. Choose OK.

26. Save your changes by selecting


the file Master.view.xml in the
Navigation pane and choosing
Save.

27. Check and run the app with


MockServer by right-clicking the
folder MySalesOrders Run
Run with MockServer.

28. Now, the Sales Order ID and the


Delivery Status Description are
displayed for every item.
29. Finally, close the app preview
window again.

Copyright/Trademark

openSAP

3.2

Modify the Detail View with the Layout Editor

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.

In the SAP Web IDE, expand the


folder webapp/view.

2.

Right-click the file Detail.view.xml.

3.

Choose Open With Layout


Editor.

4.

In the Controls tab, enter the key


word simple in the search field.

5.

Find the Simple Form control


under Layout.

6.

Drag and drop the control Simple


Form to the white space below the
first icon tab filter.

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.

Select the Title element in the


canvas.

8.

In the Properties panel on the


right, insert Sales Order Details in
the input field Text.

Copyright/Trademark

openSAP

Explanation
9.

Screenshot

Right-click one of the two input


fields for Label 1. Choose Delete
from the context menu because
just one input field is needed in this
exercise.

10. To set the binding for the Detail


View, choose the Outline tab and
select Detail.view.xml.
11. In the Properties panel on the
right, select the SalesOrderSet
data set from the dropdown.

12. Choose OK in the Confirmation


Needed dialog box to change the
data set for the Detail View.

13. Select the element Label 1: in the


canvas.
14. In the Properties panel on the
right, enter Sales Order ID in the
input field Text.

Copyright/Trademark

openSAP

Explanation

Screenshot

15. In the canvas, select the empty


input field below the freshly relabeled element Sales Order ID.
16. In the Properties panel on the
right, click on the data binding
button of the field Value. Currently,
the input field is empty.

17. In the dialog box Data Binding


[Input].
18. Double-click in the Data Fields
area on SalesOrderID (string).
19. Check that {SalesOrderID} is now
the only expression string.
20. Click OK.
21. Check that the input field Value is
now filled with {SalesOrderID}.

22. Do the same procedure for the


Label 2 element and the
respective input field.
Use these values:
-

For Label 2, insert Note in the


field Text
For the input field, bind with
{Note} in the field Value.

23. Right-click the Icon Tab Filter that


you made modifications for.
24. Choose Go to code from the
context menu.

Copyright/Trademark

openSAP

Explanation

Screenshot

25. The Code Editor opens. Check


out the code that was automatically
added to the Detail.view.xml via
the Layout Editor.
As you can see, it was not
necessary to manually include
code when using the Layout Editor.

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.

26. To continue the editing, go back to


the Layout Editor tab of
Detail.view.xml.
27. In the Controls tab, search for the
key word icon.
28. Find the Icon Tab Filter control
under Container.

29. Drag and drop the control Icon


Tab Filter to the canvas next to the
other icon tab filters.

Copyright/Trademark

openSAP

Explanation

Screenshot

30. Select the new icon tab filter in


the canvas.
31. In the Properties panel on the
right, delete the value Open in the
field Text and delete the value 10
in the field Count.
32. Apply another color to the icon tab
filter. From the dropdown of the
field Icon Color, choose the value
Positive.

33. Another customization is to replace


the tabs icon that currently
consists of the icon: sapicon://task
34. In the field Icon, choose the Icon
Selection button and search and
select the icon simple-payment
from the list.
35. Choose OK.

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

37. Delete the element Title and one


of the two input fields for Label 1.
To do so, right-click each of the
mentioned elements and choose
Delete from the context menu.

38. Switch to the Outline tab on the


left.
39. Select the newly created Simple
Form in the canvas and check that
this control is highlighted in the
Outline tab on the left.

40. In the Outline tab, right-click the


highlighted
sap.ui.layout.form.SimpleForm
and choose Add from the context
menu.

41. In the Add control to: content


pop-up, search for the key word
label and click on it to choose it.

42. Select again the Simple Form.


43. Right-click again the highlighted
sap.ui.layout.form.SimpleForm
and choose Add from the context
menu.
44. In the Add control to: content
pop-up, search for key word input
and click Input (sap.m) to choose
it.

Copyright/Trademark

openSAP

Explanation

Screenshot

45. Now, you created a third label and


a third input field inside the Simple
Form below your new (green) Icon
Tab Filter.
In the Properties panel on the
right, rename each of the three
labels as follows by changing the
value of their field Text:

Label 1 Gross Amount

Label 2 Net Amount

Label Tax Amount

46. Select the input field for Gross


Amount, go to the Properties
panel and choose the binding icon
next to the field Value.

47. In the dialog box Data Binding


[Input], double-click in the Data
Fields area first on GrossAmount
(decimal) and then on
CurrencyCode (string).
48. Check that
{GrossAmount}{CurrencyCode}
is now the only expression string.
49. Insert a blank space between both
expressions.
50. Click OK.

51. Check that the input field Value is


now filled with
{GrossAmount} {CurrencyCode}

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

52. For the other two input fields, carry


out the same steps as mentioned
above and provide the following
values separated from each
other with a blank space:

For Net Amount:


{NetAmount}
{CurrencyCode}

For Tax Amount:


{TaxAmount}
{CurrencyCode}

53. To clean up your app, delete the


unused Icon Tab Filter in the
middle. To do so, right-click on the
Icon Tab Filter and choose Delete
in the context menu.

54. Now, you will add two buttons to


the detail views footer.
Go to the Outline tab, scroll down
to find the entry positiveAction,
and right-click on positiveAction.
55. In the context menu, choose Add.

56. In the pop-up Add Control to:


positiveAction, click the area
Positive Action to add a new
button in the footer area of your
app.

57. Check that a green colored button


named Positive was added to the
footer area of your app.

Copyright/Trademark

openSAP

Explanation

Screenshot

58. In the Outline pane, find and rightclick the entry negativeAction.
59. In the context menu, choose Add.

60. In the pop-up Add Control to:


negativeAction, click the area
Negative Action to add a new
button in the footer area of your
app.

61. Check that a red colored button


named Negative was added to the
footer area of your app.

62. Select the green button Positive


from the footer in the canvas.
63. Go to the Properties panel on the
right and change field Text value
into Approve.

64. Next, the button needs some


functionality.
Expand the Events panel above
the Properties panel on the right.
65. In the input field Press, choose the
dropdown button and select New
Function.

Copyright/Trademark

openSAP

Explanation

Screenshot

66. In the pop-up New Function,


insert the function name
onApprove to define a function
call.
67. Click the button OK to confirm.

68. For the red button Negative,


repeat the same steps.
Select the red button Negative.
69. Go to the Properties panel on the
right and change the value in the
field Text to Reject.

70. Expand the Events panel above


the Properties panel on the right.
71. In the input field Press, choose the
dropdown button and select New
Function.
72. In the pop-up New Function,
insert the function name onReject.
73. Click the button OK to confirm.

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

75. Check and run the app with mock


server by selecting the app folder
and choosing from the top menu
Run Run with MockServer or
right-click on the app folder
MySalesOrders Run Run
with MockServer.

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.

76. Now, the new Icon Tab Filters and


their contents (the Simple Forms)
should display item specific data
values. Also, the two new buttons
in the footer area are visible but
at the moment without any
functionality.
77. Finally, close the app preview
window again.
78. Also close all open tabs in SAP
Web IDE to be prepared for the
next chapter.

Copyright/Trademark

openSAP

ADVANCED ENHANCEMENTS

4.1

Add a Button Press Event

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

In the previous chapter, you


finished with creating two buttons.
For each, you added a function call
that will process this function once
you click the respective button.
Go to your app folder
MySalesOrders webapp
controller and open the file
Detail.controller.js in the Code
Editor with a double-click on the
file name.

Note
It is possible that you get an information
pop-up when you open the file for the
first time. Confirm with OK.
2.

At the bottom of the code page,


check that the code with the
functional declaration was added
for each function call.

3.

In the next steps, for each of the


two buttons, you will add code to
bring them to life.
Go to the beginning of the code in
file Detail.controller.js and include
the following highlighted code. This
extends the array of required
modules and declares the library
that shows up the message toast.

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.

Scroll down to the function


onApprove, delete the comment
//This code was generated by the
layout editor.

5.

Add the following code that creates


a message toast when pressing
the button.

onApprove: function() {
MessageToast.show("The sales order has been
approved.");
},

6.

Go to the function onReject, and


delete the comment //This code
was generated by the layout
editor.

onReject: function() {
MessageToast.show("The sales order has been
rejected.");
}

7.

Add the following code highlighted


in yellow that creates a message
toast when pressing the button.

});

});

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.

Save your changes by choosing


the button Save.

9.

Check the buttons by running the


app with mock server.
Select the app folder and choose
from the top menu Run Run
with MockServer or right-click on
the app folder MySalesOrders
Run Run with MockServer.

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

Add a New SAPUI5 View

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.

In SAP Web IDE, go to the project


folder MySalesOrders and rightclick the folder webapp.

2.

From the context menu, choose


New SAPUI5 View to create the
SAPUI5 component inside the
webapp folder automatically.

Note
In case, other project tabs are still
open, close all of them to start with a
fresh environment.
3.

The wizard New SAPUI5 View


opens to guide you through the
creation process.
Provide the following initial view
details and continue with the button
Next:
Field
View Type
Namespace
View Name

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.

In the step Confirmation, choose


the button Finish.

Copyright/Trademark

openSAP

Explanation
5.

Screenshot

Now, two files were created.


ProductDetails.controller.js is
new in the folder MySalesOrders
webapp controller and
ProductDetails.view.xml is new in
the folder MySalesOrders
webapp view

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

Configure a Navigation Route

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.

In SAP Web IDE, go to the


webapp folder and right-click the
file manifest.json.

2.

From the context menu, choose


Open With App Descriptor
Editor.

3.

Go to the tab Routing.

4.

In the section Routes, choose the


button + (plus) to add a new route.

5.

In the column Name, replace the


value route name with
productDetails.

6.

In the column Pattern, insert the


value productDetails/{productId}

7.

Scroll down to the section Manage


Targets.

8.

Click the button + (plus) to add a


new target to the list.

9.

In the pop-up Add Target, enter as


Target Name the value
productDetails.

Screenshot

10. Confirm with button OK.

11. In the section Manage Targets,


select the newly added target
productDetails.
12. On the right, provide the following
details:
Field
Entry
View Name
ProductDetails
View ID
productDetails

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

13. In the section Routes, go to the


column Targets and click the
button + (plus) next to the row
productDetails.

14. In the pop-up Add Target, first add


from the dropdown Target the
value master and confirm with the
button OK.

15. In the section Routes, stay in the


column Targets and click a second
time the button + (plus) next to the
row productDetails.

16. In the pop-up Add Target, add


from the dropdown Target the
value productDetails and confirm
with the button OK.

17. Check that there are two targets


defined for the route
productDetails now.
18. Click the button Save to save the
changes done with the App
Descriptor Editor.
19. From the bottom of the canvas, go
to the tab Code Editor.

Copyright/Trademark

openSAP

Explanation

Screenshot

20. The file manifest.json is now


opened in the Code Editor.

21. Make sure and check that the


following two code sections
highlighted in yellow are available
in this file.
These are the enhancements that
you did with the App Descriptor
Editor.

Note
Make sure that all the lines and, in
particular, the commas and quotation
marks are set correctly.

22. Close the file manifest.json

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

Add Press Event to Detail.view.xml

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.

In SAP Web IDE, go to the project


folder MySalesOrders navigate to
the folder webapp view.

2.

Double-click on the file


Detail.view.xml to open it in the
Code Editor.

3.

Scroll down and find the tag


ColumnListItem.

4.

Inside the tag ColumnListItem


that is part of the table, add the
following code highlighted in
yellow.

5.

Save your changes by choosing


the button Save.

6.

Check the navigation by running


the app with mock server.
Select the app folder and choose
from the top menu Run Run
with MockServer or right-click on
the app folder MySalesOrders
Run Run with MockServer.

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.

Check that the line items in the


Detail View are now clickable and
show an arrow indicating an
additional navigation.
The navigation itself will be
implemented in the next chapters

8.

Finally, close the app preview


window again.

9.

In SAP Web IDE, close the tab


Detail.view.xml

Screenshot

Copyright/Trademark

openSAP

4.5

Change the Detail View Controller for Navigating to the Product Details
View

Explanation
1.

In SAP Web IDE, go to the project


folder MySalesOrders navigate to
the folder webapp controller.

2.

Double-click on the file


Detail.controller.js to open it in
the Code Editor.

3.

Scroll down and find the function


_onObjectMatched. Go to the end
of the function declaration.

4.

In the file Detail.controller.js, add


as a new function below
_onObjectMatched the function
call onPress. Use the following
code highlighted in yellow.

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.

Save your changes by choosing


the button Save.

6.

Close the tab Detail.controller.js

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

Add Content to the New ProductDetails Controller and its View

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.

In SAP Web IDE, go to the project


folder MySalesOrders navigate to
the folder webapp controller.

2.

Double-click on the file


ProductDetails.controller.js to
open it in the Code Editor.

3.

Currently, the controller


ProductDetails consists of the
controller declaration only.
You need
to create a new binding
declaration to instantiate the
ProductDetails view,
to attach a route and
to bind the view.

sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";

Remove the complete existing


code and add the entire following
code highlighted in yellow.

oRouter.getRoute("productDetails").attachPatternMatched(th
is._onObjectMatched, this);
},
_onObjectMatched: function(oEvent) {
this.getView().bindElement({
path: "/ProductSet('" +
oEvent.getParameter("arguments").productId + "')"
});
}
});
});

4.

Save your changes by choosing


the button Save.

5.

Check the navigation by running


the app with mock server.
Select the app folder and choose
from the top menu Run Run
with MockServer or right-click on
the app folder MySalesOrders
Run Run with MockServer.

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.

Click on a line item from the first


Detail View and see if it takes you
to your newly created Product
Details view.
Also, you may see that an option to
navigate back must be created as
well. You will do this in the next
chapter

7.

Finally, close the app preview


window again.

8.

Close the tab


ProductDetails.controller.js

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

Go back to SAP Web IDE, go to


the project folder MySalesOrders
navigate to the folder webapp
view.

10. Double-click on the file


ProductDetails.view.xml to open
it in the Code Editor.
11. Inside the tag Page, change the
title value into Product Details.
12. Now, add an ObjectHeader to the
view and bind some properties to
it. As a result, the Detail View
ProductDetails will display this
information as part of the selected
product.
In the tag <content></content>,
include the following code
highlighted in yellow.

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

13. Save your changes by choosing


the button Save.
14. Check the content on the Product
Details page by running the app
with mock server.
Select the app folder and choose
from the top menu Run Run
with MockServer or right-click on
the app folder MySalesOrders
Run Run with MockServer.

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.

In SAP Web IDE, go to the project


folder MySalesOrders navigate to
the folder webapp view.

2.

Double-click on the file


ProductDetails.view.xml to open
it in the Code Editor if not already
opened from the previous step.

3.

In this step, the back arrow button


on the Product Details page is
added. This is the navigation from
the ProductDetails View to the
Detail View.
Therefore, certain parameters and
the corresponding values must be
added to the tag Page.
Inside the tag Page, include the
following code highlighted in
yellow.

4.

Save your changes by choosing


the button Save.

5.

You can close the tab


ProductDetails.view.xml

6.

In SAP Web IDE, go to the project


folder MySalesOrders navigate to
the folder webapp controller.

7.

Double-click on the file


ProductDetails.controller.js to
open it in the Code Editor.

Screenshot

<pages>
<Page title="Product Details" showNavButton="true"
navButtonPress="onNavBack">
<content>

Copyright/Trademark

openSAP

8.

Accurately, add the following three


code parts highlighted in yellow.
Alternatively, exchange the whole
code in the file
ProductDetails.controller.js
again, but stay focused on the
highlighted code parts to
understand what is going to be
updated in this step.

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

Save your changes by choosing


the button Save.

10. Check the navigation back to the


Detail View by running the app with
mock server.
Select the app folder and choose
from the top menu Run Run
with MockServer or right-click on
the app folder MySalesOrders
Run Run with MockServer.

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

11. Click on a line item from the first


Detail View to navigate to your
newly created Product Details
view.
Check that there is an arrow that
indicates the way back to the Detail
View page with the line items.

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 example, find tutorials and other useful materials here:


https://sapui5.netweaver.ondemand.com/#docs/guide/8b49fc198bf04b2d9800fc37fecbb218.html

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

Anda mungkin juga menyukai