SAPUI5 Advanced

FPM Übung: Verwendung von Building Blocks

Nutzung von Building Blocks

Anforderung

Wir wollen eine Seite bauen, die eine Tabelle anzeigt. Oberhalb soll eine Filter-Bar sein. Beides soll aus dem Backend heraus mit Annotationen gesteuert werden können.

Umsetzung mit Building Blocks

Dieses Mal soll die Anforderung nicht mit einem fertigen Floorplan von Fiori Elements umgesetzt werden. Für die Nutzung der FPM Building Blocks ist aber trotzdem eine Fiori Elements Anwendung erforderlich.

Die Custom Page erzeugt uns eine leere Freestyle Seite innerhalb einer FE Anwendung.

Anlegen einer neuen Fiori App

  • Im BAS den aktuellen Ordner oder Workspace schliessen
  • File --> New Project from Template
  • Template Selection:
    • SAP Fiori Application dann
    • Custom Page
  • Data Source and Service Selection:
    • Data Source: Connect to a System
    • System: SDX
    • Service: ZSB_USR21_O4

Einfügen der beiden Building Blocks in ext/main/Main.view.xml

  • Der Namensraum xmlns:macros="sap.fe.macros" muss definiert werden
  • Die beiden Komponenten
    • FilterBar und
    • Table
      werden eingefügt
  • Die Verbindung der Beiden erfolgt über das Element filterBar="FilterBar" der Tabelle
<content>
<macros:FilterBar
    id="FilterBar"
    metaPath="@com.sap.vocabularies.UI.v1.SelectionFields"
/>

<macros:Table
    id="Table"
    metaPath="/Users/@com.sap.vocabularies.UI.v1.LineItem"
    headerVisible="true"
    isSearchable="true"
    personalization="Sort,Column,Filter"
    selectionMode="Single"
    type="ResponsiveTable"
    variantManagement="None"
    filterBar="FilterBar"
    enableExport="true"
/>
</content>

Features testen

Demo: Fiori Guided Development