Overview 

In principle, the S10 framework sets no limits for the design of pushbuttons, so you can either use and customize the default button or define elements yourself that the user can use to trigger an action.

Usually a method should be called in the respective S10 ABAP class, you can achieve this by calling the JavaScript method S10Apply() .

HTML code for a pushbutton: 
<button type='button' class='button'
    onclick='S10Apply("mybapmethod")'>
       Click me
 </button>

Called ABAP method:
method myabapmethod

* Implementation

endmethod

Hints:
  1. The ABAP method to be called is searched for in the active application class.
  2. You can also call your own JavaScript routine first and S10Apply() at the end there.
Example 1: Generate diagrams
(The complete example can be found here: Charts and diagrams)

HTML-Code:
<button type="button" class="toolbarbutton"
 onclick="S10Apply('generate_random');">
            Generate random data
</button>

The ABAP method generates some random data, from which a diagram is generated later in the HTML:
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( ).
	
  endmethod.
Example 2: Change customer contact
(From the S10 demo system: CIS Demo with Fiori Launchpad)

HTML-Code:
(Here, in addition to the method name, a parameter in addition to the method name, in this case the ID of the selected customer contact) 
<button type="button" class="button" style="float:right;" 
onclick="S10Apply('change_visit', document.getElementById('visitid1').value)">
                    Edit
</button>

The ABAP method:
* 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.
Example 3: Toolbar for customer data

HTML-Code:
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <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>Customer</title>
</head>
<body style="width:100%; margin:0px; padding:0px;" onload='init();' class="colorscheme9">

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

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

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

        <button type="button" class="toolbarbutton"  onclick="S10Logoff();">
            Logoff
        </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>
</html>

Component S10 Framework