Sapui5 Codejam v2

Requirement
#1: Get free trial account

Objective
Open up the SAP HANA Cloud Platform (HCP) website and register for the free, timely unrestricted SAP HANA
Cloud Platform trial account. To finalize the registration, you will have to active your account - which requires you to
access your emails.
Time To Complete (TTC): 5 min

Steps
Follow the instructions in this tutorial: http://go.sap.com/developer/tutorials/hcp-create-trial-account.html.
Do NOT continue with the Next Steps of the tutorial web page. They will guide you into a different learning
path as anticipated by this SAP CodeJam.
Requirement #2: Open SAP Web IDE

Objective
Open up the SAP Web IDE from the Subscriptions menus in the SAP HCP Cockpit. You are advised to bookmark
the SAP Web IDE given the fact that this will be the main tool for development efforts.
TTC: 5 min
Steps
1.
2.
3.
4.
Open your HCP console (https://account.hanatrial.ondemand.com)

Click on the Services tab.
Click on the SAP Web IDE box.
Click the "Open SAP Web IDE" link to open the Web IDE. (Bookmark this page, you will use it again.)
Suggestion: Download Chrome

Description
The Chrome browser, from Google, has deveoper tools that make it easy to build web pages. We will use the
Chrome tools in this tuturial.
SAP CodeJam: Building SAPUI5 Applications using SAP WebIDE
Exercise 0 Generate a new project

Objective
Use the SAP Web IDE to generate a new empty project.
TTC: 10 15 min
Steps
1.
2.
3.
4.
Choose File --> New --> Project from Template

Choose SAP UI5 Application, then click Next
Name your project "First UI5 Project", and click Next
View type is XML, and view name is View 1, click Finish
Further Reading:
-
Folder Structure: https://sapui5.hana.ondemand.com/#docs/guide/003f755d46d34dd1bbce9ffe08c8d46a.html
Exercise 1 Access a new destination

Objective
Our app will access a real OData service, the so called Northwind data-service. Therefore, a new
destination within the SAP HCP Cockpit will be created and the app descriptor of the generated project
will be updated.
TTC: 5 10 min
Description
Due to cross-site scripting restrictions in JavaScript, we cannot connect to a remote URL from our local app. Instead
we need to make sure our requests are sent via some proxy.
A proxy is simply a local script that connects to the remote server and returns the response to our app. In a
productive scenario this would of course be a direct connection. We use the proxy to access the Northwind test
service from OData.org.
First, we need to configure a destination for a remote service in SAP Web IDE. When using such a destination,
requests to our service will be proxied for us automatically. The URL in the app descriptor requires a corresponding
destination configuration.
Steps
1.
Follow steps 1 - 4 in this tutorial:

http://go.sap.com/developer/tutorials/hcp-create-destination.html.
Do NOT continue with the Next Steps of the tutorial web page. They will guide you into a different learning
path as anticipated by this SAP CodeJam.
2.
Modify the app descriptor files for SAPUI5 and SAP HCP as described below to accomplish automatic
instantiation of the OData Model. The automatic instantiation is available since SAPUI v1.30.
Changes
webapp/manifest.json
-
Within the sap.app section, add a new section for dataSoruces. The section will include our main service
(Northwind) and a path to the API endpoint. With this approach, there is no need for you to instantiate the OData
model in the controller anymore.
Save your changes with Ctrl + S or by hitting the Save button
{
"_version": "1.1.0",
"sap.app": {
. . .
"sourceTemplate": {
"id": "ui5template.basicSAPUI5ApplicationProject",
"version": "1.30.3"
},
"dataSources": {
"mainService": {
"uri": "/destinations/Northwind/V3/Northwind/Northwind.svc",
"type": "OData"
}
}
},
. . .
"sap.ui5": {
. . .
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "HelloWorld.i18n.i18n"
}
},
"" : {
"dataSource": "mainService"
}
}
}
neo-app.json
-
To ensure the app descriptor of SAPUI5 redirects the mainService url to the SAP HCP destination, your
project descriptor requires a new route definition
. . .
{
"path": "/test-resources",
"target": {
"type": "service",
"name": "sapui5",
"entryPath": "/test-resources"
},
"description": "SAPUI5 Test Resources"
},
{
"path": "/destinations/Northwind",
"target": {
"type": "destination",
"name": "Northwind"
},
"description": "Northwind Destination"
}
],
"sendWelcomeFileRedirect": true
}
Now run your application (use the RUN button at the top of the editor screen).
Next, open your Developer Tools to see if a HTTP request was made to the Northwind service. We suggest you to
use Chrome, in which the developer tools are accessible through the menu View > Developer > Developer
Tools. As soon as your application was loaded, switch to the Network tab of the Developer Tools and re-load
the application. You will see your requests and responses listed. You can now use the Filter text area to show
only requests to Northwind. You should see one request and the associated response, as depicted in the screen
below.
Further Reading:
-
SAP HCP Application Descriptor file (neo-app.json):

