SAPUI5 Advanced

Das Flexible Programming Model (FPM )

Brandeis Consulting & Cadao

Was ist das FPM?

Quelle: SAP, FPM Explorer

Das Flexible Programming Model

  • basiert auf Fiori Elements und damit auf OData Services V4
  • kombiniert die Flexibilität von Freestyle SAPUI5 mit der Effizienz von Fiori Elements
  • ermöglicht eine einfach Entwicklung und Erweiterung von Fiori Elements Anwendungen.
  • liefert komplexe Komponenten (aka. Building Blocks), die aber auch in SAPUI5 Anwendungen eingebettet werden können.
Brandeis Consulting & Cadao

FPM Intro

Use-Cases

  • Bestehende Fiori Elements Anwendung erweitern um Freestyle Elemente
  • Neue Anwendungen Freestyle entwickeln und Building Blocks von FPM einbinden

Voraussetzungen

  • Verwendung von OData V4
  • Eine Fiori Elements Anwendung oder eine SAPUI5 Anwendung, die fiorisiert wurde
  • Wissen, wie SAPUI5 Anwendungen aufgebaut sind
    • Controller
    • Views/Fragmente
    • Oberflächenelemente
    • Binding
Brandeis Consulting & Cadao

Dokumentation des Flexible Programming Model

Flexible Programming Model Explorer

Flexible Programming Model Explorer
Viele Beispiele für alle Erweiterungsmöglichkeiten und Building Blocks mit Live-Reload zum Experimentieren.

API Dokumentation

API Dokumentation
In der normalen SAPUI5 Dokumentation, für Referenzzwecke. Nicht separat abgegrenzt. Sucher über Paketstruktur.

Dokumentation

Dokumentation
In der SAPUI5 Doku im Bereich Fiori Elements, gemischt mit FE-Inhalten.

Teil einer SAP Learning Journey

Getting an Overview of the Flexible Programming Model
Ein Tutorial, basierend auf einem CAP Beispiel. Kleine Übungen, z.B. für die Themen:

  • Extension Points
  • Building Blocks
  • Controller Extensions
Brandeis Consulting & Cadao

Erweiterungsmöglichkeiten

Extension Points

Zusätzliche Oberflächenelemente auf der Oberfläche (fast) beliebig platzieren

  • Abschnitte
  • Unter-Abschnitte
  • Seiten
  • Spalten in Tabellen
  • Header-Informationen

Building Blocks

Hochwertige Standard-Komponenten FE-Features wie z.B.

  • Draft-Unterstützung
  • Side-Effects

Verfügbare Komponenten:

  • Table
  • Filter Bar
  • Form
  • Form Element
  • Paginatoren
  • Micro Chart
  • Chart

Controller Extensions (CE)

Ähnlich den Zeitpunkten der View-Cluster in der GUI. Zu definierten Zeitpunkten kann eigener Code ausgeführt werden. Beispielsweise beim

  • Bearbeiten
    • Vor dem Wechsel in den Edit-Modus
    • Vor und nach dem Speichern

Das ist nur ein Bruchteil der Stellen, wo eine CE möglich ist.

Brandeis Consulting & Cadao

Vorgehen

Manuelle Erweiterung

  • Zusätzliche Objekte anlegen
    • Views/Fragmente/Controller
    • Einbinden in der Datei manifest.json

Mit Guided Development

  • Aufrufen von Fiori: Open Guided Development

==> Schnell, aber intransparent
==> nicht gut zum Lernen

Brandeis Consulting & Cadao

Einbinden von Oberflächenänderungen in die manifest.json

In den Routing-Targets werden im Fiori Elements die Oberflächen definiert. Hier hängen wir uns rein:

"sap.ui5": {
    "targets": {

"UsersList": {
  "type": "Component",
  "id": "UsersList",
  "name": "sap.fe.templates.ListReport",
  "options": {
    "settings": {
      "contextPath": "/Users",
      "variantManagement": "Page",
      "navigation": {
        "Users": {
          "detail": {
            "route": "UsersObjectPage"
          }
        }
      },
      "controlConfiguration": {
        "@com.sap.vocabularies.UI.v1.LineItem": {
          "tableSettings": {
            "type": "ResponsiveTable"
          }
        }
      }
    }
  }
},

"UsersObjectPage": {
  "type": "Component",
  "id": "UsersObjectPage",
  "name": "sap.fe.templates.ObjectPage",
  "options": {
    "settings": {
      "editableHeaderContent": false,
      "contextPath": "/Users",
      "navigation": {
        "_TasksToDo": {
          "detail": {
            "route": "TasksObjectPage"
          }
        }
      }
    }
  }
},

"TasksObjectPage": {
  "type": "Component",
  "id": "TasksObjectPage",
  "name": "sap.fe.templates.ObjectPage",
  "options": {
    "settings": {
      "editableHeaderContent": false,
      "contextPath": "/Users/_TasksToDo"
    }
  }
}
Brandeis Consulting & Cadao

Editieren der manifest.json

Herausforderungen

  • Die Schachtelung der Objekte muss korrekt sein. Es gibt keine Prüfung. Wenn etwas falsch ist, dann funktioniert es halt nicht. Typos erkennt man kaum.
  • Manche Elemente kann man nicht 1:1 aus der Doku oder von Beispielen übernehmen. Teilweise müssen die eigenen OData-Entitäten oder Views verlinkt werden.
  • Die Beispiele von der SAP sind schlecht, weil viele App-Spezifischen Dinge so klingen, als ob sie eine Standard-Bibliothek sind, z.B. sap.fe.core.fpmExplorer.customSubSectionContent.CustomSubSection2
Brandeis Consulting & Cadao

Guided Development

  • Für Einsteiger unklar, was gemacht wird bzw. auf was sich das bezieht
  • Viel Text, den man auch lesen muss!
  • Nicht immer fehlerfrei. Optionen, die eigentlich funktionieren, werden nicht angeboten.

Man muss wissen, was gemacht werden soll und ggf. manuell eingreifen können. Dann aber sehr hilfreich.

Brandeis Consulting & Cadao

Flexible Programming Model Explorer

==> https://sapui5.hana.ondemand.com/test-resources/sap/fe/core/fpmExplorer/index.html#/overview/introduction

Demo: Was kann das Tool

Brandeis Consulting & Cadao