SAP UI5 - SAP FIORI - SAP BTP INTERVIEW QUESTIONS

Naidu Karri

Overview of UI5 Application

controller

css

i18n
webapp

model

UI5 app
view

neo-app.json
component.js

package.json index.html

ui5.yaml manifest.json

Webapp:

The webapp folder is the root directory for the UI5 application. It contains all the application
resources like views, controllers, models, and CSS.

index.html:

This is the entry point of the application. It typically includes the following:

 Loading SAP UI5 Libraries: Loads the necessary UI5 libraries.

 Bootstrapping the Application: Configures the application and specifies the component to start.
o Bootstrapping in SAP UI5 is the initial setup process where the necessary libraries are
loaded, configurations are set, and the application is started. This process is typically
done in the index.html file, ensuring that the UI5 environment is properly initialized
before any application logic is executed.

NAIDU KARRI
Instagram: mr_loyal_ml
Email: [email protected]
 SAP UI5 - SAP FIORI - SAP BTP INTERVIEW QUESTIONS
Naidu Karri

View:

The view folder contains the XML views of the application. Views define the UI of the
application.

Controllers:

The controller folder contains the JavaScript controllers for the views. Controllers handle the
logic and user interactions.

CSS:

The css folder contains custom CSS files for styling the application.

Model:

The model folder contains data models. Models can be JSON, OData, XML, etc.

Component.js:

This file defines the main component of the UI5 application. It specifies the metadata, models,
and initializations.

manifest.json:

This file is the descriptor for the application. It contains metadata such as the name, version,
and resources of the application.

neo-app.json:

This file is used for configuration in the SAP Cloud Platform, defining routes and destinations.

ui5.yaml:

This file is used for configuration in the UI5 Tooling, defining tasks, and server configurations.

Package.json:

In a UI5 project, the package.json file is used to manage the project's dependencies, scripts, and
metadata. This file is part of the Node.js ecosystem and is crucial for any JavaScript project that
uses Node.js tools, including the UI5 Tooling.

NAIDU KARRI
Instagram: mr_loyal_ml
Email: [email protected]
 SAP UI5 - SAP FIORI - SAP BTP INTERVIEW QUESTIONS
Naidu Karri

Key Sections of package.json

1. name: The name of your project.

2. version: The current version of your project.
3. description: A brief description of your project.
4. scripts: Scripts that can be run using npm run <script-name>.
5. dependencies: Specifies the packages required by your project.
6. devDependencies: Specifies the packages required for development purposes.
7. ui5: Configuration specific to UI5 Tooling.

Summary

 webapp: Main folder containing all resources.

 index.html: Entry point of the application.
 view: Contains XML views defining the UI.
 controller: Contains JavaScript controllers handling the logic.
 css: Contains custom CSS files.
 model: Contains data models.
 Component.js: Defines the main component.
 manifest.json: Application descriptor.
 neo-app.json: Configuration for SAP Cloud Platform.
 ui5.yaml: Configuration for UI5 Tooling.

What is SAPUI5?

SAPUI5 is a framework developed by SAP that is used to build responsive web applications. It
uses JavaScript, CSS, and HTML5 and is designed to be lightweight and flexible. SAPUI5 provides
a comprehensive suite of user interface controls and features that enable developers to create
modern, interactive user interfaces that work seamlessly across different devices.

What is a Component?

In SAPUI5, a component is a reusable piece of UI logic. It encapsulates the application's

metadata, models, views, controllers, and other resources. Components are often used to
modularize applications, making them easier to develop, maintain, and extend. They follow the
MVC (Model-View-Controller) architecture and can be nested within each other, allowing for
complex application structures.

NAIDU KARRI
Instagram: mr_loyal_ml
Email: [email protected]
 SAP UI5 - SAP FIORI - SAP BTP INTERVIEW QUESTIONS
Naidu Karri

What All Types of Data Models are Available in SAPUI5?

SAPUI5 supports several types of data models for different data sources and structures:

