Fiori Elements vs. Freestyle Fiori: Welcher UI-Ansatz passt zu deinem Projekt?

┌────────────────────────────────────────────────────────────────────┐
│                     SAP Fiori UI-Entwicklung                        │
├────────────────────────────────────────────────────────────────────┤
│                                                                     │
│   ┌─────────────────────────┐    ┌─────────────────────────────┐   │
│   │     Fiori Elements      │    │      Freestyle Fiori        │   │
│   │   (Annotations-basiert) │    │      (SAPUI5 Custom)        │   │
│   ├─────────────────────────┤    ├─────────────────────────────┤   │
│   │ • Automatische UI       │    │ • Volle UI-Kontrolle        │   │
│   │ • CDS Annotations       │    │ • XML Views + Controller    │   │
│   │ • Kein JavaScript       │    │ • JavaScript/TypeScript     │   │
│   │ • Templates (List, OP)  │    │ • Custom Components         │   │
│   │ • SAP Updates inklusive │    │ • Eigene Wartung            │   │
│   └─────────────────────────┘    └─────────────────────────────┘   │
│                                                                     │
│   Aufwand: ●○○○○                  Aufwand: ●●●●●                   │
│   Flexibilität: ●●○○○             Flexibilität: ●●●●●              │
│                                                                     │
└────────────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────────┐
│                        Fiori Elements                            │
├─────────────────────────────────────────────────────────────────┤
│                                                                  │
│   CDS View + Annotations                                        │
│           │                                                     │
│           ▼                                                     │
│   ┌───────────────────┐                                        │
│   │  Fiori Elements   │  ──▶  Automatische UI-Generierung      │
│   │  Runtime          │                                        │
│   └───────────────────┘                                        │
│           │                                                     │
│           ▼                                                     │
│   ┌───────────────────────────────────────┐                    │
│   │          Fertige Fiori App            │                    │
│   │  • List Report                        │                    │
│   │  • Object Page                        │                    │
│   │  • Filter, Actions, Navigation        │                    │
│   └───────────────────────────────────────┘                    │
│                                                                  │
└─────────────────────────────────────────────────────────────────┘

@EndUserText.label: 'Bestellung - Projection'
@Metadata.allowExtensions: true
define root view entity ZC_ORDER
  provider contract transactional_query
  as projection on ZI_ORDER
{
  key OrderId,
      CustomerId,
      OrderDate,
      TotalAmount,
      Currency,
      Status,

      /* Associations */
      _Customer,
      _Items
}

