Cloud Platform Portal Fiori Launchpad Customization

Herzlich willkommen zum zweiten Teil der Tutorialreihe SAP Fiori Customization Samples. In diesem Video zeigen wir Dir, wie Du Dein Fiori Launchpad für Dich anpassen kannst. Lass uns anfangen!

Im Cockpit der SAP Cloud Platform kann man das Fiori Launchpad derart anpassen, dass es dem Endbenutzer den Eindruck vermittelt, er verwende ein unternehmenseigenes Portal. Ziel dieses Blogbeitrags ist es, dass Du am Ende selbst – vorausgesetzt, notwendige Berechtigungen sind vorhanden – das Fiori Launchpad z.B. entsprechend den CI/CD-Vorgaben des Unternehmens anpassen und bereitstellen kannst.

Wenn Du in das SAP Cloud Platform Cockpit eingeloggt bist, bietet es Dir diverse Werkzeuge und Lösungen für die Personalisierung des Fiori Launchpads an.

Im ersten Schritt schaust Du Dir den Portal-Service an, den Du für die Anpassungen benötigst.

1. Du kannst auf den Link „Services“ im SAP Cloud Platform Cockpit zugreifen, wie in Abb. 1. zu sehen ist:

SAP Cloud Platform Overview

Abb. 1: Du kannst den Servicebereich im Seitenmenü auf der linken Seite finden.

Im “Services”-Bereich gibt es den „Portal Service“, der aktiviert sein muss, wie in Abb. 2. zu sehen:

SAP Cloud Platform

Abb. 2.: Du kannst hier den Portal-Service mit dem „Aktiviert (Enabled)“-Label sehen.

Im Abschnitt „Übersicht“ unter dem Bereich „Portal“ findest Du eine kurze Beschreibung des Services und eine Reihe von Aktionen, die wir ausführen können. Um auf das Launchpad und das Anpassungswerkzeug zuzugreifen, wählst Du die Aktion „Gehe zu Service (Go to Service)“ aus, wie in Abb. 3 gezeigt:

SAP Cloud Platform Overview

Abb. 3.: Überblick über Portal-Service und Aktionsleiste.

Der Link „Gehe zu Service“ öffnet das Cloud Plattform Portal(=CPP). Hier im Menü kannst Du durch Klicken auf die Schaltfläche „Site Directory“, wie in Abb. 4 zu sehen, Dir alle bereits existierenden Sites und Launchpads anschauen oder neue hinzufügen:

Site Directory on SAP Cloud Platform

Abb. 4.: Hauptmenü mit Schaltfläche “Site-Verzeichnis (Site Directory)“.

Wenn Du mit dem CPP noch nicht vertraut bist oder noch kein Launchpads erstellt hast, musst Du zuerst ein Launchpad erstellen, damit Du es im Anschluss anpassen kannst (siehe Abb. 5):

SAP Cloud Launchpad

Abb. 5.: Der Pfeil zeigt die Schaltfläche an, um ein neues Launchpad zu erstellen.

Wenn bereits ein Launchpad vorhanden ist, wählst Du dasjenige aus dem „Site Directory“ durch Anklicken aus, das Du personalisieren willst. In meinem Beispiel wähle ich das Launchpad „GPE_DEMO“ aus, um es später zu bearbeiten. Durch das Anklicken öffnet sich das „Fiori Configuration Cockpit“ und zeigt die Informationen zu meinem „GPE_DEMO“-Launchpad an, wie in Abb. 6 zu sehen ist:

Fiori Configuration Cockpit

Abb.6.: Das “Configuration Cockpit” für ein Launchpad im CPP.

Um das ausgewählte Launchpad anzupassen, musst Du im Cockpit „Dienste und Werkzeuge (Services and Tools)“ aus dem Menü aufrufen, wie in Abb. 7 zu sehen ist:

Fiori Cockpit Theme Configuration

Abb. 7.: Schaltfläche für den Zugriff auf das Bearbeitungswerkzeug.

