8/27/2018 Create a Fiori app using Eclipse | SAP Blogs

Products
Products Industries
Industries Support
Support Training
Training Community
Community Developer
Developer Partner
Partner

About
About

 
Home / Community / Blogs + Actions

Create a Fiori app using Eclipse

November 19, 2017 | 9,342 Views |

Dilip Kumar KrishnaDeo Pandey

more by this author

SAP Fiori

share
0 share tweet share

Follow RSS

Overview
SAP introduced an HTML5-based development toolkit, SAPUI5, which
encourages one consistent user experience.

https://blogs.sap.com/2017/11/19/sap-fiori-ui5-application-creation/ 1/22
8/27/2018 Create a Fiori app using Eclipse | SAP Blogs

Apps built using SAPUI5 are responsive across browsers and devices –
they run on smartphones, tablets, and desktops.
UI5 is a client UI technology based on JavaScript, CSS and HTML5.
Servers come into play for deploying your applications, storing the
SAPUI5 libraries, and connecting to a database.
SAPUI5 supports the Model View Controller (MVC) concept.
Model: This is responsible for managing the application data in
the database/backend.
View: This is responsible for defining the user interface to users.
When a user sends a requests from his device, the view is
responsible for data view as per the request submitted.
Controller: is used to control the data and view events as per
user interaction by updating the view and model.

In this blog, we see, how we can create a UI5 application project and its
contents.
This blog is part of below parent blog:
SAP Fiori – Custom App Implementation

Pre-requisites
Eclipse having SAP UI5 Development Tool kit
For e.g. Eclipse Juno Service Release 2

To make it compatible with SAP UI5 App follow below steps:

https://blogs.sap.com/2017/11/19/sap-fiori-ui5-application-creation/ 2/22
8/27/2018 Create a Fiori app using Eclipse | SAP Blogs

Open Eclipse -> go to Menu item ‘Help’ -> ‘Install New

Software’ -> type url
‘https://tools.hana.ondemand.com/juno’
Select ‘UI Development Toolkit for HTML5’ -> install
Or refer below link:
“https://tools.hana.ondemand.com/”
SAP/Non-SAP’s data access medium
For e.g. In case of SAP, we require RFC
And in case of Non-SAP, web-service or other medium

Steps to create a UI5 application in Eclipse

In this SAP-UI5 application example, data is referred from a ‘JSON model
le’

1. Open Eclipse -> go to Menu ‘File’ -> select ‘New’ -> ‘other’

2. In New Wizard pop-up, select ‘SAPUI5 Application Development’ ->

‘Application Project’ ->click on button ‘Next’

https://blogs.sap.com/2017/11/19/sap-fiori-ui5-application-creation/ 3/22
8/27/2018 Create a Fiori app using Eclipse | SAP Blogs

3. Enter Project name -> select Target device as ‘Mobile’ -> select ‘create
initial view’ its optional, it well create view on page -> click button ‘Next’

4. Enter view name -> here select Development Paradigm as ‘Xml’

Here page view control will be defined in ‘Xml’
and its controller logic will be handled in JavaScript page

https://blogs.sap.com/2017/11/19/sap-fiori-ui5-application-creation/ 4/22
8/27/2018 Create a Fiori app using Eclipse | SAP Blogs

click button ‘Finish’ Button

5. Once project gets created, we can see it in left panel explorer

6. Here, we will re-structure created SAPUI5 project by adding few new

folders/files/views under ‘WebContent’ as below,

https://blogs.sap.com/2017/11/19/sap-fiori-ui5-application-creation/ 5/22
8/27/2018 Create a Fiori app using Eclipse | SAP Blogs

When we run this UI5-App in Eclipse, its flow is as below:

‘index.html’ -> ‘Component.js’ -> ‘App’ view -> ‘Master’
view -> ‘Details’ view
Post-deployment of this UI5-App in SAP-Fiori (Front-End) server,
its flow is as below:
‘Component.js’ -> ‘App’ view -> ‘Master’ view -> ‘Details’
view
Post creation of this UI5-App, we deploy all files/folders of
‘WebContent’ folder
7. Details of SAPUI5 Application Project Structure:
1. The WebContent folder contains all the folders, including
Component-preload.js, Component.js, index.html, view, model,
css, i18n etc..

