GeneratorGeneratorCreates a project, a component or configuration once, when you run it, rather than taking part in every build.See every one →What this type is →independently maintainedindependently maintainedPublished by one person or a small company outside SAP. Says nothing about quality; the readings say that.See every one →
ui5-control-generator
A command-line generator that writes UI5 custom controls, in JavaScript or TypeScript, from the html files in a project, with control logic and renderer split into two files by default.
A UI5 custom control needs its metadata, its renderer and its wiring written by hand. This generator is run in the project with npx ui5-control-generator --ns <namespace>, where the namespace includes the project name, and it searches the project's folders for html files, or only the folder --path names. --type picks JavaScript or TypeScript, --split (on by default) writes control logic and renderer as two files, --overwrite (off by default) replaces files of the same name, and --loglevel runs from error to trace. The README's todo list names what is not done yet: detecting the namespace, taking property and attribute names from the html text, and an init and an onAfterRendering function for TypeScript. It links two demo apps, one in JavaScript and one in TypeScript.
Facts
Latestv1.0.6ReleasedLast pushLicenceApache-2.0
Where it sits
Lives in
Provides
GeneratorsUI5GeneratorsGetting from nothing to a project that runs, and from a project that runs to one that has the piece you just decided you need. Two different moments: the first is a one-time decision about layout, the second recurs for the life of the project.Custom controls and librariesUI5Custom controls and librariesExtending the set of controls an app is built from: a control of its own, a wrapper around a third-party widget, or an icon font registered with the framework, packaged so another app can reuse it. Distinct from [Web Components interop](capability:ui5-web-components), which brings in standard custom elements, and from [generators](capability:generators), which scaffold a control project rather than being one.
Who is behind it
Wouter LemaireWouter LemaireMaintains this
In the atlas: maintains 25, contributes to 39, wrote 12@lemaiwomaintainer
In the atlas: maintains 25, contributes to 39, wrote 12@lemaiwomaintainer
Before choosing this
Signals
ActivityQuietRelease and repository quiet for 29 months
Both observable publication channels have been quiet for at least 24 full months. This may be normal for stable software; check whether its current state still fits your use.
What it declares
Every artifact
- Type
- Generator
- Origin
- Independently maintained
As a generator
- Generates
- A component in an existing project
- Run with
- Its own command
- Distributed through
- does not say
Connections
Group by
NodeRelationBasis
Functional
Custom controls and librariesCustom controls and librariesCustom controls, wrappers and icon fonts packaged for reuseSAP and community, unassessed
provides
stated
provides Custom controls and libraries
Produces the custom control classes of a UI5 project from html, so the control scaffolding is not typed by hand.
“UI5 Control Generator”“to define a specific folder to search for html files”
Custom controls, wrappers and icon fonts packaged for reuse
GeneratorsGeneratorsStarting a project, and adding pieces to one that runsSAP and community, narrow by design
provides
stated
provides Generators
Generates UI5 custom control files from html found in the project, as JavaScript or TypeScript, with logic and renderer split into two files by default.
“UI5 Control generator based on html”“Split Control logic and renderer in two files, default will split.”
Starting a project, and adding pieces to one that runs
Download
Install
npm add ui5-control-generatorDerived from the package name. No recipe recorded; the README has the configuration.
README
quoted from lemaiwo/ui5-control-generator under Apache-2.0, readlemaiwo/ui5-control-generator/README.mdthe maintainer’s wordsOn GitHub
ui5-control-generator
UI5 Control Generator
Installation
npm install --save-dev ui5-control-generatorUsage
To start the generator, run:
npx ui5-control-generator --ns <namespace>Commandline Options
This is the list of available commandline arguments, including the ones above:
--t,--type: Define the type of syntax, JavaScript or TypeScript--ns,--namespace: Namespace of your UI5 project (including the projectname)--p,--path: Optional parameter to define a specific folder to search for html files, default will search in all folders--s,--split: Split Control logic and renderer in two files, default will split. Values can be true or false--ow,--overwrite: Overwrite already existing files with the same name, default will not overwrite. Possible values can be true or false.--loglevel: Set the console logging verbosity; options are: "error", "warn", "info", "debug", "trace"; default level is "info"
Demo app
Demo app available on GitHub https://github.com/lemaiwo/DemoCustomControlGenerator
- npm script: https://github.com/lemaiwo/DemoCustomControlGenerator/blob/3b4de25e5814d7b8ed624746208128dba2684269/package.json#L15
- control (html + generated control): https://github.com/lemaiwo/DemoCustomControlGenerator/tree/main/uimodule/webapp/control
Demo app TypeScript available on GitHub https://github.com/lemaiwo/TSDemoCustomControlGenerator
Todo
- Detect UI5 namespace automatically
- Automatically use the text in html for the names of properties and attributes
- Add init function for TypeScript
- Add onAfterRendering function for TypeScript
- Fix error in onAfterRendering function for TypeScript
- Automatically resolve errors after TypeScript files are generated
History
Others providing
GeneratorsGeneratorsGetting from nothing to a project that runs, and from a project that runs to one that has the piece you just decided you need. Two different moments: the first is a one-time decision about layout, the second recurs for the life of the project.SAP and community, narrow by design
- abap2UI5 Layout Editorabap2UI5 Layout EditorA browser editor that lays out a UI5 view by drag and drop and writes it out as one abap2UI5 app class, pulled into the system with abapGit.community org, abapDrag-and-drop UI5 view editor that writes an abap2UI5 app class
- generator-ui5-react-nestgenerator-ui5-react-nestA Yeoman generator that scaffolds a pnpm monorepo with a UI5 app and a Vite React app, which the UI5 app embeds through a custom control, UI5Nest, rather than an iframe.independent, ui5Yeoman generator for a UI5 app that loads a React app
- SAP Build CodeSAP Build CodeSAP's development environment on BTP for SAPUI5, SAP Fiori, mobile and CAP applications that run on the SAP BTP, Cloud Foundry Runtime, in which Joule generates models, services, logic, tests and apps.sap official, btpDevelopment environment on BTP for UI5, Fiori, mobile and CAP
- Joule in SAP Build CodeJoule in SAP Build CodeJoule's generative AI inside SAP Build Code, pitched as "optimized for Java and JavaScript application development": opened from SAP Business Application Studio's activity bar, slash commands generate a CAP data model, services, sample data, business logic and a Fiori elements UI.sap official, capJoule's generative AI inside SAP Build Code
- @sap-ux/cap-config-writer@sap-ux/cap-config-writerSAP's writer module for changing a CAP project's configuration from code, so a tool can add a UI5 app to a project that already exists, returning a mem-fs editor whose commit writes the changes.sap official, capWriter module for changing a CAP project's configuration from code
- @sap-ux/create@sap-ux/createSAP Fiori tools as a command: npx @sap-ux/create changes the features of a Fiori project that already exists, through its add, generate, convert, remove, update and change subcommands.sap official, ui5Command line for changing features of an existing Fiori project
- @sap-ux/fe-fpm-writer@sap-ux/fe-fpm-writerA library that writes flexible programming model elements, such as a custom page wired into the app's routing, into a Fiori elements application for OData v4 from Node code.sap official, ui5Writer of flexible programming model elements into Fiori elements apps
- @sap-ux/odata-service-writer@sap-ux/odata-service-writerA library that adds an OData service to a UI5 project that already exists, writing the file updates from a config object naming the service url, its OData version and a destination.sap official, ui5Writer that adds an OData service to an existing UI5 project
- @sap-ux/ui5-application-writer@sap-ux/ui5-application-writerA library that writes the base structure of a UI5 project from Node code, out of an app id, title and description, returning a mem-fs editor so a generator needs no template engine of its own.sap official, ui5Writer of the base structure of a UI5 project from Node code
- create-easy-ui5create-easy-ui5An npm-init and npx wrapper that runs the Easy-UI5 Yeoman generator without a global Yeoman install, handing control to generator-easy-ui5 and forwarding any arguments.community org, ui5npm-init wrapper for the Easy-UI5 Yeoman generator
- create-wdi5create-wdi5An npm initializer that adds wdi5 end-to-end testing to an existing UI5 application, installing WebdriverIO's peer dependencies, writing a wdio.conf file and setting an npm script.community org, ui5npm initializer adding wdi5 testing to an existing UI5 app
- generator-easy-ui5generator-easy-ui5A Yeoman meta-generator that scaffolds UI5 projects, prompting for a target platform, and loads further sub-generators from the UI5 Community for TypeScript apps, launchpad plugins and libraries.community org, ui5Yeoman meta-generator for scaffolding UI5 projects
- generator-ui5-addgenerator-ui5-addA Yeoman generator that creates UI5 tooling-extension projects and manages the tooling extensions of an existing project, from the bestOfUI5 catalogue.community org, ui5Yeoman generator for UI5 tooling-extension projects
- generator-ui5-appgenerator-ui5-appA Yeoman generator, built on the official UI5 tooling, that scaffolds a new UI5 application in one pass, run as a plug-in for Easy-UI5 or standalone, ready for npm start.community org, ui5Easy-UI5 generator scaffolding a new UI5 application
- generator-ui5-controlgenerator-ui5-controlA Yeoman generator that scaffolds a UI5 custom control structured for npm distribution, with a manual test app with live reload and a Jest test suite already wired in.community org, ui5Yeoman generator for UI5 custom controls distributed via npm
- generator-ui5-library-webcgenerator-ui5-library-webcA Yeoman generator that scaffolds a UI5 library wrapping UI5 Web Components on the official UI5 tooling, run through Easy-UI5 or standalone, and served afterwards with npm start.community org, ui5Yeoman generator for UI5 libraries wrapping UI5 Web Components
- generator-ui5-librarygenerator-ui5-libraryA Yeoman generator, built on the official UI5 tooling, that scaffolds a new UI5 library as a plug-in for Easy-UI5.community org, ui5Easy-UI5 generator scaffolding a new UI5 library
- generator-ui5-projectgenerator-ui5-projectA Yeoman generator for a UI5 project holding several applications in npm workspaces, with eight subgenerators for recurring tasks and a choice of six deployment targets.community org, ui5Yeoman generator for UI5 projects holding several applications
- generator-ui5-ts-app-fclgenerator-ui5-ts-app-fclA generator that scaffolds a UI5 TypeScript application built around the FlexibleColumnLayout and bound to an OData service, asking for the endpoint, entity set, key and fields to show.community org, ui5Generator for a TypeScript UI5 FlexibleColumnLayout app on OData
- generator-ui5-ts-appgenerator-ui5-ts-appA Yeoman generator, built on the official UI5 CLI, that scaffolds a new UI5 application in TypeScript with its tsconfig and UI5 CLI configuration, as a plug-in for Easy-UI5.community org, ui5Easy-UI5 generator scaffolding a TypeScript UI5 application
- generator-ui5-ts-librarygenerator-ui5-ts-libraryA Yeoman generator, built on the official UI5 tooling, that scaffolds a new UI5 library in TypeScript as a plug-in for Easy-UI5.community org, ui5Easy-UI5 generator scaffolding a TypeScript UI5 library
- generator-ui5-wdi5generator-ui5-wdi5A Yeoman generator that scaffolds wdi5 end-to-end test configuration and sample tests into a UI5 app, wrapping npm init wdi5 in prompts and run through Easy-UI5.community org, ui5Yeoman generator scaffolding wdi5 test configuration into a UI5 app
Custom controls and librariesCustom controls and librariesExtending the set of controls an app is built from: a control of its own, a wrapper around a third-party widget, or an icon font registered with the framework, packaged so another app can reuse it. Distinct from Web Components interop, which brings in standard custom elements, and from generators, which scaffold a control project rather than being one.SAP and community, unassessed
- custom-controlscustom-controlsThirteen custom controls for abap2UI5, a signature pad and a scanner that reads several barcodes at once among them, each one an ABAP builder class with a single render( ) method and all of them shipped in a BSP of their own.community org, abapThirteen custom UI5 controls for abap2UI5 apps
- @abap2ui5/embed-control@abap2ui5/embed-controlA UI5 custom control that runs an abap2UI5 app inside a host UI5 app, with the abap2UI5 frontend loaded from the backend the app talks to.community org, ui5UI5 custom control that runs an abap2UI5 app inside a host app
- ui5-cc-timerbuttonui5-cc-timerbuttonA UI5 control library with TimerButton, an sap.m.Button that delays becoming enabled or visible and shows other text or an icon in the meantime, with the delay set in milliseconds.independent, ui5UI5 control library with a button that delays enabling or showing
- @marianfoo/ui5-cc-dayjs@marianfoo/ui5-cc-dayjsA UI5 custom control that writes a date to the page through Day.js, with the input format, the output format and any shift of days or months set as control properties.independent, ui5UI5 custom control formatting dates with Day.js
- ui5-cc-pdfviewerui5-cc-pdfviewerA UI5 custom control that renders a PDF from a base64 data URI with pdfjs-dist, so a file picked in the browser can be shown before it has been uploaded anywhere and has a URL.independent, ui5UI5 custom control rendering a PDF from a base64 data URI
- openui5-passwordopenui5-passwordAn OpenUI5 input control of password type that checks the typed value against length and character-class rules set as properties, and scores password strength in a separate property.independent, ui5OpenUI5 password input with strength scoring and rules
- openui5-touropenui5-tourAn OpenUI5 control library for a step-by-step guided tour inside a UI5 app, where each TourStep has a title, content, a target control from the view and a placement.independent, ui5OpenUI5 control library for guided app tours
- ui5-lib-visualizationui5-lib-visualizationA UI5 control library that wraps the C3.js charting library as ui5.viz controls (Chart, ChartSeries, ChartDataPoint, ChartAxis, ChartLine, ChartArea and Color) declared in an XML view with data binding.independent, ui5UI5 control library wrapping C3.js charts as ui5.viz controls
- UI5XUI5XAn OpenUI5 and SAPUI5 library of eight composite controls under the ui5x namespace: skeleton placeholders and a container that swaps them for content, loading wrappers for the responsive and the grid table, an accordion, a copy button, a segmented input and a chat feed.independent, ui5UI5 library of eight composite controls under the ui5x namespace
- openui5-cameraopenui5-cameraA UI5 control that renders a live camera preview from the device's camera and hands the app the picture as a base64-encoded PNG when the user taps it.independent, ui5UI5 control for live camera preview and PNG capture
- ui5-cc-chartui5-cc-chartA UI5 custom control that wraps Chart.js to render a line chart from label and value records, installed as a plain npm dependency with ui5-tooling-modules in ui5.yaml.community org, ui5UI5 custom control wrapping Chart.js for line charts
- ui5-cc-mdui5-cc-mdA UI5 custom control that renders Markdown, including GitHub-flavoured syntax, to HTML inside an XML view, taking its content from a string, a file path or a model binding.community org, ui5UI5 custom control rendering Markdown to HTML
- ui5-fontawesome-libui5-fontawesome-libA UI5 library that adds Font Awesome's regular, solid and brand icon sets to the sap-icon:// namespace, addressable from a standard Icon control, for UI5 1.120.33 or later.community org, ui5UI5 library adding Font Awesome icon sets to sap-icon://
- openui5-paginatoropenui5-paginatorA UI5 custom control that pages through large data in a table, for backends that serve pages over REST rather than OData.independent, ui5A UI5 custom control that pages through large data in a table, for backends that serve pages over REST rather than OData.
Details
Sources
Sources are graph entities: the same page may back several entries, and an unreachable source flags every row that rests on it.
Compatibility and provenance
latestv1.0.6
first release
releases and cadence7, ~8d median
discovered viaAdded by hand
first seen in the atlas
ecosystem and domainui5, developer-experience
History in the atlas
- First seen.
For your agent
- Ref
artifact:lemaiwo-ui5-control-generator- JSON
- /artifacts/lemaiwo-ui5-control-generator.json
- MCP
- Connecting an agent