Introduction

SAP and SAP technology provides enormous opportunity in IT industry. With increasing operations and market, the need of SAP technical consultants has observed sharp increase in job opportunities. The main job profile for SAP technical consultants is primarily based on ABAP (core ABAP and OOPs ABAP) and Fiori/UI5. In this article we will discuss SAP UI5 Interview Questions asked by interviewers from technical consultants of different years of experiences.

Basic Website Development Interview Questions

Ques 1. Explain the concept of Client and Server.
Ans. The client-server model is a fundamental concept in computer networking and refers to the way that two separate software systems interact with each other to request and deliver data.
The client is the system that initiates a request for information or resources from another system, known as the server. The server is responsible for providing the requested data or resources to the client. The client and server communicate with each other through a well-defined protocol, such as HTTP, to ensure that the request and response are properly structured and understood by both parties.
For example, when you visit a website, your web browser acts as the client, sending a request to the server hosting the website for the HTML, CSS, and JavaScript files that make up the page. The server then responds with the requested resources, which the browser uses to render the page on your screen.
In general, the client-server model provides a clear separation of responsibilities between the requesting and responding systems, allowing for more modular, scalable, and secure software architectures.

Ques 2. What is a protocol on the Internet?
Ans. A protocol on the Internet refers to a set of rules that govern the communication between two or more systems. It defines the format, timing, sequencing, and error-checking of data transmission to ensure that information is properly exchanged between the systems.
Protocols are necessary for the smooth functioning of the Internet, as they allow different systems to communicate with each other regardless of their underlying hardware, operating system, or programming language. Some common Internet protocols include:

1. HTTP (Hypertext Transfer Protocol) – used for transmitting web pages and other information on the World Wide Web.
2. SMTP (Simple Mail Transfer Protocol) – used for sending emails.
3. FTP (File Transfer Protocol) – used for transferring files over the Internet.
4. TCP/IP (Transmission Control Protocol/Internet Protocol) – a set of communication protocols that provides the underlying structure for the Internet.
5. DNS (Domain Name System) – used for converting domain names into IP addresses.

Each protocol defines a specific set of rules and standards that must be followed by the systems that use it, ensuring reliable and consistent communication on the Internet.

Ques 3. How Internet and website do work?
Ans. The Internet and websites work by connecting computers and other devices through a network of servers, switches, and routers. These components use a set of protocols, such as TCP/IP, to communicate with each other and transfer data across the network.
Here is a simplified overview of how the Internet and websites work:

1. A user opens a web browser on their device, such as a laptop or smartphone, and types in a web address, such as “www.gocoding.org“.
2. The browser sends a request for the website’s information to a Domain Name System (DNS) server, which converts the web address into an IP address, the numerical identifier for a server on the Internet.
3. The request is then sent to a server hosting the website, which sends back the necessary files, such as HTML, CSS, and JavaScript, to display the website.
4. The browser renders the website on the user’s device, allowing them to interact with it by clicking links, submitting forms, and viewing dynamic content.
5. If the website requires data from a server, such as a database or API, the browser sends a request to the appropriate server, which sends back the requested data.

This process happens in a matter of milliseconds, allowing the user to quickly and seamlessly interact with the website. The underlying technologies that make this possible, such as the Internet, the World Wide Web, web browsers, and web servers, work together to provide a seamless experience for the user.

Ques 4. What are scripting languages? Explain the types of Scripting language.
Ans. Scripting languages are programming languages that are used to write scripts, which are small programs designed to automate tasks or provide dynamic behavior in other programs. Scripts are usually interpreted, as opposed to compiled, which means that they are executed line by line as they are written rather than being translated into machine code before they are run.
There are several types of scripting languages, including:

1. Shell scripting – used for automating tasks on Unix-based operating systems, such as Linux and macOS.
2. Perl scripting – used for a wide range of purposes, including text processing, web development, and system administration.
3. Python scripting – used for web development, scientific computing, and artificial intelligence, among other things.
4. JavaScript – used for client-side web development, where it is used to add interactivity and dynamic behavior to web pages.
5. PHP – used for server-side web development, where it is used to generate dynamic web pages and interact with databases.

Scripting languages are generally easier to learn and use than more complex programming languages, and they provide a quick and flexible way to automate tasks or add dynamic behavior to other programs. However, they are not as fast as compiled languages and are not always the best choice for performance-critical applications.

