Open UI5
Open UI5
Steps
1.
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
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
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
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
<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.
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
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
-
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
-
<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
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
-
<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:
-
Quickly Build Responsive MVC Web Apps using OpenUI5 and Plunker
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 ,
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
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)
-
view/App.view.js
-
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:
-
Quickly Build Responsive MVC Web Apps using OpenUI5 and Plunker
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
<!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:
-
Quickly Build Responsive MVC Web Apps using OpenUI5 and Plunker
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
-
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
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
-
<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
-
Quickly Build Responsive MVC Web Apps using OpenUI5 and Plunker
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
});
},
...
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>
sap.ui.controller("mvc.view.LineItem",
{
handleNavBack
:
function(evt)
{
this.nav.back("Detail");
}
});
Quickly Build Responsive MVC Web Apps using OpenUI5 and Plunker