UI5: Route und Variabeln

Navigation in Views und die Übergabe von Parametern. Drei einfache Wege (von vielen) für verschiedene Szenarien.

Eingrenzende Filterung oder Bindung in Listen und Tabellen sind häufige Szenarien die in UI5 Anwendungen. Wie kann das realisiert werden, besteht die Anwendung aus mehreren Views?

Eine Möglichkeit ist das speichern von Daten im Session Storage – aus Sicherheitsgründen eine nicht gern realisierte Lösung. Im Controller lassen sich Daten mit „sessionStorage.setItem(„Variable“, „Wert“);“ speichern und an anderer Stelle oder anderem Controller mit „var Variable2 = sessionStorage.getItem(„Variable“);“ gelesen werden.

Eine bessere Lösung ist das deklarieren von globalen Variabeln. Im Controller, ausserhalb einer Funktion, simpel „var Variable;“ vereinbaren. Nach Aufruf des Controllers ist die Variable global verfügbar.

Von SAP favorisiert, ist das arbeiten mit Routing und Targets. Werte werden mit dem Aufruf eines Controllers über das Routing „mitgegeben“. So kann im aufgerufenen View Daten nach Selektion durch Binding oder Filter eingeschränkt dargestellt werden.

Im View 1 (Link zum Beispiel) wählen wir einen Kunden aus, nach dessen Kundennummer (description) im View2 die in Relation stehende Daten gefiltert darsgestellt werden.

Im Controller wird Wert aus dem gewählten Listeneintrag gelesen

NavTo lädt entsprechenden Controller. Das geschieht über die im manifest.json vereinbarten Router und Targets:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
"routes": [
            {
                ...........................
            },
            {
                "name": "kunde",
                "pattern": "kunde",
                "target": [
                    "kunde"
                ]
            },
            {
                "name": "bst",
                "pattern": "bst",
                "target": [
                    "bst"
                ]
            },
            {
                "name": "bst",
                "pattern": "bst/description/{description}",
                "target": [
                    "bst"
                ]
            },              
            {
                "name": "cam",
                "pattern": "cam",
                "target": [
                    "cam"
                ]
            },
            {
                "name": "cam",
                "pattern": "cam/description/{description}",
                "target": [
                    "cam"
                ]
            }               
        ],
        "targets": {
            ..................................
            },
            "kunde": {
                "viewType": "XML",
                "viewName": "kunde"
            },
            "bst": {
                "viewType": "XML",
                "viewName": "bst"
            },
            "cam": {
                "viewType": "XML",
                "viewName": "cam"
            }

Es ist zu erkennen, wie die Variable „description“ über den Router im manifest quasi über die URL weiter gegeben wird. Wird der Controller des Views „bst“ aufgerufen wird, liest die Funktion „onInit“ den übergbenen Wert.

OnInit ruft _onRouteMatched auf, wenn Daten übergeben wurden
mit dem übergebenden Argument, wird ein Filter gesetzt

Wird im zweiten View, durch Klick auf einen Listeneintrag, weiter selektiert, muss die Route und das Target ebenfalls deklariert sein.

Weiter Selektion läuft nach dem selben Muster ab

In dem Beispiel navigieren wir nur durch drei Views. Die Möglichkeiten der Selektion sind natürlich frei verwendbar und zu kombinieren.