Reference Information: Definition of ERP-Active Components

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

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

End of the example.

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