What is SAPUI5?

Just like any other HTML5 client-side rendering library SAPUI5 is also one. SAPUI5
strictly follows RIA (Rich Internet Application) standards. It is based on JavaScript which
provides a lightweight programming model for desktop as well as mobile applications.
Why SAPUI5?
As HTML5 world is the new age front technology across all aspect of internet
applications SAP was kind of trailing in this age because SAP was using age old Web
Dynpro for building SAP Web Applications which lacks in rich and user friendly UI. SAP
identified this and came up with its own custom HTML5 library i.e. SAPUI5.
Explain Navigation concept 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.
What is Component?
Component or Component.js is the first point of our application or we can say bthat it
serves as index which encapsulates all our applications details i.e. view names, routing
details, main view, applications type(Fullscreen or SplitApp), application service
configuration etc.
What is the difference between HTML5 and SAPUI5?
HTML5 is a markup language, It doesn’t have programming capabilities but SAPUI5 is a
framework which is based on MVC approach to build web applications. HTML5 is
mainly for the purpose of creating simple webpage without formatting and logic but UI5
provides standard style and components to build rich UIs.
What is MVC?
MVC stands for model view controller; it’s an architecture to design UI based
applications to achieve maximum reusability and extensibility of the application for
future changes. Model is the representation of data in form of object, View defines the
UI and Controller contains all the logic to drive as well connects view with model.
When and How to use formatter in SAPUI5?
We need to use formatter when we need to perform some changes on the back end
property data on the front end.
we can use formatter while data binding to a property like as follows:
oControl = new sap.ui.commons.TextField({
value : {path : “/path”, formatter : function(oEvent){
return “Value:”+oEvent;
}}});
What all design patterns are recommended/available in SAPUI5?
SAP recommends following application design patterns keeping in mind
design consistency of the applications:
Master – Detail
Master-Master-Detail
Fullscreen
Fullscreen-Fullscreen-Master Detail (Multi Flow)
What all types of views are available in SAPUI5?
There are following predefined three types of view available in SAPUI5:
JSON view
JavaScript View(JS View)
HTML View
What is formatter in SAPUI5 and how to use it?
We need to use formatter when we need to perform some changes on the back end
property data on the front end.
we can use formatter while data binding to a property like as follows:
oControl = new sap.ui.commons.TextField({
value : {path : “/path”, formatter : function(oEvent){
return “Value:”+oEvent;
}}});

Interested in mastering SAPUI5 Training? Enroll now for FREE demo on

SAPUI5 Training Online.

What all types of data models available in SAPUI5?

As SAPUI5 follows MVC(Model-View-Controller) there model plays crucial role in the
framwork. SAPUI5 has following predefined four data models available:
-JSON Model – Client-side model, supports two way binding.
–XML Model – Client-side model and intended for small data sets this is very rarely
used model.
-Resource Model – This is also client side model used to maintain resource bundles,
specially texts.
-ODATA Model – This is most important model of the four provided. This is server side
model, supports two way binding ODATA model currently supports ODATA version 2.0.
What are the Lifecycle methods of SAPUI5 views controller?
There 4 four Lifecycle methods available in every SAPUI5 views controller.
These are
onInit()
onExit()
onAfterRendering()
onBeforeRendering()
onInit is called when a view is instantiated and its controls (if available) have already
been created;
onExit 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 is called before the controller view is re-rendered and not before the
first rendering.
What is the main difference between OData Model and JSON Model?
The JSON model is a client-side model and, therefore, intended for small datasets,
which are completely available on the client.The OData model is a server-side model:
the dataset is only available on the server and the client only knows the currently visible
rows and fields.
What are SAPUI5 Fragments?
Fragments are very light weight UI controls and part of another UI. Fragments are not
completely like views but they act like a view. Fragments are defined similar like views
and are names like “myFragment.fragment.xml“.
Does Fragment have its own controller?
Fragments are created without controllers, they don’t have their own controllers they
share controller of the view which is invoking it.
In how many ways you can bind data to your controls?
We can bind data to any controls using three methods, Property, Element and
Aggregation binding.
What is SAPUI5 Bootstrapping?
SAPUI5 Bootstrapping means loading and initializing SAPUI5 in any HTML page. The
most important library or resource loaded in SAPUI5 bootstrap is “sap-ui-core.js”.
Apart from this theme for the application, SAPUI5 libraries etc are declared in the
bootstrapping.
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:Property
-edm:Nav Navigation Property
-edm:AssociationSet
What is the difference between SAP Fiori and SAPUI5?
SAP FIORI is collection of standard applications based on SAPUI5 library provided by
SAP. SAP FIORI applications share some standard design guidelines and way in which
these application are developed.
How many types of fiori applications are there?
There are 3 types of fiori applications:
-Transactional
-Analytical
-Fact Sheets
What is the difference between SAP Fiori and SAPUI5?
SAP FIORI is collection of standard applications based on SAPUI5 library provided by
SAP. SAP FIORI applications share some standard design guidelines and way in which
these application are developed.
What is FIORI Launchpad and Explain it?
It is a home page for all the FIORI applications provided to. There are more
than five hundred custom app provided by SAP. This shows tile based UI
where every UI redirects to assigned FIORI application. This Launchpad is
fully customizable according to your needs like theming and all.
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.
What are Fiori Design Principles?
There are 5 design principles we need to keep in mind while designing SAP
Fiori applications.
-Role Based
-Delightful
-Simple
-Responsive
-Coherent
What is SAP Fiori?
SAPUI5 is client side HTML5 rendering framework or library and SAP FIORI is
collection of and released as waves of applications which are completely based on
SAPUI5 framework. It means we can create applications using SAPUI5 framework and
SAP FIORI is final product i.e. application. In SAPUI5 we have to code from scratch, but
in Fiori Application the custom application is already built and enhancements can be
done on those custom apps.
Link: https://tekslate.com/sapui5-interview-questions
Ques 1. What is SAPUI5?
Ans.- SAPUI5 is also one client-side rendering library just like any other HTML5. SAPUI5 strictly
follows RIA (Rich Internet Application)standards. It is based on JavaScript which provides a
lightweight programming model for desktop as well as mobile applications.
Ques 2. Why SAPUI5 instead of HTML5?
Ans.- As HTML5 world is the new age front technology across all aspect of internet
applications SAP was kind of trailing in this age because SAP was using age old WebDynpro for
building SAP Web Applications which lacks in rich and user-friendly UI. SAP identified this and came
up with its own custom HTML5 library i.e. SAPUI5.
Ques 3. What is the main difference between HTML5 and SAP UI5?
Ans.- HTML5 is a markup language and it doesn’t have programming capabilities but SAP UI5 is a
framework which is based on MVC approach to build web applications. HTML5 is mainly for the
purpose of creating a simple webpage without formatting and logic but UI5 provides standard style
and components to build rich UIs.

Ques 4. What is MVC?

Ans.- MVC stands for model view controller; it’s an architecture to design UI based applications to
achieve maximum reusability and extensibility of the application for future changes. Model is the
representation of data in form of object, View defines the UI and Controller contains all the logic to
drive as well connects view with model.
Ques 5. What is required to start UI5 development in eclipse?
Ans.- We need to import SAP UI5 toolkit from HANA service marketplace. Also, we need SAP UI5
ABAP Repository connector to deploy the project in ABAP System.
Ques 6. Which control libraries are used for UI5 application development?
Ans.- 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 Fiori application development.

Ques 7. What is the syntax to define a control in UI5?

Ans.- var obj_name = new sap.m.ControlName(“id of control”,{ properties, events, aggregations });

Ques 8. What is Navigation concept in SAPUI5?

Ans.- 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.

Ques 9. What is Responsive Web Design?

Ans.- A web application which gives the same look and feel to the user in desktops and mobile
devices.

Ques 10. What is Component in SAP UI5?

Ans.- Component or Component.js is the first point of our application or we can say by that it serves
as index which encapsulates all our applications details i.e. view names, routing details, main view,
applications type (Full Screen or SplitApp), application service configuration etc..
Ques 11. What are the types of Components?
Ans.-
There are two types of components:
 Faceless components: Mainly without UIs, Used for business logic and helper methods e.g.
Formatters.
 UI Component: typically component.js file which is made by extending sap.ui.core.UIComponent
