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

Source: Dev.to

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. 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.

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”

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 All components including Pro tier are free during the launch period. Live playground + full docs: getux7.com