Ques 5. What is an API?
Ans. API stands for Application Programming Interface. An API is a set of rules, protocols, and tools that specifies how software components should interact with each other. It provides a way for different systems to communicate and exchange data, allowing them to work together to perform complex tasks.
An API defines the way in which one piece of software requests and receives information from another piece of software. For example, an API could allow a website to retrieve data from a database or access functionality provided by a software library.
APIs are used in a wide range of applications, including web development, mobile app development, and software integration. They are an essential component of many modern software systems, as they provide a way for different systems to communicate and collaborate to achieve common goals.
APIs can be provided by a variety of sources, including web services, software libraries, and operating systems. They typically specify the format of data that can be exchanged between systems, as well as the actions that can be performed and the expected results. This allows software developers to build more complex systems by combining the functionality provided by different APIs, rather than having to write all of the code from scratch.

Ques 6. What is an AJAX call?
Ans. AJAX stands for Asynchronous JavaScript and XML. It is a technique used in web development to create fast and dynamic web pages.
An AJAX call is a request made to a server from a web page, without reloading the page. The request is made in the background, asynchronously, while the user continues to interact with the page. When the server responds to the request, the JavaScript on the page can update the content without having to reload the entire page.
This enables web developers to create more interactive and responsive user experiences, where only the necessary parts of a page are updated, rather than reloading the entire page for each request.
To make an AJAX call, a developer typically uses JavaScript and the XMLHttpRequest object to send a request to a server and receive the response. The response from the server can be in various formats, such as XML, JSON, or plain text, and the JavaScript can then process the response and update the page as needed.
AJAX has become a popular technique for building modern web applications, as it enables developers to create dynamic, fast, and responsive user interfaces that provide a seamless experience for the user.

Ques 7. What is a Metadata?
Ans. Metadata is data that provides information about other data. In other words, it is “data about data.”
Metadata is often used to describe various aspects of digital content, such as the title, author, creation date, and format of a document or image file. In the context of databases, metadata can describe the structure of data, such as the names and data types of columns in a table.
Metadata can also describe relationships between different data elements, such as the parent-child relationship between different nodes in a hierarchical structure.
In the context of the internet, metadata can describe the structure and content of web pages, and can be used to improve search engine results by providing information about the page’s content and relevance to certain keywords.
Metadata is often used to provide additional information or context to data, making it easier to understand, manage, and use. It can also be used to support various processing and analysis tasks, such as data mining and machine learning.

Ques 8. What is a JSON?
Ans. JSON stands for JavaScript Object Notation. It is a lightweight data interchange format that is easy for humans to read and write and easy for machines to parse and generate.
JSON is based on a subset of the JavaScript programming language, and is used to represent data structures such as objects, arrays, and values in a way that can be easily understood and processed by both humans and computers.
A JSON object is a collection of key-value pairs, where the keys are strings and the values can be of various data types, including strings, numbers, objects, and arrays.
JSON is widely used for data exchange between the server and the client in web applications, as it is a compact and efficient way to represent complex data structures and is easily supported by many programming languages, including JavaScript, Python, Java, and C#.
JSON is also commonly used in REST APIs, where it is used to transmit data between a server and a client in a standardized format. The simplicity and readability of JSON has made it a popular choice for data interchange in a variety of contexts, and it is widely supported by modern software and tools.

Basic JavaScript Interview Questions

Ques 1. How are variables defined in JavaScript?
Ans. There are three ways to define a variable in JavaScript. They are let, const, and var.
The basic differences between let, const, and var are:
1. var has global scope, i.e., can be reused in all sub-functions if declared in the main function. While const and let have block scope and can be used only within the function scope where they are declared.
2. var can be redeclared and updated, let cannot be redeclared but can be updated, while const can be neither redeclared nor updated.

Ques 2. What is an Array in JavaScript? What is its notation?
Ans. An array is a variable that can hold more than one value of different types.
Notation: var aSubjects = [“Science”, “Maths”, “English”];

Ques 3. How to access JavaScript data from an array at a particular index?
Ans. Using bracket notation with index, i.e. aSubjects[2] for the above array will print “English”. We can also use .at() method, and get same result i.e. aSubjects.at(2).

Ques 4. From where the index of the JavaScript array starts?
Ans. It start from zero (0).

