UI5 and Fiori Interview Questions

UI5
and Fiori Interview questions

Sponsored by: http://onlinefioritrainings.com
Prepared by : Charu Borkar [email protected] (SAP UI5, Fiori, ABAP on HANA Consultant, Australia)
Referenced from Training delivered by Anubhav Oberoy ([email protected]) on ABAP on HANA
Check our YouTube channel for free Videos: https://www.youtube.com/c/AnubhavOberoy
Never learn from trainers who teaches copy paste of code.
Q. What is SAP UI5 Framework?

SAP UI5 is a framework to develop responsive web application. Responsiveness has got nothing to
do with performance, but it’s an application which has capability to adapt itself in all the devices. It
gives a coherent UX across all platforms (different browsers/devices).
Framework is a collection of libraries, each library includes classes, and each class includes methods
Q. Evolution of UI technologies
1st:
Q. What is SAP UI5 design-time & runt-time component ?

Ans. A Framework typically has two types of libraries which consists of two parts:
1. SAP UI5 design-time component: It includes all the libraries , classes and functionalities
that allows you to develop all the applications from scratch
2. SAP UI5 run-time component: responsible for execution of Fiori Application, which
consists of renderer that converts the app code into browser readable format (i.e
HTML5, CSS and JS)
http://onlinefioritrainings.com
Prepared by : Charu Borkar [email protected]
SAP UI5, Fiori, ABAP on HANA Consultant, Australia
Referenced from Training delivered by Anubhav Oberoy ([email protected]) on UI5 and Fiori
Page |1
Q. Steps to follow in any programming language to develop an application?
Ans.
1. Initialization – load necessary dependencies - – Bootstrap in UI5
<script id=“sap-ui-bootstrap” src=“resources/sap-ui-core.js” data-sap-ui-libs=“sap.m”
data-sap-ui-theme=“sap_bluecrystal” >
</script>
For the theme to be active on the page : specify class “sapUiBody” in the <body> tag of the
html document.
2. Declaration – Data variables used in program – Create UI Control
var var_name = new libraryName.ClassName(sId, sProperties);

sId- unique Id of your UI control
sProperties: Control properties for configuring control attributes. Inside curly braces.
( ) – parenthesis
{ } – curly braces
[ ] - bracket
3. Actual program business or orchestration logic – manipulation, IF, Loop, call - display control to
User
ObjectContro.placeAt( “id of control” );
4. Output - Show output to user
5. Clean-up
Q. Define structure of a Web Application / HTML page?

Ans. Any Web Application that is understood by browser is always a HTML page which is a static
web-page. Structure of a typical web app page is a html page
<html>
<head>
( * creation of control )
Page |2
</head>
<body>
( * place the control in the body )
</body>
<html>
Q. What is SAP WEB IDE?

Ans. SAP WebIDE is an Integrated Development Environment (IDE) which allows developers to
create/extend Fiori Apps.
Why WebIDE?
Ø It makes easier to develop Fiori Apps using ready to use templates.
Ø Extensibility pane to extend Fiori Applications.
Ø Multiple Deployment options.
Ø Allows team sharing repository. Git repository
Ø Can access it from anywhere on any device. No local footprint (local installation is required).
SAP Web IDE can be used in two flavours: Personal Edition ( trial purpose ) & Productive Version
( subscription to companies )
Q. What is HTML?
Page |3
HTML stands for Hypertext Markup Language which is created by W3C = World Wide Web
Consortium who is responsible for defining HTML tags and versions. All browser vendors like
Chrome, IE, Firefox, Safari.
It is used to create static web pages.
HTML is not a programming language. It is based on tags, if we follow the approach, we can create a
static webpage using these standard tags. E.g. button, input, datalist, li, ul, h1, table … etc.
Important Points to be noted:
Ø HTML is not case-sensitive
Ø Browser directly understand HTML
Ø User can only see content in browser provided it is kept in body of HTML
Ø Every HTML element can have ID property. Developer should make sure that ID is always
unique.
Ø Html elements can also have name, class (classification) property, which doesn’t needs to be
unique.
Q. Difference between HTML and HTML5?

