Damit sich der Benutzer schnell und intuitiv in einer Anwendung bewegen kann,  sind passende Navigationselemente und ein konsistentes Design wichtig. Technisch können wir in S10-Anwendungen alle Möglichkeiten nutzen, die HTML, JavaScript und CSS bieten.

1. Navigation innerhalb  einer Seite

(a) Reiter (Registerkarten)

Reiter stellen ein vertrautes und schnell bedienbares Paradigma dar; die Technik ist in dem vorangehenden Tutorial beschrieben.

Mehr als etwa 7 Reiter sind allerdings schwer zu überblicken. Eventuell fassen Sie dann Informationen zusammen oder fügen eine weitere Stufe (hierarchische Navigation) ein.

Oberhalb der Reiterleiste werden häufig Informationen angezeigt, die sich auf allle Reiter beziehen. Auf kleinen Geräten (Smartphone) sollte das aber nur eine Zeile sein; die restliche Information dann besser in dem ersten Reiter anzeigen.

Falls die Informationen insgesamt nur eine lange Tabelle sowie einzelne Blöcke fester Länge enthalten, ist die Darstellung ohne Reiter, mit der Tabelle am Ende, meist besser. Dabei kommt es darauf an, wie häufig die einzelnen Informationen benötigt werden und wie der Aufwand ist, sie zu besorgen. Das Beispiel aus dem vorherigen Tutorial ist in dieser Art sinnvoll, wenn die Kundenadresse (erster Reiter) häufig nachgesehen wird  und die Umsatzzahlen eher selten:

 

Ein weiterer Aspekt dabei ist, dass die Anzeige "einfacher" Information wie der Adresse aus Benutzersicht ganz schnell gehen sollte, während ein Klick auf "Umsatz" mit einer Responsezeit von einigen Sekunden nicht beanstandet wird. Da die Infomationen für die einzelnen Reiter erst besorgt werden, wenn der Reiter angewählt wird, sprcht das für einen separaten Reiter "Umsatz".

 

(b) Einblenden von Detailinformation in Tabellen (Zeilenauswahl)

Ein Klick in die erste Tabellenzeile blendet Details ein: 

Details zur Implemtierung finden Sie in der Anleitung Tabellen.

 

(c) Einblenden von Abschnitten einer HTML-Seite im Browser

Bei den Techniken (a) und (b) werden die angezeigten Detailinformationen erst dann gelesen, wenn der Benutzer den Reiter bzw. die Tabellenzeile anklickt. HTML bietet unabhängig vom S10 Framework die Möglichkeit, mit den HTML-Tags <details> und <summary>  Bereiche der HTML-Seite zu verstecken und bei Klick auf die <summary> Zeile einzublenden. In diesem Fall sind alle Detailinformationen bereits in der Seite enthalten, nur die Anzeige erfolgt erst dann, wenn der Benutzer die Details einblendet.

Eine Beschreibung der HTML-Elemente <details> und <summary> finden Sie z.B. in The Details disclosure element (Mozilla Developer Network).

In dem "<details>"-Bereich können Sie die Elemente des S10 Frameworks ohne Einschränkung verwenden.

 

2. Navigation zwischen Seiten

DIe Navigation zwischen verschiedenen HTML-Seiten wird in der ABAP-Anwendung gesteuert. Hierzu gibt es folgende S10-Methoden:

s10nextscreen() Legt den nächsten anzuzeigenden Screen fest

s10dialog() Startet einen modalen Dialog

s10exitdialog() Beendet einen modalen Dialog

In der Benutzeroberfläche können Sie die Aktionen beliebig visualisieren, z.B. als Drucktaste, als Link, als Link in einem Image oder als Aktion eines dropdown-Menüs.

Hier einige Beispiele. Mit der Drucktaste "Auftrag anlegen" wird der Screen zum Anlegen eines neuen Auftrags aufgerufen:

Die Drucktaste ist in HTML wie folgt implementiert:

<button type="button" class="toolbarbutton" 
      onclick="S10Apply('on_create')">
   Auftrag anlegen
</button>

Die dadurch aufgerufene ABAP-Methode legt ein neues Objekt der Klasse "order" and und ruft den Screen "create" als modalen Dialog auf:

method on_create.

  data: neworder type ref to order.
  create object neworder.

  neworder->s10dialog( 'create' ).

endmethod.

 

Aus dem aufgerufenen Screen zur Auftragserfassung kann der Benutzer mit der Drucktaste links oben zu dem Ausgangs-Screen zurückkehren:

HTML-Coding für den Rückkehr-Button:

<button type="button" class="button back" 
    onclick="S10Apply('exit_orderdetail_back', '', null, true);">
   
 
◀  
</button>

Der letzte Parameter "true" in dem Aufruf von S10Apply() sorgt dabei dafür, dass diese Drucktaste keine Eingabeprüfung auslöst, damit der Benutzer den Screen auch bei ungültigen Eingaben verlassen kann. Die ABAP-Methode dazu:

  method exit_orderdetail_back.

* return to previous screen
    s10exitdialog( ).

  endmethod.

Zur Gestaltung von Navigationsmenüs in HTML gibt es im Web sehr viele Vorschläge. Die Kombination mit dem S10 Framework ist dabei unproblematisch: Zur Navigation rufen Sie aus der HTML-Seite jeweils über S10Apply() eine ABAP-Methode und setzen dort mit s10nextscreen() den Folgescreen. In der CIS-Demo-Anwendung ist die generelle Navigation durch ein dropdown-Menü realisiert:

 

3. Designtipps

Hier noch einige allgemeine Designtipps zur Anwendung der Navigationstechniken: