
I aim to share the application I developed using HTML and CSS in SAP. I hope this article inspires you to create user-friendly and visually appealing applications that enhance the user experience.
At Melasoft, where we specialize in creating tailored SAP solution packages for diverse business processes, including both B2C and B2B models, enhancing user experience is at the core of our mission. Within our solutions, users often navigate through multiple menus to manage essential operations, such as the Application Menu, Periodic Programs Menu, and Customization Menu. While functional, this approach often posed challenges in efficiency and ease of use.
Recognizing this, my team lead presented a visionary idea: to combine these three distinct menus into a single, unified interface. The goal was to simplify navigation, improve user satisfaction, and create a seamless experience for our clients. Inspired by this challenge, I embarked on the journey to develop a solution using HTML and CSS to deliver a dynamic, visually appealing, and highly functional interface within SAP.
After careful planning and meticulous execution, I successfully completed this development. The result was a user-friendly interface that showcases the untapped potential of integrating web technologies, like HTML and CSS, into SAP systems. Through this article, I aim to share the process, technical insights, and the remarkable benefits this enhancement brings to SAP solutions. My goal is to inspire others to explore how modern web design principles can transform traditional SAP environments.
To lay the foundation for this development, I began by creating two database tables to efficiently manage the data required for the application.
Page Data Table: This table was designed to store the core information about the unified interface itself, such as menu configurations, settings, and any other dynamic content required for the application. It serves as the backbone of the page, ensuring seamless functionality and flexibility.
Documentation Table: Recognizing the importance of providing users with easy access to detailed information about the program at every step, I created a second table dedicated to documentation. This table allows users to access step-by-step guides or additional details about the system functionalities directly from the interface, eliminating the need for external resources and enhancing the overall user experience.
This approach ensures not only the operational efficiency of the unified interface but also empowers users with on-demand access to the information they need to navigate and understand the system effectively.


And then I created a program for uploding documents into the database. Using this program I will be able to uplad detailed documentation into the Database easily. So when I start to develop other page using this database I will be able to get any document using the key of Databease and get binay of the document and show it to the user.

As you can see I use list box to make my work easily and fast. I will not give detail about this program because it is not hard to imagine what I have done. I get the file path and upload it using 'cl_gui_frontend_services' and then convert it to xstring using 'scms_binary_to_xsting' and modify my table using other keys.
This is just the beginnig of this journey. In the second step I developed a class for creating HTML pages .

As you can see there are three methods and constructure. In constructure I get the internal table of my general databese with the necessary key parameters;

About the create_html and create_main_page_html methods I will explain later. Let’s take a closer look at the Main Page—the centerpiece of this development. This page serves as the unified interface, bringing together the Application Menu, Periodic Programs Menu, and Customization Menu into a single, cohesive view.
The design prioritizes simplicity, functionality, and aesthetic appeal, leveraging HTML and CSS to create a visually intuitive layout that enhances user interaction. The page not only consolidates the menus but also introduces a user-friendly navigation structure that reduces the complexity of managing processes within SAP.
Once the Main Page is unveiled, I’ll dive into the technical details, including how the development was structured, the use of database tables, and the integration of HTML and CSS within the SAP environment.

The Main Page: An Overview
Below is the Main Page, which serves as the entry point for this unified interface. At first glance, you’ll notice three prominent buttons positioned at the top of the page, each designed to enhance accessibility and user engagement:
Documentation Button: This button provides direct access to a comprehensive document detailing the functionality and purpose of the application. It ensures users have the necessary resources at their fingertips to navigate and understand the system.
Melasoft Website Button: This button redirects users to the Melasoft website, offering them the opportunity to explore our company’s portfolio and solutions in greater depth.
S4Pedia Blog Button: A gateway to our blog site, this button connects users to S4Pedia, where developers, functional consultants, and SAP experts from our team share their insights, articles, and experiences to inspire and educate the SAP community.
Dynamic List Boxes for Seamless NavigationAt the top of the page, you’ll also find dynamic list boxes that act as filters for user selections. Once the user makes their choices from these dropdowns, the interface dynamically transitions to the second page, adapting the displayed content accordingly.
This streamlined and intuitive design ensures that users can quickly access relevant information and proceed through the system without unnecessary complexity.

