SAP Development: Mastering SAP UI5, BTP, Fiori, CAPM, RAP, ABAP; and More!

Clean Core Extensibility: Key-User Adaptation Projects Step by Step

Clean core, without the slideware

"Keep the core clean" means: stop modifying standard code — every modification is a tax paid at every upgrade. The alternative isn't "no customization." It's extensibility in the sanctioned layers.

For UI, that means adaptation projects: key-user and developer adaptations living outside the standard app, surviving upgrades.

This post builds a developer adaptation project for S/4HANA Cloud, step by step.

---

What an adaptation project can change

• Control variants and page views — different layouts per role.
• UI fragments at extension points — the clean way to inject fields and sections.
• Controller extensions — override or extend standard controller methods.
• App descriptor changes (manifest.json settings, original untouched).
• OData service — add or replace the consumed service.
• Component usages — reference other SAPUI5 components.

What's not there: editing SAP's views and controllers directly. That's the whole point.

---

Prerequisites (boring, but they block you)

• App released for extensibility by SAP — not every app is. Check first.
• 3-system landscape with a developer tenant (S/4HANA Cloud).
• Right business catalogs assigned (extensibility catalogs).
• On-premise (VS Code flow): SAP_UI 7.54+ / SAPUI5 1.72+, base app needs manifest.json. ABAP Cloud packages can't be used with on-premise adaptation projects.

---

Step 1: Create the adaptation project

In VS Code with SAP Fiori tools: Template Wizard → Adaptation Project → point at your base app. The wizard scaffolds a changes folder for your adaptations, separate from the base app's code.

That separation is the clean core.

---

Step 2: Open the Adaptation Editor

A WYSIWYG layer over the running app. Key users can already do a lot here: rearrange, hide, relabel, create variants.

Always check whether the requirement is solvable in the editor first. The best customization is the one with no code.

---

Step 3: Add a fragment at an extension point

Find the app's extension points (documented per app), add your fragment there. Example: a customer field group on the object page header. The fragment lives in your project; the framework merges it at runtime.

<!-- Fragment added at the standard app's extension point -->
<core:FragmentDefinition xmlns:core="sap.ui.core"
  xmlns="sap.m">
  <VBox>
    <Label text="Customer Priority" />
    <Text text="{Priority}" />
  </VBox>
</core:FragmentDefinition>

Standard app untouched. Your addition upgrade-safe.

---

Step 4: Extend the controller (only if you must)

Behavior changes need a controller extension: override specific lifecycle methods or event handlers, call the base implementation where standard behavior should stay.

Rule of thumb: extend, don't replace. Every overridden line is a line you re-verify at upgrade.

---

Step 5: Preview, then deploy

Preview against the live app — the editor shows changes in context. Then deploy to the ABAP repository. The adaptation ships as its own transportable unit, applied on top of the standard app at runtime.

---

Key-user vs developer adaptation

Teams get this wrong, so: key users = layout changes in the editor (hide, move, relabel, variants). Developers = fragments, controller extensions, service changes.

Push everything you can to the key-user layer. Reserve developer adaptation for what genuinely needs code.

---

The upgrade test

Here's how you know it worked: at the next S/4HANA Cloud release, your adaptation applies cleanly on the new standard app. An extension point moved? You adjust one fragment — not re-apply a pile of modifications.

That's the ROI, and why customers mandate this approach in 2026.

Questions on a specific app's extension points? Comments are open.

Read more →

Simplifying Asynchronous Programming in SAPUI5 with Async/Await

Asynchronous programming is vital in JavaScript, particularly when using frameworks like SAPUI5 for web app development. It involves handling tasks that take time, such as fetching data from APIs, in a way that doesn't freeze the user interface. While callbacks and Promises were traditional methods, they often led to complex code. Enter async/await, a modern approach making asynchronous code more readable. This article explores using async/await in SAPUI5 with simple examples.

Understanding Asynchronous Programming