Ques 5. What is an Object in JavaScript?
Ans. In JavaScript, an object is a data structure that consists of key-value pairs. The keys are used to access the values stored in the object. Objects can be used to model real-world entities, and they can store data, as well as functions (known as methods) that can be used to manipulate that data. Objects in JavaScript are mutable and can be dynamically extended or modified. They are also reference types, meaning that when you assign an object to a variable, you are actually assigning a reference to the object, rather than a copy of the object.

Ques 6. How to access data from an object at a particular index in JavaScript?
Ans. Objects do not respond to any index directly. But we can generate an array of the keys for this object using Object.keys() and then use the index to get the key we are planning to target, and thereafter use that key to fetch value from object.
Example for the same is shown below:

var obj = {country: 'India', Name: 'Rudra', Town: 'Mughalsarai'};
var keys = Object.keys(obj);
console.log(obj[keys[1]]); // 👉️ Rudra

Ques 7. How to add and remove data from JavaScript array at different indexes?
Ans. With the help of indexOf and splice, we can remove or add any data at a particular index of the array.
Example: To delete at a certain Index

var array = [10, 20, 30];

console.log(array);

const index = array.indexOf(20);
if (index > -1) { // only splice array when item is found
  array.splice(index, 1); // 2nd parameter means remove one item only
}

// array = [10, 30]
console.log(array);

Example: To add at a certain index

var arr = [10, 30, 40, 50];
console.log(arr); // 10, 30, 40, 50
arr.splice(1, 0, 20);
console.log(arr.join()); // 10,20,30,40,50

In the above code, we first spliced the array and added 20. After that, joined the array back. Read more about Splice here.

Ques 8. How to add and remove data from JavaScript Object at different indexes?
Ans. The concept of an index doesn’t apply to Objects directly. Still, we can fetch keys of objects in the form of array, get required key based upon an index, and then remove that key-value pair from the object.

var obj = {country: 'India', Name: 'Rudra', Town: 'Mughalsarai'}; 

var keys = Object.keys(obj); 

console.log(obj[keys[1]]);
// delete a data
var key = obj[keys[1]];
delete obj[key];

For addition, the index doesn’t matter, you can just add using obj.newKeyName = newValue;

Ques 9. How to access JSON data in JavaScript?
Ans. To access JSON data in JavaScript, we need to convert it into JavaScript Object using the command JSON.parse().

Ques 10. How to send JavaScript Objects in the form of JSON?
Ans. To send a JavaScript Object in the form of JSON, we need to convert it into JSON using the command JSON.stringify().

Ques 11. What are the functions available in JavaScript?
Ans. JavaScript provides a wide range of functions for different purposes including:

1. Mathematical functions: Math.abs(), Math.ceil(), Math.floor(), etc.
2. String functions: toUpperCase(), toLowerCase(), charAt(), concat(), etc.
3. Date and Time functions: Date(), getDate(), getMonth(), getFullYear(), etc.
4. Array functions: sort(), reverse(), join(), slice(), etc.
5. Conversion functions: parseInt(), parseFloat(), toString(), etc.
6. Conditional functions: if-else, switch, ternary operator, etc.
7. Loop functions: for, while, do-while, forEach, etc.
8. DOM functions: querySelector(), getElementById(), getElementsByTagName(), etc.
9. Event handling functions: addEventListener(), removeEventListener(), etc.
10. Custom functions: Functions can be declared and called using the function keyword.

These are some of the commonly used functions in JavaScript, and the language provides many more functions for various purposes.

Ques 12. What are the Events available in JavaScript?
Ans. JavaScript provides a wide range of events that can be used to make a website interactive and responsive to user actions. Some of the commonly used events are:

1. Mouse events: click, dblclick, mouseover, mouseout, mousedown, etc.
2. Keyboard events: keydown, keyup, keypress, etc.
3. Form events: submit, change, focus, blur, etc.
4. Document/Window events: load, unload, resize, scroll, etc.
5. Drag and Drop events: dragstart, drag, dragenter, dragleave, dragover, drop, etc.
6. Touch events: touchstart, touchmove, touchend, etc.
7. Media events: play, pause, ended, etc.

These events can be triggered using the addEventListener() method in JavaScript and can be used to perform various actions on a web page, like displaying an alert message, changing the content of an element, or updating the styles of an element.

Ques 13. How to use a loop in JavaScript?
Ans. In JavaScript, loops are used to execute a block of code multiple times. There are several ways to use loops in JavaScript:

1. for Loop: This is the most commonly used loop and is used to iterate over a series of elements. The for loop consists of three parts: the initializer, the condition, and the iterator.