• HTML5 is just the advancement of HTML, it was released in year 2014.
• HTML5 is labral in nature
• Even we put something in head of html, it will be visible to user. Ideally we should
not do that.4
• Declaration of DOCTYPE
Older version example <!DOCTYPE html DND_VERSION=“XHTML/4.02”
HTMLSCHEMA=“htmlns”>
<!DOCTYPE html> à tells the file that it’s an html page
• For some of the tags in HTML5, we don’t need to put ending tag e.g. img, input
• New elements introduced to define proper structure of the website like header, footer,
article, section etc.
• Direct support for Audio and Video tags in HTML5, before that plug-in support was needed
in browsers.
Q. Difference between HTML5 and SAP UI5?

HTML5 SAP UI5
HTML5 versions are released by W3C SAP UI5 versions are released by SAP
HTML5 is a markup to just design user interface SAP UI5 is a framework
without any logic
HTML5 is having standard tags but it is also SAPUI5 has strict JS syntax to follows
liberal in nature
Q. Difference between Open UI5 and SAP UI5?

· Open UI5 is a Subset of SAP UI5, Most commonly used libraries are part of open UI5 for
consumption by users.
Page |4
· Open UI5 is an open source under Apache 2.0 license where as SAP UI5 is a licensed product, this
comes along with SAP Netweaver or SCP (SAP Cloud Platform – formally known as HCP – HANA
Cloud Platform).
Q. What is metatag in html?

Ans. It depicts the metadata of HTML page. ( refer: www.w3cshools.com for more characteristics
information)
Characteristics of metatag are:
· Encoding-type – help user to identify the type of characters that are applicable
· Author- created by
· Keyword – reside in metatag for search engine optimization
· Description – description about the websites in the search engines
Q. What are List tags in HTML?

Ans. List tags are used to display sequence of data.
There are two types of list tags:
1. Unordered list – <ul></ul>
2. Ordered list – <ol></ol>
Q. What are block level elements?

Ans. Block level elements are used to structure the HTML content properly. These elements don’t
have their own footprint on page. Two types of block level elements:
div – Division tag,
Ø It automatically starts with a new line
Ø Used to create/group a block of elements.
span – inline element

Page |5
Ø It doesn’t starts from new line
Ø It wraps an existing HTML element
Q. What is DOM ( Document Object Model ) ?

Ans. Browser converts HTML in a tree data structure – This is known as DOM (Document Object
Model). Runtime structure of HTML in browser.
html
head body
meta title Div Input H1,h2 Img Ol,ul
F12 is the key to open internet developer toolbar / developer tool
Q. Define HTML table structure?
Q. Define <iframe> tag.

Ans. <iframe> tag in HTML is used to embed another HTML document.
<iframe href=“(reference of the HTML document)” width=“” height=“”></iframe>
Page |6
Q. What is CSS?
Ans. CSS – Stands for Cascading Style Sheet.
CSS is used to do styling of HTML element in a way that it separates the style code from HTML code.
3 ways to apply CSS:
1. Inline Style: is just like element level styling. à too much of coding
<tagName style=“prop:value ; prop:value”></tagName>
2. Internal Style: Applying the style for group of elements together, it is also possible to
apply style on single element as well.
For applying internal Style, we should use a new tag called <style> tag in the header of
HTML.
Syntax:
<style>
selector : {
prop: value;
prop: value
}
</style>
2. External Style: It is just like internal styling but the code for styling is taken out in a
separate file and reference the file in HTML file.
Q. What is Inline Styling?

Ans. Inline styling is an element level / tag level styling which gets applied to all the elements defined
in the tag. So if there are multiple elements, applying style for each and every element is not
feasible. In that case we use Internal Style.
Q. What is Internal Styling?

Ans. Internal Styling can be applied to group of elements together using a selector.
A Selector is “unique identifier of an element(s) which can be used in two ways:
· #id – applying style for a particular element
· .className – class name is a classification of elements, a group of elements, to apply
class name, embed the element inside a <div> tag
Eg. <div class=”(your class name)”> “your element” </div>
· tagName – all the elements which has the tagname gets affected with style
St. to use a tagname selector, it affects elements of entire page with similar tag, But majorly user
needs style on group of elements. In these cases, we don’t use tagname but we use classname as
our selector.
Standard is not to mention class name at element level. But wrap the element around a tag with a
div tag and use class name.
Page |7
Q. What is Responsive Web Design?
Ans. Web design which adapts itself according to screen size to provide a consistent user experience.
Based on device available space, the screen adjusts itself without a scroll bar at page level.
Q. What is CSS box model?

