Exercise

0 Fork your own playground

Objective
Open up the Greenfield MVC project on Plunker and fork it in order to have your own, private JavaScript playfield.
Finally, get familiar with the initial project.

Steps
1.

Open http://bit.ly/mvc-greenfield your browser (Chrome is highly recommended).

2. Press the Fork button. Youll recognize that the URL of your browser window will change. This shows that
you created your private JavaScript playground using the Greenfield MVC project as a basis.

3. Check out the files on the right and get you familiar with the structure of the initial project. As of now,
Plunker does not show the files in a hierarchical order folders are represented by a slash. For example, the
mock.json files is actually located in the folder model. Its a convention to created controllers as well as
views in the same folder, namely view.

4.

Make sure that the live preview shows an empty OpenUI5 application, like on the picture below:

Further R eading:
-

Component Concept:
https://openui5.hana.ondemand.com/#docs/guide/958ead51e2e94ab8bcdc90fb7e9d53d0.html

Quickly Build Responsive MVC Web Apps using OpenUI5 and Plunker

Exercise 1 Add a list to the master view

Objective
Display a list on the master view and create a mock function for a press event. Press events will also get
triggered when a user on a mobile device performs a tap on the specific list element.

Preview

Result
http://bit.ly/mvc-step1

Description
What were going to do in this exercise is to add a list to master view. The list will display data from the data
model, which is predefined in the initial project. Every list element will represent a data element in the mock.json
file. Thanks to the data binding, OpenUI5 takes the path of the aggregation within the JSON file and automatically
creates as many list items as the aggregation includes. If you check out the mock.json file and look inside the
elements of the aggregation SalesOrderCollection, youll see that every element has various attributes. For this
task, we will just display the order numbers, more specifically the attribute SoId. As were planning to have a
detail view with additional information per list element, we will also implement a mock function for the press event,
which is triggered on key-press or tap on mobile devices.
For that matter, well change the master view and controller.

Changes
view/Master.view.xml

Within the Page declaration, add a new list element

As part of the list element declaration, define how every list ITEM should be displayed. We will use
StandardListItems initially and set the title attribute to the sales order ID (SoId)
Every list item will be assigned a press event handler. This handler will be implemented in the master controller.
Save your changes with Ctrl + S or by hitting the Save button
<Page

title="Start Coding!" >

<List


items="{/SalesOrderCollection}" >


<StandardListItem



type="Active"



press="handleListItemPress"



title="{SoId}" />

</List>
</Page>

view/Master.controller.js
-

Add the event handler function for the press event defined in the view

Quickly Build Responsive MVC Web Apps using OpenUI5 and Plunker

sap.ui.controller("mvc.view.Master", {
// implement controller methods here
handleListItemPress: function (evt) {


// show in a popup which list element was pressed


alert("Pressed: " + evt.getSource().getBindingContext());

}
});

Now wait for the live preview to appear. Try pressing on a list item a check out the text in the popup window.
You should take a look at the mock.json file to get yourself familiar with the structure of the mock JSON file.

Further R eading:
-

Data Binding:
https://openui5.hana.ondemand.com/#docs/guide/91f0f3cd6f4d1014b6dd926db0e91070.html
List: https://openui5.hana.ondemand.com/explored.html#/entity/sap.m.List/about
MVC Pattern:
https://openui5.hana.ondemand.com/#docs/guide/31a8db9d97544bb7964a6bf18e4678ef.html

Quickly Build Responsive MVC Web Apps using OpenUI5 and Plunker

Exercise 2 Display list element details

Objective
Display a detail view with additional information for selected list items. The detail view will be displayed
whenever a press event occurs (key-press or tap).

Preview

Result
http://bit.ly/mvc-step2

Description
In order to improve our web app, we would like to display a more detail information for each sales order / list item.
We will therefore create a new view and controller for a detail screen. The detail screen will receive the ID of the list
item and will access the data model in order to get the requested data.
For that matter, well add a detail view and controller as well as alter the master controller.

Changes
view/Master.controller.js
-

Modify the handleListItemPress method to receive the selected list item, the context
Use the App.controller method to with the ID of the requested screen (Detail) and the context to navigate to
that specific screen
Save your changes with Ctrl + S or by hitting the Save button

sap.ui.controller("mvc.view.Master", {
// implement controller methods here
handleListItemPress: function (evt) {


var context = evt.getSource().getBindingContext();


this.nav.to("Detail", context);
}
});

This exercise demonstrates why we need to wrap our web app into an App view & controller. The App controller
acts as navigation enabler, by providing the to and back methods for controllers. You could prototype web apps
even quicker if youd leave out the App wrapper. For example, you could implement all the views and methods for
the controllers into one single file. BUT, as we are focusing on MVC web apps, this App wrapper is necessary.
view/Detail.view.xml (ADD NEW FILE named view/Detail.view.xml)
-

Create a new file using the link on the left side navigation and enter the new name into the popup window:

Quickly Build Responsive MVC Web Apps using OpenUI5 and Plunker

Paste the view declaration below and save your changes

<mvc:View

controllerName="mvc.view.Detail"

xmlns="sap.m"

xmlns:mvc="sap.ui.core.mvc" >

<Page


title="- Detail Screen -"


showNavButton="true"


navButtonPress="handleNavButtonPress" >


<VBox>



<Text text="{SoId}" />



<Text text="{GrossAmount}" />



<Text text="{CreatedAt}" />



<Text text="{CreatedByBp}" />


</VBox>

</Page>
</mvc:View>

This detail view is as you may have recognized already defined using XML instead of JavaScript. Now, why are we
using XML here? As were focusing on the separation of MVC, the definition of views with XML has a key benefit: You
cant get confused and mix up business logic (usually inside the controller) with the view implementation because
XML doesnt allow you to define methods to be executed. It requires you to refer to a method, which should be
defined in the controller. Another aspect is that XML appears to be easier to read and write, as its a markup
language. The OpenUI5 community prefers this type of view definition and in fact, most of the code samples in the
documentation are using XML. Now this again, is very important for us, because we can build screen very quick by
copy&pasting the sample codes.
Inside of the page declaration, we are making use of the VBox UI element. VBox is a vertical aligned Flexbox element.
Its essentially a way to arrange all the elements inside of the VBox in a vertical order. You can imagine the as rows in
a table. Every UI element will be placed below the earlier ones. In our case, we will place four Text elements in a
vertical order.
Another important aspect is the declaration of showNavButton and the related navButtonPress event. While the
first one enables the visibility of a back button (see picture below), the latter one defines the function to be executed
when this button is pressed. In our case, we assign the function handleNavButtonPress as event handler. This
function will be implemented in the detail controller.

view/Detail.controller.js (ADD NEW FILE named view/Detail.controller.js)

-

Create a new file using the link on the left side navigation and enter the new name into the popup
window
Paste the view declaration below and save your changes

Quickly Build Responsive MVC Web Apps using OpenUI5 and Plunker

sap.ui.controller("mvc.view.Detail", {


handleNavButtonPress : function (evt) {


this.nav.back("Master");

}
});

As mentioned already, we will implement one function. It will use the method back, defined in the
App controller. This function takes the ID of a view and initiates the navigation to the specified view
(Master).

Further R eading:
-

Page: https://openui5.hana.ondemand.com/explored.html#/entity/sap.m.Page/samples
Text: https://openui5.hana.ondemand.com/explored.html#/entity/sap.m.Text/samples

Quickly Build Responsive MVC Web Apps using OpenUI5 and Plunker

Exercise 3 Add a Resource Model

Objective
Set proper titles to master and detail pages by implementing a resource model (aka i18n model, i18n stands for in
iternationalization).

Preview

Result
http://bit.ly/mvc-step3

Description
What were going to do in this exercise is 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 onetime 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 (ADD NEW FILE named i18n/messageBundle.properties)
-

Create a new file using the link on the left side navigation and enter the new name into the popup window
Paste the view declaration below and save your changes

MasterTitle=Sales Orders
DetailTitle=Order Details

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

jQuery.sap.declare("mvc.Component");

