Um einem Anwender eine nahtlose Integration zwischen verschiedenen Fiori Anwendungen im Launchpad zu bieten, ist eine App to App Navigation zwischen den Fiori Anwendungen sehr wichtig. Wie ihr gleich sehen werdet, ist das bei neu erstellten UI5 Fiori Anwendungen oder mit Hilfe von CDS gar nicht so schwierig.
Semantisches Objekt, Aktion und Parameter
Ein semantisches Objekt ist in der Regel ein Business Objekt wie z.B. BusinessPartner oder PurchaseOrder. Die Action ist das, was man mit dem Objekt machen kann. Z.B. Approve, Change oder Change. Optional könne Parameter angegeben werden welche eine Objektinstanz (Partner ID oder Product-ID) spezifizieren. Je nach Anwendung wird dann direkt die gewünschte Objektinstanz aufgemacht. Soweit die notwendige Theorie.
UI5 – Service CrossApplicationNavigation
Grundsätzlich wird dafür das Service CrossApplicationNavigation verwendet. Einen Zugriff auf das Service bekommt man wie folgt:
|
1 |
this.oCrossAppNav = sap.ushell.Container.getService("CrossApplicationNavigation"); |
UI5 – Direkte Navigation mit semantischem Objekt, Aktion und Parameter
Mit der Methode toExternal wird die Navigation direkt ausgelöst. In target sind das semantische Objekt und optional die Aktion anzugeben. Und in params kann man ebenfalls optional eine Objektinstanz angeben.
Im Nachfolgenden Beispiel wird das semantische Objekt EPMPurchaseOrder mit der Aktion approve und dem optionalen Parameter PurchaseOrder = 300001993 verwendet.
|
1 2 3 4 |
this.oCrossAppNav.toExternal({ target : { semanticObject : "EPMPurchaseOrder", action : "approve" }, params : { "PurchaseOrder" : [ "300001993" ] } }); |
Wenn zu einem semantischen Objekt mehrere Anwendungen definiert sind und keine Aktion mitgegeben wurde, bekommt der Anwender ein Popup mit einer Auswahlmöglichkeit der Target-Anwendungen.
Nachfolgendes Beispiel zeigt, wie man zur Launchpad Startpage navigiert.
|
1 2 3 |
this.oCrossAppNav.toExternal({ target : { shellHash : "#" } }); |
UI5 – Erzeugung Link ohne direkte Navigation
Es kann auch die Methode hrefForExternal verwendet werden. Prinzipiell hat die Methode die gleichen Eigenschaften wie toExternal – jedoch wird nicht direkt in die Anwendung navigiert. Stattdessen erhält man einen generierten Link.
|
1 2 3 4 |
var hrefPurchaseOrder = this.oCrossAppNav.hrefForExternal({ target : { semanticObject : "EPMPurchaseOrder", action : "approve" }, params : { "PurchaseOrder" : [ "300001993" ] } }); |
UI5 – Erzeugung Link mit einem shell hash
Möglicherweise bekommt man die Link-Informationen von einem Backend-System. In dem Fall kann man die Navigations-Informationen auch wie folgt angeben.
|
1 2 3 |
var hrefPurchaseOrder = this.oCrossAppNav.hrefForExternal({ target : { shellHash : "EPMPurchaseOrder-approve?PurchaseOrder=300001993" } }); |
CDS Annotations
Eine App to App Navigation kann auch durch CDS Annotation @Consumption.semanticObject definiert werden. Dadurch wird dann in Fiori Elements Anwendungen oder in UI5 Anwendungen welche Smart Controls einsetzen automatisch die App to App Navigation angeboten.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
... @UI.lineItem: [ { position: 10, label: 'Purchase Order'}, { type: #FOR_INTENT_BASED_NAVIGATION, semanticObjectAction: 'approve' } ] PurchaseOrder, ... |