SAP Web IDE:

 Provides an environment to the developer to develop applications using various

tools and plug-ins which are essential for development.

index.html:
 <meta> tag provides metadata about the html document. These will not be displayed on
the page, but will be machine parsable.
 http-equiv="X-UA-Compatible" is a document mode meta tag that allows web authors to
choose what version of internet explorer the page should be rendered as
 “IE=edge” tells the internet explorer to use highest mode available to that of version
 UTF-8: (U from Universal character set + Transformation Format- 8 bit) is character
encoding capable of encoding all possible characters in Unicode. Because it is the default
all modern browsers will use utf-8 without being explicitly told to do so. It remains in
meta data as a common good practice, until the Unicode consortium decide not to use it.

manifest.json file:
 It is a descriptor that provides a location for storing the metadata associated with an
application
 Available namespace for Descriptor Content:
 Without (No Namespace)
 sap.app
 sap.ui
 sap.ui5
 sap.platform.abap
 sap.platform.hcp
 sap.fiori
 _version: Describes the descriptor format version. Mandatory and needs to be
updated when migrating to a new descriptor version
 Attributes in sap.app
 Id : Mandatory attribute: Unique identifier of the app, which must correspond to
the component name

Page | 1
  Type: Possible values- application, component, library
 i18n: URL to resource bundle
 title: Declared via {{}}
 description: Declared via {{}}
 application version
 data sources:
“dataSource Name”: { uri:””,
type:””,
settings{ odataVersion:””}
}

 Attributes of sap.ui
 Technology: Value is “UI5”
 deviceTypes: desktop, tablet, phone
 icons
 supported themes: array of supported SAP themes, such as sap_hcb, sap_belize
 fullwidth: Indicates whether an app shall run in full screen mode (true), or not
(false)

 Attributes of sap.ui5
 rootView: viewName, type, id
 dependencies: minUI5Version, libs, components
 models: Defines models that should be created or destroyed along the
component's lifecycle. The key represents the model name. Use an empty string
("") for the default model. uri, type and settings are the properties
 resources
 contentDensities
 routing
Neo-app.json file:
 JSON format file consisting of multiple configuration keys.

Page | 2
  Creating Neo-app.json file :- Right click on Project Name -> Right Click -> New ->
HTML5 Application Descriptor
 The most important setting is to configure the path where the SAPUI5 runtime is located
when starting the app
 Namespace available: welcomeFile, routes
 Attributes in routes:
 Path
 Target: { type: service or destination, name, entryPath}
 description

Component.js file:
 UIComponent.prototype.init.apply(this,arguments) calls superclass(UIComponent) init
method, mostly inits routing and instantiate a rootControl.
 this.getRouter().initialize(): Initializing the router will evaluate the current URL and load
the corresponding view automatically.
 sap.ui.define is the latest way to define JS code as module, which is in line with the
asynchronous module definition. The idea is to transition to the asynchronous loading of
libraries and implementation. So, SAP recommends to follow sap.ui.define way to
declaring controller logic especially where synchronous execution is not mandatory.
 “use strict”: indicates that the code should be executed in strict mode. Strict mode
eliminates some javascript silent error by changing them to throw errors.

Controller Life Cycle:

SAPUI5 provides predefined lifecycle methods for controller to load the view. These are also
called controller lifecycle hooks.
onInit() - When the view gets loaded
onBeforeRendering() - If we want some changes before view getting loaded
onAfterRendering() - When we want some changes after view gets loaded
onExit() - When view get destroyed

Difference between sap.m table and sap.ui table

Page | 3
While sap.ui.table used for display on desktop sap.m table used for mobile applications
Sap.m.table provides responsive design. Supports all kind of controls inside a line item
Sap.ui.table provides limited number of controls

Form:
 Allow user to enter data in a structured way
 It acts as a container for other UI elements like Label, inputfields, checkboxes while
structuring these into a specific layout
 Sap.ui.layout.form.Form

getSource() method:
 Contains a reference to the component that generated the event [Returns the event
provider on which the event was fired].

invalidate() method:

 invalidate() is used when you want to suggest to the framework to re-render a control

callback methods:

 Callbacks allow users to provide custom code to be executed by the Framework.

getOwnerComponent():

 getOwnerComponent() returns the owner component of the controller’s view; the

application’s component.
 It gets the model directly from the component.

Context:

 A context is a reference to a data object in a model.

Binding:

 An event provider which observes the status of a specific context and emits events when
it is changed/data loaded and therefore allows for registering event handlers for events on
that specific context.

Page | 4
Context Binding:

 ContextBinding is the binding to a specific context

 The binding you set up to a given path.

Binding Context:

 Bindingcontext is the meta data regarding a context- or list binding.

 The context of a given binding, i.e. when coming from a component, or some other set up
binding.

map() function:

 The map() method creates a new array with the results of calling a function for every
array element.

Routing:

 SAP UI5 Framework offers a special and efficient concept for Navigation between its
screens/Views.
 Sap.m.routing.Router is the class used for Routing and Navigation purpose in SAP UI5
framework.
 We define routing configurations in manifest.json
 Routing is defined using routing namespace within sap.ui5 namespace.
 Properties available:
