SAP UI5 Interview Q&A

Q1. What is SAPUI5?

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

Q2. Why SAPUI5 instead of HTML5?

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

Q3. What is the main difference between HTML5 and SAP UI5?
A: 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 web page without formatting and
logic but UI5 provides standard style and components to build rich UIs.

Q4. What is MVC?

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

Q5. What is required to start UI5 development in eclipse?

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

Q6. Which control libraries are used for UI5 application development?
A: 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.
Q7. What is the syntax to define a control in UI5?
A: var obj_name = new sap.m.ControlName(“id of control”,{ properties, events,
aggregations });

Q8. What is Navigation concept in SAPUI5?

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

Q9. What is Responsive Web Design?

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

Q10. What is Component in SAP UI5?

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

Q11. What are the types of Components?

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

Q12. When and How to use formatter in SAPUI5?

A: 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;
}}});
Q 13. What all types of data models available in SAPUI5?
A: As SAPUI5 follows MVC(Model-View-Controller) there model plays crucial role in the
framework.
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.

Q14. What all types of views are available in SAPUI5?

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

Q15. What is the Lifecycle/hook methods of SAPUI5 views controller?

A:There 4 four Lifecycle methods available in every SAPUI5 views controller.
These are
onInit() :onInit is called when a view is instantiated and its controls (if available) have
already been created.
onExit() : onExit is called when the view is destroyed; used to free resources and
finalize activities.
onAfterRendering() : onAfterRendering when the view has been rendered and,
therefore, its HTML is part of the document.
onBeforeRendering() : onBeforeRendering is called before the controller view is re-
rendered and not before the first rendering.

Q16. Can we add our own controls to UI5?

A: 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.
Q17. What is the main difference between OData Model and JSON Model?
A: 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.

Q18. What are SAPUI5 Fragments?

A: 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“.
Q 20. In how many ways you can bind data to your controls?
A: We can bind data to any controls using three methods, Property, Element and
Aggregation binding.
Q 21. What is SAPUI5 Bootstrapping?
A: 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.
Q22. What is Metadata Annotations?
A: 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.

Q 23. What are the 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

Q24. What is SAP Fiori?

A: 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 meA we can create applications using SAPUI5 framework and
SAP FIORI is final product i.e. application.
Q25. What are all the types of Fiori Apps?
A: There are 3 types of apps Transactional, Analytical, Fact Sheets.

Q26. Difference between SAP UI5 and SAP FIORI?

A: 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 applications are developed.

Q27. What is FIORI Launchpad and Explain it?

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

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

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

Q 29. How to know the web browser of the client on which SAP Fiori application
is running using SAP UI5?
A: 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.

Q30. What are Fiori Design Principles?

A: There are 5 design principles we need to keep in mind while designing SAP Fiori
applications. Role-Based, Delightful, Simple, Responsive and Coherent.

Q31. What all design patterns are recommended/available in SAPUI5?

A: 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-Master Detail (Multi Flow)
Does Fragment have its own controller?
A: Fragments are created without controllers, they don’t have their own controllers
they share controller of the view which is invoking it.

Q33.What is a component.. use of components?

A: 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.
There are two types of components:
Faceless components: Mainly without UIs, Used for business logic and helper
methods e.g. Formatters.
UI Component: typical component.js file which is made by extending
sap.ui.core.UIComponent class.

Q34.Use of manifest.json?
A: The app uses the manifest.json file as descriptor. The manifest.json file It replaces
the application configuration file. The manifest.json file defines static information
about the application, such as the name of the application or the location of various
files. It is written in JavaScript Object Notation (JSON) format.
Q35: Internationalization concept?
A: Internationalization(i18n) is actually the process of designing a software so that it
can be adapted to different languages across the world, here 18 stands for number of
alphabets between I & n. Localization is the process of adapting internationalized
software for a particular region or language by adding locale-specific components and
translating text.

Q35: What is a Model?

A: A model in the Model View Controller concept holds the data and provides methods
to retrieve the data from the database and to set and update data.

