Screen Layout einbauen

Für den Einsatz des Screen-Layouts ist empfehlenswert, einen mittels Transaktion /s10/util generierten Screen zu verwenden, da der nachträgliche Einbau per Hand etwas umfangreich ist. Mit der folgenden Anleitung sollte es aber gelingen:

1. Bei lokaler Entwicklung die Klasse "s10.screenlayout" in Ihr Projekt kopieren

Die Klasse "s10.screenlayout" wird von /s10/util automatisch in jedes generierte Projekt eingefügt. Sie können sie aus einem anderen generierten Projekt übernehmen; Änderungen sind nicht erforderlich. Wenn Sie das Projekts später in das SAP MIME Repository übertragen, empfiehlt es sich, die Klasse "s10.screenlayout" nicht zu übertragen oder nachträglich zu löschen. Dann wird vom S10 Framework die Klasse "screenlayout" aus dem "PUBLIC"-Ordner verwendet (sap/bc/bsp/s10/public/classes/screenlayout). Dies ist sinnvoll, damit eventuelle spätere Updates des S10 Frameworks wirksam werden, denn eine lokale Klasse "s10.screenlayout" hat Vorrang vor der public-Klasse.

Der Beginn des Namens, hier "matinfo" ist beliebig. Sie können den Namen des Screens nehmen, aber nur, sofern er maximal 10 Zeichen hat, da Methodennamen (nächster Schritt) sonst länger werden als die erlaubten 30 Zeichen. Gegebenenfalls also kürzen. Dahinter dann "_layout" und "_layoutname".

3. Die Methoden zum Initialisieren des Layoutobjekts und Validieren des Layoutnamens anlegen

*  Deklaration
 methods: 
   build_matinfo_layout
    exporting
     matinfo_layout type ref to /s10/screenlayout, 

   validate_matinfo_layoutname
    importing
     matinfo_layoutname type string optional. 
  

*  Implementierung: 
 method  build_matinfo_layout.
  if  matinfo_layout  is  initial.
   create  object  matinfo_layout.
   matinfo_layout->init(  parent  =  me  screenname  =  'matinfo'  ).
  endif.
 endmethod.

 method  validate_matinfo_layoutname.
  matinfo_layout->read(  matinfo_layoutname  ).
 endmethod.

In Aufruf von "matinfo_layout->init()" wird unter "screen" der zuvor gewählte Name "matinfo" mitgegeben. Unter diesem Namen werden dann auch die Layoutdefinitionen in der Datenbank abgespeichert.

4. In der HTML-Datei das Layout aufnehmen und den Bereich, auf den sich das Layout beziehen soll, mit der vergebenen id, in unserem Beispiel "matinfo", kennzeichnen

 <div style="float: right;">

        <label class='label' style="width: 50px; margin-bottom: 6px; text-align: right; --portrait-width: 30px; color: white">Layout</label>

        <select class="inputselect" name="matinfo_layoutname"
            data-s10dropdownlist="matinfo_layout.ddl_layoutname"
            data-s10options="hideKeys,noEmptyEntry"
            size="1" style='width: 160px; --portrait-width: 60px; height: 22px; padding: 0px; margin: 0px; border-radius: 4px; background-color: #ffffffb8' onchange="S10Enter();">
        </select>
        <button type="button" class="button-small startbutton" onclick="S10LayoutDialog('matinfo')" style="background-color: #2a2a2a29; margin: 0px; height: 18px;">&#9655;</button>
        <input type="hidden" class="output" name="matinfo_layout.properties" onchange="S10ApplyLayout('matinfo', this.value)" />

</div>

<div id="matinfo">

... Hier alle HTML-Elemente, auf die sich das Layout beziehen soll

</div>

....

Die Layoutauswahl sollte nun erscheinen. Durch Klicken auf den Pfeil rechts neben der Layoutauswahl wird der Layoutdialog angezeigt. In die Layoutdefinition werden alle HTML-Elemente übernommen, die einer der folgenden CSS-Klassen zugeordnet sind:

Zusätzlich muss im Fall "subtitle" das Attribut name= gesetzt sein. Da der Name zur Identifizierung des Elements in der Layoutdefinition verwendet wird, muss er in dem angegeben Layoutbereich eindeutig sein. Bei den anderen Klassen ("infoblock...") wird das "name"- Attribut aus dem ersten vorkommenden "label"-Element oder, falls nicht vorhanden, dem ersten Element des Infoblocks verwendet, das ein "name"-Attribut besitzt. Im Layoutdialog wird dieser Name auch für die Hilfefunktion verwendet und dort angezeigt.

Der im Layoutdialog angezeigte Text ist bei "subtitle" der Titel selbst, bei den anderen Elementen der Wert des label-Elements oder ansonsten des ersten Elements mit "name" Attribut. Diese automatische Zuordnung kann durch Setzen der Attribute "data-s10title" und "name" im "infoblock"-Element überschrieben werden, um Text und Namen in der Layoutdefinition anzupassen.

Die Label können auch dynamisch sein (SAP Data Dictionary) und erscheinen dann entsprechend im Layoutdialog.

Der folgende Infoblock erhält als Titel das Standardlabel von "matnr", also "Material", und als id "matnr".

Für das Ausgeben eines "infoblock" am Anfang einer neuen Zeile empfiehlt sich die Verwendung von "style='min-width:100%' ", z.B.:

Hier ist die subtitle-Angabe in den infoblock mit aufgenommen, was den Vorteil hat, dass er bei Ausschalten der Produktabbildung ebenfalls automatisch ausgeschaltet ist. Der Titel kann dennoch im Layout separat ausgeschaltet oder geändert werden.

Es empfiehlt sich, ein Standardlayout (z.B. /STANDARD) zu definieren, das alle normalerweise sinnvollen Felder enthält. Benutzer können dies als Vorlage für eigene Layouts verwenden.

Das S10 Framework überträgt keine Attribute aus dem ABAP-Programm in die HTML-Seite, welche zwar in der Layoutdefinition vorhanden sind, dort jedoch nicht aktiviert sind. Auch die build-Methoden werden nur für diese Elemente aufgerufen. Dadurch wird beispielsweise der Datenbankzugriff zur Ermittlung von Umsatzzahlen vermieden, wenn der Benutzer die Umsatzstatistik gemäß der Layoutdefinition ausblendet.

Im ABAP-Programm können Sie direkt prüfen, ob ein Attribut gemäß des aktuellen Layouts unsichtbar ist, z.B.: