How I built a modern UI5 component library for SAP Fiori on-premise

#javascript #showdev #ui #ux

The problem

SAP Fiori developers on-premise are stuck with UI5's built-in components. They're functional, but the UX feels dated compared to modern web apps — and migrating to BTP just to get a better UI isn't always an option.

What I built

UX7 is a custom UI5 component library with 41+ controls that drop into any existing Fiori project via CDN. No BTP, no migration, no breaking changes to your existing app.

How it works

1. Register in Component.js

sap.ui.define([
    "sap/ui/core/UIComponent",
    "sap/ui/Device",
    "your.app/model/models",
    "sap/ui/dom/includeStylesheet"
], function (UIComponent, Device, models, includeStylesheet) {
    "use strict";
    return UIComponent.extend("your.app.Component", {
        metadata: { manifest: "json" },
        init: function () {
            UIComponent.prototype.init.apply(this, arguments);
            this.getRouter().initialize();
            this.setModel(models.createDeviceModel(), "device");

            sap.ui.loader.config({
                paths: { "ux7": "https://cdn.getux7.com/v1/ux7" }
            });
            includeStylesheet("https://cdn.getux7.com/v1/ux7/ux7.min.css");
        }
    });
});

2. Use in any XML view

xmlns:ux7="ux7.control"

<ux7:ExTable rows="{/items}" />
<ux7:ExKanban lanes="{/lanes}" />
<ux7:ExForm title="Payment Request" />

What's included

Layout: ExGrid, ExFlex, ExSplitter, ExPanel, ExCard
Form: ExInput, ExSelect, ExDatePicker, ExTimePicker, ExFileUploader
Data: ExTable, ExTreeTable, ExKanban
Feedback: ExDialog, ExToast, ExProgress, ExStepper
Navigation: ExNavMenu, ExAppShell, ExIconTabBar

Free until August 2026

All components including Pro tier are free during the launch period.

Live playground + full docs: getux7.com

DEV Community