Fiori Elements App Deployment auf BTP: Vom Entwicklungsprojekt zur produktiven App

Kategorie

BTP

Veröffentlicht

15. Feb. 2026

Autor

Das Deployment einer Fiori Elements App auf SAP BTP umfasst mehrere Schritte: Von der Projekterstellung im Business Application Studio über die richtige Konfiguration bis zur Integration ins SAP Build Work Zone Launchpad. In diesem Artikel führen wir dich durch den kompletten Prozess.

Übersicht: Deployment-Prozess

┌─────────────────────────────────────────────────────────────────────┐
│                  Fiori Elements App Deployment                       │
├─────────────────────────────────────────────────────────────────────┤
│                                                                       │
│  1. App erstellen        2. Konfigurieren       3. Build & Deploy    │
│  ─────────────────       ────────────────       ─────────────────    │
│  ┌───────────────┐       ┌───────────────┐      ┌───────────────┐   │
│  │    BAS        │       │ manifest.json │      │   MTA Build   │   │
│  │  Generator    │  →    │  xs-app.json  │  →   │   cf deploy   │   │
│  │               │       │  mta.yaml     │      │               │   │
│  └───────────────┘       └───────────────┘      └───────────────┘   │
│                                                         │            │
│                                                         ▼            │
│                              4. Launchpad-Integration               │
│                              ─────────────────────────              │
│                              ┌───────────────────────┐              │
│                              │  SAP Build Work Zone  │              │
│                              │  • Tile erstellen     │              │
│                              │  • Space zuweisen     │              │
│                              │  • Rollen pflegen     │              │
│                              └───────────────────────┘              │
│                                                                       │
└─────────────────────────────────────────────────────────────────────┘

Voraussetzungen

Bevor du mit dem Deployment beginnst:

Voraussetzung	Beschreibung
RAP Service	Funktionsfähiger OData V4 Service auf BTP ABAP Environment
BAS Dev Space	SAP Fiori Dev Space im Business Application Studio
Cloud Foundry	Zugang zum BTP Subaccount mit CF-Space
Build Work Zone	SAP Build Work Zone (Standard oder Advanced) Subscription
Destination	Destination zum ABAP Environment konfiguriert

1. App-Erstellung im Business Application Studio

Dev Space vorbereiten

Falls noch nicht vorhanden, erstelle einen Fiori Dev Space:

1. BAS öffnen → "Create Dev Space"
2. Name: "FioriDevelopment"
3. Typ: "SAP Fiori" auswählen
4. Extensions aktivieren:
   ☑ HTML5 Application Template
   ☑ Fiori Tools
   ☑ MTA Build Tools
5. "Create Dev Space" klicken

Fiori Elements App generieren

Nach dem Start des Dev Space:

1. View → Command Palette (F1)
2. "Fiori: Open Application Generator" eingeben
3. Template wählen: "List Report Page"
4. Weiter klicken

Datenquelle konfigurieren

Datenquelle: "Connect to SAP System"

Service Selection:
├── System: BTP ABAP Environment
├── ABAP Environment: [Dein Service Key]
├── System URL: (automatisch aus Service Key)
└── Service: ZUI_FLIGHTBOOK_O4 (dein OData Service)

Main Entity: FlightBook
Navigation Entity: None (oder Child-Entity falls vorhanden)

Projektattribute festlegen

Projektname: flightbooking
Application Title: Flugbuchung verwalten
Application Namespace: com.mycompany
Description: Fiori Elements App für Flugbuchungen
Minimum SAPUI5 Version: 1.127.0 (oder aktueller)

Project Folder: /home/user/projects
Add deployment configuration: Yes
Add FLP configuration: Yes

Deployment- und FLP-Konfiguration

Bei der Generierung direkt mitgeben:

Deployment Configuration:
├── Target: Cloud Foundry
├── Destination Name: BTP_ABAP_ENV (deine Destination)
└── Add Application to managed App Router: Yes