https://blogs.sap.com/2017/11/19/sap-fiori-ui5-application-creation/ 6/22
8/27/2018 Create a Fiori app using Eclipse | SAP Blogs

2. The CSS folder, which include customizing the sap ui5

application. Add any css files in this folder.

/* Make Text Bold */

.Textbold{
font-weight: bold;
font-size: small;
color: red;
}

3. Next is the i18n folder, which is used for Globalization purpose. It

includes i18n files for particular languages.

4. model folder consists of the local data for testing

‘sampleData.json’ file.

{
"listItems" : [
{
"title" : "Sales Reports",
"MATNR" : "000000000000202031",
"info" : "Overdue"
},
{
"title" : "Purchase Reports",
"MATNR" : "000000000000202033",
"info" : "Overdue",
"infoState" : "Error"
},
{
"title" : "Financial Reports",
"MATNR" : "000000000000202036",
"info" : "4 day ago"
}

https://blogs.sap.com/2017/11/19/sap-fiori-ui5-application-creation/ 7/22
8/27/2018 Create a Fiori app using Eclipse | SAP Blogs

]
}

5. view -> utils folder consists the ‘connectivity.js’ file, it is used to

store OdataService path details.

var hostPort = "";

// this setting is required to test app with odataSer

//hostPort = "proxy/http/<host>:<port>";

//Odata Service Path

var oDataPath = "/sap/opu/odata/sap/ZTEST_ODATA_SRV/"

// Odata Service Url

var serviceUrl= hostPort + oDataPath;

6. Component-preload.js file is mainly used for optimization

purpose.
7. Index.html file serves the same purpose here, we declare the
shell here. And all the library files are loaded in index.html, it
also calls ‘Component.js’

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="I
<meta http-equiv='Content-Type' content='text
<script
id="sap-ui-bootstrap"
src="resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"

https://blogs.sap.com/2017/11/19/sap-fiori-ui5-application-creation/ 8/22
8/27/2018 Create a Fiori app using Eclipse | SAP Blogs

data-sap-ui-libs="sap.m, sap.ui.layout"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-resourceroots='{
"ZTEST_APP": "./"
}' >
</script>

<!-- Calling Componet-name of Compone

<script>
new sap.m.Shell({
app : new sap.ui.core.ComponentContai
name : "ZTEST_APP"
})
}).placeAt("content");
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>

8. Component.js file is used here for declaring the models, (odata,

json, or i18n). Moreover, here the router initialization is also
done.

jQuery.sap.declare("ZTEST_APP.Component");
sap.ui.core.UIComponent.extend("ZTEST_APP.Component",

metadata : {
stereotype : "component",
"abstract" : true,
version : "1.0",
library : "ZTEST_APP", //requir
includes : [ "css/Styles.css" ], //CSS st
dependencies: { //external depen
libs : ["sap.m",
"sap.ui.commons",
"sap.ui.ux3",
"sap.ui.table",
"sap.ui.layout" ], //the lib
library : "sap.ui.core", //what librar
},
},

createContent : function() {
// create root view

https://blogs.sap.com/2017/11/19/sap-fiori-ui5-application-creation/ 9/22
8/27/2018 Create a Fiori app using Eclipse | SAP Blogs

var oView = sap.ui.view({

id : "app",
viewName : "ZTEST_APP.view.App",
type : "JS",
viewData : { component : this }
});

// set device model

var deviceModel = new sap.ui.model.json.JSONM
isPhone : jQuery.device.is.phone,
listMode : (jQuery.device.is.phone) ?
listItemType: (jQuery.device.is.phone) ?
});
deviceModel.setDefaultBindingMode("OneWay");
oView.setModel(deviceModel, "device");

// done
return oView;
}
});

As we can see, this Component.js file has created/referred