for (var i = 0; i < 10; i++) {
  console.log(i);
}

2. for...in loop: This loop is used to iterate over the properties of an object.

var object = {a: 1, b: 2, c: 3};
for (var property in object) {
  console.log(property + ": " + object[property]);
}

3. for...of loop: This loop is used to iterate over the values of an array or other iterable objects.

var array = [1, 2, 3, 4, 5];
for (var value of array) {
  console.log(value);
}

var i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

var i = 0;
do {
  console.log(i);
  i++;
} while (i < 10);

Ans. In JavaScript, you can call a function from another function by simply invoking the function by its name followed by parentheses that may contain its arguments.

Here’s an example:

function greeting() {
  console.log("Hello World!");
}

function main() {
  greeting();
}

main(); // Output: "Hello World!"

Ans. In JavaScript, “Sync” and “Async” are terms used to describe the behavior of code execution.

1. Synchronous (Sync) Code: Synchronous code is executed one line at a time, in the order in which it is written. It blocks the execution of other code until it finishes running.

console.log("Start");
for (var i = 0; i < 1000000000; i++) {
  // Do something
}
console.log("End");

In this example, the console.log("Start") statement is executed first, then the loop is run, and finally the console.log("End") statement is executed. This code blocks other code from being executed until it finishes running.

2. Asynchronous (Async) Code: Asynchronous code is executed independently of other code and doesn’t block the execution of other code. Instead, it uses callback functions or promises to continue execution after a certain event or task is completed.

console.log("Start");
setTimeout(function() {
  console.log("End");
}, 1000);

In this example, the console.log("Start") statement is executed first, then the setTimeout function is run, which waits for 1 second and then executes the callback function, which logs “End”. During the wait time, other code can continue to be executed.

These are the basic differences between synchronous and asynchronous code in JavaScript. In general, asynchronous code is preferred in web development to provide a better user experience, as it allows the code to run without blocking the UI and makes the application more responsive.

Ques 16. Explain the concept of Promise in JavaScript.
Ans. In JavaScript, a Promise is an object representing the eventual completion or failure of an asynchronous operation. Promises provide a way to register callbacks to be notified when an asynchronous operation has completed, without blocking the execution of the rest of the code.

A Promise is in one of three states:

1. Pending: The initial state of a Promise, representing that the operation has not completed yet.
2. Fulfilled: The state of a Promise representing that the operation has completed successfully.
3. Rejected: The state of a Promise representing that the operation has failed.

A Promise is created using the Promise constructor, which takes a function as an argument that contains the code to be executed asynchronously. The function takes two arguments, resolve and reject, which are functions used to change the state of the Promise from pending to fulfilled or rejected.

var promise = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve("Success!");
  }, 1000);
});

promise.then(function(result) {
  console.log(result); // Output: "Success!"
});

In this example, the Promise is created with a function that contains an asynchronous setTimeout function. After 1 second, the resolve function is called, which changes the state of the Promise to fulfilled. The then method is used to register a callback that is executed when the Promise is fulfilled, and logs the result, which is “Success!”.

Promises provide a way to handle asynchronous operations in a clean and organized manner, and are a key concept in modern JavaScript programming. They can be used with other asynchronous patterns, like async/await, to make the code even more readable and easier to maintain.

Ques 17. Explain the concept of await in JavaScript.
Ans. The await keyword in JavaScript is used to wait for a Promise to be resolved and to get its result. The await keyword can only be used inside an async function.

An async function is a special type of function that returns a Promise and can be awaited. When an async function is executed, it runs synchronously until it reaches the first await statement, at which point it stops and waits for the Promise to be resolved. Once the Promise is resolved, the function continues execution and returns the result of the Promise.

Here’s an example:

async function fetchData() {
  let response = await fetch("https://api.example.com/data");
  let data = await response.json();
  return data;
}

fetchData().then(function(data) {
  console.log(data);
});

Ques 18. Differentiate between Promise and Await in JavaScript.
Ans. Promise and await are related but distinct concepts in JavaScript.

Promise is an object that represents the result of an asynchronous operation, which can either be fulfilled (the operation completed successfully) or rejected (the operation failed). Promises provide a way to handle the completion of an asynchronous operation in a clean and organized manner.

await is a keyword that can only be used inside an async function. It is used to wait for a Promise to be resolved and to get its result. When an async function reaches an await statement, it stops execution and waits for the Promise to be resolved. Once the Promise is resolved, the function continues execution and returns the result of the Promise.

