In order for the user to move quickly and intuitively in an application, suitable navigation elements and a consistent design are important. Technically, we can use all the possibilities offered by HTML, JavaScript and CSS in S10 applications.

1. Navigation within a page

(a) Tabs

Tabs represent a familiar and quick-to-use paradigm; the technique is described in the preceding tutorial.

However, more than about 7 tabs are difficult to keep track of. You might then summarise information or add another level (hierarchical navigation).

Above the tab bar, information is often displayed that relates to all tabs. On small devices (smartphones), however, this should only be one line; it is better to display the rest of the information in the first tab.

If the information as a whole contains only one long table and individual blocks of fixed length, the presentation without tabs, with the table at the end, is usually better. It depends on how often the individual pieces of information are needed and how much effort it takes to get them. The example from the previous tutorial makes sense in this way if the customer address (first tab) is looked up frequently and the sales figures rather rarely:


Another aspect is that the display of "simple" information such as the address should be very quick from the user's point of view, while a click on "Sales" with a response time of a few seconds is not objected to. Since the information for the individual tabs is only retrieved when the tab is selected, this argues for a separate "Sales" tab.


(b) Showing detailed information in tables (row selection)

A click in the first table row shows details:

Details on the implementation can be found in Tables.


(c) Fade in sections of an HTML page in the browser

With techniques (a) and (b), the detailed information displayed is only read when the user clicks on the tab or table row. Independent of the S10 Framework, HTML offers the possibility to hide areas of the HTML page with the HTML tags <details> and <summary> and and to show them when clicking on the line. In this case, all detailed information is already contained in the page, only the display takes place when the user shows the details.

A description of the HTML elements <details> and <summary> can be found, for example, in  The Details disclosure element (Mozilla Developer Network).

In the <detals> area you can use the elements of the S10 framework without restriction.


2. Navigating between screens

Navigation between different HTML pages is controlled in the ABAP application. The following S10 methods are available for this purpose:

s10nextscreen() Sets the next screen to be displayed

s10dialog() Starts a modal dialog

s10exitdialog() Ends a modal dialog

In the user interface, you can visualize the actions as you wish, for example, as a pushbutton, a link, a link in an image, or a dropdown menu action.

Here are some examples. The "Create order" pushbutton calls up the screen for creating a new order:

The pushbutton is implemented in HTML as follows:

<button type="button" class="toolbarbutton" 
   Create order

The ABAP method called by this creates a new object of the class "order" and calls the screen "create" as a modal dialog:

method on_create.

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

  neworder->s10dialog( 'create' ).



From the called screen for order entry, the user can return to the initial screen using the pushbutton in the upper left corner:

HTML coding for the return button:

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

The last parameter "true" in the call to S10Apply() ensures that this pushbutton does not trigger an input check, so that the user can leave the screen even if the input is invalid. The ABAP method for this:

  method exit_orderdetail_back.

* return to previous screen
    s10exitdialog( ).


There are many suggestions for the design of navigation menus in HTML on the web. The combination with the S10 framework is unproblematic: For navigation, you call an ABAP method from the HTML page via S10Apply() and set the subsequent screen there with s10nextscreen(). In the CIS demo application, the general navigation is realized by a dropdown menu:


3. Design tips

Here are some general design tips for using navigation techniques: