Active Directory Implementatierung für SAP Fiori

Active Directory Implementierung für SAP Fiori

Hallo und herzlich willkommen zum vierten Teil der Tutorialreihe „SAP Fiori Customization Samples“.  In diesem Video werden wir zeigen, wie man eine benutzerdefinierte Fiori-Kachel für das Fiori Launchpad erstellen kann.

Diese Kachel werden verwendet für die intuitive Anzeige dynamischer Daten, um Informationen auf einen Blick zu liefern, sobald man das Fiori Launchpad öffnet.  Dies ist das erste Video eines zweiteiligen Tutorials und konzentriert sich auf den strukturellen Teil des Prozesses.

Wir werfen zunächst einen kurzen Blick auf die Schritte, denen wir als nächstes folgen werden.

Voraussetzungen

Zuerst werden wir bestimmte Dateien aus dem SAPUI5-Framework sammeln, die uns als Grundlage für die benutzerdefinierte Kachel dienen werden.

Der zweite Schritt besteht darin, die Dateien so anzupassen, dass sie dem gewünschten Ergebnis entsprechen. Anschließend registrieren wir die Application als CHIP und nehmen sie in die Fiori Launchpad Designer-Komponente auf. Gegen Ende dieses Videos werden wir versuchen, die neue Kachel dem Launchpad hinzuzufügen.

Für dieses Tutorial gehen wir davon aus, dass Du Administratorzugriff auf das SAP-System hast, da Du eine SAP-Standardkomponente ändern musst. Außerdem gehen wir davon aus, dass die SAP WebIDE-Landschaft eingerichtet und in Betrieb ist, da wir sie für die Entwicklung und das Deployment verwenden werden. Es können auch andere Methoden eingesetzt werden, wie z.B. das manuelle Hochladen oder die Verwendung der Eclipse-IDE, aber diese Vorgehenweisen werden in diesem Tutorial nicht behandelt.

Leitfaden

Zunächst loggen wir uns in das zu modifizierende SAP-System ein und starten die Transaktion für den Fiori Designer. Dies geschieht über den Transaktionscode /ui2/flpd_CUST.

Sobald der Designer geladen ist, öffnen wir die Entwicklerkonsole mit der F12 Taste und navigieren zur Registerkarte Netzwerk.

Am Ende der URL muss man die Extension sap-ui-debug=true hinzufügen, um damit die UI5-Engine dazu zu bringen, alle Dateien zu laden. Dank der Magie der Videobearbeitung müssen wir hier jetzt nicht die Ladezeit abwarten, aber, das sei gesagt, die Wartezeit ist ziemlich lang.

Nun, da die Dateien geladen wurden, müssen wir sie nach dem Wort „Dynamic“ filtern. Es sollten dann noch drei Dateien in der Liste erscheinen. Speichere den Inhalt der Dateien in einem temporären Ordner mit Deinem bevorzugten Texteditor.

Nachdem Du diese drei Dateien gespeichert hast, klicke auf eine Kachel und warte, bis der nächste Stapel von Dateien komplett geladen ist. Nun solltest Du nach dem Wort „Konfiguration“ filtern und den Speichervorgang für die Dateien configuration.view.xml und configuiration-dbg.controller.js wiederholen.

Nachdem wir die Dateien gespeichert haben, müssen wir ein SAP WebIDE-Projekt anlegen.

Bitte öffne dazu die WebIDE ab und erstelle ein neues Projekt basierend auf der Vorlage. Wähle SAPUI5 Application und gebe die erforderlichen Felder ein. Dies wird das Projekt sein, an dem wir arbeiten werden.

Als Nächstes müssen wir die unnötigen Dateien löschen und die Dateien importieren, die wir zuvor gespeichert haben. Man kann sie als Stapel hochladen, wenn man sie als eine .zip-Datei speichert.

Erstelle einen neuen Ordner innerhalb des Webapp-Ordners und benenne ihn myKpiTile. In diesen Ordner werden wir sowohl die Ansichten als auch die Steuerungsdateien verschieben.

Benenne die App als app._launcher-Datei in kpiLaunchar_dynamic.chip.xml um und bearbeite sie, um den Ansichtspfad und den Namen der benutzerdefinierten Kachel zu ändern.

Setzte den View-Namen auf mykpitile.myTile.view.js und den Titel der Kachel auf „mydynamictile“ und die Beschreibung wird vom Tutorial erstellt.

Nun müssen wir die Ansicht und den Controller umbenennen, damit sie dem neuen Namen, den wir ausgewählt haben, zu entsprechen. Daher werden wir die Ansicht in myTile.view.js umbenennen und der Controller wird myTile.controller.js sein.

