Some elements in the HTML document (for example, pushbuttons, input fields etc.) trigger certain transactions in the SAP system and as a result change their statuses as a reaction to certain events on the screen, such as clicking the mouse button or choosing a specific key.
To ensure communication with the ERP system, the following requirements must be met:
Identifying ERP-active components
These HTML components must be identified as ERP-active components in the SAP system. Element IDs and attributes defined by SAP are used for this.
Any HTML tag ("grouping" tag) can be used to declare an ERP-active component. This tag must contain the following parts of the component as an attribute. Each attribute must then be assigned certain attribute values.
Attribute |
Attribute Value |
Explanation |
ID (HTML attribute) |
"_bfw_component_" |
Identification as HTML component |
_BFW_TYPE_ |
"bfwInput""bfwOutput""bfwExecute""bfwCalculation""bfwSignature""bfwTable" |
Identification as:Input fieldOutput fieldFunction callCalculation fieldInput filed for signatures and digital signaturesTables |
_BFW_KEY_ |
<Value of the ID attribute from XML document> |
The value of the ID attribute for an XML element is to be inserted here. It is made up of the line numbers of the phase, process instruction, and characteristic as well as additional line numbers for generated process instructions.We do not recommend using this information for creating a function since any value can be transferred as the key. |
_BFW_PARAMS_ (optional) |
"paramName1:param Value1; paramName2:param Value2;..." |
Can be used in tables to show the number of lines to be displayed, for example. Example for bfwTable: _BFW_PARAMS_="HBASE:20px;HLINE:20px;HMIN:100px:LINES:10;" |
We recommend making the following assignments between the elements defined in the XML document and the component classes of the runtime environment:
Element in the XML Document |
Component Class of the Runtime Environment |
<INPUT ...>... |
bfwInput |
<OUTPUT ...>... |
bfwOutput |
<EXECUTE ...>... |
bfwExecute |
<CALCULATION ...>... |
bfwCalculation |
<SIGNATURE ...>... |
bfwSignature |
<TEXTINPUT ...>... |
bfwInput |
<TEXTOUTPUT ...>... |
bfwOutput |
<INSTRUCTION type=“repeat“ ...>... |
bfwTable |
Depending on the component class assigned, individual component tags that must be declared through special IDs are expected within the "grouping" tag. Each input field, for example, must contain a tag with the "_bfw_field_" ID, which defines the actual input field. In addition, an input field may, for example, have a text that is specified by an element with the "_bfw_label_" ID.
Defining adequate HTML components
The XSL style sheet must be used to define adequate components in the HTML document for the elements defined in the XML documents (such as, input and output fields).
The runtime environment manages the components irrespective of the layout you have chosen. It only performs basic checks. An HTML element must, for example, be created for an input field and this element must allow to enter values, this means, an INPUT tag (type = text), a SELECT tag, or a TEXTAREA tag. For a function call, on the other hand, an HTML element must be created that supports the onkeypress and onclick events.
Event handling
The ERP-active components react to certain user interactions such as clicking a field with the mouse or pressing a key. At runtime, an instance of a JavaScript class (constructor function) is assigned to each component that has been fully and consistently declared. This instance deals with automatically defined events (such as onclick, onkeypress, and so an) that you may not use elsewhere. These events control the component's behavior and the synchronization with the runtime objects of the ABAP environment.
Synchronizing ERP-active components
As a result of communicating with the ERP system, HTML components may change their statuses. You can display each status by assigning different formatting options to individual elements. For input fields, you can, for example, change the background color, font color, type of frame or font for different statuses. You can use Cascading Style Sheets (CSS) to control this layout information.
In the HTML document, you then need to store additional information that specifies which CSS class is to be used for which component status. You can use the following attributes for the statuses of HTML components:
Attributes |
Meaning |
_BFW_CSS_ACTIVE_ |
Active, for example, in the change mode |
_BFW_CSS_INACTIVE_ |
Inactive, for example, in the display mode |
_BFW_CSS_DEFAULT_ |
Suggested Value |
_BFW_CSS_ERROR_ |
Contains errors |
_BFW_CSS_DISABLED_ |
Not ready for input, for example, when deactivating |
Example
Example for the definition of a component of type "input field" in the HTML document that is created by the XSL style sheet:
<SPAN ID=“_bfw_component_“ _BFW_TYPE_=“bfwInput“ _BFW_KEY_=“....“>
<SPAN ID=“_bfw_label_“>Beschriftung</SPAN>
<INPUT ID=“_bfw_field_“ TYPE=“TEXT“ SIZE=“10“ MAXLENGTH=“20“
_BFW_CSS_ACTIVE_=“ myStyle1 “
_BFW_CSS_ERROR_=“ myStyle2 “
_BFW_CSS_DEFAULT_=“ myStyle3 “
_BFW_CSS_INACTIVE_=“ myStyle4 “
_BFW_CSS_DISABLED_=“ myStyle5 “></INPUT>
</SPAN>
The following sections provide an overview of the features of the component classes that the runtime environment supports. ???The tables must be read from the top to the bottom and from the left to the right. Each table describes the following:
Which elements the system expects for which component class. The elements must be defined as the attribute value of the "ID" attribute in an HTML tag.
Which HTML tags you may use for which elements
Which elements you can use optionally
Which events are supported by which element
Which status attributes exist and for which elements you may use them
Class |
bfwInput |
||||
Functionality |
The component controls an input field. It may not contain further components. |
||||
Component tag |
"Grouping" tag |
Elements of a component The element names must be assigned as attribute values of the "ID" HTML attribute of a tag. |
|||
See "Identifying ERP-active components" above |
_bfw_label_ Provides the text through the innerText property |
_bfw_icon_ Indicates whether the entry is required (_bfw_css_active_) or optional (_bfw_css_inactive_). |
_bfw_field_ Defines the input field itself. |
_bfw_button_ Controls the input help button, which means that it becomes active when the focus is set to the input field. Input help can also be called up using Ctrl + H. |
|
HTML tags supported |
All |
All, provided that the innerText property is supported |
All |
INPUT type=textSELECTTEXTAREA |
All, provided that the onclick event is supported |
Optional |
X |
X |
X |
||
Event handlers used |
onkeypressonclickoncontextmenu |
onchangeonhelponfocusonblur |
|||
Status change |
- |
_bfw_css_active__bfw_css_inactive__bfw_css_disabled__bfw_css_error__bfw_css_default_ |
_bfw_css_active__bfw_css_inactive_ |
_bfw_css_active__bfw_css_inactive__bfw_css_disabled__bfw_css_error__bfw_css_default_ |
_bfw_css_active__bfw_css_inactive_ |
Explanation of the "bfwSignature" table:
The tags and elements mentioned under "bfwInput" are also valid for component class "bfwSignature". In addition, you must take into account the elements that are listed in the "bfwSignature" below:
Class |
bfwSignature |
|||||
Functionality |
The component controls an input field for signatures or digital signatures. It may not contain further components. |
|||||
Component tag |
"Grouping" tag |
Elements of a component The element names must be assigned as attribute values of the "ID" HTML attribute of a tag. |
||||
As for "bfwInput" |
_bfw_list_ |
_bfw_sign_ |
_bfw_date_ |
_bfw_time_ |
_bfw_comment_ |
|
* See below |
The innerText property is used to output the corresponding values. |
|||||
HTML tags supported |
As for "bfwInput" |
TBODY |
All, provided that the innerText property is supported |
|||
Optional |
As for "bfwInput" |
X |
||||
Event handlers used |
As for "bfwInput" |
- |
- |
- |
- |
- |
* Belongs to _bfw_list_ (see above)The component is like an input field with additional functionality to be able to display signatures that have been executed. A BODY tag that contains exactly one table line is expected along with _bfw_list_ . This line is used as a template for the signature to be displayed. It is hidden when the component is initialized successfully. The template line is copied for every new signature to be displayed. Entering _bfw_list _ is optional. If it is missing, the component is like a normal input field. If it exists, further tags to display the signature data are expected. |
Class |
bfwOutput |
||
Functionality |
The component controls an output field. It may not contain further components. |
||
Component tag |
"Grouping" tag |
Elements of a component The element names must be assigned as attribute values of the "ID" HTML attribute of a tag. |
|
_bfw_label_ The innerText property of _bfw_label_ outputs the text. The value can be a string of any length. |
_bfw_field_ If no INPUT tag is used for _bfw_field_ , the innerText property is used to output the value. |
||
HTML tags supported |
All |
All, provided that the innerText property is supported |
INPUT type=textTDSPANDIV |
Optional |
X |
||
Event handlers used |
onkeypressoncontextmenu |
||
Status change |
- |
_bfw_css_inactive__bfw_css_disabled_ |
_bfw_css_inactive__bfw_css_disabled_ |
Class |
bfwCalculation |
||||
Functionality |
The component controls a calculation field. It may not contain further components. |
||||
Component tag |
"Grouping" tag |
Elements of a component The element names must be assigned as attribute values of the "ID" HTML attribute of a tag. |
|||
_bfw_label_ The innerText property is used to output the text. |
_bfw_icon_ Indicates whether the execution is required (_bfw_css_active_) or optional (_bfw_css_inactive_). |
_bfw_field_ |
_bfw_button_ The calculation is triggered with this. |
||
HTML tags supported |
All |
All, provided that the innerText property is supported |
All |
INPUT type=text |
All, provided that the onclick and onkeypress events are supported |
Optional |
X |
X |
|||
Event handlers used |
onkeypressonclickoncontextmenu |
onhelp |
|||
Status change |
- |
_bfw_css_active__bfw_css_inactive__bfw_css_disabled__bfw_css_error_ |
_bfw_css_active__bfw_css_inactive_ |
_bfw_css_active__bfw_css_inactive__bfw_css_disabled__bfw_css_error_ |
_bfw_css_active__bfw_css_inactive_ |
Class |
bfwExecute |
|||
Functionality |
The component controls a function call. It may not contain further components. |
|||
Component tag |
"Grouping" tag |
Elements of a component The element names must be assigned as attribute values of the "ID" HTML attribute of a tag. |
||
_bfw_label_ Outputs the text through the innerText property. |
_bfw_button_ Marks the pushbutton as such.If no _bfw_button_ is defined, the "grouping" tag is used as the button. |
|||
HTML tags supported |
All |
All, provided that the innerText property is supported |
All, provided that the onclick and onkeypress events are supported |
|
Optional |
X |
X |
||
Event handlers used |
onhelp |
onhelponkeypressonclickoncontextmenu |
||
Status change |
- |
_bfw_css_active__bfw_css_inactive__bfw_css_disabled_ |
_bfw_css_active__bfw_css_inactive__bfw_css_disabled_ |
|
Class |
bfwTable |
||||
Functionality |
The component controls a table. A table may contain components of all classes described before. |
||||
Component tag |
"Grouping" tag |
Elements of a component The element names must be assigned as attribute values of the "ID" HTML attribute of a tag. |
|||
_bfw_tab_label_ Outputs the text through the innerText property. |
_bfw_tab_scroll_ See * below. |
_bfw_tab_body_ A TABLE tag is expected for this. This table must comprise a header (THEAD) and at least one body (TBODY).See ** below. |
_bfw_tab_text_ Outputs the column heading. A _ bfw_tab_text_ line is expected at any position in the header. |
||
HTML tags supported |
All |
All, provided that the innerText property is supported |
DIV |
TABLE |
TR |
Optional |
X |
X |
|||
Event handlers used |
onhelponcontextmenuonresize |
onhelp |
|||
Status change |
- |
_bfw_css_active__bfw_css_inactive__bfw_css_disabled_ |
_bfw_css_active__bfw_css_inactive__bfw_css_disabled_ |
_bfw_css_active__bfw_css_inactive__bfw_css_disabled_ |
|
* Belongs to _bfw_tab_scroll_ (see above) _bfw_tab_scroll_ can be used to declare a DIV tag, which enables scrolling in the table. The component controls the visible area. For this, the _bfw_params_ attribute must be used to pass on further parameters in the "grouping" tag:HBASE: Basis height (pixel)HLINE: Line height (pixel)HMIN: Total height (pixel) that the scrollable area is to have at leastLINES: number of lines to be displayed without scroll function Example: ... _BFW_PARAMS_=“HBASE:22;HLINE:22;HMIN:88;LINES:10;“ ... ** Belongs to _bfw_tab_body_ (see above )The first table body (TBODY) is used to represent the table lines. Before it is initialized, this body must comprise exactly one line, which is then used as a template for new lines. After the body has been initialized successfully, the template line is hidden. During the status change, the table header lines and table bodies are controlled in the same way as _bfw_tab_body_ . |