Overview
Step-by-step guide to get started rapidly with S10 development. The goal is a simple S10 application to display information about an entered material number:


As a starting point, we generate an application with the S10 utilities, which is then extended:


The Quickstart Guide is divided into the following steps:
  1. Generating an S10 application based on table MARA
  2. Customize the configuration of the application and the login screen
  3. Extending the HTML views of the generated application
  4. Extending the ABAP classes of the generated application
Requirements
Step 1: Generating an S10 application based on table MARA
First start the transaction /S10/UTIL and select the tab "Generate transaction".

Since we want to display material master data, we specify the MARA table, select the "Display" transaction type and in this example only select the material number in the fields. Since we want to automatically display the description in addition to the material number, we select the entry in the "Text" column.


The "Save and generate" button now saves all application parts into the previously specified directory and generates the ABAP program.

To test the application, it must first be transferred to the SAP MIME repository. Local development and testing is also possible and is described in more detail in the chapter "Local development". You can transfer entire directory structures with the SAP program "BSP_UPDATE_MIMEREPOS" (transaction SE38):


You can now test the application once by entering the related address in the browser. If everything is configured correctly, the initial screen of the generated application should appear:
Step 2: Customize the configuration of the application and the login screen
The S10 framework takes care of the logon to the SAP system, but needs some information to do so.

In this example the user specifies his user name as well as password, the remaining parameters are specified directly in the coding of the HTML page, e.g. the client. The HTML page for the login is always located in the following place in the MIME repository and must be adapted there:

Name of S10 application/classes/user/views.xy
(where xy stands for the language key of the login language, e.g. views.de for German):


Right-click the file in the MIME repository to modify or download the file.

In principle, you can change and design the page as you like. The S10 generation tool adds an entry in the dropdown list for each generated table, the value is then also the called ABAP program name. You can later combine the individual parts into a single application and specify a fixed program name.

Customize the parameters in the JavaScript method "dologon", for details see the documentation for "S10Logon()": 
 // set logon parameters and S10 start configuration;
var logon_client = '100';
var logon_language = document.getElementById('language').value;

var classname = "main";
var progname = document.getElementById('tables').value;

S10Logon(logon_client, logon_user, logon_password, 
logon_language, classname, progname);
Step 3: Extending the HTML views of the generated application
The generation tool has generated a ready-to-run application that provides a material selection as well as associated detail view.

Usually, however, you want to display additional fields that are not necessarily contained directly in the specified table. Although the generation tool also supports views or CDS views, we can also add the necessary fields ourselves and get the data ourselves in an ABAP method. In this example we want to display the price of the material. In addition, we want to show the current client in the title bar.

We first expand the header area, this is located in the generated view "mara_manger.start.html": 


<div class="headerarea" style="width: 100%; padding: 10px;">

	<!--show current client-->
        <span class="output" style="margin-left: 10px;">Client</span>
	<span class="output" name="mandt"></span>
	<span class="output" name="mtext" style="margin-left: 20px;"></span>
</div>

So we have inserted two S10 fields that are linked to an ABAP class via name=: mandt and mtext.

We do the same with the material detail view (mara_manager.displayhead.html) and add three more fields here: 
<!-- header fields -->
<div style="background-color: lightgray">
    <div class="infoblock" style="width:400px; height:50px;">
        <label class="label output" for="mymara.matnr" name="mymara.matnr"></label>
        <br>
        <span class='output' name="mymara.matnr"></span>
        <span class='output' name='mymara.matnr@text'></span>

    </div>

    <!-- Outputfield for price -->
    <div class="infoblock" style="width:400px; height:50px;">
        <label class='label' name="mymara.price@label"></label>
        <br>
        <span class="output" name="mymara.price"></span>
        <span class="output" name="mymara.pricewaers"></span>
    </div>


</div>

We use a custom object "mymara", which is defined in the ABAP class. So the fields belong to this class, not to the active application class. We can let the S10 Framework determine the label of the field "price" automatically by the suffix @label.
Step 4: Extending the ABAP classes of the generated application
In order to populate the fields specified in the HTML view with data, these must be defined in the associated ABAP class and the data must be read if this is not done automatically by the S10 framework (e.g. for @label or @text statements). We therefore first extend the class "mara_manager" by the fields mandt and mtext, which are to display the current client as well as description in the title line: 
class mara_manager definition inheriting from /s10/any.

public section.

* table fields for list view, plus key fields
    data:
      new_matnr    type mara-matnr,
      search_matnr    type mara-matnr,

      mymara  type ref to mara_detail,
      mandt type t000-mandt,  
      mtext type t000-mtext.

We can now read the data in a method that is called when the application is started: 
class mara_manager implementation.

* start display
  method start.
     create object mymara.

* read client text and city from client table T000
    select single mandt mtext
       into (mandt,mtext)
         from t000
           where mandt = sy-mandt.

    s10nextscreen( 'start').
  endmethod.

However, this ensures that a database query is performed every time the start screen is called.

It is therefore better to use a build method so that data is not read unnecessarily often or only if it is actually to be displayed by the front end. The corresponding S10 mechanism is described in more detail in the documentation under "build-methods". However, we will do this for the additionally inserted fields of the material.

First we declare the new fields, additionally defining a link between the price and the associated unit by the field "unit_price". This enables the S10 framework to format the field according to the unit, details are described in the documentation under  "s10getuservalue()":  
class mara_detail definition inheriting from /s10/any.

  public section.

* table fields for detail view, plus key fields

    data:
      matnr      type mara-matnr, " Material using Text
      price      type konp-kbetr,
      pricewaers type konp-konwa,
      priceunit  type konp-kmein,
      unit_price type string value 'pricewaers'.

    methods:
      build_price
        importing
          matnr      type mara-matnr
        exporting
          price      type konp-kbetr
          pricewaers type konp-konwa
          priceunit  type konp-kmein.

The method "build_price" has the material number (MATNR) as importing parameter, which means that it is called as soon as the material number changes and is implemented as follows: 
method build_price.
    price = 0.

* read condition table for standard price PPR0 and amount=1
    select single konp~kbetr konp~konwa konp~kmein
         into (price,pricewaers,priceunit)
           from konp
             join a304
               on a304~knumh = konp~knumh

               where a304~matnr = matnr
               and   konp~kappl = 'V'
               and   konp~kschl = 'PPR0'
               and   konp~kpein = 1.
  endmethod.

Component S10 Framework