SAP Fiori, Eclipse, SAP Certifications

Create a Fiori app using Eclipse

Overview

  • SAP introduced an HTML5-based development toolkit, SAPUI5, which encourages one consistent user experience.
  • 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.

SAP Fiori, Eclipse, SAP Certifications

Pre-requisites

  • Eclipse having SAP UI5 Development Tool kit
    • For e.g. Eclipse Juno Service Release 2

SAP Fiori, Eclipse, SAP Certifications

  • To make it compatible with SAP UI5 App follow below steps:
    • 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 file’

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

SAP Fiori, Eclipse, SAP Certifications

2. In New Wizard pop-up, select ‘SAPUI5 Application Development’ -> ‘Application Project’ ->click on button ‘Next’

SAP Fiori, Eclipse, SAP Certifications

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

SAP Fiori, Eclipse, SAP Certifications

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

SAP Fiori, Eclipse, SAP Certifications

  • click button ‘Finish’ Button

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

SAP Fiori, Eclipse, SAP Certifications

6. Here, we will re-structure created SAPUI5 project by adding few new folders/files/views under ‘WebContent’ as below,

SAP Fiori, Eclipse, SAP Certifications

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

SAP Fiori, Eclipse, SAP Certifications

2. The CSS folder, which include customizing the sap ui5 application. Add any css files in this folder.

SAP Fiori, Eclipse, SAP Certifications

/* 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.

SAP Fiori, Eclipse, SAP Certifications

4. model folder consists of the local data for testing ‘sampleData.json’ file.

SAP Fiori, Eclipse, SAP Certifications

{
“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”
}
]
}

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

SAP Fiori, Eclipse, SAP Certifications

var hostPort = “”;

// this setting is required to test app with odataService in Eclipse environment
//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’

SAP Fiori, Eclipse, SAP Certifications

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta http-equiv=’Content-Type’ content=’text/html;charset=UTF-8’/>
<script
id=”sap-ui-bootstrap”
src=”resources/sap-ui-core.js”
data-sap-ui-theme=”sap_bluecrystal”
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 Component.js of UI5 –>
<script>
new sap.m.Shell({
app : new sap.ui.core.ComponentContainer({
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.

SAP Fiori, Eclipse, SAP Certifications

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”, //required for CSS reference
includes : [ “css/Styles.css” ], //CSS style reference
dependencies: { //external dependencies
libs : [“sap.m”,
“sap.ui.commons”,
“sap.ui.ux3”,
“sap.ui.table”,
“sap.ui.layout” ], //the libraries that component will be using
library : “sap.ui.core”, //what library belongs your component to
},
},

createContent : function() {
// create root view
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.JSONModel({
isPhone : jQuery.device.is.phone,
listMode : (jQuery.device.is.phone) ? “None” : “SingleSelectMaster”,
listItemType: (jQuery.device.is.phone) ? “Active” : “Inactive”
});
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.

SAP Fiori, Eclipse, SAP Certifications

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’

  • 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 view must be set to block display
this.setDisplayBlock(true);

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

// load the master page
var master = sap.ui.xmlview(“Master”, “ZTEST_APP.view.Master”);
master.getController().nav = this.getController();
this.app.addPage(master, true);

// load the empty page
var empty = sap.ui.xmlview(“Empty”, “ZTEST_APP.view.Empty”);
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 context to be applied to the next page (optional)
*/
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,
viewName: “ZTEST_APP.view.” + pageId,
type : “XML”
});
page.getController().nav = this;
app.addPage(page, master);
jQuery.sap.log.info(“app controller > loaded page: ” + pageId);
}

// 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
  • 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.core.mvc”
xmlns=”sap.m” controllerName=”ZTEST_APP.view.Master” xmlns:html=”http://www.w3.org/1999/xhtml”>
<Page title=”App Example”>
<content>
<Bar>
<contentLeft>
<Button text=”GetMaterial” press=”pressGetMaterial” type=”Accept” />
</contentLeft>
<contentRight>
<Button text=”NextPage” press=”pressNextPage” type=”Emphasized” />
</contentRight>
</Bar>
<List id=”idList1″ mode=”{device>/listMode}” items=”{/listItems}”>
<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().getBindingContext();
this.nav.to(“Details”, context); //to() is defined in ‘App.controller.js’
},

pressGetMaterial : function(evt) {
this.call_ModelFile();
},

call_ModelFile: function(){

//Calling model json file for data reference
var sample = $.sap.getModulePath(“ZTEST_APP”, “/model/sampleData.json”);
var oModel = new sap.ui.model.json.JSONModel(sample);

//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.core.mvc”
xmlns=”sap.m” controllerName=”ZTEST_APP.view.Details” xmlns:html=”http://www.w3.org/1999/xhtml”>
<Page title=”Detail Page” showNavButton=”true” navButtonPress=”backPress”>
<content>
<Label text=”Welcome to Detail Page !!” design=”Bold” />
</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().getBindingContext();
if (!jQuery.device.is.phone){
this.nav.back(“Empty”, context);
}
this.nav.back(“Master”, context);
},

});

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 ‘

SAP Fiori, Eclipse, SAP Certifications

  • Next ‘Index.html opened as below screen

SAP Fiori, Eclipse, SAP Certifications

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

SAP Fiori, Eclipse, SAP Certifications

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

Leave a Reply

Your email address will not be published. Required fields are marked *