Custom controls and libraries
Extending 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 interopWeb Components interopUsing standards-based custom elements inside an app, and the question of which control set an app should be built from at all, two concerns that are often answered as one.SAP and community, narrow by design, which brings in standard custom elements, and from 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, which scaffold a control project rather than being one.
Overview
Extending the set of controls a UI5 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 interopWeb Components interopUsing standards-based custom elements inside an app, and the question of which control set an app should be built from at all, two concerns that are often answered as one.SAP and community, narrow by design, which brings in standard custom elements, and from 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, which scaffold a control project rather than being one.
A control extends sap.ui.core.Control with metadata for its properties, aggregations and events and a renderer that writes its HTML; controls meant for several apps go into a control library, which adds theming and right-to-left support. IconPool.registerFont registers an icon font of one's own under a sap-icon:// collection name.
Not covered: At the extension mechanism and the icon registry. A control that wraps an npm library such as Chart.js also needs that package made loadable by the UI5 module loader, which ui5-cc-chart does through ui5-tooling-modulesui5-tooling-modulesA set of UI5 tooling extensions that load and convert plain npm packages into UI5 AMD-like modules, so the UI5 module loader can consume them.community org, ui5.
Reusable controls and libraries published to npm: wrappers around third-party JavaScript such as 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, ui5 and 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, ui5 under UI5 CommunityUI5 Communitymaintains 69 entriescommunity org, composite and single-purpose controls from independent maintainers, and Font Awesome's free icons registered as sap-icon:// collections. 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, ui5 and the abap2UI5 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, abap bring UI5 controls to ABAP-written apps, and lemaiwo-ui5-control-generatorui5-control-generatorA 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.independent, ui5 writes control classes from html.
Artifacts
Seen working
Details
Coverage
For your agent
- Ref
capability:ui5-custom-controls- JSON
- /capabilities/ui5-custom-controls.json
- MCP
- Connecting an agent