- SAP Managed Tags
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.
- In this blog, we see, how we can create a UI5 application project and its contents.
- This blog is part of below parent blog:
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:
- 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:
- For e.g. Eclipse Juno Service Release 2
- 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'
- Open Eclipse -> go to Menu 'File' -> select 'New' -> 'other'
- In New Wizard pop-up, select 'SAPUI5 Application Development' -> 'Application Project' ->click on button 'Next'
- Enter Project name -> select Target device as 'Mobile' -> select 'create initial view' its optional, it well create view on page -> click button 'Next'
- 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
- click button 'Finish' Button
- Once project gets created, we can see it in left panel explorer
- Here, we will re-structure created SAPUI5 project by adding few new folders/files/views under 'WebContent' as below,
- 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
Details of SAPUI5 Application Project Structure:
- The WebContent folder contains all the folders, including Component-preload.js, Component.js, index.html, view, model, css, i18n etc..
- 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;
}
- Next is the i18n folder, which is used for Globalization purpose. It includes i18n files for particular languages.
- 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"
}
]
}
- 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 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;
- Component-preload.js file is mainly used for optimization purpose.
- 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="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>
- 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", //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.
- The view folder, which the views, both xml & javascript files.
- 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
- 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);
},
});
- 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>
- 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:
- pressNextPage(): which will be invoked on press event of button 'NextPage', to navigate to "Details" view
- pressGetMaterial(): which will be invoked on press event of button 'GetMaterial', to fill list control with data
- 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);
}
});
- 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);
},
});
- The WebContent folder contains all the folders, including Component-preload.js, Component.js, index.html, view, model, css, i18n etc..
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
'
- Thus we have created one UI5 application sample which is accessing data from model json file enclosed within project itself.
44 Comments
Bluesky| User | Count |
|---|---|
| 9 | |
| 6 | |
| 6 | |
| 5 | |
| 5 | |
| 5 | |
| 4 | |
| 4 | |
| 4 | |
| 3 |
