Everything in UI5 / Web Components
29 of 148
Type
Domain: 2
Origin
Signals
Content
Web Components: Answers in Web Components
More
Group by: Capability
EntryBySignalsLast activity
Build and dev-server toolingCommunity only
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
UI5 tooling extensions loading npm packages as UI5 modules
ui5-tsapp-webcui5-tsapp-webcA TypeScript UI5 application in ui5-ecosystem-showcase that consumes @ui5/webcomponents and its Fiori and AI packages, with the UI5 CLI extensions that consumption needs.community org, ui5
TypeScript UI5 app consuming @ui5/webcomponents
How to consume UI5 custom libraries in BAS or VS CodeHow to consume UI5 custom libraries in BAS or VS CodeConsuming a custom UI5 library from a UI5 application locally, using yarn workspaces to resolve the dependency instead of adjusting the project before every deploy. The post is honest about its own history: the author had asked the question on SAP Community, found a workaround that needed a pre-deploy edit, and only later learned the workspace approach that removes it. Generator-based setup throughout, and 2021-vintage — yarn workspaces, generator-ui5-library and generator-easy-ui5.published 2021-04-06
How to Use NPM Modules Like crypto-js in SAPUI5 Using UI5 Tooling ModulesHow to Use NPM Modules Like crypto-js in SAPUI5 Using UI5 Tooling ModulesWalks through adding ui5-tooling-modules to a SAPUI5 project on UI5 Tooling v3: installing the npm package crypto-js alongside it, then wiring a ui5-tooling-modules-task builder task and a ui5-tooling-modules-middleware dev-server middleware into ui5.yaml so the UI5 module loader can resolve it. A controller then loads crypto-js/sha256 through sap.ui.define and calls it like any other AMD dependency, with the stated limit that the pattern works only inside a controller or other AMD-style module, not through a top-level import or require().DakshKumarSingh, published 2025-09-04
UI Composition with Application Frontend ServiceUI Composition with Application Frontend ServiceWhy shared UI code is hard, and what Application Frontend changes about it. The piece first lays out the three usual answers and what each costs — copying files at development time and repatching every consumer, publishing an npm package and rebuilding every consumer, or hosting the code separately and paying for it in CORS and session handling, or in an extra network hop through a server-side proxy. It then shows a fourth that only this service can do: runtime server-side composition without the hop, configured through routes in the consuming application's xs-app.json, across three cases — a reusable application embedded in a consumer, and two further composition shapes. Read alongside the generator, which scaffolds the mta.yaml, xs-app.json and zipper configuration this model needs.Vadim Tomnikov, published 2026-05-18
Editor supportSAP only
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, btp
Development environment on BTP for UI5, Fiori, mobile and CAP
SAP Web IDE Full-StackSAP Web IDE Full-StackSAP's IDE service on BTP for SAPUI5 and SAP Fiori apps, full-stack SaaS applications, SAP S/4HANA extensions, hybrid mobile apps and IoT apps, with an SDK for extending the IDE itself.sap official, btp
IDE service on SAP BTP for SAPUI5, Fiori and full-stack apps
Extending SAP Autonomous SuiteExtending SAP Autonomous SuiteExtensibility across SAP Autonomous Suite: AI-enabled development in SAP Build solutions, the ABAP Cloud model among them, as the way extensions are designed, generated and deployed, and a direction for making extensions ready for agentic AI. The abstract names the suite, SAP Build and the ABAP Cloud model and no single feature, so the edges are to Extensibility, the concern, and to SAP Build Code, the SAP Build solution held here in which Joule generates and deploys development; which other SAP Build solutions the session shows is not stated. A TechEd 2026 session (Tuesday 27 October, Berlin), presented by Alexander Rother and Khaled MUSILHY, written here from SAP's abstract; the recording is not yet published.
GeneratorsCommunity only
@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, cap
Writer module for changing a CAP project's configuration from code
There is nothing to run: it is published for a generator or a script to call, not for a developer to invoke in a project, and it declares Node.js 22 or later.
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, abap
Drag-and-drop UI5 view editor that writes an abap2UI5 app class
The class has to be moved by hand: an abapGit pull of the exported ZIP, or a paste into ADT or SE24. The palette is held to the 121 controls of UI5 1.71, and a control inserted by its class name instead comes from whatever UI5 the canvas has loaded, with nothing checking it against 1.71 - *Checks* reports that. An app class that builds no view, or more than one, is refused.
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, ui5
Yeoman generator for UI5 libraries wrapping UI5 Web Components
No published releases; repository quiet for 35 months.
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, cap
Joule's generative AI inside SAP Build Code
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, btp
Development environment on BTP for UI5, Fiori, mobile and CAP
Give Your AI Agent Some Tools: Introducing the UI5 MCP ServerGive Your AI Agent Some Tools: Introducing the UI5 MCP ServerAnnounces @ui5/mcp-server, SAP's open-source MCP server for UI5 development, and walks through its initial six tools. get_project_info, get_api_reference and run_ui5_linter (which applies UI5 linter fixes) read the project's own version, manifest and code rather than an LLM's training data, which is what agent access to your code explains. create_ui5_app scaffolds a new JavaScript or TypeScript project, standalone or inside an existing CAP application, from templates with pre-configured OData model setups, which is generators.published 2025-09-03
UI5 MCP Server Got Extended for UI Integration Cards GenerationUI5 MCP Server Got Extended for UI Integration Cards GenerationVersion 0.2.1 of the UI5 MCP Server adds three tools for UI Integration Cards: get_integration_cards_guidelines feeds an agent current best practices and API versions, create_integration_card scaffolds a new card project, and run_manifest_validation checks the generated manifest against the schema. The post frames these as closing the same gaps as the server's existing tools — an LLM's outdated or wrong card API knowledge — this time for scaffolding and validating a card rather than a full app.daniel_vladinov, published 2026-01-22
Useful CAP CDS and Fiori Commands to Accelerate Development and DeploymentUseful CAP CDS and Fiori Commands to Accelerate Development and DeploymentA command-by-command walkthrough of @sap/cds-dk's cds add and fiori add generators: cds add xsuaa writes an XSUAA security configuration from the CDS model's authorization annotations, and cds add hana together with cds deploy --to hana switches persistence from the default SQLite database to SAP HANA Cloud. cds add mta and fiori add deploy-config, from @sap/generator-fiori, build the Cloud Foundry deployment descriptor together, adding a destination-service block and an xs-app.json that routes the Fiori app's calls through a named destination.TiaXu, published 2022-10-19
LintingSAP and community
Before You Upgrade S/4HANA: Static UI5 Checks with MCPBefore You Upgrade S/4HANA: Static UI5 Checks with MCPA UI5 version upgrade checked against one app by pairing two MCP servers: the ui5_version_diff tool added to mcp-sap-docs, which reads a bundle from ui5-lib-diff downloaded once at setup and filters it by version range, change type, library or query text, and @ui5/mcp-server, whose get_project_info, get_version_info, run_ui5_linter and run_manifest_validation say what the app uses and what fails. Run with a ui5-versions-upgrade.md skill on the legacy app from From SEGW and Legacy UI5 to RAP with ARC-1, from SAPUI5 1.84.59 to 1.147.2, the diff range held 985 deprecations and 961 What's New entries, and the linting and manifest validation narrowed that to findings in this app, among them jQuery.sap.require, synchronous bootstrap, the sap_belize theme, sap.m.MessagePage and an old manifest _version. The checks read the source in a local checkout and never the deployed app, so the report is a first pass: a changelog entry is not proof that a workaround can be deleted, and the app still has to be run and tested.published 2026-05-20
Building Secure SAPUI5 Applications: Best Practices for DevelopersBuilding Secure SAPUI5 Applications: Best Practices for DevelopersA developer-facing rundown of secure coding habits for SAPUI5 apps: typed bindings and custom formatters to reject bad input before it reaches a handler, encodeHTML() instead of rendering untrusted HTML, keeping tokens and URLs out of local and session storage, and CSRF token handling on the ODataModel. It sets up linting with ESLint and an eslint-config-ui5 rule set to catch unsafe DOM access, eval calls and unused imports as part of CI, alongside the same input validation instinct: reject invalid input early rather than trust the backend to catch it.Manisha_19, published 2025-12-10
Migrate your code with UI5 linter – Autofix has landedMigrate your code with UI5 linter – Autofix has landedUI5 linter v1.12.0 adds an initial autofix, reached with ui5lint --fix, and the post walks through it end to end: the tool first reports a deprecated global reference (sap.ui.model.json.JSONModel), then the fix rewrites it into the equivalent module import and local variable. This first version only handles that one class of deprecation — replacing deprecated globals with imports — with more fix types left for later releases tracked on the tool's GitHub roadmap.published 2025-03-19
TypeScript supportSAP only
@ui5/webcomponents@ui5/webcomponentsSAP's UI elements as standard custom elements, ui5-button among them, implementing SAP Fiori design and usable from plain HTML, React, Angular or Vue.sap official, ui5
SAP's UI elements as standard custom elements
Not where the UI library itself is expected to bind data: the documentation leaves binding a component's content and events to the host framework. Not from a CDN script tag: the project publishes none, so it assumes a build step.
ui5-tsapp-webcui5-tsapp-webcA TypeScript UI5 application in ui5-ecosystem-showcase that consumes @ui5/webcomponents and its Fiori and AI packages, with the UI5 CLI extensions that consumption needs.community org, ui5
TypeScript UI5 app consuming @ui5/webcomponents
A ChatGPT-like chat app built with modern SAP technologies (CAP, SAPUI5) – Part 3/3A ChatGPT-like chat app built with modern SAP technologies (CAP, SAPUI5) – Part 3/3The SAPUI5 frontend of the sample, and mostly an argument for writing UI5 in TypeScript: ES imports in place of sap.ui.define, a class with real private members in place of the underscore convention, and the service types generated from the CDS model copied into the UI package, so one IChats interface types the OData object the controller reads. The second half is structure — a formatter class and a singleton LayoutManager called from the XML view through core:require, a confirmation helper taking a callback, a dialog class resolving a promise, a generic createEntity<T> on a service class — all of it to keep every controller under 100 lines. What it says about arranging a UI5 app holds whatever model sits behind the chat; the tooling around it is of its date, and the post calls UI5's TypeScript support experimental.published 2023-02-27
A ChatGPT-like chat app built with modern SAP technologies (CAP, SAPUI5) – Part 3/3
cds2types. Affects Runnable code.
debug a CAP app with UI5 TypeScript UI component with VS Codedebug a CAP app with UI5 TypeScript UI component with VS CodeDebugging both runtimes at once — the CAP server and a UI5 component written in TypeScript, the latter stepped through in its own sources rather than in the transpiled output. Written when TypeScript for UI5 had just become possible, and the combination it sets up is the one CAP's app folder invites.published 2021-11-16
TypeScript Sheriff: How can I use TypeScript in the SAP ecosystem? (Part 2 of 3)TypeScript Sheriff: How can I use TypeScript in the SAP ecosystem? (Part 2 of 3)The middle part of three, and the one about SAP: where TypeScript is supported across a side-by-side extension on BTP, as of July 2023. It says the SAP Cloud SDK already generates OData clients as .ts files and UI5 ships types for its controls and modules, the ground of TypeScript support in UI5, while CAP offers standard types and the new @cap-js/cds-typer generates types for a service, which is typing, with the caveat that running cds-ts commands could overwrite what cds-typer generated.MikeDoyle, published 2023-07-05
UI5 Views, Reimagined: Type-Safe TSX for a Modern Dev ExperienceUI5 Views, Reimagined: Type-Safe TSX for a Modern Dev ExperienceA Devtoberfest 2026 session on @ui5-community/jsx-runtime, the incubation project that lets a UI5 view be written as TSX: XML-like markup that the TypeScript compiler checks against the control's own types and a Babel plugin turns into the constructor calls UI5 already makes. The edge to the runtime rests on the session's own description, which gives the project's documentation site as the session's documentation. The TypeScript support edge holds because that is the session's subject — per-property checking, completion on every attribute, renames that carry through a view, and typed event objects that remove the casts — alongside what stays unchanged: string and expression bindings, controllers, routing and i18n, and XML views living beside TSX ones in the same app. The build edge rests on the setup, where ui5-tooling-transpile is given the JSX transform in ui5.yaml; the walkthrough then builds a bookshop app on a CAP OData service and names what is still missing, UI flexibility and native HTML among it.published 2026-10-09
UI5 testingDoes not apply
Using the UI5 Mockserver for Client-Specific Data and TestingUsing the UI5 Mockserver for Client-Specific Data and TestingWalks through a same-day feature in @sap-ux/ui5-middleware-fe-mockserver, 'Support autoloading mockdata file for specific tenants', which loads a <Entity>-<client>.json file keyed to the sap-client URL parameter and falls back to the entity's plain JSON file when no client-specific one exists. Shows the setup replacing generated mock data with hand-written JSON, then drives the same sap-client parameter through separate package.json scripts so wdi5 end-to-end tests can run against distinct tenant datasets.published 2024-11-18
Under no capability
approuterapprouterThe showcase for dev-approuter in ui5-ecosystem-showcase: an SAP Application Router in front of two of the repository's apps, started either through the dev-time wrapper or through plain @sap/approuter.community org, cap
Showcase for dev-approuter in front of two UI5 apps
open-steamgateopen-steamgateAn ABAP application server you clone and run on your own machine: transpiled ABAP serving classic /IWBEP/ OData v2 to Fiori over a local database, with no SAP system attached.independent, abap
Local ABAP server serving /IWBEP/ OData v2 without an SAP system
Not a system to run a business application on: there is no business application in it, and what it implements of the language, the dictionary and Gateway is a stated subset of each. It is a clean-room reimplementation of the `/IWBEP/` interfaces that bundles no SAP source and no standard DDIC, so a service that reads standard objects has nothing to read, and `ANORMALIES.md` records every place the runtime differs from SAP before any workaround is written.
SAP Continuous Integration and DeliverySAP Continuous Integration and DeliveryA BTP service that runs SAP's predefined CI/CD pipelines for designated SAP development projects, building, testing and deploying the changes pushed to a connected Git repository.sap official, btp
Predefined CI/CD pipelines for SAP development projects
Supply Chain RescueSupply Chain RescueA CAP and SAPUI5 demo of recovery from a supply disruption: the server calculates every proposal and an approver applies it, with a battery recall traced in an ABAP system through HANA Graph openCypher.independent, cap
CAP and SAPUI5 demo of recovery from a supply disruption
No license Neither the package manifest nor the repository tree declares a licence.
Functional boundary The data is illustrative: availability is binary and backup capacity unlimited, and the model carries no inventory; nothing in it is forecast or priced. The recall half runs only against classic ABAP, because its openCypher trace goes through ADBC, which is not released for ABAP Cloud, and it expects an SSH tunnel to the A4H system it was built against. A plain `npm start` passes no model key, so the agent cannot be used on a server started that way.
ui5-tcode-finderui5-tcode-finderA browser page that searches SAP transaction codes by code, title or description and hands one over on a click: copied plain, copied with an /n or /o prefix, or opened in SAP GUI for HTML.independent, abap
Browser page searching SAP transaction codes
