Scribd
Upload
678 views

130 SAPUI5, SAP Fiori, HTML, CSS, JavaScript & JQuery, Interview Questions & Answers

The document provides a summary of 20 interview questions and answers related to SAPUI5, SAP Fiori, HTML, CSS, JavaScript and jQuery. It includes questions about the advantages of SAP Fiori Launchpad, the structure of an app control in SAPUI5, how to create a control in the UI, navigating between views, accessing runtime instances of controls, what SAP UI5 and its design-time and run-time components are, and the basic steps to develop an application in any programming language. The document aims to help candidates prepare for technical interviews by providing example questions, answers and additional tips.

Uploaded by

Shubham Sharma
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
678 views

130 SAPUI5, SAP Fiori, HTML, CSS, JavaScript & JQuery, Interview Questions & Answers

The document provides a summary of 20 interview questions and answers related to SAPUI5, SAP Fiori, HTML, CSS, JavaScript and jQuery. It includes questions about the advantages of SAP Fiori Launchpad, the structure of an app control in SAPUI5, how to create a control in the UI, navigating between views, accessing runtime instances of controls, what SAP UI5 and its design-time and run-time components are, and the basic steps to develop an application in any programming language. The document aims to help candidates prepare for technical interviews by providing example questions, answers and additional tips.

Uploaded by

Shubham Sharma
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 67

130 SAPUI5, SAP Fiori, HTML, CSS, JavaScript

& jQuery, Interview Questions & Answers


By Charulata Borkar - February 6, 2020

After I published my interview questions on SAP HANA ABAP, there were lots
of request for next series of interview questions and answers. As I
mentioned in my other article, we cannot judge someone’s knowledge by how
they answer some questions. There are very good technical architects who
can design are deliver complex projects but if they were to appear for an
interview, they might not come out with flying colors.

Reason is simple. Sometimes, interviewers are in a mode of rejection (in which case,
even God cannot help you) and other times, the candidate is not coherent in speaking
out the right answer in sequential and logical format (even though they know the exact
answer).

I have faced few interviews in my career and I believe, interviewers hunt for some key
words. If they find those words they are expecting in your answer, they are inclined
towards selecting the candidate.

With the hope that these questions and answers will help that needful
candidate who wants to crack the interview for his next project/job, I have
made a question and answer series from my learning notes. Please note,
you still need to have your fundamentals clear by diving deep into each topic,
but this short Q&A might help you revise your understandings and test
yourself.

In between the Q&A, I have filled in some tips and notes. Do go through them as
well.
Also Take – Free Video Course on Associations in ABAP CDS on HANA

Q1. Advantages of SAP Fiori LaunchPad

1. Responsiveness

2. Device Support

3. Platform Independent

4. Browser Support

5. Coherent in nature

6. Integration

7. Open standard

8. Documentation

A Container control has an Aggregation called Pages and in this Aggregation we can create
array of Views.

Q2. 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
Q3. 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

Q4. API to navigate to another view?

Ans. app.to

Q5. To Access the object of the control, how to get the runtime instance of
the object?

Ans. sap.ui.getCore.byId (“”)

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

Q7. Evolution of UI technologies


Q8. What is SAP UI5 design-time & run-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)

Q9. Steps to follow in any programming language to develop an application?

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

Q10. How to load the Bootstrap for UI5 framework to work in the Offline
Mode?

Follow the syntax in index.html file:

Reason being: Since the WebIDE local installation runs on Orion Server, which has all
UI5 Framework Libraries pre-existing in the Server. To access the libraries in the
framework, we define neo-app.json which acts as an interface between Orion Server
->> Resources ( test ) to load the framework.

Also Watch – Free Video Course on Paramters in ABAP CDS on HANA

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

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 )
                </head>
                <body>
                                ( * place the control in the body )
                </body>
<html>
Q12. 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 )

Q13. What is HTML?

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.

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.

Q14. Difference between HTML5 and SAP UI5?

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

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

Q16. What is metatag in html?

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

Q17. What are List tags in HTML?

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>