https://help.hana.ondemand.com/help/frameset.htm?aed1ffa3f3e741b3a4573c9e475aa2a4.html
SAPUI5 Application Descriptor file (manifest.json):
https://sapui5.netweaver.ondemand.com/docs/guide/be0cf40f61184b358b5faedaec98b2da.html
Chrome DevTools Overview: https://developer.chrome.com/devtools
Exercise 2 Add a list to the view

Objective
Display a list on the generated View1 and create a mock function for a press event in the associated
controller file. Press events will also get triggered when a user on a mobile device performs a tap on the
specific list element.
TTC: 5 min
Preview
Description
What were going to do in this exercise is to add a list to first XML view (View1.xml). The list will display data from
the data model, that got filled with data from the Northwind data service. Every list element will represent a product
entity in the data model. Thanks to the data binding, SAPUI5 takes the path of the aggregation and automatically
creates as many list items as the aggregation includes (all the product entities).
For now, we will just display the product names, more specifically the attribute ProductName. 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. To fix a design-flaw of the template, we will also quickly
update the CSS styling.
Changes
webapp/view/View1.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 product name (ProductName)
Every list item will be assigned a press event handler. This handler will be implemented in the associated
controller
<core:View controllerName="HelloWorld.controller.View1" xmlns:core="sap.ui.core"

xmlns:html="http://www.w3.org/1999/xhtml"
xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
<Page title="{i18n>title}">
<content>
<List
items="{/Products}" >
<StandardListItem
type="Active"
press="handleListItemPress"
title="{ProductName}" />
</List>
</content>
</Page>
</core:View>
webapp/css/style.css
Set the section overflow parameters to initial in order to avoid hiding the content of the Page in the XML view.
.sapMMessageDialog {
width: 18rem;
}
.sapMPage>section {
overflow-x: initial !important;
overflow-y: initial !important;
}
webapp/controller/View1.controller.js
-
Add the event handler function for the press event, as just defined in the XML view
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";
return Controller.extend("HelloWorld.controller.View1", {
handleListItemPress: function (evt) {
// show in a popup which list element was pressed
alert("Pressed: " + evt.getSource().getBindingContext());
}
});
});
Now re-run the app and try pressing on a list item. A popup will appear. Check out the text in the popup window.
Further Reading:
-
Data Binding:
https://sapui5.netweaver.ondemand.com/#docs/guide/68b9644a253741e8a4b9e4279a35c247.html
List: https://sapui5.netweaver.ondemand.com/#docs/guide/295e44b2d0144318bcb7bdd56bfa5189.html
StandardListItem:
https://sapui5.netweaver.ondemand.com/explored.html#/entity/sap.m.StandardListItem/properties
Exercise 3 Enable routing

