Overview
Tabs are a good way to structure content without having to open a new dialog. This allows the user to dynamically show or hide parts of the current view.



Normally, the content of an unselected tab is simply hidden. A special feature of the S10 Framework, however, is that the data to be displayed on a particular tab is not requested until it is also selected by the user. This avoids long loading times and only data that is actually needed is transferred.
Implementation
First, the area is defined where the user can select different tabs. Each tab is assigned a unique ID, the tab selected during the first display is assigned the class "tabactive", all other tabs are assigned the class "tab": 
<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>

The other design does not play a role for the functionality and can be customized as desired.

Then the areas that belong to a particular tab are defined: 
<div id="tabfirst.area" class="tabpageactive">
	&nbsp;
</div>

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

<div id="tabthird.area" class="tabpage">
	&nbsp;
</div>

Thus, the name of an area belonging to a particular tab is composed as follows:
"Rider ID".area

The area that belongs to the active tab before the user selects another one has the class "tabpageactive", all others "tabpage".

Actions when changing the rider
When the user changes the tab, the method "on_init_[screenid]_[tabid]" is called, e.g. "on_init_main_tabsecond".

You can provide the data to be displayed on the new tab either in this method or through build methods. If you get all tab data by build methods, the method "tab_[screenid]_[tabid]" can be omitted. The build methods have the advantage that you can easily move data from one tab to another in development and still have everything running correctly.

Set active rider
When you call a new screen in an ABAP method with s10nextscreen(), you can pass the name of a tab as a parameter, which is then set and displayed as the active tab.

Example: 
s10nextscreen( screenid = 'contact'  Tabid = 'tabsecond' ).
Example with three riders:



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

    <td id="tabvisits" class="tab" onclick="S10ActivateTab(this);">
        Current Customer Appointment
    </td>
    <td id="tabinfo" class="tabactive" onclick="S10ActivateTab(this);">
        Customer Info
    </td>
    <td id="tabmap" class="tab" onclick="s10activatetab(this);">
        Map
    </td>

</tr>


<!-- Content of each tab -->

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

    <div class="subtitle">
        Next Date
    </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'>&nbsp;</span>

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

        <br />

        <label class='label'>Subject</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">
            Address
        </div>

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

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

                <!-- Maintains customer's address with ABAP method change_address-->
                <button type="button" class="button" style='float:right;'
                name="change_address">
                    Change customer address
                </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'>Customer Number</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); }
        </script>

Component S10 Framework