SAPUI5 Advanced

FPM Übung: Verwendung von Building Blocks

Nutzung von Building Blocks

Brandeis Consulting & Cadao

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.

Brandeis Consulting & Cadao

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: K1X
    • Service: ZBC_SB_TASKS_V4 > ZBC_SD_TASKS (0001) - OData V4

Brandeis Consulting & Cadao

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>
Brandeis Consulting & Cadao

Features testen

Brandeis Consulting & Cadao

Demo: Fiori Guided Development

Brandeis Consulting & Cadao

Demo: Einfügen eines Formulars

Brandeis Consulting & Cadao