Q18. What are block level elements?

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

It doesn’t starts from new line

It wraps an existing HTML element

Q19. What is DOM ( Document Object Model ) ?

Browser converts HTML in a tree data structure – This is known as DOM (Document
Object Model). Runtime structure of HTML in browser.

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

Q20. Define HTML table structure?

Also Watch – Free Video Course on Access Control in ABAP CDS on HANA
Q21. Define <iframe> tag.

<iframe> tag in HTML is used to embed another HTML document.

<iframe href=“(reference of the HTML


document)” width=“” height=“”></iframe>

Q22. What is CSS?

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 CS

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>

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

Q23. What is Inline Styling?

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.
Q24. What is Internal Styling?

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.

Q25. What is Responsive Web Design?

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.

Q26. What is CSS box model?

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

Q27. What is a pseudo class in CSS?


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

Q28. What is JavaScript?

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: Hello World -> helloWorld

Every
statement of JS should end with semi colon (;)

Object oriented

Q29. What are types of JavaScript(JS)?

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.

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

Also Watch – Free End to End Video Course on ABAP New Syntax

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

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>

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

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

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.
1. document.getElementById
– single element by its id (id of html element is unique)

2. document.getElementsByClassName
– list of all elements by class name

3. document.getElementsByTagname
– list of all elements having that tag

window – this is the object


of browser window

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

Q35. What is JSON- Java Script Object Notation?

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},
{“prop”: val, “prop”: val},
{“prop”: val, “prop”: val}]

Q36. What are different types of functions in JavaScript?

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.

Q37. How to attach js to the elements?

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”

e.g. onclick, onfocus,onmouseover.

Q38. What is jQuery?

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 à add to project
and reference locally

Reference from
internet – CDN(Content Delivery Network)

Pre-requisite to load jQuery Library ->

Syntax to consume a jQuery: i.e to


reference a jQuery library which is external JS file

                <script
src=“path of JS file”></script>
Q39. 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());

Q40. What is Chaining concept in JS?

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();

Also Watch – Free Video Course on ADBC Programming in SAP HANA

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

Q42. What is SDK? What does SAP UI5 SDK offers?

https://openui5.hana.ondemand.com/#/api
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

Link for ICON Explorer

https://sapui5.hana.ondemand.com/test-
resources/sap/m/demokit/iconExplorer/webapp/index.html

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

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. ( which are utilized when you
are creating Custom Control à Refer Custom Control Q&A further below )

Q44. 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 oSAPYard = 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.

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

sProperties:
the attributes/properties of the UI element. All the properties should
follow
below syntax

{
                propname: “prop val”,
                propname: “prop val”
}

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

Q47. 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.
Q48. 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

Q49. What is MVC Architecture?

Model View Controller

Q50. What are different types of Views?

Java script – majorly used during dynamic


programming

XML views ( widely used SAP UI5 programming)

JSON views

HTML views

Also Watch – Free Video Course on SAP OData Services

Q51. 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;
}

Q52. 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()

Q53. What is the purpose of index.html?

index.html is used to: 1. Create object of the


view & 2. Add it to the DOM

Q54. Steps in which SAP UI5 framework executes and application

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)

Q55. 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” :
“./” }’

Q56. Naming a view / controller


Q57. How to validate a JSON?

jsonlint.com

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

Q59. Can we have multiple views in a project?

Yes.

Q60. Can we have multiple varieties of views in our project?

Yes. Best practice says keep


only one type across.

Also Watch – Free Video Course on Introduction to HANA, HANA DB and ADT
for Beginners
Q61. 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.

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

Q63. 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)

Q64. Define Structure of an XML document


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

Q65. Declaration in XML view

Q66. What are different models in Sap UI5?

Models are objects of Data

Q67. 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()
                                               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>);

Statement: 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>”

Q68. How to build a path to bind view elements to JSON data?

For eg: for a JSON Data below:

