create-ui5-freestyle-lr

Scaffolder for freestyle SAPUI5 List Report apps. Ask a few questions, fetch your OData $metadata, and get a running UI5 app with filter bar, value helps, pagination, sorting, grouping, column settings, and i18n — all plain SAPUI5 code you own and can edit.

Not Fiori Elements (annotation-driven). This is a freestyle template that generates explicit views and controllers you can customise directly.

Usage

npm create ui5-freestyle-lr@latest my-app
cd my-app
npm install
npm start

The CLI asks a short series of questions (app namespace, OData URL, credentials), fetches the $metadata, then lets you pick columns, filters, value helps, and search fields interactively from the live entity set.

Afterwards the generated project is yours — plain UI5 + @ui5/cli v3, no runtime dependency on this package.

What you get

my-app/
├── package.json                   @ui5/cli v3 scripts (start / build)
├── ui5.yaml                       SAPUI5 framework config + OData proxy
├── README.md                      How-to for the generated project
└── webapp/
    ├── Component.js, manifest.json, index.html
    ├── view/
    │   ├── App.view.xml
    │   ├── Worklist.view.xml       DynamicPage + VariantManagement + FilterBar + Table + Footer pagination
    │   ├── NotFound.view.xml
    │   └── fragments/
    │       ├── SortDialog.fragment.xml
    │       ├── GroupDialog.fragment.xml
    │       ├── InfoPopover.fragment.xml            (demo pattern)
    │       └── <Field>VH.fragment.xml              (one per value-help filter)
    ├── controller/
    │   ├── App.controller.js
    │   ├── BaseController.js        helpers (getRouter, getModel, getResourceBundle, onNavBack)
    │   ├── Worklist.controller.js   pagination, sort/group, column settings, filter build, VH handlers
    │   ├── ErrorHandler.js          centralised OData error handling
    │   └── NotFound.controller.js
    ├── model/
    │   ├── formatter.js             formatDate / formatPartnerId / formatStrongCode / numberUnit / _animateValue
    │   └── models.js                device + FLP model factories
    ├── i18n/                        i18n.properties (+ i18n_de.properties if German enabled)
    ├── css/style.css
    └── localService/metadata.xml    snapshot of your OData $metadata

Features in the generated app

• DynamicPage layout with collapsible filter bar header
• VariantManagement (sap.ui.fl.variants.VariantManagement) for "My View" save / load of the current filter, sort, group, column visibility, page size, and search. Persisted client-side via the LocalStorageConnector (one-line swap to LrepConnector for SAP-backend storage).
• FilterBar with three filter input types, picked automatically from the OData property type:
  • DateRangeSelection for Edm.DateTime / Edm.DateTimeOffset
  • MultiInput + value-help dialog when you point a filter at a lookup EntitySet
  • Plain MultiInput for free-text contains-search
• Table columns auto-sized by Edm type:
  • First key field → ObjectIdentifier
  • Dates → Text with the formatDate formatter
  • Booleans → accept/decline icon
  • Numbers → Text with numberUnit formatter (right-aligned)
  • Strings → plain Text
• Excel export (sap.ui.export.Spreadsheet) — refetches all matching rows respecting current filters and sort, with a confirm dialog above 1 000 rows. Column types are derived from the OData metadata at scaffold time, so dates land as Excel date cells. Animated progress dialog while the file is generated.
• Server-side pagination with $top / $skip + a separate $count query for total pages. Footer has page combo, step input for rows-per-page, prev/next/first/last buttons.
• Auto-refresh toggle button — re-fetches the table every 30 s while active. The footer shows the last-refreshed timestamp as an ObjectStatus + <cite> formatted text.
• Sharp table corners (CSS class lrTable) — border-radius: 0 on the table root, header toolbar, and info toolbar for a flatter monitoring look.
• Sort dialog, group dialog, column settings dialog (all from the table header toolbar).
• Info bar that shows a human-readable summary of the active filter, search, sort, and group state.
• Search bar across the columns you pick (joined with or).
• InfoPopover demo pattern — click a row-level link, open a popover with row-specific details. Replace the fields to match your own data.
• Centralised ErrorHandler attached to the OData model.
• Scroll-to-top animation after page change.
• URL state persistence — search / sort / group / page mirrored to the hash so a refresh or shared link preserves the view.
• i18n (English + optional German).
• localService/metadata.xml snapshot so offline development works.

Prompts

? App namespace (com.company.module.app)
? App title
? App description
? Minimum UI5 version              (default 1.120.0)
? Include German translations?     (default yes)

? OData metadata source            (fetch live / provide local file)
? Service URL
? Username / password
? Allow self-signed certificates?  (default yes, for on-prem dev systems)

? Main EntitySet                   (dropdown from $metadata)
? Table columns                    (checkbox, all checked by default)
? Filter bar fields                (checkbox)
? For each filter:                 (plain MultiInput / with ValueHelp EntitySet)
? Search fields                    (string properties only)
? Default sort field + direction

Adding a filter / column / value help after scaffolding

The generated project has a section at the bottom of its own README.md with a step-by-step copy-paste recipe. The template is one-shot: re-running the CLI creates a new project; changes to an existing one are done by hand.

Requirements

• Node.js 18+
• For live metadata fetch: network access to the SAP OData service and credentials the service accepts (basic auth).

Licence

MIT