This is Second Page. As you can see there are three block for boxes. The first block represents the Application Program menu. By using this boxes User can easly navigate to our Application Program which is related to the package.
For example if it is an E-Invoice Package for Peppol. User can navigate easily to Inboud cockpit for incoming invoices or can navigate to outbound cockpit for out going invoices.
The second block is for Periodic Programmes which we need especially for Checking the Invoices status from Goverment or Entegrator's API or getting the incoming invoices from the portal.
The third block is for customization which is very important for our E-solutions. Because in our solutions we are using dynamic structure and OOP. So customization tables are really important. And most of the time users can face with a lot problem in this phase.
But as you can see from the screen shot user can easily see Documentation and can easily navigate to SM30 screen by clicking the Box itself. After finishing the customization by clicking Approve button the button will return into Green and by following the arrows the user can finish this process by him/herselves.



Delving into the Code: A Peek Behind the Scenes
Now that I’ve provided a brief overview of the application and its functionality, let’s dive into the technical details behind its development. My goal is to give you a clear understanding of the logic and approach I employed while keeping the explanation concise and straightforward.
I’ll walk you through the key sections of the code that bring this unified interface to life, focusing on how HTML and CSS were integrated into the SAP environment, how the dynamic features were implemented, and how the database tables interact with the user interface.
By the end of this section, I hope you’ll gain insights into how modern web development practices can seamlessly blend with SAP to create user-friendly, efficient solutions.

The Report: Managing the Selection Screen and List Boxes
The report, titled /MLSAG/ED_GEN_PROD_ACTIVATION, is the backbone of this development, enabling the functionality of the selection screen and list boxes. It is structured using modular programming practices, leveraging INCLUDEs and key ABAP events for clear organization and maintainability.
Key Highlights of the Report:
INCLUDE StatementsThe report integrates multiple INCLUDE files, each encapsulating specific logic:
/MLSAG/ED_GEN_PROD_ACTIVATE_T: Handles data types and table declarations.
/MLSAG/ED_GEN_PROD_ACTIVATE_C: Classes Definition and Implementation.
/MLSAG/ED_GEN_PROD_ACTIVATE_F: Includes for forms and function modules..
/MLSAG/ED_GEN_PROD_ACTIVATE_M: Encapsulates the modules for screens..
This modular structure improves readability and simplifies future enhancements or debugging efforts.
Important ABAP EventsSeveral events are utilized to manage the selection screen and list boxes effectively. I used 2 classes for creating HTML page and managing events there. And also creating ALV for Documentation Pop-up as you can remember from above. CLASS lcl_report DEFINITION. CLASS cl_event_receiver DEFINITION. For me , the most important part is how I manage to get info from HTML and use it in SAP. I used on_sapevent method of lcl_report class.
Let me show you the implementation;
I used action which are coming from HTML class,

by this way I get the action and the other important parameters from the HTML create class and use it in SAP.
As a Conclusion
As demonstrated throughout this article, my goal was not to detail every aspect of the application I developed but rather to highlight the power of integrating HTML and CSS within the SAP environment. This integration not only simplifies complex workflows but also brings an aesthetic and intuitive user experience to an otherwise traditional interface.
The example shared here illustrates how modern web technologies can enhance SAP solutions, making them both easy to navigate and visually appealing.
Looking ahead, I plan to further improve this application by incorporating CDS Views to handle more complex and dynamic packages. This enhancement will allow the application to process and display data for more sophisticated business requirements, expanding its versatility and usability across diverse processes.
By combining creativity, modern tools, and SAP’s robust infrastructure, I aim to continue transforming traditional approaches into innovative, user-friendly solutions.
Comments