Benenne auch den Konfigurations-Controller um und lösche die Debug-Registerkarte im Namen weg.

Wir müssen den Namensraum und den Namen der Ansicht auch in den aktuellen Dateien aktualisieren. Dies kann mit der Such- und Ersetzungsfunktion durch Drücken von Strg+f geschehen. Damit ändern wir den vorherigen Namensraum zu unserem aktuellen Pfad, also myKpiTile und den Namen der View zu myTile. Dies muss auch in der Steuerungsdatei geändert werden und kann auf die gleiche Weise erfolgen.

Um die Anwendung als CHIP zu registrieren, muss man sie als BSP-Applikation im SAP-System bereitstellen. Wie man hier sehen kann, hatte ich einige Probleme bei der Bereitstellung der Anwendung, weil ich vergessen habe, einige unnötige Dateien zu löschen. Achte darauf, dass Du nur die Dateien speicherst, die Du im Projekt benötigst, sonst stürzt es während des Deployments ab.

Wir wechseln nun zur Transaktion se80, um zu überprüfen, ob die Anwendung erfolgreich bereitgestellt wurde. Nachdem wir sichergestellt haben, dass die Bereitstellung erfolgreich war, können wir mit der Registrierung als CHIP fortfahren. Dies geschieht mit dem Transaktionscode /ui2/chip.

Gebe einen Namen ein und erstelle den CHIP. Gebe die URL der BSP-Applikation, den Anzeigenamen und die Beschreibung ein. Da es sich um einen CHIP und nicht um eine normale UI5-Anwendung handelt, vergiss nicht, den Pfad zu kpilauncer_dynamic.chip.xml anzugeben.

Nachdem der CHIP erfolgreich registriert wurde, kannst Du nun fortfahren und den neuen CHIP in die Fiori Launchpad-Designerkomponente aufnehmen. Dies kann durch den Aufruf des CUSTOMIZE_COMPONENT aus dem Transaktionscode se80 oder durch Folgen der in der Beschreibung angegebenen URL geschehen.

Man muss über Administratorrechte verfügen, um die Standardkomponente zu ändern. Wir passen die Komponente chip_catalog_config an und die Konfigurations-ID lautet Fiori Launchpad Katalog.

Wie man sieht, gibt es hier bereits benutzerdefinierte Kacheln, die ich in der Vergangenheit erstellt habe. Hier müssen wir also einen neuen Wert hinzufügen. Sei vorsichtig, da der Wert des Parameters genau einem der vorherigen Einträge entsprechen muss. Wir fügen x-SAP-ui2 hinzu.

Lasst uns noch einmal den Namen des CHIPs überprüfen, den wir erstellt haben, Z_mytuttile. Achtung, es gibt dort keine Leerzeichen. Jetzt können wir es speichern, einem Transport zuordnen und es wird dem System hinzugefügt.

Kehren wir zurück zum Fiori Launchpad-Designer, und versuchen, eine neue Kachel hinzuzufügen. Wie man sieht, ist meine benutzerdefinierte Kachel: mYtutorial TILE nun als Option zum Hinzufügen vorhanden. Leider gibt es in diesem Moment noch nichts anderes als die standardmäßige dynamische Kachel, aber das werden wir im zweiten Teil dieses Tutorials ändern.

Kurze Zusammenfassung

Wir hoffen, dass dieser erste Teil des Tutorials hilfreich für Dich war. Wenn Du Fragen dazu hast, zögere nicht, uns zu kontaktieren. Wir werden sie Dir gerne beantworten. Verpasse auch nicht den nächsten Teil, damit Du Dir einen Überblick über den kompletten Prozess verschaffen kannst!

Wie am Anfang des Beitrags erwähnt, ist dieses Video der vierte Teil der Tutorialreihe SAP Fiori Customization Samples.

Der erste Teil zeigt Dir, wie Du ein SAP Fiori Launchpad auf der SAP Cloud-Plattform erstellst und Apps auf dem Fiori Launchpad hinzufügst.

Der zweite Teil erklärt Dir, wie Du Dein Fiori Launchpad für Dich anpassen kannst.

Der dritte Teil veranschaulicht, wie sich ein Single Sign-On zwischen einem Fiori Launchpad, das auf einem BW-System bereitgestellt wird, und SAP Business Objects konfigurieren lässt.

 

Autor dieses Beitrags
Andrei Ghiura Associate
Tel.: +49 (0) 7031 714 660 0
E-Mail: cluj@inspiricon.de