Unter „Dienste und Werkzeuge (Services and Tools)“ kannst Du anschließend den „UI Theme Designer“ aufrufen, wie in Abb. 8. gezeigt. Wenn Du mit dem Theme Designer bisher noch nicht gearbeitet hast, wird dort entsprechend noch kein „Theme“ zur Auswahl angeboten.

Fiori Theme Designer

Fig. 8.: Hier zeigt der „Theme Designer“ einige bereits erstellte Themes an.

Du kannst im „Theme Designer“ neue personalisierte „Themes“ erstellen, indem Du nachfolgende Schritte ausführst:

  1. Klicke auf „Erstellen neues Theme (Create New Theme)“ und wähle ein Basistheme aus (in meinem Beispiel wähle ich „SAP Belize“):

Fiori Belize Theme

2. Füge eine ID und einen Titel hinzu:

Configuration of Belize Theme

3. Füge die URL und einen Anzeige-Namen von einem Launchpad ein (URL gehört zum Launchpad des CPP)

Fiori Launchpad

4. Der Launchpad-Editor ist jetzt geöffnet und Du kannst die verschiedenen Teilbereiche bearbeiten:

Fiori Launchpad

Mit dem Schnellbearbeitungswerkzeug habe ich ein paar grundlegende Elemente aus dem Launchpad-Theme geändert:

  1.  Firmenlogo

Fiori Launchpad Customization

2. Hintergrund und Textfarbe:

Fiori Launchpad: colors customization

3. Die Ansicht der „Titel“:

Fiori Launchpad: Title Customization

Am Ende haben wir nun ein neues individuelles Theme für unser Launchpad erstellt.

Im folgenden und letzten Abschnitt zeige ich Dir, wie das Thema gespeichert und veröffentlicht werden kann.

Dazu wählst Du in der oberen linken Ecke des Themendesigners einfach „Speichern und Veröffentlichen (Save and Publish)“ aus.

Nachdem dies erledigt ist, gehst Du zurück zum „Fiori Configuration Cockpit“ zum „Services and Tools“-Bereich und wählst dort den Unterpunkt „“Theme Manager“ aus. Hier findest Du Dein neu erstelltes Theme, das Du nun noch Deinem Launchpad zuweisen musst.

Abb. 9 zeigt Dir den Theme-Manager mit Deinem selbsterstellten Theme:

Fiori Launchpad: new theme costumization

Abb. 9.: Du kannst alle erstellten Themes im „Theme Manager“ sehen.

Um das neue Theme Deinem Launchpad zuzuweisen, wählst Du in den Launchpad-Einstellungen im Abschnitt „Darstellung(Appearance)“ Dein neues Design aus (siehe Abb. 10):

SAP Fiori Launchpad: Theme Customization

Ab. 10.: Einstellungen im Launchpad zum Ändern des Themas.

Nachdem die Änderungen angewendet wurden, können wir das neue Launchpad-Thema beim Aufruf unseres Lanchpads sehen (siehe Abb. 11):

Fiori Launchpad: new theme

Abb. 11.: Das Launchpad mit dem neuen Theme.

Jetzt, wo Du weißt , wie Du Dein Fiori Launchpad anpasst, kannst Du verschiedene Designs ausprobieren!

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

Den ersten Teil der Tutorials  findest Du hier.  Dieses Video zeigt Dir, wie Du ein SAP Fiori Launchpad auf der SAP Cloud-Plattform erstellst und Apps auf dem Fiori Launchpad hinzufügst.

Der dritte Teil veranschaulicht, wie sich Single-Sign-On zwischen einem SAP BW-basierten Fiori Launchpad und SAP Business Objects konfigurieren lässt.

Der vierte Teil (Englische Version) zeigt Dir, wie man eine benutzerdefinierte Fiori-Kachel für das Fiori Launchpad erstellen kann.

Verpasse nicht die letzte Episode der Tutorialreihe „SAP Fiori Customization Samples“.

Solltest Du Fragen zu diesem Tutorial haben, zögere nicht, mich einfach zu kontaktieren. Ich beantworte Dir gerne Deine Fragen!

Quellenangabe der Bilder: Inspiricon AG

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