{"ref":"capability:ui5-custom-controls","page":"/capabilities/ui5-custom-controls","json":"/capabilities/ui5-custom-controls.json","generated":"2026-10-27","drafted_with_ai":true,"entity":{"id":"ui5-custom-controls","name":"Custom controls and libraries","domain":"ui-and-frontend-bridge","ecosystems":["ui5"],"universal":false,"description":"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 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.","short":"Custom controls, wrappers and icon fonts packaged for reuse","core_coverage":{"state":"core-and-community","assessed_at":"2026-09-14","what_core_does":"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.","where_it_stops":"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](https://github.com/ui5-community/ui5-cc-chart) does through [ui5-tooling-modules](artifact:ui5-community-ui5-tooling-modules).","relationship":"unassessed","sources":[{"url":"https://github.com/UI5/docs/blob/main/docs/07_Developing_Controls/developing-controls-8dcab00.md","title":"OpenUI5 documentation — Developing Controls","checked":"2026-09-14","quote":"When you want to develop several controls for reuse in different applications, we recommend creating a library containing your custom controls instead."},{"url":"https://github.com/UI5/docs/blob/main/docs/08_More_About_Controls/icon-and-icon-pool-21ea0ea.md","title":"OpenUI5 documentation — Icon and Icon Pool","checked":"2026-09-14","quote":"the font file and the metadata for the icons in the font file need to be registered in the"}],"community_adds":"Reusable controls and libraries published to npm: wrappers around third-party JavaScript such as [ui5-cc-chart](artifact:ui5-community-ui5-cc-chart) and [ui5-cc-md](artifact:ui5-community-ui5-cc-md) under [UI5 Community](actor:ui5-community), composite and single-purpose controls from independent maintainers, and Font Awesome's free icons registered as sap-icon:// collections. [abap2UI5 embed control](artifact:abap2ui5-embed-control) and the [abap2UI5 custom controls](artifact:abap2ui5-addons-custom-controls) bring UI5 controls to ABAP-written apps, and [lemaiwo-ui5-control-generator](artifact:lemaiwo-ui5-control-generator) writes control classes from html."},"history":[{"date":"2026-09-14","field":"entry","from":null,"to":"created","reason":"Four UI5 Community repositories in this batch, a Chart.js control, a Markdown control, a Font Awesome icon library and the explorer app for it, are controls and icon sets packaged for reuse. Web Components interop and generators each hold a neighbouring concern, and neither is this one."},{"date":"2026-10-17","field":"description","from":"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 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.","to":"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 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.","reason":"Keep the default capability wording neutral; preserve the previous wording in framing_by_ecosystem.ui5. Maintainer-requested scope audit."},{"date":"2026-10-26","field":"core_coverage.community_adds","from":"Controls that wrap third-party JavaScript, and Font Awesome's free icons registered as sap-icon:// collections, published to npm under [UI5 Community](actor:ui5-community).","to":"Reusable controls and libraries published to npm: wrappers around third-party JavaScript, composite and single-purpose controls from independent maintainers, Font Awesome icons, abap2UI5 controls for ABAP-written apps, and a control generator.","reason":"Reassessed against the graph (check:capabilities): independent maintainers, the abap2UI5 controls and a generator now shape the answer."}],"drafted_with_ai":true,"framing_by_ecosystem":{"ui5":{"description":"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 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."}}},"sap_delivery":{"door":"ui5","all":null,"by_flavor":{"freestyle":null,"fiori-elements":null,"web-components":null}},"edges":{"use_cases":[],"shared_tasks":[],"related_tasks":[],"options":[{"ref":"artifact:abap2ui5-embed-control","name":"@abap2ui5/embed-control","json":"/artifacts/abap2ui5-embed-control.json","ecosystem":"ui5","origin_ring":"community-org"},{"ref":"artifact:marianfoo-ui5-cc-dayjs","name":"@marianfoo/ui5-cc-dayjs","json":"/artifacts/marianfoo-ui5-cc-dayjs.json","ecosystem":"ui5","origin_ring":"independent"},{"ref":"artifact:abap2ui5-addons-custom-controls","name":"custom-controls","json":"/artifacts/abap2ui5-addons-custom-controls.json","ecosystem":"abap","origin_ring":"community-org"},{"ref":"artifact:tiagobalmeida-openui5-camera","name":"openui5-camera","json":"/artifacts/tiagobalmeida-openui5-camera.json","ecosystem":"ui5","origin_ring":"independent"},{"ref":"artifact:wolfe100-openui5-paginator","name":"openui5-paginator","json":"/artifacts/wolfe100-openui5-paginator.json","ecosystem":"ui5","origin_ring":"independent"},{"ref":"artifact:mauriciolauffer-openui5-password","name":"openui5-password","json":"/artifacts/mauriciolauffer-openui5-password.json","ecosystem":"ui5","origin_ring":"independent"},{"ref":"artifact:mauriciolauffer-openui5-tour","name":"openui5-tour","json":"/artifacts/mauriciolauffer-openui5-tour.json","ecosystem":"ui5","origin_ring":"independent"},{"ref":"artifact:ui5-community-ui5-cc-chart","name":"ui5-cc-chart","json":"/artifacts/ui5-community-ui5-cc-chart.json","ecosystem":"ui5","origin_ring":"community-org"},{"ref":"artifact:ui5-community-ui5-cc-md","name":"ui5-cc-md","json":"/artifacts/ui5-community-ui5-cc-md.json","ecosystem":"ui5","origin_ring":"community-org"},{"ref":"artifact:marianfoo-ui5-cc-pdfviewer","name":"ui5-cc-pdfviewer","json":"/artifacts/marianfoo-ui5-cc-pdfviewer.json","ecosystem":"ui5","origin_ring":"independent"},{"ref":"artifact:htammen-ui5-cc-timerbutton","name":"ui5-cc-timerbutton","json":"/artifacts/htammen-ui5-cc-timerbutton.json","ecosystem":"ui5","origin_ring":"independent"},{"ref":"artifact:lemaiwo-ui5-control-generator","name":"ui5-control-generator","json":"/artifacts/lemaiwo-ui5-control-generator.json","ecosystem":"ui5","origin_ring":"independent"},{"ref":"artifact:ui5-community-ui5-fontawesome-lib","name":"ui5-fontawesome-lib","json":"/artifacts/ui5-community-ui5-fontawesome-lib.json","ecosystem":"ui5","origin_ring":"community-org"},{"ref":"artifact:pulseshift-ui5-lib-visualization","name":"ui5-lib-visualization","json":"/artifacts/pulseshift-ui5-lib-visualization.json","ecosystem":"ui5","origin_ring":"independent"},{"ref":"artifact:rdisomma-ui5x","name":"UI5X","json":"/artifacts/rdisomma-ui5x.json","ecosystem":"ui5","origin_ring":"independent"}],"samples":[{"ref":"artifact:abap2ui5-addons-custom-controls-customer","name":"custom-controls-customer","json":"/artifacts/abap2ui5-addons-custom-controls-customer.json"},{"ref":"artifact:ui5-community-ui5-icon-explorer","name":"ui5-icon-explorer","json":"/artifacts/ui5-community-ui5-icon-explorer.json"}],"explained_by":[],"normative_context":[]}}