In synchronous programming, tasks are completed one after another. Asynchronous programming allows tasks to run concurrently, avoiding UI blockages.

To understand more on asynchronous programming do check my previous blog

Introducing async/await

async/await are JavaScript keywords that make asynchronous code resemble synchronous code. async defines an asynchronous function, and await pauses execution until a Promise is fulfilled.

Using async/await in SAPUI5

Let's see how async/await simplifies SAPUI5 asynchronous code through easy examples.

Example 1: Fetching API Data

Traditionally, callbacks or Promises fetched data. async/await streamlines this:

Read more →

Asynchronous Programming in JavaScript with SAPUI5: Helping Execution and Responsiveness

In modern web development, creating responsive and performant applications is crucial. Asynchronous programming plays a vital role in achieving these goals by allowing JavaScript code to execute non-blocking operations. When it comes to building SAPUI5 applications, understanding asynchronous programming is essential for optimizing performance.

In this blog, we will explore the concepts of asynchronous programming in JavaScript and its relevance to SAPUI5. We will delve into the benefits of asynchronous programming and provide examples of how to implement it effectively.

Understanding Asynchronous Programming

Asynchronous programming is a programming paradigm that allows multiple tasks to be executed concurrently, enhancing the efficiency and responsiveness of applications. In JavaScript, asynchronous operations are typically performed using callbacks, promises, or async/await.

Callbacks: Callbacks are functions passed as arguments to other functions. They are executed once an asynchronous operation completes. While effective, callback-based code can become complex and difficult to manage, leading to the "callback hell" phenomenon.

Promises: Promises were introduced to address the issues with callbacks. They provide a more structured way to handle asynchronous operations. Promises represent the eventual completion or failure of an asynchronous operation and allow chaining of multiple operations.

Check my previous blog to understand more on promises.

Async/Await: Introduced in ES2017, async/await is a modern approach to handle asynchronous code. It provides a cleaner syntax by allowing developers to write asynchronous code that looks similar to synchronous code. Under the hood, async/await is built upon promises.

Check my blog on async await in javascript

Benefits of Asynchronous Programming in SAPUI5

Implementing asynchronous programming techniques in SAPUI5 applications offers several advantages:

1. Enhanced Responsiveness: Asynchronous operations prevent the user interface from freezing while time-consuming tasks are executed, ensuring a smooth user experience.

2. Improved Performance: By offloading time-consuming tasks to background threads, asynchronous programming optimizes application performance, making it faster and more efficient.

3. Efficient Resource Utilization: Asynchronous programming allows resources to be utilized effectively by executing multiple tasks concurrently, reducing idle time and increasing overall productivity.

4. Seamless Data Fetching: When working with remote services or APIs, asynchronous programming enables non-blocking data fetching, ensuring that the application remains responsive while waiting for server responses.

5. Better Error Handling: Asynchronous programming techniques provide robust error handling mechanisms, making it easier to handle exceptions and failures gracefully.

Implementing Asynchronous Programming in SAPUI5 

To demonstrate how to implement asynchronous programming in SAPUI5, let's consider an example of fetching data from a remote server using the `sap.ui.model.odata.v2.ODataModel` class.

Read more →

Creating Basic ALV Grid Report in SAP ABAP

ALV (ABAP List Viewer) reports play a crucial role in the world of SAP ABAP development. They provide a powerful tool for presenting data in a user-friendly and organized manner. In this blog, we will walk you through the process of creating a basic ALV Grid report in SAP ABAP, step by step.

Step 1: Define the Data Source

The first step in creating an ALV Grid report is to define the data source. This typically involves fetching data from database tables or other sources. For this example, let's consider a scenario where we want to display a list of employees and their basic information.

Step 2: Create the Internal Table

Once you've fetched the data, you need to store it in an internal table. An internal table is a dynamic structure that holds data in memory. Define the structure of the internal table based on the fields you want to display in the ALV report.

Read more →

