SAP Fiori 온프레미스를 위한 현대적인 UI5 컴포넌트 라이브러리 구축 방법

Source: Dev.to

문제

SAP Fiori 온프레미스 개발자들은 UI5에 기본으로 제공되는 컴포넌트에 얽매여 있습니다. 기능은 충분하지만 UX가 최신 웹 앱에 비해 구식처럼 느껴집니다. 더 나은 UI를 위해 BTP로 마이그레이션하는 것이 항상 가능한 옵션은 아니죠.

UX7은 41개 이상의 컨트롤을 제공하는 커스텀 UI5 컴포넌트 라이브러리로, CDN만 연결하면 기존 Fiori 프로젝트 어디에든 바로 사용할 수 있습니다. BTP도 필요 없고, 마이그레이션도 없으며, 기존 앱에 파괴적인 변경도 없습니다.

1. 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. 모든 XML 뷰에서 사용

xmlns:ux7="ux7.control"

• 레이아웃: ExGrid, ExFlex, ExSplitter, ExPanel, ExCard
• 폼: ExInput, ExSelect, ExDatePicker, ExTimePicker, ExFileUploader
• 데이터: ExTable, ExTreeTable, ExKanban
• 피드백: ExDialog, ExToast, ExProgress, ExStepper
• 네비게이션: ExNavMenu, ExAppShell, ExIconTabBar

프로 티어를 포함한 모든 컴포넌트를 런칭 기간 동안 무료로 제공하고 있습니다.
실시간 플레이그라운드와 전체 문서는 getux7.com에서 확인하세요.