Objective
In order to enable navigating from one view to another, our app needs to be enabled for routing. With
the newest version of SAPUI5, routing configurations are stored within the app descriptor called
manifest.json.
TTC: 10 - 15 min
Description
You have to add a routing configuration to the descriptor file and initialize the router instance within the component
definition (webapp/Component.js).
Changes
webapp/view/App.view.xml
Create a new view for the wrapper of your web app in the webapp/view folder (App.view.xml). The only content
of the App view is the App instance. This app will contain the different views, injected as pages into the App
instance
<mvc:View
controllerName="HelloWorld.controller.App"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
displayBlock="true">
<App id="app"/>
</mvc:View>
webapp/controller/App.controller.js
Create a new controller for the wrapper of your web app in the folder webapp/controller (App.controller.js)
sap.ui.define([
"use strict";
return Controller.extend("HelloWorld.controller.App", {
});
});
Modify the app descriptor to re-define the root view. Instead of the View1, it will be our new wrapper view App
Add the routing configuration listed below. The configuration contains a standard route to the View1
"sap.ui5": {
"_version": "1.1.0",
"rootView": {
"viewName": "HelloWorld.view.App",
"type": "XML"
},
. . .
"models": {
. . .
},
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"viewPath": "HelloWorld.view",
"controlId": "app",
"controlAggregation": "pages",
"transition": "slide"
},
"routes": [{
"pattern": "",
"name": "appHome",
"target": "home"
}],
"targets": {
"home": {
"viewName": "View1",
"viewLevel" : 1
}
}
}
}
}
This exercise demonstrates why we need to wrap our web app into an App view & controller. The App controller
acts as navigation enabler because it contains the app instance.
webapp/Component.js
Paste the router instantiation into the init method of the component
. . .
return UIComponent.extend("HelloWorld.Component", {
metadata: {
manifest: "json"
},
/**
* . . .
*/
init: function() {
// call the base component's init function
UIComponent.prototype.init.apply(this, arguments);
// set the device model
this.setModel(models.createDeviceModel(), "device");
// create the views based on the url/hash
this.getRouter().initialize();
},
. . .
webapp/css/style.css
Reset the style to ensure a unified web experience across devices
.spacerTop {
margin-top: 2rem;
}
.sap-tablet .sapMDialog,
.sap-desktop .sapMDialog {
min-width: 18rem;
}
.sapMMessageDialog {
width: 18rem;
}
Further Reading:
-
Routing and Navigation:

https://sapui5.netweaver.ondemand.com/docs/guide/3d18f20bd2294228acb6910d8e8a5fb5.html
Exercise 4 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).
TTC: 10 15 min
Preview
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 View1 view and controller.
Changes
-
Change the type of the list item to navigation


<content>
<List
<StandardListItem
type="Navigation"
title="{ProductName}" />
</List>
</content>
</Page>
</core:View>
webapp/view/View1.controller.js
Modify the handleListItemPress method to receive the ProductID of the selected list item
Use the router method navTo with the selected ProductID to navigate to the Detail view through the appDetail
navigation target
sap.ui.define([
"use strict";
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
var selectedProductId =
evt.getSource().getBindingContext().getProperty("ProductID");
oRouter.navTo("appDetail", {
productId: selectedProductId
});
}
});
});
-
Add a new navigation pattern which will get receive a mandatory parameter for the ProductId
Add a new target for the Detail view and increase the viewLevel by one.
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"viewPath": "HelloWorld.view",
"controlId": "app",
"controlAggregation": "pages",
"transition": "slide"
},
"routes": [{
"pattern": "",
"name": "appHome",
"target": "home"
}, {
"pattern": "detail/{productId}",
"name": "appDetail",
"target": "detail"
}],
"targets": {
"home": {
"viewName": "View1",
"viewLevel" : 1
},
"detail": {
"viewName": "Detail",
"viewLevel" : 2
}
}
}
}
}
webapp/view/Detail.view.xml
Create a new file by selecting and right-clicking on the view folder

Choose New > File from the context menu and name the new file Detail.view.xml
Paste the view definition below and save your changes
<mvc:View
controllerName="HelloWorld.controller.Detail"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc" >
<Page
title="{i18n>DetailTitle}"
showNavButton="true"
navButtonPress="handleNavButtonPress" >
<VBox>
<Text text="{ProductName}" />
<Text text="{UnitPrice}" />
<Text text="{QuantityPerUnit}" />
<Text text="{UnitsInStock}" />
</VBox>
</Page>
</mvc:View>
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 SAPUI5
community prefers this type of view definition and in fact, most of the code samples in the documentation are using
XML.
Inside of the page declaration, we are making use of the VBox UI component. 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 it 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, 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.
webapp/controller/Detail.controller.js
-
Create a new file by selecting and right-clicking on the controller folder

