Professional Documents
Culture Documents
Full Content of Sap Ui 5 With in Detail Views
Full Content of Sap Ui 5 With in Detail Views
● 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).
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"
objectName.property // person.age OR
objectName["property"] // person["age"] OR
Deleting Properties
The delete keyword deletes a property from an object
name = person.fullName();
JSON Model
- JSON: JavaScript Object Notation.
- 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);
- 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");
-
Translatable Texts
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.
- 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
Formatters
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
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
Project flow
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