fiori-tools

Fiori Tools — Best Practices

Primary reference: https://help.sap.com/docs/SAP_FIORI_tools VS Code extensions: SAP Fiori tools Extension Pack BAS dev space: Full Stack Cloud Application (includes all Fiori tools)

---

Required VS Code Extensions

Install the SAP Fiori tools Extension Pack — installs all of these at once:

SAP Fiori tools - Application Generator
SAP Fiori tools - Page Editor
SAP Fiori tools - Guided Development
SAP Fiori tools - Service Modeler
SAP Fiori tools - Application Modeler
UI5 Language Assistant           ← annotation code completion
XML Toolkit                      ← XML fragment editing

Ctrl+Shift+X → search "SAP Fiori tools Extension Pack" → Install

---

Generate a Fiori Elements app

Option A — VS Code command palette (recommended):

Ctrl+Shift+P → "Fiori: Open Application Generator"
→ SAP Fiori elements
→ List Report Object Page
→ Connect to a CAP Project (auto-discovers your services)
→ Select entity set
→ Generate

Option B — CLI in CAP project root:

cds add fiori
# Generates a skeleton app/ folder and wires it into your CAP project

Both generate:

app/
└── <your-app>/
    ├── webapp/
    │   ├── manifest.json
    │   └── i18n/i18n.properties
    └── annotations.cds

---

Run local preview

# In your CAP project root — starts CAP server + Fiori preview
cds watch

# Access your Fiori app at:
# http://localhost:4004/<app-folder>/webapp/index.html
# or the Fiori Launchpad sandbox at:
# http://localhost:4004/$fiori-apps.html

For the sandbox launchpad, add to package.json:

{
  "sapux": [
    "app/orders",
    "app/products"
  ]
}

---

Page Editor — configure annotations without writing CDS

The Page Editor in VS Code lets you configure UI.LineItem, UI.Facets, UI.FieldGroup etc. via a visual UI instead of writing CDS annotations manually.

In VS Code → open any file in app/<name>/webapp/
→ Activity Bar → SAP Fiori icon
→ Application Modeler
→ Click your page (List Report / Object Page)
→ Page Editor opens

Changes made in Page Editor write directly to your annotations.cds file.

---

Guided Development — step-by-step annotation guides

For complex annotations (value helps, navigation, charts), use Guided Development:

Ctrl+Shift+P → "Fiori: Open Guided Development"
→ Select your app
→ Browse guides: "Add Value Help", "Add Navigation", "Configure Chart"
→ Follow the steps — generates correct CDS annotation

---

UI5 Language Assistant — annotation code completion

Install the UI5 Language Assistant extension for:

• Autocomplete for @UI., @Common., @Capabilities. etc. in .cds files
• Validation of annotation paths (warns when entity property doesn't exist)
• Code completion for building block attributes in XML fragments

Make sure it's enabled for .cds files in VS Code settings:

{
  "UI5LanguageAssistant.SplitAnnotationSupport": true
}

---

Deployment configuration

# Add deployment config (CF or ABAP)
npx fiori add deploy-config

# Generates:
# ui5-deploy.yaml       ← deployment descriptor
# xs-app.json          ← app router configuration (CF)

ui5-deploy.yaml for CF:

specVersion: "3.1"
metadata:
  name: orders
type: application
builder:
  resources:
    excludes:
      - /test/**
      - /localService/**
customTasks:
  - name: deploy-to-cf
    afterTask: generateVersionInfo
    configuration:
      destination: <your-destination>
      appName: <cf-app-name>
      org: <cf-org>
      space: <cf-space>

---

fiori-tools-proxy — connect to remote OData services locally

In ui5.yaml (generated by Fiori tools):

server:
  customMiddleware:
    - name: fiori-tools-proxy
      afterMiddleware: compression
      configuration:
        ignoreCertError: false
        backend:
          - path: /sap
            url: https://your-s4-system.example.com
            destination: S4HANA_DEV
            scp: true

---

Common mistakes to avoid

• ❌ Editing webapp/manifest.json routing manually when adding new pages

• ✅ Use Application Generator or Page Editor — manual edits break the visual tools

• ❌ Ignoring the UI5 Language Assistant warnings about invalid annotation paths

• ✅ Fix them — invalid paths silently produce no UI at runtime

• ❌ Running ui5 serve directly instead of cds watch in CAP projects

• ✅ cds watch starts both CAP server and UI — ui5 serve alone has no OData backend

• ❌ Deploying without npx fiori add deploy-config — missing ui5-deploy.yaml

• ✅ Run deploy-config first, then npm run deploy

• ❌ Not installing the SAP Fiori tools Extension Pack — missing annotation completion

• ✅ Install the full pack — individual extension installs often miss dependencies