hana-developer-cli-tool-example sapui5-ui-development.instructions.md

SAPUI5 UI Development Guidelines

Use this guide when creating or modifying SAPUI5 user interfaces in the app/resources/ directory.

Scope and Purpose

This guide applies to all UI components in app/resources/. Each feature area (e.g., systemInfo, inspect, tables) is a self-contained SAPUI5 application that follows common patterns and extends shared base components from app/resources/common/.

Critical Principles

1. Consistency: All UI components follow the same structural pattern and inheritance model.
2. Reusability: Extend sap.hanacli.common.controller.BaseController for all controllers.
3. Internationalization: All user-facing text comes from i18n resource bundles.
4. Type Safety: Use JSDoc comments and structured error handling.
5. Shared Resources: Leverage common fragments, models, and utilities.
6. Responsive Design: Support desktop, tablet, and phone device types.
7. Theme Support: Include dark mode detection and Fiori 3 theme variants.
8. Namespace Convention: All components use sap.hanacli.* namespace.

Folder Structure Template

Each UI component follows this structure:

app/resources/<featureName>/
├── Component.js           # Component definition extending common.Component
├── manifest.json          # Application descriptor with routing, models, i18n
├── index.html             # Bootstrap HTML with UI5 CDN and dark mode detection
├── controller/
│   └── App.controller.js  # Main controller extending BaseController
└── view/
    └── App.view.xml       # Main view with responsive layout

Component Definition (Component.js)

Every component extends the common base component:

sap.ui.define([
    "sap/hanacli/common/Component"
], function (UIComponent) {
    "use strict";

    return UIComponent.extend("sap.hanacli.<featureName>.Component", {

        metadata: {
            manifest: "json"
        },

        init: function () {
            this.superInit();
        }
    });
});