Übersicht
Einge gute Möglichkeit, Inhalte zu strukturieren ohne einen neuen Dialog aufrufen zu müssen, bieten Reiter (Tabs). Damit kann der Benutzer Teile des aktuellen Views dynamisch ein- oder ausblenden.



Normalerweise wird der Inhalt eines nicht ausgewähltens Reiters einfach nur versteckt. Eine Besonderheit des S10 Framework ist jedoch, dass die Daten, die auf einem bestimmten Reiter angezeigt werden sollen, erst dann angefordert werden, wenn er vom Benutzer auch ausgewählt wird. Dadurch können lange Ladezeiten vermieden werden und es werden nur tatsächlich benötigte Daten übertragen.
Implementierung
Zunächst wird der Bereich definiert, in dem der Benutzer unterschiedliche Reiter selektieren kann. Jeder Reiter erhält jeweils eine eindeutige ID, der bei der ersten Anzeige ausgewählte Reiter die Klasse "tabactive", aller weiteren Reiter die Klasse "tab":
HTML 
<table class="tabstrip">
    <tbody>
        <tr>
            <td id="tabfirst" class="tabactive">Tab 1</td>
            <td id="tabsecond" class="tab">Tab 2</td>
                        <td id="tabthird" class="tab">Tab 3</td>
        </tr>
    </tbody>
</table>
Das sonstige Design spielt für die Funktionalität keine Rolle und kann beliebig angepasst werden.

Anschließend werden die Bereiche definiert, die zu einem bestimmten Reiter gehören:
HTML 
<div id="tabfirst.area" class="tabpageactive">
     
</div>

<div id="tabsecond.area" class="tabpage">
     
</div>

<div id="tabthird.area" class="tabpage">
     
</div>
Der Name eines Bereichs, der zu einem bestimmten Reiter gehört, setzt sich also folgendermaßen zusammen:
"ID des Reiters".area

Der Bereich, der zum aktiven Reiter gehört, bevor der Benutzer einen anderen auswählt, hat die Klasse "tabpageactive", alle anderen "tabpage".

Aktionen beim Wechseln des Reiters
Wenn der Benutzer den Reiter wechselt, wird die Methode "on_init_[screenid]_[tabid]" aufgerufen, also z.B. "on_init_main_tabsecond".

Sie können die Daten, die auf dem neuen Reiter angezeigt werden sollen, entweder in dieser Methode bereitstellen oder durch build-Mehoden. Falls man alle Reiterdaten durch build-Methoden besorgt, kann die Methode "tab_[screenid]_[tabid]" entfallen. Die build-Methoden haben den Vorteil, dass man Daten problemlos in der Entwicklung von einem Reiter auf einen anderen legen kann und dann immer noch alles korrekt läuft.

Aktiven Reiter setzen
Wenn Sie in einer ABAP Methode einen neuen Screen mit s10nextscreen() aufrufen, können Sie den Namen eines Reiters als Parameter mitgeben, der dann als aktiver Reiter gesetzt und angezeigt wird.

Beispiel:
ABAP 
s10nextscreen( screenid = 'contact'  tabid = 'tabsecond' ).
Beispiel mit drei Reitern:



HTML 
<!-- Define navigation area for three tabs -->
<tr>

    <td id="tabvisits" class="tab" onclick="S10ActivateTab(this);">
        Aktueller Kundentermin
    </td>
    <td id="tabinfo" class="tabactive" onclick="S10ActivateTab(this);">
        Kundeninfo
    </td>
    <td id="tabmap" class="tab" onclick="S10ActivateTab(this);">
        Karte
    </td>

</tr>


<!-- Content of each tab -->

<div class="tabpage" id="tabvisits.area">

    <div class="subtitle">
        Nächster Termin
    </div>

    <div style="padding:10px 10px 0px 10px">

        <!-- Text-output of object myvisit1 field vdatetime_long -->
        <span class='output' style="color:var(--subtitle-background-color); 
                                           font-size:16px; font-weight:bold;"
        name='myvisit1.vdatetime_long'> </span>

        <!-- Onclick run ABAP method change_visit() -->
        <button type="button" class="button-small"
        style="float:right;" onclick="S10Apply('change_visit', 
                                  document.getElementById('visitid1').value)">
            Bearbeiten
        </button>

        <br />

        <label class='label'>Thema</label>
        <br />

        <!-- Text color defined in CSS variable in external stylesheet -->
        <span class="output" style="color:var(--subtitle-background-color); 
                                            font-size:16px; font-weight:bold;"
        name="myvisit1.ktext"></span>

        <br />
        <br />

    </div>


    <div class="tabpageactive" id="tabinfo.area">

        <div class="subtitle">
            Anschrift
        </div>

        <div style="padding:10px 10px 0px 10px">

            <div>
                <span class='output' name='name1'></span>

                <!-- Maintaint customer's address with 
                ABAP method change_address-->
                <button type="button" class="button" style='float:right;'
                name="change_address">
                    Kundenadresse ändern
                </button>
            </div>

            <div>
                <span class='output' name='name2'></span>
            </div>

            <div>
                <span class='output' name='stras'></span>
            </div>

            <div>
                <span class='output' name='pstlz'></span>
                <span class='output' name='ort01'></span>
            </div>

            <!-- automatically convert country code to languge dependant text -->
            <div class='output' name='land1@text'></div>

            <br />

            <label class='label'>Tel.</label>
            <br />

            <!-- Output HTML formatted text -->
            <span class="outputhtml" name="telf1_html"></span>
            <br />
            <br />

            <label class='label'>Kundennummer</label>
            <br />
            <span class="outputhtml" name="kunnr"></span>

        </div>
    </div>

    <div class="tabpage" id="tabmap.area">

        <!-- Show current customer address in Google Map, 
         defined in hidden S10 inputfield "addressline" -->

        <iframe id="googleMapsIframe" frameborder="0"
        style="width:100vw;height:82vh; border:0"
        src="" allowfullscreen>
        </iframe>

        <!-- Automatically run a JavaScript method,
        when data is put from S10 Framework-->
        <input type="hidden" class="output" name='addressline'
        onchange="update_map(this.value);"
        />

        <script>

            function update_map(addressline) {

                var url =
                    "https://www.google.com/maps/embed/v1/place?key=ABC;"
                document.getElementById(
                    "googleMapsIframe").src =
                    url + "&q=" +
                    encodeURIComponent(addressline);
            }

Komponente S10 Framework