document.
getElementById(“id”) - this whole thing gives the object of the element
Javascript is a programming language which browser understands.
Fast response time
Types:--
1. Client-side = js which gets executed in browser.
2. Server-side = runs on the server,usually used to prepare results from DB or DB lookups.
JS and Java are completely different languages,both in concept and design.
JS was invented by Brenden Eich in 1995.
JS will apply in 3 ways
1. Inline = at element level = oneventName = “js code”
2. Internal = use <script></script>
3. External= <link text=”text/css” rel=”stylesheet” href=”somestylingfile.css”></link>
rel=relation
JS has two standard objects(js is case sensitive) (when we use in console)
document- this is the object of html document
window- this is the object of browser window (show the current browser details)
JS can change HTML elements content and attributes
JS can change CSS
Validate the input
Using js code we call server request also
We can dynamically add more html elements to the page
Output:
1. window.alert() or alert()
2. document.write()
3. Console.log
4. innerHTML
F12= internet development toolbar or console
Event = activity performed by user on browser page
Function in JS
function name()
{
alert(“hello”);
(or)
document.write(“hello”);
(or)
console.log(“hello”);--- for developer to check the o/p on console
}
Variables is used to store the values
Var variable_name= “values”;
1. Var a = 10
2. typeof(a)
‘number’
At console----- a= document.getElementById(“password”)
Now a is object of password field
a.id
“Password”
A.value = “supersonic”
Value of password field is changed as supersonic
this is the object of current class
A.onfocus = fuction () { this.style.backgroundcolor = “yellow”}
Creating an object
Var a = {empid:1, empname:”sai”,salary :1000,curcode: “inr”}
a is object
4 attributes and its values
Array in JS
Var name=[“val1”,”val2”];
Var aaa=[“1”,”sai”,”2”,”raghu”,]
aaa[0] =1
Aaa[aaa.length-1] is raghu
If we combine the concept of array and object, it becomes json
Array of objects [{},{},{},{}]
Var myjson =[]
var obj = {empId=10,empname =”sai”}
myjson.push(obj)
myjson contains object values
Var allnames =””
for(i=0,i(myjson.length,i++){allnames=myjson[i].ename+ “,”+allnames}
Creating heading tag dynamically
<div id=”prospose”></div>
Var objproposal=document.getElementById(“propose”)
Var newElement= document.GetElementById(“h1”)
newElement.innerrtext=”hi ,this is sai”
objProposal.appendChild(newElement);
External javascript:
Make the script and save it as .js extension
Use at script as <script type=”text/javascript” src=”lifesaver.js”> </script>
Jquery
1. It is a javascript library
Why jquery
Write less and do more
1. How to load the js file which contains jquery functions
2. How to consume jquery.
1..a.reference the js file
1.b. Download the reference
2. We use $ symbol is use to consume jquery eg: $(“selector”)
Selector = #id,
.classname,
tagname
document.getElementById(“id”) in jquery we write $(“id”)
MVC approach
MOdel-View-Control
A design pattern to create end to end application.
Using MVC we make our application ready for future changes
Maximum reusability and extensibility
view= screen what user will see (JS,XML,HTML,JSON)
model= data of the application(JSON, XML, Resource,Odata)
controller= contain the business logic (js)
A view will always consist of 2 methods
1. createContent() = is responsible to create the ui elemenet of the entire view
2. getControllerName() = about the controller of this view, many view can share one
controller
Index.html
Code to create the view object in index.html and place it in HTML
View.js(view contains declaration of ui elements which we have on the screen)
Create UI element objects in view
Sap.ui.core.mvc.viewtype.js
sap.ui.getCore().byId(“txt”).setValue(“sai krupakar”)
Name will comes in input box --- while using in console
Xml
eXtensible Markup Language
The main purpose of the xml was to exchange the data between multiple technologies. Unlike
HTML, in XML we will have our own tag names
Json is a array of objects
Where we can NAVIGATE between two views
Main view,view 1 , view 2
Shell control is manily used to combine multiple views in a single screen
Sap.ui.ux3 control library is used to create shell control
Aggregation
When we want to reuse the functionality of a class, we create a inheritance.so base
class attributes in functions will be inherited to the children
Association:
Relationship between two objects
Divided 2 parts
1.aggregation: loose binding- both objects can work independently
2. Composition - tight binding- objects cannot function independently
Eg: laboratory, free lance laboratory in college
Cardinality: 1:1ww , 1:n
MODEL:
Object of DATA of our application.
Json, Xml, Resourse, Odata
Json,xml,resource are client-side model
Odata is server side model
Client side model:
(you will keep all the data will be loaded into browser.)
Suitable for small amount of fixed data
Resource model is used for internationalization ,multi language support
Server side model:larger amount coming from server
Actual data model for create,update,read,delete
How your ui controls will receive the data what u have in these models
View
Small ip field for to store the data for user name
Model
Inside having some Attribute
Or variable( to store the data)
//1.create object of model class
sap.ui.model.<model class>.<model type>
//2. set or load data into model
//3. Set the model to
(At application level,view level,control level)
At application level means all views will consume the data
View level- only eact view will consume the data
Control exact controller function will consume
For app lvl sap.ui.getCore().setModel(oModel object name);
At view lvl sap.ui.getCore().getView(" view id").setModel();
At control lvl sap.ui.getCore().byId("id of the control").setModel();
At console to check
sap.ui.getCore().getModel().getProperty("/prodStr")
sap.ui.getCore().getModel().getProperty("/prodTab")[0]
Or
sap.ui.getCore().getModel().getProperty("/prodTab/1")]
Then binding process
var oProd = new sap.ui.commons.TextField("txt1").bindValue("/prodStr/prodName");
var oPrice = new sap.ui.commons.TextField("txt2",{ value: "{/prodStr/price}" });
var oCurr = new
sap.ui.commons.TextField("txt3").bindProperty("value","/prodStr/currencyCode");
Default binding for
Json model - 2 way
Xml model - 2 way
Odata - 1 way
Resource model - 1 time
//(Bind directly property name
Bind property method)
What is json
Array of objects
Ex1(structure and tabel)
{ “prodStr”:{“prodName”:”laptop”,”price”:”500”},
“prodTab”:[ {“prodName”: “laptop”,”price”:”500”},
{“prodName”: “laptop”,”price”:”500”},
{“prodName”: “laptop”,”price”:”500”},
{“prodName”: “laptop”,”price”:”500”}
]
}
How to validate json
Website: www.jsonlint.com
Column
1. Title of the column
2. Templet = control what type of ui element we want the column to be
3. Along with the template property we need to also do the binding (from which property of
JSON , it will pick up values)
var oCol1= new sap.ui.table.Column (“col1”,{
label: new sap.ui.commons.Label({ text: “Employee Id”}),
Template: new sap.ui.commons.TextView().bindText(“superman>empId”)
});
var oCol1= new sap.ui.table.Column (“col2”,{
label: new sap.ui.commons.Label({ text: “Employee Name”}),
Template: new sap.ui.commons.TextField().bindValue(“superman>empId”)
});
Var oTable = new sap.ui.table.Table(“myTable”,{
columns:[oCol1,oColn2],
visibleRowCount: 5
});
//aggregation BInding
oTable.bindRows(“superman>/empTab”);
(OR)
oTable.bindAggregation(“rows”,{
path:”superman>/empTab”
});
Xml model
1.Unlike html,xml can have custom tags
2.tansfer the data between languages
3. Xml can be processed by programming languages using DOM model
<emploree>
<row>
<empId></empId>
<eName></eName>
<gender></gender>
</row>
<row>
<empId></empId>
<eName></eName>
<gender></gender>
</row>
</employee>
Internationalization
Supporting the application developed in UI5 with multi-lingual support
Save file name as mylanguage_en.properties
Global Variables
sap.ui.getCore().getModel()
All global variables for the controllers are defined in oninit method
With prefix, this keyword
Formatters
Many times when we develop application, we would need to format our data at runtime
Syntax:
UIProp:{
path:”model path”,
formatter: formatter_function,function(value){}
}
Value:{
path:”model>eName”,
formatter:function(input){convert….. and…..return}
}
Faceless Component: Custom controller
It’s a JS file with reusable functions.
jQuery.sap.declare(“path of the file”);
Consume it we need to declare below before
jQuery.sap.require(“path of the file”);
hook
Oninit
which get called when we start our application for the first time
Gets called ,Before the view is displayed to the user
Sap ui5 first call
1.get controller name
2.onInit
3. Create content of the view (view gets instantiated)
4.onBefore rendering
5.After rendering
Fiori :
User experience of a UI5 application.
1. Device compatibility
2. Responsive
3. Platform independent
4. Same look and feel
5. Role based
It is a application built using MVC model with sap.m as control library
sap.m
sap.ui.layout.
LIST CONTROL
A list control is a single column table
Path of the binding, template of the binding
Template will define the type of the list
Types of templates
1. Display list item (label and value)
2. Standard list item(icon, label,description)
3. Column list item(multiple columns in the list)
4. Custom list item(customize the list)
5. Object list item(business object data)
6. Action list item(every list item is clickable)
7. Input List item
LIST MODE
Delete, MultiSelect, SingleSelect, SingleSelectLeft, SingleSelectMaster, None
Delete the item from list
//Find the index of the item to be deleted
//Getting the path and extracting the index. List object and call getSelectedItem()
//Get all the items bound to the list control
//Delete the items from the items collection
//Reset the latest item collection back to the list control
Index.html
sap.m.App => sap.m.SplitApp
Types of Fiori Apps
1.1. Transactional apps
2.FactSheets
3.Analytical apps
Fragments
Lightweight UI parts. A fragment would not have any controller,the functionality of the fragment
will be defined by the controller who invokes the fragment.
Save as
Myname.fragment.js
Custom control
A custom control is a control which developer can define in case if a standard sap control
doesn’t serve the purpose.
Code send to -> sapui5 frameworks-> converts into HTML5+CSS
sap.ui.core.Control class is parent class of
sap.ui.commons.TextView,
sap.ui.commons.Button,
sap.ui.commons.TextField
We need to design our control by inheriting from sap.ui.core.Control class
Ultimate o/p of our control is going to be an HTML5 + CSS code.
Steps to design a custom control:
1. Unique control name.
2. Metadata of the control which consists of properties, methods, events.
Whenever we have a property = setter & getter methods for that property
Whenever we have an event = attach<EventName>also to trigger the event we will
have fire <EventName>method
3. Implementation of control
Init - to initialize the control attributes.
Renderer - function (oRenderer, oControl){
oRenderer= which will tell the browser about how to show the control.
oControl = object of control itself
}
Syntax:
sap.ui.core.Control.extend(“ControlName”,{
Metadata:{properties:,events:,methods:},
renderer: function(oRm,oControl){},
Init : function(){}
});
Sap ui5 does not provide heading control and google map control
Create object of api’s(sapui5 framework->sap.m,sap.ui.commons) andadd it to the HTML body
1.location of gmap api
Google libraries(google.maps, google.geocode, google.marker)
2.create object of above apis and add it to the html body
Api’s
google.maps.Map => This will create a new map object
google.maps.Marker => to mark a location on the map
google.maps.Geocode => pass the address, returns the exact longitude and latitude
Component.js
UI component which encapsulates entire functionality of our Application
1.navigation(router information)
2. Versioning information
3. Dependencies (depends on some libraries)
4. Global methods and variables
5. Configuration
6. Model
7. Instantiate the main App view
8. Initialization (router and fragment initialization)
1.we want structure our app by keeping all the entities in separate folder
2. Integrating the app with sap launchpad (fiori launchpad its a shell and container AND
container will contain tiles and each tiles navigate u to corresponding app. That app loaded into
a container in that container u have to bring the reusable entity and place it into the same
container)
To define--- > sap.ui.core.UIComponent.declare(“path of component”);
To create----> sap.ui.core.UIComponent.extend(“comp_name”,{
Metadata:{routers,dependencies,libs,configuration,manifest},
Init: function(){},
Destroy : function(){},
});
componentname.prototype.createContent= function(){
};
Or
componentname.prototype.inIt= function(){
};
componentname.prototype.destroy= function(){
};
Whenever we use component.js concept the app will be called fiori like app
Index,html
| component.js
Shell ------> |
| main app view
Component container |
Split app-----------------master view and detail view
In index.html we create shell control this shell control will contain component container
Component .js is embedded in component container
component .js is going to create instance of view(mainapp.view)
This main app view consists split app view
Each applications component is a reusable consumable entity which can be used to create a
launchpad screen
Odata:
open data protocol,this allows us to consume the data over the http or internet
You do not need to worry about underlying database and its queries.
RESTful APIs = representational state transfer
Odata.org
Any odata service we use has 3 parts
1. Service document - define the entity sets of the service
2. Metadata document - allows us to look at the metadata $metadata
3. Data - we can see the entity data using /EntitysetName at the end of the service url
/Products?$format=json
Router:
Router concept is allows u to navigate any view without creating the instance of the view
Just define the properties of the view and sapui5 framework automatically will create the object
of the views.
Metadat:{
Routing:{
Config:{
viewType:””,
view Path:”” },
Routes:[{
Pattern:””,
Name:””,
View:””,
targetAggregation:””,
targetControl:””}]
},
},
It allows u to create the object of the view without writing the code, Router will only initialize the
views
U define the routes for those views
Model definition- represents the design of data
Entity type-
Features of odata
1. Select some of the fields $select=field names
2. Paging $top, $skip
3. $expand to check dependent entity data together
4. $format= json
BAPI_EMP_PRODUCT_GET_LIST
BAPI_EMP_PRODUCT_GET_DETAILS
BAPI_EMP_PRODUCT_CREATE
BAPI_EMP_PRODUCT_GET_UPDATE
BAPI_EMP_PRODUCT_GET_DELETE
Products
Orders
Suppliers
Deploy -> deploy to hana cloud platform
