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
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:
building 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:
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
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:
Instead of <input>, one simply uses the tags <span> or <div>,
which do not require an output length:
The presentation is almost identical:
conversions defined in the SAP system are carried out in both
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
Validation of input values and your own output methods
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
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.
mycustomer type ref to customer.
is defined in the current ABAP object. In the class
"customer" again an attribute
addr type ref to address.
building type ad_bldng.
in the class "address". Through
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.
By changing the class "output" to "outputhtml", the value is
interpreted as HTML:
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().
* indicate: missing information
s10addcss( 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:
Format in ABAP: YYYYMMDD
Format in ABAP: YYYY-MM
Format in ABAP: HH:MM
Any string, an "x" is also displayed to delete the content.
Format in ABAP: Number
Useful further HTML5
attributes in <input>
options are useful from time to time:
- style="text-transform: uppercase"
- style="text-transform: lowercase"
See the HTML5 documentation for details.