SAPUI5 Advanced

FPM Übung: Erweitern der Oberfläche

Anlegen einer neuen FE Anwendung und erweitern mit einem neuen Abschnitt

Brandeis Consulting & Cadao

Anforderung

Füge in eine Fiori Elements Anwendung einen neuen Freestyle-Abschnitt in die ObjectPage der User ein:

Brandeis Consulting & Cadao

Schritt 1: Anlegen einer neuen FE Anwendung

  • Im BAS den aktuellen Ordner oder Workspace schliessen
  • File --> New Project from Template
  • Template Selection:
    • SAP Fiori Application dann
    • List Report 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
  • Entity Selection
    • Main entity: Users
    • Table type: Resonsive

Brandeis Consulting & Cadao

Schritt 2: Testen der Anwendung

Start der Anwendung, Navigation:

  • Suche ==> Liste wird angezeigt
  • Auswahl eines Benutzers ==> Navigation auf die Object Page des Benutzers
  • Auswahl einer Aufgabe ==> Navigation auf die Object Page der Aufgabe

Brandeis Consulting & Cadao

Schritt 3: Anlegen eines neuen Fragments (1/2)

  • Anlegen eines neuen Ordners: webapp/ext/view
  • Anlegen eines neuen Fragments in diesem Ordner: NewSection.fragment.xml
<core:FragmentDefinition
   xmlns="sap.m"
   xmlns:core="sap.ui.core">
   <Text id="_IDGenText1" text="Hallo" />
   <Text id="_IDGenText2" text="{Email}" />
</core:FragmentDefinition>
Brandeis Consulting & Cadao

Schritt 2: Section in der manifest.json registrieren

Position zum Einfügen

{ "sap.ui5": { 
     "routing": { 
         "targets": {  
             "UsersObjectPage": {
                "options": {  
                   "settings": {

Einzufügen

"content": {
  "body": {
    "sections": {
      "customSection": {
        "template": "myns.fpm4fe.ext.view.NewSection",
        "title": "{i18n>customSection}",
        "position": {
          "placement": "Before",
          "anchor": "TasksToDo"
        }
      }
    }
  }
},

Ergebnis

"UsersObjectPage": {
          "type": "Component",
          "id": "UsersObjectPage",
          "name": "sap.fe.templates.ObjectPage",
          "options": {
            "settings": {
              "content": {
                "body": {
                  "sections": {
                    "customSection": {
                      "template": "myns.fpm4fe.ext.view.NewSection",
                      "title": "{i18n>customSection}",
                      "position": {
                        "placement": "Before",
                        "anchor": "TasksToDo"
                      }
                    }
                  }
                }
              },
              "editableHeaderContent": false,
              "contextPath": "/Users",
              "navigation": {
                "_TasksToDo": {
                  "detail": {
                    "route": "TasksObjectPage"
                  }
...
Brandeis Consulting & Cadao

Troubleshooting

  • Ist die Datei manifest.json syntaktisch korrekt?
    Ohne rote Markierungen? Das korrekte Einfügen ist herausfordernd!
  • Stimmt der Pfad für das Template?
    Wenn die App anders heisst oder der Namespace anders ist, dann muss der entsprechend angepasst werden.
  • Ist die Position in der manifest.json korrekt?
Brandeis Consulting & Cadao

Text einfügen

In der Datei webapp/i18n/i18n.properties noch eine Zeile einfügen:

customSection=Mein neuer Abschnitt

Brandeis Consulting & Cadao

Für Fortgeschrittene: Noch einen Abschnitt für die Tasks hinzufügen

Brandeis Consulting & Cadao