SAP UI5 Interview Question and Answers

SAP UI5 Interview Question and Answers

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

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

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

Q. 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(Full Screen or SplitApp), application service configuration etc..

Q. 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;

Q. What all design patterns are recommended/available in SAPUI5?
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)

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

Q. What all types of views are available in SAPUI5?
There are following predefined three types of view available in SAPUI5:
1. JSON view
2. JavaScript View(JS View)
3. HTML View

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

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

Q. 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“.

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

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

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

Q17. How do you create/assign dynamic unique ID’s to controls?
A.There is way we can use dynamic unique ID’s to control. Using this.createId(“prefixIDString”) we can create a unique ID which will have given prefix.
For example suppose we have assigned Id to a button using this.createId(“myButton”), in this scenario out button will have string “myButton” in its ID declaration and it will throw duplicate ID error.

Q18. What is Semantic Page?
A. Semantic Page is sort of more enhanced and advanced version of As name suggests semantic page follows certains rules in terms of control placements on the page. For example if you add a positive actions to a semantic page it will always be positioned on the right side of the page.

Q19. How do you apply your own custom CSS to a control?
A. We can add/apply our own CSS to any control using addStyleClass(‘classname’) method of the control. For this we need to create a css class on our style.css file and apply it using below code:

Q20. What is shell?
A. control is sort of parent control to our entire SAPUI5 application. It can contain an, sap.m.splitapp or even a component container. It will provide a frame around the application.

Q22. How do you get the current language in SAPUI5?
A. sap.ui.core.Configuration api has a method using which we can get to know the current language. We can use below code to detect the current language
var sCurrentLanguage = sap.ui.getCore().getConfiguration().getLanguage();

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 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 11. What are the types of Components?
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.
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;
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 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 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.

Register today to complete certification

Share this post