1. JSON Model: Used for client-side data represented in JSON format.

2. XML Model: Used for client-side data represented in XML format.
3. OData Model: Used for data that follows the OData protocol, typically for backend data
services.
4. Resource Model: Used for storing and managing application texts for internationalization.

When and How to Use Formatter in SAPUI5?

A formatter in SAPUI5 is used to format data before it is displayed in the UI. It is often used in
data binding scenarios to transform data into a more user-friendly format. Formatters can be
used in XML views by specifying a formatter function in the data binding path.

Example:

<Text text="{path: 'model>/property', formatter: '.formatterFunction'}" /> ------------- View

formatterFunction: function(value) { ------------- Controller

// format the value as needed
return formattedValue;
}

What All Types of Views are Available in SAPUI5?

SAPUI5 supports several types of views:

1. XML Views: Defined in XML files and recommended for most use cases due to their declarative
nature.
2. JS Views: Defined in JavaScript files.
3. JSON Views: Defined in JSON files.
4. HTML Views: Defined in HTML files.

What Are the Lifecycle Methods of SAPUI5 Views Controller?

The lifecycle methods in a SAPUI5 controller allow developers to manage the lifecycle of views.
Key methods include:

1. onInit: Called when the view is instantiated.

2. onBeforeRendering: Called before the view is rendered.
3. onAfterRendering: Called after the view has been rendered.
4. onExit: Called when the view is destroyed.

NAIDU KARRI
Instagram: mr_loyal_ml
Email: [email protected]
 SAP UI5 - SAP FIORI - SAP BTP INTERVIEW QUESTIONS
Naidu Karri

What Are SAPUI5 Fragments?

Fragments in SAPUI5 are lightweight, reusable UI parts defined in XML, JS, or HTML. They do
not have their own controllers but can be used within views. Fragments are ideal for creating
modular and reusable UI components without the overhead of a full view.

What is SAPUI5 Bootstrapping?

Bootstrapping in SAPUI5 refers to the process of loading and initializing the SAPUI5 framework
in an HTML page. This is typically done by including the sap-ui-core.js library in the HTML file and
configuring it with necessary parameters.

JSON / XML / ODATA / RESOURCE MODEL - SYNTAX

JSON Model: sap.ui.model.json.JSONModel();

XML Model: sap.ui.model.xml.XMLModel();

ODATA Model: sap.ui.model.odata.v2.ODataModel(“/path/to/odata/service”);

Resource Model: sap.ui.model.resource.ResourceModel({

Buildname: “my.i18n.i18n”

});

FILTER - SYNTAX

sap.ui.model.Filter("name", sap.ui.model.FilterOperator.Contains, "John");

NAIDU KARRI
Instagram: mr_loyal_ml
Email: [email protected]
SAP UI5 - SAP FIORI - SAP BTP INTERVIEW QUESTIONS
Naidu Karri

SYNTAX FOR CRUD OPERATIONS

NAIDU KARRI
Instagram: mr_loyal_ml
Email: [email protected]
SAP UI5 - SAP FIORI - SAP BTP INTERVIEW QUESTIONS
Naidu Karri

NAIDU KARRI
Instagram: mr_loyal_ml
Email: [email protected]
 SAP UI5 - SAP FIORI - SAP BTP INTERVIEW QUESTIONS
Naidu Karri

Promises:

In SAPUI5, Promises are used to handle asynchronous operations more efficiently and provide a
cleaner, more manageable way to handle multiple asynchronous calls. They represent an
operation that hasn't completed yet but is expected to in the future. Promises are particularly
useful for dealing with OData service calls, where you need to perform actions once the data is
fetched or modified.

When to Use Promises in SAPUI5

 Handling Asynchronous Operations: Promises are ideal for managing asynchronous calls such as
OData service operations (create, read, update, delete).
 Chaining Multiple Operations: When you need to perform multiple asynchronous operations