sap.ui.core.UIComponent.extend("mvc.Component", {


createContent : function() {



// create root view


...


});

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


...

view/Master.view.xml
Quickly Build Responsive MVC Web Apps using OpenUI5 and Plunker

Switch the title to point to the i18n model and there to the text MasterTitle
Save the modified Master.view.xml file

<mvc:View

controllerName="mvc.view.Master"

xmlns="sap.m"

xmlns:mvc="sap.ui.core.mvc" >

<Page


title="{i18n>MasterTitle}" >


...

</Page>
</mvc:View>

view/Detail.view.xml
-

Also adjust the title of the detail view

Save the modified Detail.view.xml file

<mvc:View

controllerName="mvc.view.Detail"

xmlns="sap.m"

xmlns:mvc="sap.ui.core.mvc" >

<Page


title="{i18n>DetailTitle}"


showNavButton="true"


navButtonPress="handleNavButtonPress" >


...

</Page>
</mvc:View>

Further R eading:
-

Data-Binding: https://openui5.hana.ondemand.com/#docs/guide/DataBinding.html
Localization: https://openui5.hana.ondemand.com/#docs/guide/I18NinAppDev.html

Quickly Build Responsive MVC Web Apps using OpenUI5 and Plunker

Exercise 4 Beautify list and details view

Objective
Make the UI of the master list and the detail page more beautiful by using the OpenUI5 controls
sap.m.ObjectListItem and sap.m.ObjectHeader.

Preview

Result
http://bit.ly/mvc-step4

Description
In this exercise 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.

Changes
view/Master.view.xml
-

Replace the StandardListItem control with the more powerful ObjectListItem

Attributes and statuses are defined by own objects

<mvc:View

controllerName="mvc.view.Master"

xmlns="sap.m"

xmlns:mvc="sap.ui.core.mvc" >

<Page


title="{i18n>MasterTitle}" >


<List



items="{/SalesOrderCollection}" >

Quickly Build Responsive MVC Web Apps using OpenUI5 and Plunker




<ObjectListItem




type="Active"




press="handleListItemPress"




title="{SoId}"




number="{GrossAmount}"




numberUnit="{CurrencyCode}" >




<attributes>





<ObjectAttribute text="{BuyerName}" />




</attributes>




<firstStatus>





<ObjectStatus text="{LifecycleStatus}" />




</firstStatus>



</ObjectListItem>


</List>

</Page>
</mvc:View>

view/Detail.view.xml
-

Replace the VBox holding 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

<mvc:View

controllerName="mvc.view.Detail"

xmlns="sap.m"

xmlns:mvc="sap.ui.core.mvc" >

<Page


title="{i18n>DetailTitle}"


showNavButton="true"


navButtonPress="handleNavButtonPress" >


<ObjectHeader



title="{SoId}"



number="{GrossAmount}"



numberUnit="{CurrencyCode}" >



<attributes>




<ObjectAttribute text="{BuyerName}" />




<ObjectAttribute text="{CreatedByBp}" />




<ObjectAttribute text="{CreatedAt}" />



</attributes>



<firstStatus>




<ObjectStatus text="{LifecycleStatus}" />



</firstStatus>


</ObjectHeader>

</Page>
</mvc:View>

Further R eading:
-

Working with lists: https://openui5.hana.ondemand.com/#docs/guide/List.html

ObjectHeader API: https://openui5.hana.ondemand.com/#docs/api/symbols/sap.m.ObjectHeader.html
ObjectListItem API: https://openui5.hana.ondemand.com/#docs/api/symbols/sap.m.ObjectListItem.html

Quickly Build Responsive MVC Web Apps using OpenUI5 and Plunker

Exercise 5 Add a search field

Objective
Implement a search on the master view (list overview) by using the UI element sap.m.SearchField

Preview

Result
http://bit.ly/mvc-step5

Description

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 search fields 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

<mvc:View

controllerName="mvc.view.Master"

xmlns="sap.m"

xmlns:mvc="sap.ui.core.mvc" >

<Page


title="{i18n>MasterTitle}" >


<subHeader>



<Bar>




<contentLeft>





<SearchField






search="handleSearch"






width="100%" >





</SearchField>




</contentLeft>



</Bar>

Quickly Build Responsive MVC Web Apps using OpenUI5 and Plunker





...

</subHeader>
<List

id="list"

items="{/SalesOrderCollection}" >

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

sap.ui.controller("mvc.view.Master", {
// implement controller methods here
handleListItemPress: function (evt) {


var context = evt.getSource().getBindingContext();


this.nav.to("Detail", context);

},

handleSearch : function (evt) {


// create model filter


var filters = [];


var query = evt.getParameter("query");


if (query && query.length > 0) {



var filter = new sap.ui.model.Filter("SoId",
sap.ui.model.FilterOperator.Contains, query);



filters.push(filter);


}


// update list binding


var list = this.getView().byId("list");


var binding = list.getBinding("items");


binding.filter(filters);

}
});

In case the search does not work, check whether you forgot to add the id for the List in Master.view.xml.

Further R eading:
-

SearchField: https://openui5.hana.ondemand.com/#docs/api/symbols/sap.m.SearchField.html
Model Filter: https://openui5.hana.ondemand.com/#docs/api/symbols/sap.ui.model.Filter.html

Quickly Build Responsive MVC Web Apps using OpenUI5 and Plunker

Exercise 6 Beautify the view for desktop

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.

Preview

Result
http://bit.ly/mvc-step6

Description
So far weve had 3 views in our application App, Master and Detail. App is our toplevel 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 smartphonesized 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 distribution 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

<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" >

<Page>

</Page>
</mvc:View>

view/App.view.js
-

Load the empty view instead of the detail view

sap.ui.jsview("mvc.view.App", {

...

createContent: function(oController) {

Quickly Build Responsive MVC Web Apps using OpenUI5 and Plunker


// to avoid scroll bars on desktop the root view must be set to block display
this.setDisplayBlock(true);

// create app
this.app = new sap.m.SplitApp();

// load the master page using an XML view
var master = sap.ui.xmlview("Master", "mvc.view.Master");
master.getController().nav = this.getController();
this.app.addPage(master, true);

// load the empty page
var empty = sap.ui.xmlview("Empty", "mvc.view.Empty");
this.app.addPage(empty, false);

// done
return this.app;
}
});

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 the app (which is built as
reusable component) could be embedded in another toplevel app, which already renders the shell.

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">

<title>OpenUI5 MVC Greenfield</title>

<script id="sap-ui-bootstrap"
...
</script>

<script>
new sap.m.Shell({
app : new sap.ui.core.ComponentContainer({
name : "mvc"
})
}).placeAt("content");
</script>

</head>

<body class="sapUiBody" id="content">
</body>

</html>

Further R eading:
-

SplitApp control: https://openui5.hana.ondemand.com/#docs/guide/SplitApp.html

SplitApp API: https://openui5.hana.ondemand.com/#docs/api/symbols/sap.m.SplitApp.html
Shell API: https://openui5.hana.ondemand.com/#docs/api/symbols/sap.m.Shell.html

Quickly Build Responsive MVC Web Apps using OpenUI5 and Plunker

Exercise 7 Add supplier info in detail view

Objective
Add an info tab to the detail page that shows a little form with data of the business partner of the sales order.

Preview

Result
http://bit.ly/mvc-step7

Description
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 UI5 bootstrap in the index.html too.

Changes
index.html

Load the additional UI library sap.ui.layout

<!DOCTYPE html>
<html>

...

<script id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m,sap.ui.layout"
data-sap-ui-resourceroots='{
"mvc": "./"
}'>
</script>