In short, Promise is a pattern for handling asynchronous operations, while await is a language construct for working with Promises that makes asynchronous code look and behave like synchronous code. While Promises can be used without await, await can only be used in combination with Promises.

Ques 19. What to use between Promise and Await in JavaScript?
Ans. Whether to use Promise or await in JavaScript depends on the specific use case and personal preference.

If you need to handle asynchronous operations in a more traditional, callback-based style, then you can use Promises directly. Promises provide a way to register callbacks to be notified when an asynchronous operation has completed or failed, without blocking the execution of the rest of the code.

If you prefer a cleaner, more concise way of writing asynchronous code, then you can use async/await. The await keyword allows you to wait for a Promise to be resolved and to get its result in a way that looks and behaves like synchronous code. This can make your code easier to read and maintain, especially for more complex asynchronous operations.

Ultimately, the choice between Promise and await will depend on your particular needs and preferences. Both Promise and await are widely used and well-supported in modern JavaScript, and each has its own advantages and disadvantages. It’s recommended to choose the approach that best fits the needs of your project and your team.

Ques 20. What is the difference between null and undefined in JavaScript?
Ans. null and undefined are both special values in JavaScript that represent the absence of a value. However, they are used in slightly different ways.

undefined is a property of the global object and is used to indicate that a variable has been declared but has not been assigned a value yet. If you try to access a property or method of an object that does not exist, it will return undefined.

null, on the other hand, is a value that you can explicitly assign to a variable to represent the absence of a value. This can be useful in cases where you want to explicitly indicate that a variable should not have a value, rather than just not having assigned one yet.

In summary, undefined is used to indicate that a variable has not been assigned a value, while null is used to explicitly indicate the absence of a value.

Ques 21. What is this in JavaScript and how does it work?
Ans. this is a keyword in JavaScript that refers to the object that the current function is a method of. The value of this is determined at runtime, based on the context in which the function is called.

In most cases, the value of this is determined by the object that is to the left of the dot (.) when the function is called. For example:

let person = {
  name: 'John',
  sayHello: function() {
    console.log('Hello, my name is ' + this.name);
  }
};

person.sayHello(); // outputs: "Hello, my name is John"

In the example above, the value of this inside the sayHello function is person, because sayHello is a method of person.

However, the value of this can be different in other contexts. For example, when a function is called as a method of an object, this refers to the object. When a function is called as a constructor, this refers to the newly created object. When a function is called as a simple function, this refers to the global object.

It’s important to be aware of the context in which a function is called, because it can affect the value of this, and therefore the behavior of your code.

Ques 22. What is the Document Object Model (DOM) in JavaScript?
Ans. The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the structure of a document as a tree-like hierarchy of nodes, where each node represents an element, attribute, or piece of text content.

In the context of JavaScript, the DOM allows you to manipulate the content and structure of a web page by accessing and modifying its elements and attributes. This can be done using JavaScript DOM APIs, which provide a rich set of methods and properties for interacting with the DOM.

For example, you can use the DOM to:

• Get access to elements by using selectors, such as getElementById or querySelector.
• Modify the content of elements by using properties, such as innerHTML or textContent.
• Modify the style of elements by using properties, such as style.backgroundColor or style.fontSize.
• Add, remove, or modify elements by using methods, such as createElement, removeChild, or appendChild.

The DOM is an essential part of client-side web development, and a good understanding of it is important for creating dynamic, interactive web applications.

Ques 23. What is a callback function in JavaScript, and how does it work?
Ans. A callback function in JavaScript is a function that is passed as an argument to another function and is executed after some operation has completed. Callback functions are a common pattern in JavaScript and are used to handle asynchronicity, such as waiting for a response from an API or performing a set of operations after a page has loaded.

Callbacks are used because JavaScript is a single-threaded language, which means that it can only execute one statement at a time. When an operation takes a long time to complete, it blocks the main execution thread and can cause the user interface to freeze. Callback functions allow you to defer the execution of a function until a long-running operation has completed, so that the main execution thread remains free to update the user interface and respond to user interactions.

Here is an example of how a callback function works in JavaScript:

function longRunningOperation(callback) {
  // Perform some time-consuming operation
  // ...

  // Call the callback function when the operation is complete
  callback();
}

function doSomethingElse() {
  console.log('Operation complete!');
}