Handling User Interactions and Secondary Lists in SAP ABAP using AT LINE-SELECTION and AT USER-COMMAND Events

SAP ABAP (Advanced Business Application Programming) is a powerful programming language used for developing applications within the SAP environment. One of the key aspects of SAP applications is providing a user-friendly interface for users to interact with the system. The AT LINE-SELECTION and AT USER-COMMAND events are essential tools for handling user interactions and displaying secondary lists based on user selections.

1. Understanding AT LINE-SELECTION and AT USER-COMMAND Events:

In SAP ABAP, the AT LINE-SELECTION event occurs when a user clicks on a specific line of data in a list or a table. This event is used to capture the user's selection and trigger actions based on that selection. The AT USER-COMMAND event, on the other hand, is used to capture actions triggered by users through function keys (e.g., F2, F4) or toolbar buttons. These events play a crucial role in creating dynamic and responsive user interfaces.

2. Using AT LINE-SELECTION Event:

The AT LINE-SELECTION event allows you to respond to user selections within a list. When this event is triggered, you can capture the selected line's data and perform relevant actions. For instance, you can display more detailed information about the selected item or navigate to a different screen.

Example:

Read more →

Understanding Blobs in JavaScript: Enhancing Web Application Functionality

In the world of modern web development, JavaScript plays a pivotal role in creating dynamic and interactive web applications. One of the lesser-known but immensely useful features in JavaScript is the Blob object. This powerful construct allows developers to work with binary data, opening up a realm of possibilities for handling media files, streams, and much more. In this article, we'll dive deep into what a Blob is, its significance in web applications, and provide a practical example of how to utilize it.

What is a Blob?

A Blob, short for Binary Large Object, is a JavaScript object that represents a chunk of binary data. This binary data can encompass anything from images, audio, and video files to large sets of text or even serialized data. Blobs are particularly useful when dealing with data that isn't necessarily text-based or when you need to manipulate binary data directly.

Why are Blobs Important in Web Applications?

1. Efficient File Handling: Blobs are crucial when dealing with files in web applications. They allow developers to read, manipulate, and transmit files efficiently, especially when handling media files that aren't plain text.

2. Data Manipulation: Blobs provide methods to slice and manipulate binary data. This is incredibly valuable when you need to modify parts of a file or split a large file into smaller segments for optimized processing.

3. Data Storage and Transmission: Blobs can be used to store data in a local database or transmit it to servers. This is especially relevant when you want to upload files, such as images, to a server for storage or further processing.

4. Stream Handling: Blobs are an essential component in handling streams of data. They can be used to buffer incoming data and process it in chunks, which is advantageous for real-time applications like video streaming.

Practical Example: Uploading Images Using Blobs

Let's explore a practical example to better understand how Blobs work in a real-world scenario. Imagine you're building a social media application that allows users to upload images. You can use Blobs to efficiently manage the image data and upload it to the server.

Step 1: Creating a Blob

const imageInput = document.getElementById('image-input');

imageInput.addEventListener('change', (event) => {

  const selectedFile = event.target.files[0];

  const imageBlob = new Blob([selectedFile], { type: selectedFile.type });

});