Choose New > File from the context menu and name the new file Detail.controller.js
sap.ui.define([
"use strict";
return Controller.extend("HelloWorld.controller.Detail", {
onInit: function () {
oRouter.getRoute("appDetail").attachMatched(this._onRouteMatched, this);
},
_onRouteMatched : function (oEvent) {
var oArgs, oView;
oArgs = oEvent.getParameter("arguments");
oView = this.getView();
oView.bindElement({
path : "/Products(" + oArgs.productId + ")",
events : {
dataRequested: function (oEvent) {
oView.setBusy(true);
},
dataReceived: function (oEvent) {
oView.setBusy(false);
}
}
});
},
handleNavButtonPress : function (evt) {
oRouter.navTo("appHome");
}
});
});
As mentioned already, we will implement one function to handle the back button press event. This method will use
the navTo method of the router and initiate the navigation via the appHome route. The onInit method is more
complex. The method expects a navigation parameter for the ProductId. It hooks into the appDetail route and
executes the _onRouteMatched method to extract the ProductId and set the data binding for the Detail view.
Further Reading:
-
Routing with mandatory parameters:

http://help.sap.com/saphelp_nw75/helpdata/en/f9/6d2522a5ca4382a274ae3c6d002ca0/content.htm
VBox: https://sapui5.hana.ondemand.com/docs/api/symbols/sap.m.VBox.html
Exercise 5 Update internalization (i18n)

Objective
Set proper titles to View1 and Detail page by updating the resource model (aka i18n model).
TTC: <5 min

Preview
Changes
webapp/i18n/i18n.properties
-
Update the placeholder with proper page titles
title=Product Overview
appTitle = App Title
appDescription=App Description
# Detail View
DetailTitle = Product Details
Further Reading:
-
Data-Binding:
http://help.sap.de/saphelp_uiaddon10/helpdata/en/91/f0f3cd6f4d1014b6dd926db0e910
70/content.htm
Internationalization (i18n):
http://help.sap.com/saphelp_hanaplatform/helpdata/en/b6/d1a9511f994b3a86e2f34a32
e40a34/content.htm
Exercise 6 Improve list and detail view

Objective
Make the UI of the list on the View1 and the product details on the Detail page more appealing by using the
SAPUI5 controls sap.m.ObjectListItem and sap.m.ObjectHeader.
TTC: 5 - 10 min
Preview
Description
In this exercise we will replace a couple of controls one in the Vie1 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 products in a more appealing 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 one more property to the i18n model (currency).
Changes
-
Replace the StandardListItem control with the more powerful ObjectListItem

<content>
<List
<ObjectListItem
type="Navigation"
title="{ProductName}"
number="{= ((${UnitPrice} * 100) / 100).toFixed(2) }"
numberUnit="{i18n>currency}" >
<attributes>
<ObjectAttribute text="{QuantityPerUnit}" />
</attributes>
<firstStatus>
<ObjectStatus
text="{= ${Discontinued}? 'Discontinued' :
'Available' }"
state="{= ${Discontinued}? 'Error' : 'Success' }"

/>
</firstStatus>
</ObjectListItem>
</List>
</content>
</Page>
</core:View>
Please take a few minutes to evaliuate the text and state property ot the ObjectStatus declaration. We are using
Expression Binding to define a more readable UI. Check out this slides to get yourself familiar with this new SAPUI5
feature.
Add a placeholder for the currency and set it to EUR
currency=EUR
# Detail View
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)
<mvc:View
xmlns="sap.m"
<Page
<ObjectHeader
title="{ProductName}"
number="{= ((${UnitPrice} * 100) / 100).toFixed(2) }"
numberUnit="{i18n>currency}" >
<statuses>
<ObjectStatus
text="{= ${Discontinued}? 'Discontinued' : 'Available' }"
state="{= ${Discontinued}? 'Error' : 'Success' }" />
<ObjectStatus
text="{= (${UnitsOnOrder} > 0)? 'Ordered' : '' }"
state="Success" />
</statuses>
<attributes>
<ObjectAttribute text="Product #{ProductID}" />
<ObjectAttribute text="Category #{CategoryID}" />
<ObjectAttribute text="Supplier #{SupplierID}" />
</attributes>
</ObjectHeader>
</Page>
</mvc:View>
Further Reading:
-
Expression Binding: http://anz.mygraebe.de/new-ui5/#7

List: https://sapui5.hana.ondemand.com/explored.html#/entity/sap.m.List/samples
ObjectHeader:
https://sapui5.hana.ondemand.com/explored.html#/entity/sap.m.ObjectHeader/samples
ObjectListItem:
https://sapui5.hana.ondemand.com/explored.html#/entity/sap.m.ObjectListItem/sam
ples
Exercise 7 Add a search field