App view in “createContent” function.
9. The view folder, which the views, both xml & javascript files.

10. Example:
In this UI5 App example, application will have a main page
which includes two buttons and one list control.
On click of 1st button, list get filled with
model/sapleData.json details
On click of 2nd button, navigation to 2nd page (Details) is
been done from 1st Main (Master) page
From 2nd page, back navigation to 1st page is also
handled.
Following are the details of each page
11. View ‘App’

https://blogs.sap.com/2017/11/19/sap-fiori-ui5-application-creation/ 10/22
8/27/2018 Create a Fiori app using Eclipse | SAP Blogs

Here ‘Development Paradigm‘ is JavaScript that means

both view and controller are in javascript
View: ‘App.view.js’
Here, we can see in code, ‘Master’ view has been loaded
& Empty page reference has been given.

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

getControllerName: function () {
return "ZTEST_APP.view.App";
},

createContent: function (oController) {

// to avoid scroll bars on desktop the root v

this.setDisplayBlock(true);

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

// load the master page

var master = sap.ui.xmlview("Master", "ZTEST_
master.getController().nav = this.getControll
this.app.addPage(master, true);

// load the empty page

var empty = sap.ui.xmlview("Empty", "ZTEST_AP
this.app.addPage(empty, false);

return this.app;
}
});

Controller: ‘App.controller.js’
Here, two navigation functions are been defined,
to() function for Next page navigation
back() function is for back page navigation