sequentially or in parallel, promises help by providing a clearer, more readable syntax.
 Error Handling: Promises allow for better error handling using .catch blocks, making the code
easier to maintain and debug.

Difference between Success/Error Callbacks and Promise Calls

1. Syntax and Readability:

o Callbacks: Traditional callback syntax can quickly become complex and hard to read,
especially when dealing with nested asynchronous operations (callback hell).
o Promises: Promises offer a cleaner, more linear syntax that makes it easier to read and
understand the flow of asynchronous operations.
2. Chaining:
o Callbacks: Chaining multiple callbacks can be cumbersome and lead to deeply nested
code.
o Promises: Promises can be easily chained using .then for successive asynchronous
operations, resulting in more readable and maintainable code.
3. Error Handling:
o Callbacks: Error handling in callbacks requires checking errors in each callback function.
o Promises: Promises centralize error handling using a single .catch block, making it easier
to handle errors uniformly.
4. Control Flow:
o Callbacks: Managing the flow of multiple asynchronous operations with callbacks can be
tricky.
o Promises: Promises offer better control over the flow of asynchronous operations, with
methods like Promise.all and Promise.race.

NAIDU KARRI
Instagram: mr_loyal_ml
Email: [email protected]
 SAP UI5 - SAP FIORI - SAP BTP INTERVIEW QUESTIONS
Naidu Karri

Synchronous Operations

Synchronous operations are tasks that are performed one at a time, and each task must be
completed before the next one can begin. This means that the program execution waits (or
"blocks") for the task to finish before moving on to the next task.

Characteristics of Synchronous Operations:

 Blocking: The execution of code stops until the current operation completes.
 Simple Control Flow: Easy to understand and follow as tasks are executed sequentially.
 Potential UI Freezing: In a web application, synchronous operations can cause the user interface
to become unresponsive if the operation takes a long time to complete.

Asynchronous Operations

Asynchronous operations allow multiple tasks to be executed without waiting for other tasks to
complete. This means that the program execution continues to the next task while the current
task is still being processed, allowing for non-blocking behavior.

Characteristics of Asynchronous Operations:

 Non-Blocking: The execution of code continues without waiting for the current operation to
complete.
 Complex Control Flow: Can lead to more complex code structure, often managed with callbacks,
promises, or async/await.
 Better User Experience: Prevents UI freezing and ensures a more responsive application, even
during long-running operations.

NAIDU KARRI
Instagram: mr_loyal_ml
Email: [email protected]
 SAP UI5 - SAP FIORI - SAP BTP INTERVIEW QUESTIONS
Naidu Karri

TYPES OF BINDING

Property Binding

Property binding connects the property of a UI control to a model property. It is the most
common type of binding used to display data or set attributes.

Example:

<Text text="{/firstName}" />

Element Binding

Element binding is used to bind the entire aggregation or a single element within an
aggregation to a data source. It is useful when you want to bind a control to an item or a
specific part of a collection.

Example:

<List items="{/employees}">
<StandardListItem title="{name}" description="{position}" />
</List>

Aggregation Binding

Aggregation binding is used to bind a control’s aggregation to a data source. This allows a
control to automatically create and manage its child controls based on the bound data.

Example:

<Table items="{/products}">
<columns>
<Column>
<Text text="Product Name" />
</Column>
<Column>
<Text text="Price" />
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Text text="{name}" />
<Text text="{price}" />
</cells>
</ColumnListItem>
</items>
</Table>
NAIDU KARRI
Instagram: mr_loyal_ml
Email: [email protected]
 SAP UI5 - SAP FIORI - SAP BTP INTERVIEW QUESTIONS
Naidu Karri

Expression Binding

Expression Binding allows you to use JavaScript expressions within the binding syntax to
dynamically compute or manipulate values. This can be particularly useful for scenarios where
you need to combine data, format values, or apply logic directly in the binding expression.

Syntax

Expression Binding uses curly braces {} with an expression inside. The expression can include
variables from the model, literals, or JavaScript functions.

Examples

Basic Expression Binding

<Text text="{= ${firstName} + ' ' + ${lastName} }" />

Conditional Expressions

<Text text="{= ${status} === 'active' ? 'Active User' : 'Inactive User' }" />

Formatting Values

<Text text="{= ${price} + ' USD' }" />

Using Functions

<Text text="{= formatCurrency(${price}) }" />

NAIDU KARRI
Instagram: mr_loyal_ml
Email: [email protected]
 SAP UI5 - SAP FIORI - SAP BTP INTERVIEW QUESTIONS
Naidu Karri

Cross-application Navigation

Cross-application navigation in SAPUI5 is a crucial aspect for creating seamless user experiences
in enterprise applications. This involves transitioning from one SAPUI5 application to another
while maintaining context and state.

Key Concepts

1. Semantic Object Navigation: Uses semantic objects and actions to abstract the navigation logic
from specific URLs. This is often used in combination with the Fiori Launchpad.
2. Hash-Based Navigation: Utilizes the URL hash to handle navigation within and between
applications. The hash is parsed and managed by the SAPUI5 router.
3. Intent-Based Navigation: Allows navigation to different applications using intents which are
defined in the manifest.json and the SAP Fiori Launchpad configuration.

Steps for Cross-Application Navigation

Configure Semantic Objects and Actions:

o Define semantic objects and actions in the SAP Fiori Launchpad Designer or in the
configuration files.

NAIDU KARRI
Instagram: mr_loyal_ml
Email: [email protected]
 SAP UI5 - SAP FIORI - SAP BTP INTERVIEW QUESTIONS
Naidu Karri

Implement Routing in Manifest.json:

 Configure routing to handle different views and targets within your application.

NAIDU KARRI
Instagram: mr_loyal_ml
Email: [email protected]
 SAP UI5 - SAP FIORI - SAP BTP INTERVIEW QUESTIONS
Naidu Karri

Trigger Navigation Programmatically:

 Use the sap.ushell.services.CrossApplicationNavigation service to navigate between

applications.

Navigation process from one page next page

In SAPUI5, navigation between pages can be achieved using routing. Routing allows you to
define navigation paths and manage the application states. Here’s a basic example to illustrate
the navigation process from one page to the next:

1. Setup Routing Configuration:

o Define the routes in the manifest.json file.
o Create view files for the pages.
2. Implement Navigation Logic:
o Use the Router class to navigate between the pages.

NAIDU KARRI
Instagram: mr_loyal_ml
Email: [email protected]
 SAP UI5 - SAP FIORI - SAP BTP INTERVIEW QUESTIONS
Naidu Karri

Step-by-Step Guide

1. Define Routes in manifest.json

First, you need to configure the routes in the manifest.json file. This file defines the routing
configuration for your application.

NAIDU KARRI
Instagram: mr_loyal_ml
Email: [email protected]
 SAP UI5 - SAP FIORI - SAP BTP INTERVIEW QUESTIONS
Naidu Karri

2. Create Views

Create the view files for the pages you want to navigate between. For this example, create
Home.view.xml and Page2.view.xml.

NAIDU KARRI
Instagram: mr_loyal_ml
Email: [email protected]
 SAP UI5 - SAP FIORI - SAP BTP INTERVIEW QUESTIONS
Naidu Karri

3. Implement Navigation Logic in Controllers

Create the corresponding controllers for the views. For this example, create Home.controller.js
and Page2.controller.js.

 Define the routes and targets in the manifest.json file.

 Create the XML views for the pages.
 Implement the navigation logic in the corresponding controllers using the Router class.

NAIDU KARRI
Instagram: mr_loyal_ml
Email: [email protected]
 SAP UI5 - SAP FIORI - SAP BTP INTERVIEW QUESTIONS
Naidu Karri

BTP cloud configuration