Objective
Implement a search in View1 by using the UI element sap.m.SearchField
TTC: 5 min
Preview
Description
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
-
The search field is put into a bar that is placed in the sub header of the page
Do not forget to add an id to the list in order to access the list later on in the controller

<subHeader>
<Bar>
<contentLeft>
<SearchField
search="handleSearch" >
</SearchField>
</contentLeft>
</Bar>
</subHeader>
<content>
<List
id="list"
. . .
webapp/view/View1.controller.js
-
Implement a new handler function in the View1 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.define([
"use strict";
var selectedProductId =
evt.getSource().getBindingContext().getProperty("ProductID");
oRouter.navTo("appDetail", {
productId: selectedProductId
});
},
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("ProductName",
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 View1.view.xml.
Further Reading:
-
SearchField:
https://sapui5.hana.ondemand.com/explored.html#/entity/sap.m.SearchField/samples
Model Filter: https://sapui5.hana.ondemand.com/docs/api/symbols/sap.ui.model.Filter.html
Exercise 8 Add an order activity

Objective
Add a button to the footer of the Detail page to trigger the order activity of a listed product. 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 executed the order.
TTC: 5 min
Preview
Description
We need to add a footer bar (a Bar control within the footer aggregation of the Page) to our Detail view.
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 (handleOrder) when the Buttons press event is fired. Well just
simulate the order process by displaying a MessageBox popup control and then showing a MessageToast. For
this, well need to show some texts. Hence, well add placeholders into the i18n.properties file we set up earlier.
Changes
-
Add more placeholder for the order features
currency=EUR
# Detail View
OrderButtonText=Order
OrderDialogTitle=Order Product
OrderDialogMsg=Do you want to order this product now?

OrderDialogSuccessMsg=The product has been ordered
-
Add a footer to the Detail page which holds the button to trigger the order activity
<mvc:View
xmlns="sap.m"
<Page
<ObjectHeader
. . .
</ObjectHeader>
<footer>
<Bar>
<contentRight>
<Button
text="{i18n>OrderButtonText}"
type="Accept"
icon="sap-icon://accept"
press="handleOrder" />
</contentRight>
</Bar>
</footer>
</Page>
</mvc:View>
webapp/controller/Detail.controller.js
-
First, we need to register two more class on top of our Detail controller. This makes them accessible in
out controller definition without the need to instantiate them
On handling the order event, we first show a confirmation dialog (MessageBox)
If the user confirms, we only show a success message (MessageToast).
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/m/MessageBox",
"sap/m/MessageToast"
], function(Controller, MessageBox, MessageToast) {
"use strict";
return Controller.extend("HelloWorld.controller.Detail", {
. . .
handleNavButtonPress : function (evt) {
. . .
},
handleOrder : function (evt) {
// show confirmation dialog
var bundle = this.getView().getModel("i18n").getResourceBundle();
MessageBox.confirm(
bundle.getText("OrderDialogMsg"),
function (oAction) {
if (MessageBox.Action.OK === oAction) {
// notify user
var successMsg = bundle.getText("OrderDialogSuccessMsg");
MessageToast.show(successMsg);
// TODO call proper service method and update model (not
part of this session)
}
},
bundle.getText("OrderDialogTitle")
);
}
});
});
Nicely done! This step concludes the guided part of the CodeJam. Now, take on some of the additional challenges on
the next page!
Further Reading
-
Footer: https://sapui5.hana.ondemand.com/explored.html#/sample/sap.m.sample.Page/preview
MessageBox: https://sapui5.hana.ondemand.com/docs/api/symbols/sap.m.MessageBox.html
MessageToast: https://sapui5.hana.ondemand.com/docs/api/symbols/sap.m.MessageToast.html
Additional Challenges
1.
2.
3.
4.
5.
6.
Deploy your application to the SAP HANA Cloud Platform

Run your application in the Fiori Launchpad Sandbox
Add a placeholder for product images and integrate the image into the Detail view
Add a placeholder for product images and integrate the image into the List in the View1 view
Use Expression Binding to allow ordering of a product only if it is not discontinued
Enhance the Approval MessageBox with a request to enter the UnitPrice. Only if the entered UnitPrice is
correct, allow the user to click on OK.
7. Group the List Items in the list in View1 by the CategoryID of the product
8. Enable lazy loading for the list in View1
9. Enhance the handleSearch method in the controller of View1 to enable searching for the Category,
UnitePrice and QuantityPerUnit
10. Add a second language file for the language of your choice to the app. The new file would need to follow a
specific filename convention and needs to be placed in the i18n folder
11. Add 3 simple unit tests using the One Page Acceptance (OPA5) API as documented here
12. Improve the Detail view to show details about the Category and the Supplier. This exercise requires rethinking the navigation pattern to enable binding different data to different UI components

