All projects
Enterprise Web Application
2026 Completed

React Fiori Style

A Fiori-aligned React application for managing SAP file attachments, business objects, and administrative workflows.

Source code

Attachment discovery with filters, metadata, versioning, and familiar Fiori actions.

Project overview

React Fiori Style is an enterprise frontend that streamlines file attachment operations inside an SAP environment. It gives business users a focused way to browse, upload, version, preview, and connect files to business records.

The application is organized as a role-aware portal with separate business workflows and administration tools. Users can move from a launchpad into attachment and business object areas, while administrators can manage users, configuration files, deleted attachments, and system activity.

Built with React and Vite, the application uses SAP UI5 Web Components to preserve Fiori interaction patterns while React Query, Zustand, and Axios coordinate server data, local state, and API requests across feature modules.

The frontend integrates with multiple SAP OData v4 services and is packaged for deployment into an SAP ABAP/Fiori environment. GitHub Actions automates the validation and deployment workflow for the SPA.

Objectives

  1. 01

    Simplify attachment operations

    Make searching, creating, updating, previewing, and versioning SAP attachments clear for everyday business users.

  2. 02

    Preserve Fiori usability

    Deliver familiar SAP interaction patterns and visual language across business and administrative screens.

  3. 03

    Connect files to business context

    Allow attachments to be linked with business objects and reviewed together with their metadata and audit trail.

  4. 04

    Support safe administration

    Give authorized users visibility into system metrics, user access, configuration rules, and deleted records.

Key features

Launchpad and role-based navigation

Start from a centralized launchpad where business and administration tiles are shown according to user access.

Attachment search and management

Browse attachments in table or grid views, filter by metadata, create records, and upload new file versions.

Preview, version history, and audit

Inspect file metadata, preview documents, review version history, and follow audit information from one detail view.

Business object linking

Connect attachments to SAP business objects and inspect the relationships that give files their business context.

Google Drive uploads

Import files from Google Workspace alongside standard local file uploads.

Administration dashboard

Review system metrics and manage users, configuration files, deleted attachments, and operational information.

Challenges and decisions

Recreating the Fiori experience in React

Challenge

The application needed to feel native to an SAP environment while being built with a modern React stack and covering both business and administrative workflows.

Decision

Used SAP UI5 Web Components for business controls and Fiori interaction patterns, with Tailwind CSS reserved for layout, spacing, and responsive composition.

Working with SAP OData v4 services

Challenge

SAP requests require client-specific parameters, CSRF protection, and consistent handling across multiple attachment, business object, user, and dashboard services.

Decision

Centralized API behavior in an Axios integration layer that resolves SAP context, manages CSRF token lifecycles, and keeps feature-level data hooks focused on business operations.

Deploying a Vite SPA into SAP Fiori

Challenge

The target Fiori environment did not provide a direct deployment path for the Vite application, while deep links still needed to work reliably after deployment.

Decision

Packaged the SPA with UI5 tooling, used HashRouter for deployment-compatible navigation, and automated validation and delivery through GitHub Actions.

Supporting multiple upload sources

Challenge

Users needed to upload files from their device or bring them directly from Google Drive without creating separate business flows.

Decision

Integrated the Google Drive Picker alongside local file inputs and normalized both sources into the same attachment upload workflow.

My contribution

  • Acted as the primary maintainer for the frontend repository and owned the technical direction, architecture, and core technology choices.
  • Designed the initial interface direction and brought the business and administration screens to their final UI and interaction form.
  • Built the React and Vite application around SAP UI5 Web Components, Tailwind CSS, React Router, React Query, and Zustand.
  • Worked with the backend team to define the OData v4 contracts and implemented the shared Axios integration layer, including SAP client context and CSRF token handling.
  • Implemented protected administration routes, role-aware navigation, and the automated GitHub Actions workflow for deploying the SPA into the SAP Fiori environment.

luongductrong2004@gmail.com

© 2026 Made with ❤️ by Duc Trong Luong