i18n/messageBundle.properties
-

Add more texts to the message bundle for the labels inside the tab content

MasterTitle=Sales Orders

Quickly Build Responsive MVC Web Apps using OpenUI5 and Plunker

DetailTitle=Order Details
PartnerAddress=Address
PartnerName=Name
PartnerCity=City
PartnerStreet=Street

view/Detail.view.xml
Set xml namespaces for the new package (sap.ui.layout.form, sap.ui.core)
Implement a sap.m.IconTabBar
Implement a sap.ui.layout.SimpleForm
Specify a relative binding to the Business Partner data

<mvc:View

controllerName="mvc.view.Detail"

xmlns="sap.m"

xmlns:core="sap.ui.core"

xmlns:form="sap.ui.layout.form"

xmlns:mvc="sap.ui.core.mvc" >

...


<ObjectHeader



...


</ObjectHeader>


<IconTabBar>



<items>




<IconTabFilter





icon="sap-icon://supplier">





<form:SimpleForm






binding="{BusinessPartner}"






minWidth="1024" >






<core:Title text="{i18n>PartnerAddress}" />






<Label text="{i18n>PartnerName}"/>






<Text text="{CompanyName}" />






<Label text="{i18n>PartnerCity}"/>






<Text text="{City}" />






<Label text="{i18n>PartnerStreet}"/>