Q36. Types of models in sap ui5?

A: There are three Cient side Models:
JSON model: Can be used to bind controls to JavaScript object data, which is usually
serialized in the JSON format. The JSON model is a client-side model and, therefore,
intended for small data sets, which are completely available on the client. The JSON
model supports two-way (default), one-way and one-time binding modes.
XML model: A client-side model intended for small data sets, which are completely
available on the client. The XML model does not contain mechanisms for server-based
paging or loading of deltas. The XML model supports two-way (default), one-way and
one-time binding modes.
Resource model: Designed to handle data in resource bundles, mainly to provide
texts in different languages. The resource model only supports one-time binding mode
because it deals with static texts only.

Q37. Two Server side Model: ODataV2 ODataV4

A: OData model: Enables binding of controls to data from OData services. The OData
model supports two-way (default), one-way and one-time binding modes. However,
two-way binding is currently only supported for properties, and not for aggregations.

Q38. Which one is preferred Model?

A: There is nothing called preferred model between the model's it depends on the
metadata you are consuming from the service and act accordingly.

Q39. Use of fragments?

A: Many times, we need to show a pop-up screens (Dialogs, Message Boxes etc.) to
user at runtime. So, in this case creating a complete view and its controller is not
desirable. Hence Fragment comes into the picture.
Fragments are light-weight UI parts (UI sub-trees) which can be re-used, defined
similar to Views (in XML, HTML, JS), but do not have any controller or other behavior
code involved. In case code is required and for event handler methods they should be
able to connect to existing controllers of the “owning” View.
So In case where someone require a set of controls to be reused in each of the view, we
can utilize the capacity of fragment. We can create a fragment & can reuse everywhere
we want.

Q40. UI5 vs fiori?

A:
Q41: What is View and Types of views?
A: The view in the Model View Controller concept is responsible for defining and
rendering the UI. SAPUI5 supports predefined view types.
XML view (file or string in XML format); the XMLView type supports a mix of XML and
plain HTML.
JSON view (file or string in JSON format)
JS view, constructed in a traditional manner
HTML view (file or string in HTML format)
Q42. Which one is preferred?
A: We recommend to use XML views, because XML views force a clear separation of
the UI definition from the application logic (which has to be implemented in the
controller). This makes the code is better readable and easier to support.

Q43. Life cycle methods in controller:

A:
onInit()
This method is called upon initialization of the View. The controller can perform its
internal setup in this hook. It is only called once per View instance, unlike the
onBeforeRendering and onAfterRendering hooks. If you need to modify the view before
it is displayed, for example bind data to view, initialize model; it can be done inside
onInit() methd.

onBeforeRendering()
This method is called every time the View is rendered, before the Renderer is called
and the HTML is placed in the DOM-Tree. BOLD_It can be used to perform clean-up-
tasks before re-rendering._BOLD
onAfterRendering()
This method is called every time the View is rendered, after the HTML is placed in the
DOM-Tree. It can be used to apply additional changes to the DOM after the Renderer
has finished.It can be used to do post-rendering manipulations of the HTML.

onExit()
This method is called upon destruction of the View. The controller should perform its
internal destruction in this hook. It is only called once per View instance, unlike the
onBeforeRendering and onAfterRendering hooks.It can be used to free resources and
finalize activities.

Q44. What is Binding and types of binding?

A: In SAP UI5, data binding concept is used to update the data automatically by
binding the data with the controls that holds the application data. ... Using two-way
data binding, application data is updated when the value of bound control changes.

SAPUI5 provides the following binding modes:

One Way: One-way binding meA a binding from the model to the view; value changes
in the model update all corresponding bindings and the view.
Two Way: Two-way binding meA 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.
One Time: One-time binding meA from model to view once.
Property Binding: Property binding allows properties of the control to get
automatically initialized and updated from model data.
Aggregation Binding: Aggregation binding is used to automatically create child
controls according to model data.
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. This is especially helpful in master/detail scenarios.