You are on page 1of 15

● Basics

● SAPUI5 introduction
● ·​ ​SAPUI5 flow
o​ ​Index.html
o​ ​App
o​ ​Views &
o​ ​Controller
·​ ​File structures
·​ ​View methods
o​ ​init​()
o​ ​onBeforeRendering​()
o​ ​onAfterRendering​()
o​ ​onExit​()
·​ ​SAP controls
o​ ​Get element using ​sap.ui.getCore().byId()
o​ ​Controls USED
§​ ​Mentioned below

SAP Layouts
● ​BlockLayout
● ​Form & SimpleForm
● *​Grid
○ XL - 4*3 = 12
○ L - 3*4 = 12
○ M - 2*6 = 12
○ S - 1*12 = 12
○ *​Total columns is 12

○ Flex box
● Horizontal and vertical Layout
● Splitter
● Margin and paddings
○ All side marging
■ Tiny, Small, Medium and Large - sapUi​[Tiny/Small/Medium/Lage]​Margin
○ One side margin
■ Begin, End, Top and Bottom -
sapUi​[Tiny/Small/Medium/Lage][Being/End/Top/Bottom]​Margin
○ Two side margin
○ BetginEnd, TopBottom -
sapUi​[Tiny/Small/Medium/Lage][BeingEnd/TopBottom]​Margin
○ Padding
■ sapUiNoContentPadding, sapUiContentPadding,
sapUiResponsiveContentPadding

·​Object
● JavaScript, almost "everything" is an object

JavaScript Primitives
A ​primitive value​ is a value that has no properties or methods.
● are immutable (they are hardcoded and therefore cannot be
changed).
A ​primitive data type​ is data that has a primitive value.
JavaScript defines 5 types of primitive data types:

● string
● number
● boolean
● null
● Undefined

Objects are variables too. But objects can contain many values.

The values are written as ​name : value​ pairs (name and value separated by a
colon).

creates a new JavaScript object with four properties:

var​ person = {firstName:​"John"​, lastName:​"Doe"​, age:​50​,


eyeColor:​"blue"​};

person.firstName

var college = {
"ECE" : {
"404" : {
"name": "Sai",
"sec": "AA"
},
"407" : {
"name": "Ravi",
"sec": "AA"
}
},
"CSE" : {
"504" : {
"name": "Prasad",
"sec": "BB"
},
"507" : {
"name": "Ratan",
"sec": "BB"
}}
};