<Text text="{Street}" />





</form:SimpleForm>




</IconTabFilter>



</items>


</IconTabBar>

</Page>
</mvc:View>

Further R eading:
-

Icon Tab Bar API: https://openui5.hana.ondemand.com/#docs/api/symbols/sap.m.IconTabBar.html

Simple Form API:
https://openui5.hana.ondemand.com/#docs/api/symbols/sap.ui.layout.form.SimpleForm.html

Quickly Build Responsive MVC Web Apps using OpenUI5 and Plunker

Exercise 8 Add an approval process

Objective
Add a button to the footer of the detail page to trigger the approval of a sales order. When the user presses the
button a confirmation dialog is shown. If the user confirms the dialog, a short success message is shown.
Note: To keep this exercise simple, we are not calling any server side function to actually approve the
order.

Preview

Result
http://bit.ly/mvc-step8

Description
To achieve the aim of this exercise, well be making small changes to lots of the files in the project.
We need to add a footer bar (a Bar control within the footer aggregation of the Page) to each of the views (Detail,
Empty and Master) to keep things visually nice and consistent.
Well add a Button control to the right side of the footer bar in the Detail view, and in the corresponding
controller well define the function to be called (handleApprove) when the Buttons press event is fired. Well
just simulate the approval process by displaying a MessageBox popup control and then showing a
MessageToast. For this well need to show some texts, so well add them to the same properties file we set up
earlier in relation to the resource model.

Changes
i18n/messageBundle.properties
-

Add more texts for the approve button and dialog

MasterTitle=Sales Orders
DetailTitle=Order Details
PartnerAddress=Address
PartnerName=Name
PartnerCity=City
PartnerStreet=Street
ApproveButtonText=Approve
ApproveDialogTitle=Approve Sales Order

Quickly Build Responsive MVC Web Apps using OpenUI5 and Plunker

ApproveDialogMsg=Do you want to approve this sales order now?

ApproveDialogSuccessMsg=The sales order has been approved

view/Detail.view.xml
-

Add a footer to the Detail page which holds the button to trigger the approval

<mvc:View

...


<IconTabBar>


...


</IconTabBar>


<footer>



<Bar>




<contentRight>





<Button






text="{i18n>ApproveButtonText}"






type="Accept"






icon="sap-icon://accept"






press="handleApprove" />




</contentRight>



</Bar>


</footer>

</Page>
</mvc:View>

view/Detail.controller.js
-

First we need to register one more class because it is not a control, but just a helper class (MessageBox)
On handling the approve event we first show a confirmation dialog (MessageBox)
If the user confirms we only show a success message (MessageToast). Calling a real service is not part of
this exercise.

jQuery.sap.require("sap.m.MessageBox");

sap.ui.controller("mvc.view.Detail", {


handleNavButtonPress : function (evt) {


this.nav.back("Master");

},

handleApprove : function (evt) {


// show confirmation dialog


var bundle = this.getView().getModel("i18n").getResourceBundle();


sap.m.MessageBox.confirm(



bundle.getText("ApproveDialogMsg"),



function (oAction) {




if (sap.m.MessageBox.Action.OK === oAction) {





// notify user





var successMsg = bundle.getText("ApproveDialogSuccessMsg");





sap.m.MessageToast.show(successMsg);





// TODO call proper service method and update model (not part of
this session)




}



},



bundle.getText("ApproveDialogTitle")


);

}
});

view/Empty.view.xml
-

We now need footers in all pages for symmetry

<mvc:View

Quickly Build Responsive MVC Web Apps using OpenUI5 and Plunker


xmlns="sap.m"

xmlns:mvc="sap.ui.core.mvc" >