longRunningOperation(doSomethingElse);

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const person1 = new Person("John Doe", 30);
console.log(person1.name); // Output: "John Doe"
console.log(person1.age); // Output: 30

const person2 = new Person("Jane Doe", 28);
console.log(person2.name); // Output: "Jane Doe"
console.log(person2.age); // Output: 28

Ques 27. What is the difference between == and === in JavaScript?
Ans. In JavaScript, == and === are both comparison operators, but they behave differently.

The == operator performs type coercion before comparing two values. This means that if the operands have different types, JavaScript will try to convert one of them to a type that’s compatible with the other before making the comparison. For example:

“5” == 5; // returns true

In this example, the string "5" is coerced to the number 5 before the comparison is made.

The === operator, on the other hand, performs strict equality comparison. It only returns true if both operands have the same type and the same value. No type coercion is performed:

“5” === 5; // returns false

Basic CSS Interview Questions

Ques 1. What is CSS?
Ans. CSS (Cascading Style Sheets) is a stylesheet language used to describe the look and formatting of a document written in a markup language, such as HTML. With CSS, you can specify how HTML elements should be displayed on a web page, including the layout, colors, fonts, and other visual styles.

CSS separates the presentation of a web page from its content, making it easier to maintain and update the look of a site without having to make changes to the underlying HTML code. CSS also provides a way to apply consistent styles to multiple pages or elements on a site, making it possible to create a consistent, professional look.

CSS code is written in a CSS file, which is linked to an HTML document using the <link> tag. The CSS code can also be included in the HTML document itself, either in the <head> section or in a <style> element. The CSS code defines styles for specific HTML elements, such as <p> for paragraphs, <h1> for headings, and <body> for the entire page, among others.

CSS has become an essential tool for web designers and developers, providing a powerful way to control the appearance of websites and applications, and enabling the creation of highly polished, visually appealing designs.

Ques 2. How to add CSS to XML and HTML?
Ans. There are three ways to add CSS styles to an XML or HTML document:

1. External stylesheet: The CSS styles are defined in a separate file with a .css extension, and the file is linked to the XML or HTML document using a <link> tag in the <head> section of the document. The format of the <link> tag is as follows:

   <head>
     <link rel="stylesheet" type="text/css" href="style.css">
   </head>
   

2. Internal stylesheet: The CSS styles are defined within the <head> section of the XML or HTML document, inside a <style> tag. The format is as follows:

   <head>
     <style>
       p {
         color: blue;
         font-size: 14px;
       }
     </style>
   </head>
   

3. Inline styles: The CSS styles are defined directly on a specific HTML element, using the style attribute. The format is as follows:

   <p style="color: blue; font-size: 14px;">This is a paragraph.</p>
   

Ans. There are three types of CSS:

1. Inline CSS: This type of CSS is defined directly on an HTML element, using the style attribute. Inline CSS styles only apply to the specific element to which they are attached and have the highest specificity.

2. Internal CSS: This type of CSS is defined within the <head> section of an HTML document, inside a <style> tag. Internal CSS styles apply to the entire HTML document and can be used to override inline styles.

3. External CSS: This type of CSS is defined in a separate file with a .css extension and linked to an HTML document using a <link> tag in the <head> section of the document. External CSS styles can be shared across multiple HTML pages, making it easy to maintain consistent styles throughout a website.

Of the three types of CSS, external CSS is the most preferred and widely used, as it enables you to maintain consistent styles across multiple pages and makes it easier to update and manage styles in one central location. The other two types of CSS are used more sparingly and are typically used for specific situations, such as when applying a unique style to a single element.

Ques 4. How CSS is prioritized among External, Internal and Inline CSS if all of them are assigned to a particular element?
Ans. When multiple CSS styles are assigned to a particular element, the priority or precedence of the styles is determined based on their specificity and the order in which they appear in the CSS cascade.

In general, the following order is used to determine the priority of styles:

1. Inline styles have the highest specificity and will override any other styles assigned to the same element.
2. Internal and external styles both have the same specificity, but if there is a conflict between styles, the styles defined later in the document will override those defined earlier.
3. Internal styles are defined within the <head> section of the HTML document, while external styles are defined in a separate CSS file and linked to the HTML document using a <link> tag. In the event of a conflict between internal and external styles, the external styles will take precedence.

To summarize, inline styles have the highest priority, followed by internal styles, followed by external styles. In the event of a conflict, the most recent style will take precedence.