class.
Ques 12. When and How to use formatter in SAPUI5?
Ans.- We need to use formatter when we need to perform some changes on the back end property
data on the front end.
We can use formatter while data binding to a property like as follows:
oControl = new sap.ui.commons.TextField({
value : {path : “/path”, formatter : function(oEvent){
return “Value:”+oEvent;
}}});
Ques 13. What all types of data models available in SAPUI5?
Ans.- As SAPUI5 follows MVC(Model-View-Controller) there model plays crucial role in the
framwork.
SAPUI5 has following predefined four data models available:
1. JSON Model – Client-side model, supports two way binding.
2. XML Model – Client-side model and intended for small data sets this is very rarely used model.
3. Resource Model – This is also client side model used to maintain resource bundles, specially
texts.
4. ODATA Model – This is most important model of the four provided. This is server side model,
supports two way binding ODATA model currently supports ODATA version 2.0.
Ques 14. What all types of views are available in SAPUI5?
Ans.-
There are following predefined three types of view available in SAPUI5:
1. JSON view
2. XML View
3. JavaScript View(JS View)
4. HTML View
Ques 15. What are the Lifecycle/hook methods of SAPUI5 views controller?
Ans.- There 4 four Lifecycle methods available in every SAPUI5 views controller. These are onInit(),
onExit(), onAfterRendering(), onBeforeRendering(). onInit is called when a view is instantiated and
its controls (if available) have already been created; onExit 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 is called before the controller
view is re-rendered and not before the first rendering.
Ques 16. Can we add our own controls to UI5?
Ans.- Yes, we can add custom controls by creating definition of it from scratch. To define a custom
control we use sap.ui.control.extend and to enhance a standard SAP UI5 control we
use sap.ui.commons.controlname.extend.
 Ques 17. What is the main difference between OData Model and JSON Model?
Ans.- The JSON model is a client-side model and, therefore, intended for small datasets, which are
completely available on the client.The OData model is a server-side model: the dataset is only
available on the server and the client only knows the currently visible rows and fields.
Ques 18. What are SAPUI5 Fragments?
Ans.- Fragments are very light weight UI controls and part of another UI. Fragments are not
completely like views but they act like a view. Fragments are defined similar like views and are
names like“myFragment.fragment.xml“.
Ques 19. Does Fragment have its own controller?
Ans.- Fragments are created without controllers, they don’t have their own controllers they share
controller of the view which is invoking it.
Ques 20. In how many ways you can bind data to your controls?
Ans.- We can bind data to any controls using three methods, Property, Element and Aggregation
binding.
Ques 21. What is SAPUI5 Bootstrapping?
Ans.- SAPUI5 Bootstrapping is loading and initializing SAPUI5 in any HTML page. The very
important library or resource loaded in SAPUI5 bootstrap is “sap-ui-core.js”. Apart from this theme
for the application, SAPUI5 libraries etc are declared in the bootstrapping.
Ques 22. What is Metadata Annotations?
Ans.- The service metadata document explains 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.
Ques 23. What are the common Metadata Annotations?
Ans.-
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:Property
 -edm:NavigationProperty
 -edm:AssociationSet
Ques 24. What is SAP Fiori?
Ans.- SAPUI5 is client side HTML5 rendering framework or library and SAP FIORI is collection of
and released as waves of applications which are completely based on SAPUI5 framework. It means
we can create applications using SAPUI5 framework and SAP FIORI is final product i.e. application.
Ques 25. What are all the types of Fiori Apps?
Ans.- There are 3 types of apps Transactional, Analytical, Fact Sheets.
Ques 26. Difference between SAP UI5 and SAP FIORI?
Ans.- SAP FIORI is collection of standard applications based on SAPUI5 library provided by
SAP. SAP FIORI applications share some standard design guidelines and way in which these
application are developed.

Ques 27. What is FIORI Launchpad and Explain it?

Ans.- As we know there are more than 500 FIORI applications, SAP has provided a Shell or single
point place from where we can access the all the applications. This serves as a home page for all
the FIORI applications provided to. This shows tile based UI where every UI redirects to assigned
FIORI application. This Launchpad is fully customizable according to your needs like theming and
all.

Ques 28. How to know that device is Touch Screen or not?

Ans.- SAPUI5 library provides a special API “sap.ui.Device“ which can be used to for device and its
feature detection. This API has a flag “sap.ui.Device.touch” which returns true if device is a touch
screen otherwise false.
Ques 29. How to know the web browser of the client on which SAP Fiori application is
running using SAP UI5?
Ans.- SAP UI5 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.
Ques 30. What are Fiori Design Principles?
Ans.-There are 5 design principles we need to keep in mind while designing SAP Fiori applications.
Role-Based, Delightful, Simple, Responsive and Coherent.
Ques 31. What all design patterns are recommended/available in SAPUI5?
Ans.-
SAP recommends following application design patterns keeping in mind design consistency
of the applications:
1. Master – Detail
2. Master-Master-Detail
3. Full Screen
4. Full Screen-Full Screen-MasterDetail (Multi Flow)
Ques 32. Does Fragment have its own controller?
Ans.- Fragments are created without controllers, they don’t have their own controllers they share
controller of the view which is invoking it.

