Overview
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).
Example
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.
data:
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.
Implementation
Within the <head>-tag of your HTML file, the following
information is necessary:
<head>
<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>
</head>
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".
Example:
Subobjects
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
data:
mycustomer type ref to customer.
is defined in the current ABAP object. In the class "customer" again an attribute
data:
addr type ref to address.
And finally
data:
building 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().
Example::
<input class="input" name="building" size="20" maxlength="20" />
Stylesheet:
.missinginfo
{
background-color:
gold
!important;
}
ABAP
* indicate: missing information
s10addcss( attrname = 'building' cssclassname = 'missinginfo' ).
Display:
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="..."
/>
Format in ABAP: YYYYMMDD
<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