sap.ui.controller("ZTEST_APP.view.App", {

/**
* Navigates to another page
* @param {string} pageId The id of the next page
* @param {sap.ui.model.Context} context The data
*/
to : function (pageId, context) {

var app = this.getView().app;

// load page on demand

var master = ("Master" === pageId);
if (app.getPage(pageId, master) === null) {
var page = sap.ui.view({
id : pageId,
https://blogs.sap.com/2017/11/19/sap-fiori-ui5-application-creation/ 11/22
8/27/2018 Create a Fiori app using Eclipse | SAP Blogs
viewName: "ZTEST_APP.view." + pageId,
type : "XML"
});
page.getController().nav = this;
app.addPage(page, master);
jQuery.sap.log.info("app controller > loa
}

// show the page

app.to(pageId);

// set data context on the page

if (context) {
var page = app.getPage(pageId);
page.setBindingContext(context);
}
},

/**
* Navigates back to a previous page
* @param {string} pageId The id of the next page
*/
back : function (pageId) {
this.getView().app.backToPage(pageId);
},

});

12. View ‘Empty’

This is xml view, which will be used only in Desktop Mode
to overlap ‘Details’ page while navigating back to ‘Master’
page
View: ‘Empty.view.xml‘

<core:View
xmlns="sap.m"
xmlns:core="sap.ui.core" >
<Page>
<footer>
<Bar>
</Bar>
</footer>
</Page>
</core:View>

13. View ‘Master’

Here we create Two button and one List control
Button ‘GetMaterial’: on click of this button fill List control
with sampleData.json items
Button ‘NextPage’: on click of this button, navigate to
‘Details’ view

https://blogs.sap.com/2017/11/19/sap-fiori-ui5-application-creation/ 12/22
8/27/2018 Create a Fiori app using Eclipse | SAP Blogs

List control: where items will be filled on button

‘GetMaterial’ event
View: ‘Master.view.xml’

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

xmlns="sap.m" controllerName="ZTEST_APP.view.Mast
<Page title="App Example">
<content>
<Bar>
<contentLeft>
<Button text="GetMaterial" press=
</contentLeft>
<contentRight>
<Button text="NextPage" press="pr
</contentRight>
</Bar>
<List id="idList1" mode="{device>/listMod
<StandardListItem title="{MATNR}" />
</List>
</content>
<footer>
<Bar>
</Bar>
</footer>
</Page>
</core:View>

Controller: ‘Master.controller.js’
here we can see three functions:
1. pressNextPage(): which will be invoked on press
event of button ‘NextPage’, to navigate to “Details”
view
2. pressGetMaterial(): which will be invoked on press
event of button ‘GetMaterial’, to fill list control with
data
3. call_MoldeFile(): which will be invoked from
function pressGetMaterial(), to read
‘sampleData.json’ file and fill fill list control with data

jQuery.sap.require("sap.m.MessageBox");
sap.ui.controller("ZTEST_APP.view.Master", {

pressNextPage: function(evt) {
//Navigation to detail page
var context = evt.getSource().getBindingConte
this.nav.to("Details", context); //to() is
},

pressGetMaterial : function(evt) {
this.call_ModelFile();
},
https://blogs.sap.com/2017/11/19/sap-fiori-ui5-application-creation/ 13/22
8/27/2018 Create a Fiori app using Eclipse | SAP Blogs

call_ModelFile: function(){

//Calling model json file for data re

var sample = $.sap.getModulePath("ZTEST_APP",
var oModel = new sap.ui.model.json.JSONModel(

//Set JSONModeloutput to ListControl

var list = this.getView().byId("idList1");
list.setModel(oModel);
}
});

14. View ‘Details’

Here Navigation is shown.
Back navigation button will take to 1st page, and in case
of desktop mode, Center page gets overlapped with
‘Empty’ view
View: ‘Details.view.xml’

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

xmlns="sap.m" controllerName="ZTEST_APP.view.Deta
<Page title="Detail Page" showNavButton="true" na
<content>
<Label text="Welcome to Detail Page !!" d
</content>
<footer>
<Bar>
</Bar>
</footer>
</Page>
</core:View>

Controller: ‘Details.controller.js’ 
This has on back navigation function event backPress(),
which will be invoked on press button of ‘back’ icon in
‘Details’ page

sap.ui.controller("ZTEST_APP.view.Details", {

backPress : function (event) {

var context = event.getSource().getBindingCon
if (!jQuery.device.is.phone){
this.nav.back("Empty", context);
}
this.nav.back("Master", context);
},

});

https://blogs.sap.com/2017/11/19/sap-fiori-ui5-application-creation/ 14/22
8/27/2018 Create a Fiori app using Eclipse | SAP Blogs

8. Testing of SAPUI5 app in Eclipse

To test UI5 application in eclipse, in left pane project -> select
‘index.html’ -> right click -> ‘Run As’ -> ‘Web App Preview ‘

Next ‘Index.html opened as below screen

Perform button event like ‘GetMaterial’ and ‘NextPage’ to see the

results

https://blogs.sap.com/2017/11/19/sap-fiori-ui5-application-creation/ 15/22
8/27/2018 Create a Fiori app using Eclipse | SAP Blogs

‘
9. Thus we have created one UI5 application sample which is accessing
data from model json file enclosed within project itself.

Alert Moderator

11 Comments
You must be Logged on to comment or reply to a post.

Former Member

December 8, 2017 at 2:16 pm

Dear Dilip

Your series blogs are instrumental for beginners, very useful and informative.

I habituated to develop UI using drag and drop in webdynpro Java and ABAP,  in fact it
was developer friendly. I feel managing  MVC using the core code is a bit tough job

https://blogs.sap.com/2017/11/19/sap-fiori-ui5-application-creation/ 16/22
8/27/2018 Create a Fiori app using Eclipse | SAP Blogs

now, are there any tools to develop UI5  apps using drag and drop features.

Regards

Murali

Dilip Kumar KrishnaDev Pandey Post author

December 26, 2017 at 6:25 am

Dear  Former Member,

Sorry for late reply…’Merry Christmas’ !!

In my information, no tool available with drag and drop features for UI5

App development.

Thanks & Regards…

Dilip Pandey

Naoto Amari

February 23, 2018 at 7:13 pm

Hello! readind deeper i found your courses ! is any problem if i use eclipe oxygen ? it’s
ok if i create the folder utils in the same level as  model ???

Dilip Kumar KrishnaDev Pandey Post author

March 22, 2018 at 11:09 am

Dear Naoto,

Sorry for delayed response, I was too much busy in my current project….

1. I have not used eclipe oxygen for Fiori App till now. I can only ensure
you for eclipse-Juno/Mars/Neon which I’ve used while app development.

https://blogs.sap.com/2017/11/19/sap-fiori-ui5-application-creation/ 17/22
8/27/2018 Create a Fiori app using Eclipse | SAP Blogs

2. You can create utils folder in same level as model, and then while
referring in .js pages, please change respective paths too like as below:
jQuery.sap.require(“FioriAppName.utils.connectivity”);
instead of
jQuery.sap.require(“FioriAppName.view.utils.connectivity”)
3. For 2nd point, I recommend you to follow view/utils only

Thanks & Regards

Dilip.

Former Member

March 10, 2018 at 2:15 pm

Hi Dilip, I have any problem with testing this app. – step 8

HTTP ERROR 404

Problem accessing /ZTEST_APP/WEB-INF/index.html. Reason:

Not Found

Can you help me?

I am beginner with eclipse and FIORI, sorry…

Thanks Tomas M.

Dilip Kumar KrishnaDev Pandey Post author

March 22, 2018 at 11:03 am

Dear Tomas,

Sorry for delayed response, I was too much busy in my current project….

Please correct your Fiori App Project Structure, it should be like below:

https://blogs.sap.com/2017/11/19/sap-fiori-ui5-application-creation/ 18/22
8/27/2018 Create a Fiori app using Eclipse | SAP Blogs

i.e. index.html never resides in WEB-IN

Thanks & Regards

Dilip…

Former Member

March 26, 2018 at 11:05 am

Hi Dilip, many thanks for your answer. I corrected my project structure and working
ne, but… I created, registered and activated OData service in SAP. I try tested with
TCODE /n/iwfnd/gw_client and I think that is OK. But from Eclipse I see problem:

Can you help me again? Problem with user and password? Thanks from Czech Rep.
TomasM

https://blogs.sap.com/2017/11/19/sap-fiori-ui5-application-creation/ 19/22
8/27/2018 Create a Fiori app using Eclipse | SAP Blogs

Dilip Kumar KrishnaDeo Pandey Post author

March 26, 2018 at 12:37 pm

Dear Former Member,

While accessing from Eclipse, give below pre x , that will resolve Cross
domain issue.

proxy/http/<host>:<port>/<ui5 path>
instead of current path

But do not forget to remove pre x while uploading app in Fiori server.

Thanks and Regards

Dilip.

Former Member

March 27, 2018 at 11:31 am

Hi Dilip, now is OK………………………………………………… Many thanks… TomasM

https://blogs.sap.com/2017/11/19/sap-fiori-ui5-application-creation/ 20/22
8/27/2018 Create a Fiori app using Eclipse | SAP Blogs

Nelson Kharat

August 22, 2018 at 7:08 am

Hi Dilip,

Very nice blog.

I could not nd the le Component-preload.js in the project and it is stating 400 error
when debugged with F12.

Please let me the know the code to be added into the le.

Thanks,
Nelson

Dilip Kumar KrishnaDeo Pandey Post author

August 23, 2018 at 7:14 am

Hi Nelson,

Thanks for the comments.

About ” Component-preload.js “, this we basically to improve runtime

performance and to modularize UI5 App’s code/functions.

As above was a basic test app example, so I haven’t used it but kept it
blank to avoid 404 (not found) error found during debug.

Regarding same nice explanation can be found from below blog by

Mr. HP Seitz

https://blogs.sap.com/2015/04/27/performance-improvement-with-
component-preloadjs/

Thanks & Regards,

Dilip

https://blogs.sap.com/2017/11/19/sap-fiori-ui5-application-creation/ 21/22
8/27/2018 Create a Fiori app using Eclipse | SAP Blogs

Share & Follow

Privacy Terms of Use Legal Disclosure Copyright Trademark Cookie Preferences Sitemap Newsletter

https://blogs.sap.com/2017/11/19/sap-fiori-ui5-application-creation/ 22/22