Configuring SAP Business Technology Platform (BTP) for SAPUI5 involves several steps, including
setting up the environment, developing the application, and deploying it on BTP. Here’s a
detailed guide:

1. Prerequisites

 SAP BTP Account: Ensure you have access to a BTP account.

 SAP Web IDE or SAP Business Application Studio: These tools are recommended for developing
SAPUI5 applications.
 SAP Cloud Platform SDK: Necessary for deploying applications.

2. Setting Up the Environment

 Create Subaccount and Space:

1. Log into your BTP cockpit.
2. Create a subaccount and configure the environment (e.g., Cloud Foundry).
3. Under your subaccount, create a new space.

3. Developing SAPUI5 Application

 Using SAP Business Application Studio or SAP Web IDE:

1. Create a New Project:
 In the SAP Business Application Studio, create a new SAPUI5 project using the
template wizard.
 Choose a suitable project template (e.g., SAP Fiori elements, SAPUI5 freestyle).
2. Develop the Application:
 Write your SAPUI5 code using the XML views, controllers, and models.
 Test your application locally using the preview feature.

4. Configure Destination and Connectivity

 Set Up Destinations:
1. In the BTP cockpit, navigate to your subaccount.
2. Go to the Destinations section and create a new destination.
3. Configure the destination details such as URL, authentication, and proxy type.
4. Ensure the destination is reachable and test the connection.

5. Deploying the SAPUI5 Application

 Deploy Using SAP Business Application Studio:

1. Open the terminal in SAP Business Application Studio.
2. Login to Cloud Foundry using the cf login command.
3. Navigate to your project directory.
4. Deploy your application using the cf push command.
NAIDU KARRI
Instagram: mr_loyal_ml
Email: [email protected]
 SAP UI5 - SAP FIORI - SAP BTP INTERVIEW QUESTIONS
Naidu Karri

5. Monitor the deployment process and ensure there are no errors.

6. Configure HTML5 Applications Repository

 Register the Application:

1. In the BTP cockpit, go to the HTML5 Applications section.
2. Register your SAPUI5 application.
3. Provide the necessary details such as application name, version, and description.
4. Bind the application to the destination created earlier.

7. Accessing the Deployed Application

 Run the Application:

1. After successful deployment, you can access the application URL from the BTP cockpit.
2. Test the application to ensure it works as expected.

8. Managing and Monitoring

 Monitor the Application:

1. Use the BTP cockpit to monitor application performance and logs.
2. Set up alerts and notifications for any critical issues.

NAIDU KARRI
Instagram: mr_loyal_ml
Email: [email protected]
SAP UI5 - SAP FIORI - SAP BTP INTERVIEW QUESTIONS
Naidu Karri

NAIDU KARRI
Instagram: mr_loyal_ml
Email: [email protected]
 SAP UI5 - SAP FIORI - SAP BTP INTERVIEW QUESTIONS
Naidu Karri

Deployment BTP application in cloud

Deployment Steps in BTP Cloud Foundry

 SAP UI5 project using SBAS (Must have your UI5 application in BAS[Business Application
Studio])
 If not create the UI5 application in SBAS / Add from git by using below
commands.
 Open terminal ctrl+j
 Under projects – clone the application from Git (git clone “App
URL from git”)
 Then install node modules by using this command (npm install)
 Then run the application locally (npm run start).
 Subscribe HTML5 Application Repository service in BTP platform.
 Login to SAP BTP Cockpit
 Go to Trail Home
 Go to Entitlements (check HTML5 Application repository added or not)
 If not click on edit and click on add service then search HTML5 and
Add/Subscribe the service.
 Generate MTA archive file using MTA build tool.
 Open trail account.
 Click on Cloud Foundary Environment
 Copy the API Endpoint URL
 Go to SAP BTP Platform and open terminal (ctrl+j)
 Type command cf login in the project terminal
 Enter your BTP email id and password
 Select the Dev space and Enter API Endpoint URL.
 Then right click on mta.yaml file and select Build MTA Project.

 Deploy the application using SBAS CLI (Command Line Interface).
 Deploy the application using these commands npm run deploy and npm
