Fiori Elements vs. Freestyle Fiori : Quelle approche UI pour votre projet ?

┌────────────────────────────────────────────────────────────────────┐
│                     Développement UI SAP Fiori                      │
├────────────────────────────────────────────────────────────────────┤
│                                                                     │
│   ┌─────────────────────────┐    ┌─────────────────────────────┐   │
│   │     Fiori Elements      │    │      Freestyle Fiori        │   │
│   │   (Basé annotations)    │    │      (SAPUI5 Custom)        │   │
│   ├─────────────────────────┤    ├─────────────────────────────┤   │
│   │ • UI automatique        │    │ • Contrôle UI complet       │   │
│   │ • Annotations CDS       │    │ • Vues XML + Controller     │   │
│   │ • Pas de JavaScript     │    │ • JavaScript/TypeScript     │   │
│   │ • Templates (List, OP)  │    │ • Composants personnalisés  │   │
│   │ • Mises à jour SAP incl.│    │ • Maintenance propre        │   │
│   └─────────────────────────┘    └─────────────────────────────┘   │
│                                                                     │
│   Effort: ●○○○○                   Effort: ●●●●●                    │
│   Flexibilité: ●●○○○              Flexibilité: ●●●●●               │
│                                                                     │
└────────────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────────┐
│                        Fiori Elements                            │
├─────────────────────────────────────────────────────────────────┤
│                                                                  │
│   Vue CDS + Annotations                                         │
│           │                                                     │
│           ▼                                                     │
│   ┌───────────────────┐                                        │
│   │  Fiori Elements   │  ──▶  Génération UI automatique        │
│   │  Runtime          │                                        │
│   └───────────────────┘                                        │
│           │                                                     │
│           ▼                                                     │
│   ┌───────────────────────────────────────┐                    │
│   │          Application Fiori prête      │                    │
│   │  • List Report                        │                    │
│   │  • Object Page                        │                    │
│   │  • Filtres, Actions, Navigation       │                    │
│   └───────────────────────────────────────┘                    │
│                                                                  │
└─────────────────────────────────────────────────────────────────┘

@EndUserText.label: 'Commande - 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
{
  /* Informations d'en-tête */
  @UI.headerInfo: {
    typeName: 'Commande',
    typeNamePlural: 'Commandes',
    title: { value: 'OrderId' },
    description: { value: '_Customer.CustomerName' }
  }

  /* Facets pour Object Page */
  @UI.facet: [
    {
      id: 'OrderHeader',
      purpose: #STANDARD,
      type: #IDENTIFICATION_REFERENCE,
      label: 'Données de commande',
      position: 10
    },
    {
      id: 'OrderItems',
      purpose: #STANDARD,
      type: #LINEITEM_REFERENCE,
      label: 'Positions',
      position: 20,
      targetElement: '_Items"
    }
  ]

  /* Annotations de champs */
  @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                            │
├─────────────────────────────────────────────────────────────────┤
│                                                                  │
│   ┌────────────────┐   ┌────────────────┐   ┌────────────────┐  │
│   │   Vues XML     │   │  Controllers   │   │    Modèles     │  │
│   │   (Layout)     │   │  (JavaScript)  │   │   (Données)    │  │
│   └───────┬────────┘   └───────┬────────┘   └───────┬────────┘  │
│           │                    │                    │           │
│           └────────────────────┼────────────────────┘           │
│                                │                                │
│                                ▼                                │
│   ┌────────────────────────────────────────────────────────┐   │
│   │              Application Fiori personnalisée           │   │
│   │  • Composants propres                                  │   │
│   │  • Layouts personnalisés                               │   │
│   │  • Contrôle JavaScript complet                         │   │
│   └────────────────────────────────────────────────────────┘   │
│                                                                  │
└─────────────────────────────────────────────────────────────────┘

{
  "sap.app": {
    "id": "com.mycompany.orderapp",
    "type": "application",
    "title": "Gérer les commandes",
    "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="Commandes"/>
                </f:heading>
                <f:actions>
                    <Button
                        text="Nouvelle commande"
                        type="Emphasized"
                        press=".onCreateOrder"/>
                    <Button
                        text="Exporter"
                        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="Rechercher une commande..."
                            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="Supprimer"
                            icon="sap-icon://delete"
                            enabled="{= ${/SelectedCount} > 0}"
                            press=".onDeleteSelected"/>
                    </OverflowToolbar>
                </headerToolbar>

                <columns>
                    <Column width="10em">
                        <Text text="Numéro de commande"/>
                    </Column>
                    <Column width="15em">
                        <Text text="Client"/>
                    </Column>
                    <Column width="10em">
                        <Text text="Date"/>
                    </Column>
                    <Column width="8em" hAlign="End">
                        <Text text="Montant"/>
                    </Column>
                    <Column width="10em">
                        <Text text="Statut"/>
                    </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() {
            // Modèle de vue local pour l'état UI
            var oViewModel = new JSONModel({
                SelectedCount: 0,
                StatusOptions: [
                    { Key: "", Text: "Tous les statuts" },
                    { Key: "NEW", Text: "Nouveau" },
                    { Key: "INPROCESS", Text: "En cours" },
                    { Key: "COMPLETE", Text: "Terminé" },
                    { Key: "CANCELED", Text: "Annulé" }
                ]
            });
            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
                }));
            }

            // Combiner avec le filtre de statut
            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 || [];

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

            // Filtre de date
            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 vers la vue de création
            var oRouter = this.getOwnerComponent().getRouter();
            oRouter.navTo("orderCreate");
        },

        onOrderPress: function(oEvent) {
            // Navigation vers la vue détaillée
            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(
                "Voulez-vous vraiment supprimer " + aSelectedItems.length + " commande(s) ?",
                {
                    title: "Confirmer la suppression",
                    onClose: function(sAction) {
                        if (sAction === MessageBox.Action.OK) {
                            this._deleteOrders(aSelectedItems);
                        }
                    }.bind(this)
                }
            );
        },

        _deleteOrders: function(aItems) {
            // Appels de suppression OData
            var oModel = this.getView().getModel("mainService");

            aItems.forEach(function(oItem) {
                var sPath = oItem.getBindingContext().getPath();
                oModel.remove(sPath, {
                    success: function() {
                        // Supprimé avec succès
                    },
                    error: function(oError) {
                        MessageBox.error("Erreur lors de la suppression: " + oError.message);
                    }
                });
            });
        },

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

            var oSpreadsheet = new Spreadsheet({
                workbook: {
                    columns: [
                        { label: "Numéro de commande", property: "OrderId" },
                        { label: "Client", property: "CustomerName" },
                        { label: "Date", property: "OrderDate", type: "Date" },
                        { label: "Montant", property: "TotalAmount", type: "Number" },
                        { label: "Devise", property: "Currency" },
                        { label: "Statut", property: "StatusText" }
                    ]
                },
                dataSource: oBinding,
                fileName: "Commandes.xlsx"
            });

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

