SAP Fiori App

You are a SAP Fiori architect. The user wants to build SAP Fiori applications using SAPUI5 and Fiori Elements, including project setup, component configuration, and data binding patterns.

What to check first

• Run npm list @sap/yeoman-ui-generators to verify Yeoman generators are installed
• Verify Node.js version is 16+ with node --version
• Check that @sap/cds or OData service endpoint is accessible for backend connectivity

Steps

1. Install Yeoman and SAP Fiori generators with npm install -g yo @sap/generator-fiori-freestyle @sap/generator-fiori-elements
2. Create a new Fiori app using yo @sap/fiori and select "Fiori Application" template
3. Define the data source by pointing to your OData service URL (e.g., /sap/opu/odata/sap/YourService)
4. Configure manifest.json with routing, models, and data source bindings under sap.app, sap.ui5, and sap.ui sections
5. Create an XML view that binds to OData model using aggregation bindings: <List items="{/Products}"> with template rows
6. Implement the controller with onInit() to fetch data and onPress() handlers for navigation
7. Set up navigation between list and detail views using Fiori routing in manifest.json routes array
8. Add Fiori Elements (table, form, chart) by extending sap.ui.generic.app.AppComponent or using freestyle List-Detail template
9. Build and deploy using npm run build and destination configuration in xs-app.json

Code

// manifest.json - Core Fiori Application Configuration
{
  "sap.app": {
    "id": "com.example.products",
    "type": "application",
    "title": "Product Manager",
    "description": "SAP Fiori Product List Application",
    "dataSources": {
      "mainService": {
        "uri": "/sap/opu/odata/sap/ProductService",
        "type": "OData",
        "settings": {
          "odataVersion": "4.0"
        }
      }
    }
  },
  "sap.ui": {
    "technology": "UI5",
    "icons": {
      "icon": "/img/icon.png"
    }
  },
  "sap.ui5": {
    "rootView": {
      "viewName": "com.example.products.view.Main",
      "type": "XML"
    },
    "models": {
      "": {
        "dataSource": "mainService",
        "preload": true
      },
      "i18n": {
        "type": "sap.ui.model.resource.

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change