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