Ques 5. What is the significance of !Important; in CSS?
Ans. The !important directive in CSS is used to override the normal specificity of a style declaration. When a style is declared with !important, it takes precedence over all other styles, regardless of their specificity.

For example, consider the following CSS code:

p {
  color: blue !important;
}

p {
  color: red;
}

In this case, the text color of all <p> elements will be blue, not red, because the color: blue !important declaration takes precedence over the color: red declaration.

The !important directive is useful in situations where you need to force a style to take precedence over other styles, but it should be used sparingly and only when necessary, as it can make it difficult to debug and maintain your stylesheet. Overusing !important can lead to a cluttered stylesheet and decreased performance.

Ques 6. How CSS is applied based on individual tag, class and id?
Ans. CSS can be applied to individual HTML elements based on the element’s tag name, class, or ID.

1. By tag name: To apply styles to all elements of a certain type, you can use the tag name as a selector, like this:

   p {
     color: blue;
   }
   

   This will apply the specified styles (in this case, the color blue) to all <p> elements in the HTML document.

2. By class: To apply styles to a specific set of elements, you can use a class selector, which is denoted by a period (.) before the class name, like this:

   .highlight {
     background-color: yellow;
   }
   

   You can then apply the class to an HTML element by adding the class attribute, like this:

   <p class="highlight">This is some text.</p>
   

3. By ID: To apply styles to a single, unique element, you can use an ID selector, which is denoted by a hash symbol (#) before the ID name, like this:

   #header {
     background-color: blue;
   }
   

   You can then apply the ID to an HTML element by adding the id attribute, like this:

   <h1 id="header">Welcome to my site</h1>
   

Ans. The border, padding, and margin are all CSS properties that are used to control the spacing around an HTML element.

1. Border is the visible line that surrounds an HTML element and separates it from other elements on the page. You can control the width, style, and color of the border. For example:

   p {
     border: 2px solid blue;
   }
   

   This will create a 2 pixel wide, solid, blue border around all <p> elements.

2. Padding is the space between the element’s content and its border. Padding is transparent and can be used to increase the overall size of an element. For example:

   p {
     padding: 10px;
   }
   

   This will add 10 pixels of padding to all sides of all <p> elements, effectively increasing the size of the element and its clickable area.

3. Margin is the space outside of an element’s border and outside of its padding. Margins are also transparent and can be used to separate elements from each other. For example:

   p {
     margin: 10px;
   }
   

   This will add 10 pixels of margin to all sides of all <p> elements, effectively separating the elements from each other and from other elements on the page.

   In conclusion, borders define the visible boundary of an element, padding defines the space between the element’s content and its border, and margin defines the space outside of the element’s border. These properties can be used to control the layout and appearance of elements on a web page.

Basic SAPUI5 View Interview Questions

1. What are the types of UI5 views?
2. How to apply styles in SAPUI5 elements without using CSS?
3. How to apply margin and padding without using CSS?
4. What are the steps of adding a new component in UI5 View?
5. Explain the concept of UI5 namespace.
6. Differentiate between a simple table and a smart table.
7. What steps will you take if you are getting errors “outdated component properties” and still want to use the older version components and properties? [What will you do if you don’t want to use the latest version of UI5 libraries?]
8. How can i18n be used in UI5 to enable or disable an element?
9. How can models be bound to UI5 Views?
10. How can a model be used in UI5 to enable or disable an element?
11. Explain the concept of Expression Binding in UI5 Views.
12. Explain the concept of Formatter in UI5 Views.
13. What is the concept of App.view in UI5 Views?
14. Explain the concept of Master Detail in terms of UI5 View.
15. Explain the difference between Master Detail and TNT SideNavigation, although they look alike.
16. Explain the concept of Fragments.
17. Explain the concept of Dialog Box.
18. What are the best practices of SAP UI5 Views?
19. How can you enhance a MessageBox?
20. Differentiate between sap.ui and sap.m library.
21. How to enhance/extend any components/library of UI5, and when do you need to do it [Custom Library/Component]?
22. Explain the concept of the Gantt Chart.
23. Explain the concept of the Viz Chart.
24. Explain the concept of Shell in UI5.
25. Explain the concept of Wizard in UI5.
26. How can you use HTML within UI5 View?
27. How can you integrate a pdf in UI5?
28. Explain the concept of the Shell Bar.
29. Explain the concept of the Object Page.
30. Explain the concept of p13n in UI5. Tell the instance where you have used it.
31. What are the specifications you need for a chart?
32. What are the specifications you need for a 3D Viewer?
33. How to integrate a Bar/QR Code scanner in UI5?
34. Explain the concept of Cookies in UI5 and how you can use it.
35. What is the difference between a Combobox and Select in UI5 view?

