Übersicht 

Bei der Gestaltung von Drucktasten setzt das S10 Framework im Prinzip keine Grenzen, so dass Sie entweder den Standardbutton verwenden und anpassen können, oder selbst Elemente definieren, durch die der Benutzer eine Aktion auslösen kann.

In der Regel soll eine Methode in der jeweiligen S10 ABAP-Klasse aufgerufen werden, dies erreichen Sie durch den Aufruf der JavaScript-Methode S10Apply() .

HTML-Code für einen Pushbutton: 
HTML 
<button type='button' class='button'
   onclick='S10Apply("mybapmethod")'>
      Click me
</button>

Aufgerufene ABAP-Methode:
ABAP 
method myabapmethod

* Implementation

endmethod

Hinweise:
  1. Die aufzurufende ABAP-Methode wird in der aktiven Anwendungsklasse gesucht.
  2. Sie können auch zunächst eine eigene JavaScript-Routine und dort am Schluss S10Apply() aufrufen.
Beispiel 1: Diagramme generieren
(Das komplette Beispiel finden Sie hier: Charts und Diagramme)
HTML 
<button type="button" class="toolbarbutton"
 onclick="S10Apply('generate_random');">
            zufällige Daten generieren
</button>

Die ABAP-Methode erzeugt einige zufällige Daten, aus denen später im HTML ein Diagramm erzeugt wird:
ABAP 
method generate_random.

    data:
      o_rand type ref to cl_abap_random_int,
      seed   type i.

    " random number sequence.
    seed = cl_abap_random=>seed( ).
    cl_abap_random_int=>create(
    exporting
    seed =  conv i( sy-uzeit )
    min = 5
    max = 150
    receiving
    prng = o_rand
    ).

    diagram_01 =  'A;' o_rand->get_next( ) ';' o_rand->get_next( ).
    diagram_01 = diagram_01 '|B;' o_rand->get_next( ) ';' o_rand->get_next( ).
    diagram_01 = diagram_01 '|C;' o_rand->get_next( ) ';' o_rand->get_next( ).
Beispiel 2: Kundenkontakt ändern
(Aus dem S10 Demosystem: CIS Demo mit Fiori Launchpad)

HTML-Code:
(Hier wird neben dem Methodennamen zusätzlich ein Parameter mitgegeben, in diesem Fall die ID des ausgewählten Kundenkontakt.) 
HTML 
<button type="button" class="button" style="float:right;" 
onclick="S10Apply('change_visit', document.getElementById('visitid1').value)">
                    Bearbeiten
</button>
ABAP 
* call up visit change screen
  method change_visit.

* create separate visit object for change
    data: mychangevisit type ref to visit.
    create object mychangevisit.

    mychangevisit->kunnr = kunnr.
    mychangevisit->s10setuservalue(
      exporting
        attrname = 'visitid'
        uservalue = s10actionparameter( ) ).

* visit date for 'delete' message
    data: vdatetime_long type string.
    vdatetime_long = mychangevisit->s10getuservalue( 'vdatetime_long' ).

    mychangevisit->change( ).

* re-determine next visit
    call method s10session->mymain->('BUILD_MYCUSTOMERS').
    next_visit( ).

* re-determine dependent fields
    case mychangevisit->visitid.
      when myvisit1->visitid. myvisit1->s10rebuild( ).
      when myvisit2->visitid. myvisit2->s10rebuild( ).
      when myvisit3->visitid. myvisit3->s10rebuild( ).
    endcase.
    
    if mychangevisit->visitid is initial.
      s10infomessage( s10localize( id =  'visit_deleted_1') ).
    endif.

  endmethod.
Beispiel 3: Toolbar für Kundendaten

HTML 
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=400">
    <link rel='stylesheet' type='text/css' 
    href='../../../style/s10.style.css'>
    <link rel='stylesheet' type='text/css' 
    href='../../../style/custom.style.css'>
    <script src='../../synactiveS10/synactiveS10.java.js'></script>

    <title>Kunde</title>
</head>
<body style="width:100%; margin:0px; padding:0px;" 
onload='init();' class="colorscheme9">

    <div class="headerarea" style="width: 100%; padding:10px;">
        <b>Bearbeiten Kunde</b>
         <br />
         <br />

         <button type="button" class="toolbarbutton" 
         onclick="S10Apply('display');">
            Anzeigen
        </button>

         <button type="button" class="toolbarbutton" 
         onclick="S10Apply('change');">
            Ändern
        </button>

        <button type="button" class="toolbarbutton"  
        onclick="S10Logoff();">
            Beenden
        </button>

    </div>


    <div style="padding:10px">
        <label class="label output" name="kunnr" for="kunnr"></label><br>
        <input type="text" class="input"  
        required name="kunnr" id="kunnr" style="width: 140px;">
        <span class="output" name="kunnr@text"></span>
    </div>

</body>

Komponente S10 Framework