Link: https://www.stechies.com/sap-ui5-interview-questions-answers-explanations/

What is a fragment and views in SAP UI5?

Fragments are pieces of a UI without their own controller. The name of each view of
fragment is important. A fragment must be named as <NAME>.fragment.xml and a view
<NAME>.view.xml

SAPUI5 Views − Views are nothing but the application pages. We define our user
interface by creating Views. Views is formed or created by using one or more Controls
in it say Page, SimpleForm, Dialog, Label, Input etc. Every view has its own controller.

SAPUI5 Fragments − Fragments are the pieces of UI just like SAPUI5 Views.
Whenever we need to use some similar UI parts many times in our application/views we
create Fragments of those UI parts because Fragments are reusable and are light
weight compared to VIews and Controls. Fragments are stored with in the application
itself and can be used by that application only. Fragments are defined as View only and
calling Views controller is shared with Fragment as Fragments are not having their own
controllers.

What is the difference between Localization (i10n) and

internationalization (i18n)?
Internationalization (i18n)

The process of changing your software so that it isn't hardwired to one language/locale/culture.

It enables easy localization for target audiences that vary in culture, region, or language.

Internationalization is often written i18n, where 18 is the number of letters between “i” and “n” in

the English word.

Localization (l10n)

The process of adding the appropriate resources to your software so that a particular

language/locale is supported.

Localization is sometimes written as i10n, where 10 is the number of letters between “i” and “n”.

The value of distinguishing between them is that (theoretically) once your program goes through

the i18n process, you can then iterate many i10n processes as you need them.

Internationalization prepares your application for localization. For example, in SAPUI5 you

might create i18n files and adopt your application according to that.

When you wish to sell, for example, a Chinese version of your app, you'd then localize it by

hiring a translator to build the zh-CN resource files (i18n_zh-CN.properties).

Explain navigation in SAPUI5? (Explain about Routing and Event Bus).

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.

What is bootstrapping in SAPUI5?

SAPUI5 Bootstrapping means loading and initializing SAPUI5 in any HTML page. The most

important library or resource loaded in SAPUI5 bootstrap is “sap-ui-core.js”. Apart from this

theme for the application, SAPUI5 libraries etc. are declared in the bootstrapping.

What are the difference between catalog and groups in launchpad?

In Fiori Launchpad Tiles can be selected from catalogs and arranged in groups. You can assign

groups and catalogs to roles.

Catalog is a set of apps you want to make available for one role. Depending on the role and the

catalog assigned to the role, the user can browse through the catalog, choose apps from this

catalog, and add them to the entry page of the SAP Fiori launchpad.

Group is a subset of catalog that contains the apps visible on the SAP Fiori launchpad entry

page. Which tiles are displayed on a user’s entry page depends on the group assigned to the

user’s role.

The user can personalize the entry page by adding or removing apps to pre-delivered groups or

self-defined groups.

Can we add our own controls to SAPUI5?

Yes, we can add custom controls by creating definition of it from scratch. To define a custom

control we use sap.ui.control.extend and to enhance a standard SAPUI5 control we use

sap.ui.commons.controlname.extend.

What are Fiori design principles?

SAP Fiori provides a consistent and holistic user experience for SAP software. By creating

visually pleasing designs with a strong focus on ease of use, the experience is intuitive and

simple, across all devices.

Role-Based: SAP has decomposed various SAP transactions and changed them into beautiful

user interactive applications that show only most relevant information to the users.

SAP Fiori provides the right information at the right time and reflects the way user actually work.

Adaptive: SAP Fiori enables you to work how and where you want, regardless of the device

you use. And, it provides relevant information that allows for instant insight.
Simple: With SAP Fiori, you can complete your job intuitively and quickly. SAP Fiori helps you

focus on what is important – essential functions are easy to use and you can personalize the

experience to focus on your relevant tasks and activities.

Coherent: Whether you fulfill a sales order, review your latest KPIs, or manage leave requests

– SAP Fiori adheres to a consistent interaction and visual design language. Across the