Basic SAPUI5 Controller Interview Questions

1. How can a function within the controller be triggered from UI5 View?
2. Name the lifecycle methods of a UI5 controller and how they get triggered if a page gets loaded.
3. How to implement a Model in UI5 controller.
4. How to implement a Formatter in UI5 controller.
5. How to implement i18n in UI5 controller.
6. How to implement a base controller.
7. What are the types of Models in SAP UI5? Explain them.
8. How to get and push data into the cache?
9. How do you catch Errors in the Controller?
10. What are the best practices for coding in SAP UI5 Controller?

UI5 Interview Questions

1. What is the meaning of UI5?
2. What are the technologies involved in UI5?
3. Explain MVC Architecture.
4. What are the Lifecycle methods of SAPUI5? Explain all of them. Also, explain their priority.
5. What is the role of Component.js in UI5 Applications?
6. What is the role of Manifest.json in the UI5 Application?
7. Explain the concept of navigation in the UI5 Application.
8. Explain the types of Views that can be created in the UI5 Application.
9. Explain the types of Data Models that can be implemented in the UI5 Application.
10. Explain the type of Data Binding available in the UI5 Application.
11. Explain the concept of Fragments and the data binding of Fragments in SAP UI5.
12. What is a Formatter in UI5? How to implement it?
13. What is Pagination, and how is it achieved in UI5?
14. What is the concept of Library and namespace in UI5, and how is it implemented?
15. What is the concept of this in UI5?
16. How to Bind a Simple table with JSON data defined locally?
17. How to bind a controller such as a Checkbox or Drop Down with OData?
18. How to add standard and custom CSS in UI5?
19. How to transfer a value from one page to another in UI5?
20. What is i18n? How to use the concept of i18n in UI5?
21. How to fetch a particular key’s value from a row click in UI5?
22. How to handle access and Authorization in UI5?
23. How to implement HTML tags and properties in UI5?
24. How to create your own custom control in UI5?
25. How to create a Dynamic view in UI5?

Basic UI5 Error-related Interview Questions

1. What is CORS? How to fix CORS-related UI5 errors?
2. What is the meaning of Status 200, 202, 400, 404, and 500 in UI5 response?
3. How to debug the Error of UI5 using the SAP Backend system?
4. How do I catch any error in SAP UI5?
5. How to debug the UI5 error in Frontend at the browser level?

Web IDE Interview Questions

1. What is SAP Web IDE, and what can we do there?
2. How does the development and Version management System work in SAP Web IDE?
3. How enterprise ready is SAP Web IDE?
4. What is the standard structure we need to follow for Fiori Application development on Web IDE?
5. What annotations can we implement using Web IDE?
6. How to develop a new UI5 Application using Web IDE?
7. How to develop a new Template based Fiori Application using Web IDE?
8. How to develop a new MTA (Multi-Target Application) using Web IDE?
9. How to configure routing and navigation in Web IDE?
10. Explain the use of Component.js in Web IDE.

GitHub Interview Questions

1. What is a Git?
2. What is the difference between Git and GitHub?
3. What is a Version Control System and what are its benefits?
4. What do you mean by Commit?
5. What is a repository in Git?
6. What is a conflict in Git, and how can it be resolved?
7. What is the difference between Git Pull and Git Fetch?
8. What is the difference between Git Remote and Git Clone?
9. What is the difference between Rebasing and Merge in Git?
10. What is Jenkins, and how can it be integrated with Git?

Scenario-Based Interview Questions

1. What all controls have you worked on in UI?
2. Explain the flow of the UI5 App when it loads into the browser.
3. Explain any project that you worked on.
2. Have you worked with smart tables and controls?
3. Suppose you have a smart table and need to navigate to a detail page with a click of a line item. How will you do, as they don’t have any event for navigation?
4. How to navigate in a simple or m Table?
5. How to store data globally so that you can use it on different pages?
6. Where do you store a global model in UI5?
7. Suppose you have to add a new blank row (or line item) to a table with a click of Add button. How will you achieve that?
8. Suppose you have to delete a line item from a table with a click of the Delete button. How will you achieve that?