"sap.ui5": {
"routing":{
"config" : {
"routerClass" : "sap.m.routing.Router",
"viewType" : "XML/JS"
"viewPath" : "sap.webapp.path.viewfolder",
"controlId" : "app",
"controlAggregation":"pages",
"bypassed":{
"target": "bypasstarget"
}
}
"routes : [{
"pattern":"",
"name":"routername",
"target":"target1"
},
{
"pattern":"pattern1",
"name":"routename1",
"target":"target2"

Page | 5
 }]
"targets" : {
"target1":{"viewName":"veiw1"},
"target2":{"viewName":"view2"}
}
}
}

 config:
 This section is dedicated to global routing settings. Parameters defined here are
applicable across the app.
 routerClass- defines the kind of router to be used in the app
 viewType- defines the types of view used in the app. Normally it will be
either XML or JS
 viewPath- defines the path where the views are stored. This path enables the
app to download and load the views whenever any target/router is hit. This
value is applicable across the application.
 controlId defines the control in which the views are to be loaded
 controlAggregation defines the aggregation of the above control where the
views are filled in. This value is applicable across the application.
For example “pages” is the aggregation for App and “masterPages” and
“detailPages” are the aggregations for SplitApp control. If the view is to be loaded
in the control other than the one defined in config namespace, controlID and
controlAggregation can be overwritten in targets. This is procedure is explained
further.

 bypassed handles invalid hashtags. When the hashtag is incorrect, ‘target’ defined
inside it, will be executed.

 routes:
 This section defines the routes with hashtags.
 “Routes” is basically an array of objects.
 These objects contain pattern, name, and target as its name-value pairs.
 “target” defines the target which is defined in targets section
 targets:

Page | 6
  This section defines the names of the views to be loaded when the route
associated with it is hit.
 viewName defines the name of the view to be loaded.
 In order to avoid creating multiple instances, the router should be instantiated in
the component during the bootstrapping, before it is used
 Initialize the router in Component.js file using: this.getRouter().initialize();
 In the controller, code logic needs to implemented for navigation.
 In the event, we have to first get the reference of Router and execute navTo method.
 We can access the component content by using getOwnerComponent() method.
 this.getOwnerComponent().getRouter() will return the router object
 The method navTo helps navigating from one view to another.
 It accepts route name as the parameter. The route_name is the same name which we have
defined in “name” property in routes section.
 Whenever we execute this method it adds the pattern defined in the route at the end of the
current URL and loads the view defined in the target, in the control/its aggregation
defined in the config section of routing.
 We can also attach an event listener to this route. The event is called Matched event. This
event helps to execute the custom logic within the call back function.
Ex: this.getRouter().getRoute("routeName").attachMatched(this._callBackFunction,this);

Navigation with Parameter:

 First add navigation parameter to the route where we can hand over the information to the
page where we want to display the information. Mandatory navigation parameters are
defined with curly braces
 In controller of the view from where we navigate use getSource() method to get control
instance that has been interacted with
 In the navTo method we now add a configuration object to fill the navigation
parameter with the current information of the item. This will update the URL and
navigate to the detail view at the same time.
 In the navTo method call getBindingContext() method with model name
 We need to remove the first / from the binding path by calling .substr(1) on the string
because this is a special character in URLs and is not allowed

Page | 7
  Next is in Controller of the page where we are navigating: It needs to set the context that
we passed in with the URL parameter to the view, so that the item that has been selected
in the list of invoices is actually displayed
 In the init method of the controller we fetch the instance of our app router and attach to
the detail route by calling the method attachPatternMatched on the route that we accessed
by its name.
 We register an internal callback function _onObjectMatched that will be executed when
the route is hit, either by clicking on the item or by calling the app with a URL for the
detail page.
 In the _onObjectMatched method that is triggered by the router we receive an event that
we can use to access the URL and navigation parameters.
 The arguments parameter will return an object that corresponds to our navigation
parameters from the route pattern.
 We access the navigation parameter that we set in the first controller and call
the bindElement function on the view to set the context.
 The bindElement function is creating a binding context for a SAPUI5 control and
receives the model name as well as the path to an item in a configuration object.

Routing back and History:

 Use namespace sap/ui/core/routing/History
 In the event handler we access the navigation history and try to determine the previous
hash using method getInstance() and getPreviousHash()
 In contrast to the browser history, we will get a valid result only if a navigation step
inside our app has already happened.
 Then we will simply use the browser history to go back to the previous page.
 If no navigation has happened before, we can tell the router to go to our first page
directly.
 We pass a parameter true that tells the router to replace the current history state with the
new one since we actually do a back navigation by ourselves.
 The second parameter is an empty array ({}) as we do not pass any additional parameters
to this route.

MVC Architecture:

Page | 8
  Used to separate the representation of information from the user interaction
 This separation facilitates development and the changing of parts independently
 View is responsible for defining the user interface
 Model manages the application data
 Controller reacts to view events and user interaction by modifying the view and model. It
contains methods that define how model and view interact

When model is undefined:

var oLeftTableModel = LeftTable.getModel();

var oLeftTableProperty = oLeftTableModel.attachRequestCompleted(function(){

console.log(oLeftTableModel.getProperty("/leftLens"));

});

Page | 9