Reinventing SAP MM Procurement for Fashion Industry with OpenUI5: A Fabric Sourcing Workbench

I’m still quite new to Fiori and OpenUI5 development, and this project is part of my learning journey. I wanted to take a real-world SAP MM scenario and try to simplify it using a modern UI approach. This is not a production-level solution or a complete SAP replacement - just a small experiment to understand how complex processes can be reimagined in a more user-friendly way.

I might have misunderstood certain best practices or oversimplified some areas, and I’m completely open to feedback and corrections. My goal here is to learn, share, and improve - and hopefully this can help someone else who is also starting out with SAP UI technologies.

In the fast-paced fashion manufacturing industry, procurement is not just a backend function - it’s a time-critical operation that directly impacts production timelines and delivery commitments. When a new style is confirmed, procurement teams must quickly ensure that the required raw materials, such as fabrics, are available in the right quantity, color, and time. However, in traditional SAP MM processes, achieving this is far from simple.

In standard SAP, a buyer typically navigates through multiple transactions like MD04 to check demand, MMBE for stock levels, and ME2N to review existing purchase orders. To initiate procurement, they must switch to ME51N or ME21N. Each of these transactions provides only a partial view of the process, forcing users to manually consolidate information and make decisions. This fragmented workflow is not only inefficient but also prone to human error - especially in an industry where delays can disrupt entire production cycles.

The Idea: Fabric Sourcing Workbench

Visit live demo with mock data here

user name : openui5 password : 123654

To address this challenge, I designed a concept called the Fabric Sourcing Workbench - a unified Fiori-style application that brings the entire procurement decision process into a single interface.

Instead of jumping between multiple SAP screens, the user can:

• Search by style or material

• Instantly view demand, stock, and open procurement quantities

• Automatically calculate shortages

• Compare vendors based on lead time, price, and availability

• Create Purchase Requisitions or Purchase Orders with pre-filled data

• Receive real-time validations and structured messages (success, warning, error)

• Track procurement status in one place

What previously required multiple transactions and manual effort is now simplified into a smooth, guided workflow.

Real-World Scenario

Imagine a procurement executive receives a request for:

• Style: ST-4608 - Ladies Casual Blouse

• Fabric: Cotton Poplin (Sky Blue)

• Required Quantity: 12,000 meters

• Required Date: 15.May.2026

Using the app, they can immediately see:

• Available stock

• Open purchase orders

• Open requisitions

• Calculated shortage

Within seconds, they identify a shortage, evaluate vendors, and create a purchase order.

All without leaving the app. This drastically reduces decision time and improves accuracy.

Why OpenUI5?

As someone new to Fiori development, I wanted to explore how much I could achieve using open technologies. That’s why I built this project using OpenUI5, which provides the same core capabilities as SAPUI5 but is completely open source.

The app follows a clean MVC architecture:

• XML Views

• JavaScript Controllers

• JSONModel (mock data)

It is styled using the modern SAP Fiori Horizon Theme, supporting both light and dark modes with dynamic switching.

Technical Highlights

The application simulates a real SAP MM workflow with 8 routes:

• Login

• Home

• Dashboard

• MaterialDetail

• VendorCompare

• CreatePR

• CreatePO

• Tracking

One of the most interesting features I implemented is a custom keyboard shortcut system.

Shortcut Manager

I built a singleton ShortcutManager.js that supports:

• Global shortcuts (e.g., Alt+H for Home, F3 for Back, Ctrl+Shift+D for theme toggle)

• Page-specific shortcuts (e.g., Ctrl+F for search, F9 to create PO, Ctrl+Enter to submit forms)

It uses a single keydown event listener and intelligently handles input fields - allowing function keys and navigation shortcuts while preventing interference with typing.

This makes the entire application fully operable without a mouse, similar to how power users work in SAP GUI.

UX Enhancements

To improve usability further:

• I created a floating shortcut help button that displays all available shortcuts

• Shortcuts are grouped by category (Navigation, Actions, Forms, etc.)

• UI is enhanced with inline-styled components and SAP-inspired design patterns

• Dark mode is supported using theme switching and custom CSS variables

From Fragmented to Unified

This project demonstrates how a traditionally fragmented SAP MM process can be transformed into a streamlined, user-friendly experience. By integrating demand analysis, sourcing, validation, and document creation into one application, we can significantly improve efficiency and reduce manual effort.

Final Thoughts

I’m still new to Fiori and OpenUI5, and this project is part of my learning journey. My goal was to take a real-world SAP problem and try to solve it using modern UI concepts and open-source tools.

This project is open source, and I would truly appreciate any feedback, suggestions, or improvements from the community. If you’re also learning SAP UI technologies, I hope this gives you some inspiration to build something practical and meaningful.

C YA!