Ans. CSS box model is how the element is represented on the HTML page, which has border and the
actual element. The space between the border and the element is called padding (property) and the
space between two different element boxes is called margin (property).
Q. What is a pseudo class in CSS?

Ans. Pseudo classes are nothing but special identifiers to apply CSS on elements based on certain
events or activities which user perform on the UI
selector:pseudo-class{
---CODE
** list of available pseudo classes can be obtained from w3cshools.com, eg. FOCUS, HOVER etc
Q. What is JavaScript?
Ans. It is a programming language understood by browser. It is completely different then java in
terms of design, purpose and concept.
· JavaScript is case-sensitive
· Naming convention to be followed for declaring JavaScript “variables” and “function”
- first word should start with small letter
- next consecutive word should be camel caps or first letter of next word
should caps
eg: HelloWorld à helloWorld
· Every statement of JS should end with semi colon (;)
· Object oriented
Q. What are types of JavaScript(JS)?
Page |8
Ans. There are two types of JS:
1. Client side JS – JS code which completely runs in client-side (runs in browser). Eg.UI5,
Angular JS etc to Create responsive web applications.
2. Server side JS – JS code runs on server side. eg. XSJS, Node.JS. Server side programming like
DB lookup, sending email, manipulating data, updating system status.
Q. What is the purpose of JavaScript(JS)?

Ans. JAVA Script is used for following purposes:
1. Validate the input
2. Perform calculations on client side: Write imperative logic – if, looping, arithmetic and
logical operations
3. Check conditions and operations
4. Call server
5. Manipulate DOM (html)
6. Change CSS at runtime
Q. Steps/Techniques to apply JavaScript in the code?

Ans. 3 ways we can apply JS in the code:
1. Inline JS – code is written at element level
2. Internal JS – code is written at page level inside <script></script> tag.
3. External JS – reference an external file (.js) into your html page,
<script src=“(path of JS file)”></script>
Q. What are different Output Functions in JavaScript?

1. alert() – provide a popup to user
2. Console.log – print output to console
3. document.write – replace whole HTML page content with write content
4. .innerText – change text of an HTML element
Q. What are the pre-defined objects available in JS?

Ans. Two types of Objects:
1. document – object of your DOM (Document Object Model) – Runtime structure of HTML
document
the document object provides lots of methods to obtain the object of HTML element(s)
which are APIs – Application programming Interface – represented by a reusable method or
class.
i. document.getElementById – single element by its id (id of html element is unique)
ii. document.getElementsByClassName – list of all elements by class name
iii. document.getElementsByTagname – list of all elements having that tag
2. window – this is the object of browser window
Q. What is the syntax to create variables in JS?
Page |9
Ans.
Q. What is JSON- Java Script Object Notation?

Ans. If multiple records have to be defined in an array, we need to add multiple objects as a part of
array. The concept of combining array and objects is called JSON - Java Script Object Notation.
var myItab = [{“prop”: val, “prop”: val},
{“prop”: val, “prop”: val},
{“prop”: val, “prop”: val}]
Q. What are different types of functions in JavaScript?

Ans. 2 types of functions in JS
1. Anonymous function (functions without any name)
function(argument, argument) {
…..
}
2. Named functions ( your own defined functions )
function functionName(argument, argument){
…..
}
Important!! A function can be passed as an argument.
var <name> = function(){
….
}
In JS, these functions are executed asynchronously without lead-time of the response.
Q. How to attach js to the elements?

Ans. Using Events. Events are activities performed by user on the UI application.
Eg. focus, click, double click, key press, mouse down, mouse up.
There are certain events which are system events which are used to perform certain functions in
the programming: eg. load, close, kill, exit, timeout.
A JS event can be defined by suffixing the activity name by “on”

P a g e | 10
e.g. onclick, onfocus,onmouseover.
Q. What is jQuery?
Ans. jQuery is not a language. It is a JavaScript library which is concise and fast to avoid writing large
piece of code using JS. It is based on a principle of “write less, do more”.
The most commonly used line of code and methods are available in jQuery to be consumed in the
application code helping developers to quickly achieve desired results without much coding.
There are two ways to consume this library:
- Download the jQuery and reference
- Reference online – CDN(Content Delivery Network)
Syntax to consume a jQuery:

<script src=“path of JS file”></script>
Q. Syntax to use jQuery

$(selector).action();
- $ - tell the browser that we are going to use jQuery
- Selector – tagname, .className, #id
- Action – method, event name, on, css(‘prop’,’val’)
- $(selector).action(params, callBackFunction());
Q. What is Chaining concept in JS?

Ans. When a method is called in JS, another method can be called on top of it.
Eg. object.method1().method2().method3();
object.method1(); object.method2() ; object.method3();
P a g e | 11
Q. What is a Call Back Function in JS?
It is a function which gets triggered when a particular operation is completed. Typically Call Back
Functions are asynchronous and anonymous.
syntax: object.function(callbackFunction);
.hide, .show, .fadeOut, .fadeIn, .animate
Q. What is SDK? What does SAP UI5 SDK offers?
Ans. SDK refers to Software Development Kit. It’s a repository of API’s and related documentation, to
be referred to develop applications based on particular technology.
SAP UI5 SDK offers latest updates on the framework. It gives the latest information about the
evolution in SAP UI5 technology like version, API reference, Sample applications, ICON explorer etc
A UI control is a CLASS in the framework which consists of properties, associations, aggregations,

events, methods etc
Q. What are setter and getter methods in SAP UI5?

Ans. For every UI control in SAP UI5, there is setter and getter method to change and read the text
of UI control.
e.g: for “text” property : setText() and getText()
Statement: For every event in SAP UI5, methods a fireEventName() and attachEventName() and
deattachEventName() get created.
Q. What are different ways to obtain object of SAP UI5 control?

There are two ways to obtain object of UI5 control
1. Using application runtime object
sap.ui.getCore().byId(“id of your control”);
OR
var oRuntime = sap.ui.getCore();
var oAnubhav = oRuntime.byId(“id of control”);
2. Using View object when we use MVC architecture (XML Views)

this.getView().byId(“id of control”);
this keyword represents the object of current control.
Q. How to create control in UI5?

Syntax to create a control:
var oControlName = new <lib_name>.ControlName(sId,sProperties);
Note that! the control name always starts with capital letter. Pure camel case.
sId: Unique ID of the control.
P a g e | 12
sProperties: the attributes/properties of the UI element. All the properties should follow
below syntax
{
propname: “prop val”,
propname: “prop val”
}
Q. Define Control Hierarchy of a SAP UI5 control?
Points to be remembered while applying SAP UI5 hierarchy:

Ø In JAVA SCRIPT we use “extends” keyword to indicate the inheritance.
Ø If you are unable to find property or event of a particular class, check its parent class.
Q. Define Association in Object Oriented Programming

Association can be achieved in two ways:
1. Aggregation: lose coupling, good to have relationship. Both objects can function
independently.
2. Composition: tight coupling, objects cannot function independently. Must have relationship.
Q. What is Design Pattern?

Design pattern are formalized best practices that the programmer can use to solve common
problems when designing an application or system. Types of Design Patterns are Structural,
Creational and Behavioural.
MVC architecture is one such design pattern which is based on OO-P to deal which common
problems in the programming of creating an object, deleting, passing parameters to an object, event
handling, reducing complexity of the code, reusability etc
P a g e | 13
Q. What is MVC Architecture?
Q. What are different types of Views?

• Java script – majorly used during dynamic programming
• XML views ( widely used SAP UI5 programming)
• JSON views
• HTML views
Q. What are components of a View?

A view has two methods which are available as part of the view.
getControllerName: function(){
Return the controller name of the view;
}
createContent: function(){
Return objectOfUIControl;
}
Q. What are different methods in a Controller?

The Methods Forming part of a Controller are known as HOOK Methods
onInit() – this method gets called when the object of the controller is instantiated
onExit()-
onAfterRendering()
onBeforeRendering()
Q. What is the purpose of index.html?

index.html is used to: 1. Create object of the view & 2. Add it to the DOM
Q. Steps in which SAP UI5 framework executes and application

P a g e | 14
Step 1: Gets the controller name (getControllerName )
Step 2: Creates object of the Controller
Step 3: pass the object of the Controller to the content (createContent)
Q. How to specify the path of the root folder, in the app, where your view and controller resides?
It is defined by specifying the path in data-sap-ui-resourceroots inside the initialization block under
<script> tag in the header of index.html
data-sap-ui-resourceroots=‘{ “rootnamespace” : “./” }’
Q. Naming a view / controller
Q. How to validate a JSON?

jsonlint.com
Q. How to declare different views in JS?

sap.ui.core.mvc.ViewType.JS
sap.ui.core.mvc.ViewType.XML
sap.ui.core.mvc.ViewType.JSON
sap.ui.core.mvc.ViewType.HTML
P a g e | 15
Q. Can we have multiple views in a project?
Yes.
Q. Can we have multiple varieties of views in our project?

Yes. Best practice says keep only one type across.
Q. Can we have a single controller for all the views?

Yes. Best practice says that we should have one controller per view. Vice-versa is not possible. This
means we cannot have multiple controllers per view.
Q. Why you see XML views are preferred, Why SAP recommends XML views, Why standard Fiori
Apps delivered by SAP has XML views only?
MVC – Model View Controller is the Design Pattern we are using.
In order to avoid developers coding any processing logic inside a view, we use xml view. This will
prevent MVC violations.
The parsing of xml is faster than JS views.
XML is standard in industry for creation of user interface.
Q. What is XML?
XML stands for eXtensible Markup Language. It was initially designed for common language for
communication (data transfer) between heterogeneous (multiple) technologies.
To create and process XML, an XML document has to be provided with interfaces/classes and APIs.
When we convert data type (int. table, collection, array) to XML à Rendering
When we convert XML to data type (int. table, coll, arr) à Parsing
IF_IXML, CL_XML_DOCUMENT…IF_IXML_NODE etc. (XI)
Q. Define Structure of an XML document
P a g e | 16
If we have multiple variety of nodes, we can choose which type node we want to create, to do that
you need to use namespace concept in XML. So in the root of XML we can define a recognizable
identity to type of node.
Sap.ui.core, sap.ui.commons, sap.m à XML elements to be created based on these libraries

XMLNamespace is defined representing an alias name for the control library
namespace:<controlname(Button)>
Q. Declaration in XML view
Q. what are different models in Sap UI5?

Models are objects of Data
Q. What are the Steps to define a model object

1. Define the model object
var <modelobj> = new sap.ui.model.json.JSONModel()
sap.ui.model.xml.XMLModel()
sap.ui.model.resource.ResourceModel()
P a g e | 17
sap.ui.model.odata.ODataModel(), sap.ui.model.odata.v2.OData()
2. Load or set data to model object
.setData(), .loadData()
3. Make the model aware to UI5 application, View or UI Control
sap.ui.getCore ().setModel(<modelobj>, <nameofmodel>);
St. If we do not pass the <nameofmodel> this model acts like default model for entire application
and all UI controls will seek data from this model. If there are multiple models in a single application,
this becomes a confusion for application and UI controls to pick data from which model? In this case
we will give an identifier to the model which we are setting as model name. in order to refer the
model name we use “modelname>”
Q. How to build a path to bind view elements to JSON data?

For eg: for a JSON Data below:
{
"empStr": {
"empNo": 100,
"empName": "Anubhav",
"salary": 900,
"curr": "EUR"
},
"empTab": [{“empNo”: 200}, {“empNo”: 300}, {“empNo”: 400}]
}
Every curly braces or bracket will be converted to a forward slash (/), In case of table include index
(starts with 0) in path
/empStr/empNo – path for employee number
Path for salary - /empStr/curr
Employee number for 2nd record -- /empTab/1/empNo
Q. What is binding?
To change and access the data in the model object we use binding.
Q. What are types of Binding Modes?
P a g e | 18
Q. what are different APIs to access and change the data in the model object?
oModel.getProperty(“path”) – returns the data at the path level
oModel.setProperty(“path”, “value”) – change the data inside model object.
Q. What are default binding modes for different Models?
Q. API to change the default binding mode?

In the Controller, we can set the default binding mode for the Model:
OR
Q. What are different types of Binding Types in SAP UI5?

Ans.
1. Property Binding – bind input fields “value” property to JSON path
2. Expression Binding – binding achieved by implementing a logic/expression without much

coding in the controller( can’t be debugged). For Expression binding to work, you need to
specify complex binding mode in the initialization
** refer SDK for literals / symbols used in expression binding
P a g e | 19
3. Aggregation Binding – to connect UI control with multiple set of elements, you need to use
aggregation of the control. Eg. Table-rows. So whenever there are multiple elements, it has
to be achieved by aggregation binding.
4. Element Binding
Q. Advantages of SAP Fiori

Ans.
1. Responsiveness
2. Device Support
3. Platform Independent
4. Browser Support
5. Coherent in nature
6. Integration
7. Open standard
8. Documentation
St. A Container control has an aggregation called pages: and in this aggregation we are going to
create array of views
Q. Structure of an App Control

Step 1: which view you are going to load to the app control (default view)
Step 2: Make view aware to the app, by adding object of the view (page) to the app
Now in the Main.View in the createContent Method we return the object of the main view. i.e page
To make it look simple, and like standard UI5 code
P a g e | 20
Q. Steps to Create a control in the UI?
Ans. Creation of Event for the Control (eg: Button) and defining the event in the controller and add
the control to the page
Q. API to navigate to another view?

Ans. app.to
Q. To Access the object of the control , how to get the runtime instance of the object?
Ans. sap.ui.getCore.byId (“”)
P a g e | 21

UI5 and Fiori Interview Questions

Uploaded by

Copyright:

Available Formats

UI5 and Fiori Interview Questions

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

UI5 and Fiori Interview Questions

Uploaded by

Copyright:

Available Formats

What is SAP UI5 Framework?

What is SAP UI5 Framework?

What are the steps to follow in any programming language to develop an application?

What are the steps to follow in any programming language to develop an application?

UI5

and Fiori Interview questions

Q. What is SAP UI5 Framework?

Q. What is SAP UI5 design-time & runt-time component ?

2. Declaration – Data variables used in program – Create UI Control

var var_name = new libraryName.ClassName(sId, sProperties);

Q. Define structure of a Web Application / HTML page?

Q. What is SAP WEB IDE?

Q. Difference between HTML and HTML5?

Q. Difference between HTML5 and SAP UI5?

Q. Difference between Open UI5 and SAP UI5?

Q. What is metatag in html?

Q. What are List tags in HTML?

Q. What are block level elements?

span – inline element

Q. What is DOM ( Document Object Model ) ?

meta title Div Input H1,h2 Img Ol,ul

F12 is the key to open internet developer toolbar / developer tool

Q. Define HTML table structure?

Q. Define <iframe> tag.

Q. What is Inline Styling?

Q. What is Internal Styling?

Q. What is CSS box model?

Q. What is a pseudo class in CSS?

Q. What are types of JavaScript(JS)?

Q. What is the purpose of JavaScript(JS)?

Q. Steps/Techniques to apply JavaScript in the code?

Q. What are different Output Functions in JavaScript?

Q. What are the pre-defined objects available in JS?

2. window – this is the object of browser window

Q. What is the syntax to create variables in JS?

Q. What is JSON- Java Script Object Notation?

Q. What are different types of functions in JavaScript?

Q. How to attach js to the elements?

A JS event can be defined by suffixing the activity name by “on”

Syntax to consume a jQuery:

Q. Syntax to use jQuery

Q. What is Chaining concept in JS?

A UI control is a CLASS in the framework which consists of properties, associations, aggregations,

Q. What are setter and getter methods in SAP UI5?

Q. What are different ways to obtain object of SAP UI5 control?

2. Using View object when we use MVC architecture (XML Views)

this keyword represents the object of current control.

Q. How to create control in UI5?

Q. Define Control Hierarchy of a SAP UI5 control?

Points to be remembered while applying SAP UI5 hierarchy:

Q. Define Association in Object Oriented Programming

Q. What is Design Pattern?

Q. What are different types of Views?

Q. What are components of a View?

Q. What are different methods in a Controller?

Q. What is the purpose of index.html?

Q. Steps in which SAP UI5 framework executes and application

Q. Naming a view / controller

Q. How to validate a JSON?