Sapui5 Codejam v2

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Sapui5 Codejam v2

Caricato da

Copyright:

Formati disponibili

Requirement

#1: Get free trial account

Time To Complete (TTC): 5 min

Requirement #2: Open SAP Web IDE

Open your HCP console (https://account.hanatrial.ondemand.com)

Suggestion: Download Chrome

SAP CodeJam: Building SAPUI5 Applications using SAP WebIDE

Exercise 0 Generate a new project

Choose File --> New --> Project from Template

Folder Structure: https://sapui5.hana.ondemand.com/#docs/guide/003f755d46d34dd1bbce9ffe08c8d46a.html

SAP CodeJam: Building SAPUI5 Applications using SAP WebIDE

Exercise 1 Access a new destination

Follow steps 1 - 4 in this tutorial:

SAP CodeJam: Building SAPUI5 Applications using SAP WebIDE

SAP CodeJam: Building SAPUI5 Applications using SAP WebIDE

SAP HCP Application Descriptor file (neo-app.json):

SAP CodeJam: Building SAPUI5 Applications using SAP WebIDE

Exercise 2 Add a list to the view

Within the Page declaration, add a new list element

<core:View controllerName="HelloWorld.controller.View1" xmlns:core="sap.ui.core"

SAP CodeJam: Building SAPUI5 Applications using SAP WebIDE

SAP CodeJam: Building SAPUI5 Applications using SAP WebIDE

Exercise 3 Enable routing

SAP CodeJam: Building SAPUI5 Applications using SAP WebIDE

SAP CodeJam: Building SAPUI5 Applications using SAP WebIDE

Routing and Navigation:

SAP CodeJam: Building SAPUI5 Applications using SAP WebIDE

Exercise 4 Display list element details

Change the type of the list item to navigation

<core:View controllerName="HelloWorld.controller.View1" xmlns:core="sap.ui.core"

SAP CodeJam: Building SAPUI5 Applications using SAP WebIDE

Create a new file by selecting and right-clicking on the view folder

Paste the view definition below and save your changes

Create a new file by selecting and right-clicking on the controller folder

SAP CodeJam: Building SAPUI5 Applications using SAP WebIDE

Routing with mandatory parameters:

SAP CodeJam: Building SAPUI5 Applications using SAP WebIDE

Exercise 5 Update internalization (i18n)

TTC: <5 min

Update the placeholder with proper page titles

SAP CodeJam: Building SAPUI5 Applications using SAP WebIDE

Exercise 6 Improve list and detail view

Replace the StandardListItem control with the more powerful ObjectListItem

<core:View controllerName="HelloWorld.controller.View1" xmlns:core="sap.ui.core"

SAP CodeJam: Building SAPUI5 Applications using SAP WebIDE

state="{= ${Discontinued}? 'Error' : 'Success' }"

Add a placeholder for the currency and set it to EUR

Expression Binding: http://anz.mygraebe.de/new-ui5/#7

SAP CodeJam: Building SAPUI5 Applications using SAP WebIDE

SAP CodeJam: Building SAPUI5 Applications using SAP WebIDE

Exercise 7 Add a search field

<core:View controllerName="HelloWorld.controller.View1" xmlns:core="sap.ui.core"

SAP CodeJam: Building SAPUI5 Applications using SAP WebIDE

Access the query as a parameter of the event object

SAP CodeJam: Building SAPUI5 Applications using SAP WebIDE

Exercise 8 Add an order activity

Add more placeholder for the order features

SAP CodeJam: Building SAPUI5 Applications using SAP WebIDE

OrderDialogMsg=Do you want to order this product now?

SAP CodeJam: Building SAPUI5 Applications using SAP WebIDE

SAP CodeJam: Building SAPUI5 Applications using SAP WebIDE

Deploy your application to the SAP HANA Cloud Platform

SAP CodeJam: Building SAPUI5 Applications using SAP WebIDE