<Page>


<footer>



<Bar>



</Bar>


</footer>

</Page>
</mvc:View>

view/Master.view.xml
We now need footers in all pages for symmetry
<mvc:View

...


<List



...


</List>


<footer>



<Bar>



</Bar>


</footer>

</Page>
</mvc:Viev>

Further R eading
-

Page API: https://openui5.hana.ondemand.com/#docs/api/symbols/sap.m.Page.html

Modularization and Dependency Management (require/declare modules):
https://openui5.hana.ondemand.com/#docs/guide/ModularizationConcept.html

Quickly Build Responsive MVC Web Apps using OpenUI5 and Plunker

Exercise 9 Add item table to detail view

Objective
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.

Preview

Result
http://bit.ly/mvc-step9

Description
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.
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.

Changes
i18n/messageBundle.properties
- Add more message texts
...
ApproveDialogMsg=Do you want to approve this sales order now?
ApproveDialogSuccessMsg=The sales order has been approved
LineItemTableHeader=Products
LineItemTitle=Product
LineItemDate=Delivery Date
LineItemQuantity=Quantity
LineItemPrice=Price

Quickly Build Responsive MVC Web Apps using OpenUI5 and Plunker

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

<mvc:View

...

<Page

title="{i18n>DetailTitle}"
class="sapUiFioriObjectPage"
showNavButton="true"
navButtonPress="handleNavButtonPress" >
<ObjectHeader
<IconTabBar>

...
</IconTabBar>
<Table

headerText="{i18n>LineItemTableHeader}"

items="{LineItems}" >

<columns>


<Column>



<header><Label text="{i18n>LineItemTitle}" /></header>


</Column>


<Column



minScreenWidth="Tablet"



demandPopin="true"



hAlign="Center" >



<header><Label text="{i18n>LineItemDate}" /></header>


</Column>


<Column



minScreenWidth="Tablet"



demandPopin="true"



hAlign="Center" >



<header><Label text="{i18n>LineItemQuantity}" /></header>


</Column>


<Column



hAlign="Right" >



<header><Label text="{i18n>LineItemPrice}" /></header>


</Column>

</columns>

<ColumnListItem>


<cells>



<ObjectIdentifier




title="{ProductId}" />



<Text




text="{DeliveryDate}" />



<Text




text="{Quantity}" />



<ObjectNumber




number="{GrossAmount}"




numberUnit="{CurrencyCode}" />


</cells>

</ColumnListItem>
</Table>
...

view/Detail.controller.js
-

When a line item is pressed, we navigate to the new line item page

jQuery.sap.require("sap.m.MessageBox");

sap.ui.controller("mvc.view.Detail", {


handleApprove : function (evt) {

Quickly Build Responsive MVC Web Apps using OpenUI5 and Plunker








});

},

...

handleLineItemPress : function (evt) {

var context = evt.getSource().getBindingContext();

this.nav.to("LineItem", context);
}

view/LineItem.view.xml (ADD NEW FILE named view/LineItem.view.xml, content should be as below)

-

For the sake of simplicity we'll just place an object header in the line item page.

<mvc:View

controllerName="mvc.view.LineItem"

xmlns="sap.m"

xmlns:mvc="sap.ui.core.mvc" >

<Page


id="page"


title="{i18n>LineItemTitle}"


showNavButton="true"


navButtonPress="handleNavBack" >


<footer>



<Bar>



</Bar>


</footer>


<content>



<ObjectHeader




title="{ProductId}"




number="{GrossAmount}"




numberUnit="{CurrencyCode}" >




<attributes>





<ObjectAttribute text="{DeliveryDate}" />





<ObjectAttribute text="{Quantity}" />




</attributes>



</ObjectHeader>


</content>

</Page>
</mvc:View>

view/LineItem.controller.js (ADD NEW FILE named view/LineItem.controller.js, content as below)

-

We only need to handle the back navigation to the Detail page

sap.ui.controller("mvc.view.LineItem", {

handleNavBack : function(evt) {


this.nav.back("Detail");

}
});

This step concludes the workshop. Nicely done!

Quickly Build Responsive MVC Web Apps using OpenUI5 and Plunker