enterprise, you enjoy the same intuitive and consistent experience

Delightful: Apart from making you work smarter, SAP Fiori also enriches your work experience

by allowing you to simply do your job.

To know more, refer to What is SAP Fiori?

In UI5 data binding supports, what are the different model

implementations?

UI5 data binding supports three different model implementations −

JSON Model supports data in a JavaScript Object Notation format and It supports two-way

binding.

XML model supports XML data and it supports two-way binding.

OData model supports OData compliant data. This is most important model of the four

provided. This is server side model, supports two way binding ODATA model currently supports

ODATA version 2.0.

 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?

A. 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:Property

 edm:NavigationProperty

 edm:AssociationSet

How can you get to know that device is Touch Screen or not?

SAPUI5 library provides a special API “sap.ui.Device“which can be used to for device and its

feature detection. This API has a flag “sap.ui.Device.touch” which returns true if device is a

touch screen otherwise false.

What is SAP Fiori Overview Page (OVP)?

SAP Fiori Overview Page (OVP) provides a new interaction within SAP Fiori UX. The OVP can

be seen as a step between the basic information on the SAP Fiori Launchpad and the full blown

information within the SAP Fiori applications.

While simultaneously presenting the big picture in a glance, business users can focus on the

most important tasks enabling faster decision making as well as immediate action.

In OVP information is visualized in a card format, different cards for different types of content, in

an attractive and efficient way.

To know more, refer to What is SAP Fiori Overview Page (OVP)?

1) 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

2) What SAPUI5 control metadata is used to configure the UI elements at runtime?

->Associations

->Properties

->Aggregations
4) 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

5) 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
7) What information can be stored in the manifest.json file of your app?
->Root view

->Supported device types

->Supported themes

8) Which of the following namespaces can be used in the manifest.json file?

->sap.ui5

->sap.app

->sap.ui

9) What is the name of the file where the descriptor for applications, components, and libraries is
stored?
->Manifest.json
10) For what stands the abbreviation JSON?
->Java Script Object Notation

11) Which data binding mode means a binding from the model to the view and from the view to the
model (value changes in the model and in the view update all corresponding bindings and the view
and model, respectively)?
->Two-way

12) How would you add an icon from the SAPUI5 icon font to a button in an XML view?
-><Button text="Save Draft" icon="sap-icon://save" />
13) Which predefined sizes for margins that stand for 8px (0.5rem), 16px (1rem), 32px (2rem), or
48px (3rem) are available in SAPUI5?

->'Tiny', 'Small', 'Medium' or 'Large'

14) What is aggregation binding used for?

->To bind a set of data entities to a list-like structure

15) Your JSONModel contains the following content:

{

"Employees" : [{

"Lastname" : "Karlson",

"Firstname" : "Karl"

}]

What is the binding path to Karl Karlson's first name?

/Employees/0/Firstname

16) What do you need if you want to bind a list to data in your JSONModel?
->An array with the data in the JSONModel that you want to bind to the list

->A template list item to be cloned

->A bound list control

17) How can you access validation errors in SAPUI5?

->Set handleValidation to true in the manifest.json file.

->Register to the validationError event on sap.ui.getCore().

18)Name some types in SAPUI5?

->sap.ui.model.type.Float

->sap.ui.model.type.DateTime

->sap.ui.model.type.Currency
 19) What coding do you need to add to your XML view to enable grouping in your list binding?
->group: true

20) Which of the following sequences of steps do you use to assemble the URL to access your
OData service's metadata?
· -> Run your app from SAP Web IDE and copy its URL into a new browser tab.
· ->In your app's manifest.json file, go to “services”, copy the URI, and use it to replace the file path
in the URL from Step 1.
· ->Append “/$metadata” and press enter.
21) How many filters can you apply on a list binding?
->As many as needed

22) What is the best practice for showing or hiding an SAPUI5 control at runtime?
->Set the “visible” property of the control to “true” or “false”.

23) When do you use element binding?

->When you want bindings of child controls to resolve their paths relative to the binding of the
parent

24) What is the difference between aggregation binding and element binding?
->Aggregation binding is used for list-like structures, whereas element binding can be used to set
the binding context of any parent control.

25) How is paging accomplished in oData query?

->Paging can be accomplished by using $skip in combination with $top. The parameters’ values
describe the interval of the data that is requested.

26) Name some OData query parameters?

->$skip

->$count

->$expand