{
                “empStr”: {
                                “empNo”: 100,
                                “empName”: “SAPYard”,
                                “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 2 nd record — /empTab/1/empNo

Q69. What is binding?

To change and access the data in the model object we use binding.

Q70. What are types of Binding Modes?


Also Watch – Free Video Course on HANA Models for Non Modelers

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

Q72. What are default binding modes for different Models?

Q73. API to change the default binding mode?

In the Controller, we can set the default binding mode for the
Model:

OR

Q74.  What are different types of Binding Types in SAP UI5?

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

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.

 OR

4. Element Binding

Typically – in a Master-Detail
Functionality in SAP, whenever, user clicks on a Master
record in the view,
corresponding detail data is displayed in the Detail View

So, in order to get the selected


data into the corresponding UI :

Q75. How to get the object of the model?

var oModel = new sap.ui.getCore().getModel();

Q76. What is Template Aggregation of a Table Control?

A Template Aggregation of a control identifies how the control will be displayed on UI.
It provides the control with information about what type of control we want to assign
to the column and defines what kind of behavior is expected from the aggregation.
e.g. textfield, dropdown, label, radio, checkbox.

Q77. What is Relative Path?

A Relative path is the child node to the existing node.


Q78. What is Absolute Path?

Absolute path is direct children of root element

Q79.  What is a Formatter function?

In order to convert the format of the data before displaying on the UI, a function is
utilized to change the format of the data before binding it to the UI element. Such
functions are called Formatter Functions. In short, these functions are utilized to
format the data and its type, which is supplied to the UI.

Typically, the input to the function comes from


values of data source and output of
the function goes to the UI control as
final binding value.

For example : we have material data in our


database table and with that we have a
material creation data in format of
yyyymmdd, but on the screen we want to display
the date in format of
dd.mm.yyyy.mm/dd/yyyy.

Syntax:

New library.ControlName(“id”,{
                property: {
                                path: ‘model path’,
                                formatter: reference to the function
                }
});
.bindProperty(“path”, formatterFunction);

VIEW
CONTROLLER:
implement the function in the controller

These functions can be defined in separate file called formatter.js globally, and can
be utilized in any view-controller logic to apply the formatting.

Q80. What is a Scaffolding Template? ( Dependency Management )

Functions that are specific to a View and Controller are NOT re-usable. Especially
functions which are UI specific and not data intensive or application logic : when
required to be reused in other view-controller, need to be defined outside of the
particular view-controller area to achieve RE-USABILITY functionality. This concept is
called as Custom Control in UI5 where it’s a JS file with a set of functions which you can
reuse across multiple controllers of an Application to achieve necessary functionality such
as conversion, formatting etc. ( just like INCLUDEs or FUNCTION MODULES in ABAP)

This can be achieved using a statement called:

jQuery.sap.require(“module path”) – loading dependencies ( Obsolete


Now )

change of syntax from SAP 1.32 onwards using scaffolding template:

Scaffolding template: it used to declare any JS file in the


project. This is the way to
declare the resources of our application and also
manage all the dependencies
between modules.

Syntax:
So bring all the functions() from sap.ui.controller
to the scaffolding template

Create a global variable at controller level which is


utilized by all the functions:

And in your view: specify the function name as “oController.myformatter.function


name”

Also Watch – Free Video Course on HANA View Proxy

Q81. How to define “models” using scaffolding template ?

Bring your entire Model code from Init function of the controller to
model.js , this is
following MVC pattern in the architecture
Q82. What is the purpose of “ use strict “ in the controller?

The keyword “use strict” with throw a syntax error if the dependency is defined in
the scaffolding and not used anywhere in the controller logic.

Q83. Can we use Multiple Data Models in a single UI5 Application?


Yes, multiple data models can be used in a single application with different types as
well.

For eg. You can use all “4” different types of


data models and also more than 1 model
of each type.

In the Application,, Differentiation between the


models can be made when the
Models are defined as “Named Models”

So difference methods to create Models are :

Model created for a Master-Detail Application –


Episode 23

Add the dependency in the controller :

Call the model in the INIT method:


Q84. What is Resource Model?

Resource Model is used for Internationalization Purpose. ( Language Conversions )

Q85. How to create a Global Variable in controller.js file for core libraries?

Q86. What is “this” pointer in controller.js file?

Ans. “this” pointer represents the object of


the controller.

Whenever we want to access the object of


controller we use this  pointer inside the
controller methods. We must
pass the controller object to the event handler,
Otherwise the event handler’s this will only point to root control
object in code.

Eg:        //passing instance of controller to event handler as this pointer


              rowSelectionChange: [oController.rowSelected, oController],

Within the controller, if we want to obtain object of view, we can use


this.getView()
Q87. What are HOOK METHODS in a controller?

1. onExit() ->

This method gets


invoked when object of your constructor is destroyed: so all the
cleanup code
should be written in this method. It is the Destructor of the class

2. onBeforeRendering() ->> This method gets called before the UI is displayed to the
USER : i.e UI modification before it is displayed to the USER : eq. Auth checks, UI
modifications before the UI is rendered. But : effects like jQuery will not be displayed
since UI is yet to be displayed.

It is like
the PBO event in ABAP

3. onAfterRendering() -> this method is triggered once the UI is loaded/ so all your
“jQuery” effects and CSS can be applied in this method

Q88. What are DEBUG function keys in UI5?

Q89. What is Fiori?

Fiori is all about User Experience. UX

UI & UX – You can change the


User Interface, But you cannot change user
experience.

Fiori is a set of standard fiori


apps delivered initially by SAP known as X1 Apps. The
basis these apps are the
guidelines.

Key Features:

Integration capabilities

Great user experience across all devices,


Responsive

Supports all major browsers, OS

Single access point for all Fiori apps – SAP


Fiori Launchpad

Gets the business class user experience

Role based

Custom branding – Theme design


Typically, it’s a UX Designer’s job to see how an
application should look like, what
colors, themes , fonts are to be used. How a
user perceives the Application and
based on the feedback he can develop a
prototype and make the users experience it
live and take there observation and
suggestions into account.

For creating a Fiori Like App Prototype: you can


refer to: https://www.build.me/

Q90. How does a Fiori based UI5 application set-up look like?

(Here the container control acts as a parent control for all the views which
establishes the communication/navigation between different views)

Container Control ( it can be an App Control or a Split App control -> which is
essentially a “View” )

A “View” always returns a Page Control Object


This Page Object is aggregated in a Container Control
And this App control is then placed in the DOM of the browser

Also Watch – Free Video Course on HTC (Hana Transport Container)

Q91. How does an App control typically work?

It is important to note that “Every View returns a


Page Object”
In order to add the children in the Parent : use foll
code: “idSAPYard” is the “id” of
the App Control

oView.byId(“idSAPYard”).addPage(oView1).addPage(oView2);

And to Navigate from the first view to second view by clicking on a button in the first
view:

Refer : sap.m.Navigation for a View Object

For eg. To Display second View first


NOTE! -> note that, to refer, any Control or any Library or any Method for SAP Fiori
Based UI5 Controls/Elements refer SDK

Q92. What is List Control?

A List Control is a single column table. which


consists of a header/title property and
“items” aggregation, and each
element/row in the items aggregation is an “Object” .
A “template” property is used to determine the type of the column
Q93. What are different varieties of List Control “items”?

Please note ! -> that if you want to find more properties for a particular control : you
will always find it in the parent class

Also in case of aggregations-> they will always point to a “CLASS”


Which can navigate to different view/page : on
implementing the function in “press”
event

Q94. How to get the path of the element? ( V V IMPORTANT in how to get
control/element details in the function event object!
Get the path of the second view and then bind the
element to the path of the second
screen

And then Navigate to the second View :

And then to change it into Master-Detail app: change


the control in the App View as :

And Navigate using foll syntax:


FIORI USER EXPERIENCE -> “RESPONSIVENESS IN A MOBILE MODE”

Q95. What are different Features of a LIST Control?

1. Grouping/Sorting Items
2. Different modes of Selection
3. Delete Item
4. Search/Live Search / Fuzzy  Search ( suggestion )
Note!! -> That when you are not in the controller logic, in the event handler method
—debug mode, “this” pointer will not return anything, to get the object of the control
element, use “sap.ui.getCore()”

Q96. How to get Multiple Selected Items in a List Control in “MultiSelect”


Mode?

Get multiple selected items

var oList = sap.ui.getCore().byId(“idFirst–idSpidy”)


oList.getSelectedItems()
oList.getSelectedItems()[0]
oList.getSelectedItems()[1]

Q97. Difference between XML view and JS View?

When we give “id” to a control


in JS view, it is added to DOM as it is. That’s why you
are able to work with

sap.ui.getCore().byId(“id”)

When we use XML views the “id”


gets adapted automatically by SAP UI5 framework

It appends the parent id before control id e.g. if we have a list(l) inside a view (v) -> 
v–l

Inside event handler try below


code

this.getView()
this.getView().byId(“idSpidy”)
sap.ui.getCore().byId(“idSpidy”)

Q98. Creating a Filter on the List Items?


To apply multiple filters:

To note that, the Filter Operation is by default : “OR”


operation: to make it and you
need to specify as foll:

To know more about filters : visit SDK

Q99. Technique to Modularize your UI application/project

As far as dependency management is concerned, it


allows us to Modularize the
application control logic , by defining the dependency
in the SCAFFOLDING TEMPLATE :
but

Another techinique you can apply is by defining a


BASE controller : by applying the
logic of Inheritace: where the other
controllers can inherit the methods of BASE
controller, i.e build the fiori app
and reuse the controls : to avail the maintenance of
the code in Future !
Q100. What is a TABSTRIP control in SAP UI5?

In UI5, a TABSTRIP UI is implemented using ICON TAB


BAR

A typical ICONTAB FILTER can be implemented as


follows:

Also Watch – Free Video Course on Debugging for Beginners

Q101. Implement TABLE CONTROL in SAP UI5

A Table is a List Control with Multiple Columns. It


belongs to sap.m library, in SDK
when you check sap.m.Table, you will notice
that it “extends” sap.m.ListBase Class.
And to achieve multi column UI, it has
aggregation as “columns”

Q102. Which Control gives features such as colors and icons to a Text
Control?

And to achieve the “intuitiveness” in the table


column, create a formatter function:
CREATE THE myformatter object in the controller

Similarly, you can return an “icon” by writing a


formatter function for the same:

Q103. What are Fragments in SAPUI5?

Fragments are reusable UI parts,


Used for modularizing the UI in UI5 applications.
Just the way we use
custom controllers in UI5 to modularize JS code, we are using
the fragments to
break down UI into pieces. These pieces can further connect or
reused by other
view/controller. So the logic for Fragment Control elements is defined
in the
corresponding controller of the View in which the fragment is declared. ( to
hear to more example based explanation : please listen to the video ? )

Q104. How to declare Fragment in a View ?

Step 1: Create an Input Field for F4 help where you


can call the pop-up fragment:
using method “valueHelpRequest”

So, when you are implementing sap.m.Dialog in your


Fragment : check in SDK : the
methods available to open/close the dialog (
Refer screenshot )
Screenshot below will show the open method being
called for supplier dialog box :

Implement “onConfirm” method, in the host controller:


follow steps in console to get
the item clicked in the fragment pop-up
Q105. Example of a Sample code to add pop-up fragment for filtering
“Master List Item”?

NOTE! -> this will explain you the concept of Fragment defined once and re-used
multiple times

Q106. How to add footer for a “Page”?

Implement the Code for the Filter Button :


Another Example for the footer : -> ( Create
Approve Button on the Detail Page )

And using the message-box API -> display the


pop-up message on click of “Approve”
Button
Eg: Supplier Pop-Up

NOTE!! Always remember, inorder to retain the I/O on the pop-up fragment, always
define a global variable for the object, so that the properties of the pop-up are
retained if any user-action is done on the pop-up.

Q107. How to do Dynamic Binding for a Fragment?

So, in order to populate the fragment dynamically and


handle the binding of the
fragment, we have to pass the information to the
“object of the fragment”

Q108. Create a pop-up fragment at the table level?


Create an Input field column at table level

Define property showValueHelp=”true” for the Input field and


valueHelpRequest=”onCity”

Define function onCity in the corresponding controller

SetSelectedvalue in the pop-up back to the input field -> function “onConfirm”

*** try .addDependent for the pop-up to make “this.getView()” to work to get
the ID
of the control

Q109. How to Embed a Fragment Directly to the View and achieve


Change/Display Functionality?
Define Fragments

Create Fragment XML

Define a property for dynamically


changing the visibility of the fragments, inside
the Model
Add Button to Flip the
Fragments (on action of the Button Press and SAVE Button
to save the edited
values)

Define function “changeMode” to


make it work!

Q110. How to pass AND/OR for multiple Filters?

The
syntax to add multiple filters is :

var oFilter = new


sap.ui.model.Filter(“name”,sap.ui.model.FilterOperator.Contains,searchString);

var oFilter1 = new


sap.ui.model.Filter(“ID”,sap.ui.model.FilterOperator.Contains,searchString);

var comFil = new sap.ui.model.Filter([oFilter,oFilter1]);

Also Read – End to End ABAP on HANA Tutorials

Q111. What is the significance of the “this” pointer? (Current controller


object)

“this” pointer always points to the object of the current view.

Q112. What is Custom Control and what is the Purpose of a Custom


Control?

*** UI Controls / Elements are UI5 reusable


components which one can use to
achieve certain functionality on the UI
In order to achieve a functionality, not available in
Standard, one can design your
own control ( in a separate file which acts as
library ) which is re-usable.

The Super Class for all the controls is: sap.ui.core.Control

Which is used to
design/define a custom control

Keyword to indicate inheritance


in JS. extends

Q113. What is a Renderer Function? What is the purpose of Renderer


Function?

A renderer converts the code to equivalent HTML, CSS, JS code which the browser
can understand.

So what forms a part of renderer function is: writing


an equivalent HTML code inside
the function.

To tell the browser where exactly the equivalent code


exists à is in the Object “oRm”
& “oControl” ( see image above )

Q114. Steps to Create / Design your own Custom Control.

(
eg. <h1> tag which is not given by SAP UI5 standard )

Step
1. Create New folder “Controls” in your application Project

Step
2. Create File “<name>.js in the Control Folder

Step
3. Define Scaffolding ( dependency ) using sap.ui.core.Control inside your js
File
and define Function inside the scaffolding

Step
4. In the return function: define the Control inside
Control.extend(“<path>”); 
** path
= workspace.controls.libraryname

Step
5. Follow the Syntax ( refer image above )
Refer to Control Documentation -> SAP UI5 SDK

Q115. What is the purpose of neo-app.json?

It works as an interface between your app ( WebIDE test-resources ) and Orion


Server to access / instantiation all the libraries in your UI5 framework which exist in
the local SAPWebIDE installation folders, in order to run your app on the offline-mode.

**  In Order to
check the version of your UI5 app -> press CTRL+ALT+SHIFT+P
Q116. What is Component.js ?

Component.JS wraps the functionality of entire application. It also provides an “entry


point” for our Fiori App.

Whats
a Fiorilike App –  Application which has Component.js inside.

To get away with the dependency on Index.html.

Important Point:

If you want to integrate your Fiori Application


with SAP Fiori Launchpad, you must
have
to have the Component.js file in your project.

Purpose of Component.js

Seamless integration with Fiori Launchpad

Includes all the dependencies of Fiori app on


other Fiori

Metadata information of project e.g. version,


name, author, template version

Navigation concept for entire UI5 application –


Router

Dependency on SAP UI5 framework ( eg. Lazy


loading Concept)

Ability to define data models at design time


(JSON, XML, RES., ODATA)

Includes the OData Service configuration

Fiori application id and app (S/4)

Advanced configurations (ALP, OVP)

Extensibility concepts

Important Note! ->

There is always one Component.js at webapp


level.

Naming Convention: file name has to be C


capital rest all small and java script file
= Component.js

Is an inheritance from sap.ui.core.UIComponent


class

Syntax:
sap.ui.define([“sap/ui/core/UIComponent”],
function(Component){

                return Component.extend(“path”,{


                                metadata: {},
                                init: function(){},
                                destroy: function(){},
                                createContent: function(){}
                });
});

( Information OLD Fiori Apps : )

sap.ui.core.UIComponent.extend(“namespace<path>”,{});

ex: to define component container in the index.html

and instantiate in the init method of component.js

replace all the code in the DOM with Object of


Component Container

Place the code in the CreateContent() Method of


Component.js

Check the DOM -> in developer tool


Q117. What is the purpose of manifest.json?

manifest.json, also known as App Descriptor, is a file used as a link to Component.js ,


which stores metadata associated with an application à i.e. the
configuration/information required for the browser to understand, and how an
application should behave when it is deployed.

i.e. Version, Device Information, Application


Properties ( ID, Type, Title, Desc),
Language Translation, Launchpad
Integration, Backend Services ( OData), rootView,
dependencies, models ( data
models ), navigation ( routing concept) etc.

Q118. What is a rootView section in manifest.json file?

It tells the system which is the Starting / Initial View for the application

Lazy = true tells the application not to load the


library unless it encounters a View/UI
screen which uses the library (saves
time for initial loading of your app à performance
purpose )

Q119. How does Navigation typically work in the browser? ( <- -> when
users clicks the back and forth button )

A browser tracks the history of each selection on the webpage which has its own
“tag” ( a unique identifier – in its unique state ) which allows it to restore the page
when the user clicks on <- -> button in the browser.

Q120. What are the short-comings or not having “Navigation” / Routing


Concept in an App?
When we select multiple items one by one and
press back button, system does
not load the previously selected item

When we select an item and reload (refresh) the


app, it starts the app all over
again, doesn’t take to restore the last status
of the app.

We have to manually create the object of all


views by ourselves

Back and forward navigation of browser will not


work in case of the app

Also Read – SAP Fiori End to End Tutorial

Q121. What is Router Concept in SAP UI5?

A Router is defined in manifest.json file using Routing Configuration

Allows back-forth navigation using browser

Creates the view objects automatically for us

Enables navigation from one page to another

Mark every page with a unique tag name (hash


tag)

Restore the state of UI.

Steps to implement a Router:


Router is a ready-made object which is available in
UIComponent class.

Define the routing configuration in


manifest.json

Initialize the router,


this.getRouter().initialize();

You can access router object and use navTo API


of router object to navigate to any
view

Q122. What is Routing Configuration?

It consists of two Parts:

 Configuration Section

1. Router class

2. Mention the folder where all views reside

3. Type of views

4. Container that contains all the views ( App / Split App etc )

Routes Section (Multiple Routes à Multiple Views)


1. Each route contains a tagName

2. View that should be loaded which is called as “target” à viewName, id, where to
load ( pages)
Master/Detail 

Eg:
URL will be like below  for the routing tag name.

Q123. How to Obtain Router Object from the Component.js?

Q124. Defining a Unique Tag (ID) for each click and each object list item in
the Master List?
Another way of passing the parameter :

And the resultant URL changes:

Q125. What is the concept of Route Matched Handler?

Ans.: The Concept of Route Match Handler captures the


information of the last page
and retains it on pressing back and forward button
on the browser: it re-stores the
state of your page even when the session is
timed-out

Route
Match Handler example in Master Controller:
** Steps to get ES4 Gateway Server connection on sap
cloud – vid 34

Q126. What is OData?

Open standard

Easy to implement

It is STATELess ( call to back end – send


response – doesn’t store the state of the
transaction in the application layer
as opposed to Webdynpro where the contexts,
variables, db locks is stored in
the application layer )

Complexity behind Data manipulation

Support CRUD (Create, Read, Update, Delete)

Latest version of OData in market is V4

An OData Service includes


Service Document – Displays all the available
EntitySets to apply operation on
data.

Service Metadata Document – Talks About all the


data about data (entitytypes).
E.g. for an entityset it includes entitytype.

EntitySet – representation of a
real-world object e.g. Material, Sales Order, Sales
Order Item etc. All the CRUD operations are applied on
Entityset – Entity set can be
identified in the metadata of the Service :

EntityType – definition of data,


it includes all the properties of an entity e.g. for
material entity we have
material no, mat group, storage unit, mat class….
https://sapes4.sapdevcenter.com/sap/opu/odata/iwbep/GWSAMPLE_BASIC/

Key of the Entity Set can be identified as below:

A typical URL for an OData Service: which basically


gives Metadata ; Use  XML View
Plugin to your browser to view the metadata in a proper format

Following are the URL’s *as an example* to access different documents of an OData
Service:
Q127. How to access huge amount of data from an OData Service, if the App
in used on a Tablet or Mobile which cannot handle that load?

Ans. In SAP Fiori, this is achieved by “Paging” and


“Filtering” mechanism : $<batch>

Examples of the URL’s to achieve that:

Note! -> there’s no need to type all these paging and filtering statements in the
service URL, SAP Fiori is capable to create that URL with the relevant filter/paging
statements

Q128. Explain the concept of “Association”.

Ans. To minimise the no.of calls along the network it


is essential that you build a
relationship between two entities, this is
possible with the help of “Association”. With
Association, it is possible to
load the data of Dependent entities along with the
Principal Entity à Using navigation
property(which is only created provided you have
an association between
entities) we can navigate and read dependent data.

Q129. How to connect to Odata Service from your Fiori App?

Ans: using neoapp.json -> points to destination


specified in destination file

The following diagram explains briefly how Odata


Service connects to an App in the
development environment on different premises
( internet / local )
Structure of the File: to be saved to location :
While using WebIDE Personal Edition*

<your
webide folder>\eclipse\config_master\service.destinations\destinations

For more information, read documentation available on


SAP Help Portal:

https://help.sap.com/viewer/825270ffffe74d9f988a0f0066ad59f0/Cloud/en-
US/fb956be1440745f89f1445e605096af8.html

Q130. Applying paging concept on the List Control in the UI5 App

And to see the network calls for the service url in


the browser:
On scrolling, it loads the next batch of 10 records
and the $batch , url parameter will
look like this

 Similarly for
“search” function : on clicking search button in the app :

The network output is :

This is a list of my personal notes from various books and training.


Sometimes, asking questions help you clarify the concepts. You tend to dig
deeper to find the answers and that is how we learn better.

In our real projects as technical consultants we ask the business and


functional consultants WHAT has to be done? We ask our seniors or
technical architects, HOW it has to be done? But the real question we
should ask them and to ourselves while working on any development is,
WHY are we doing it? WHAT is the business reason behind it? Only then,
we will get better clarity and our concepts get cleared.

You gave lots of love and shares to my previous 115 ABAP on HANA Interview
Questions & Answers. If you like this list, please do share the page with your
contacts, colleagues and team members. You never know, someone other than you
might be benefitted.

Please add SAPYard’s Whatsapp Number to your Contact List and send a
whatsapp app message ‘LEARN’ to +1-646-727-9273/+1-646-SAP-YARD to
be part of our Learning Community. You may Whatsapp message using this
direct link.
Please SUBSCRIBE to SAPYard’s Youtube Channel for Free End to End SAP
Video Course and Training.

We have a very active Telegram (App) SAP Technical Group with more than


6020+ SAP Technical Practitioners from 6 Continents of the SAP World.
Please join it using below link.

Telegram SAP Technical Discuss Group. You need to install the Telegram App
first on your mobile device. Once you have it on your mobile, you can join the
group and also access it from the Web on your computer and laptop.

Step by Step SAPUI5 Tutorials

You might also like