FLP Configuration:
├── Semantic Object: FlightBooking
├── Action: manage
├── Title: Flugbuchung verwalten
└── Subtitle: Buchungen anlegen und bearbeiten

2. Deployment-Konfiguration verstehen

Nach der Generierung enthält dein Projekt mehrere Konfigurationsdateien.

Projektstruktur

flightbooking/
├── webapp/
│   ├── manifest.json          # App-Konfiguration
│   ├── Component.js           # UI5 Component
│   ├── i18n/
│   │   └── i18n.properties    # Übersetzungen
│   ├── localService/          # Mock-Daten für lokales Testen
│   └── test/                  # OPA5 Tests
├── xs-app.json                # App Router Routing
├── mta.yaml                   # Multi-Target Application Descriptor
├── package.json               # Node.js Dependencies
├── ui5.yaml                   # UI5 Build-Konfiguration
└── ui5-deploy.yaml            # Deployment-spezifische UI5 Config

manifest.json

Die manifest.json ist das Herzstück der App-Konfiguration:

{
  "_version": "1.65.0",
  "sap.app": {
    "id": "com.mycompany.flightbooking",
    "type": "application",
    "title": "{{appTitle}}",
    "description": "{{appDescription}}",
    "applicationVersion": {
      "version": "1.0.0"
    },
    "dataSources": {
      "mainService": {
        "uri": "/sap/opu/odata4/sap/zui_flightbook_o4/srvd/sap/zui_flightbook/0001/",
        "type": "OData",
        "settings": {
          "odataVersion": "4.0"
        }
      }
    },
    "crossNavigation": {
      "inbounds": {
        "FlightBooking-manage": {
          "semanticObject": "FlightBooking",
          "action": "manage",
          "title": "{{flpTitle}}",
          "subTitle": "{{flpSubtitle}}",
          "signature": {
            "parameters": {},
            "additionalParameters": "allowed"
          }
        }
      }
    }
  },
  "sap.ui5": {
    "flexEnabled": true,
    "dependencies": {
      "minUI5Version": "1.127.0",
      "libs": {
        "sap.m": {},
        "sap.ui.core": {},
        "sap.fe.templates": {}
      }
    },
    "routing": {
      "routes": [
        {
          "pattern": ":?query:",
          "name": "FlightBookList",
          "target": "FlightBookList"
        },
        {
          "pattern": "FlightBook({key}):?query:",
          "name": "FlightBookObjectPage",
          "target": "FlightBookObjectPage"
        }
      ],
      "targets": {
        "FlightBookList": {
          "type": "Component",
          "id": "FlightBookList",
          "name": "sap.fe.templates.ListReport",
          "options": {
            "settings": {
              "contextPath": "/FlightBook",
              "variantManagement": "Page",
              "navigation": {
                "FlightBook": {
                  "detail": {
                    "route": "FlightBookObjectPage"
                  }
                }
              },
              "initialLoad": "Enabled"
            }
          }
        },
        "FlightBookObjectPage": {
          "type": "Component",
          "id": "FlightBookObjectPage",
          "name": "sap.fe.templates.ObjectPage",
          "options": {
            "settings": {
              "contextPath": "/FlightBook",
              "editableHeaderContent": false
            }
          }
        }
      }
    }
  }
}

Wichtige Einstellungen:

Eigenschaft	Beschreibung
`sap.app.id`	Eindeutige App-ID (Namespace + Name)
`dataSources.mainService.uri`	Pfad zum OData Service
`crossNavigation.inbounds`	Launchpad-Integration (Semantic Object + Action)
`variantManagement`	Benutzer-spezifische Ansichten speichern
`initialLoad`	Daten direkt beim Start laden

xs-app.json

Der Application Router nutzt diese Datei für das Routing:

{
  "welcomeFile": "/index.html",
  "authenticationMethod": "route",
  "routes": [
    {
      "source": "^/sap/opu/odata4/(.*)$",
      "target": "/sap/opu/odata4/$1",
      "destination": "BTP_ABAP_ENV",
      "authenticationType": "xsuaa",
      "csrfProtection": false
    },
    {
      "source": "^(.*)$",
      "target": "$1",
      "service": "html5-apps-repo-rt",
      "authenticationType": "xsuaa"
    }
  ]
}