run deploy-config.
 If you’re not sure about the application has all files orelse some files are
missing then use command npm run deploy-config
 Otherwise use npm run deploy / directly run from MTA Archive file by
right click and select Deploy MTA Archieve.
 Run recently deployed UI5 app from the HTML5 applications – BTP
 Open trail account and select HTML5 application
 Check the deployed application is available or not
 By clicking on application it will run in cloud foundary.

NAIDU KARRI
Instagram: mr_loyal_ml
Email: [email protected]
 SAP UI5 - SAP FIORI - SAP BTP INTERVIEW QUESTIONS
Naidu Karri

Syntax for Cross-application Navigation

var oCrossAppNavigator = sap.ushell.Container.getService("CrossApplicationNavigation");
oCrossAppNavigator.toExternal({

target: {

semanticObject: "MyObject",

action: "view"

},

params: {

param1: "value1"

});

WHAT ARE FIORI TEMPLATES

1. Overview Page (OVP): Provides an at-a-glance view of the most important information
and key performance indicators (KPIs). It is designed to help users make quick decisions
based on the most relevant data.
2. List Report: Allows users to view, filter, and sort large sets of data. It is typically used for
applications that require detailed data presentation and complex search capabilities.
3. Object Page: Displays detailed information about a single object. It includes sections for
different aspects of the object, such as general information, related items, and
attachments.
4. Worklist: Provides a list of work items that require user action. It is used in scenarios
where users need to process a queue of tasks or items.
5. Analytical List Page (ALP): Combines analytical and transactional capabilities into a
single page, allowing users to drill down into data and take action based on insights.
6. Smart Template: Uses metadata annotations to generate consistent and responsive
applications. This template leverages predefined patterns and best practices, reducing
development effort and ensuring consistency.
7. Master-Detail: A two-pane layout that displays a list of items (master) on the left and
the details of the selected item on the right. It is suitable for applications where users
need to navigate through a list and view detailed information simultaneously.
8. Custom Template: Allows developers to create their own templates tailored to specific
business needs, combining various Fiori elements and UI controls.
NAIDU KARRI
Instagram: mr_loyal_ml
Email: [email protected]
 SAP UI5 - SAP FIORI - SAP BTP INTERVIEW QUESTIONS
Naidu Karri

Types of UI5 Applications

1. Single Page Applications (SPA):

o Definition: A web application that loads a single HTML page and dynamically
updates as the user interacts with the app.
o Use Case: Suitable for applications where a seamless and fast user experience is
crucial, with minimal page reloads.
o Example: Dashboard applications, real-time monitoring tools.
2. Multi-Page Applications (MPA):
o Definition: An application that consists of multiple HTML pages, each
corresponding to a different view or screen.
o Use Case: Suitable for complex applications that require multiple distinct views
and interactions.
o Example: Comprehensive business suites with multiple modules.
3. Master-Detail Applications:
o Definition: A two-pane layout application where a list of items (master) is
displayed alongside the details of the selected item (detail).
o Use Case: Ideal for applications where users need to browse through a list and
view detailed information simultaneously.
o Example: Email clients, task management tools.
4. Worklist Applications:
o Definition: An application designed to display a list of work items that require
user action.
o Use Case: Suitable for task-oriented applications where users need to process or
act upon a list of items.
o Example: Approval workflows, issue tracking systems.
5. Analytical Applications:
o Definition: Applications focused on data analysis and visualization, often
incorporating charts, graphs, and tables.
o Use Case: Ideal for scenarios where users need to analyze
o Example: Graphs, tables etc.

NAIDU KARRI
Instagram: mr_loyal_ml
Email: [email protected]
 SAP UI5 - SAP FIORI - SAP BTP INTERVIEW QUESTIONS
Naidu Karri

For Loop, For Each, Find, Match, While, Do While - Syntax

NAIDU KARRI
Instagram: mr_loyal_ml
Email: [email protected]
SAP UI5 - SAP FIORI - SAP BTP INTERVIEW QUESTIONS
Naidu Karri

NAIDU KARRI
Instagram: mr_loyal_ml
Email: [email protected]
SAP UI5 - SAP FIORI - SAP BTP INTERVIEW QUESTIONS
Naidu Karri

NAIDU KARRI
Instagram: mr_loyal_ml
Email: [email protected]
 SAP UI5 - SAP FIORI - SAP BTP INTERVIEW QUESTIONS
Naidu Karri

Comparison and Use Cases:

 for Loop: Best for situations where the number of iterations is known and for general-purpose
looping.
 forEach: Ideal for iterating over arrays without modifying the original array; simpler syntax for
array traversal.
 find: Useful for searching for a single item in an array based on a condition.
 match: Specifically for string operations using regular expressions to find matches.
 while: Suitable for scenarios where the number of iterations is not known in advance but
depends on a condition.
 do...while: Similar to while but guarantees that the code block is executed at least once.

Difference between SAP UI5 & Fiori

SAPUI5 and SAP Fiori are both integral to SAP's strategy for modern user experiences, but they
serve different purposes and have distinct characteristics. Here’s a comparison:

SAPUI5

1. Framework:
o SAPUI5 is a JavaScript UI library and framework for building responsive web
applications. It provides a comprehensive set of UI controls and tools for developing
enterprise-ready web applications.
2. Components:
o Includes a wide range of UI controls such as tables, forms, buttons, and charts.
o Offers data binding and MVC (Model-View-Controller) architecture.
3. Flexibility:
o Can be used to develop custom applications tailored to specific business needs.
o Allows integration with various backend systems via OData services.
4. Development:
o Developers use SAPUI5 to create the front-end part of SAP applications.
o It can be integrated with SAP and non-SAP systems.
5. Deployment:
o SAPUI5 applications can be deployed on multiple platforms, including SAP Cloud
Platform and on-premise systems.

SAP Fiori

1. Design Philosophy:
o SAP Fiori is a design system and a set of UX guidelines created by SAP to ensure a
consistent, intuitive, and responsive user experience across SAP applications.
o It focuses on role-based, simple, and adaptive user interfaces.

NAIDU KARRI
Instagram: mr_loyal_ml
Email: [email protected]
 SAP UI5 - SAP FIORI - SAP BTP INTERVIEW QUESTIONS
Naidu Karri

2. Applications:
o SAP Fiori encompasses a suite of pre-built applications (called Fiori apps) that cover
common business functions (like approval workflows, self-service tasks, and financial
analysis).
o These apps follow the Fiori design principles and are built using SAPUI5.
3. User Experience:
o Emphasizes a consistent look and feel across all devices (desktops, tablets,
smartphones).
o Designed to improve user productivity and satisfaction by providing an intuitive and
cohesive experience.
4. Standardization:
o Fiori apps adhere to standardized design principles, ensuring a uniform user experience
across the entire SAP ecosystem.
o Provides a set of design guidelines and best practices for developing SAP applications.
5. Implementation:
o SAP Fiori Launchpad is the entry point to all Fiori apps, providing a central and
personalized access point.
o Fiori can be extended and customized to meet specific business requirements, often
using SAPUI5 as the underlying technology.

Summary

 SAPUI5 is the technical framework used to develop web applications with a rich set of UI
components.
 SAP Fiori is the design philosophy and suite of applications that leverage SAPUI5 to deliver a
consistent, role-based, and user-friendly experience.

How to delete selected records from the table

In the onDeletePress method:

 Retrieves selected items from the table.

 Checks if any items are selected.
 Extracts IDs of the selected items.
 Filters out the selected items from the
model's data.
 Updates the model with the new data.
 Clears the selections from the table.
 Shows a message indicating the number
of deleted items.

NAIDU KARRI
Instagram: mr_loyal_ml
Email: [email protected]
 SAP UI5 - SAP FIORI - SAP BTP INTERVIEW QUESTIONS
Naidu Karri

How to add records from one model to another

In the onAddPress method:

 Retrieves the selected item from the

sourceTable.
 Checks if an item is selected. If not,
shows a message toast.
 Retrieves the data of the selected item.
 Retrieves the current data of the target
model, adds the selected item to it, and
updates the target model.
 Clears the selection from the source
table.
 Shows a message indicating that the
item has been added.

Note: Above code refers to add data from one table to another table.

NAIDU KARRI
Instagram: mr_loyal_ml
Email: [email protected]
 SAP UI5 - SAP FIORI - SAP BTP INTERVIEW QUESTIONS
Naidu Karri

LAUNCHPAD CONFIGURATION

Configuring the SAP Fiori Launchpad involves several steps to ensure a smooth user experience.
The launchpad serves as the entry point for SAP Fiori applications and provides a role-based,
personalized, and simple user experience.

Steps for Configuring SAP Fiori Launchpad

1. Set Up the Fiori Front-End Server:

o Ensure the SAP Gateway and Fiori front-end server are properly installed and
configured.
o Connect the front-end server to the SAP back-end system where your applications
reside.
2. Create Technical Catalogs:
o Define all the technical details about the applications, including target mappings and
tiles.
o Use the SAP Fiori launchpad designer to create these catalogs.
3. Create Business Catalogs:
o Group related technical catalogs into business catalogs for easier role assignment.
o Business catalogs make it easier to manage and assign roles to users.
4. Define Roles and Authorizations:
o Create roles in the SAP back-end system using the PFCG transaction code.
o Assign the business catalogs to these roles.
o Assign the roles to the users who will access the launchpad.
5. Configure Launchpad Content:
o Use the Fiori launchpad designer to configure tiles and target mappings.
o Tiles represent the entry points to applications, and target mappings define the
navigation paths.
6. Create Groups:
o Organize tiles into groups to provide a better user experience.
o Groups help users quickly find and access the applications they need.
7. Deploy and Register Applications:
o Deploy custom or standard Fiori applications to the SAP system.
o Register the applications in the Fiori launchpad using the launchpad designer.
8. Configure the Fiori Launchpad Settings:
o Customize the look and feel of the launchpad.
o Set global configurations such as theme, language, and user settings.
9. Testing and Validation:
o Test the Fiori launchpad configuration to ensure everything works as expected.
o Validate that users can access the applications and perform their tasks.

NAIDU KARRI
Instagram: mr_loyal_ml
Email: [email protected]
 SAP UI5 - SAP FIORI - SAP BTP INTERVIEW QUESTIONS
Naidu Karri

Launchpad Pages & Spaces

In SAP Fiori, Launchpad Spaces and Pages provide a structured way to organize and navigate
Fiori applications, improving the user experience by grouping related content together.

Overview of Pages and Spaces

Spaces:

 Spaces are high-level containers that group related Pages together.

 They provide a logical and role-based structure for the Fiori Launchpad.
 Each Space can contain multiple Pages, and users can navigate between different Spaces.

Pages:

 Pages are collections of Tiles and Cards that represent specific Fiori applications.
 They provide a detailed view within a Space, containing related applications and links.

Steps to Configure Spaces and Pages

1. Create and Configure Spaces:

o Use the SAP Fiori Launchpad Designer to create Spaces.
o Define the structure and content of each Space.
2. Create and Configure Pages:
o Within each Space, create Pages that contain Tiles and Cards.
o Organize Tiles and Cards to provide a user-friendly layout.
3. Assign Roles and Authorizations:
o Define roles in the SAP back-end system and assign Spaces and Pages to these roles.
o Ensure users have the necessary authorizations to access the assigned Spaces and
Pages.

NAIDU KARRI
Instagram: mr_loyal_ml
Email: [email protected]