Ask ten developers how they build Fiori apps and you'll hear two camps: those who hand-craft every manifest entry and annotation, and those who let the tooling do the scaffolding. The second camp ships faster — and the official tooling is SAP Fiori tools, the extension pack for Visual Studio Code (it comes preinstalled in SAP Business Application Studio, so BAS users already have it).
Interview version first: SAP Fiori tools is the official VS Code extension pack for generating and extending Fiori Elements (and freestyle SAPUI5) apps, built around the Application Generator, Guided Development, and Service Modeler. Here's what each piece does and when to reach for it.
Installing the extension pack
In VS Code, open Extensions (Ctrl+Shift+X), search for "SAP Fiori tools" and install the Extension Pack. One install pulls in the whole family:
- Application Wizard / Generator — the scaffolding wizard
- Application Modeler — visual page and navigation map
- Guided Development — step-by-step code generators
- Service Modeler — OData service inspector
- XML Annotation Language Server — annotation editing with validation
- XML Toolkit — XML editing support
For CAP projects, the optional SAP CDS Language Support extension is worth adding too. With that, the full development loop lives in one IDE.
Application Generator: from zero to running app
The generator is the fastest way to start. Open the command palette (Ctrl+Shift+P), run Fiori: Open Application Generator, and answer four questions:
- Template — pick a floorplan: List Report Object Page, Worklist, Overview Page, Analytical List Page, or a freestyle SAPUI5 template.
- Data source — connect to a running system, point at a local
metadata.xml, or use a CAP project (which the generator auto-discovers). - Main entity — the entity set the app is built around.
- Project details — module name, title, namespace.
Out comes a complete UI5 project: a webapp/ folder with manifest.json, i18n files, ui5.yaml, and the Fiori tools configuration. Prefer the terminal? npx @sap/generator-fiori runs the same wizard as a CLI.
A practical example: you need a list report over purchase orders from a CAP service. Generator → List Report Object Page → connect to the CAP project → select the PurchaseOrders entity set → generate. In about a minute you have a runnable app showing real data, before writing a single line of code.
Generate first, customize second. The generator's output is a normal UI5 project — everything it creates, you can edit by hand afterwards.
Guided Development: the senior developer over your shoulder
Once the app exists, Guided Development handles the repetitive changes. It offers step-by-step guides — small wizards that ask a few questions and then write the code for you. Typical guides: add a table column, enable draft handling, add a custom action, add a filter field.
The value isn't just speed; it's correctness. A guide applies the change the way the framework expects — the right manifest entries, the right annotation terms — so you don't learn about a missed setting from a runtime error twenty minutes later.
Service Modeler and the annotation tooling
Three more pieces round out daily work:
- Service Modeler lets you inspect the OData service's metadata and annotations visually — handy when you're deciding which entity set to build on, or debugging why an annotation isn't taking effect.
- Application Modeler (Page Map) shows your app's pages, navigation, and service entities as a diagram. Add or remove pages from the map instead of hand-editing the manifest's routing section.
- The annotation language server (with the UI5 Language Assistant) gives you code completion and validation while editing annotations — it catches typos in annotation terms before they become silent runtime failures.
Preview: see it before you deploy
Fiori tools can preview your app with mock data or live backend data, so the feedback loop stays tight. In a CAP project, cds watch starts the CAP server with the Fiori preview; the generated app is served locally and the launchpad sandbox lists your apps. Only when it looks right do you build the deployment archive for your target — an ABAP system or a Cloud Foundry space.
Interview quick answers
Which toolset in VS Code is used to generate and extend Fiori Elements applications?
SAP Fiori tools — the official extension pack. Its core extensions are the Application Generator, Guided Development, and Service Modeler (plus Application Modeler, the annotation language server, and the XML Toolkit).
How do you scaffold a new Fiori Elements app?
Run "Fiori: Open Application Generator" from the command palette (or npx @sap/generator-fiori), choose a floorplan template, a data source, and the main entity.
What does Guided Development do?
It provides step-by-step guides that apply common changes — adding a table column, enabling draft, adding a custom action — as correct, framework-conformant code.
Which Fiori tools extension saves you the most time? Let us know in the comments.