Route-Erklärung:

Route	Zweck
`/sap/opu/odata4/(.*)`	OData-Anfragen an ABAP Environment weiterleiten
`^(.*)$`	Alle anderen Anfragen (HTML, JS, CSS) aus HTML5 Repository

mta.yaml

Der Multi-Target Application Descriptor definiert alle Komponenten:

_schema-version: '3.2'
ID: flightbooking
version: 1.0.0
description: Flugbuchung Fiori Elements App

parameters:
  enable-parallel-deployments: true
  deploy_mode: html5-repo

build-parameters:
  before-all:
    - builder: custom
      commands:
        - npm ci
        - npx ui5 build --config=ui5-deploy.yaml --clean-dest --dest dist

modules:
  # HTML5 App Deployer
  - name: flightbooking-deployer
    type: com.sap.application.content
    path: dist
    requires:
      - name: flightbooking-html5-repo-host
        parameters:
          content-target: true

  # Destination Content
  - name: flightbooking-destination-content
    type: com.sap.application.content
    requires:
      - name: flightbooking-destination-service
        parameters:
          content-target: true
      - name: flightbooking-html5-repo-host
        parameters:
          service-key:
            name: flightbooking-html5-repo-host-key
      - name: flightbooking-uaa
        parameters:
          service-key:
            name: flightbooking-uaa-key
    parameters:
      content:
        instance:
          destinations:
            - Name: flightbooking_html5_repo_host
              ServiceInstanceName: flightbooking-html5-repo-host
              ServiceKeyName: flightbooking-html5-repo-host-key
              sap.cloud.service: com.mycompany.flightbooking
            - Authentication: OAuth2UserTokenExchange
              Name: flightbooking_uaa
              ServiceInstanceName: flightbooking-uaa
              ServiceKeyName: flightbooking-uaa-key
              sap.cloud.service: com.mycompany.flightbooking
          existing_destinations_policy: update

resources:
  # HTML5 Application Repository
  - name: flightbooking-html5-repo-host
    type: org.cloudfoundry.managed-service
    parameters:
      service: html5-apps-repo
      service-plan: app-host

  # Destination Service
  - name: flightbooking-destination-service
    type: org.cloudfoundry.managed-service
    parameters:
      service: destination
      service-plan: lite
      config:
        HTML5Runtime_enabled: true

  # UAA Service
  - name: flightbooking-uaa
    type: org.cloudfoundry.managed-service
    parameters:
      service: xsuaa
      service-plan: application
      path: ./xs-security.json

xs-security.json

Definiert die Sicherheitskonfiguration:

{
  "xsappname": "flightbooking",
  "tenant-mode": "dedicated",
  "scopes": [],
  "attributes": [],
  "role-templates": [],
  "oauth2-configuration": {
    "redirect-uris": [
      "https://*.cfapps.*.hana.ondemand.com/**"
    ]
  }
}

3. Deployment-Prozess Schritt für Schritt

Im BAS-Terminal:

# CF CLI Login
cf login -a https://api.cf.eu10.hana.ondemand.com

# Org und Space auswählen
cf target -o my-org -s dev

Schritt 2: Destination prüfen

Im BTP Cockpit unter Connectivity → Destinations muss eine Destination zum ABAP Environment existieren:

Destination: BTP_ABAP_ENV
Type: HTTP
URL: https://<abap-env-host>.abap.eu10.hana.ondemand.com
Proxy Type: Internet
Authentication: OAuth2SAMLBearerAssertion

Additional Properties:
├── sap-client: 100
├── HTML5.DynamicDestination: true
└── WebIDEUsage: odata_gen,odata_abap

Schritt 3: MTA Build

# Im Projektverzeichnis
cd /home/user/projects/flightbooking

# MTA Build ausführen
mbt build

# Ergebnis: mta_archives/flightbooking_1.0.0.mtar

Der Build-Prozess:

┌─────────────────────────────────────────────────────────┐
│                    MTA Build                              │
├─────────────────────────────────────────────────────────┤
│                                                           │
│  1. npm ci                                               │
│     └── Dependencies installieren                        │
│                                                           │
│  2. npx ui5 build                                        │
│     └── UI5 App kompilieren                             │
│     └── Minifizieren                                    │
│     └── dist/ Verzeichnis erstellen                     │
│                                                           │
│  3. mbt build                                            │
│     └── Module zusammenfügen                            │
│     └── .mtar Archiv erstellen                          │
│                                                           │
│  Output: mta_archives/flightbooking_1.0.0.mtar          │
│                                                           │
└─────────────────────────────────────────────────────────┘

Schritt 4: Deployment auf Cloud Foundry

# Deploy MTAR
cf deploy mta_archives/flightbooking_1.0.0.mtar

# Alternativ mit Fortschrittsanzeige
cf deploy mta_archives/flightbooking_1.0.0.mtar --version-rule ALL

Deployment-Output:

Deploying multi-target app archive flightbooking_1.0.0.mtar...

Uploading 1 of 1 done
Processing service "flightbooking-html5-repo-host"...
Processing service "flightbooking-destination-service"...
Processing service "flightbooking-uaa"...
Uploading content module "flightbooking-deployer"...
Deploying content module "flightbooking-destination-content"...

Process finished successfully.

Schritt 5: Deployment verifizieren

# Services prüfen
cf services

# Output:
# NAME                              SERVICE           PLAN
# flightbooking-html5-repo-host    html5-apps-repo   app-host
# flightbooking-destination-service destination      lite
# flightbooking-uaa                xsuaa             application

# HTML5 Apps auflisten
cf html5-list

# Output:
# name                              version   app-host-id
# com.mycompany.flightbooking       1.0.0     abc123-def456

4. Launchpad-Integration

Nach dem Deployment muss die App im SAP Build Work Zone Launchpad eingebunden werden.

Site Manager öffnen

1. BTP Cockpit → Instances and Subscriptions
2. SAP Build Work Zone, standard edition → Go to Application
3. Channel Manager → Content Provider "HTML5 Apps" → Refresh

Content Explorer

1. Content Manager → Content Explorer
2. HTML5 Apps → Deine App finden
3. "Add to My Content" klicken

Role definieren

1. Content Manager → Create → Role
2. Name: "FlightBookingUser"
3. Beschreibung: "Zugriff auf Flugbuchungs-App"
4. Apps zuweisen:
   ☑ Flugbuchung verwalten (deine App)
5. Save

Group erstellen

1. Content Manager → Create → Group
2. Title: "Flugbuchung"
3. Apps zuweisen:
   ☑ Flugbuchung verwalten
4. Save

Site erstellen oder erweitern

1. Site Directory → Create Site (oder bestehenden öffnen)
2. Site Settings → Content Assignment
3. Role "FlightBookingUser" zuweisen
4. Save

Benutzer zuweisen

Im BTP Cockpit:

1. Security → Role Collections
2. "FlightBookingUser_RC" (automatisch erstellt) bearbeiten
3. Users → Add User
4. E-Mail oder User ID eingeben
5. Save

5. Troubleshooting

Häufige Deployment-Probleme

Problem	Ursache	Lösung
”Service not found”	HTML5 Repo Service nicht verfügbar	Entitlement prüfen im Subaccount
”Destination not found”	Destination Name in xs-app.json falsch	Namen in Destination-Konfiguration prüfen
”CSRF token validation failed”	csrfProtection aktiviert	In xs-app.json auf `false` setzen
”Unauthorized”	Fehlende Berechtigung	UAA Service Key und Rollen prüfen
”Cannot read property…“	manifest.json Syntax-Fehler	JSON Validator nutzen

Build-Fehler

# Fehler: Module not found
# Lösung: Dependencies aktualisieren
npm ci
npm update

# Fehler: UI5 build failed
# Lösung: UI5 Tooling aktualisieren
npm install -g @ui5/cli

