Schulung

Fiori Elements Advanced

Custom Columns

Eigene Spalten hinzufügen

Anforderung

  • Es gibt Fälle, in denen man Funktionen wirklich nur im Frontend bereitstellen will,
    da diese auch nur für die Anzeige relevant sind.
  • Ein Beispiel, was jeder ALV-Entwickler kennt: Ampeln in allen möglichen Farben
    und Formen und Icons
  • Offizielle Dokumentation

Hinweis

  • Es gibt auch etliche Möglichkeiten dies über das Backend zu steuern, wie Virtual
    Elements, aber das ist ehrlich gesagt nicht immer "Sinn und Zweck" der Übung

Öffnen der Page Map

  • Auf dem Ordner webapp wird zu erst aus über das Kontextmenü Show Page Map selektiert.

Anpassen der Page Map

  • Per Klick auf den Stift wird die zu bearbeitenden Page Map editiert

Spalte hinzufügen (1)

  • Unter Table wird bei Columns das Plus-Icon geklickt

Custom Column Selektieren

  • Hier wird dann Custom Column selektiert

Custom Column anlegen

  • Nun wird im Popup alles nötige an Informationen hinterlegt

Erfolgte Änderungen

  • Es wird ein Fragment erzeugt
  • Es wird das Fragment in der manifest.json eingetragen, unter den Settings der MovieList

Erfolgte Änderungen (2)

    "controlConfiguration": {
        "@com.sap.vocabularies.UI.v1.LineItem": {
            "tableSettings": {
                "type": "ResponsiveTable"
            },
            "columns": {
                "CategoryIcon": {
                    "header": "CategoryIcon",
                    "width": "50px",
                    "position": {
                        "anchor": "DataField::Category",
                        "placement": "After"
                    },
                    "template": "com.demo.movie00.ext.fragment.CategoryIcon"
                }
            }
        }
    }

Pfad des Templates

  • Der Pfad ergibt sich aus der App-Id, welche aus Namespace und Module-Name erstellt wird
  • <application_namespace>.<module_name>
  • danach kommt (fast) immer ext.fragment gefolgt vom Namen der neuen Spalte

Fragment definieren

Das Standard-Fragment wird durch dieses ersetzt:

<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m">	
	<VBox class="sapUiSmallMargin" id="idVBoxCategoryIcon"
		core:require="{handler: 'com/demo/movie00/ext/fragment/formatter'}" >
		<core:Icon id="idCategoryIcon" 						
			size="1.5em"						
			src="{ path: 'Category', formatter: 'handler.CategoryIcon' }"	
		></core:Icon>
	</VBox>	
</core:FragmentDefinition>

In diesem Fragment, wird der Inhalt für die Zelle definiert.

  • Als Rahmen wird eine VBox erstellt, welche einen handler instatiiert
  • Danach kommt ein Icon, welches als src einen Formatter verwendet
  • dieser bekommt als path die Category der aktuellen Zeile
  • ...und ruft dann im Handler die Funktion CategoryIcon auf

Formatter erstellen

  • in den gleichen Ordner wir das Fragment kommt eine Datei formatter.js
  • Das formatter wird oben unter dem Handler im core:require angegeben
  • gefüllt wird es mit diesem Coding
sap.ui.define([ ], function(MessageToast) {
    'use strict';

    return {       

        CategoryIcon: function( status ) {            
            switch (status) {
                case '':
                case "ACTION":
                    return 'sap-icon://travel-itinerary';
                case "COMEDY":
                    return 'sap-icon://umbrella';
                default:
                    return 'sap-icon://signature';
            }             
        }
    }
})