Eigenes Stylesheet verwenden (neues Design) 

Verwendung

Wenn Sie das optische Erscheinungsbild der Web Interfaces Ihren eigenen Vorstellungen anpassen möchten, können Sie auf der Grundlage der ausgelieferten SAP-Themes ein eigenes Theme erstellen.

Wir empfehlen, zunächst Kopien der verwendeten SAP-Standardstylesheets zu erstellen, diese dem Web Interface Builder bekannt zu machen und schließlich den eigenen Vorstellungen entsprechend anzupassen.

Beachten Sie, dass diese Vorgehensweise nicht angewendet werden kann, wenn Sie die Stylesheets des SAP Enterprise Portals verwenden. Diese können Sie im Theme-Editor des Portals bearbeiten.

Voraussetzungen

Sie verwenden das neue Design (siehe Designvorgaben für Web-Interfaces).

Aktivitäten

Das folgende Beispiel geht von der Annahme aus, dass Sie die vom Web Interface Builder verwendeten SAP-Standardstylesheets als Grundlage Ihrer eigenen Anpassungen verwenden möchten. Dazu gehören stets ein SAP-Theme, das für die Formatierung sämtlicher Komponenten mit Ausnahme des Planungslayouts verwendet wird, sowie ein bzw. mehrere Web-Browser-spezifische SAP-BI-Stylesheets, die für die Formatierung des Planungslayouts verwendet werden.

In diesem Beispiel verwenden wir als Vorlage folgende SAP-Standardstylesheets:

■      das SAP-Theme sap_standard

■      das diesem SAP-Theme entsprechende SAP-BI-Stylesheet BWReports_ie6.css

SAP-Theme kopieren

...

       1.      Rufen Sie im ABAP-Editor (SE38) das Programm BSP_UPDATE_MIMEREPOS auf, und wählen Sie  Ausführen.

Legen Sie die folgenden Einstellungen fest:

                            a.      Geben Sie den MIME-Repository-Pfad ein.

In diesem Beispiel verwenden wir:

/SAP/PUBLIC/BC/UR/Design2002/themes/sap_standard.

Beachten Sie, dass diese Pfadangabe case-sensitive ist.

                            b.      Wählen Sie die Option Export to disc.

       2.      Wählen Sie  Ausführen. Sie gelangen auf das Dialogfenster zur Auswahl eines Zielverzeichnisses auf Ihrem lokalen PC.

Beachten Sie, dass dieser Ordner leer sein muss.

Nachdem Sie die Wahl des Zielverzeichnisses bestätigt haben, beginnt der Export. Der Export kann einige Minuten in Anspruch nehmen. Überprüfen Sie den Inhalt des Zielordners, um den Fortschritt zu verfolgen.

       3.      Rufen Sie das Programm BSP_UPDATE_MIMEREPOS auf, und wählen Sie  Ausführen.

Legen Sie die folgenden Einstellungen fest:

                            a.      Geben Sie den Pfad zum Ziel-MIME-Repository ein.

In diesem Beispiel verwenden wir:

/SAP/BC/BSP/SAP/PUBLIC/CUSTOMTHEME.

                            b.      Wählen Sie die Option Import from disc.

       4.      Wählen Sie  Ausführen. Sie gelangen auf das Dialogfenster zur Auswahl eines Wurzelverzeichnisses auf Ihrem lokalen PC.

Nachdem Sie die Wahl des Wurzelverzeichnisses bestätigt haben, beginnt der Import. Der Import kann einige Minuten in Anspruch nehmen.

SAP-BI-Stylesheet kopieren

       5.      Öffnen Sie im Object Navigator (Transaktion SE80) das MIME Repository, und navigieren Sie zu dem entsprechenden SAP-BI-Stylesheet.

In diesem Beispiel verwenden wir:

/SAP/BW/BEx/StyleSheets/BWReports_ie6.css.

Wählen Sie im Kontextmenü des Stylesheets Upload/Download ® Download. Sie gelangen auf das Dialogfenster zur Auswahl eines Zielverzeichnisses auf Ihrem lokalen PC. Nachdem Sie die Wahl des Zielverzeichnisses bestätigt haben, beginnt der Export.

Wiederholen Sie diesen Schritt für alle Web-Browser-Typen, die Sie unterstützen möchten. Die letzten Zeichen des Stylesheetnamens dienen der Kennzeichnung des Typs.

ie6 = Microsoft Internet Explorer 6

n6x = Netscape Communicator 6

Das Stylesheet ohne eine Web-Browser-spezifische Namensendung wird standardmäßig für die übrigen Web Browser verwendet.

       6.      Öffnen Sie im Object Navigator (Transaktion SE80) das MIME Repository, und navigieren Sie zu dem Verzeichnis für Ihr kundenspezifisches Theme.

In diesem Beispiel haben wir ein Verzeichnis customtheme unter dem folgenden Pfad angelegt:

/SAP/BC/BSP/SAP/public/customtheme

Wählen Sie im Kontextmenü des Verzeichnisses Importieren MIME-Objekte. Sie gelangen auf das Dialogfenster zur Auswahl einer Datei. Wählen Sie das exportierte, von Ihnen lokal angepasste Stylesheet. Nachdem Sie Open gewählt haben, beginnt der Import.

Prüfen Sie, dass der Name des Stylesheets genau dem folgenden Beispiel entspricht: BWReport_ie6.css.

Einbinden des eigenen Themes in den Web Interface Builder:

       7.      Rufen Sie im Web Interface Builder Ihr Web Interface auf.

Wählen Sie im Kontextmenü des Wurzelknotens Eigenschaften ändern. Geben Sie im Feld Theme Pfad den Pfad zum Verzeichnis für die kundeneigene Theme-Anpassung ein (in diesem Beispiel also /SAP/BC/BSP/SAP/public/customtheme).

       8.      Wählen Sie , um das Web Interface zu generieren.

Test des Ergebnisses

       9.      Führen Sie das Web Interface aus. Sie sollten dasselbe optische Erscheinungsbild sehen wie zuvor; diesmal wird allerdings die Kopie genutzt.

   10.      Sie können das Ergebnis überprüfen, indem Sie den Quelltext anzeigen lassen und nach den Namen der CSS-Klassen suchen. Diese sollten alle den Pfad zu Ihrem Verzeichnis für die kundeneigene Theme-Anpassung enthalten (in diesem Beispiel also .../customtheme).

Die Wertehilfe zum Feld Theme Pfad wird diesen Pfad allerding nicht anzeigen.