# Cache leeren
rm -rf node_modules
npm ci

OData-Verbindungsprobleme

Problem: "Failed to load metadata"

Prüfen:
1. Destination erreichbar?
   → BTP Cockpit → Connectivity → Destinations → "Check Connection"

2. Service Binding aktiv?
   → ADT → Service Binding öffnen → "Publish" gedrückt?

3. CORS konfiguriert?
   → Destination: sap-client Property gesetzt?

4. User berechtigt?
   → IAM Business Catalog dem User zugewiesen?

Launchpad-Probleme

Problem: App erscheint nicht im Launchpad

Prüfen:
1. Content Explorer → App sichtbar?
   → Wenn nicht: Channel Manager → Refresh

2. Role zugewiesen?
   → Content Manager → Role → App enthalten?

3. Role Collection erstellt?
   → Security → Role Collections → _RC vorhanden?

4. User in Role Collection?
   → Role Collection öffnen → Users Tab

Debug-Modus aktivieren

Für detaillierte Fehlermeldungen:

URL-Parameter: ?sap-ui-debug=true

Beispiel:
https://mysite.launchpad.cfapps.eu10.hana.ondemand.com/site#Shell-home?sap-ui-debug=true

Logs auswerten

# App Router Logs (falls managed approuter)
cf logs flightbooking-approuter --recent

# HTML5 Deployer Logs
cf logs flightbooking-deployer --recent

# Service Instance Logs
cf service flightbooking-html5-repo-host

Best Practices

Bereich	Empfehlung
Versionierung	Version in mta.yaml bei jedem Deployment erhöhen
Namenskonventionen	Einheitliche Namespace-Struktur (com.company.app)
Destination	`HTML5.DynamicDestination: true` für Flexibilität
Testing	Lokales Testing mit Mock-Daten vor Deployment
CI/CD	MTA Build in Pipeline automatisieren
Caching	Cache-Busting durch Version aktivieren
Monitoring	Application Logging im BTP Cockpit nutzen

Automatisiertes Deployment mit CI/CD

Für automatisierte Deployments in einer Pipeline:

# GitHub Actions Beispiel
name: Deploy Fiori App

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: Install MTA Build Tool
        run: npm install -g mbt

      - name: Install CF CLI
        run: |
          wget -q -O cf-cli.deb "https://packages.cloudfoundry.org/stable?release=debian64"
          sudo dpkg -i cf-cli.deb
          cf install-plugin multiapps -f

      - name: Build MTA
        run: |
          npm ci
          mbt build

      - name: Deploy to Cloud Foundry
        env:
          CF_API: ${{ secrets.CF_API }}
          CF_USER: ${{ secrets.CF_USER }}
          CF_PASSWORD: ${{ secrets.CF_PASSWORD }}
          CF_ORG: ${{ secrets.CF_ORG }}
          CF_SPACE: ${{ secrets.CF_SPACE }}
        run: |
          cf login -a $CF_API -u $CF_USER -p $CF_PASSWORD -o $CF_ORG -s $CF_SPACE
          cf deploy mta_archives/*.mtar -f

Fazit

Das Deployment einer Fiori Elements App auf SAP BTP erfordert mehrere Konfigurationsschritte, die jedoch durch den Fiori Generator gut unterstützt werden. Der Schlüssel liegt im Verständnis der einzelnen Komponenten:

manifest.json definiert die App-Metadaten und OData-Anbindung
xs-app.json konfiguriert das Routing über den App Router
mta.yaml orchestriert alle Services und Module
Launchpad-Integration macht die App für Endbenutzer zugänglich

Mit diesem Wissen kannst du Fiori Elements Apps zuverlässig auf BTP deployen und im Launchpad bereitstellen.

Weiterführende Artikel

Business Application Studio - BAS einrichten und nutzen
SAP Build Work Zone Integration - Launchpad-Konfiguration im Detail
RAP Code-Generierung - Backend und Frontend generieren
CI/CD für ABAP Cloud - Automatisierte Deployments