S10 applications consist of HTML files plus ABAP classes. The S10 framework establishes the connection between the two levels through a data binding that synchronises the value of an HTML element with the attribute of the same name in the active ABAP object.
This means that after a user action, the new values from HTML are transferred to the active ABAP object and processed there. After processing at ABAP level, the current values of the ABAP attributes are transferred back into the HTML elements (bidirectional binding).

In an application for changing customer addresses, there is an input field for the building:

In HTML, the input field is defined by an <input> tag that has the CSS class "input" and a name "name=":

input class="input" name="building" size="20" maxlength="20" />

In the ABAP class there is a class attribute with the same name; either in SE24 with a public class:

or with a local class in the ABAP source code:

public section.
type ad_bldng.

To display the address, the ABAP object reads the customer address and sets a value, e.g. "B26", in the attribute "building". Before the HTML file is displayed, this value is transferred by the S10 Framework to the "building" input field with the same name. The user can enter another value there, e.g. "B28", and with the next dialogue step, triggered for example by a click on the "Save" button, the new value "B28" is entered into the attribute "building" and then the method "Save" is executed.

Within the <head>-tag of your HTML file, the following information is necessary:

<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>

Here, "custom.style.css" is an empty file in which you can overwrite the standard CSS styles from "s10.style.css" for your project if necessary (fonts, colours,...).

In the ABAP class it is necessary to specify the superclass /s10/any. For public classes (transaction SE24) this is done in the class properties:

and for local classes in SE38 by the "inheriting from" specification:

  class customer definition inheriting from /s10/any.  

This ensures that the automatic data binding works in both directions. You do not need any additional calls in HTM/JavaScript or ABAP, but the common name ("name=" in HTML and attribute name in ABAP) connects the HTML elements with the ABAP elements.

Display of attributes only
If you specify CSS class 'output' instead of 'input', the data transport is only carried out in the direction ABAP -> HTML:

 <input class="output" name="building" size="20" maxlength="20" />  

Instead of <input>, one simply uses the tags <span> or <div>, which do not require an output length:

 <span class="output" name="building"> </span>

The presentation is almost identical:

Format conversion 
The data conversions defined in the SAP system are carried out in both directions. For example, leading zeros are not displayed for numeric customer numbers, but are automatically added to the ABAP attribute when entered. Conversion exits, for example to the material number, are carried out in both directions. Decimal values are displayed as defined in the SAP user master record.

For quantity and currency specifications, the correct number of decimal places to be displayed depends on the unit (such as piece, kilogram, ...) or the currency (EUR, USD, JPY). If you store a reference to the attribute containing the unit of measure or the currency in the ABAP class for the attribute, the formatting is carried out automatically according to the decimal places stored for it in the SAP system. For details, see the documentation of s10getuservalue().

Validation of input values and your own output methods
To prevent invalid data from entering the application, you can specify validation methods in your class that run automatically after the data transport. Validation methods have the name "validate_..."; all details can be found in the separate chapter  "Validation of input values".

Similarly, there are methods that run automatically before an attribute is transferred to the HTML level. The corresponding methods are called "build_..."; the description can be found in the chapter  "Build methods".


You can also address the attributes of subobjects of the active ABAP object directly; use a dot to separate the attribute names, i.e. name="obj.attname" where "obj" is an ABAP object reference to another /s10/any class and "attrname" is the name of an attribute of this class. This notation is also applicable on multiple levels.


An attribute

type ref to customer.

 is defined in the current ABAP object. In the class "customer" again an attribute

type ref to address.

And finally

type ad_bldng.

in the class "address". Through

<span class="output" name="mycustomer.name1"> </span>
span class="output" name="mycustomer.addr.building"> </span>

you can now directly address the attribute "name1" of "mycustomer" as well as the attribute "building" of the object "addr" of "mycustomer".

The assigning is again bidirectional, i.e. the attributes of the corresponding subobjects are supplied with values during input and the ABAP values are transferred from the subobjects to HTML during output.

Output of a value with HTML formatting
If the value to be displayed contains any HTML formatting, this is only displayed as text, e.g.

<div class="output" name="imgbuilding"></div>

By changing the class "output" to "outputhtml", the value is interpreted as HTML:

<div class="outputhtml" name="imgbuilding"></div>

In special cases, this can be used to create strings with HTML formatting at ABAP level and transmit them in the same way as normal values. Through class="outputhtml", the interpretation as HTML string is then carried out.

Output a value with special CSS classes
In ABAP, you can use the method s10addcss()
to dynamically assign a CSS class to a class attribute, which then takes effect during display. Define the CSS class either locally in the HTML page or in the stylesheet "custom.style.css". Details are documented in s10addcss().


<input class="input" name="building" size="20" maxlength="20" />

background-color: gold !important;

* indicate: missing information

attrname 'building' cssclassname 'missinginfo).



Special elements: Dropdown lists and long texts
There are separate chapters for each of these in the S10 documentation. The basic mechanism, i.e. bidirectional binding by name, remains the same.

Other HTML input types
HTML5 supports some useful special input types. The default is "text".

Here are some examples with their respective visualization in Chrome:

<input type="date"  class="input" name="..." />  


<input type="month"  class="input" name="..." />  

Format in ABAP:  YYYY-MM

<input type="time"  class="input" name="..." />  

Format in ABAP:  HH:MM

<input type="search"  class="input" name="..." />  

Any string, an "x" is also displayed to delete the content.

<input type="range"  class="input" name="..."   min"..."   max="..."   step="..." /> 

Format in ABAP:  Number

Useful further HTML5 attributes in <input>
The following options are useful from time to time:

  • autocomplete
  • list
  • max
  • min
  • pattern
  • placeholder
  • step
  • style="text-transform: uppercase"
  • style="text-transform: lowercase"

See the HTML5 documentation for details.

Components: Framework