BrowseSAPUI5 and OpenUI5
Everything in UI5
111 of 323
Type
Domain
Origin
Signals: Over a year
Content
More
Group by: Type
Liveness Over a yearClear all
EntryCapabilitySignalsLast activity
Blog
A ChatGPT-like chat app built with modern SAP technologies (CAP, SAPUI5) – Part 1/3A ChatGPT-like chat app built with modern SAP technologies (CAP, SAPUI5) – Part 1/3The concepts before the code: what the GPT model and its API actually offer, and what the finished chat application looks like — personalities included. Written in the weeks when the ground was moving under it, and the post carries its own change log to prove it: GPT-3.5 added on 1 March, GPT-4 on 15 March, and an admission that a series planned as two posts became three.published 2023-02-22
A ChatGPT-like chat app built with modern SAP technologies (CAP, SAPUI5) – Part 1/3
cap-ui5-gpt-chat: no published releases, repository quiet for 41 months. Affects Runnable code.
A ChatGPT-like chat app built with modern SAP technologies (CAP, SAPUI5) – Part 2/3A ChatGPT-like chat app built with modern SAP technologies (CAP, SAPUI5) – Part 2/3The backend: CAP with TypeScript, the entities holding chats and personalities, and the service that talks to the API. This is where the streamed completion and the repositories behind the handler come from, which is the part of the sample still worth lifting even though the model access has since been superseded by AI Core.published 2023-02-24
A ChatGPT-like chat app built with modern SAP technologies (CAP, SAPUI5) – Part 2/3
cap-ui5-gpt-chat: no published releases, repository quiet for 41 months. Affects Runnable code.
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.
Adaptation Project: SAP標準Fioriアプリのフィルタ項目を必須入力へするための方法Adaptation Project: SAP標準Fioriアプリのフィルタ項目を必須入力へするための方法Walks through making a filter field mandatory on a standard SAP Fiori elements app (Manage Purchase Orders) without modifying it: an Adaptation Project created in SAP Business Application Studio adds a local OData annotation file that applies the Org.OData.Capabilities.V1 FilterRestrictions term — RequiresFilter and RequiredProperties on the Plant field — and registers it in manifest.appdescr_variant.json against the mainService data source. It also shows how to look up the target OData service, entity container and entity set through the SAP Fiori Apps Reference Library and the service's own metadata.hironobu_nakayama, published 2025-10-19
Build and deploy a CAP Project Node.js API with a SAP Fiori Elements UI and a managed approuter configurationBuild and deploy a CAP Project Node.js API with a SAP Fiori Elements UI and a managed approuter configurationGeneration and deployment in one piece, with the managed approuter rather than a standalone one — so the routing is configuration instead of a module, and the post covers what that changes at deploy time.jlong, published 2022-02-10
Build and deploy a CAP Project Node.js API with a SAP Fiori Elements UI and a managed approuter configuration
Fiori annotations changed in @sap/cds-dk 9.6.0, 2025-12-17. Affects A recipe, Runnable code.
Build SAP Overview Page using SAP HANA Cloud & SAP CAP service annotations in Visual Studio CodeBuild SAP Overview Page using SAP HANA Cloud & SAP CAP service annotations in Visual Studio CodeAn Overview Page — the card-based Fiori elements floorplan, less written about than the list report — driven entirely from annotations on a CAP service, in VS Code rather than Business Application Studio.Sai_Nithesh_G, published 2021-08-05
Build SAP Overview Page using SAP HANA Cloud & SAP CAP service annotations in Visual Studio Code
Fiori annotations changed in @sap/cds-dk 9.6.0, 2025-12-17. Affects A recipe, Runnable code.
Building an Attachment Upload and Download Solution Using UploadSetwithTable ControlBuilding an Attachment Upload and Download Solution Using UploadSetwithTable ControlThe successor control to UploadSet posts the file in one request by default, and against CAP that is wrong: the record has to be created first and the content put to it afterwards. The author states the two-step shape plainly and notes it may not apply to an ABAP backend, which is the kind of boundary that usually goes unsaid. Written during a proof of concept for a reusable attachment component, and it carries the problem they hit with the control.published 2025-03-13
Calling bound / unbound CAP actions from Fiori elements application.Calling bound / unbound CAP actions from Fiori elements application.invokeAction from the Fiori elements Edit flow API, with the difference between bound and unbound actions spelled out first because the call shape differs. Under three thousand characters and it answers exactly one question.vidhyasagarmule, published 2024-09-07
CAP - Dynamically hide UI facets in Fiori ElementsCAP - Dynamically hide UI facets in Fiori ElementsFacets hidden at runtime rather than at design time, which needs two things at once: UI.Hidden on the annotation side and a virtual element on the CDS side to decide it. Both are linked from the post, and it is barely two pages.AjayRathore, published 2023-12-08
CAP - Dynamically hide UI facets in Fiori Elements
Fiori annotations changed in @sap/cds-dk 9.6.0, 2025-12-17. Affects A recipe.
CAP with Fiori Elements: Actions on List Report / Object Page using Annotations - Part1CAP with Fiori Elements: Actions on List Report / Object Page using Annotations - Part1Actions on their own, at length — where an action can be placed, what the annotation looks like for each position, and what changes between the List Report and the Object Page. Part one of two.Ajit_K_Panda, published 2023-12-31
CAP with Fiori Elements: Actions on List Report / Object Page using Annotations - Part1
Fiori annotations changed in @sap/cds-dk 9.6.0, 2025-12-17. Affects A recipe, Runnable code.
CAP with Fiori Elements: Actions on List Report / Object Page using Annotations – Part2CAP with Fiori Elements: Actions on List Report / Object Page using Annotations – Part2The second half of the actions pair, published the same day. Between them they cover more ground on this one annotation than the documentation does in one place.Ajit_K_Panda, published 2023-12-31
CAP with Fiori Elements: Actions on List Report / Object Page using Annotations – Part2
Fiori annotations changed in @sap/cds-dk 9.6.0, 2025-12-17. Affects Runnable code.
CAP with Fiori Elements: Configure Multiple Views on List Report TablesCAP with Fiori Elements: Configure Multiple Views on List Report TablesSeveral tabs over one entity, each with its own filter — the multiple-views annotation, which is one of the few Fiori elements features that changes the shape of the page rather than its content.Ajit_K_Panda, published 2023-12-25
CAP with Fiori Elements: Configure Multiple Views on List Report Tables
Fiori annotations changed in @sap/cds-dk 9.6.0, 2025-12-17. Affects Runnable code.
CAP with Fiori Elements: Side Effects, Custom Actions, Dynamic ExpressionsCAP with Fiori Elements: Side Effects, Custom Actions, Dynamic ExpressionsThe first of the author's Fiori elements posts, and the widest: side effects, which are the annotation that tells the UI a field changed something else; custom actions; and dynamic expressions. The three that turn a generated app into a usable one.Ajit_K_Panda, published 2022-12-23
CAP with Fiori Elements: Side Effects, Custom Actions, Dynamic Expressions
Fiori annotations changed in @sap/cds-dk 9.6.0, 2025-12-17. Affects Runnable code.
Case-insensitive filters in Fiori Elements (List report + CAP)Case-insensitive filters in Fiori Elements (List report + CAP)A blocker rather than a feature: filters on a List Report are case-sensitive, the business wanted them not to be, and the CAP backend is where it gets fixed. Node and Java both.Kishannaicker, published 2022-04-26
Configure Journal Entry Posting Approval from Store Template in Build Process AutomationConfigure Journal Entry Posting Approval from Store Template in Build Process AutomationWalks through deploying SAP's Journal Entry Posting Approval template from the SAP Build Process Automation Store against an on-premise S/4HANA system that has no Secure Network Connection: destinations for S/4HANA via Cloud Connector, for SAP Document Management service, integration option to hold the approval's supporting documents, and for the BPA service and its SMTP mail. It then swaps the template's SNC action groups for basic-connection BAPI calls and deploys the approval's UI5 applications so the task lands in My Inbox, with a Desktop Agent registered to run the unattended document-check and document-post automations.published 2025-01-28
Create an SAP Fiori Elements UI for CAP Node.js applications in SAP Business Application StudioCreate an SAP Fiori Elements UI for CAP Node.js applications in SAP Business Application StudioWritten the week Fiori elements gained OData V4 support, which is what made a generated List Report over a CAP Node.js service possible at all. Short, and dated in the useful sense — it marks when the generator stopped being a V2-only path.liat_b, published 2021-01-11
Create Fiori List Report with object page using CAPM(node.js) ServiceCreate Fiori List Report with object page using CAPM(node.js) ServiceThe short version of the generated-app walkthrough — an existing CAPM Node.js service, and the List Report with Object Page on top of it. Under three thousand characters.Md_sanaullah, published 2023-09-06
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
Developing a Fiori elements app with CAP and Fiori ToolsDeveloping a Fiori elements app with CAP and Fiori ToolsA learning write-up from someone new to CAP at the time, and long enough to be thorough. Carries its own update pointing at a newer post on deploying a CAP-based Fiori app to a central launchpad without an approuter.MioYasutake, published 2020-09-07
Developing a Fiori elements app with CAP and Fiori Tools
Fiori annotations changed in @sap/cds-dk 9.6.0, 2025-12-17. Affects A recipe, Runnable code.
Developing Fiori Element Application (List Report and Object Page) consuming the OData service created using SAP Cloud Application Programming modelDeveloping Fiori Element Application (List Report and Object Page) consuming the OData service created using SAP Cloud Application Programming modelOne of the earliest entries here, from mid-2020: the List Report and Object Page pair generated over a CAP OData service, when that combination was still new enough to need explaining.former_member187069, published 2020-06-08
Developing Fiori Element Application (List Report and Object Page) consuming the OData service created using SAP Cloud Application Programming model
Fiori annotations changed in @sap/cds-dk 9.6.0, 2025-12-17. Affects A recipe.
Developing SAP Fiori Element application by using SAP Cloud Application Programming ModelDeveloping SAP Fiori Element application by using SAP Cloud Application Programming ModelThe long version, and it starts by naming the floorplans — List Report, Worklist, Object Page, Overview Page, Analytical List Page — which is the decision most walkthroughs skip. Then one of them, built out against a CAP service.shobhit, published 2023-08-07
Developing SAP Fiori Element application by using SAP Cloud Application Programming Model
Fiori annotations changed in @sap/cds-dk 9.6.0, 2025-12-17. Affects A recipe, Runnable code.
Discovering SAP Fiori Elements Analytical functions by implementing SAP Support Message ReportingDiscovering SAP Fiori Elements Analytical functions by implementing SAP Support Message ReportingAnalytical annotations learned by building something the author wanted — a view over SAP support messages — after a conversation in February 2021 that the post dates precisely. Exploration written up as exploration.published 2021-03-14
Display of hierarchical data in SAP Fiori elements using SAP Cloud Application Programming ModelDisplay of hierarchical data in SAP Fiori elements using SAP Cloud Application Programming ModelHierarchies before the framework supported them, and the post now opens with its own update saying that Fiori elements V4 and OData V4 support tree views natively and linking the guide. Read the update first; the rest is the record of what people did in the meantime.OliverKlemenz, published 2022-07-01
Display of hierarchical data in SAP Fiori elements using SAP Cloud Application Programming Model
sap:hierarchy. Affects Runnable code.
Enable App-to-App Navigation in BASEnable App-to-App Navigation in BASTesting navigation between two Fiori applications inside Business Application Studio, which Web IDE Full-Stack made easy and BAS initially did not. Two paths: between Fiori elements applications it is a few clicks in Fiori tools with both apps in the same workspace, and for a freestyle application the same result takes a short sequence of manual steps. Written in 2021 against the Fiori tools of the time, so read the mechanism rather than the clicks.published 2021-05-24
Evaluating SAP’s new MCP servers: UI5, CAP, and Fiori tools in practiceEvaluating SAP’s new MCP servers: UI5, CAP, and Fiori tools in practiceSomeone trying SAP's three new MCP servers rather than repeating the announcement. It sets the official positioning first — MCP as the bridge from coding assistants to SAP tooling across Cursor, Windsurf, Copilot, Cline and Claude Code, with best-practice scaffolds and BTP-aligned guardrails — and then reports what using them is actually like. The rare kind of post that tests a vendor claim.published 2025-09-04
Extend SAP SuccessFactors on SAP BTP with CAP - Develop the SAP Fiori Elements ApplicationExtend SAP SuccessFactors on SAP BTP with CAP - Develop the SAP Fiori Elements ApplicationThe UI instalment of the SuccessFactors extension series — the imported service is already modelled and this is the application over it. Names the three posts it depends on.ale_biagi, published 2022-03-30
Extend Upload Set to Fiori Elements and utilize Document Management ServiceExtend Upload Set to Fiori Elements and utilize Document Management ServiceWritten two months before there was an official plugin, and the author has left the record of that in the page: an update dated 2024-04-04 noting the CAP team released @cap-js/attachments, and another dated 2024-05-21 saying they tested it and wrote up the Object Store variant separately. The hand-built version underneath is still the answer when the plugin's storage choices do not fit.published 2024-02-25
Extend Upload Set to Fiori Elements and utilize Document Management Service
Attachments has changed 3 times since this was published, most recently in @cap-js/sdm 1.0.0, 2024-06-26. Affects Runnable code.
Extend Upload Set with Table to Fiori Elements and utilize Object StoreExtend Upload Set with Table to Fiori Elements and utilize Object StoreThe Object Store variant of the author's earlier Document Management post, written after testing @cap-js/attachments — a sample managing text and file information together, and offered as something for people new to BTP rather than as a pattern.published 2024-05-21
Extend Upload Set with Table to Fiori Elements and utilize Object Store
Fiori annotations changed in @sap/cds-dk 9.6.0, 2025-12-17. Affects Runnable code.
Fiori Elements のList Reportアプリにカスタムアクションボタンを追加し、カスタムコントローラーを用いてアイコン化するFiori Elements のList Reportアプリにカスタムアクションボタンを追加し、カスタムコントローラーを用いてアイコン化するIn Japanese. A custom action button added to a generated List Report and then given an SAPUI5 icon through a custom controller — the point where an annotation-driven app needs a piece of code, and what that costs.takayuki_tanaka, published 2024-08-02
From R/3 ABAP to CAP/Fiori Elements on SAP BTP- DeploymentFrom R/3 ABAP to CAP/Fiori Elements on SAP BTP- DeploymentThe doing half: the steps and the code that got the application from the first post deployed and working. Shorter, and it assumes the argument has already been made.former_member231477, published 2021-04-30
From R/3 ABAP to CAP/Fiori Elements on SAP BTP- Deployment
Fiori annotations changed in @sap/cds-dk 9.6.0, 2025-12-17. Affects Runnable code.
From R/3 ABAP to CAP/Fiori Elements on SAP CloudFrom R/3 ABAP to CAP/Fiori Elements on SAP CloudWritten by an ABAP developer of fourteen years explaining what changed and what did not — the argument being that CAP kept the focus on business logic that ABAP had, where learning UI5 and a framework or two had not. The reasoning half of a pair.former_member231477, published 2021-03-24
From R/3 ABAP to CAP/Fiori Elements on SAP Cloud
Fiori annotations changed in @sap/cds-dk 9.6.0, 2025-12-17. Affects Runnable code.
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
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 Control the Visibility of CRUD and Custom Actions in Fiori Elements Based on AuthorizationHow to Control the Visibility of CRUD and Custom Actions in Fiori Elements Based on AuthorizationHiding Create, Edit and custom action buttons according to what the user may actually do — the join between the authorisation model and the annotations, which is where the two usually fail to agree and the UI offers something the service will refuse.published 2025-05-14
How to ensure that users can efficiently enter data in SAP Fiori elements applicationsHow to ensure that users can efficiently enter data in SAP Fiori elements applicationsGuidance for draft-enabled Fiori Elements applications aimed at the user who spends their day in them: entering data quickly and by keyboard, on a slow network, without the round trips a draft-backed form can otherwise impose. Written from the design side rather than the implementation side, which is the half most CAP writing about drafts leaves out.published 2022-12-05
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
Integrate Document Information Extraction into UI5 applicationIntegrate Document Information Extraction into UI5 applicationUploading an invoice from a UI5 application and getting the extracted fields back on screen, with a destination pointing at the Document Information Extraction API and a Refresh button polling until the job finishes. The polling is the honest part: extraction is asynchronous, and the post does not pretend otherwise. From 2022, so the service has since been renamed and the API moved, but the shape — upload, poll, map the result — is the shape it still is.published 2022-05-31
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
Part 1: How to build an extension application for SAP S/4HANA Cloud using CAP, SAP Cloud SDK and SAP Fiori elementsPart 1: How to build an extension application for SAP S/4HANA Cloud using CAP, SAP Cloud SDK and SAP Fiori elementsThe substantial part of a side-by-side extensibility series: CAP Node.js, Cloud SDK and Fiori elements against S/4HANA Cloud. Eighteen thousand characters, and the one to read if you only read one.former_member748, published 2020-12-01
Part 1: How to build an extension application for SAP S/4HANA Cloud using CAP, SAP Cloud SDK and SAP Fiori elements
Fiori annotations changed in @sap/cds-dk 9.6.0, 2025-12-17. Affects A recipe, Runnable code.
Part 2: How to build an extension application for SAP S/4HANA Cloud using CAP, SAP Cloud SDK and SAP Fiori elementsPart 2: How to build an extension application for SAP S/4HANA Cloud using CAP, SAP Cloud SDK and SAP Fiori elementsThe second part, continuing the same extension. Opens with a recap of the stack rather than of the steps, which makes it readable on its own.former_member748, published 2020-12-20
Part 2: How to build an extension application for SAP S/4HANA Cloud using CAP, SAP Cloud SDK and SAP Fiori elements
Fiori annotations changed in @sap/cds-dk 9.6.0, 2025-12-17. Affects A recipe, Runnable code.
Random collection of useful code fragments for CAP Fiori Elements and SAPUI5Random collection of useful code fragments for CAP Fiori Elements and SAPUI5Exactly what it says, and the author gives the reason: none of these were easy to find in the documentation or the samples. A collection of fragments rather than an argument, and the kind of page people bookmark.published 2020-11-18
Random collection of useful code fragments for CAP Fiori Elements and SAPUI5
Fiori annotations changed in @sap/cds-dk 9.6.0, 2025-12-17. Affects Runnable code.
SAP BTP Developer's Guide: Extending Fiori Elements with the Flexible Programming ModelSAP BTP Developer's Guide: Extending Fiori Elements with the Flexible Programming ModelExtension points, building blocks and controller extensions in the Flexible Programming Model, aimed at developers who know the annotations but stop where the floorplan does. The premise is that the capability has been available for a while and is still being discovered, which is a fair description of where most Fiori Elements work runs out of documented ground.published 2025-10-15
SAP CAP Remote Services & SAP Fiori ElementsSAP CAP Remote Services & SAP Fiori ElementsWhat happens to a generated UI when the data is not local: a CAP service projecting a remote one, with Fiori elements on top. The author explored it to find out where the abstraction holds, which is the useful register for this.Former Member, published 2021-05-20
SAP CAP Remote Services & SAP Fiori Elements
Fiori annotations changed in @sap/cds-dk 9.6.0, 2025-12-17. Affects A recipe, Runnable code.
SAP Fiori Elements using CAP Model - IntroductionSAP Fiori Elements using CAP Model - IntroductionThe introduction to a demo project, and it says where the project came from — exploring what the then-new Fiori tools could do. Context rather than code; the List Report post is the one that builds.jhodel18, published 2020-09-29
SAP Fiori Tools Update – First Release of the SAP Fiori MCP Server for Agentic AISAP Fiori Tools Update – First Release of the SAP Fiori MCP Server for Agentic AIThe release announcement for the Fiori MCP server, placed as the step after the Project Accelerator: an assistant can create and edit Fiori applications directly rather than describing what a developer should do. The vendor's own framing, so read it beside the independent evaluation of the same servers rather than instead of it.published 2025-09-03
Simple Table Maintenance in SAP Fiori Using UI5 Smart ControlsSimple Table Maintenance in SAP Fiori Using UI5 Smart ControlsStarts from SM30 and the table maintenance dialog it generated with almost no code, then asks what the equivalent is now. That framing is the value: a maintenance screen for a custom table was a solved problem in SAP GUI and is not an obviously solved one on Fiori, and the post works through what smart controls give you towards it.published 2025-02-11
The Complete Guide to Calling Actions in UI5 with Custom CodeThe Complete Guide to Calling Actions in UI5 with Custom CodeWritten because the documentation is thin and the samples sparse, and openly as a note to the author's future self — hand-coding an action call has become a rare task for anyone mostly working in Fiori elements, which is exactly why it is hard to look up when it comes round. Comes with a CAP sample project, so the service half is there too.published 2025-07-21
The SAP Fiori elements feature showcase with CAP CDS annotationsThe SAP Fiori elements feature showcase with CAP CDS annotationsThe feature showcase, which is the closest thing to a reference for what the annotations can do, presented here with its CAP CDS side. Short, because the value is in what it points at.stefaniehager, published 2021-12-07
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
Unlocking Efficiency: Leveraging SAP BTP Document Management Service in Fiori Applications # 2Unlocking Efficiency: Leveraging SAP BTP Document Management Service in Fiori Applications # 2Document Management's own Attachment Reuse UI dropped into a Fiori elements List Report, in two variants — OData V2, and OData V4 in a CAP application. The CAP half is one of the two scenarios rather than the subject; the rest of the series is about custom Fiori apps and a process task UI, with no CAP in them.published 2024-12-10
Upload attachments in a Freestyle UI5 and CAP appUpload attachments in a Freestyle UI5 and CAP appAttachments where the UI is freestyle rather than Fiori elements, so none of the generated upload behaviour applies and both ends have to be written.published 2023-12-19
Use SAP CAP SAPUI5 Smart Filter to Show Value Help that are not Associated EntititesUse SAP CAP SAPUI5 Smart Filter to Show Value Help that are not Associated EntititesValue help for a field with no association behind it, which is the case the annotation assumes away. Short, and the workaround is the content.JhoelAnthonyRamosRomeroPE, published 2024-10-07
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
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
Visualizing Your SAP Bill of Materials Using CAP, Fiori elements, and the UI5 Network GraphVisualizing Your SAP Bill of Materials Using CAP, Fiori elements, and the UI5 Network GraphA parent-child structure rendered as a network graph inside a Fiori Elements application, with the CAP service modelling the bill of materials behind it. Useful as one of the few worked examples of putting a non-standard visualisation into an annotation-driven floorplan rather than building a freestyle app around it.published 2025-02-24
Visualizing Your SAP Bill of Materials Using CAP, Fiori elements, and the UI5 Network Graph
Fiori annotations changed in @sap/cds-dk 9.6.0, 2025-12-17. Affects Runnable code.
Why SAP Cloud Identity Matters for SAP Task Center: It’s About Trust and Global User IDWhy SAP Cloud Identity Matters for SAP Task Center: It’s About Trust and Global User IDA step-by-step configuration walkthrough for wiring SAP Cloud Identity Services as the trust and user-correlation layer behind SAP Task Center: establishing Identity Authentication as the sole trusted identity provider for the BTP subaccount, and generating the Global User ID — carried in the token's user_uuid claim rather than the SAML name identifier — that Task Center uses to match logged-in users to their tasks. It also covers syncing that ID between Microsoft Entra ID, the Identity Directory and SAP S/4HANA through Identity Provisioning jobs, and the principal-propagation trust the cloud connector needs to pass it through to an on-premise task provider.ivelinakiryakov, published 2024-11-25
Build tool
@ui5/tooling-webc@ui5/tooling-webcDeprecated UI5 Tooling extensions that generate UI5 library wrapper projects for UI5 Web Components and serve them during development; the README points to ui5-tooling-modules instead.sap official, ui5
Deprecated UI5 Tooling extensions for UI5 Web Components wrappers
The declared repository is archived.
ui5-middleware-destinationui5-middleware-destinationA UI5 Tooling server middleware that proxies requests to backends named in WebIDE-style destination files and serves the routes of a neo-app.json, with Basic Authentication only.independent, ui5
UI5 Tooling middleware proxying destinations and neo-app.json routes
Quiet Release and repository quiet for 75 months.
Functional boundary It supports Basic Authentication only, so a backend that needs another method is not reachable through it.
ui5-middleware-oidcui5-middleware-oidcA UI5 Tooling server middleware that puts an OpenID Connect login in front of the UI5 dev server, built on express-openid-connect, which receives its configuration block as written.independent, ui5
UI5 dev server middleware adding an OpenID Connect login
ui5-middleware-route-proxyui5-middleware-route-proxyA UI5 server middleware that forwards requests matching a route prefix to a backend host, configured per route in ui5.yaml, with credentials read from a .env file rather than the yaml.independent, ui5
UI5 server middleware proxying route prefixes to a backend
Release and repository quiet for 36 months.
ui5-plugin-loaderui5-plugin-loaderA UI5 Tooling v4 extension that registers a project's other extensions itself: one entry in ui5.yaml, and every dependency carrying a ui5-plugin-loader.json manifest is mounted as middleware and as a build task.independent, ui5
UI5 Tooling v4 extension that registers other extensions
ui5-task-cachebuster-indexingui5-task-cachebuster-indexingA UI5 builder task that copies the build output into a timestamped folder inside dist so the UI5 cachebuster can resolve it; it supports timestamps only, not the hash mode.independent, ui5
UI5 builder task preparing build output for the cachebuster
Release and repository quiet for 66 months.
ui5-task-transpile-genui5-task-transpile-genA UI5 builder task that transpiles ES6 to ES5, including async/await, with Babel at build time, registered in ui5.yaml with a bundle definition that includes the regenerator runtime.independent, ui5
UI5 builder task transpiling ES6 to ES5 with Babel
Release and repository quiet for 50 months.
CLI
ui5-i18n-excel-converterui5-i18n-excel-converterA command-line tool that exports a UI5 app's i18n properties files to an Excel sheet of keys and languages for translators and imports the translated sheet back into the files.independent, ui5
CLI converting UI5 i18n properties files to Excel and back
Release and repository quiet for 39 months.
ui5plugin-linterui5plugin-linterA command-line linter for UI5 projects, run as ui5linter, that checks JavaScript and TypeScript classes, XML views and fragments, and i18n properties files.independent, ui5
Command-line linter for UI5 classes, XML views and i18n files
Two of its JavaScript and TypeScript checks, EventTypeLinter and WrongNamespaceLinter, apply to TypeScript projects only.
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, ui5
npm initializer adding wdi5 testing to an existing UI5 app
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, ui5
Yeoman generator for UI5 tooling-extension projects
Release and repository quiet for 33 months.
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, ui5
Yeoman generator for UI5 custom controls distributed via npm
No published releases; repository quiet for 66 months.
generator-ui5-flp-plugingenerator-ui5-flp-pluginA generator, built on the official UI5 tooling, that scaffolds a Fiori Launchpad plugin component with sample shell extension code and an Opa5 test, as a plug-in for Easy-UI5.community org, ui5
Easy-UI5 generator scaffolding a Fiori Launchpad plugin
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.
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, ui5
Yeoman generator for a UI5 app that loads a React app
Quiet Release and repository quiet for 38 months.
Functional boundary The scaffold is JavaScript and not TypeScript, and `react-router-dom` and UI5 Web Components are not included; its README leaves both for the project to add.
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, ui5
Yeoman generator scaffolding wdi5 test configuration into a UI5 app
No published releases; repository quiet for 27 months.
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
Command line generator of UI5 custom controls from html
Release and repository quiet for 29 months.
ui5-journey-recorderui5-journey-recorderA Chrome extension that records clicks and inputs against a running UI5 app and generates OPA5 or wdi5 end-to-end test code from the recorded journey.community org, ui5
Chrome extension generating OPA5 or wdi5 tests from recorded journeys
Package
@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, ui5
UI5 custom control formatting dates with Day.js
No published releases; repository quiet for 52 months.
jest-environment-ui5jest-environment-ui5A Jest test environment named ui5 that boots UI5 from a local HTML file into jsdom, so UI5 unit tests run in Node.js with no web server and no browser.independent, ui5
Jest environment running UI5 unit tests in Node.js
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, ui5
UI5 control for live camera preview and PNG capture
Release and repository quiet for 28 months.
openui5-error-collectoropenui5-error-collectorA UI5 library that collects a running app's JavaScript errors, unhandled Promise rejections and UI5 log events, and can post them to a backend with navigator.sendBeacon.independent, ui5
UI5 library collecting an app's JavaScript errors
Release and repository quiet for 43 months.
openui5-model-odata-v2-odatapromiseopenui5-model-odata-v2-odatapromiseAn OpenUI5 library that extends the OData V2 model, sap.ui.model.odata.v2.ODataModel, to support Promises; its README documents no usage, installation or API.independent, ui5
OpenUI5 OData V2 model extension with Promises
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, ui5
Release and repository quiet for 50 months.
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, ui5
OpenUI5 password input with strength scoring and rules
openui5-smart-mockserveropenui5-smart-mockserverAn extended UI5 MockServer that generates meaningful mock data with Faker.js, from the metadata's sap:semantics annotations or from rules that map an OData property to a Faker method.independent, ui5
UI5 MockServer extension generating mock data with Faker.js
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, ui5
OpenUI5 control library for guided app tours
srbinfoandsupportjssrbinfoandsupportjsA JavaScript library that shows a UI5 dialog with application details such as device, resolution, browser zoom, app version and last commit.independent, ui5
Release and repository quiet for 36 months.
srbjsloggersrbjsloggerA browser JavaScript logger whose log, warn and error calls write prominent output to the console, loaded into a UI5 app through index.html or the manifest's resources.independent, ui5
Release and repository quiet for 37 months.
ui5-antaresui5-antaresA SAPUI5 library that generates OData V2 metadata-based dialogs, object pages and value helps with input validation, and wraps OData V2 requests in promises.independent, ui5
SAPUI5 library generating OData V2 metadata-based dialogs and pages
Release and repository quiet for 26 months.
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
UI5 custom control rendering Markdown to HTML
Release and repository quiet for 38 months.
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, ui5
UI5 custom control rendering a PDF from a base64 data URI
Quiet Release and repository quiet for 41 months.
Functional boundary The case it is written for is a document that has not been uploaded; anything already served from a URL is what the framework's own PDF control takes. Passing a document as a data URI means holding it in the page as a string first, which is a different cost from streaming it from a server.
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, ui5
UI5 control library with a button that delays enabling or showing
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, ui5
UI5 control library wrapping C3.js charts as ui5.viz controls
On the second installation path there is no dependency to upgrade: the README states that for option b) all manual steps must be repeated every time the library version is updated.
ui5plugin-parserui5plugin-parserAn npm library that reads the metadata of the standard SAPUI5 classes and parses a project's own UI5 classes into objects listing their fields, methods, properties, aggregations, associations and events.independent, ui5
npm library parsing SAPUI5 and project UI5 class metadata
A project nested inside another is not parsed: its README says nested projects are not supported any more. A library installed from npm is read only when it ships its `-dbg.js` files and `manifest.json`.
wdi5-cucumberwdi5-cucumberA wdi5 plugin that extends wdi5's end-to-end testing with Cucumber-style BDD scenarios, run against UI5 Fiori Elements apps.community org, ui5
wdi5 plugin for Cucumber-style BDD tests on Fiori Elements apps
Archived The declared repository is archived.
No license Neither the package manifest nor the repository tree declares a licence.
wdi5-fe-selectorswdi5-fe-selectorsA set of wdi5-flavoured control selectors tuned for locating controls in Fiori Elements apps, extending the selectors wdi5 itself provides.community org, ui5
wdi5 selectors for locating controls in Fiori Elements apps
Archived The declared repository is archived.
No license Neither the package manifest nor the repository tree declares a licence.
Reference architecture
Establish a central inbox with SAP Task CenterEstablish a central inbox with SAP Task CenterSAP's reference architecture for SAP Task Center as one inbox for the tasks of several SAP applications, opened in the Task Center web app or as To-Dos in SAP Start and SAP Mobile Start, which is the inbox half of task and approval UIs. It rests on Cloud Identity Services: every task provider must work with Identity Authentication, its users must carry the Global User ID and so must the recipients of each task, and sign-on between the provider and Identity Authentication is what lets a user navigate from Task Center into the provider. Task Center reaches providers through destinations in a customer subaccount, with Cloud Connector for on-premise SAP S/4HANA.published 2025-02-11
Sample
ui5-cap-serverside-rendering-demoui5-cap-serverside-rendering-demoThe demo project the ui5-cap-serverside-rendering-plugin README points to: a CAP bookshop whose Books list and detail views sit in srv/views and reach the browser already filled with data.independent, cap
Demo CAP bookshop with server-rendered UI5 views
No license Neither the package manifest nor the repository tree declares a licence.
Functional boundary As a deployment template it stops at the service: the `mta.yaml` has one module, `gen/srv` on the Node.js buildpack, and no HTML5 repository or router module for the app.
app-to-app-nav-basapp-to-app-nav-basThree generated Fiori apps wired to one cross-app navigation intent: fe-customers declares Customers-display in its descriptor, and fe-orders and freestyle each register that intent in their own launchpad sandbox configuration.independent, ui5
Three Fiori apps wired to one cross-app navigation intent
Neither the package manifest nor the repository tree declares a licence.
cap-materialbom-graphcap-materialbom-graphA CAP sample that walks a material bill of materials on the server and draws it as a UI5 network graph in a custom section of a Fiori elements object page, on SQLite with no deployment.independent, cap
CAP sample drawing a material BOM as a UI5 network graph
Neither the package manifest nor the repository tree declares a licence.
cap-ui5-gpt-chatcap-ui5-gpt-chatA working chat application on CAP and SAPUI5 against the OpenAI API — selectable models, per-user chat history in the database, maintainable chatbot personalities, and streaming responses as an option per chat.independent, cap
Chat app on CAP and SAPUI5 against the OpenAI API
It calls the OpenAI API directly with a key in the environment. It was written in early 2023 and last touched in May 2023, which is before SAP AI Core and the CAP LLM plugins existed — so read it for the shape of the application, not for how a CAP service should reach a model today.
fiori-fullscreen-pluginfiori-fullscreen-pluginA SAP Fiori launchpad plugin in TypeScript that adds one header button, created through the Extension API, which toggles the browser's fullscreen mode; it needs SAPUI5 above 1.120.independent, ui5
Fiori launchpad plugin adding a fullscreen toggle button
fiori-table-maintenancefiori-table-maintenanceThe CAP service and freestyle UI5 app behind Simple Table Maintenance in SAP Fiori Using UI5 Smart Controls, where a SmartTable edits rows in place rather than through a draft.independent, cap
CAP and UI5 app for in-place table maintenance with SmartTable
Neither the package manifest nor the repository tree declares a licence.
hacking-away-sampleapphacking-away-sampleappA UI5con 2022 demo app showing an end-to-end TypeScript setup for a UI5 application with a custom UI5 library, backed by a CAP service, in a pnpm monorepo with wdi5 tests.community org, ui5
UI5con 2022 demo of an end-to-end TypeScript UI5 setup with CAP
SAP-samples/ui5-flexibility-easy-key-user-adaptationSAP-samples/ui5-flexibility-easy-key-user-adaptationA UI5con 2025 hands-on tutorial enabling a Fiori elements application for SAPUI5 flexibility and building custom key user adaptations, from BTP ABAP environment deployment through no-code changes to manifest properties and OData annotations.sap official, ui5
UI5con 2025 tutorial on SAPUI5 flexibility and key user adaptations
spreadsheetimporter/sample-adaptation-banks-updatespreadsheetimporter/sample-adaptation-banks-updateAn adaptation project over SAP's Manage Banks Fiori app, set up so an uploaded spreadsheet updates records that already exist instead of creating new ones.community org, ui5
Manage Banks adaptation updating existing records from a spreadsheet
Neither the package manifest nor the repository tree declares a licence.
spreadsheetimporter/sample-standalonespreadsheetimporter/sample-standaloneA small UI5 app that opens the Spreadsheet Importer dialog on its own, with no table for it to write into, so the app's own code takes the rows after the upload.community org, ui5
UI5 app opening the Spreadsheet Importer on its own
Neither the package manifest nor the repository tree declares a licence.
ui5-call-actionui5-call-actionFour UI5 apps over one CAP service, each calling the same bound, collection-bound and unbound OData actions and functions from custom code.independent, cap
UI5 apps calling CAP OData actions and functions from custom code
Neither the package manifest nor the repository tree declares a licence.
ui5-errorhandler-sampleui5-errorhandler-sampleTwo UI5 apps in one repository consuming the same npm package two ways: once as a UI5 AMD module reached through a resource path the package declares, once as a plain JavaScript class converted at build time.independent, ui5
Two UI5 apps consuming one npm package in two ways
Neither the package manifest nor the repository tree declares a licence.
ui5-space-webcomponent-libraryui5-space-webcomponent-libraryA step-by-step UI5 library, be.wl.SpaceLibrary, that wraps the components of a UI5 Web Components package as UI5 controls through @ui5/tooling-webc, with a kitchen-sink page to test them.independent, ui5
UI5 library wrapping a UI5 Web Components package, step by step
ui5-space-webcomponent-packageui5-space-webcomponent-packageA step-by-step UI5 Web Components package, titled UI5con2023, with a SpaceComponent and a SpaceItemComponent written in TypeScript, which the matching UI5 library wraps as controls.independent, ui5
Step-by-step UI5 Web Components package in TypeScript
ui5-ts-modules-showcaseui5-ts-modules-showcaseA showcase demonstrating how to consume OSS npm libraries such as lodash from a UI5 TypeScript application using ui5-tooling-modules.community org, ui5
Showcase of consuming npm libraries from a TypeScript UI5 app
ui5con24-dev-envui5con24-dev-envA pnpm workspace in which a CAP server, a local Fiori launchpad and two UI5 apps — one reading OData V4 from CAP, one reading OData V2 from an ABAP system — run together from a single start command.independent, ui5
pnpm workspace running CAP, a local launchpad and two UI5 apps
Neither the package manifest nor the repository tree declares a licence.
wdi5-workshopwdi5-workshopA pseudo-monorepo of two wdi5 workshops, from UI5con 2022 and Devtoberfest 2022, teaching end-to-end testing of UI5 apps from a beginner start to continuous integration.community org, ui5
Two wdi5 workshops from UI5con 2022 and Devtoberfest 2022
Neither the package manifest nor the repository tree declares a licence.