@Metadata.layer: #CORE
annotate view ZC_ORDER with
{
  /* Header-Informationen */
  @UI.headerInfo: {
    typeName: 'Bestellung',
    typeNamePlural: 'Bestellungen',
    title: { value: 'OrderId' },
    description: { value: '_Customer.CustomerName' }
  }

  /* Facets für Object Page */
  @UI.facet: [
    {
      id: 'OrderHeader',
      purpose: #STANDARD,
      type: #IDENTIFICATION_REFERENCE,
      label: 'Bestelldaten',
      position: 10
    },
    {
      id: 'OrderItems',
      purpose: #STANDARD,
      type: #LINEITEM_REFERENCE,
      label: 'Positionen',
      position: 20,
      targetElement: '_Items'
    }
  ]

  /* Feld-Annotationen */
  @UI.lineItem: [{ position: 10, importance: #HIGH }]
  @UI.identification: [{ position: 10 }]
  @UI.selectionField: [{ position: 10 }]
  OrderId;

  @UI.lineItem: [{ position: 20, importance: #HIGH }]
  @UI.identification: [{ position: 20 }]
  @UI.selectionField: [{ position: 20 }]
  CustomerId;

  @UI.lineItem: [{ position: 30 }]
  @UI.identification: [{ position: 30 }]
  OrderDate;

  @UI.lineItem: [{ position: 40, criticality: 'StatusCriticality' }]
  @UI.identification: [{ position: 40 }]
  Status;

  @UI.lineItem: [{ position: 50 }]
  @UI.identification: [{ position: 50 }]
  @Semantics.amount.currencyCode: 'Currency'
  TotalAmount;
}

┌─────────────────────────────────────────────────────────────────┐
│                       Freestyle Fiori                            │
├─────────────────────────────────────────────────────────────────┤
│                                                                  │
│   ┌────────────────┐   ┌────────────────┐   ┌────────────────┐  │
│   │   XML Views    │   │  Controllers   │   │    Models      │  │
│   │   (Layout)     │   │  (JavaScript)  │   │   (Daten)      │  │
│   └───────┬────────┘   └───────┬────────┘   └───────┬────────┘  │
│           │                    │                    │           │
│           └────────────────────┼────────────────────┘           │
│                                │                                │
│                                ▼                                │
│   ┌────────────────────────────────────────────────────────┐   │
│   │              Custom Fiori Application                   │   │
│   │  • Eigene Komponenten                                  │   │
│   │  • Custom Layouts                                       │   │
│   │  • Volle JavaScript-Kontrolle                          │   │
│   └────────────────────────────────────────────────────────┘   │
│                                                                  │
└─────────────────────────────────────────────────────────────────┘

{
  "sap.app": {
    "id": "com.mycompany.orderapp",
    "type": "application",
    "title": "Bestellungen verwalten",
    "dataSources": {
      "mainService": {
        "uri": "/sap/opu/odata4/sap/zapi_order/srvd_a2x/sap/zui_order/0001/",
        "type": "OData",
        "settings": {
          "odataVersion": "4.0"
        }
      }
    }
  }
}

<mvc:View
    controllerName="com.mycompany.orderapp.controller.OrderList"
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns:f="sap.f"
    xmlns:core="sap.ui.core">

    <f:DynamicPage id="orderPage">
        <f:title>
            <f:DynamicPageTitle>
                <f:heading>
                    <Title text="Bestellungen"/>
                </f:heading>
                <f:actions>
                    <Button
                        text="Neue Bestellung"
                        type="Emphasized"
                        press=".onCreateOrder"/>
                    <Button
                        text="Exportieren"
                        icon="sap-icon://excel-attachment"
                        press=".onExport"/>
                </f:actions>
            </f:DynamicPageTitle>
        </f:title>

        <f:header>
            <f:DynamicPageHeader>
                <f:content>
                    <FlexBox wrap="Wrap">
                        <Input
                            id="searchField"
                            placeholder="Bestellung suchen..."
                            liveChange=".onSearch"
                            width="300px"/>
                        <Select
                            id="statusFilter"
                            change=".onStatusFilterChange"
                            items="{/StatusOptions}">
                            <core:Item key="{Key}" text="{Text}"/>
                        </Select>
                        <DateRangeSelection
                            id="dateFilter"
                            change=".onDateFilterChange"/>
                    </FlexBox>
                </f:content>
            </f:DynamicPageHeader>
        </f:header>

        <f:content>
            <Table
                id="orderTable"
                items="{/Orders}"
                growing="true"
                growingThreshold="50"
                mode="MultiSelect"
                selectionChange=".onSelectionChange">

                <headerToolbar>
                    <OverflowToolbar>
                        <ToolbarSpacer/>
                        <Button
                            text="Löschen"
                            icon="sap-icon://delete"
                            enabled="{= ${/SelectedCount} > 0}"
                            press=".onDeleteSelected"/>
                    </OverflowToolbar>
                </headerToolbar>

                <columns>
                    <Column width="10em">
                        <Text text="Bestellnummer"/>
                    </Column>
                    <Column width="15em">
                        <Text text="Kunde"/>
                    </Column>
                    <Column width="10em">
                        <Text text="Datum"/>
                    </Column>
                    <Column width="8em" hAlign="End">
                        <Text text="Betrag"/>
                    </Column>
                    <Column width="10em">
                        <Text text="Status"/>
                    </Column>
                </columns>

                <items>
                    <ColumnListItem
                        type="Navigation"
                        press=".onOrderPress">
                        <cells>
                            <ObjectIdentifier
                                title="{OrderId}"
                                text="{OrderType}"/>
                            <Text text="{CustomerName}"/>
                            <Text text="{
                                path: 'OrderDate',
                                type: 'sap.ui.model.type.Date',
                                formatOptions: { style: 'medium' }
                            }"/>
                            <ObjectNumber
                                number="{
                                    path: 'TotalAmount',
                                    type: 'sap.ui.model.type.Currency',
                                    formatOptions: { showMeasure: false }
                                }"
                                unit="{Currency}"/>
                            <ObjectStatus
                                text="{StatusText}"
                                state="{= ${Status} === 'COMPLETE' ? 'Success' : ${Status} === 'CANCELED' ? 'Error' : 'Warning' }"/>
                        </cells>
                    </ColumnListItem>
                </items>
            </Table>
        </f:content>
    </f:DynamicPage>
</mvc:View>

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/json/JSONModel",
    "sap/ui/model/Filter",
    "sap/ui/model/FilterOperator",
    "sap/m/MessageBox",
    "sap/ui/export/Spreadsheet"
], function(Controller, JSONModel, Filter, FilterOperator, MessageBox, Spreadsheet) {
    "use strict";

    return Controller.extend("com.mycompany.orderapp.controller.OrderList", {

        onInit: function() {
            // Lokales View-Model für UI-State
            var oViewModel = new JSONModel({
                SelectedCount: 0,
                StatusOptions: [
                    { Key: "", Text: "Alle Status" },
                    { Key: "NEW", Text: "Neu" },
                    { Key: "INPROCESS", Text: "In Bearbeitung" },
                    { Key: "COMPLETE", Text: "Abgeschlossen" },
                    { Key: "CANCELED", Text: "Storniert" }
                ]
            });
            this.getView().setModel(oViewModel);
        },

        onSearch: function(oEvent) {
            var sQuery = oEvent.getParameter("newValue");
            var oTable = this.byId("orderTable");
            var oBinding = oTable.getBinding("items");

            var aFilters = [];
            if (sQuery) {
                aFilters.push(new Filter({
                    filters: [
                        new Filter("OrderId", FilterOperator.Contains, sQuery),
                        new Filter("CustomerName", FilterOperator.Contains, sQuery)
                    ],
                    and: false
                }));
            }

            // Kombiniere mit Status-Filter
            this._applyFilters(aFilters);
        },

        onStatusFilterChange: function(oEvent) {
            var sStatus = oEvent.getParameter("selectedItem").getKey();
            this._sCurrentStatus = sStatus;
            this._applyFilters();
        },

        onDateFilterChange: function(oEvent) {
            var oDateRange = oEvent.getSource();
            this._oDateFrom = oDateRange.getDateValue();
            this._oDateTo = oDateRange.getSecondDateValue();
            this._applyFilters();
        },

        _applyFilters: function(aAdditionalFilters) {
            var aFilters = aAdditionalFilters || [];

            // Status-Filter
            if (this._sCurrentStatus) {
                aFilters.push(new Filter("Status", FilterOperator.EQ, this._sCurrentStatus));
            }

            // Datum-Filter
            if (this._oDateFrom && this._oDateTo) {
                aFilters.push(new Filter("OrderDate", FilterOperator.BT,
                    this._oDateFrom, this._oDateTo));
            }

            var oTable = this.byId("orderTable");
            var oBinding = oTable.getBinding("items");
            oBinding.filter(aFilters.length > 0 ? new Filter({
                filters: aFilters,
                and: true
            }) : []);
        },

        onSelectionChange: function(oEvent) {
            var iSelectedCount = oEvent.getSource().getSelectedItems().length;
            this.getView().getModel().setProperty("/SelectedCount", iSelectedCount);
        },

        onCreateOrder: function() {
            // Navigation zu Create-View
            var oRouter = this.getOwnerComponent().getRouter();
            oRouter.navTo("orderCreate");
        },

        onOrderPress: function(oEvent) {
            // Navigation zu Detail-View
            var oItem = oEvent.getSource();
            var sOrderId = oItem.getBindingContext().getProperty("OrderId");

            var oRouter = this.getOwnerComponent().getRouter();
            oRouter.navTo("orderDetail", {
                orderId: sOrderId
            });
        },

        onDeleteSelected: function() {
            var oTable = this.byId("orderTable");
            var aSelectedItems = oTable.getSelectedItems();

            MessageBox.confirm(
                "Möchten Sie " + aSelectedItems.length + " Bestellung(en) wirklich löschen?",
                {
                    title: "Löschen bestätigen",
                    onClose: function(sAction) {
                        if (sAction === MessageBox.Action.OK) {
                            this._deleteOrders(aSelectedItems);
                        }
                    }.bind(this)
                }
            );
        },

        _deleteOrders: function(aItems) {
            // OData Delete-Aufrufe
            var oModel = this.getView().getModel("mainService");

            aItems.forEach(function(oItem) {
                var sPath = oItem.getBindingContext().getPath();
                oModel.remove(sPath, {
                    success: function() {
                        // Erfolgreich gelöscht
                    },
                    error: function(oError) {
                        MessageBox.error("Fehler beim Löschen: " + oError.message);
                    }
                });
            });
        },

        onExport: function() {
            var oTable = this.byId("orderTable");
            var oBinding = oTable.getBinding("items");

            var oSpreadsheet = new Spreadsheet({
                workbook: {
                    columns: [
                        { label: "Bestellnummer", property: "OrderId" },
                        { label: "Kunde", property: "CustomerName" },
                        { label: "Datum", property: "OrderDate", type: "Date" },
                        { label: "Betrag", property: "TotalAmount", type: "Number" },
                        { label: "Währung", property: "Currency" },
                        { label: "Status", property: "StatusText" }
                    ]
                },
                dataSource: oBinding,
                fileName: "Bestellungen.xlsx"
            });

            oSpreadsheet.build();
        }
    });
});

