1. SAPUI5 stands for SAP user interface for HTML5.
2. It is JavaScript based framework that is used to design multi-platform business application.
3. It supports four data models.
A. JSON Model
B. XML Model
C. ODATA Model
D. Resource Model
4. It supports four views. SAP recommends to use XML view.
A. XML View
B. HTML View
C. JSON View
D. JS(JavaScript) View
SAPUI5 was initially named phoenix that was later changed to SAPUI5 in 2011.
What is OPENUI5?
1. SAP Fiori is a new user experience (UX) for SAP software and applications.
2. It provides a set of applications that are used in regular business functions like work approvals apps, financial apps, calculation apps.
3. When you open the SAP Fiori home page application, you will see a picture of the flowers. It is because Fiori means ‘flowers’ in Italian.
4. SAP Fiori enables multiple device applications. It means, users can run same application in Desktop, Mobile and laptop.
5. SAP has developed Fiori Apps based on User interface UI5.
What is SAP FIORI element?
1. SAP Fiori elements (formerly known as smart templates) provide a framework for the most common application patterns.
2. App developers can use SAP Fiori elements to create SAP Fiori applications based on OData services and annotations that don't need JavaScript UI coding.
3. Using SAP Fiori elements to build apps that rely on SAP data can save you time and money on both
development and maintenance costs.
What is smart controls? 1. Smart controls are a specific category of SAPUI5 controls that have some special features in addition to the standard SAPUI5 features and thus make it easier to use the control in certain scenarios.2. A primary example of such a feature is OData support: Typically, a smart control interprets OData metadata.
Why SAPUI5?
It is the front end framework which helps to create responsive apps with Fiori design guidelines - Simple, Delightful, Coherent & role-based. SAP has invested lot of money and efforts in creating UI5 framework and offering Fiori apps. UI5 can also be used to create hybrid mobile apps. Fiori Client app can be used to access your Fiori app on your mobile.
How SAP FIORI was born?
When a research was conducted, it was found that most of the SAP users use SAP User Interface to access the applications. These included common applications related to Manager-employee interactions such as leave request, travel request, etc. These GUI had more than 300,000 screens with various functions in it. SAP checked the most frequently used application and then decided to renew these applications. This is how SAP Fiori was born.
What are the applications in SAP UI5 FIORI?
There are three types of applications.
1. Transactional app:- Transactional apps in FIORI are used to perform transactional tasks like manager-employee transactions such as leave request, travel requests etc. We can run these apps on mobile platform, laptop and desktop.
2. Fact sheet app:- It is just like master detail application. When we click on the master then details come. E.g. there is a fact sheet app with the center objects having details about vendor contract. If we click on vendor ID then further details come like vendor details, contract terms, item details etc. We can run these apps on mobile platform, laptop and desktop.
3. Analytical app:- Analytical apps are used to provide role-based real time information about the business operations. We use charts for this like pie chart, column chart etc. We can run these apps on mobile platform, laptop and desktop.
SAP FIORI design principles.
There are five design principles for SAP FIORI application. These principles make SAP Fiori simple and split the different transactions into simple task based UI applications.
1. Role based- Fiori applications are based on roles. According to roles, users see applications on the Launchpad.
2. Responsiveness-FIORI apps are adaptable in any screen size. One application can be used in any device(Mobile,Laptop,desktop).
3. Simple-It is based on 1-1-3 concept. 1- User, 1-task, 3-devices (Mobile,Laptop,desktop).
4. Seamless experience-FIORI apps are based on the same language. It does not matter the platform.
5. Delightful- SAP FIORI was designed to deploy in existing sap system.
What is Launchpad?
1. SAP Fiori Launchpad is known as the entry point of the Fiori apps.
2. It contains various tiles.
3. Tiles are square objects that are used to access different Fiori Apps.
4. Access to these tiles are based on the user roles.
Characteristics of SAPUI5.
1. Well-designed models, easy to consume
2. Well-designed views
3. Included JavaScript library
4. Support ajax open source
5. Extensible UI controls
What are SAPUI5 controls libraries?
1. Sap.m :- This includes controls for mobile devices.
2. SAP.UI:- This includes controls for desktop.
There are lot of libraries in SAPUI5.
Sap.m , sap.ui , sap.ui.table , sap.ui.commons etc.
SAPUI5 architecture.
1. SAPUI5 architecture consists of core JavaScript framework including jQuery.
2. It also consists of SAPUI5 controls libraries and themes libraries.
Fiori Architecture.
SAP Web Dispatcher:
1. SAP Web dispatcher is the first point of contact in SAP Fiori architecture for end users.
2. It handles all HTTP/HTTPS requests.
3. It can accept or reject connection to SAP FIORI system.
SAP ABAP frontend server:
1. It is a combination of SAPUI5 libraries and net weaver gateway.
2. Net weaver gateway:-
A. It is used to setup a connection between target client and SAP business suits.
B. It provides tool to create ODATA service.
SAP ABAP Backend server:
1. It contains the actual business logic.
2. Based on the logic we fetch the data from backend and display on the screen.
3. It is also known as SAP business suits.
Database:
1. It contains the data.
What Is HTML?
1. HTML stands for Hypertext Markup Language.
2. HTML is used to create web pages and web applications.
3. Browsers do not display the HTML tags. It display the content of tags.
4. HTML is widely used language on the web.
5. We can create a static website only by HTML.
6. HTML is a Markup language rather than a programming language.
7. Markup languages are used to design web page.
Difference between HTML and SAPUI5.
1. HTML stands for Hyper Text Markup Language.
2. SAPUI5 stands for SAP user interface for HTML5.
3. We call HTML elements (<p></p>,<h1></h1> as a tag.
4. We call SAPUI5 elements (<Table></Table>,<List></List>
1. SAPUI5 stands for SAP user interface for HTML5.
2. It is JavaScript based framework that is used to design multi-platform business application.
3. It supports four data models.
A. JSON Model
B. XML Model
C. ODATA Model
D. Resource Model
4. It supports four views. SAP recommends to use XML view.
A. XML View
B. HTML View
C. JSON View
D. JS(JavaScript) View
SAPUI5 was initially named phoenix that was later changed to SAPUI5 in 2011.
What is OPENUI5?
1. "OpenUI5" is the free version available under the Apache 2.0 Open Source license.
2. The entire core of "OpenUI5" and "SAPUI5" is identical. The most-commonly used control libraries are identical.
3. We can use “OPENUI5” in free. No need to pay anything to SAP Company.
4. Containing all central functionalities.
Difference between SAPUI5 and OPENUI5.
1. SAPUI5 is a license version. OPENUI5 is a free version.
2. We need to pay for SAPUI5. We do not need to pay for OPENUI5.
3. The difference is some controls libraries, which have not yet put under an Open Source license.
What is FIORI?
1. SAP Fiori is a new user experience (UX) for SAP software and applications.
2. It provides a set of applications that are used in regular business functions like work approvals apps, financial apps, calculation apps.
3. When you open the SAP Fiori home page application, you will see a picture of the flowers. It is because Fiori means ‘flowers’ in Italian.
4. SAP Fiori enables multiple device applications. It means, users can run same application in Desktop, Mobile and laptop.
5. SAP has developed Fiori Apps based on User interface UI5.
Difference between SAPUI5 and SAP FIORI.
1. SAPUI5 stands for SAP user interface for HTML5.
2. It is JavaScript based framework that is used to design multi-platform business application.
3. It supports four data models.
A. JSON Model
B. XML Model
C. ODATA Model
D. Resource Model
4. It supports four views. SAP recommends to use XML view.
A. XML View
B. HTML View
C. JSON View
D. JS(JavaScript) View
1. SAP Fiori is a new user experience (UX) for SAP software and applications.
2. It provides a set of applications that are used in regular business functions like work approvals apps, financial apps, calculation apps.
3. When you open the SAP Fiori home page application, you will see a picture of the flowers. It is because Fiori means ‘flowers’ in Italian.
4. SAP Fiori enables multiple device applications. It means, users can run same application in Desktop, Mobile and laptop.
5. SAP has developed Fiori Apps based on User interface UI5.
What is SAP FIORI element?
1. SAP Fiori elements (formerly known as smart templates) provide a framework for the most common application patterns.
2. App developers can use SAP Fiori elements to create SAP Fiori applications based on OData services and annotations that don't need JavaScript UI coding.
3. Using SAP Fiori elements to build apps that rely on SAP data can save you time and money on both development and maintenance costs.
3. Using SAP Fiori elements to build apps that rely on SAP data can save you time and money on both development and maintenance costs.
What is smart controls?
1. Smart controls are a specific category of SAPUI5 controls that have some special features in addition to the standard SAPUI5 features and thus make it easier to use the control in certain scenarios.
2. A primary example of such a feature is OData support: Typically, a smart control interprets OData metadata.
Why SAPUI5?
It is the front end framework which helps to create responsive apps with Fiori design guidelines - Simple, Delightful, Coherent & role-based. SAP has invested lot of money and efforts in creating UI5 framework and offering Fiori apps. UI5 can also be used to create hybrid mobile apps. Fiori Client app can be used to access your Fiori app on your mobile.
How SAP FIORI was born?
When a research was conducted, it was found that most of the SAP users use SAP User Interface to access the applications. These included common applications related to Manager-employee interactions such as leave request, travel request, etc. These GUI had more than 300,000 screens with various functions in it. SAP checked the most frequently used application and then decided to renew these applications. This is how SAP Fiori was born.
What are the applications in SAP UI5 FIORI?
There are three types of applications.
1. Transactional app:- Transactional apps in FIORI are used to perform transactional tasks like manager-employee transactions such as leave request, travel requests etc. We can run these apps on mobile platform, laptop and desktop.
2. Fact sheet app:- It is just like master detail application. When we click on the master then details come. E.g. there is a fact sheet app with the center objects having details about vendor contract. If we click on vendor ID then further details come like vendor details, contract terms, item details etc. We can run these apps on mobile platform, laptop and desktop.
3. Analytical app:- Analytical apps are used to provide role-based real time information about the business operations. We use charts for this like pie chart, column chart etc. We can run these apps on mobile platform, laptop and desktop.
SAP FIORI design principles.
There are five design principles for SAP FIORI application. These principles make SAP Fiori simple and split the different transactions into simple task based UI applications.
1. Role based- Fiori applications are based on roles. According to roles, users see applications on the Launchpad.
2. Responsiveness-FIORI apps are adaptable in any screen size. One application can be used in any device(Mobile,Laptop,desktop).
3. Simple-It is based on 1-1-3 concept. 1- User, 1-task, 3-devices (Mobile,Laptop,desktop).
4. Seamless experience-FIORI apps are based on the same language. It does not matter the platform.
5. Delightful- SAP FIORI was designed to deploy in existing sap system.
What is Launchpad?
1. SAP Fiori Launchpad is known as the entry point of the Fiori apps.
2. It contains various tiles.
3. Tiles are square objects that are used to access different Fiori Apps.
4. Access to these tiles are based on the user roles.
Characteristics of SAPUI5.
1. Well-designed models, easy to consume
2. Well-designed views
3. Included JavaScript library
4. Support ajax open source
5. Extensible UI controls
What are SAPUI5 controls libraries?
1. Sap.m :- This includes controls for mobile devices.
2. SAP.UI:- This includes controls for desktop.
There are lot of libraries in SAPUI5.
Sap.m , sap.ui , sap.ui.table , sap.ui.commons etc.
SAPUI5 architecture.
1. SAPUI5 architecture consists of core JavaScript framework including jQuery.
2. It also consists of SAPUI5 controls libraries and themes libraries.
Fiori Architecture.
SAP Web Dispatcher:
1. SAP Web dispatcher is the first point of contact in SAP Fiori architecture for end users.
2. It handles all HTTP/HTTPS requests.
3. It can accept or reject connection to SAP FIORI system.
SAP ABAP frontend server:
1. It is a combination of SAPUI5 libraries and net weaver gateway.
2. Net weaver gateway:-
A. It is used to setup a connection between target client and SAP business suits.
B. It provides tool to create ODATA service.
SAP ABAP Backend server:
1. It contains the actual business logic.
2. Based on the logic we fetch the data from backend and display on the screen.
3. It is also known as SAP business suits.
Database:
1. It contains the data.
What Is HTML?
1. HTML stands for Hypertext Markup Language.
2. HTML is used to create web pages and web applications.
3. Browsers do not display the HTML tags. It display the content of tags.
4. HTML is widely used language on the web.
5. We can create a static website only by HTML.
6. HTML is a Markup language rather than a programming language.
7. Markup languages are used to design web page.
Difference between HTML and SAPUI5.
1. HTML stands for Hyper Text Markup Language.
2. SAPUI5 stands for SAP user interface for HTML5.
3. We call HTML elements (<p></p>,<h1></h1> as a tag.
4. We call SAPUI5 elements (<Table></Table>,<List></List>
5. Additional information like src,value,id, we call attribute in HTML.
6. Additional information like text,value,id,type,icon, we call property in SAPUI5.
7. HTML is a markup language, It doesn’t have programming capabilities.
8. SAPUI5 is a framework, which is based on MVC approach to build web applications.
9. HTML is mainly for the purpose of creating simple webpage without formatting and logic.
What are models?
1. The model manages the application data. It contains the data.
There are four types of models.
A. JSON (JavaScript object notation) Model- the JSON model is a client-side model. It contains the data at client side. The JSON model supports two-way (default), one-way and one-time binding modes.
B. XML (Extensible markup language) Model- the XML model is a client-side model. It contains the data at client side. The XML model supports two-way (default), one-way and one-time binding modes.
C. Resource Model-It deals with static texts only. It supports one time binding mode only. Example of this is i18n (internalization).
D. ODATA (Open Data protocol) Model- It is a server side model. It acts like middleware between frontend and backend servers. It exposes the backend data in web browser. It provides various methods like Read, Create, Update, remove etc. The ODATA model supports one-way (default), two-way and one-time binding modes.
The OData model currently supports the following OData versions:
OData V2 , OData V4 (limited feature scope)
How many types of data models are available in SAPUI5?
There are four types of models.
A. JSON (JavaScript object notation) Model
B. XML (Extensible markup language) Model
C. Resource Model
D. ODATA (Open Data protocol) Model
What is MVC?
Model- The model manages the application data.
View- It contains UI (User interface) part of the application.The view is responsible for defining and rendering the UI
Controller-It reacts to view event. It contains the actual logic of the application.
How many types of views are available in SAPUI5?
There are 4 types of views available.
1. XML view
2. HTML view
3. JSON view
4. JS(JavaScript) View
What are UI5 design patterns?
There are four designs patterns.
1. Full Screen
2. Master-Detail
3. Master-Master Detail
4. Multi-Flow
What is SAPUI5 fragment?
1. Fragments are very lightweight UI controls.
2. We can reuse the fragment.
3. Fragments are not completely like views but they act like a view.
4. Fragments are defined similar like views and names like “FragmentName.fragment.xml“.
5. Fragments do not need controller. We can write event handling in existing controller.
Does fragment have its own controller?
Fragments do not need controller. We can write event handling in existing controller.
What is formatter in SAPUI5 and how to use it?
1. formatter is used to perform changes on the backend data based on the conditions and show it on the front end.
2. We format/change the back-end data based on the conditions and display it on the UI(User Interface).
We can use formatter while data binding to a property like as follows:
What is SAPUI5 BOOTSTRAPPING?
1. It means, loading of libraries in SAPUI5 application.
2. Example- Themes library, SAPUI5 controls library etc.
What is aggregation?
1. It is a special relationship between parent and child, where child is dependent on parent.
2. We cannot use the child directly.
3. We have to maintain hierarchy.
What is association?
1. It is special relationship between two UI elements where both are independent to each other.
How many ways you can bind data to your controls?
There are three methods.
1. Property binding
2.Element binding
3.Aggregation binding.
Property binding:The text property of the sap.m.Text control is set to the value {/name}. The curly brackets enclosing a binding path (binding syntax) are automatically interpreted as a binding. These binding instances are called Property Bindings.
<script>
<f:SimpleForm id="Simple2"
editable="true" layout="ResponsiveGridLayout" abelSpanXL="3"
labelSpanL="3" labelSpanM="3 labelSpanS="12"
adjustLabelSpan="false" emptySpanXL="4" emptySpanL="4"
emptySpanM="4" emptySpanS="0" columnsXL="1" columnsL="1"
columnsM="1" singleContainerFullSize="false" >
<f:content>
var stanardListItm=new sap.m.StandardListItem
({title:"{fname}",
counter:"{mob}"
});
var list=this.getView().byId("list_Id");
list.bindAggregation("items", "/Records",stanardListItm);
What are the bindings available in SAPUI5?
There are three bindings available in SAPUI5.
1. Property binding.
2. Element binding.
3. Aggregation binding.
What all events/life cycle are available in SAPUI5 views controller?
There are 4 lifecycle available in SAPUI5’s views controller, they are:
onInit() – It is called when a view is instantiated and its controls have already been created.
onExit() – It is called when the view is destroyed, used to free resources and finalize activities.
onAfterRendering() - When the view has been rendered and, therefore, its HTML is part of the document.
onBeforeRendering() -It is called when the view has been not rendered.
What is manifest.json?
1. It contains all applications details like view names, routing details, main view and application service configurations.
What is neo-app.json?
1. It contains all the destinations of the applications.
2. You can say either destinations or paths.
3. It contains path for SAPUi5 libraries on the server.
4. It contains path for Odata service on the server.
What is I18N?
1. There are 18 characters between I and N .that is why we call as i18n.
2. The full form of i18n is internationalization.
3. In SAPUI5, We use i18n for localization.
4. One column name we can show in multiple languages as per browser’s language and Launchpad’s language.
5. File declaration would be - FileName_Language code_Country code.properties
messageBundle_gu_IN.
Two-way binding- Suppose we have binded an input with json model and from the model data is coming ‘vikas’. If we change vikas to sonu on the UI (user interface) then it will be automatically reflected in model as well. If we want then we can change the binding mode.
What is the syntax to define a control in SAPUI5?
var obj_name = new sap.m.ControlName(“id of control”,{ properties, events, aggregations });
How navigation works in SAPUI5?
SAPUI5 uses two mechanism for navigation in applications those are EventBus and Routing where latter supersedes since SAPUI5 1.16. sap.ui.core.routing is the class used for the routing.
We define routing in components metadata in “routing” key. It is composed of route object and hash changer object. Route object defines the navigation paths and hash changer will be used at runtime to change the hash which leads to navigation.
What is responsive web design?
web application which gives same look and feel to the user in desktops and mobile devices.
What is metadata annotations?
The service metadata document describes the structure of all resources in the service. This structural metadata makes it easy to understand a service. We can explore service metadata at the address “$metadata” relative to the service root.
What are common metadata annotations?
Following are some of the service metadata annotations which are common and a front end developer must know these in order to understand the service and integrate it:
edm:EntityContainer,edm:EntitySet,edm:EntityType,edm:Propert,edm:NavigationProperty, edm:AssociationSet.
How can you get the Web Browser of the client on which SAP FIORI application is running?
SAPUI5 library provides a special API “sap.ui.Device“which can be used to for device and its feature detection. This API provides flags like “chrome”, “firefox”, “mozilla”, “edge” etc. in “sap.ui.Device.browser” API which returns boolean values.
Which open standards and tools are the foundation of SAPUI5 technology?
D3.js for visualization.
What SAPUI5 control metadata is used to configure the UI elements at runtime?
Associations
What is the purpose of a controller?
Name some standard controller hooks in SAPUI5?
onInit – An event that is called when the view and the controller are instantiated.
onExit – An event that is called when the view and the controller are destroyed.
What is the difference between Toolbar,Bar,OverflowToolbar?
Toolbar : Toolbar can shrink the content in case of overflow.
Bar: Bar can not really handle the overflow.It just cuts the content.
OverflowToolbar: OverflowToolbar provides see more(...) button for overflow.when we click on see more(...) button then all contents will be shown in popup.
What is the difference between sap.f.DynamicPage and sap.m.Page?
Use the DynamicPage if you need to have a title, that is always visible and a header, that has configurable Expanding/Snapping functionality. If you don't need the Expanding/Snapping functionality it is better to use the sap.m.Page as a lighter control.
What is cloud connector?
It exposes the back-end(on-premise) systems to sap cloud platform.
What is OData provisioning?
The SAP Cloud Platform OData Provisioning service provides access to data residing in SAP Business Suite via the OData protocol
What is an SAP AppRouter?The AppRouter is a Node.js library used as a single entry point for an application running in the Cloud Foundry, SAP BTP.
Let’s say a user is trying to access an application by calling the URL.
1. The request comes to the AppRouter of the application.2. The AppRouter checks if authentication is required (configured in xsapp.json of the application) and sends information like client location, cookies, and requested page details to the browser.3. If authentication is required, the AppRouter redirects to the SAP’s IDP Login page.4. Once the login is successful, the AppRouter redirects to the index.html of the application.
Further on from point no. 2 above, the authentication configuration is maintained in a file called xs-app.json. This file can carry other configurations as well, such as.
1. Authentication 2. Authorization including scope check3. Logout process and redirection4. Session management of the AppRouter5. Destination to access the API with CSRF protection within the application6. Cache7. CORS configuration
Difference between Managed AppRouters and Standalone AppRouters.
Difference between Absolute Binding and Relative Binding
Absolute Binding - In absolute binding, we provide the full path to the property or entity set within the model. For example, if we have a JSON model with a structure like {"student": {"name": "Vikas Kumar"}}, an absolute binding for the student name would look like {/student/name}. Here, / indicates the root of the model, we navigate down the path to the specific property (name in this case).
Relative Binding - Relative binding is based on the context of the control where the binding is defined. It allows to specify a path relative to the context of the control.For instance, if we have a table with items representing students and each item has a name property, we can use relative binding to bind to the name property without specifying the root path every time. In this case, the binding path would be {name} if the binding is done within the context of a student item in the list. Here, name is relative to the context of the student item.
In summary, absolute binding uses the full path from the root of the model, while relative binding is based on the context of the control where the binding is applied. Relative binding is often used within repeating structures like lists or tables where the same template is used for multiple items.
Difference between 'PUT', 'PATCH' and 'MERGE'
PUT - When we send a PUT request to a resource, we are essentially replacing the entire resource with the new representation provided in the request body. If the resource exists, PUT will replace it. If it doesn't exist, PUT will create it.
PATCH - The PATCH method is used to partially update a resource, meaning that only the specified fields or properties in the request are modified, leaving the rest of the resource unchanged. Unlike PUT, which replaces the entire resource, PATCH is used for making partial modifications to a resource
MERGE - The MERGE method is similar to PATCH, but it's not as commonly used in standard HTTP methods. It is often associated with the WebDAV protocol, which extends HTTP for collaborative editing of files on remote web servers. Like PATCH, MERGE is used for partial updates to a resource, where only specified fields are modified.
Difference between Cloud Foundry and Neo
What are models?
1. The model manages the application data. It contains the data.
There are four types of models.
A. JSON (JavaScript object notation) Model- the JSON model is a client-side model. It contains the data at client side. The JSON model supports two-way (default), one-way and one-time binding modes.
B. XML (Extensible markup language) Model- the XML model is a client-side model. It contains the data at client side. The XML model supports two-way (default), one-way and one-time binding modes.
C. Resource Model-It deals with static texts only. It supports one time binding mode only. Example of this is i18n (internalization).
D. ODATA (Open Data protocol) Model- It is a server side model. It acts like middleware between frontend and backend servers. It exposes the backend data in web browser. It provides various methods like Read, Create, Update, remove etc. The ODATA model supports one-way (default), two-way and one-time binding modes.
The OData model currently supports the following OData versions:
OData V2 , OData V4 (limited feature scope)
How many types of data models are available in SAPUI5?
There are four types of models.
A. JSON (JavaScript object notation) Model
B. XML (Extensible markup language) Model
C. Resource Model
D. ODATA (Open Data protocol) Model
What is MVC?
1. It stands for model view controller.
2. It is used to separate model, view and controller part in the application.
3. It enables to more than one developer work together.
4. MVC based applications are easy to enhance.
Model- The model manages the application data.
View- It contains UI (User interface) part of the application.The view is responsible for defining and rendering the UI
Controller-It reacts to view event. It contains the actual logic of the application.
How many types of views are available in SAPUI5?
There are 4 types of views available.
1. XML view
2. HTML view
3. JSON view
4. JS(JavaScript) View
What are UI5 design patterns?
There are four designs patterns.
1. Full Screen
2. Master-Detail
3. Master-Master Detail
4. Multi-Flow
What is SAPUI5 fragment?
1. Fragments are very lightweight UI controls.
2. We can reuse the fragment.
3. Fragments are not completely like views but they act like a view.
4. Fragments are defined similar like views and names like “FragmentName.fragment.xml“.
5. Fragments do not need controller. We can write event handling in existing controller.
Does fragment have its own controller?
Fragments do not need controller. We can write event handling in existing controller.
What is formatter in SAPUI5 and how to use it?
1. formatter is used to perform changes on the backend data based on the conditions and show it on the front end.
2. We format/change the back-end data based on the conditions and display it on the UI(User Interface).
We can use formatter while data binding to a property like as follows:
oControl = new sap.m.Text({
text : {path : “/path”, formatter : function(oEvent){
return “Value:”+oEvent;}
}
});
What is component?
There are two types of components.
A. Faceless component- It is mainly without UI(user interface). It is used for business logic and helper method e.g. Formatters.
B. UI component- It is the first point of the application. It contains all application details like view names, routing details, main view and application service configuration e.g. component.js
What is SAPUI5 BOOTSTRAPPING?
1. It means, loading of libraries in SAPUI5 application.
2. Example- Themes library, SAPUI5 controls library etc.
What is aggregation?
1. It is a special relationship between parent and child, where child is dependent on parent.
2. We cannot use the child directly.
3. We have to maintain hierarchy.
What is association?
1. It is special relationship between two UI elements where both are independent to each other.
How many ways you can bind data to your controls?
There are three methods.
1. Property binding
2.Element binding
3.Aggregation binding.
Property binding:The text property of the sap.m.Text control is set to the value {/name}. The curly brackets enclosing a binding path (binding syntax) are automatically interpreted as a binding. These binding instances are called Property Bindings.
<script>
// Attach an anonymous function to the SAPUI5 'init' event
sap.ui.getCore().attachInit(function () {
// Create a JSON model from an object literal
var oModel = new sap.ui.model.json.JSONModel({
name: "Hi, my name is vikas kumar"
});
// Assign the model object to the SAPUI5 core
sap.ui.getCore().setModel(oModel);
// Display a text element whose text is derived
// from the model object
new sap.m.Text({ text : "{/name}" }).
placeAt("content");
});
</script>
Element binding : Element binding allows to bind elements to a specific object in the model data, which will create a binding context and allow relative binding within the control and all of its children.
// Initializing array
var ship=[];
//pushing first entry to an array.
ship.push({"ShipperName":"vikas","ShipName":"ABC","ShippedDate":"26 NOV 2017"});
// Initializing model
json2=new sap.ui.model.json.JSONModel(ship);
// Taking id of form
var form2 =sap.ui.getCore().byId("Simple2");
// Setting model to form
form2.setModel(json2);
form2.bindElement("/0");
// View Part
<f:SimpleForm id="Simple2"
editable="true" layout="ResponsiveGridLayout" abelSpanXL="3"
labelSpanL="3" labelSpanM="3 labelSpanS="12"
adjustLabelSpan="false" emptySpanXL="4" emptySpanL="4"
emptySpanM="4" emptySpanS="0" columnsXL="1" columnsL="1"
columnsM="1" singleContainerFullSize="false" >
<f:content>
<Label text="Shipper Name" design="Bold"/>
<Text text="{ShipperName}" />
<Label
<Text text="{ShipName}" />
<Label text="Ship Date" design="Bold"/>
<Text text="{ShippedDate}" />
</f:content>
</f:SimpleForm>
Aggregation binding:Aggregation binding is used to automatically create child controls according to model data.
bindAggregation(aggregation, path, template)var stanardListItm=new sap.m.StandardListItem
({title:"{fname}",
counter:"{mob}"
});
var list=this.getView().byId("list_Id");
list.bindAggregation("items", "/Records",stanardListItm);
What are the bindings available in SAPUI5?
There are three bindings available in SAPUI5.1. Property binding.
2. Element binding.
3. Aggregation binding.
What all events/life cycle are available in SAPUI5 views controller?
There are 4 lifecycle available in SAPUI5’s views controller, they are:
onInit() – It is called when a view is instantiated and its controls have already been created.
onExit() – It is called when the view is destroyed, used to free resources and finalize activities.
onAfterRendering() - When the view has been rendered and, therefore, its HTML is part of the document.
onBeforeRendering() -It is called when the view has been not rendered.
What is manifest.json?
What is manifest.json?
1. It contains all applications details like view names, routing details, main view and application service configurations.
What is neo-app.json?
1. It contains all the destinations of the applications.
2. You can say either destinations or paths.
3. It contains path for SAPUi5 libraries on the server.
4. It contains path for Odata service on the server.
What is I18N?
1. There are 18 characters between I and N .that is why we call as i18n.
2. The full form of i18n is internationalization.
3. In SAPUI5, We use i18n for localization.
4. One column name we can show in multiple languages as per browser’s language and Launchpad’s language.
5. File declaration would be - FileName_Language code_Country code.properties
messageBundle_gu_IN.
6. We use resource model for i18n.
Two-way binding- Suppose we have binded an input with json model and from the model data is coming ‘vikas’. If we change vikas to sonu on the UI (user interface) then it will be automatically reflected in model as well. If we want then we can change the binding mode.
One-way binding-Suppose we have binded an input with json model and from the model data is coming ‘vikas’. If we change vikas to sonu on the UI (user interface) then it will not be automatically reflected in model. If we want then we can change the binding mode.
one-time binding-one time from model to view(i18n). It deals with static texts only.
What is required to start UI5 development in eclipse?
We need to import SAPUI5 toolkit from hana service marketplace. Also we need SAPUI5 ABAP Repository connector to deploy project in ABAP System.
Which control libraries are used for SAPUI5 application development?
sap.ui.commons,sap.ui.table and sap.suite.ui libraries for desktop application development and sap.m library along with sap.ui.layout for mobile application development.
What is the syntax to define a control in SAPUI5?
var obj_name = new sap.m.ControlName(“id of control”,{ properties, events, aggregations });
How navigation works in SAPUI5?
SAPUI5 uses two mechanism for navigation in applications those are EventBus and Routing where latter supersedes since SAPUI5 1.16. sap.ui.core.routing is the class used for the routing.
We define routing in components metadata in “routing” key. It is composed of route object and hash changer object. Route object defines the navigation paths and hash changer will be used at runtime to change the hash which leads to navigation.
What is responsive web design?
web application which gives same look and feel to the user in desktops and mobile devices.
What is metadata annotations?
The service metadata document describes the structure of all resources in the service. This structural metadata makes it easy to understand a service. We can explore service metadata at the address “$metadata” relative to the service root.
What are common metadata annotations?
Following are some of the service metadata annotations which are common and a front end developer must know these in order to understand the service and integrate it:
edm:EntityContainer,edm:EntitySet,edm:EntityType,edm:Propert,edm:NavigationProperty, edm:AssociationSet.
How can you get the Web Browser of the client on which SAP FIORI application is running?
SAPUI5 library provides a special API “sap.ui.Device“which can be used to for device and its feature detection. This API provides flags like “chrome”, “firefox”, “mozilla”, “edge” etc. in “sap.ui.Device.browser” API which returns boolean values.
Which open standards and tools are the foundation of SAPUI5 technology?
D3.js for visualization.
ARIA for accessibility standards and keyboard handling.
jQuery for managing DOM elements and abstracting browser differences.
What SAPUI5 control metadata is used to configure the UI elements at runtime?
Associations
Properties
Aggregations
What is the purpose of a controller?
To separate the UI and the processing logic.
To control the application flow by handling user events or updating the view.
Name some standard controller hooks in SAPUI5?
onInit – An event that is called when the view and the controller are instantiated.
onInit – An event that is called when the view and the controller are instantiated.
onExit – An event that is called when the view and the controller are destroyed.
What is the difference between Toolbar,Bar,OverflowToolbar?
Toolbar : Toolbar can shrink the content in case of overflow.
Bar: Bar can not really handle the overflow.It just cuts the content.
OverflowToolbar: OverflowToolbar provides see more(...) button for overflow.when we click on see more(...) button then all contents will be shown in popup.
What is the difference between sap.f.DynamicPage and sap.m.Page?
Use the
DynamicPage if you need to have a title, that is always visible and a header, that has configurable Expanding/Snapping functionality. If you don't need the Expanding/Snapping functionality it is better to use the sap.m.Page as a lighter control.
What is cloud connector?
It exposes the back-end(on-premise) systems to sap cloud platform.
What is OData provisioning?
The SAP Cloud Platform OData Provisioning service provides access to data residing in SAP Business Suite via the OData protocol
What is an SAP AppRouter?
The AppRouter is a Node.js library used as a single entry point for an application running in the Cloud Foundry, SAP BTP.
Let’s say a user is trying to access an application by calling the URL.
1. The request comes to the AppRouter of the application.
2. The AppRouter checks if authentication is required (configured in xsapp.json of the application) and sends information like client location, cookies, and requested page details to the browser.
3. If authentication is required, the AppRouter redirects to the SAP’s IDP Login page.
4. Once the login is successful, the AppRouter redirects to the index.html of the application.
Further on from point no. 2 above, the authentication configuration is maintained in a file called xs-app.json. This file can carry other configurations as well, such as.
1. Authentication
2. Authorization including scope check
3. Logout process and redirection
4. Session management of the AppRouter
5. Destination to access the API with CSRF protection within the application
6. Cache
7. CORS configuration
Difference between Managed AppRouters and Standalone AppRouters.
Difference between Absolute Binding and Relative Binding
Absolute Binding - In absolute binding, we provide the full path to the property or entity set within the model. For example, if we have a JSON model with a structure like
{"student": {"name": "Vikas Kumar"}}, an absolute binding for the student name would look like {/student/name}. Here, / indicates the root of the model, we navigate down the path to the specific property (name in this case).Relative Binding - Relative binding is based on the context of the control where the binding is defined. It allows to specify a path relative to the context of the control.
For instance, if we have a table with items representing students and each item has a name property, we can use relative binding to bind to the name property without specifying the root path every time.
In this case, the binding path would be
{name} if the binding is done within the context of a student item in the list. Here, name is relative to the context of the student item.In summary, absolute binding uses the full path from the root of the model, while relative binding is based on the context of the control where the binding is applied. Relative binding is often used within repeating structures like lists or tables where the same template is used for multiple items.
Difference between 'PUT', 'PATCH' and 'MERGE'
PUT - When we send a
PUT request to a resource, we are essentially replacing the entire resource with the new representation provided in the request body. If the resource exists, PUT will replace it. If it doesn't exist, PUT will create it.PATCH - The
PATCH method is used to partially update a resource, meaning that only the specified fields or properties in the request are modified, leaving the rest of the resource unchanged. Unlike PUT, which replaces the entire resource, PATCH is used for making partial modifications to a resourceMERGE - The
MERGE method is similar to PATCH, but it's not as commonly used in standard HTTP methods. It is often associated with the WebDAV protocol, which extends HTTP for collaborative editing of files on remote web servers. Like PATCH, MERGE is used for partial updates to a resource, where only specified fields are modified. Difference between Cloud Foundry and Neo
No comments:
Post a Comment