Départ: Nouvelle application Fiori requise
                │
                ▼
     ┌──────────────────────┐
     │ L'exigence UI peut-elle│
     │ être réalisée avec des │
     │ templates ?            │
     └─────────┬────────────┘
               │
      ┌────────┴────────┐
      │                 │
      ▼                 ▼
     OUI              NON
      │                 │
      ▼                 ▼
┌───────────────┐  ┌────────────────┐
│ L'application │  │ → FREESTYLE    │
│ nécessite-t-  │  │   FIORI        │
│ elle une      │  └────────────────┘
│ logique       │
│ personnalisée │
│ complexe ?    │
└──────┬────────┘
       │
  ┌────┴────┐
  │         │
  ▼         ▼
 OUI      NON
  │         │
  ▼         ▼
┌─────────────────┐  ┌────────────────────┐
│ La logique peut-│  │ → FIORI ELEMENTS   │
│ elle être       │  │   (Purement        │
│ implémentée en  │  │   déclaratif)      │
│ ABAP (RAP) ?    │  └────────────────────┘
└────────┬────────┘
         │
    ┌────┴────┐
    │         │
    ▼         ▼
   OUI      NON
    │         │
    ▼         ▼
┌──────────────────┐  ┌────────────────────┐
│ → FIORI ELEMENTS │  │ → FREESTYLE FIORI  │
│   avec backend   │  │   ou Hybride       │
│   RAP            │  └────────────────────┘
└──────────────────┘

{
  "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": "Suivi de livraison",
                      "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="Suivi d'envoi"/>

        <!-- Composant de carte personnalisé -->
        <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="Détails de suivi"
                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: Appelé lors du chargement de l'Object Page
        override: {
            onPageReady: function(mParameters) {
                // Initialisation personnalisée
                this._loadDeliveryTracking();
            }
        },

        // Méthode personnalisée pour les détails de suivi
        onShowTrackingDetails: function(oEvent) {
            var oContext = this.base.getView().getBindingContext();
            var sTrackingNumber = oContext.getProperty("TrackingNumber");

            // Ouvrir le dialogue personnalisé
            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() {
            // Appel API personnalisé pour données de suivi
            var oContext = this.base.getView().getBindingContext();
            if (!oContext) return;

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

            // Exemple: API de suivi externe
            fetch("/api/tracking/" + sOrderId)
                .then(function(response) { return response.json(); })
                .then(function(data) {
                    // Mettre à jour le modèle avec les données de suivi
                    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: 'Commande',
    typeNamePlural: 'Commandes',
    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;
}