Everything in UI5 / Fiori elements
42 of 160
Domain
Signals
Content: Runnable code
Fiori elements: Answers in Fiori elements
More
Group by: None
Offers Runnable codeClear all
EntryBySignalsLast activity
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.
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
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
Building an Enterprise Application Using Fiori Elements and CAP – Part 3Building an Enterprise Application Using Fiori Elements and CAP – Part 3The Object Page, which the author points out is entirely annotation-driven — there is no page to design, only facets to declare. The last of the three.Farooq, published 2025-12-10
Building an Enterprise Application Using Fiori Elements and CAP – Part 3
Fiori annotations changed in @sap/cds-dk 9.6.0, 2025-12-17. Affects Runnable code.
Building an Enterprise-Ready SAP AI Agent with Open SourceBuilding an Enterprise-Ready SAP AI Agent with Open SourceA self-hosted chat agent for SAP systems: LibreChat as UI and orchestrator with Entra ID sign-in and SharePoint connected, a local LLM through Ollama, and two MCP servers, mcp-sap-docs for public documentation and the ADT MCP server vibing-steampunk for the system itself. The ADT server runs in its read-only mode under a technical user with display authorisations only, so the agent can find a function module and pull its source, or locate a RAP business object with its behaviour definition and projection view, but cannot change anything. Two workflows show it, explaining what BAPI_DISPUTE_CREATE does in one system and planning a RAP action from a PDF specification, where the generated ABAP is copied into Eclipse by hand; the full setup is in the marianfoo/llm-client-sap-system-integration-sharepoint repository.published 2026-03-03
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.
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
Deep Insert in SAP CAPM Using Composition and Fiori ElementsDeep Insert in SAP CAPM Using Composition and Fiori ElementsParent and children created in one transaction, which composition already gives you in the model — the post is about what Fiori elements does with it, and what the payload looks like when the UI sends both at once.published 2026-05-22
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 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 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.
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.
From SEGW and Legacy UI5 to RAP with ARC-1From SEGW and Legacy UI5 to RAP with ARC-1Three ARC-1 skills, run in Cursor with Composer-2 against a deliberately rough demo on an S/4HANA 2023 trial system, turn the SEGW service ZDEMO_MIG_PROJECTS_SRV into a managed, draft-enabled RAP business object published as OData V4, replace its ApproveProject function import and its direct UPDATE ... COMMIT WORK with the action approve_project written in EML in local mode, and rebuild the freestyle UI5 JavaScript app once in UI5 TypeScript and once as a Fiori elements list report and object page driven by metadata extensions. What the published transcripts add is how the agent got there: it found the generated MPC class names and the custom logic in DPC_EXT only by reading the system, the skills made it print the extracted model and stop for confirmation before writing, and @ui5/mcp-server, mcp-sap-docs and @sap-ux/fiori-mcp-server each had their own job beside it. The demo is small on purpose, and the post says a productive SEGW service that calls BAPIs, carries custom authorisation logic or supports deep inserts is not solved with one prompt.published 2026-05-11
From SEGW and Legacy UI5 to RAP with ARC-1
@sap-ux/fiori-mcp-server has been through 2 major lines since this was published: 0.7 (2026-05), 1 (2026-05). Affects Runnable code.
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
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
Media Handling in SAP CAPM – Backend and Frontend ImplementationMedia Handling in SAP CAPM – Backend and Frontend ImplementationFiles against a record with the front end included, which most of the attachments writing here leaves out — the entity that stores the content, the custom logic around it, and then the UI5 side that uploads and retrieves. End to end rather than one half.published 2026-03-02
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 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.
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
UI5 AI Features library is now an npm PackageUI5 AI Features library is now an npm PackageThe release note for a demo turning into a dependency, and it is explicit about why that matters: the earlier version worked, but using it meant cloning the repo and copying both halves, which stops working the moment one of them changes. The post walks through what shipping the CAP plugin and the be.wl.ai control library in one npm version buys — a client and server contract that cannot drift — then lists the eleven controls by group, shows the two-line configuration that activates each half, and notes that this version is actually deployed on BTP behind both a standalone approuter and Work Zone. It closes on the demo repository, written with no library source in it as the test that the package stands alone.published 2026-08-31
UI5 AI Features library is now an npm Package
cds 8, line ended. Affects Runnable code.
UI5 Has Entered the Chat: Building Interactive MCP Apps for SAPUI5 Has Entered the Chat: Building Interactive MCP Apps for SAPMCP Apps let an MCP tool point at a ui:// resource that a compatible host renders in a sandboxed iframe, and the post walks through the five samples of UI5con_2026_MCPApps, built with Mike Zaschka for UI5con, from a plain HTML time tool through UI5 Web Components and UI Integration Cards to UI5 lint findings from @ui5/mcp-server and an ARC-1 transport review. In the samples the model selects the tool and does not generate the interface, the prebuilt kind of generative UI, and the subject is the server side of MCP servers: register the resource, link it from the tool's _meta.ui.resourceUri, return text content as a fallback beside structuredContent, call callServerTool() only for tools of the server that owns the app, and send a message to the host when another server such as ARC-1 has to act. It stops at the host, whose support differs by client and whose iframe sandbox is not a complete security model, and Joule support for MCP Apps could not be verified at the time of writing.published 2026-07-13
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
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.
XML Annotations: The Essentials Before Adapting Documentation Samples to Your ProjectXML Annotations: The Essentials Before Adapting Documentation Samples to Your ProjectWhat to understand before copying an annotation out of the UI5 Demo Kit, which is what everybody actually does. The samples assume context the sample does not carry, and adapting one without that context is where the afternoon goes.MioYasutake, published 2026-04-09