Start: Neue Fiori App erforderlich
                │
                ▼
     ┌──────────────────────┐
     │ Ist die UI-Anforderung │
     │ mit Templates abbildbar?│
     └─────────┬────────────┘
               │
      ┌────────┴────────┐
      │                 │
      ▼                 ▼
     JA               NEIN
      │                 │
      ▼                 ▼
┌───────────────┐  ┌────────────────┐
│ Braucht die   │  │ → FREESTYLE    │
│ App komplexe  │  │   FIORI        │
│ Custom-Logik? │  └────────────────┘
└──────┬────────┘
       │
  ┌────┴────┐
  │         │
  ▼         ▼
 JA       NEIN
  │         │
  ▼         ▼
┌─────────────────┐  ┌────────────────────┐
│ Kann die Logik  │  │ → FIORI ELEMENTS   │
│ in ABAP (RAP)   │  │   (Rein deklarativ)│
│ implementiert   │  └────────────────────┘
│ werden?         │
└────────┬────────┘
         │
    ┌────┴────┐
    │         │
    ▼         ▼
   JA       NEIN
    │         │
    ▼         ▼
┌──────────────────┐  ┌────────────────────┐
│ → FIORI ELEMENTS │  │ → FREESTYLE FIORI  │
│   mit RAP Backend│  │   oder Hybrid      │
└──────────────────┘  └────────────────────┘