```

Step 2: Uploading Blob to the Server

Once you have the Blob object representing the image, you can upload it to the server using various methods, such as AJAX or the Fetch API.

const uploadButton = document.getElementById('upload-button');

uploadButton.addEventListener('click', () => {

  fetch('your-upload-endpoint', {

    method: 'POST',

    body: imageBlob

  })

  .then(response => response.json())

  .then(data => {

    // Handle server response

  })

  .catch(error => {

    console.error('Error uploading image:', error);

  });

});

In this blog, we've explored the concept of Blobs in JavaScript and their significance in enhancing web application functionality. From efficient file handling to data storage and transmission, Blobs offer developers a powerful toolset to work with binary data effectively. We've also provided a practical example of using Blobs to upload images, showcasing how this concept can be applied in real-world scenarios. By incorporating Blobs into your web development toolkit, you can unlock new possibilities for handling and manipulating binary data with ease.

Read more →

Example of using promises in javascript in sapui5 development

JavaScript promises offer a powerful approach to handle asynchronous operations in SAPUI5 applications. In this blog, we'll delve into a detailed example of leveraging promises to create a seamless user experience while managing data retrieval from an OData service.

Feel free to check out my previous blog on introduction to promises in javascript with respect to sapui5 development

Example: Fetching Employee Data from an OData Service

Scenario:

Imagine you're developing a SAPUI5 application that displays employee information fetched from an OData service. You want to ensure a responsive UI and graceful error handling.

Step 1: Promise Creation

To start, create a promise that encapsulates the OData service call:

const fetchDataPromise = new Promise((resolve, reject) => {

  const oDataModel = new sap.ui.model.odata.v2.ODataModel("/YourODataService");

  oDataModel.read("/Employees", {

    success: data => resolve(data),

    error: error => reject(error)

  });

});

```

Step 2: Handling Promises

Next, handle the promise using `.then()` to process the data and `.catch()` to handle errors:

fetchDataPromise

  .then(data => {

    // Process and display employee data

    const employeeList = data.results.map(employee => ({

      id: employee.Id,

      name: employee.Name,

      // Additional properties

    }));

    // Render the employee list on the UI

    renderEmployeeList(employeeList);

  })

  .catch(error => {

    // Handle errors gracefully

    showErrorDialog("An error occurred while fetching data. Please try again.");

    console.error("Error fetching data:", error);

  });

```

Step 3: Rendering Data

The `renderEmployeeList` function can be implemented to display the employee list on the UI:

function renderEmployeeList(employeeList) {

  // Render the employee list in a SAPUI5 control or table

}

```

By utilizing JavaScript promises, you've created an elegant solution for fetching employee data from an OData service in a SAPUI5 application. The promise structure ensures a smooth user experience by preventing UI blocking during data retrieval. Additionally, the `.catch()` block gracefully handles errors, maintaining application stability.

Promises, as demonstrated in this example, empower SAPUI5 developers to manage asynchronous tasks effectively and create responsive applications that enhance user interactions. This approach exemplifies the power of combining promises and SAPUI5 to deliver a robust and user-friendly experience.

Remember, mastering promises opens the door to creating more efficient and sophisticated SAPUI5 applications that meet the demands of modern web development.

With this practical example, you're now equipped to apply promises to your own SAPUI5 projects, enhancing both the technical excellence and user satisfaction of your applications.

Read more →

Promises in JavaScript: A Guide for sapui5 developers

In this blog, we'll explore promises, their function, and how they relate to SAPUI5 development.

JavaScript forms the foundation of many interactive web applications, especially when paired with frameworks like SAPUI5. One crucial concept that plays a vital role in managing asynchronous operations within SAPUI5 applications is the idea of promises. 

Understanding Promises

At its core, a promise is an object that represents a value that could be available immediately, in the future, or never. It's a method for managing asynchronous operations, like fetching data from a server or handling timeouts, in a more organized manner.

In SAPUI5, promises are frequently used to manage tasks that take time, such as fetching data from an OData service. Promises offer a structured way to handle these operations without causing delays in the user interface.

How Promises Work

Promises have three main states: pending, resolved (fulfilled), and rejected. When you create a promise, it starts in the pending state. As the asynchronous operation completes, the promise transitions to either the resolved or rejected state, depending on the outcome.

Here's a simplified breakdown of how promises function:

1. Creating a Promise: A promise is created using the `new Promise()` constructor. This constructor defines the asynchronous operation associated with the promise.

2. Pending State: The promise begins in the pending state, indicating the ongoing asynchronous operation.

3. Resolving a Promise: If the operation succeeds, the `resolve()` function associated with the promise is called. This changes the promise's state to resolved, and any attached `.then()` callbacks are executed.