college.ECE["404"

Accessing the object properties

objectName.property // person.age OR

objectName["property"] // person["age"] OR

objectName[expression] // x = "age"; person[x]

JavaScript for...in Loop


The JavaScript ​for...in​ statement loops through the properties of an object.

var​ person = {fname:​"John"​, lname:​"Doe"​, age:​25​};

for​ (x ​in​ person) {


txt += person[x];
}

Adding New Properties


You can add new properties to an existing object by simply giving it a value.
person.nationality = ​"English"​;

Deleting Properties
The ​delete​ keyword deletes a property from an object

var​ person = {firstName:​"John"​, lastName:​"Doe"​, age:​50​,


eyeColor:​"blue"​};
delete​ person.age; ​// or delete person["age"];

JavaScript Object Methods


var​ ​person​ = {
firstName: ​"John"​,
lastName : ​"Doe"​,
id : ​5566​,
fullName : ​function​() {
​return​ ​this​.firstName + ​" "​ + ​this​.lastName;
}
};

Accessing Object Methods

name = person.fullName();

The ​this​ Keyword


In a function definition, ​this​ refers to the "owner" of the function.
In the example above, ​this​ is the ​person object​ that "owns" the ​fullName
function.
In other words, ​this.firstName​ means the ​firstName​ property of ​this object​.

Using Built-In Methods


EXPLORE yourself

JavaScript Accessors (Getters and Setters)

JavaScript Object Constructors


function​ Person(first, last, age, eye) {
​this​.firstName = first;
​this​.lastName = last;
​this​.age = age;
​this​.eyeColor = eye;
}

Sometimes we need a "​blueprint​" for creating many objects of the same


"type". The way to create an "object type", is to use an ​object constructor
function​.

​ ew​ Person(​"John"​, ​"Doe"​, ​50​, ​"blue"​);


var​ myFather = n
var​ myMother = n​ ew​ Person(​"Sally"​, ​"Rally"​, ​48​, ​"green"​);
XML

- stands for eXtensible Markup Language.


- XML language has no predefined tags
-

SAPUI5 XML view

xmlns="sap.m" - ​default library


xmlns:mvc="sap.ui.core.mvc" - ​mvc library
xmlns:core="sap.ui.core" - ​core library

JSON Model
- JSON: ​J​ava​S​cript ​O​bject ​N​otation.
- JSON is a syntax for storing and exchanging data.
- JSON is text, written with JavaScript object notation.
- Methods
- JSON.stringify
- JSON.parse
- Examples
var​ myJSON =​ ​'{"name":"John", "age":31, "city":"New York"}'​;
var​ myJSON = JSON.stringify(myObj);
var​ myObj = JSON.parse(myJSON);

- Creating new JSON model


- Var oData = ​{"name":"John", "age":31, "city":"New York"};
var oModel = new​ sap.ui.model.json.​JSONModel​();
oModel.setData(oData);
this.getView().setModel(oModel)
Data Binding

Types of Data binding :


https://sapui5.hana.ondemand.com/1.28.33/docs/guide/91f050cf6f4d1014b6dd926db0e91070.html

- Aggregation Binding
- Student lists/sets/Records
- List, combobox, selet
Students = [
{ name: “Sai”, Sec: “A”, phoneNo: “23423”, age: 25, gender: “M”},
{ name: “Ravi”, Sec: “A”, phoneNo: “21123”, age: 25, gender: “M”},
{ name: “Sai”, Sec: “A”, phoneNo: “23423”, age: 25, gender: “M”},
{ name: “Ravi”, Sec: “A”, phoneNo: “21123”, age: 25, gender: “M”},
]
- Element binding
- Single student/ one record
Students(0) = { name: “Sai”, Sec: “A”, phoneNo: “23423”, age: 25, gender:
“M”}

- Property binding :
- Only name property, sec property or age
- Eg
- oTextField​.​bindProperty​(​"value"​,​ ​"/company/name"​); OR
- oTextField​.​bindValue​(​"/company/name"​);
-

- Master detials page : https://experience.sap.com/fiori-design-web/master-detail-app/


- Where master list is Aggregation binding and detail is Element binding

Translatable Texts

- process of internationalization – in short ​i18n​ – is achieved in SAPUI5


- Create a folder by name i18n and create language specific i18n files
- i18n/i18n.properties - default language
- i18n_*.properties
- English language
- i18n_en.properties
- Danish
- I18n_da.properties
- French
- i18n_fr.properties
- Setting the resource model
- // set i18n model
​var​ i18nModel ​=​ ​new​ ​sap.ui.model.resource.​ResourceModel​({
bundleName ​:​ ​"sap.ui.demo.walkthrough.i18n.i18n"
​});
​this​.​setModel​(​i18nModel​,​ ​"i18n"​);
- Using in XML view
- <Label text=”{i18n>name}”

- Check current language


- sap.ui.getCore().getConfiguration().getLanguage()
- Set the new language
- sap.ui.getCore().getConfiguration().setLanguage( "da" ); //update the language
- Language codes
- https://help.sap.com/doc/saphelp_nw73ehp1/7.31.19/en-US/c1/ae563cd2ad4f0ce10
000000a11402f/content.htm?no_cache=true
- sap.ui.getCore().getModel("i18n").getResourceBundle().getText("allUpdated") //to get the
value from the resource bundle using the key

Nested Views
- View inside view

Important notes
- ComponentContainer​ which loads the Component.js file to application
- Component.js​ :
- Important file which will have the configurations of routing.
- Component.js file which contains the configuration for router. After
configuration and declaring routes and targets we have to initialize() the
router in init() function
- index.html bootstraping we are declaring ​data-sap-ui-resourceRoutes
- data-sap-ui-resourceroots='{ "sap.ui.iyc": "./" }
-

oData
Northwind services - Sample service for oData
- https://services.odata.org/V2/Northwind/Northwind.svc/
- Example : ​https://embed.plnkr.co/plunk/e7KS48

Routing
What is SAPUI5 router?

It’s an SAPUI5 API that is available in sap.m.routing.Router library. This API helps in
navigation between pages in application, adding hash value to URL and to transfer data
between views.

We can declare SAPUI5 router in index page, descriptor file and component file. In most
of the applications we declare router configurations in component or descriptor file.

What is the advantage of using SAPUI5 router?

● Navigation will be easy.


● Custom URL’s for the application pages.
● Bookmarking the pages and search helps is allowed.
● Displaying ​Not Found​ and ​Error​ pages is possible.
● Since routing configurations are global it improves reusability.
● Passing data between views while navigating is made easy.

Routing path example: https://JNTUA.com/BITS/ECE/Students/404

- Notes
- Component.js​ : Important file which will have the configurations of
routing.
-
- Reference
- http://inkyourcode.com/how-to-navigate-between-two-views-using-routing/
- https://embed.plnkr.co/plunk/wp6yes
- http://inkyourcode.com/router-configuration-parameters-manifest/
- Index + component(manifest) + App
- Routing - example
Home : patterns = ""
: listing all the students

Details: patterns = "student/{studentId}" or "student/{param1}/{param2}"


: showing the details of the specific student using the studentId
- Methods
- History​.getInstance().getPreviousHash()
- It will return the previously visited Hash(paths)
- window.history.go(-​1​)
- Javascript function to return to previous page
- router.navTo(​"home"​, {}, ​true)
- Navigation to home page

Router alternative controls


- Split App
- Split container

Extending the controls


Extra plugins

Formatters

oTextField.bindProperty("value", "/company/title", function(sValue) {


return sValue && sValue.toUpperCase();
});

new sap.ui.commons.TextField({
value: {
path:"/company/revenue",
formatter: function(fValue) {
if (fValue) {
return "> " + Math.floor(fValue/1000000) + "M";
}
return "0";
}
}
Using Formatter
<ObjectAttribute text="{ path: 'Status', formatter: '.formatStatus' }"/>
In Formatter.js file
formatStatusText: function(Status){
return (Status === "E") ? "Error" : "success";
}
- Ref​ :
https://stackoverflow.com/questions/55237157/sapui5-formatter-param
eter-value-is-always-null/55242411#55242411
Using Expression binding
- <ObjectAttribute text="{= ${Status} === "E" ? 'Error' : 'Success' }"/>
- Ref​ :
https://sapui5.hana.ondemand.com/#/topic/daf6852a04b44d118963968a1239d2c0
.html

Factory function

- https://stackoverflow.com/questions/55022874/how-can-i-get-json-as-function-pa
rameter-in-sapui5-m-table/55026179#55026179

Component.js and manifest.json


- Example
- https://embed.plnkr.co/plunk/e7KS48

Device APIs
- https://sapui5.hana.ondemand.com/sdk/#/api/sap.ui.Device

Standard coding

Datatypes
- Integer
- Declare variable with prefix ​i
- iIndex = 0, iCount = 0
- Float
- fSum = 12.4
- String
- sName = “sai”, sMale = “Male”
- Boolean
- bIsValid, bNumber, bFloat
- Array
- aItems = [ “a”, “b”, “c”];
- Object
- oItmes = { a: a, b: b, c: c }

Camel case
bValidInput, getSum

oFirstNameLbl, oNumberInpt

Factory​ ​function
-

Fragments:
- Reusable components, like template
- College student details like structure
- Fragments are light-weight UI parts (UI subtrees) which can be reused ​but do not have any
controller​.
- Sample
- <core:FragmentDefinition
​xmlns​=​"sap.m"
​xmlns:core​=​"sap.ui.core"​ ​>
​<Dialog
​id​=​"helloDialog"
​title​=​"Hello"​>
​</Dialog>
</core:FragmentDefinition>
-

​Icons

SAPUI5 Bootstrapping​ - process​ ​of loading and initializing SAPUI5 is called bootstrapping
<​script​ ​src​=​"resources/sap-ui-core.js"
id​=​"sap-ui-bootstrap"
data-sap-ui-libs​=​"sap.m"

data-sap-ui-theme​=​"sap_bluecrystal">
</​script​>

Questions
-​ ​Javascript

o​ ​Libraries
o​ ​Namespace
o​ ​Object
o​ ​jQuery
o​ ​How to get the element using ID and CLASS
o​ ​"use strict"
o​ ​Variable, constants
-​ ​MVC

-​ ​JSON

-​ ​XML

-​ ​HTML

o​ ​meta data
o​ ​placeholder

-​ ​SPA

o​ ​Single Page Application


-​ ​CSS

o​ ​margin & padding

var emp = [];


ASSIGNMENTS
1. List and go through the basic controls used in SAPUI5
○ App, Page, Input, List, Datepicker, TimePicker, Radio
button, Select, Label, checkbox, Multi Input, Text area,
Combobox, Responsive Table, bar,
2. Form
3. Explore all the layouts
4. Create complete UI page

Project flow

With Component and manifest.json


- Index.html -> component.js -> manifest.json[can load initialView, model, i18n etc.. ] ->
initialView mentioned in the manifest.json

Alternative way to load


- Index.html -> initialView -> initialView helps to load other views like for mobile or desktop
or other views as per the requirement

interview
- What is SAPui5 and flow, UI5 current version
- Namesapce, jquery, JSON, MVC, SPA(single page application)
- Bootstraping in ui5
- Component.js, manifest.json file usage
- Routing and methods used
- Binding type, types of views
- oData and JSON models
- I18n
- Fragments, formatter, expression binding, factory function

You might also like