{
  "sap.ui5": {
    "extends": {
      "extensions": {
        "sap.ui.controllerExtensions": {
          "sap.fe.templates.ObjectPage.ObjectPageController": {
            "controllerName": "com.mycompany.orderapp.ext.ObjectPageExt"
          }
        }
      }
    },
    "routing": {
      "targets": {
        "OrderObjectPage": {
          "options": {
            "settings": {
              "content": {
                "body": {
                  "sections": {
                    "CustomSection": {
                      "template": "com.mycompany.orderapp.ext.CustomSection",
                      "title": "Lieferverfolgung",
                      "position": {
                        "anchor": "OrderItems",
                        "placement": "After"
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

<core:FragmentDefinition
    xmlns="sap.m"
    xmlns:core="sap.ui.core"
    xmlns:macros="sap.fe.macros">

    <VBox class="sapUiSmallMargin">
        <Title text="Sendungsverfolgung"/>

        <!-- Custom Map Component -->
        <FlexBox height="300px" width="100%">
            <core:HTML content="{= ${DeliveryMapHtml} }"/>
        </FlexBox>

        <ProgressIndicator
            percentValue="{= ${DeliveryProgress} }"
            displayValue="{= ${DeliveryStatus} }"
            state="{= ${DeliveryProgress} === 100 ? 'Success' : 'Information' }"
            showValue="true"/>

        <HBox class="sapUiTinyMarginTop">
            <Button
                text="Tracking-Details"
                type="Transparent"
                icon="sap-icon://map"
                press=".extension.com.mycompany.orderapp.ext.ObjectPageExt.onShowTrackingDetails"/>
        </HBox>
    </VBox>
</core:FragmentDefinition>

sap.ui.define([
    "sap/ui/core/mvc/ControllerExtension",
    "sap/m/MessageBox"
], function(ControllerExtension, MessageBox) {
    "use strict";

    return ControllerExtension.extend("com.mycompany.orderapp.ext.ObjectPageExt", {

        // Override: Wird beim Laden der Object Page aufgerufen
        override: {
            onPageReady: function(mParameters) {
                // Custom Initialisierung
                this._loadDeliveryTracking();
            }
        },

        // Custom Method für Tracking-Details
        onShowTrackingDetails: function(oEvent) {
            var oContext = this.base.getView().getBindingContext();
            var sTrackingNumber = oContext.getProperty("TrackingNumber");

            // Custom Dialog öffnen
            if (!this._oTrackingDialog) {
                this._oTrackingDialog = sap.ui.xmlfragment(
                    "com.mycompany.orderapp.ext.TrackingDialog",
                    this
                );
                this.base.getView().addDependent(this._oTrackingDialog);
            }

            this._oTrackingDialog.open();
        },

        _loadDeliveryTracking: function() {
            // Custom API-Aufruf für Tracking-Daten
            var oContext = this.base.getView().getBindingContext();
            if (!oContext) return;

            var sOrderId = oContext.getProperty("OrderId");

            // Beispiel: Externe Tracking-API
            fetch("/api/tracking/" + sOrderId)
                .then(function(response) { return response.json(); })
                .then(function(data) {
                    // Update Model mit Tracking-Daten
                    var oModel = this.base.getView().getModel();
                    oModel.setProperty(oContext.getPath() + "/DeliveryProgress", data.progress);
                    oModel.setProperty(oContext.getPath() + "/DeliveryStatus", data.status);
                }.bind(this));
        }
    });
});

@Metadata.layer: #CORE
annotate view ZC_ORDER with
{
  @UI.headerInfo: {
    typeName: 'Bestellung',
    typeNamePlural: 'Bestellungen',
    title: { value: 'OrderId' }
  }

  @UI.lineItem: [{ position: 10 }]
  @UI.selectionField: [{ position: 10 }]
  OrderId;

  @UI.lineItem: [{ position: 20 }]
  @UI.selectionField: [{ position: 20 }]
  CustomerId;

  @UI.lineItem: [{ position: 30 }]
  OrderDate;

  @UI.lineItem: [{ position: 40, criticality: 'StatusCriticality' }]
  @UI.selectionField: [{ position: 30 }]
  Status;
}