4. Rejecting a Promise: If the operation encounters an error, the `reject()` function associated with the promise is called. This switches the promise's state to rejected, and any attached `.catch()` callbacks are executed.

5. Chaining: Promises can be chained using `.then()` and `.catch()` to create a sequence of operations.

Promises in SAPUI5

In SAPUI5 development, promises are utilized to handle various scenarios requiring asynchronous behavior. Some common use cases include:

1. Fetching Data: Promises help manage data fetched from an OData service or an external API by handling responses and errors more effectively.

2. Loading Resources: When loading external resources like images or scripts, promises ensure the UI remains responsive during the process.

3. Sequential Operations: Promises provide an organized way to execute a sequence of tasks one after the other.

4. Parallel Operations: Promises allow multiple asynchronous operations to occur concurrently, waiting for all to complete before proceeding.

Benefits of Using Promises

1. Readability: Promises enhance code readability by structuring asynchronous operations more clearly.

2. Error Handling: Error handling becomes simpler, with errors centralized in a `.catch()` block.

3. Avoiding Callback Hell: Promises prevent callback hell by enabling linear chaining of operations

In my next blog, I will explain an example of using promises with respect to sapui5 development.

In SAPUI5 development, understanding promises is crucial for managing asynchronous tasks effectively. These constructs offer a structured way to handle such operations, enhancing code readability and maintainability. Mastering promises in JavaScript equips developers to create responsive SAPUI5 applications that deliver exceptional user experiences. Embrace promises, tap into their potential, and elevate your SAPUI5 development skills.

Read more →

Utilizing Microservices in SAP CAPM Structure

In this blog, we will dig into the utilization instance of using microservices inside the SAP CAPM system, upheld by a true model that features the advantages and benefits of this methodology.

If you want to understand more on microservices in BTP, you can visit my previous blog.

Figuring out SAP CAPM Structure

SAP CAPM is a far reaching system that works with the improvement of cloud-based applications, joining information demonstrating, business rationale, and UIs into a solitary coordinated climate. It gives an organized way to deal with building applications with normalized shows and reflections, making the improvement interaction proficient and reliable.

Advantages of Microservices in SAP CAPM

1. Scalability: Microservices engineering permits applications to scale evenly by separating them into more modest, autonomously deployable units. With regards to Drain CAPM, this implies that various parts of the application can be scaled exclusively, guaranteeing ideal asset use.

2. Flexibility and Agility: Microservices empower nimbleness by permitting groups to autonomously work on various pieces of the application. This is particularly helpful in SAP CAPM improvement, where different groups can work simultaneously on information models, business rationale, and UIs without slowing down one another's advancement.

3. Isolation and Resilience: Microservices advance separation between various parts of an application. This disconnection upgrades versatility, as disappointments in a single microservice don't be guaranteed to disturb the whole application. With regards to Drain CAPM, this guarantees that disappointments in a single module don't risk the usefulness of the whole application.

4. Technology Diversity: Microservices consider the utilization of various innovations and programming dialects for various parts. In SAP CAPM, this can be worthwhile while coordinating with different outer administrations or frameworks, as various microservices can involve the most proper innovation for the errand.

Use Case: Online business Application

We should consider a guide to outline the utilization instance of microservices in SAP CAPM. Envision an organization fostering an internet business application utilizing the CAPM system. The application comprises of different modules: item inventory, client confirmation, shopping basket, and request handling.

In a customary solid methodology, this multitude of modules would be firmly coupled, making it trying to scale and keep up with the application. Nonetheless, by utilizing microservices inside the SAP CAPM system, the organization can accomplish the accompanying:

1. Independently Foster Modules: Various groups can zero in on creating explicit microservices. For example, one group can deal with the item list microservice, one more on client validation, etc. This paces up improvement and takes into account equal work.

2. Scalability: During top shopping seasons, the request handling microservice can be scaled autonomously to deal with the expanded burden, without influencing different pieces of the application.

3. Ease of Maintenance: In the event that a bug is found in the shopping basket microservice, just that particular microservice should be refreshed, limiting the gamble of potentially negative results across the whole application.

4.Third-party Integrations: Coordinating with installment passages or transportation suppliers can be taken care of by committed microservices, each involving the most appropriate innovation for the errand.

Consolidating microservices inside the SAP CAPM system presents a strong way to deal with current application improvement. The adaptability, versatility, and nimbleness presented by microservices adjust well to the objectives of the CAPM system, bringing about more proficient, strong, and viable applications. As shown by our web based business use case, this approach enables advancement groups to make measured, superior execution arrangements that can adjust to changing business necessities effortlessly. By embracing microservices in SAP CAPM, ventures can situate themselves at the very front of advancement in the always developing scene of cloud-based application improvement.

Read more →

Microservices in SAP BTP

In this blog, we will explore the concept of microservices, delve into its benefits, and discuss relevant examples of its implementation in SAP BTP applications.

Microservices in SAP Business Technology Platform (BTP) are a modern approach to building applications. They are small, independent services that handle specific tasks, making applications more scalable and flexible.

Understanding Microservices in SAP BTP:

At its core, microservices architecture breaks down applications into smaller, independent services, each with its own set of functionalities. Unlike traditional monolithic applications, where all components are tightly integrated, microservices operate as standalone entities, communicating with each other through well-defined APIs. This decoupled approach promotes modularity, making it easier to develop, test, and deploy specific features independently.

Benefits of Microservices in SAP BTP:

1. Scalability: One of the key advantages of microservices lies in their ability to scale horizontally. This means that businesses can deploy multiple instances of a particular microservice based on the demand, ensuring optimal resource utilization and better performance during peak periods.

2. Agility: Microservices' independent nature allows for rapid development and deployment. Each microservice can be updated, tested, and rolled out separately, enabling continuous delivery and faster time-to-market for new features and enhancements.

3. Resilience: Microservices architecture fosters robustness and fault tolerance. As each microservice functions independently, a failure in one does not affect the entire system, reducing the risk of system-wide crashes and increasing the overall reliability of the application.

4. Technology Diversity: SAP BTP supports a diverse range of programming languages and tools, and microservices leverage this advantage fully. Businesses can choose the most suitable technology stack for each microservice, based on its specific requirements, ensuring optimal performance and flexibility.

Examples of Microservices in SAP BTP:

a. Order Management Service:

Consider a large e-commerce platform built on SAP BTP. The order management functionality can be implemented as a microservice. This service would handle tasks such as order creation, status updates, and cancellation independently, enabling the e-commerce platform to efficiently manage peak loads during sales events without affecting other services.

b. Payment Gateway Service:

In the same e-commerce platform, the payment processing functionality can be decoupled into a microservice. This service would interact with various payment providers, securely processing transactions without affecting other critical components of the application.

c. Inventory Management Service:

Another microservice in the e-commerce platform could handle inventory management. It would keep track of product stock levels, trigger alerts for low stock, and update product availability in real-time, ensuring seamless inventory control without disrupting other operations.

Implementing Microservices in SAP BTP:

To successfully implement microservices in SAP BTP, businesses should follow some best practices:

- Define Clear Service Boundaries: Identify distinct business functions and create well-defined boundaries for each microservice to ensure focused responsibilities and easy management.

- Use Effective API Management: Properly define and manage APIs to facilitate smooth communication between microservices and ensure secure data exchange.

- Implement Robust Monitoring and Logging: Regularly monitor and log microservices to identify potential performance bottlenecks and maintain the health of the entire application.

In my Next blog, I have given a use case for microservices in sap capm apps.

Microservices in SAP BTP offer a compelling approach to building modern applications, fostering agility, scalability, and resilience. By adopting this architecture, businesses can unlock new levels of innovation, enabling them to stay ahead in the competitive digital landscape. Embracing microservices in SAP BTP empowers organizations to optimize their digital transformation journey and drive success in the ever-evolving market.

Read more →