IS BENCHMARK - Donutsdocshare01.docshare.tips/files/24241/242414054.pdf · 2. Set the attributes of...

BSP Directives<%@ extension><%@ include><%@ page><% %><%# %><%-- --%><%= %><%= %><%=otr() %><otr>

BSP Extension

IS BENCHMARK

Functionality

This BSP extension facilitates performance tests on other BSP extensions and BSPs.

Note

This BSP extension is included in the test BSP application it00, see bspext_benchmark.htm.

Example

<%@extension name="Benchmark" prefix="bm" %>

Hello World!

<% DO 1000 TIMES. ENDDO. %> </bm:exclude></bm:duration>

Further information

Weitere Informationen über BSP-Extensions finden Sie in der SAP-Bibliothek unter der Internetadresse help.sap.com/nw04 -> SAP NetWeaver -> Application Platform (SAP Web Application Server) -> ABAP-Technologie -> UI-Technologie -> Web-UI-Technologie -> Business Server Pages -> Programmiermodell -> BSP-Extensions.

IS BENCHMARK DURATION

Functionality

This BSP element counts and prints out the number of milliseconds that are required to calculate the body. The number is output after the body.

sapevent:DOCU_LINK%5CDS:KENO.CC96F394EC9E2940A302AEEBF7ADE4AE

sapevent:DOCU_LINK%5CDS:KENO.851F8B4C00BDAE40AB3F2E0A3C4EE0CF

For speed, you can surround this element with <datetime:format> and assign it with a suitable formatting string (in other words, with references to hours, minutes and seconds), so that a fairly legible duration is displayed.

The return value is usually between 1000 and 1010.

Attributes

Attribute Mandatory Descriptionrepeat Number of recurrences (default value:1)output If the value "true" is set, the element body is output (default value)

Further information

textDirectionText or writing direction

LTR (predominant writing direction in Indo-European languages) , RTL (predominant writing direction in Middle Eastern languages, for example, Hebrew and Arabic) , INHERIT (default value, use the writing direction already set on the page)

IS BENCHMARK EXCLUDE

Functionality

You use this BSP element to exclude the body from the benchmarking test. Some time may be required to process the elements themselves so that thay are not completely transparent. Nevertheless they may be useful for integrated timing of a subset of a compound computation.

Attributes

There are no attributes for this BSP element.

Example

Approximately 1010 is usually returned as the return value.

<benchmark:duration> <% Thread.sleep(1000); %> <benchmark:exclude> <% Thread.sleep(1000); %> </benchmark:exclude></benchmark:duration>

Further information

INCLUDE TX_TEXTDIRECTION OBJECT DOKU ID TX LANGUAGE EN

<bsp:bee>

IS BSP CALL

Functionality

<bsp:call> calls the controller defined by the URL and embeds the output from this controller into this position in the layout.

If no instance of the specified controller exists, an instance is created and instantiated. If an instance of the specified controller exists with the identical ID (attribute comp_id), this instance is used. In this case the information specified in comp_id is sufficient to identify the controller - the URL and the key do not have to be specified. If the key attribute is specified instead of the url attribute, this refers to the navigation specified in the BSP application (however, this key is seldom used).

Parameters are transferred to the controller using internal elements of type <bsp:parameter>.

We recommend you follow the procedure below:

1. Initialize the controller you want to call in the controller making the call (DO_INIT) using controller_id.2. Set the attributes of the new controller using standard ABAP-OO methods.3. Use <bsp:call comp_id = ... > to call the new controller in the view.

Attributes

Name Mandatory Descriptioncomp_id Identification of the controller

key Navigation key. Keep in mind that this attribute is seldom used

url Specifies the controller

Example

See BSP application bsp_model

Further information


<bsp:deltahandlerblock>



<bsp:findandreplace>

IS BSP GOTO

Functionality

Like <bsp:call>, but here only the output created by the specified controller is sent. The output from the called controller with views is rejected. This is why it seems as though you have navigated to the other controller. However, with the next request the original page is returned to, that is, the browser URL does not change.

We recommend you proceed as follows:

1. Initialize the controller you want to call in the controller doing the calling (DO_INIT) with the controller_id.2. Set the attributes of the new controller using standard ABAP-00 methods.3. Call the new controller in the view using <bsp:call comp_id = ... >

Attributes

Name Mandatory Descriptionkey Key for the navigation. Note that this attribute is seldom used.

url Specifies the controller

Example


Further information

For more information about BSP extensions see the SAP Library at the Internet address help.sap.com/nw04-> SAP NetWeaver -> Application Platform (SAP Web Application Server) -> ABAP Technology -> UI Technology -> Web UI Technology -> Business Server Pages -> Programming Model -> BSP Extensions.

IS BSP HTMLBEVENT

Functionality

This BSP element supports event handling if you are also using native HTML as well as htmlb.

Note

<bsp:htmlbEvent> is available in Web AS 620 as of SP43 and Web AS 640 as of SP05.

Attributes



sapevent:DOCU_LINK%5CDS:IS.BSP%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20CALL

Name Mandatory Description Possible Values

event_code

JavaScript code generated by the HTMLB event system to be used in the browser to trigger the specific HTMLB event. This string contains pure JavaScript code and should not be changed. Use this string directly in an HTML event handler, for example, in onClick. See also the example below.

String, for example,<% DATA: event_code TYPE STRING. %><bsp:htmlbEvent event_defined="myBtn2" event_code="<%=event_code%>" /> <%=event_code%>

event_defined

Many events need only a minimal string that contains additional information for the event. Instead of using additional parameters, you can also use this one string for this information. Note that this string has further significance for the HTMLB event system.

String or NULL (standard value)

event_type

Use this string to specify which type of event has been fired by the control. For example, a pushbutton can fire a click event, a page can fire events for scrolling up and down pages, and a table can fire an event for a line selection or a header click event. Note that this string has no other significance for the HTMLB event system,

Character string, for example, EVENT (default value)

id Unique name that identifies the BSP element.

Character string, for example, myhtmlbEvent

name

Specifies the name of the JavaScript function. In case you are using the event_code attribute, the JavaScript code is returned as an alternative, this means, it is placed in this string reference and no JavaScript function is rendered.

String

onClick String defined by the user for the event control. Example:

Event handler, for example, serverEvent (default value)

<htmlb:button onClick="myHandler"/>. This string can contain information that helps the user to handle the event correctly. Note that this string has no other significance for the HTMLB event system.

onClientClick

String for the onClientClick attribute used in many controls. This string must contain valid JavaScript code that can be executed later in the browser. Thisstring is not returned to the server.Specify at least one of the attributes onClick or onClientClick, otherwise no event handling code will be generated at all.

Event handler, for example alert('Submitting'); or htmlbevent.cancelSubmit = !window.confirm('Submit?');

p1..p3

Determines the parameters of the rendered JavaScript function. These parameters are forwarded to the code for the event handling.

String

return_value

The JavaScript code actually generated is embedded in an HTML OnClick sequence. Keep inmind the peculiarities of event handling with HTML. An example of this is the use of an anchor to render a control. If the OnClick event false is returned, the <a href> is also triggered. By default each JavaScript code contains a return false as the last command. This parameter can beset either to true or false to identify the value that is to be returned. If you leave the parameter empty you prevent a return value from being rendered. If in doubt we recommend you use the default value.

TRUE, FALSE (Standardwert), blank

Example

<%@page language="abap"%><%@extension name="bsp" prefix="bsp"%>

<%@extension name="htmlb" prefix="htmlb"%>

<htmlb:content design="design2003"><htmlb:page><htmlb:form>

<bsp:htmlbEvent name="buttonPressed" p1="btnId"/> <input type = "submit" value = "myButton1" onclick = "return buttonPressed('myBtn1')">

<% DATA: event_code TYPE STRING. %> <bsp:htmlbEvent event_defined="myBtn2" event_code="<%=event_code%>" /> <input type = "submit" value = "myButton2" onclick = "<%=event_code%>">

</htmlb:form></htmlb:page></htmlb:content>

Further information


For more information about event handling in BSP see the SDN under Web logs about BSP, " BSP In-Depth:Using the HTMLB Event System" (https://weblogs.sdn.sap.com/pub/wlg/634).

IS BSP KWLINK

Functionality

You can use this element to insert a link to documentation that is store d in the Knowledge Warehouse in your BSP application. The link appears either as a pushbutton or as a hyperlink on your page or view.

Note the following:

It is a prerequisite that the documentation is installed (Knowledge Ware house)

You need the number of the logical document (LOIO), to which the link sh ould point

There is no where-used list. In other words, from the development system there is no option to find out whether the document to which the link points was deleted from the Knowledge Warehouse in the meantime

Attributes

Name Mandatory Explanation Possible ValueskwLoio x Logical

document ID of the documentation object in the

For example 8B25183A3BEF2669E10000000A114084



Knowledge Warehouse

height Height of the display window

Numeric value, default value is 600

width Width of the display window

Numeric value, default value is 800

kwClass

Document class in the Knowledge Warehouse

IWB_STRUCT (info object display with the corresponding structure, default value) and IWB_EXTHLP (info object display without structure)

language Specifies the display language

Two-digit language key, such as EN for English or DE for German

renderAs Type of KW link display

HTMLB_LINK (hyperlink, default value) and HTMLB_BUTTON (pushbutton)

targetWindow Specifies the target window

NAME, _SELF, _BLANK

textExplanatory text in front of the KW link

Text

tooltip

Quick info text that appears when the cursor is moved over the KW link.

Text

windowFeaturesRawSpecifies the window properties

For example 'height=300,width=400,resizable=1,scrollbars=1'

Example

See BSP application SBSPEXT_BSP, page kwLink.bsp.

Event handling

No events are supported for this BSP element.

Data Extraction for Inbound Requests

Data handling is not supported for this BSP element.

Further information

INCLUDE TX_KWDOKU OBJECT DOKU ID TX LANGUAGE EN

<bsp:logoff_applications>

IS BSP PARAMETER

Functionality

These parameters are used for calling method SET_ATTRIBUTE( ) of the specified controller. In the controller class you can use the standard implementation of SET_ATTRIBUTE(), or you can overwrite theimplementation. For more information see the documentation (see path below) under ... Programming Model -> Model View Controller (MVC).

We recommend you proceed as follows:

1. Initialize the controller you want to call in the controller doing the calling (DO_INIT) using controller_id2. Set the attributes of the new controller using standard ABAP-OO methods3. Call the new controller in the view using <bsp:call comp_id = ... >

Attributes

Name Mandatory Decriptionname x Name

value Value

Example


Further information


IS BSP PORTALEVENT

Functionality

With this element you can register for a portal event that is fired from a different iView.

Note the following:

It is not possible to unsubscribe from a portal event. If an event is no longer to be handled this has to be established at the caller.

A portal event transports namespace, name, dataObject and sourceId. These can be fetched in class CL_PORTAL_EVENT as follows:

event_server_name = dataObjectevent_defined = sourceIdevent_id = namespace&name

To fire a portal event, call the JavaScript function portalFireEvent( <namespace>,<name>,<dataObject>,<sourceId>); for example in a button using the attribute onClientClick

Attributes

Name Mandatory Description Possible Valuesname X Event Name Character String

namespace X Namespace of event

Further information


<bsp:portalnavigationabsolute >

<bsp:portalnavigationrelative >

<bsp:portalnavigationtoobject >

<bsp:view >

<bsp:viewarea >

<bsp:testsuite >



sapevent:DOCU_LINK%5CDS:GLOS.52EEA80CD8B9D411BA5B0800060D888B

sapevent:DOCU_LINK%5CDS:GLOS.7BF05992CC8471428C011283CFDB1BF9



<bsp:testsuite >

BSPEXTTEST

IS BSPEXTTEST

Functionality

BSP Extension Library for test purposes

Further information


IS BSPEXTTEST ELEMENTWITHATTRIBUTES

Attribute

element_name

id

s

i

t

d

o

IS BSPEXTTEST ELEMENTWITHVARIABLES

____________________________________________________

Attribute

element_name

id

var_date



var_time

var_language

IS BSPEXTTEST ELEMENTTHAT:HAS-DOT.NAME

____________________________________________________

Attribute

element_name

IS BSPEXTTEST WRITERREQUIRED

____________________________________________________

Attribute

element_name

IS BSPEXTTEST ELEMENTTHATDONTPROCESSPAGE

____________________________________________________

Attribute

element_name

IS BSPEXTTEST BODYTAGDEPENDENT

____________________________________________________

Attribute

element_name

IS BSPEXTTEST ELEMENTWITHREQUIREDID

____________________________________________________

Attribute

element_name

id

IS BSPEXTTEST ELEMENTWITHOPTIONALID

____________________________________________________

Attribute

element_name

id

IS BSPEXTTEST BODYONLYBSPINNERTAGS

____________________________________________________

Attribute

element_name

IS BSPEXTTEST ITERATIONREQUIRED

____________________________________________________

Attribute

element_name

repeat

IS BSPEXTTEST BODYBSP

____________________________________________________

Attribute

element_name

IS BSPEXTTEST ELEMENTLOOPINGOVERTABLE

____________________________________________________

Attribute

element_name

table

table_row

IS BSPEXTTEST ELEMENTTHATDONTPROCESSBODY

____________________________________________________

Attribute

element_name

<bsp:complex >

<bsp:compileroptions >

IS BSPEXTTEST BODYEMPTY

____________________________________________________

Attribute

element_name

<bsp:composite >

IS BTF

Functionality

The BTF (Business Text Framework) library provides the following BSP element for developing Web content:

WYSIWYG Editor for BTF Documents

Use

You can use this BSP extension in your BSP application by inserting the BSP element by means of drag & drop from the tag browser into your BSPs.

According to the definition of the page language ABAP, you determine the name of the BSP extension that you want to use by means of the extension directive. In this case, the extension is btf. You can create a prefix of your choice.

<%@ page language="abap"%><%@ extension name="htmlb" prefix="htmlb"%><%@ extension name="btf" prefix="btf"%>

<htmlb:content> <htmlb:page title = "BSP Extension: BTF / Element: editor"> <htmlb:form>

<btf:editor id = "myEditor1" document = "<%=application-> m_document%> " />

</htmlb:form> </htmlb:page> </htmlb:content>

Further information

Examples for the BTF library are in the BSP application BTF_EXT_DEMO.

IS BTF EDITOR

Functionality

This BSP element realizes an editor for BTF documents with a WYSIWYG view (What You See Is What You Get) and a source view.

BTF documents can be edited (formatted and so on), or just displayed.

Attributes

Name Mandatory Descriptionid x Unique name that identifies the BSP element.

document xYou use this attribute to determine the BTF document that you want to edit or display. The value of this attribute has to be standardized with TYPE REF TO IF_BTF_DOCUMENT.

disabledYou use this attribute to determine whether the BTF document can be edited or just displayed. The values for this attribute are FALSE (default setting) and TRUE.

width You use this attribute to determine the width for the editor.height You use this attribute to determine the height for the editor.

onClientInsertImageYou use this attribute to set a client-side event handler that is calledif you click "Insert Image". This function is shown only if this attribute has been set.

onClientInsertLinkYou use this attribute to set a client-side event handler that is calledif you click "Insert Link". This function is shown only if this attribute has been set.

sourceViewYou use this attribute to determine whether to edit or display the BTF document in the source view. The values of this attribute are FALSE (default setting) and TRUE.

Example

<%@ page language="abap"%><%@ extension name="htmlb" prefix="htmlb"%><%@ extension name="btf" prefix="btf"%>

<htmlb:content> <htmlb:page title = "BSP Extension: BTF / Element: editor"> <htmlb:form>

<btf:editor id = "myEditor1" document = "<%=application-> m_document%> " />

</htmlb:form> </htmlb:page> </htmlb:content>

Event handling

The BSP element btf_editor does not have any events.


If you want to read the changed document, you can do so in the phase of the event handling in OnInputProcessing. You use the event of a htmlb:button element to trigger the code that extracts the data from the btf:editor element.

The following is an example of the event handler OnInputProcessing:

CLASS CL_HTMLB_MANAGER DEFINITION LOAD.CLASS CL_BTF_BSP_MANAGER DEFINITION LOAD.

DATA: event TYPE REF TO CL_HTMLB_EVENT.event ?= CL_HTMLB_MANAGER=>GET_EVENT( runtime->server->request ).

IF event->id = 'submitButton' AND event->event_type = 'click'.

DATA: data TYPE REF TO CL_BTF_BSP_EDITOR. data ?= CL_BTF_BSP_MANAGER=>GET_DATA( request = runtime->server->request name = 'editor' id = 'myEditor1' ). IF data IS NOT INITIAL. document = data->document. ENDIF.

ENDIF.

Note that all restored data for an element is written to the element class explicitly. In the case of the btf:editor element, the class CL_BTF_BSP_EDITOR is used. One instance of this class is returned by the BTF BSP Manager.

The following attributes are restored or set:

id

document

sourceView

Tips and Tricks

The WYSIWYG view is available for IE Version 5.5 and higher only. In all other browsers, the source view is used automatically.

For the function 'Load Local File', the <form> element requires the following:

method="post"

encodingType="multipart/form-data"

Further information

Examples for the BTF library are in the BSP application BTF_EXT_DEMO

Chtmlb

<chtmlb:calendar_daily>

<chtmlb:calendar_freebusy>

<chtmlb:calendar_monthly>

<chtmlb:calendar_weekly>

<chtmlb:config>

<chtmlb:configCellerator>

<chtmlb:configAreaFrameSetter>

<chtmlb:configGrid>

<chtmlb:configGridCell><chtmlb:configTable><chtmlb:configToolbar><chtmlb:configTree><chtmlb:content>

<chtmlb:header><chtmlb:inputExtension><chtmlb:overviewFormConfig><chtmlb:overviewTableConfig>

<chtmlb:pageType><chtmlb:scriptBeforeSubmit><chtmlb:splitter><chtmlb:splitterContainer><chtmlb:summaryGroupConfig><chtmlb:summaryPage><chtmlb:summaryTableConfig><chtmlb:tableExtension>

crm_bsp_ic

<crmic:button>

IS CRM_BSP_IC BUTTON

Functionality

This Business Server Page (BSP) element implements the classic GUI element, the button. When users choose the button, the system triggers a predefined action.

When users choose a button, event CLICK is triggered. You can use the corresponding onClick event handler to complete a predefined task. The CLICK event can be activated or deactivated dynamically by using the attribute disabled. When a button is deactivated, it no longer responds to user actions.A button element has a text description (attribute text) and can also have a tooltip (attribute tooltip).The appearance and total size of buttons are defined using style sheets. The design attribute allows a selection between standard size and smaller size for buttons. You can use this attribute to emphasize the importance of certain buttons.

Attributes

Name Obligatory Description

id Unique name that identifies the Business Server Page (BSP) element. This attribute is used in event handling.

text You use this attribute to define the descriptive text that precedes the button itself.

encode

You use this attribute to define the coding. TRUE and FALSE are the possible values here. When this attribute is set to TRUE, the text is written as HTML source text. Example: text = "This text is <b>displayed</b> perfectly and has a tooltip." In this example, the word "displayed" appears in bold. When this attribute is set to FALSE, the text appears exactly as it stands.

tooltip You use this attribute to define a text for the tooltip. This text appears when the cursor moves over the button.

onClick You use this attribute to set the event handler, which is called when users choose the button. An event is sent to the server.

onClientClick You use this attribute to set the client-side event handler, which is called when users choose the button.

focus Defines whether there is a navigation focus on the button; that is, whether users can go to the button by using a key combination.

priority Defines the priority of the button. If the priority is equal to 1, this button is thedefault button on the page.

tabindex Defines in which sequence the buttons should be activated.

visible When this attribute is set to FALSE, the button is hidden.

width You use this attribute to define the width of the button.

designYou use this attribute to define the current design for rendering the button. Possible values are: STANDARD (standard value), EMPHASIZED, and SMALL.

disabled You use this attribute to define whether the button can be chosen in order to trigger the CLICK event.

Example

<%@page language="abap"%><%@extension name="htmlb" prefix="htmlb"%><%@extension name="crm_bsp_ic" prefix="crmic"%>

<htmlb:content>

<htmlb:page title = "BSP Extension: HTMLB / Element: Button"> <htmlb:form>

<crmic:button id = "myButton1" text = "standard" />

<crmic:button id = "myButton2" text = "Emphasized button" tooltip = "Quick info: Please click me" onClick = "MyButtonClick" design = "emphasized" />

<crmic:button id = "myButton3" text = "Small button with fixed size" tooltip = "Quick info: Please click me" onClientClick = "alert('myButton3 Clicked')" design = "small" width = "300" />

</htmlb:form></htmlb:page>

</htmlb:content>

NoteSee also BSP application SBSPEXT_HTMLB, page button.bsp.

Event handling

A BSP element can have many events. The BSP element button has only two event handlers: onClick and onClientClick.

Normally, you implement your user interface elements by using a <form> element in the layout of your BSP that refers back to the same page. In this standard case, you generate the coding for the event handling in the OnInputProcessing section. Within the OnInputProcessing event handler, events from the HTMLB BSP extension can be recognized and analyzed using the event ID variable. This variable has valueCL_HTMLB_MANAGER=>event_id for all HTMLB events. Normally, events are handled accordingly in the context of this framework:

IF event_id = CL_HTMLB_MANAGER=>event_id. ... handle HTMLB event... ENDIF.

You can implement handling of HTMLB events in two ways. The first technique involves retrieving the event data and subsequently processing the data (normally in a large case statement). The alternative involves triggering an event at a user-instanced event class.

Scenario 1: Get the event and process the data

In this case, the HTMLB manager is called up to get a reference to a generic event object of type CL_HTMLB_EVENT. You can use attributes name and event_type in this event object in order to determine which kind of event is available. If the element supports attribute id, you can use the id attribute to find out which element triggered the event. For detailed event data, construct the event object from an event object with the appropriate type. In this case, you would use a button event. For more information about the button event, see class CL_HTMLB_EVENT_BUTTON. DATA: event TYPE REF TO CL_HTMLB_EVENT. event = CL_HTMLB_MANAGER=>get_event( runtime->server->request ). IF event->name = 'button' AND event->event_type = 'click'. DATA: button_event TYPE REF TO CL_HTMLB_EVENT_BUTTON. button_event ?= event. ENDIF.NotePlease note that for BSP element <button> and the onClick events, the corresponding event class is CL_HTMLB_EVENT_BUTTON.

Scenario 2:

The interface IF_HTMLB_EVENT is available for event handling. This interface contains methods for all BSP elements that are used in BSP extension HTMLB and that use events.The event can trigger a user-specific event handler class. In this case, the event handling class canbe any user-defined class you like, as long as it implements interface IF_HTMLB_EVENT and an instance has been generated. Normally, you can use the application class to handle specific events. The only prerequisite for using the application class is that it must implement interface IF_HTMLB_EVENT.In the following example, a separate class called CL_HTMLB_EVENT_EXAMPLE is used for event handling: DATA: event_handler TYPE REF TO CL_HTMLB_EVENT_EXAMPLE. CREATE OBJECT event_handler. CL_HTMLB_MANAGER=>dispatch_event( request = runtime->server-

sapevent:DOCU_LINK%5CDS:IF.IF_HTMLB_EVENT

>request event_handler = event_handler page_context = page_context ).The button element triggers event IF_HTMLB_EVENT~BUTTON_CLICK, which also contains the additional parameter id.The onClick attribute is for all triggered events. This is the user-assigned name for the event handler method.NoteAll the button-click events for all the buttons on the page are triggered by this method. As the programmer, ensure that you choose the correct ID to decide which button is triggered.



Tips and Tricks

We recommend that you use either the onClick or onClientClick event handler, because adding a button without one of these event handlers is pointless. Obviously, a button element without an event handler always appears in a deactivated state.

BSP element inputField can also define a small-scale design. We recommend using the samedesign for entry fields and buttons that are functionally or semantically connected.

Buttons normally do not seem very "Web-like," and should therefore be avoided, where possible. From a usability perspective, you should only use buttons if information or data is to be saved to the server. Never use buttons for navigation; use hyperlinks instead. From an accessibility perspective, buttons are difficult for Braille devices to recognize.

Further information

For more information about BSP extensions, see BSP Extensions.

For general information about BSP applications, see Business Server Pages.

IS CRM_BSP_IC CHECKBOX

Functionality

You can use this BSP element to implement the concept of a single on/off switch. If you want to offer a groupof logically related checkboxes, you should also use BSP element checkboxGroup. You can use checkboxGroup to organize individual checkboxes into rows and columns.

A checkbox element depicts a state within your program that has on/off logic.

The internal element structure is made up of the following:

Imbedded BSP elements

Pure HTML

sapevent:DOCU_LINK%5CDS:IS.CRM_BSP_IC%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20CHECKBOXGROUP



sapevent:DOCU_LINK%5CDS:IS.CRM_BSP_IC%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20INPUTFIELD

Attributes


id Unique name that identifies the Business Server Page (BSP) element. This attribute is used in event handling and data handling.

text You use this attribute to define the descriptive text that appears next to the checkbox.

tooltip You use this attribute to define a text for the tooltip. This text appears when the cursor moves over the checkbox.

disabled You use this attribute to define whether the checkbox can be checked (activated).

encode

You use this attribute to define the coding. TRUE and FALSE are the possible values here. When this attribute is set to TRUE, the text is written as HTML source text. Example: text = "This text is <b>displayed</b> perfectly and has a tooltip." In this example, the word "displayed" appears inbold. When this attribute is set to FALSE, the text appears exactly as it stands.

checked

You use this attribute to define the initial state of the checkbox. Possible values are FALSE (default value, not checked) and TRUE (checked). Example: If you only define the ID for a checkbox (id = "myCheckbox") and dynamically specify checked (checked = "<%=checked%>"), and the checkbox appears checked, then the form fields return: name = id und value = id. If the checkbox is not checked, no form fields are returned.

key

Value of the checkbox. If you give a key a specific value, such as "yes" , andthe checkbox is checked (checked = TRUE), the value of the checkbox can be taken from the form fields by request. If you do not give a specific value for key and leave it in its initial state, the default value, the ID, is taken as thename.

keyNotChecked You use this attribute to manage a checkbox value that was not set. You canmanage this value for further processing. If you enter a value for keyNotChecked, you can get the implicit value of an unchecked checkbox from form fields upon request. For example, if for attribute key, "yes" is checked, "no" would be returned. If you do not give a specific value for keyNotChecked and leave it in its initial state, the system uses the default

value, and this parameter remains blank. Example: <crmic:checkbox id = "myCheckbox" key = "X" keyNotChecked = "-" checked = "<%=checked%>" /> If the checkbox is checked, the form fields return: name = id and value = 'X'. If the checkbox is not checked, the form fields for the old design (design classic) return nothing at all. However, for the new design(design2002), the value that is specified in key or keyNotChecked is returned.

onClick You use this attribute to set the event handler, which is called when users check the checkbox. An event is sent to the server.

onClientClick You use this attribute to set an event handler for checking the checkbox.

focus Defines whether there is a navigation focus on the checkbox; that is, whether users can go to the checkbox by using a key combination.

priority Defines the priority of the checkbox. If priority = 1, focus is set to this checkbox.

Example

See BSP application SBSPEXT_HTMLB, page checkbox.bsp.

Event handling

A BSP element can have many events. The BSP element checkbox has only two event handlers: onClick and onClientClick.





In this case, the HTMLB manager is called up to get a reference to a generic event object of type CL_HTMLB_EVENT. You can use attributes name and event_type in this event object in orderto determine which kind of event is available. If the element supports attribute id, you can use the id attribute to find out which element triggered the event. For detailed event data, construct the event object from an event object with the appropriate type. In this case, you would use a checkbox event. For more information about the checkbox event, see class CL_HTMLB_EVENT_CHECKBOX. DATA: event TYPE REF TO CL_HTMLB_EVENT. event = CL_HTMLB_MANAGER=>get_event( runtime->server->request ). IF event->name = 'checkbox ' AND event->event_type = 'click'. DATA: checkbox_event TYPE REF TO CL_HTMLB_EVENT_CHECKBOX. checkbox_event ?= event. ENDIF.NotePlease note that for BSP element <checkbox> and the onClick events, the corresponding event class is CL_HTMLB_EVENT_CHECKBOX.

Scenario 2:

The interface IF_HTMLB_EVENT is available for event handling. This interface contains methods for all BSP elements that are used in BSP extension HTMLB and that use events.The event can trigger a user-specific event handler class. In this case, the event handling class canbe any user-defined class you like, as long as it implements interface IF_HTMLB_EVENT and an instance has been generated. Normally, you can use the application class to handle specific events. The only prerequisite for using the application class is that it must implement interface IF_HTMLB_EVENT.In the following example, a separate class called CL_HTMLB_EVENT_EXAMPLE is used for event handling: DATA: event_handler TYPE REF TO CL_HTMLB_EVENT_EXAMPLE. CREATE OBJECT event_handler. CL_HTMLB_MANAGER=>dispatch_event( request = runtime->server->request event_handler = event_handler page_context = page_context ).The checkbox element triggers event IF_HTMLB_EVENT~CHECKBOX_CLICK, which also contains the following additional parameters.

o ID

ID of the element that is usedo ON_CLICK

Name of the event handler that was entered by the userThe onClick attribute is for all triggered events. This is the user-assigned name for the event handler method.NoteAll the checkbox-click events for all the checkboxes on the page are triggered by this method. Asthe programmer, ensure that you choose the correct ID to decide which checkbox is triggered.


If you want to read the checked status of a checkbox, this happens in the event handling phase in OnInputProcessing. As an example, the OnInputProcessing event handler can look like this:

DATA: checkbox TYPE REF TO CL_HTMLB_CHECKBOX.checkbox ?= CL_HTMLB_MANAGER=>GET_DATA(


request = runtime->server->request name = 'checkbox' id = 'cb1' ).IF checkbox IS NOT INITIAL. checked = checkbox->checked.ENDIF.

Note that all data that was reproduced for an element is written explicitly in the element class. The class CL_HTMLB_CHECKBOX is used for this purpose for checkbox elements. HTMLB manager returns an instance of this class.

The following attributes are reproduced or set:

ID

CHECKED

Further information



IS CRM_BSP_IC CHECKBOXGROUP

Functionality

This Business Server Page (BSP) element arranges a group of checkboxes ( checkBox) into rows and columns. The checkboxes can be selected individually.

The columnCount attribute defines how the checkboxes are arranged in rows and columns. Checkboxes that appear one after the other are arranged in rows.

To include a checkbox in a group, simply add the corresponding checkBox element to thecheckBoxGroup element.

The internal element structure is made up of checkBox elements.

Attributes



columnCount You use this attribute to define the amount of columns for the checkbox group.

width You use this attribute to define the width of the checkbox group.

sapevent:DOCU_LINK%5CDS:IS.CRM_BSP_IC%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20CHECKBOX





Example

See BSP application SBSPEXT_HTMLB, page checkboxgroup.bsp.

Event handling

Events are not supported for this BSP element.



Tips and Tricks

If you make more entries available than columnCount allows, the system ignores the excess entries. However, if there are not enough entries available, the leftover cells appear as empty cells in the group. If you do not set columnCount explicitly, the system assumes you want one single column.

Further information



IS CRM_BSP_IC DROPDOWNLISTBOX

Functionality

This Business Server Page (BSP) element is similar to the classic graphic user interface (GUI) concept of a dropdown list box.

You can use this element as a replacement for the listBox element if you want to display long lists that would otherwise take up too much space on the page.

You can define the list entries in a dropDownListBox element in two different ways:

1. Statistically in the layout section of a BSP application2. By binding data to a table

You can also combine these two processes.

The first process is very simple. You add as many listBoxItems as necessary to the DropDownListBox element. Note that you must always define the attribute key. You can find a complete list of the attributes for listBoxItem under listBoxItem.

The second process, data binding to a table, is mostly useful for applications written in ABAP, since this language provides direct support for tables. You need at least one table with two columns that contain the key and text ID pairs. Assign this table to the attribute table of the dropDownListBox element. You must assign the name of the table columns to the attributes nameOfKeyColumn and nameOfValueColumn.

sapevent:DOCU_LINK%5CDS:IS.CRM_BSP_IC%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20LISTBOXITEM

sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20LISTBOX



If the user chooses a list entry, this triggers a select event. You can then install an onSelect or onClientSelect event handler to use scripts to handle this event. You can use the selection attribute to get or set the currently selected list entry. The selected entry is displayed in the first row of the dropDownListbox element.

The internal element structure is made up of listBoxItem elements.

Attributes


idUnique name that identifies the Business Server Page (BSP) element. This attribute is used in event handling and data handling.

tooltip

You use this attribute to define a text for the tooltip. This text appears when the cursor moves over the dropdown list box. Note that this attribute is not available in Microsoft Internet Explorer.

disabledYou use this attribute to define whether the dropdown list box can be chosen in order to trigger the SELECT event.

tableYou use this attribute to specify the data source for the table. The values for the dropdown list box will be takenfrom this table.

selection You use this attribute to define the list entry that is currently chosen.

nameOfKeyColumn You use this attribute to define the name of the key column of the table.

nameOfValueColumn You use this attribute to define the name of the key value of the dropdown list box.

onSelect You use this attribute to set the server-side event handler, which is called when users select a list entry.

sapevent:DOCU_LINK%5CDS:IS.CRM_BSP_IC%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20LISTBOXITEM

onClientSelect You use this attribute to set the client-side event handler, which is called when users select a list entry.

backgroundColor

You use this attribute to set the color of the backgroundof the dropdown list box. You can specify the color using the hexadecimal value of the color or by directly entering its name (such as brown or dark blue).

textColor

Use this attribute to determine the color of the text to be displayed. You can specify the color using the hexadecimal value of the color or by directly entering its name (such as brown or dark blue).

nameOfBackgroundColorColumn You use this attribute to define the name of the background color column of the table.

nameOfTextColorColum You use this attribute to define the name of the background color column of the table.

encode


focusDefines whether there is a navigation focus on the dropdown list box; that is, whether the dropdown list box can be activated by using a key combination.

priority Defines the priority of the dropdown list box. If priority =1, focus is set to this dropdown list box.

Example

See BSP application SBSPEXT_HTML, page DropDownListBox.bsp.

Event handling

A BSP element can have many events. The BSP element dropDownListBox has only two event handlers: onSelect and onClientSelect.





In this case, the HTMLB manager is called up to get a reference to a generic event object of type CL_HTMLB_EVENT. You can use attributes name and event_type in this event object in order to determine which kind of event is available. If the element supports attribute id, you can use the id attribute to find out which element triggered the event. For detailed event data, construct the event object from an event object with the appropriate type. In this case, you would use a dropDownListBox event. For more informationabout the dropDownListBox event, see class CL_HTMLB_EVENT_SELECTION. CLASS CL_HTMLB_MANAGER DEFINITION LOAD. DATA: event TYPE REF TO CL_HTMLB_EVENT. event = CL_HTMLB_MANAGER=>get_event( runtime->server->request ). IF event->name = 'dropdownListBox' AND event->event_type = 'select'. DATA: dd_listbox_event TYPE REF TO CL_HTMLB_EVENT_SELECTION. dd_listbox_event ?= event. ENDIF.NotePlease note that for BSP element <dropdownListBox> and the select events, the corresponding event class is CL_HTMLB_EVENT_SELECTION.

Scenario 2:

The interface IF_HTMLB_EVENT is available for event handling. This interface contains methods for all BSP elements that are used in BSP extension HTMLB and that use events.The event can trigger a user-specific event handler class. In this case, the event handling class canbe any user-defined class you like, as long as it implements interface IF_HTMLB_EVENT and an instance has been generated. Normally, you can use the application class to handle specific events. The only prerequisite for using the application class is that it must implement interface IF_HTMLB_EVENT.In the following example, a separate class called CL_HTMLB_EVENT_EXAMPLE is used for event handling: DATA: event_handler TYPE REF TO CL_HTMLB_EVENT_EXAMPLE. CREATE OBJECT event_handler. CL_HTMLB_MANAGER=>dispatch_event( request = runtime->server->request


event_handler = event_handler page_context = page_context ).The dropdownListBox element triggers event IF_HTMLB_EVENT~DROPDOWNLISTBOX_SELECT, which contains the two interesting parameters id and selection. The id is the ID of the BSP element, and selection is the element that is currently selected.NoteAll the dropdownListBox select events for all the dropdown list boxes on the page are triggered by this method. As the programmer, ensure that you choose the correct ID to decide which dropdown list box is triggered.


If you want to read the dropdown list box, this happens in the event handling phase in OnInputProcessing. To trigger coding that reads the data from the dropdownListBox element, you would normally use anevent from a button element.

As an example, the OnInputProcessing event handler can look like this:

.... DATA: data TYPE REF TO CL_HTMLB_DROPDOWNLISTBOX. data ?= CL_HTMLB_MANAGER=>GET_DATA( request = runtime->server->request name = 'dropdownlistbox' id = 'mydropdownListBox1' ). IF data IS NOT INITIAL. selection2 = data->selection. ENDIF.

Note that all data that was reproduced for an element is written explicitly in the element class. The class CL_HTMLB_DROPDOWNLISTBOX is used for this purpose for dropdownListBox elements. HTMLB manager returns an instance of this class.

Tips and Tricks

The dropdownListBox element is not intended for displaying lists with thousands of entries. Generally, a list should never contain more than 30 entries. Ensure that the size of your HTML pages increases proportionately according to the number of your entries.

The list entries appear in the sequence in which they were added. List entries that were instantiatedwith data binding always appear after the entries that were created with listBoxItem in the layout section of the page.

Further information



<crmic:comboBox>

IS CRM_BSP_IC GRIDLAYOUT



sapevent:DOCU_LINK%5CDS:IS.CRM_BSP_IC%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20BUTTON

Functionality

This Business Server Page (BSP) element lets you arrange controls or views into a table-like format.

Many documents can be viewed as a collection of nested boxes. For example, the layout of a newspaper consists of multiple columns, which can contain articles. The articles, in turn, contain a title and a block of text. Pictures may also appear. The text may be organized into many separate sections. These building blocks in a newspaper are boxes; rectangular areas that can be arranged on the page like a table. The gridLayout element provides a simple way to create such documents, but with considerably more function: Each cell of a gridLayout element can accommodate one element. The element itself normally has no visible design of its own.

The internal element structure is made up of gridLayoutCell.

Attributes


id Unique name that identifies the Business Server Page (BSP) element. Thisattribute is used in event handling and data handling.

width You use this attribute to define the width of the grid layout.

height You use this attribute to define the height of the grid layout.

widthPredefine

If this attribute is set to TRUE, the width of the cells is predefined by dividing the width by the number of columns. An approximate value is then used for each column, in order to define uniform column sizes within the GridLayout.

blocks

Number of blocks within the grid layout. Default is one block. If blocks are set to "2" and columnSize is set to "8", an additional narrow column is added after four columns, in order to separate the blocks from one another.Necessary for certain layouts.

rowSize X You use this attribute to define the number of rows.

columnSize X You use this attribute to define the number of columns.

sapevent:DOCU_LINK%5CDS:IS.CRM_BSP_IC%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20GRIDLAYOUTCELL

cellSpacing You use this attribute to define the spacing between the individual cells in the grid.

cellPadding You use this attribute to define the spacing between the cell border and cell contents.

debugMode You use this attribute to define whether you want to work in debugging mode.

styleYou use this attribute to replace the background color with the "standard look & feel". Possible values include: ALTERNATING, TRANSPARENT, STANDARD (default) and WHITE.

Example

<%@page language="abap"%><%@extension name="htmlb" prefix="htmlb"%>

<htmlb:content> <htmlb:page title = "BSP Extension: HTMLB / Element: gridLayout"> <htmlb:form>

<crmic:gridLayout id = "myGridLayout1" <%-- debugMode = "true" --%> width = "100%" cellSpacing = "1" columnSize = "2" rowSize = "2" >

<crmic:gridLayoutCell rowIndex="1" columnIndex="1" style="ALTERNATING"> <crmic:button id="myButton1" text="Click me"/> < /crmic:gridLayoutCell>

<crmic:gridLayoutCell id = "myGridLayoutCell2" rowIndex = "1" columnIndex = "2" horizontalAlignment = "right"> 1 + 2 < /crmic:gridLayoutCell>

<crmic:gridLayoutCell rowIndex="2" columnIndex="1" style="WHITE"> <crmic:button id="myButton2" text="Click me" /> < /crmic:gridLayoutCell>

<crmic:gridLayoutCell rowIndex="2" columnIndex="2"> 2 + 2 </crmic:gridLayoutCell>

</crmic:gridLayout>

</htmlb:form> </htmlb:page></htmlb:content>

NoteSee also BSP application SBSPEXT_HTMLB, page gridexample.bsp.

Event handling




Further information



IS CRM_BSP_IC GRIDLAYOUTCELL

Functionality

This Business Server Page (BSP) element presents the characteristics of an individual cell in a gridLayout element. You can use the attributes width, horizontalAlignment, and verticalAlignment to define the size and alignment for these cells. It is also possible for one cell to stretch across multiple columns. In this case, set attribute colspan.

Attributes



rowIndex X You use this attribute to define an index for the rows.

columnIndex X You use this attribute to define an index for the columns.

height You use this attribute to define the height of the cell.

horizontalAlignmentYou use this attribute to define the horizontal alignment of an entry within the cell. Possible values include LEFT, CENTER, RIGHT, JUSTIFY, and CHAR.

sapevent:DOCU_LINK%5CDS:IS.CRM_BSP_IC%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20GRIDLAYOUT



verticalAlignmentYou use this attribute to define the vertical alignment of an entry within the cell. Possible values include TOP, MIDDLE, BOTTOM and BASELINE.

width

You use this attribute to define the width of the cell. Depending on cell width and the length of the text, you can use the following attribute to define whether the system should use a return to wrap the text within the cell.

wrappingYou use this attribute to define whether the text in the cell should be wrapped or whether it should remain on one line within the cell. For more information, see the previous attribute.

colSpan You use this attribute to define the number of columns that one cell may encompass.

backgroundColor

You use this attribute to set the background color of a cell in the grid layout. You can specify the color using the hexadecimal value of the color or by directly entering its name (such as brown or dark blue).

styleYou use this attribute to replace the background color with the "standard look & feel". Possible values include: ALTERNATING, TRANSPARENT, STANDARD (default) and WHITE.

Example

See example in gridLayout.

NoteSee also BSP application SBSPEXT_HTMLB, page gridexample.bsp.

Event handling




Further information

sapevent:DOCU_LINK%5CDS:IS.CRM_BSP_IC%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20GRIDLAYOUT



IS CRM_BSP_IC INPUTFIELD

Functionality

This Business Server Page (BSP) element implements the concept of a generic, one-celled input field. The content type of this field is determined entirely by the type of the corresponding data object, which creates comprehensive flexibility.

The inputField element is highly dependent upon the concepts of data objects and data binding. All generic data objects are supported: STRING for strings, INTEGER for whole numbers, BOOLEAN for Boolean statements, BCD (binary coded decimals) for fixed point numbers (data type "P" in ABAP) and also DATE and TIME for date and time entries. The data type that accepts an inputField element can be set explicitly with attribute type.

Attributes


id XUnique name that identifies the Business Server Page (BSP) element.This attribute is used in event handling and data handling.

design

You use this attribute to define the font in which the output text shouldappear. For example, a text can be displayed as the topmost heading, or in normal font. Possible values are: STANDARD (standard value) and SMALL.

required You use this attribute to define whether an input field is a required entry field or not; in other words, whether user entry is mandatory.

width Use this attribute to define the text width for the input field. We recommend using the size attribute instead of width.

size You use this attribute to define the size of the input field.

maxLength You use this attribute to define the maximum length of the user entries.



showHelpYou use this attribute to define whether a button, which can be used todisplay the input help, should appear right next to an input field. Please note that this attribute can only be set for date fields.

visibleYou use this attribute to define whether the input field should be visibleor hidden; in other words, whether or not the BSP element should be rendered in the BSP.

disabledYou use this attribute to define whether the input field is available for entry at a certain time. If the input field is currently not available for entry, any content that was entered previously is "grayed out".

value You use this attribute to define the default value of the input field.

description You use this attribute to define the general description test.

password You use this attribute to define whether the input field should be password protected.

alignment You use this attribute to define the general text alignment. Possible values include RIGHT and LEFT.

cellValue You use this attribute to define whether or not the input field is in a table view. TRUE and FALSE (default) are possible values here.

decimals You use this attribute to define the number of decimal places. This is only valid for binary coded decimal (BCD) data.

invalidYou use this attribute to define whether the input field should be rendered with an invalid status; in other words, it indicates that a previously-entered value is invalid.

isLabeled You use this attribute to define whether the input field should have a

label (see also label).

firstDayOfWeekYou use this attribute to define the first day of a week for the dateNavigator element help. Possible values are: 0 (default), 1, 2, 3, 4, 5, and 6.

type You use this attribute to define the data type of the input field. Possiblevalues include: STRING, DATE, TIME, BCD, BOOLEAN, INTEGER.

helpDestination If you set this value, you define the destination for calling up the help. This must be maintained in transaction SM59.

helpIdThis attribute is used for the help function when attribute onValueHelp is not set. It contains the search help ID for the element for which a search help should be displayed.

helpInputFields List of input fields that should be linked to the search help. Format: InputFieldId1=HelpFieldId1;InputFieldId2=HelpFieldId2;...

helpOutputFields List of return fields that should be linked to the search help. Format: OutputFieldId1=HelpFieldId1;OutputFieldId2=HelpFieldId2;...

helpTriggerSubmit Defines whether a round trip should be triggered after a value is selected in the search help.

roundtripAfterTab Defines whether the system should trigger a round trip after users enter a value and go to the next field with the tab key.

focus Defines whether there is a navigation focus on the input field; that is, whether users can go to the input field by using a key combination.

priority Defines the priority of the input field. If priority = 1, focus is set to this input field.

sapevent:DOCU_LINK%5CDS:IS.CRM_BSP_IC%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20LABEL

Example


<htmlb:content> <htmlb:page title = "BSP Extension: HTMLB / Element: InputField"> <htmlb:form>

<crmic:inputField id = "myInputField1" invalid = "true" value = "<%=value%>" required = "true" />

<crmic:inputField id = "myInputField2" invalid = "false" value = "with 'small' design" required = "true" design = "small" />

<crmic:inputField id = "myInputField3" type = "date" required = "false" firstDayOfWeek = "2" showHelp = "true" />

<crmic:inputField id = "myInputField4" type = "string" required = "false" password = "true" />

<crmic:button id = "submitButton" text = "Submit" onClick = "HandleSubmit" />


NoteSee also BSP application SBSPEXT_HTMLB, page inputfield.bsp.

Event handling



If you want to read the input field, this happens in the event handling phase in OnInputProcessing. To triggercoding that reads the data from the inputField element, you would normally use an event from a button element.

As an example, the OnInputProcessing event handler can look like this:


CLASS CL_HTMLB_MANAGER DEFINITION LOAD. DATA: event TYPE REF TO CL_HTMLB_EVENT. event ?= CL_HTMLB_MANAGER=>GET_EVENT(runtime->server->request ).


DATA: data TYPE REF TO CL_HTMLB_INPUTFIELD. data ?= CL_HTMLB_MANAGER=>GET_DATA( request = runtime->server->request name = 'inputField' id = 'myInputField1' ). IF data IS NOT INITIAL. value = data->value. ENDIF.

ENDIF.

Note that all data that was reproduced for an element is written explicitly in the element class. The class CL_HTMLB_INPUTFIELD is used for this purpose for inputField elements. HTMLB manager returns an instance of this class.

Data Binding with CL_BSP_MODEL

In the context of the Model View Controller (MVC) design pattern, basis class CL_BSP_MODEL gives you the framework for an application model. You can use this class in your own model class as a class that passes on its properties. The model class represents the data context of your application and as a result, receives a copy of the data that is relevant for the view from the database model.

The following is a list of the attributes that are available for data binding.The binding type indicates whether the data binding is read-only or whether reading as well as writing is possible.The column with the value from binding to attribute indicates whether the value of an attribute, such as size, is retrieved from the model data of another attribute, such as value. In this case, the system gets the length from the meta data for the model attribute that is specified for value. Since for inputField, the value attribute is the only one that is bound with reading and writing capabilities, as many element attributes as possible are filled from the meta data for this attribute.In the comments column, more information appears, such as information about whether the attribute can be overwritten.

AttributeBinding Type

Value from Binding to Attribute

Comment

design reading -

disabled reading -

firstDayOfWeek reading -

id value Can be overwritten If specified, the HTML ID is taken from the entry. The HTML attribute "name" is taken from

the model.

invalid value Cannot be overwritten

maxlength valueCan only be overwritten if it is not available in the model data.

onValueHelp reading value Can be overwritten

password reading -

required reading -

showHelp value Cannot be overwritten

size valueCan only be overwritten if it is not available in the model data.

type valueCannot be overwritten. No data conversion takes place inthe element during model binding.

valuereading and writing

-

visible reading -

decimals value

Tips and Tricks

Please note that the attributes invalid and required are neither set nor evaluated by the inputField element itself. The application is responsible for recognizing invalid or missing user entries and setting the corresponding attributes, if necessary.

Normally, you should not set the width of the inputField element with the general attribute width. Instead, you should use the element-specific attribute size, which functions exactly like the corresponding attribute of the HTML <input> tag. The value of size is specified in characters instead of pixels and is correctly aligned with font sizes and units of measurement.

When the showHelp attribute is set, a symbol appears on the right next to the inputField element, which looks very similar to a button for a dropDownListBox. For input fields that are bound to a data source of type date, there is a built-in help function available. In this case, a dialog box appears with a dateNavigator element. Users can choose any day in the calendar view. The system automatically returns the corresponding date to the input field.

Further information



IS CRM_BSP_IC LABEL

Functionality

This Business Server Page (BSP) element makes a label available for an inputField.

Attributes


id Unique name that identifies the Business Server Page (BSP) element. This attributeis used in event handling and data handling.

for X You use this attribute to specify the input field for which the label should appear.

text You use this attribute to specify the text that should appear before the input field.

design

You use this attribute to define the font in which the output text should appear. For example, a text can be displayed as the topmost heading, or in normal font. Possible values include: STANDARD (default), HEADER1, HEADER2, HEADER3, EMPHASIZED, LABEL, LABELSMALL, LEGEND, REFERENCE.

required You use this attribute to define whether the input field is a mandatory input field.

sapevent:DOCU_LINK%5CDS:IS.CRM_BSP_IC%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20INPUTFIELD



encode You use this attribute to define the coding.

tooltip You use this attribute to define a text for the tooltip. This text appears when the cursor moves over the label in front of the input field.

widthYou use this attribute to define the text length for the label. Depending on width and the length of the text, you can use the following attribute to define whether the system should use a return to wrap the text within the cell.

wrappingYou use this attribute to define whether the label text in front of the input field shouldbe wrapped or whether it should remain on one line. For more information, see the previous attribute.

hidden You use this attribute to define whether the label should be displayed. Generally used for accessibility to allow clear assignment of labels to input fields.

Example

See BSP application SBSPEXT_HTMLB, page Label.bsp.

Event handling


Data Extraction for Incoming Requests

Data Binding with CL_BSP_MODEL

In the context of the Model View Controller (MVC) design pattern, basis class CL_BSP_MODEL gives you the framework for an application model. You can use this class in your own model class as a class that passes on its properties. The model class represents the data context of your application and as a result, receives a copy of the data that is relevant for the view from the database model.

The following is a list of the attributes that are available for data binding.The binding type indicates whether the data binding is read-only or whether reading as well as writing is possible.The column with the value from binding to attribute indicates whether the value of an attribute is retrieved from the model data of another attribute.In the comments column, more information appears, such as information about whether the attribute can be overwritten.


Value from Binding to Attribute

Comment

design reading -

for reading -If this attribute is bound, it does not mean that the value of the model fieldis used as the "for" attribute. It means that label and inputField can be bound to the same model element.

id reading forCan be overwritten. If the attribute is not specified, the label ID is generated from the "for" attribute by adding "_1".

required reading -

text reading for

Can be overwritten. The text can be bound as an attribute to a model field. If it is not specified or bound, it is required that the "for" attribute be bound. In this case, the text is retrieved from the label of the "for" attribute. If more than one label is specified (in the data dictionary, short, medium, and long texts are possible), the system searches in the sequence "medium -> long -> short" to find a label that is not blank.

tooltip reading forSee previous comment. If the value is to be retrieved from the bound "for"attribute, the system chooses the long label.

Further information



IS CRM_BSP_IC LINK

Functionality

This Business Server Page (BSP) element provides a hyperlink function for internal elements.

Note

We recommend that you always use relative URLs in your BSP applications.

The BSP element link gives you more flexibility since it can include a textView or image element, for example. The most important attribute, reference, defines the target URL for the link in the usual



notation. Additionally, you can use onClick to define your own event handler, which lends your link characteristics and behavior similar to that of a button.

The structure of an internal element contains:

Imbedded BSP elements

Pure HTML

Attributes


id XUnique name that identifies the Business Server Page (BSP) element. This attribute is used in event handling and data handling.

onClick

You use this attribute to set the event handler, which is called when users choose the link. The system sends an event to the server, which returns the reference as a parameter. The reference can then be processed further.

onClientClickYou use this attribute to define a JavaScript that is started when users click on the link. This script is executed within the framework, meaning that it triggers other events.

onClientClickScriptYou use this attribute to define a JavaScript that is started when users click on the link. This script is started without other scripts, meaning that it is not within the framework.

reference You use this attribute to define the target URL for the link.

target You use this attribute to define the frame that the link leads to. Note that this attribute is only effective when HREF is specified.

text You use this attribute to define simple text links. You can also set thetext using the body of the BSP element.

tooltip You use this attribute to define a text for the tooltip. This text appears when the cursor moves over the link.


disabled Defines whether the link should only be displayed, but not possess any navigation functions.

focus Defines whether there is a navigation focus on the link; that is, whether users can access the link by using a key combination.

priority Defines the priority of the link. If priority = 1, focus is set to this link.

tabindex Defines in which sequence the links should be accessed.

wrapping This attribute defines whether the text of the link can be wrapped.

Example

Sample layout for a link with text and tooltip, as well as a link with an image:


<htmlb:content> <htmlb:page title = "BSP Extension: HTMLB / Element: Link"> <htmlb:form>

<crmic:link id = "link1" text = "Link With Text" reference = "http://www.sap.de" tooltip = "Quick-Info mit Linkreferenz: http://www.sap.de" onClick = "MyLinkClick" /> <crmic:link id = "link2" reference = "http://www.sap.de" > <htmlb:image src="../it00/father_son.jpg" alt="Not available"/> </crmic:link>


NoteSee also BSP application SBSPEXT_HTMLB, page link.bsp.

Event handling

A BSP element can have many events. The BSP element link has only one single event handler, onClick, which is transferred when users click on a hyperlink.



You can implement handling of HTMLB events in two ways. The first technique involves retrieving the event data and subsequently processingthe data (normally in a large case statement). The alternative involves triggering an event at a user-instanced event class.


In this case, the HTMLB manager is called up to get a reference to a generic event object of type CL_HTMLB_EVENT. You can use attributes name and event_type in this event object in order to determine which kind of event is available. If the element supports attribute id, you can use the id attribute to find out which element triggered the event. For detailed event data, construct the event object from an event object with the appropriate type. In this case, you would use a link event. For more information about the link event, see class CL_HTMLB_EVENT_LINK. DATA: event TYPE REF TO CL_HTMLB_EVENT. event = CL_HTMLB_MANAGER=>get_event( runtime->server->request ). IF event->name = ' link ' AND event->event_type = 'click'. DATA: link_event TYPE REF TO CL_HTMLB_EVENT_LINK. link_event ?= event. " navigation->goto_page( link_event->reference ). " return. ENDIF.NotePlease note that for BSP element <link> and the onClickevent, the corresponding event classis CL_HTMLB_EVENT_LINK.

Scenario 2:

The interface IF_HTMLB_EVENT is available for event handling. This interface contains methods for all BSP elements that are used in BSP extension HTMLB and that use events.The event can trigger a user-specific event handler class. In this case, the event handling class canbe any user-defined class you like, as long as it implements interface IF_HTMLB_EVENT and an instance has been generated. Normally, you can use the application class to handle specific events. The only prerequisite for using the application class is that it must implement interface IF_HTMLB_EVENT.In the following example, a separate class called CL_HTMLB_EVENT_EXAMPLE is used for event handling: DATA: event_handler TYPE REF TO CL_HTMLB_EVENT_EXAMPLE. CREATE OBJECT event_handler. CL_HTMLB_MANAGER=>dispatch_event( request = runtime->server->request event_handler = event_handler


page_context = page_context ).The link triggers event IF_HTMLB_EVENT~LINK_CLICK.Parameter DescriptionID ID of the element that is used

ON_CLICK Name of the event handler that was entered by the user

REFERENCE Reference parameter that was originally specified in the link element that was returned

NoteAll the link-click events for all the hyperlinks on the page are triggered by this method. As the programmer, ensure that you choose the correct ID to decide which link is triggered.



Tips and Tricks

If you want to display a link as an image, use an <htmlb: image> element (see example).

You can also use the BSP element link with other elements as TextView or image as content. Note that due to general HTML limitations, the behavior of hyperlinks cannot be guaranteed and is highly dependent on the capabilities of the browser.

Further information



IS CRM_BSP_IC LISTBOXITEM

Functionality

This Business Server Page (BSP) element makes available embedded list items for dropDownListBox and for ListBox.

This element has no internal element structure.

Attributes

Name Obligatory Descriptionkey X You use this attribute to define the unique key of the list item.

selected You use this attribute to define whether the list item is selected.


sapevent:DOCU_LINK%5CDS:IS.CRM_BSP_IC%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20DROPDOWNLISTBOX



value X You use this attribute to define the content of the list item.

backgroundColorYou use this attribute to set the color of the background of an entry in the list box. You can specify the color using the hexadecimal value of the color or by directly entering its name (such as brown or dark blue).

textColorUse this attribute to determine the color of the text to be displayed. You can specify the color using the hexadecimal value of the color or by directly entering its name (such as brown or dark blue).

Example

See the examples in: dropDownListBox and ListBox.

Event handling




Further information



<crmic:overflowContainer>

IS CRM_BSP_IC RADIOBUTTON

Functionality

You can use this BSP element to implement the concept of a single radio button. Since radio buttons always appear in groups of logically related radio buttons, you need the grouping BSP element radioButtonGroup.

Attributes



sapevent:DOCU_LINK%5CDS:IS.CRM_BSP_IC%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20RADIOBUTTONGRP

sapevent:DOCU_LINK%5CDS:%20KENO.851F8B4C00BDAE40AB3F2E0A3C4EE0CF



sapevent:DOCU_LINK%5CDS:IS.CRM_BSP_IC%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20DROPDOWNLISTBOX

tooltip You use this attribute to define a text for the tooltip. This text appears when the cursor moves over the radio button.

checkedYou use this attribute to define whether the radio button is selected. TRUE means that it is selected. If you do not assign a value to this attribute, it is not selected.

encode


text You use this attribute to define the descriptive text that precedes the radio button.

onClick You use this attribute to set the event handler, which is called when users select the radio button. An event is sent to the server.

groupId ID of the button group. If this is set, the external element radioButtonGrp is no longer necessary.

onClientClick You use this attribute to set the client-side event handler, which is called when users select the radio button.

disabled You use this attribute to define whether the radio button can be chosen in order to trigger the CLICK event.

focus Defines whether there is a navigation focus on the radio button; that is, whether users can access the radio button by using a key combination.

priority Defines the priority of the radio button. If priority = 1, focus is set to this radio

button.

Example

See example in radioButtonGroup.

NoteSee also BSP application SBSPEXT_HTMLB, page radiobuttongroup.bsp.

Event handling

A BSP element can have many events. The BSP element radioButton has only two event handlers: onClick and onClientClick.





In this case, the HTMLB manager is called up to get a reference to a generic event object of type CL_HTMLB_EVENT. You can use attributes name and event_type in this event object in order to determine which kind of event is available. If the element supports attribute id, you can use the id attribute to find out which element triggered the event. For detailed event data, construct the event object from an even t object with the appropriate type. In this case, you would use a radioButton event. For more information about the radioButton event, see class CL_HTMLB_EVENT_RADIOBUTTON. DATA: event TYPE REF TO CL_HTMLB_EVENT. event = CL_HTMLB_MANAGER=>get_event( runtime->server->request ). IF event->name = 'radioButton' AND event->event_type = 'click'. DATA: radiobutton_event TYPE REF TO CL_HTMLB_EVENT_RADIOBUTTON. radiobutton_event ?= event. ENDIF.NotePlease note that for BSP element <radioButton> and the onClick events, the corresponding event class is CL_HTMLB_EVENT_RADIOBUTTON.

Scenario 2:

The interface IF_HTMLB_EVENT is available for event handling. This interface contains methods for all BSP elements that are used in BSP extension HTMLB and that use events.The event can trigger a user-specific event handler class. In this case, the event handling class canbe any user-defined class you like, as long as it implements interface IF_HTMLB_EVENT and an


sapevent:DOCU_LINK%5CDS:IS.CRM_BSP_IC%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20RADIOBUTTONGRP

instance has been generated. Normally, you can use the application class to handle specific events. The only prerequisite for using the application class is that it must implement interface IF_HTMLB_EVENT.In the following example, a separate class called CL_HTMLB_EVENT_EXAMPLE is used for event handling: DATA: event_handler TYPE REF TO CL_HTMLB_EVENT_EXAMPLE. CREATE OBJECT event_handler. CL_HTMLB_MANAGER=>dispatch_event( request = runtime->server->request event_handler = event_handler page_context = page_context ).The radioButton element triggers event IF_HTMLB_EVENT~RADIOBUTTON_CLICK, which also contains the following additional parameters:

o ID

ID of the element that is usedo ON_CLICK

Name of the event handler that was entered by the userThe onClick attribute is for all triggered events. This is the user-assigned name for the event handler method.NoteAll the radioButton-click events for all the radio buttons on the page are triggered by this method. As the programmer, ensure that you choose the correct ID to decide which radio button is triggered.



Further information


For general information about BSP applications, see .

IS CRM_BSP_IC RADIOBUTTONGRP

Functionality

This Business Server Page (BSP) element arranges a group of radio buttons ( radioButton ) into columns. Only one radio button can be selected at a time. When one radio button is selected, the previously selected radio button is automatically deselected. One possible application area for this Business Server Page (BSP) element would be a screen on which many options are offered for selection.

The columnCount attribute defines how the radio buttons are arranged in columns. Radio buttons that appear one after the other are arranged in rows.

To include a radio button in a group, simply add a corresponding radioButton element to the radioButtonGroup element.

This way, the core element structure is made up of radioButton elements.

sapevent:DOCU_LINK%5CDS:IS.CRM_BSP_IC%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20RADIOBUTTON

sapevent:DOCU_LINK%5CDS:IS.CRM_BSP_IC%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20RADIOBUTTON

sapevent:DOCU_LINK%5CDS:KENO.851F8B4C00BDAE40AB3F2E0A3C4EE0CF%20Business%20Server%20Pages%3C/


Attributes



columnCount You use this attribute to define the amount of columns for the radio button group.

selection You use this attribute to define the radio button that is currently chosen.

displayTable If this attribute is set to TRUE, the system displays the imbedded radio buttons in a table.

Example


<htmlb:content> <htmlb:page title = "BSP Extension: HTMLB / Element: radioButtonGroup & radiobutton"> <htmlb:form>

<crmic:radioButtonGroup id = "myRadioButtonGroup1" columnCount = "3" selection = "<%=selection%>" >

<crmic:radioButton id = "myRadioButton1" text = "Red" tooltip = "Click the radiobutton, clicking the text does not work" onClientClick = "alert('myRadioButton1 Clicked')" onClick = "MyRadioButtonClick" />

<crmic:radioButton id = "myRadioButton2" text = "Blue" onClick = "MyRadioButtonClick" />

<crmic:radioButton id = "myRadioButton3" text = "Green" onClick = "MyRadioButtonClick" />

<crmic:radioButton id = "myRadioButton4" text = "Yellow" />

<crmic:radioButton id = "myRadioButton5" > <htmlb:image src="../it00/father_son.jpg" alt="Image not avaiable"/> </crmic:radioButton>

</crmic:radioButtonGroup>



Event handling



If you want to read the selected status of a radio button, this happens in the event handling phase in OnInputProcessing. As an example, the OnInputProcessing event handler can look like this:

DATA: radioButtonGroup TYPE REF TO CL_HTMLB_RADIOBUTTONGROUP.radioButtonGroup ?= CL_HTMLB_MANAGER=>GET_DATA( request = runtime->server->request name = 'radioButtonGroup' id = 'myRadioButtonGroup1' ).

IF radioButtonGroup IS NOT INITIAL. selection = radioButtonGroup->selection.ENDIF.

Note that all data that was reproduced for an element is written explicitly in the element class. The class CL_HTMLB_RADIOBUTTONGROUP is used for this purpose for radioButtonGroup elements. HTMLBmanager returns an instance of this class.


SELECTION

Tips and Tricks

Initially, none of the radio buttons in the group is selected. When you create this element, you should always explicitly set the selection attribute.

If you do not set columnCount explicitly, the system assumes you want one single column.

Further information





IS CRM_BSP_IC TABLEVIEW

Functionality

This Business Server Page (BSP) element displays mass data using a layout similar to a table (TableView).

Tables are useful in many business applications. The tableView element is data-oriented; in other words,it relies heavily on the concept of data binding. Therefore, the most important attribute is table, to which every appropriate external table must be assigned. A tableView element without a corresponding data source is useless.

In certain cases, a tableView element should not display the entire contents of the data source, but only a certain number of lines in a certain area. The amount of rows that is visible can be defined or limited by using the attributes visibleFirstRow and visibleRowCount. In the former attribute, the index of the first visible line of the data source is saved, while in the latter attribute, the total number of visible rows is defined. Please note that the row area defined by these attributes should be a subset of the data that is actually made available by the data source. If the data source contains fewer rows than visibleRowCount requires, the tableView element displays the missing rows as blank rows by default. You can avoid this by deleting the fillUpEmptyRows attribute. If the data source contains no data, for example due to a failed database query, you should define a text for attribute emptyTableText that lets the user know what happened.

A tableView element can have a title bar, column headings, and a footer. The title bar only appears if the headerText attribute is defined. To activate the column titles or the footers, set the headerVisible orfooterVisible attributes. By default, the footer contains the status display with the amount of table rows that are currently visible. If the navigationMode attribute is defined, buttons also appear in the footer. These buttons allow navigation within the tableView element.

A tableView element is made up of an internal element tableViewCols, which in turn may contain one or more tableViewColumn elements.

Attributes

Name Obligatory Description Possible Values

id X

Unique name that identifies the Business Server Page (BSP) element. This attribute is used in event handling and data handling.

String, such as myTableView

table XYou use this attribute to define the table that is to be rendered.

Table name, predefined ABAP type DATA

design

You use this attribute to define the current design for rendering the table view.

STANDARD (default), ALTERNATING and TRANSPARENT

sapevent:DOCU_LINK%5CDS:IS.CRM_BSP_IC%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20TABLEVIEWCOLUMN

sapevent:DOCU_LINK%5CDS:IS.CRM_BSP_IC%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20TABLEVIEWCOLS

headerVisibleYou use this attribute to define whether the header is visible.

FALSE (default) and TRUE

columnHeaderVisible

You use this attribute to define whether column titles are visible.

TRUE (default) and FALSE

columnDefinitions

Table for defining the standard behavior of columns. DISPLAY_BEE and EDIT_BEE are especially effective for defining the rendering behavior for display and change mode. Werecommend using this table, instead of internal elements, to define which columns are rendered.

See structure TABLEVIEWCONTROL

columnWidthYou use this attribute to define the width a column.

Numeric value

columnWrapping

You use this attribute to define whether the text within a column should allow wrapping.


footerVisible

You use this attribute to define the visibility ofthe footer, including thenavigation buttons, andso on.


fillUpEmptyRows You use this attribute to activate and


deactivate the automatic population ofblank table rows if the number of currently visible table rows is less than the number of the counted visible table rows (see visibleRowCount).

filter You use this attribute to define a filter.

NONE (default, no filter available), SERVER (HTMLB is responsible for filtering) and APPLICATION (the application takes care of filtering)

filterButtonText

You use this attribute inthe classic design (seecontent element) to specify a button with text when filtering is used and selectionMode is set tosomething other than NONE.

FilterButtonTooltip

You use this attribute inthe classic design or inDesign2002 (see content element) to specify a button with text and a tooltip when filtering is used and selectionMode is set tosomething other than NONE. For Design2002, there is an image and tooltip for this purpose.

onFilter

You use this attribute to set a server-side event handler when the filter is activated.

String

iterator You use this attribute to change the rendering behavior for

See also IF_HTMLB_TABLEVIEW_ITERATOR

rows and depending on which row was selected. In this way, you define that, after a certain row and depending on this row, something should happen. You can define what should happen using columnDefinitions or overWriteDefinitions.

keepSelectedRow

You use this attribute to define that the selection should be kept visible if this attribute is set to TRUEand the application takes on the sorting function.

FALSE (default value, which means that the visibleFirstRow attribute is not changed) and TRUE

keyColumn

Unique key (column name) in the table that lets you use the full capabilities of the table, such as automatic filtering and sorting.

Column name of the table

overWriteDefinitions

Override for the defaultbehavior for certain cells (see columnDefinitions)

See also structure TABLEVIEWOVERWRITE

sortYou use this attribute to define sorting for theindividual rows.

NONE (default, no sorting), SERVER (HTMLB is responsible for sorting) and APPLICATION (the application takes care of sorting). If you enter SERVER, you should also set the keyColumn and onHeaderClick attributes.

widthYou use this attribute to define the width of the entire table.

Numeric value

navigationMode

Definition of how the table view responds to scrolling commands. If the footer is visible, theinformation that is displayed there includes either the range of visible rows orthe range of visible page numbers, depending on the navigation mode.

BYPAGE (default) and BYLINE

selectionMode Selection options for the user

NONE (default, no selection), SINGLESELECT (single selection), MULTISELECT (multiple selection), LINEEDIT (line editing). The latter means that clicking on a row makes only that row available for editing. When another row is selected, the editing modeis deactivated. If DESIGN 2002 is active (from the content element), one click on the same row switches from edit mode todisplay mode.

headerTextYou use this attribute to define title of the table.

Desired text

onNavigate

You use this attribute to define a server-side event handler that is always called up if users click on a column title in the table.

Name of event handler (example: onMyNavigate)

onHeaderClick

You use this attribute to define a server-side event handler that is always called up if users click on a column title for sorting in the table.

Name of event handler

onRowSelection Definition of a server- Name of event handler

side event handler thatis called up when a table row is selected.

visibleFirstRow

You can use this attribute to define which row should be the first row dispayed.

1 (default), or any numeric value

visibleRowCount

Specification of how many table rows should be visible. By default, all table rows are visible when the table is created.

Numeric value

rowCountYou use this attribute to define the number ofrows in the table.

Numeric value

emptyTableText

You use this attribute to define the text that appears in a table with no contents.

Table is empty! (default value)

selectedRowIndex

You use this attribute to define an index for the rows that are currently selected.

selectedRowKey

You use this attribute to define a key for the rows that are currently selected.

summary You use this attribute to define summary information about a table that can be read by an external program. This attribute is important for

accessibility purposes.

focus

Defines whether there is a navigation focus on the table; that is, whether users can go to the table by using a key combination.

priority

Defines the priority of the table. If priority = 1,focus is set to this table.

Example


<htmlb:content> <htmlb:page title = "BSP Extension: HTMLB / Element: tableView"> <htmlb:form>

<crmic:tableView id = "tv1" headerText = "Connections" headerVisible = "true" design = "alternating" visibleRowCount = "8" fillUpEmptyRows = "true" onHeaderClick = "MyEventHeaderClick" onRowSelection = "MyEventRowSelection" selectionMode = "multiselect" table = "<%=sflight%>" >

<crmic:tableViewCols>

<crmic:tableViewColumn columnName = "carrid" wrapping = "true" width = "100" onCellClick = "MyCellClickCarrid__" horizontalAlignment="center" title = " " type = "user" > <htmlb:textView id="$TVCID$" text = "$TVCVALUE$" design = "LABELSMALL" layout = "PARAGRAPH" required = "TRUE" width = "100%" tooltip = "$CARRNAME$" encode = "FALSE" wrapping = "TRUE" /> </crmic:tableViewColumn>

<crmic:tableViewColumn columnName = "myicon" type = "user"

title = "Image" horizontalAlignment="center" > <crmic:link id = "$TVCID$" onClick = "$CARRNAME$" tooltip = "$CARRNAME$"> <htmlb:image src = "$TVCVALUE$" alt = "$TVCVALUE$" tooltip = "$CARRNAME$" /> </crmic:link> </crmic:tableViewColumn>

<crmic:tableViewColumn columnName = "myinputfield" type = "user" title = "Input Field" cellInvalidKey = "invalid" cellDisabledKey = "disabled" horizontalAlignment="center" > <crmic:inputField id = "$TVCID$" width = "100%" value = "$myinputfield$" type = "Date" showHelp = "true" firstDayOfWeek = "2" /> </crmic:tableViewColumn>

<crmic:tableViewColumn columnName = "mybutton" type = "button" title = "Button" cellDesignKey = "design" onItemClick = "MyButton__" horizontalAlignment="center" />

<crmic:tableViewColumn columnName = "fldate" onCellClick = "MyCellClickFldate__" title = "Datum" wrapping = "true" width = "100" horizontalAlignment="center" />

<crmic:tableViewColumn columnName = "DDLKEY" title = "User defined: List Box" type = "user" > <crmic:dropdownListBox id = "$TVCID$" table = "<%=sflight%>" nameOfKeyColumn = "DDLKEY" nameOfValueColumn = "CARRNAME" /> </crmic:tableViewColumn>

<crmic:tableViewColumn columnName = "linktextid" title = "Link" type = "link" linkColumnKey = "linkcarrid" linkClickTarget = "_blank"/>

<crmic:tableViewColumn columnName="linkstextid" onItemClick = "MyLink__" title = "Link with Handler" type = "link" linkColumnKey = "linkcarrid"/>

<crmic:tableViewColumn columnName="linkid" horizontalAlignment = "center"

type = "imagelink" linkColumnKey = "linkcarrid" linkClickTarget = "_blank" title = "ImageLink" />

</crmic:tableViewCols> </crmic:tableView>


NoteSee also BSP application SBSPEXT_HTMLB, page tableView.bsp.

Tips and Tricks

The tableView element automatically gets the appropriate field labels from the dictionary information of the table types (if available) and displays them as column headings. Heading is usedas the default field label. If you need to make available your own column headings, create a field catalog for the tableView element.

The tableView element always hides the client column (field name MANDT) for dictionary table types.

Further information



IS CRM_BSP_IC TABLEVIEWCOLS

Functionality

This Business Server Page (BSP) element makes a wrapper for table entries available for a tableView element.

The internal element structure of this element is made up of individual tableViewColumn elements.

Attributes


Example

See example in tableView.

NoteSee also BSP application SBSPEXT_HTMLB, page TableView.bsp .

Event handling

sapevent:DOCU_LINK%5CDS:IS.CRM_BSP_IC%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20TABLEVIEW

sapevent:DOCU_LINK%5CDS:IS.CRM_BSP_IC%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20TABLEVIEWCOLUMN







Further information



IS CRM_BSP_IC TABLEVIEWCOLUMN

Functionality

This Business Server Page (BSP) element makes available individual table columns of a tableViewColumns of a tableView element.

Attributes

Name Obligatory DescriptioncolumnName X You use this attribute to define name of the table column.

encode

You use this attribute to define the coding. TRUE and FALSE are the possible values here. When this attribute is set to TRUE, the text is written as HTML source text. When this attribute is set to FALSE (default), the text appears exactly as it stands.

sort

You use this attribute to define sorting for the individual rows. Possible values include: NONE (default, no sorting), SERVER (HTMLB is responsible for sorting) and APPLICATION (the application takes care of sorting).

fixedColumn

You use this attribute to define that the entries in a column are fixedand should be sorted hierarchically. The same entries with the same contents are summarized. For new entries, a new row is automatically opened. TRUE and FALSE (default) are possible values here.

edit You use this attribute to define whether the cell can be edited. TRUE and FALSE (default) are possible values here.


sapevent:DOCU_LINK%5CDS:IS.CRM_BSP_IC%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20TABLEVIEWCOLS



horizontalAlignmentYou use this attribute to define the horizontal alignment of an entry within the table cell. Possible values include LEFT, CENTER (default), RIGHT, JUSTIFY, and CHAR.

IsAppendUnitYou use this attribute to define that the data value and corresponding unit should be output together, rather than in separate table columns.

linkClickTarget You use this attribute to define a hyperlink to the target.

linkColumnKey You use this attribute to define a hyperlink to a column.

onCellClick You use this attribute to define an event handler for clicking on a table cell.

onItemClick You use this attribute to define an event handler for clicking on an entry.

title You use this attribute to define the title of a table column.

tooltipColumnKey You use this attribute to define a text for the tooltip. This text appears when the cursor moves over the table column.

type

You use this attribute to define how the entries in the column should be handled by the renderer. The default value is TEXT, meaning that the column is formatted according to the type information or dictionary information of the data source. Additionally, the following values are possible: LINK (cells appear as hyperlinks), IMAGE (the column data is interpreted as URLs of pictures), EDIT (the cells of this column can be changed and appear as input fields), and BUTTON (the cells in this column appear as buttons).

unitColumnKey You use this attribute to define which symbols the current column should contain for units of measure or currency.

verticalAlignmentYou use this attribute to define the vertical alignment of an entry within the table column. Possible values include TOP, MIDDLE (default), BOTTOM and BASELINE.

width

You use this attribute to define the width of a table column. Depending on width and the length of the text, you can use the following attribute to define whether the system should use a returnto wrap the text within the cell.

wrapping

You use this attribute to define whether the text of a table column should be wrapped or whether it should remain on one line. For more information, see the previous attribute. Possible values include HARD (default), SOFT and OFF.

Example

See example in tableView.

NoteSee also BSP application SBSPEXT_HTMLB, page TableView.bsp.

Further information



IS CRM_BSP_IC TEXTEDIT

Functionality

This Business Server Page (BSP) element makes available a multi-row text input field that can be edited.

The textEdit element is intended for handling text entries with multiple lines.

You can define the number of text rows and columns with the rows and cols attributes. Both values are entered as characters and vary according to font size and system of measurement.

Attributes





id XUnique name that identifies the Business Server Page (BSP) element. This attributeis used in data handling.

tooltip You use this attribute to define a text for the tooltip. This text appears when the cursor moves over the text edit element.

text You use this attribute to specify the text that should appear in front of the text edit element..

disabled You use this attribute to define whether the text edit element is available for entry. TRUE and FALSE (default) are possible values here.

font You use this attribute to enter the text font for the text edit element.

cols You use this attribute to define the number of columns.

rows You use this attribute to define the number of rows.

height You use this attribute to define the height of the text edit element in pixels or percentage.

width You use this attribute to define the width of the text edit element in pixels or percentage.

wrapping You use this attribute to define whether the text within a text edit element should allow wrapping. Possible values include HARD (default), SOFT and OFF.

Example


<htmlb:content> <htmlb:page title = "BSP Extension: HTMLB / Element: textEdit">

<htmlb:form>

<crmic:textEdit id = "myTextEdit1" text = "<%=text%>" />

<crmic:button id = "submitButton" text = "Upload" onClick = "HandleUpload" />


NoteSee also BSP application SBSPEXT_HTMLB, page textedit.bsp.

Event handling



If you want to read the status of a textEdit element, this happens in the event handling phase in OnInputProcessing. As an example, the OnInputProcessing event handler can look like this:

CLASS CL_HTMLB_MANAGER DEFINITION LOAD.

DATA: data TYPE REF TO CL_HTMLB_TEXTEDIT.data ?= CL_HTMLB_MANAGER=> GET_DATA( request = runtime->server->request name = 'textEdit' id = 'myTextEdit1' ).IF data IS NOT INITIAL. text = data->text.ENDIF.

Note that all data that was reproduced for an element is written explicitly in the element class. The class CL_HTMLB_TEXTEDIT is used for this purpose for textEdit elements. HTMLB manager returns an instance of this class.


ID

TEXT

Further information





IS CRM_BSP_IC TRAY

Functionality

You use this Business Server Page (BSP) element to define a frame around an internal element. You can switch the visibility of the internal element by using the expand symbol in the element header.

The tray element is similar to the group element; the difference is that the tray element offers additional functions. In the collapsed state, it appears as a thin horizontal bar with a title and a symbol in the top right corner for expansion. If you choose this symbol, the contents of this element are expanded, and therefore visible. If you choose the symbol once again, the element returns to the collapsed state.

Since the contents of the element can be any imbedded element, a tray can be very useful if you need to store large amounts of information in a small space. However, please note that trays increase the complexity of your page and therefore decrease usability.

This element triggers two different events for expanding and collapsing the body elements: onExpand or onCollapse, respectively.

The tray element is visually very complex in appearance. It offers three different designs that are optimized for the most common applications.

The internal element structure is made up of a trayBody element.

Attributes



title You use this attribute to define the title of the tray.

tooltip You use this attribute to define a text for the tooltip. This text appears when the cursormoves over the tray.

width You use this attribute to define the width of the tray.

heightYou use this attribute to define the height of the tray. You can also make height entries using percentages or with two parameters (height in percentage, height in pixels). Example: height = "100%,663"

design You use this attribute to define the current design for rendering the tray. Possible

sapevent:DOCU_LINK%5CDS:IS.CRM_BSP_IC%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20TRAYBODY

values include: BORDER (default), BORDERLESS, FORM and TEXT.

Example

<%@page language="abap"%><%@extension name="crm_bsp_ic" prefix="crmic"%><%@extension name="htmlb" prefix="htmlb"%>

<htmlb:content> <htmlb:page title = "BSP Extension: HTMLB / Element: Tray"> <htmlb:form>

<crmic:tray id = "tray1" title = "Title of Tray" design = "text" width = "350" tooltip = "Tray Tooltip." > <crmic:trayBody> <crmic:textView text="body of the tray"/> </crmic:trayBody> < /crmic:tray> </htmlb:form> </htmlb:page></htmlb:content>

NoteSee also BSP application SBSPEXT_HTMLB, page tray.bsp.

Further information


For general information about BSP applications, see Business Server Pages

IS CRM_BSP_IC TRAY2

Functionality

You use this Business Server Page (BSP) element to define a frame around an internal element. You can switch the visibility of the internal element by using the expand symbol in the element header.

The tray element is similar to the group element; the difference is that the tray element offers additional functions. In the collapsed state, it appears as a thin horizontal bar with a title and a symbol in the top symbol in the top right corner for expansion. If you choose this symbol, the contents of this element are expanded, and therefore visible. If you choose the symbol once again, the element returns to the collapsed state.

Since the contents of the element can be any imbedded element, a tray can be very useful if you need to store large amounts of information in a small space. However, please note that trays increase the complexity of your page and therefore decrease usability.

This element triggers two different events for expanding and collapsing the body elements: onExpand or onCollapse, respectively.

sapevent:DOCU_LINK%5CDS:%20KENO.851F8B4C00BDAE40AB3F2E0A3C4EE0CF

sapevent:DOCU_LINK%5CDS:%20KENO.CC96F394EC9E2940A302AEEBF7ADE4AE

The tray element is visually very complex in appearance. It offers three different designs that are optimized for the most common applications.

The internal element structure is made up of a trayBody element.

Attributes



title You use this attribute to define the title of the tray.

tooltip You use this attribute to define a text for the tooltip. This text appears when the cursormoves over the tray.

frame You use this attribute to define the width of the frame around the tray. Default is one line with a width of one pixel.

mode If this attribute is set to DISABLED or HISTORIC, the background of the tray appears in "disabled" style (standard: gray).

width You use this attribute to define the width of the tray.

heightYou use this attribute to define the height of the tray. You can also make height entries using percentages or with two parameters (h eight in percentage, height in pixels). Example: height = "100%,663"

design You use this attribute to define the current design for rendering the tray. Possible values include: BORDER (default), BORDERLESS, FORM and TEXT.

Example

<%@page language="abap"%><%@extension name="htmlb" prefix="htmlb"%><%@extension name="crm_bsp_ic" prefix="crmic"%>

<htmlb:content design="DESIGN2002">

sapevent:DOCU_LINK%5CDS:IS.CRM_BSP_IC%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20TRAYBODY

<htmlb:page title = "BSP Extension: HTMLB / Element: Tray"> <htmlb:form>

<crmic:tray2 id = "tray1" title = "Title of Tray" design = "text" width = "350" tooltip = "Tray Tooltip." > <crmic:trayBody2> <htmlb:textView text="body of the tray"/> </crmic:trayBody2> </crmic:tray2>



Further information



IS CRM_BSP_IC TRAYBODY

Functionality

You use this Business Server Page (BSP) element to group the contents of a tray body. This element can contain internal elements.

This BSP element is imbedded in a tray.

Caution

This imbedded element is mandatory.

Attributes


Example

See example in tray.


Event Handling

sapevent:DOCU_LINK%5CDS:IS.CRM_BSP_IC%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20TRAY

sapevent:DOCU_LINK%5CDS:IS.CRM_BSP_IC%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20TRAY






Tips and Tricks

Further information



IS CRM_BSP_IC TRAYBODY2

Functionality

You use this Business Server Page (BSP) element to group the contents of a tray body. This element can contain internal elements.

This BSP element is imbedded in a tray.

Caution

This imbedded element is mandatory.

Attributes


Example

See example in tray.


Event handling




Further information



sapevent:DOCU_LINK%5CDS:IS.CRM_BSP_IC%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20TRAY2

sapevent:DOCU_LINK%5CDS:IS.CRM_BSP_IC%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20TRAY2




<crmic:tree>

<crmic:treeColumn>

IS HTMLB

Functionality

The HTML Business (HTMLB) Library provides an intuitive and easy-to-understand library for developing Web content. With HTMLB developers can:

Use browser-independent BSP elements in their BSP applications

Implement events for handling user actions in various ways

Retrieve user input

Use style sheets that are either predefined or user-defined, such as style sheets stored on a portal.

To do this, you simply specify sap-theme=<absolute_path> in the URL.

The design variants CLASSIC, DESIGN2002 and DESIGN2003 (from SAP Web AS 6.20 Support Package 27) are available in HTMLB.The individual design variants are supported by different browsers:

Design CLASSIC:

o Microsoft Internet Explorer from Version 5.01

o Netscape Navigator from Version 6.20

Design DESIGN2002:



Design DESIGN2003:



Note that with and within table views, replacing "$$" is not supported.

For Enterprise Portal 5, DESIGN2002 and CLASSIC are supported; for Enterprise Portal 6, DESIGN2003 and DESIGN2002 and CLASSIC are supported.


The HTMLB Library for BSP is available in every SAP Web Application Server 6.20 System (or higher) in thecontext of ABAP Workbench for creating Web applications with Business Server Pages.

Right to Left (RTL)

The standard way to write Middle Eastern languages, for example, Hebrew and Arabic, is from right to left (RTL). This is in contrast to left to right (LTR), as used in Indo-European languages. However, in Midde Eastern languages left to right is still used for numbers, for example, telephone numbers, posting items, and proper nouns. Consequently, LTR languages often have sentences containing a mixture of RTL and LTR.

The BSP programming model supports RTL. All BSP applications based on HTMLB or XHTMLB automatically support the RTL layout.

When you log on to a BSP application, the BSP runtime determines the code pages appropriate for the logon data and sets the correct value for the language direction. If you log on, for example, in Hebrew, the text direction is automatically set to RTL.

You can activate RTL rendering using the URL parameter sap-rtl=true. This only applies to the first call before the URL mangling has been executed for the BSP-URL.

To support RTL, SAP provides the textDirection attribute, and additional values for align/alignment for diverse htmlb and xhtmlb elements for design2003.

textDirection has been introduced for the following BSP elements:

htmlb

o <button>

o <checkbox>

o <fileUpload>

o <inputField>

o <label>

o <link>

o <radioButton>

o <textEdit>

o <textView>

o <treeNode>

xhtmlb

o toolbarButton

o toolbarInputField

sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20TREENODE

sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20TEXTVIEW

sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20TEXTEDIT

sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20RADIOBUTTON

sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20LINK

sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20LABEL

sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20INPUTFIELD

sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20FILEUPLOAD

sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20CHECKBOX

sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20BUTTON

sapevent:DOCU_LINK%5CDS:TX.TX_TEXTDIRECTION

o toolbarlink

The textDirection attribute is implemented indirectly using the element <textView> for the following htmlb elements:

<tabStripItem>

<listItem>

Indirect means that although the above elements themselves do not contain a textDirection attribute,you can still use this attribute if a textView is used within a tabStripItem or listItem

align or alignment or horizontalAlignment has been enhanced or implemented for the following BSP elements:

htmlb

o inputField

o textView

o gridLayoutCell

xhtmlb

o toolbarInputField

o SapTableCell+new columnDefintion-forceTextDirectionLTR attribute

o SapTableHeaderCell

Recommendations

To use the full extent of RTL support Application Developers should keep the following points in mind:

Avoid native HTML. Instead, use the elements of the BSP extension HTMLB or XHTMLB.

Make sure that frames appear in the correct sequence.

In MS Internet Explorer frames are numbered in the sequence they are named in the source code. When frames are displayed, they are rendered from left to right and in the sequence they are named in the source code. This happens independently of the layout sequence.In contrast to LTR, with RTL frames should be arranged as follows:

o The menu and content lists belong on the right side

o The actual content belongs on the left side

Remember that this mirroring arrangement does not happen automatically. You can can create RTL versions of your own images (images not provided by SAP). Make sure

that the RTL version of the images is also used in the application. Unsymmetrical images usually have to be mirrored. All SAP symbols are automatically adjusted.

sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20GRIDLAYOUTCELL



sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20LISTITEM

sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20TABSTRIPITEM


Remember to use the the new values for align (alignment and horizontalAlignment).Do not use RIGHT when you actually mean ENDOFLINE.

Value LTR Alignment RTL Alignment DescriptionFORCEDLEFT Left Left LeftLEFT Left Right Start of lineENDOFLINE Right Left End of lineRIGHT Right Right Right

You can override the direction of texts using the textDirection attribute. Use it together with a string type attribute in the following cases:

o If the text is user input, a telephone number, fax number, or an output text that has a fixed size and must not be rearranged. For example, the material number 01-k2-34, telephone number +49/6227/7-47474 or aircraft type 747-400 would be mistakenlyinterpreted by the standard algorithm as subtractions and the values altered.

o If the text is an input field for an LTR text in an RTL context (and vice versa).

o Example: Input of names in English in a Hebrew or Arabic form.

Note

HTML 4.0 is a prerequisite for RTL support and therefore RTL for BSP is only provided for MicrosoftInternet Explorer as of version 5.5.

Keep in mind that for accessibility the focus triangle is not always correctly positioned due to browser errors.

Note

See also the extended HTML Business Libraries XHTMLB and PHTMLB.

Use

You can use this BSP extension in your BSP application by dragging the BSP element you require from the tag browser and dropping it in your BSPs.

After you have defined the page language as ABAP, use the extension directive to determine the name of the BSP extension that you want to use - here, htmlb. You can choose any prefix.

After the extension directive, there is always the content element, which represents a framework for the whole BSP content.

Within the content element, you define the structure of your Web page. The easiest way to do this is to use the page element, which you use to define the complete Web page header,. You then only need to complete the document body afterwards. Alternatively, you can also use the more complex document element.

A diagram should then be output in a form, using the chart element for this, as specified in the following example.

sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20CHART

sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20DOCUMENT

sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20PAGE

sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20CONTENT

sapevent:DOCU_LINK%5CDS:IS.PHTMLB

sapevent:DOCU_LINK%5CDS:IS.XHTMLB

<%@page language="abap"%><%@ extension name="htmlb" prefix="htmlb"%>

<htmlb:content> <htmlb:page title = "BSP Extension: HTMLB / Element: Chart"> <htmlb:form>

< htmlb:chart id = "myChart1" data = "<%=data%>" width = "300" height = "300" titleCategories = "Company" titleValues = "Turnover" title = "Washers by Companies!" chartType = "BARS_3D" legendPosition = "EAST" colorOrder = "STRAIGHT" />


Note

You can find examples of HTMLB in the following BSP applications in the system:o sbspext_htmlb for introductory examples

o htmlb_samples for complex examples

Tips and Tricks

Use unique IDs for all HTMLB elements, even if you know explicitly that certain IDs cannot be displayed at the same time.

Example (TabStrip and TableView)

Instead of:

<% if tabstrip eq 'tab1'.%> <htmlb:tableView id = "tvX" ...><% else. %> <htmlb:tableView id = "tvX" ...><% endif. %>

you should use:

<% if tabstrip eq 'tab1'.%> <htmlb:tableView id = "tab1_tvX" ...><% else. %> <htmlb:tableView id = "tab2_tvX" ...><% endif. %>

In this way you enable the HTMLB table to differentiate the two tables internally.

Further information


IS HTMLB BREADCRUMB

Functionality

This BSP element enables you to render a navigation option using the path history. For example, you can record and represent a series of entries such as pages that were visited or documents, or you can move around within a series of tasks or information.

The name breadcrumb for this type of navigation in the context of the current page within the website structure comes from the story of Hansel and Gretel, in which the two children scatter a trail of breadcrumbs to help them later find their way out of the forest. The advantage of this procedure is that it is very easy to see how the information is grouped, so that the whole information structure itself is immediately recognizable.

You can display the individual entries in two ways:

In the body of breadCrumb you use embedded inner elements using the BSP element .

The individual path entries correspond to mouse clicks. You can use the onClick event handler for this.

You use the attributes table, nameOfKeyColumn and nameOfValueColumn to fill the element.

Attributes

Name Mandatory Explanation Possible Values

id xUnique name that identifies the BSP element. This attribute is used in event handling.

Character string, such as myBreadCrumb

tooltipText for the Quick Info, which appears when the cursor is moved over an entry in the history list.

Text

onClick Event handler that is called when you clickon a breadCrumbItem. Name, for example, myClick

size Size of the visible entries:MEDIUM (default value, medium font), SMALL (small font), LARGE (large font)



behavior Type of link.

DEFAULT (standard value, each entry has a link), SINGLELINK (all entries in the history list are assigned one single long link)

table

Table from which the values for the breadcrumb should be taken. If you set this attribute, you must also use the attributes

nameOfKeyColumn and nameOfValueColumn. Table name

nameOfKeyColumn Column name for the keys of the table specified in the table attribute.

Name, for example, STR_HEAD (default value)

nameOfValueColumnUse this attribute to determine the column name for the table values specified in the table attribute.

Name

breakSign Separator sign between two breadCrumbItem entries character string, for example, ">>"

breakSignImage Image for the separator sign between two breadCrumbItem entries

Name of image, for example, "ICON_ARROW_RIGHT"

Example

See BSP application SBSPEXT_HTMLB, page breadCrumb.bsp.

Eventhandling

A BSP element can have many events. The BSP element breadCrumb has only one event handler, onClick, which is transferred when users click on a hyperlink in the path history.

You usually implement your user interface elements using a form> element in your BSP layout, which refers back to the same page. In this default case, create the code for the event handling in the OnInputProcessing section. Within the OnInputProcessing event handler, the HTMLB BSP extension can recognize and evaluate events using the event ID variable. For all HTMLB events, this variable has the

value CL_HTMLB_MANAGER=>event_id. Normally, the events are handled accordingly as part of this framework:


You can handle HTMLB events in two ways: The first way involves retrieving the event data and then processing the data (usually in a large case statement). The alternative is to 'trigger' the event against an event class that was instantiated by the user.

Scenario 1: Fetch the event and process the data

In this case, the HTMLB manager is called in order to obtain a reference to a generic event object of type CL_HTMLB_EVENT. You can use the attributes name and event_type on this event object to determine which type of event is available. If the element supports the attribute id, you can use attribute id to find out which element triggered the event. To display detailed event data, map the event object to an event object with the appropriate type. In this example, this is a breadcrumb event. You can find more information about the breadCrumb event in class CL_HTMLB_EVENT_BREADCRUMB. DATA: event TYPE REF TO CL_HTMLB_EVENT. event = CL_HTMLB_MANAGER=>get_event( runtime->server->request ). IF event->name = 'breadCrumb' AND event->event_type = 'click'. DATA: breadCrumb_event TYPE REF TO CL_HTMLB_EVENT_BREADCRUMB. breadCrumb_event ?= event. " navigation->goto_page( breadCrumb_event->key ). " return. ENDIF.NoteNote that for the BSP element <breadCrumb> and the onClick event, the event class is CL_HTMLB_EVENT_BREADCRUMB.

Scenario 2:

Interface is available for event handling. This interface contains methods for all of the BSP elements that are used in the BSP extension HTMLB and which use events.The event can be triggered by a user-instantiated event handler class. n this case, the event handling class can be any user-defined class that must implement and have already instantiated the interface IF_HTMLB_EVENT. You can usually use the application class, for example, to handle specific events. If you do this, the only prerequisite is that the application class must implement interface IF_HTMLB_EVENT.The following example uses a separate class named CL_HTMLB_EVENT_EXAMPLE for event handling: DATA: event_handler TYPE REF TO CL_HTMLB_EVENT_EXAMPLE. CREATE OBJECT event_handler. CL_HTMLB_MANAGER=>dispatch_event( request = runtime->server->request event_handler = event_handler page_context = page_context ).The breadCrumb triggers the event IF_HTMLB_EVENT~BREADCRUMB_CLICK, which also contains the additional parameters id and key. The key is the key of the entry for the specific breadcrumb that was clicked. The event method can now react accordingly.CautionAll breadCrumb click events for all breadcrumbs on the page are triggered by this one method. As a developer, ensure that you select the correct ID to decide which breadcrumb is triggered.

Data Extraction with Incoming Requests


Further information


IS HTMLB BREADCRUMBITEM

Functionality

This BSP element provides the embedded inner elements for the path history (see breadCrumb).

Attributes

Name Mandatory Description Possible values

key xUse this attribute to determine the key of an entry in the path history.

Name, such as K1.

value x Value (content) of an entry in the path history Text

Example

... id = "mybreadCrumb1"> <htmlb:breadCrumbItem key="k1" value="text1" /> <htmlb:breadCrumbItem key="k2" value="text2" /> <htmlb:breadCrumbItem key="k3" value="text3" /> <htmlb:breadCrumbItem key="k4" value="text4" /> <htmlb:breadCrumbItem key="k5" value="text5" /> </htmlb:breadCrumb>...

NoteSee also BSP application SBSPEXT_HTMLB, page breadcrumb.bsp

Event Handling



No data handling is supported for this BSP element.

Further information

sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20BREADCRUMB




IS HTMLB BUTTON

Functionality

This BSP element implements the classical GUI element of a pushbutton. When a user clicks on a pushbutton, a predefined action is triggered.

If you click on a pushbutton, this triggers the event CLICK. You can use the associated onClick event handler to execute a predefined task. The event CLICK can be dynamically activated or deactivated with theattribute disabled. If a pushbutton is deactivated, it will not react to use reactions.A button element has a text label (attribute text) and can also provide quick info (attribute tooltip).The size and appearance of a pushbutton is defined using style sheets. The attribute design enables you to choose between standard size and small size for the pushbutton. For example, you can use these to indicate the importance of the pushbuttons.

Attributes

Name Mandatory DescriptionPossible Values

idUnique name that identifies the BSP element. This attribute is used in eventhandling.

Character string, for example, mybutton.

text Descriptive text to display on the button

Text

encode

Coding. If this attribute is set to TRUE,the text is written as HTML source code.Example:text = "This text is <b> displayed </b> perfectly and has a tooltip." The word "displayed" is displayed in bold. If the attribute is set to FALSE, the text is displayed.Instead of this attribute, we recommend you use attribute<htmlb:contentforceEncode>.

TRUE (default value), FALSE

tooltipText for the quick info that appears when the cursor is moved across the pushbutton.

Text




onClickEvent handler that is called when the pushbutton is selected. An event is then sent to the server.


onClientClick Client-side event handler that is called if the pushbutton is clicked.


width Width of the pushbutton. Numrical value

design

Current design for rendering the pushbutton. Possible values are: STANDARD (default value), EMPHASIZED, SMALL, PREVIOUS (only for Design2003), NEXT (only for Design2003)

disabled Specifies whether the pushbutton can be clicked to trigger the click event.

TRUE, FALSE

textDirection Text or writing direction


visible visibility. Note that this is a deprecatedattribute.

Example

See BSP application SBSPEXT_HTMLB, page button.bsp .

Event handling

A BSP element can have several events. The BSP element button only has two event handlers, onClick and onClientClick.

Generally you implement your user interface elements using a <form> element in the layout of your BSP, which points to the same page. In this default case, you generate the coding for the event handling in the OnInputProcessing section. Within the OnInputProcessing event handler, events can be recognized and assessed by the HTMLB BSP extension using the Event ID variable. For all HTMLB events, this variable hasthe value CL_HTMLB_MANAGER=>event_id. Events are usually handled according to this framework:


You can implement event handling in two ways. The first way involves retrieving the event data and then processing the data (usually in a large case statement). The alternative is to 'trigger' the event against an event class that was instantiated by the user.

Scenario 1: Gets the event and processes the data

In this case, the HTMLB manager is called in order to obtain a reference to a generic event object of type CL_HTMLB_EVENT. You can use the attribute name and event_type on this event object to determine which type of event is available. If the element supports the attribute id, you can use the attribute id to find out which element triggered the event. To display detailed information, display the object event on an object event with the correct type, in this case a button event. You can find more information about the button event in class CL_HTMLB_EVENT_Button. DATA: event TYPE REF TO CL_HTMLB_EVENT. event = CL_HTMLB_MANAGER=>get_event( runtime->server->request ). IF event->name = 'button' AND event->event_type = 'click'. DATA: button_event TYPE REF TO CL_HTMLB_EVENT_BUTTON. button_event ?= event. ENDIF.NoteNote that for the BSP element <button> and the onClick event, the event class is CL_HTMLB_EVENT_BUTTON.

Scenario 2:

The interface IF_HTMLB_EVENT is available for event handling. This interface contains methods for all of the BSP elements that are used in the BSP extension HTMLB and which use events.The event can be triggered by a user-instantiated event handler class. In this case, the event handling class can be any user-defined class that must implement and have already instantiated the interface IF_HTMLB_EVENT. You can usually use the application class, for example, to handle specific events. If you do this, the only prerequisite is that the application class must implement interface IF_HTMLB_EVENT.The following example uses a separate class named CL_HTMLB_EVENT_EXAMPLE for event handling: DATA: event_handler TYPE REF TO CL_HTMLB_EVENT_EXAMPLE. CREATE OBJECT event_handler. CL_HTMLB_MANAGER=>dispatch_event( request = runtime->server->request event_handler = event_handler page_context = page_context ).The button element triggers event IF_HTMLB_EVENT~BUTTON_CLICK, which contains theadditional parameter id.


For all events that are triggered, there is the onClick attribute. This is the name that is assignedby rhe user for the event handler method.CautionAll button click events for all of the buttons on the page are triggered by this one method. As adeveloper, ensure that you select the correct ID to determine which button is triggered.



Tips and Tricks

We recommend that you use the onClick or onClientClick event handler, since pushbuttons are of no use without them. A button element without an event handler is always returned with a deactivated status.

BSP element inputField defines a "small" design. We recommend that you use the same design for input fields and pushbuttons that are related to each other functionally or semantically.

Pushbuttons are generally not appropriate for the Web and should therefore be avoided, if possible.You should then only use pushbuttons, if you want to transfer information or data to the server. Only use pushbuttons for navigation. Otherwise use hyperlinks. Braille equipment also has problems recognizing pushbuttons.

Further information


IS HTMLB CHART

Functionality

This BSP element provides different types of diagrams and presentation charts.

Presentation charts are very important for representing data and statistics. The chart element provides allusual diagram types such as pie charts, vertical and horizontal bar charts, surface and line charts in various,predefined designs. The actual design is defined by the attribute chartType.

The chart element is data-oriented, that is, it is largely based on the concept of data binding. The most important attribute is therefore data, which must be assigned to a suitable external table. Suitable means that the table must contain at least the following columns:

Technical Name

Explanation

groupidName of the data series. The chart element can display several datasets at the same time, thus enabling production statistics of different plants to be compared, for example. Every dataset must be given a unique name.




x Column with the x values or categories

y Column with the y values

z Column with optional z values

color Alternative color. By default, the chart element represents the categories that were selected from a series of predefined color schemes in different colors.

extension Alternative extension.

datalabel Alternative label for the data

Each table that contains the columns listed above is accepted as a data source, even if the table also contains additional columns.

The scaling of the y axis is determined by the attributes axisMin and axisMax.

The chart element provides a title, a legend and an indicator for the two axes. The attributes title, titleCategories (x axis) and titleValues (y axis) specify the attributes title and indicator.

The legends are automatically generated from the names and colors of the corresponding data series. You can set the position of the legend in relation to the diagram. To do this, use the attribute LegendPosition. The default value DEFAULT is a best practice solution.

Attributes


id

Unique name that identifies the BSP element. This attribute is usedin event handling and in data handling.

Character string, such as myChart

data xData source consisting of aninternal table.

Table name, such as < %=data%>

visible Visibility of an element.

X (default) and no entry (invisible)

displayObjectValuesDisplays the values for the object.

X (display) and no entry (default)

width Width of the diagram.

Numeric value, for example, 400

height Height of the diagram.

Numeric value, for example 600

titleCategoriesLabel for the x axis of the chart.

String, such as categories (default)

titleValuesLabel for the y axis of the chart.

String, such as values (default)

title Title of the chart.

String as a title.

axisMinValMinimum value for the y axis of the chart.

Numeric value

axisMinValMaximum valuefor the y axis of the chart.

Numeric value

chartType

Type of chart, such as a blockchart or a pie chart.

Possible values: AREA, AREA_STACKED, AREA_3D, AREA_STACKED_3D, BARS, BARS_STACKED, BARS_3D (default), BARS_STACKED_3D, COLUMNS, COLUMNS_STACKED, COLUMNS_3D, COLUMNS_STACKED_3D, and LINES, LINES_3D, PIE, PIE_3D, PIESPLIT

legendPosition

Position of the legend on the chart. You can determine that the legend should be placed in the bottom left-hand corner of the chart, for example.

The following values are possible: DEFAULT (default value), NORTH, EAST, SOUTH, WEST, and NONE

colorOrder

Current color selection for thecharts. See also Tips and Tricks.

The following values are possible: DEFAULT (default value), SNAKE, STRAIGHT, and REVERSE.

Example

See BSP application SBSPEXT_HTMLB, page chart.bsp.

Event handling




Tips and Tricks

You must always use the attribute data to specify a groupid, even if you want to display an individual data series.

The categories are usually displayed as the labels for the schemes on the x axis. However, since for horizontal bar charts the x and y axis are the other way around, the categories are displayed here on the y axis. With pie charts, the categories are displayed as a legend. For all other chart types, the legend contains the data series names.

The different types of chart element all use the same amounts of colors to visualize data values, but are formulated in different colors. There are three predefined color schemes with correspondingdiagram types:

o Color scheme STRAIGHT

This color scheme is used by surface diagrams as well as by horizontal and vertical bar charts.

o Color scheme REVERSE

This color scheme is used by line chartso Color scheme SNAKE

This color scheme is used by pie chartsSee also attribute colorOrder.

Further information


IS HTMLB CHECKBOX

Functionality

You can use this BSP element to implement an on/off switch. If you want to provide a group of checkboxes that are logically related to each other, you can also use BSP element checkboxGroup. You can use checkboxGroup to arrange the individual checkbox checkbox fields (checkboxes) in rows and columns.

A checkbox element represents a state with on/off logic in your program.

The internal element structure consists of:

Embedded BSP elements

Pure HTML

Attributes

Name Mandatory DescriptoionPossible Values

id Unique name that identifies the BSP element. This attribute is used in event handling and in data handling.

text Use this attribute to determine the text that should be displayed next to the checkbox as an explanatory text.

sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20CHECKBOXGROUP



tooltip With this attribute you determine the quick info text that appears when the cursor is moved over the checkbox.

disabled Use this attribute to determine whether or not the checkbox can be clicked on, that is, activated.

encode

Coding. If the attribute is set to TRUE, then the text is written as HTML source.Example:text = "This text is <b>displayed</b> perfectly and has a tooltip." Here, the word "displayed" is in bold font. If the attribute is set to FALSE then the text is displayed as it is.Instead of using this attribute we recommend you use attribute

<htmlb:contentforceEncode> TRUE (default value, FALSE

checked

Use this attribute to determine the initial status of the checkbox. Possible values are FALSE (default, not checked) and TRUE (checked). Example: If you only define the ID for a checkbox (id = "myCheckbox") and specify checked dynamically (checked = "<%=checked%>") and the checkbox is then checked, then the following is returned in theform fields: name = id and value = id. If the checkbox is not checked, no form field is returned.

key

Value of the checkbox. If you assign a value to key (such as yes) and the checkbox is also checked (checked = true), then the value of the checkbox is used for the request from the form fields. If you do not assign a value explicitly to key, and leave it in its initialstatus, then the is used as the name of the default value.

keyNotChecked

Use this attribute to manage the value of the checkbox that was not set for further processing. If you assign a value to keyNotChecked, then the implicit value of the checkbox that is not checked is used for the request from the form fields, such as no if yes was checked for key. If you do not assign a value explicitly to keyNotChecked, and leave it in its initial status, then the default value is used and this parameter remains empty. Example: <htmlb:checkbox id = "myCheckbox" key = "X" keyNotChecked = "-" checked = "<%=checked%>" /> If the checkbox is checked, name = id and value = 'X' is returned to the form fields. If the checkbox is not checked, nothing is returned to the form fields for the old design (classic design). For the new design (design2002), however, the value specified in key or keyNotChecked is returned.

sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20CONTENT

onClick Use this attribute to set the event handler that is called when you click on the checkbox.An event is sent to the server.

onClientClick Use this attribute to set an event handler when the checkbox is checked.

Example

See BSP application SBSPEXT_HTMLB, page checkbox.bsp.

Event handling

A BSP element can have many events. BSP element checkbox has only two event handlers, onClick and onClientClick.

You usually implement your user interface elements using a form element in your BSP layout, which refersback to the same page. In this default case, create the code for the event handling in the OnInputProcessingsection. Within the OnInputProcessing event handler, the HTMLB BSP extension can recognize and evaluate events using the event ID variable. For all HTMLB events, this variable has the value CL_HTMLB_MANAGER=>event_id. Normally, the events are handled accordingly as part of this framework:




In this case, the HTMLB manager is called in order to obtain a reference to a generic event object of type CL_HTMLB_EVENT. You can use the attributes name and event_type on this event object to determine which type of event is available. If the element supports the attribute id, you can use attribute id to find out which element triggered the event. To display detailed event data, map the event object to an event object with the appropriate type. In this example, this is a checkbox event. You can find more information about the checkbox event in class CL_HTMLB_EVENT_CHECKBOX. DATA: event TYPE REF TO CL_HTMLB_EVENT. event = CL_HTMLB_MANAGER=>get_event( runtime->server->request ). IF event->name = 'checkbox' AND event->event_type = 'click'. DATA: checkbox_event TYPE REF TO CL_HTMLB_EVENT_CHECKBOX. checkbox_event ?= event. ENDIF.NoteNote that for the BSP element <checkbox> and the onClick event, the event class is CL_HTMLB_EVENT_CHECKBOX.

Scenario 2:

Interface is available for event handling. This interface contains methods for all of the BSP elements that are used in the BSP extension HTMLB and which use events.

The event can be triggered by a user-instantiated event handler class. In this case, the event handling class can be any user-defined class that must implement and have already instantiated the interface IF_HTMLB_EVENT. You can usually use the application class, for example, to handle specific events. If you do this, the only prerequisite is that the application class must implement interface IF_HTMLB_EVENT.The following example uses a separate class named CL_HTMLB_EVENT_EXAMPLE for event handling: DATA: event_handler TYPE REF TO CL_HTMLB_EVENT_EXAMPLE. CREATE OBJECT event_handler. CL_HTMLB_MANAGER=>dispatch_event( request = runtime->server->request event_handler = event_handler page_context = page_context ).The checkbox element triggers event IF_HTMLB_EVENT~CHECKBOX_CLICK, which contains the following additional parameters:

o ID

ID of the element used.o ON_CLICK

Name of the event handler specified by the userThere is the onClick attribute for all triggered events. This is the name assigned by the user for the event handler method.CautionAll checkbox click events for all tree nodes on the page are triggered by this one method. As a developer, ensure that you select the correct ID to decide which checkbox is triggered.


If you want to read the status of a checkbox, you do this in the event handling phase in OnInputProcessing. The event handler OnInputProcessing may look as follows:

DATA: checkbox TYPE REF TO CL_HTMLB_CHECKBOX.checkbox ?= CL_HTMLB_MANAGER=>GET_DATA( request = runtime->server->request name = 'checkbox' id = 'cb1' ).IF checkbox IS NOT INITIAL. checked = checkbox->checked.ENDIF.

Note that all restored data for an element are written expressly to the element class. With the checkbox element, class CL_HTMLB_CHECKBOX is used to do this. An instance of this class is returned by the HTMLB manager.


ID

CHECKED

Further information


IS HTMLB CHECKBOXGROUP

Functionality

This BSP element arranges a group of checkboxes ( checkBox) by columns and rows. The checkboxes canbe selected individually. This BSP element could be used, for example, with an image that has several options that can be selected.

Arranging the checkboxes in columns and rows is determined by the attribute columnCount. Successive checkboxes are arranged in rows.

To include a checkbox in the group, you just add a checkBox element to the checkBoxGroup element.

The inner element structure consists of checkBoxelements

Attributes

Name Mandatory Description

id Unique name that is used to identify the BSP element. This attribute is used in event handling and in data handling.

columnCount Use this attribute to determine the number of columns for the checkbox group.

width Use this attribute to determine the width of the checkbox group.

ExampleSee BSP application SBSPEXT_HTMLB, page checkboxgroup.bsp

Event handling




Tips and Tricks

If you provide more entries than columnCount requires, the superfluous entries are ignored. If however, not enough entries are available, the surplus cells in the group are returned empty. If columnCount is not explicitly set, a single column is accepted.






Further information


IS HTMLB CONTENT

Functionality

This BSP element represents a rendering context that provides a framework for the other elements that are in the BSP extension. This BSP element is always at start of a BSP, immediately after the extension directive. You can define the body of the page either using the simple page element or using the more complex document element.


Embedded elements

Pure HTML

Scripting sections

The following design variants are available for the design attribute:

CLASSIC

DESIGN2002

DESIGN2003

As an application developer, from this list you can select the design that is suitable for your application, suchas:<htmlb:content design="DESIGN2002+DESIGN2003">

With this list of accepted design variants, choose a design for the current application context:

* EP=none from list, pick "highest" design* EP=5 from list, pick DESIGN2002, else pick CLASSIC, else-->error* EP=6 from list, pick DESIGN2003, else pick DESIGN2002, else pick CLASSIC

DESIGN2002 and CLASSIC are supported for Enterprise Portal 5; for Enterprise Portal 6, DESIGN2003 andDESIGN2002 and also CLASSIC are supported.

Furthermore, there is also the URL parameter sap-htmlb-design, which you can also to determine a design that is suitable for your application from the list of possible design variants.

Attributes

NameMandatory

Explanation Possible Values





id

Unique name that identifies the BSP element. This attribute is used in event handling and in data handling.

Character string, such as mycontent

advancedAlignment

Attribute for improving the quality of the rendering. The use of this feature requires however a significant change in the actual HTML rendering performance in the browser. If you do not want this, set this attribute to FALSE.


checkForCookiesAndJavaScript

With this attribute you can suppress that the source code in your BSB contains an <iframe> tag. This is necessary for forwarding the page through another program (for example, MS Outlook),which cannot display the page for security reasons. Set this attribute however only then to FALSE, if it really is necessary, because in this casethe system does not check if cookies and JavaScript are supported.


cssParts

Includes list of CSS files listed in this attribute, instead of the large unified rendering CSS file (ur_<device>.css). With this attribute an application developer can only list the relevant CSS files for inclusion. As a result the speed of the rendering of a page is sharply increased. The entries in the listare separated by spaces or commas, and they must also contain the abbreviations of the design parts. This attribute is relevant only for Design2003.It is the responsibility of the application developers to ensure that all required design parts are listed. This is not checked or enforced by the HTMLB library during runtime.

Example: Input<htmlb:content cssParts="dn,fc,efc">

design

Use this attribute to determine the current design for rendering,which applies with the filter attributes for the TableView.

CLASSIC, DESIGN2002 and DESIGN2003 (from SAP Web AS 6.20 SupportPackage 27)

sessionManagement

Attribute for session management. As stateful BSP applications often run in the portal, the SAP Enterprise Portal session management is supported by the BSP programming model.

FALSE (default), TRUE

forceEncode Global coding

BACKWARDS_COMPATIBLE (default value, the settings for the encode attributes of the respectiveelements are used), ENABLED (everything is always encoded. All other encode attributes are overwritten, which means you you do not have to setthe >encode attribute for any other element)

massDataExtraction Normally when data is returned to the server a separate >cl_htmlb_manager=>get_data call is required for each inputField. Two special parameters are required for this call: the control type and its ID. There are, however, cases in which all the data for all input fields should be called in one single call. This is particularly important if the data is to be forwarded to a table with other coding and processed further.For such cases there is a massDataExtraction session for input fields, checkboxes, dropdown list boxes, and radio buttons. If you set this attribute, additional HTML containing details about all the relevant controls including the relevant ID and type for each control is created

in the response. This slightly increases the amount of source data rendered.When the data is returned to theserver cl_htmlb_manager=>get_mass_data is called.

This calls extracts all the IDs and control types from the incoming request and brings the entire data together in one table. FALSE (default value), TRUE, see cl_htmlb_manager=>get_mass_data( )

controlRendering

Rendering of the control. If you have not specified a value, all the controls are rendered as up to now: A button for example is displayed in SAP Look&Feel, whereas the appearance of a DropDownListBox is determined by the browser. If you specify SAP, all controls are displayed in SAP Look &Feel (in particular the DropDownListBox too). If you specify BROWSER, the following controls are displayed by the browser: Button, DropDownListBox, Scrollbar, GroupBox and Listbox.

no specification (default value), SAP, BROWSER.

labelDesignBarIn Design2003 all labels by default have a small bar in front of them. You can use this attribute to remove the bar

STANDARD (default value), LIGHT (invisible)

rtlAutoSwitch

The family of <HTMLB> libraries supportsright-to-left (RTL) rendering for design2003. You can activate RTL rendering using the URL parameter sap-rtl=true (but only for the first call before the BSP-URL finds out the URL mangling). To activate the RTL mode automatically use the >rtlAutoSwitch attribute, depending on the language currently active (SY-LANGU). The decision whether to activate RTL is delegated to the NLS_RTL_DISPLAY function module.

Design2003: FALSE (default value), TRUE

themeRoot Path name loaded from the stylesheet. If you do not set this attribute, the standard

Design2003: sap_chrome, sap_hcb, sap_highcont, sap_standard,

sapevent:DOCU_LINK%5CDS:FU.NLS_RTL_DISPLAY

stylesheets are used. For more information see help.sap.com/nw04 -> SAP NetWeaver -> Application Platform (SAP Web Application Server) -> ABAP Technology -> UI Technology -> Web UI Technology -> Business Server Pages -> Programming Environment -> Stylesheets-> Set Stylesheets for HTMLB, XHTMLB, and PHTMLB. To use delivered themes, you can also use predefined names for themeRoot. Keep in mind that no predefined themes are available for design2002.

sap_tradeshowExample 1: <htmlb:content themeRoot="/sap/bc/bsp/sap/myAppExample 2: <htmlb:content themeRoot="sap_tradeshow">

Example

<%@extension name="htmlb" prefix="htmlb"%><htmlb:content>... Page body ...</htmlb:content>

Eventhandling




Further information


<htmlb:dataContainer>

IS HTMLB DATENAVIGATOR

Functionality

This BSP element provides a calendar view.

Using the dateNavigator element you can provide users with a quick overview of a series of successivemonths. Each month is displayed in a table-type calendar view and you can arrange any number of these views as a grid. The attributes columnCount and rowCount determine the arrangement and the number of calendar views. The months that are currently selected depend on the date that is determined by attribute currentDate. If, for example, you want to display three consecutive months, and currentDate is set to a date in July, then the dateNavigator element displays calendar views for the consecutive months of June, July and August. The attribute today is different in that it is usually assignedto the system variable sy-date and only affects the display: the corresponding entry in the calendar view is returned displayed with a border (provided that it is within the currently visible month range).

The following inner elements are possible:



Attributes

Name Mandatory Explanation

id xUnique name that identifies the BSP element. This attribute is used in event handling and in data handling.

currentDateUse this attribute to determine the current date, which in turn is determined by the date range displayed. This date may vary from today'sdate.

today Use this attribute to determine today's date. The corresponding row is selected.

monthsPerColumn Use this attribute to determine the number of columns.

monthsPerRow Use this attribute to determine the number of rows.

onNavigate Use this attribute to define an event handler on the server side, which is called in the case of a navigation request.

onDayClick Use this attribute to define an event handler on the server side, which is called when you click on a day.

onWeekClick Use this attribute to define an event handler on the server side, which is called when you click on a week.

onMonthClick Use this attribute to define an event handler on the server side, which is called when you click on a month.

Example

See BSP application SBSPEXT_HTMLB, page datenavigator.bsp.

Event handling

A BSP element can have many events. BSP element dateNavigator has event handlers for clicking on days, weeks and months as well as for navigation.

You usually implement your user interface elements using a form> element in your BSP layout, which refers back to the same page. In this default case, create the code for the event handling in the OnInputProcessing section. Within the OnInputProcessing event handler, the HTMLB BSP extension can recognize and evaluate events using the event ID variable. For all HTMLB events, this variable has the value CL_HTMLB_MANAGER=>event_id. Normally, the events are handled accordingly as part of this framework:




In this case, the HTMLB manager is called in order to obtain a reference to a generic event object of type CL_HTMLB_EVENT. You can use the attributes name and event_type on this event object to determine which type of event is available. If the element supports the attribute id, you can use attribute id to find out which element triggered the event. To display detailed event data, map the event object to an event object with the appropriate type. In this example, this is a dateNavigator event. You can find more information about the dateNavigator event in class CL_HTMLB_EVENT_DATENAVIGATOR. DATA: event TYPE REF TO CL_HTMLB_EVENT. event = CL_HTMLB_MANAGER=>get_event( runtime->server->request ). IF event->name = 'dateNavigator'. DATA: dateNavigator_event TYPE REF TO CL_HTMLB_EVENT_DATENAVIGATOR. dateNavigator_event ?= event. ENDIF.NoteNote that for the BSP element <dateNavigator> and the onClick event, the event class is CL_HTMLB_EVENT_DATENAVIGATOR.

Scenario 2:

The event can be triggered by a user-instantiated event handler class. In this case, the event handling class can be any user-defined class that must implement and have already instantiated the interface IF_HTMLB_EVENT. You can usually use the application class, for example, to handle specific events. If you do this, the only prerequisite is that the application class must implement interface IF_HTMLB_EVENT.The following example uses a separate class named CL_HTMLB_EVENT_EXAMPLE for event handling: DATA: event_handler TYPE REF TO CL_HTMLB_EVENT_EXAMPLE. CREATE OBJECT event_handler. CL_HTMLB_MANAGER=>dispatch_event( request = runtime->server->request event_handler = event_handler

page_context = page_context ).The dateNavigator element can trigger five different events:

o DATE_NAVIGATOR_DAY_CLICK

Parameter ExplanationID ID of the element used.

ON_CLICK Name of the event handler specified by the user

DAY Selected dateo DATE_NAVIGATOR_WEEK_CLICK



YEAR Selected year

WEEK Selected weeko DATE_NAVIGATOR_MONTH_CLICK



YEAR Selected year

MONTH Selected montho DATE_NAVIGATOR_PREVIOUS_CLICK



MODE Mode: previous dateo DATE_NAVIGATOR_NEXT_CLICK



MODE Mode: next dateCautionAll dateNavigator click events for all entries on the page are triggered by this one method. As a developer, ensure that you select the correct ID to decide which entry is triggered.



Tips and Tricks

The attribute currentDate changes its value during navigation and generally points to the middle of the month. However, the application does not have to wait for currentDate to contain a determined value.

The dateNavigator element is very costly with respect to the page size and the return time. For each calendar view, one HTML table with approximately 50 cells must be displayed. You shouldtherefore use attribute columnCount and rowCount carefully.

Further information


IS HTMLB DAYS

Functionality

This BSP element defines a reference to a specific range of days within the dateNavigator element.

See also week and month.

Attributes

Name Mandatory Descriptionbegin x Use this attribute to determine the first day.

end Use this attribute to determine the last day.

tooltip Use this attribute to determine the quick info text that is displayed when the cursoris moved over a day.

selection Use this attribute to determine an index for a specific range of days that should be displayed as selected.

Example

sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20MONTH

sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20WEEK

sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20DATENAVIGATOR



See example in dateNavigator.

Event Handling




Further information


IS HTMLB DOCUMENT

Functionality

You use this BSP element to render the root element of a Web document, such as HTML or WML, depending on the markup language that is used.

The inner element structure consists of the following two embedded elements:

1. documentHead2. documentBody

From the point of view of HTMLB for Business Server Pages, a Web document is a large tree of elements that represent the visual and functional content of the document. The two embedded elements are required to describe the document structure of the Web page.

Caution

The two embedded elements documentHead and documentBody are mandatory and must belisted in the specified sequence.

An alternative for specifying the document structure is the BSP element page. When you use page, you do not require any embedded elements since it is a more simple element.

Attributes

This BSP element does not have any attributes.

Example

See BSP application SBSPEXT_HTMLB, page document.bsp

Event Handling



sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20DOCUMENTBODY

sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20DOCUMENTHEAD




Further information


IS HTMLB DOCUMENTBODY

Functionality

You use this BSP element to specify the body of a Web document.


Embedded elements

Pure HTML

A documentBody can only be specified once. This documentBody must contain all visual HTMLB elements.

The documentBody element, together with the

documentHead element makes a Web document (see also document).

Attributes


onLoadThis attribute is used when a file is loaded. In the introductory <documentBody> element, the event handler onLoad= is quoted. It calls the client-side script function that is defined in a script area in the file header.

marginBottom Use this attribute to determine the bottom margin. The default value is 2 (pixels).

marginTop Use this attribute to determine the top margin. The default value is 2 (pixels).

marginLeft Use this attribute to determine the left margin. The default value is 2 (pixels).



marginRight Use this attribute to determine the right margin. The default value is 2 (pixels).

scrolling Use this attribute to determine whether or not a scrollbar should be displayed.Possible values are AUTO (default), YES and NO.

attributeBee Use this attribute to set additional event handlers. You can use additional HTML coding in the body.

Example


<htmlb:content> <htmlb:document>

<htmlb:documentHead title = "My Title"> <htmlb:headInclude/> <style type="text/css"> ... </style>

<script language="JavaScript" type="text/javascript"> ... </script> ... Additional scripting, as well as the <head> of HTML pages ... </htmlb:documentHead>

<htmlb:documentBody> ... Page body ... </htmlb:documentBody>

</htmlb:document></htmlb:content>

NoteSee also BSP application SBSPEXT_HTMLB, page document.bsp.

Eventhandling




Further information


IS HTMLB DOCUMENTHEAD

Functionality

With this BSP element, the head (<head>) ) of a document is rendered together with the standard includes for stylesheets (CSS files) and scripts (JS files).

The documentHead element together with the documentBody element makes a Web document (see also document).

With the optional BSP element headInclude you can insert standard HTMLB includes (style sheets and scripts) explicitly in the header of your page. However, this is not necessary. The headInclude element can only be used by a documentHead element.

You can also record your own declarations in the documentHead section.

Attributes


title Use this attribute to determine the title of the page that is usually displayed as the title ofthe browser window.

Example




<script language="JavaScript" type="text/javascript"> ... </script> ... Additional scripting, analog to the <head> of HTML pages ... </htmlb:documentHead>

<htmlb:documentBody> ... Body of page ... </htmlb:documentBody>


NoteSee also BSP application SBSPEXT_HTMLB, page document.bsp

Event handling






Further information


IS HTMLB DROPDOWNLISTBOX

Functionality

This BSP element is similar to the classic GUI concept of a dropdown list box.

You can use this element as a replacement for the listBox element if you want to display long lists that would otherwise take up too much space on the page.

You can define the list entries in a dropDownListBox element in two different ways:

1. Statically in the layout section of a BSP application2. By binding data to a table


The first process is very simple. You add as many listBoxItems as necessary to the DropDownListBox element. Note that you must always define the attribute key. You can find a complete list of the attributes for listBoxItem under listBoxItem.

The second process, data binding to a table, is mostly useful for applications written in ABAP, since this language provides direct support for tables. You need at least one table with two columns that contain the key and text ID pairs. Assign the attribute table of the dropDownListBox element to this table. You must assign the attributes nameOfKeyColumn and nameOfValueColumn to the technical name of thetable columns.

If the user clicks on a list entry, this triggers a select event. You can then install an onSelect or onClientSelect event handler to use scripts to handle this event. You can get or set the currently selected list entry using the attribute selection. The selected entry is displayed in the first row of the dropDownListbox element.

The inner element structure consists of:listBoxItem elements.

Attributes


id


Character string, such as mydropdownListBox

tooltip Use this attribute to determine Character string

the quick info text that is displayed when the cursor is moved over the dropdown list box. Note that this attribute is not available in Microsoft Internet Explorer.

disabled

Use this attribute to determine whether the dropdown list box can be clicked on to trigger the select event.


table

Use this attribute to specify as a data source the table from which the values for the dropdown list box should be taken.

Table name

encode

code. If the attribute is set to TRUE, the text is written as HTML source code.Example:text = "This text is <b> displayed </b> perfectly and has a tooltip." Here the word "displayed" is displayed in bold. If the attribute is set to FALSE, the plain text is displayed.Instead of this attribute we recommend you use attribute <htmlb:contentforceEncode>.


selectionUse this attribute to determine the list entry that is currently selected.

List entry name.

nameOfKeyColumnUse this attribute to determine the name of the key column in the table.

Character string for the names

nameOfValueColumn Use this attribute to determine the name of the value column in

Character string for the names


the table.

onSelect

Use this attribute to set an event handler on the server side that is called when a list entry is selected.

Character string for the event handler

onClientSelect

Use this attribute to set an event handler on the client side that is called when a list entry is selected.

Character string for the event handler

backgroundColor

Use this attribute to change the background color of the dropdown list box. You can use the hexadecimal specification of the color, or the color name (suchas brown, dark blue, ...). This attribute is deprecated.

textColor

Use this attribute to determine the color of the text to be displayed. You can use the hexadecimal specification of the color, or the color name (such as brown, dark blue, ...). This attribute is deprecated.

nameOfBackgroundColorColumn

Use this attribute to determine the name of the background colorcolumn. This attribute is deprecated.

nameOfTextColorColum

Use this attribute to determine the name of the text color column. This attribute is deprecated.

Example

See BSP application SBSPEXT_HTMLB, page DropdownListBox.bsp</>.

Event handling

A BSP element can have many events. BSP element dropdownListBox has only two event handlers, onSelect and onClientSelect.





In this case, the HTMLB manager is called in order to obtain a reference to a generic event object of type CL_HTMLB_EVENT. You can use the attributes name and event_type on this event object to determine which type of event is available. If the element supports the attribute id, you can use attribute id to find out which element triggered the event. To display detailed event data, map the event object to an event object with the appropriate type. In this example, this is a dropdownListBox event. You can find more information about the dropdownListBox eventin class CL_HTMLB_EVENT_SELECTION. CLASS CL_HTMLB_MANAGER DEFINITION LOAD. DATA: event TYPE REF TO CL_HTMLB_EVENT. event = CL_HTMLB_MANAGER=>get_event( runtime->server->request ). IF event->name = 'dropdownListBox' AND event->event_type = 'select'. DATA: dd_listbox_event TYPE REF TO CL_HTMLB_EVENT_SELECTION. dd_listbox_event ?= event. ENDIF.NoteNote that for the BSP element <dropdownListBox> and the select event, the event class isCL_HTMLB_EVENT_SELECTION.

Scenario 2:

Interface is available for event handling. This interface contains methods for all of the BSP elements that are used in the BSP extension HTMLB and which use events.The event can be triggered by a user-instantiated event handler class. In this case, the event handling class can be any user-defined class that must implement and have already instantiated the interface IF_HTMLB_EVENT. You can usually use the application class, for example, to handle specific events. If you do this, the only prerequisite is that the application class must implement interface IF_HTMLB_EVENT.The following example uses a separate class named CL_HTMLB_EVENT_EXAMPLE for event handling: DATA: event_handler TYPE REF TO CL_HTMLB_EVENT_EXAMPLE. CREATE OBJECT event_handler. CL_HTMLB_MANAGER=>dispatch_event( request = runtime->server->request

event_handler = event_handler page_context = page_context ).The dropdownListBox element triggers event IF_HTMLB_EVENT~DROPDOWNLISTBOX_SELECT, which contains two useful parameters id and selection. The id is the ID of the BSP element, and selection is the element that is currently selected.CautionAll dropdownListBox select events for all dropdown list boxes on the page are triggered by this one method. As a developer, ensure that you select the correct ID to decide which dropdown list box is triggered.


If you want to read the dropdown list box, you do this in the event handling phase in OnInputProcessing. Youusually use an event of a button element to trigger the coding that reads the data from the dropdownListBox element.

The event handler OnInputProcessing may look as follows:

.... DATA: data TYPE REF TO CL_HTMLB_DROPDOWNLISTBOX. data ?= CL_HTMLB_MANAGER=>GET_DATA( request = runtime->server->request name = 'dropdownlistbox' id = 'mydropdownListBox1' ). IF data IS NOT INITIAL. selection2 = data->selection. ENDIF.

Note that all restored data for an element are written expressly to the element class. With the dropdownListBox element, class CL_HTMLB_DROPDOWNLISTBOX is used to do this. An instance of this class is returned by the HTMLB manager.

Tips and Tricks

The dropDownListBox element is not intended for displaying lists with thousands of entries. In general, a list should never contain more than 30 entries. Ensure that the size of your HTML page grows in proportion to the number of entries.

The list entries are displayed in the sequence in which they were added. With data binding, instantiated list entries are therefore always displayed after the entries that were created using listBoxItem in the layout section of the page.

Note that the following attributes are deprecated attributes:

o backgroundColor

o nameOfBackgroundColorColumn

o nameOfTextColorColumn

o textColor


Further information


IS HTMLB FILEUPLOAD

Functionality

This BSP element is used for uploading a file to the server.

It is a simple element without an inner element structure.

Attributes



Character string, such as myFileupload

size Use this attribute to determine the width of the input field.

Numeric value, such as 20

maxLengthUse this attribute to determine the maximum possible length of the input field. Note that this attribute is deprecated.


accept MIME list of acceptable files. Note that this attribute is deprecated.

images/*

Example

See BSP application SBSPEXT_HTMLB, page fileupload.bsp.

Event handling



If you want to read the uploaded file on the server, you do this in the event handling phase in OnInputProcessing. You usually use an event of a button element to trigger the coding that reads the data from the fileUpload element.




* Optional: test that this is an event from HTMLB library.IF event_id = CL_HTMLB_MANAGER=>EVENT_ID.

* See if upload is triggered from button DATA: event TYPE REF TO CL_HTMLB_EVENT. event = CL_HTMLB_MANAGER=>get_event( runtime->server->request ).


DATA: data TYPE REF TO CL_HTMLB_FILEUPLOAD. data ?= CL_HTMLB_MANAGER=>GET_DATA( request = runtime->server->request name = 'fileUpload' id = 'myFileUpload1' ). IF data IS NOT INITIAL. name = data->file_name. content = data->file_content. length = data->file_length. content_type = data->file_content_type. ENDIF.

ENDIF.ENDIF.

Note that all restored data for an element are written expressly to the element class. With the fileUploadelement, class CL_HTMLB_FILEUPLOAD is used to do this. An instance of this class is returned by the HTMLB manager.


id

file_name

file_content

file_length

file_content_type

Tips and Tricks

To pass the file from the browser to the server, the <form> element requires the following:

method="post"

encodingType="multipart/form-data"

Note that accept and maxLength are deprecated attributes.

Further information


IS HTMLB FORM

Functionality

This BSP element is used for rendering a form, where the functionality rests on the HTML tag form.

The BSP element form is required by almost every path with active content, that is, with content that user input calls or which reacts to user actions. With HTMLB for BSPs, the BSP element form is responsible for communication between representing an element in the Browser and the code that runs on the server. Unlike other BSP elements, the form element does not have its own visual format, nor is it used to allocated BSP elements to the page. The attributes action and target function in exactly the same was as the attributes for the HTML tag <form>.


Embedded elements

Pure HTML

Scripting sections

Attributes

Name Mandatory ExplanationPossible Values

id Unique name that identifies the BSP element. Character string, such asmyform

method Use this attribute to determine the type of HTTP request that is used to send the form data. This is often a POST request.

Possible values are POST and GET

autoComplete

Use this attribute to determine the automatic completion of user entries. This attribute is available for Microsoft Internet Explorer 5 (IE5). As soon as IE5 recognizes known patterns, it proposes possible input values in list format. To accept a proposal as an entry, click on it. For further information, see http://support.microsoft.com/default.aspx?scid=kb;EN-US;q217148

Possible values are TRUE and FALSE

action Use this attribute to determine the document to which the form data should be sent.

String, such aspath specification

encodingType Use this attribute to determine the type of coding for the form data.

Coding type, such as multipart/form data

target Use this attribute to determine the frame to which the form data should be sent.

String, such as_blank or _top

language

Use this attribute to fetch the language for this component and to receive as a return value a string that determines the language. You can find additional information in the W3C recommendation "Synchronized Multimedia Integration Language (SMIL) 1.0 Specification" from June 15, 1998. You can access the English version of the document at http://www.w3.org.TR.REC-smil/.

Two-digit language code, such as EN

doValidate This attribute is not currently available and should therefore not be used.

Example

See BSP application SBSPEXT_HTMLB, page form.bsp.

Event handling




Tips and Tricks

When it is executed on the SAP Web Application Server, every document that contains active BSP elementsmust instantiate at least one form element. This is done using an <htmlb:form> in the layout section ofthe BSP. All requests to active elements must take place within this form section. You can use different formsfor the various parts of a Web page. However, you should note that when you use this procedure, only user input that is related to the submitted form is sent back to the server. The contents from the other forms will be lost.

form elements can not be nested within each other.

Further information


IS HTMLB GRIDLAYOUT

Functionality

This BSP is used to arrange controls or views in tables.

Several documents can be considered as an arrangement of nested boxes. Consider the layout of a magazine, for example. It consists of a row of columns that can contain articles. The articles each have a heading and a block of text. Pictures are also possible. The text can be split up into several paragraphs and so on. These modules in a magazine are boxes, that is, right-angled areas that can be arranged on the pageas tables. The gridLayout element provides a simple way of creating this type of document, although it provides many more functions: each cell in a gridLayout element can include an element. By default, the element itself does not have its own visible design.

The inner element structure consists of:gridLayoutCell .

Attributes



width Use this attribute to determine the width of the grid layout.

height Use this attribute to determine the height of the grid layout.

rowSize x Use this attribute to determine the number of rows.

columnSize x Use this attribute to determine the number of columns.

cellSpacing Use this attribute to determine the spacing between the individual cells in the grid.

cellPadding Use this attribute to determine the spacing between the cell framework and contents.



styleUse this attribute to replace the background color with the standard "look & feel". Possible values are ALTERNATING, TRANSPARENT, STANDARD (default) and WHITE.

Example

See BSP application SBSPEXT_HTMLB, page gridexample.bsp.

Event handling




Further information


IS HTMLB GRIDLAYOUTCELL

Functionality

This BSP element displays the properties of an individual cell in a gridLayout element. You can determine the size and alignment for this cell using the attributes width, horizontalAlignment and verticalAlignment. Furthermore, a cell can stretch over several columns. In this case, set the attribute colspan.

Attributes


id


Character string, for example, mygridLayoutCell

rowIndex xUse this attribute to determine an index for the rows

Numerical Value

columnIndex xUse this attribute to determine an index for the columns

Numerical Value.

sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20GRIDLAYOUT



horizontalAlignment

Use this attribute to determine the horizontal alignment of an entry within the cell. This attribute is is especially important for supporting RTL

JUSTIFY (justify within a cell), RIGHT, LEFT, CENTER (new for design2003), ENDOFLINE (new for design2003)

verticalAlignmentUse this attribute to determine the vertical alignment of an entry within the cell

TOP (default value), MIDDLE, BOTTOM, BASELINE.

width

Use this attribute to determine the width of the cell. Depending on the text width and length, you can use the following attribute to determine whether or not a line break should be inserted.

Numerical value with percent or pixels, for example, 100% or 200px

wrapping

Use this attribute to determine whether the text in the cell should be broken, or if it should be on one line in the cell. See also the previous attribute.

TRUE, FALSE, blank

colSpanUse this attribute to determine the number of columns that a cell can contain.

Numerical value

backgroundColorUse this attribute to change the background color of a cell in the grid layout.

You can use the hexadecimal specification of the color, or the color name (such as brown, dark blue, and so on).

styleUse this attribute to replace the background color with the standard "look & feel".

ALTERNATING, TRANSPARENT, STANDARD (default), WHITE.

Example

See BSP application SBSPEXT_HTMLB, page gridexample.bsp.

sapevent:DOCU_LINK%5CDS:TX.TX_RTL_LTR

Event handling




Further information


IS HTMLB GROUP

Functionality

Use this BSP element to draw a group framework around embedded inner elements.

A group element is ideal for arranging and visually separating a series of elements that are logically or semantically related to each other.

The group element is available in different standard designs, which you can select using the attribute design.

The content of a group element is specified by the two elements groupHeader and groupBody

Attributes

Name Mandatory Explanationid Unique name that identifies the BSP element.

title Use this attribute to determine a title for the group. If the optional <groupHeader> is specified, then both the title text and the group header text are rendered.

designUse this attribute to determine the current design for rendering the group. Possiblevalues are: SAPCOLOR (default), PRIMARYCOLOR, SECONDARYCOLOR, SECONDARYBOX and SECONDARYBOXCOLOR.

height Use this attribute to determine the height of the group.

sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20GROUPBODY

sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20GROUPHEADER



bodyColor

Use this attribute to determine the background color for the group. The usual standard colors are valid as values. You can use the hexadecimal specification of the color, or the color name (such as brown, dark blue, ...). Note that for reasons of accessibility that you do not specify content information only using the color selection.

tooltip Use this attribute to determine the quick info text that is displayed when the cursoris moved over the group.

width Use this attribute to determine the width for the group. You can also specify the width as a percentage.

Example

See BSP application SBSPEXT_HTMLB, page group.bsp.

Event handling




Further information


IS HTMLB GROUPBODY

Functionality

Use this BSP element to group the contents of a group body according to the group header (see groupHeader).

This BSP element is embedded in a group.

Caution

This embedded element is mandatory.

Attributes


sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20GROUP

sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20GROUPHEADER



Example

See BSP application SBSPEXT_HTMLB, page group.bsp

Event handling




Further information


IS HTMLB GROUPHEADER

Functionality

You use this BSP element to group the contents of a group header.

This BSP element is embedded in a group.

Note

The groupHeader element is optional. To output a simple header text, you can also use the title attribut in the BSP element group.

Attributes


Example

See BSP application SBSPEXT_HTMLB, page group.bsp

Event handling




Tips and Tricks

sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20GROUP



This BSP element is used to record individual "small" elements such as pushbuttons, links or images. From the point of view of usability, there is absolutely no point in using a complete tableView element, for example, here.

Further information


IS HTMLB HEADINCLUDE

____________________________________________________

See documentHead.

Functionality

With this BSP element, the head (<head>) ) of a document is rendered together with the standard includes for stylesheets (CSS files) and scripts (JS files).

The documentHead element together with the documentBody element makes a Web document (see also document).

With the optional BSP element headInclude you can insert standard HTMLB includes (style sheets and scripts) explicitly in the header of your page. However, this is not necessary. The headInclude element can only be used by a documentHead element.

You can also record your own declarations in the documentHead section.

Attributes


title Use this attribute to determine the title of the page that is usually displayed as the title ofthe browser window.

Example




<script language="JavaScript" type="text/javascript"> ... </script>






... Additional scripting, analog to the <head> of HTML pages ... </htmlb:documentHead>

<htmlb:documentBody> ... Body of page ... </htmlb:documentBody>


NoteSee also BSP application SBSPEXT_HTMLB, page document.bsp

Event handling




Further information


IS HTMLB IMAGE

Functionality

This BSP element is used as a view element and contains a MIME object, such as an image or a symbol.

The image is referenced by a URL that is stored in the attribute src .

The height and width of the image are determined by the corresponding attributes (see below).

Accessibility

On the Web it is usual to display either an appropriate quick info text or an alt text for an image, so that even disadvantaged people can recognize the image's meaning. For example, textual information about the image may be recognized by appropriate tools and read out for blind users.

It is a simple element without an inner element structure.

Attributes



src x Use this attribute to create the URL for the image.

onClickUse this attribute to set the event handler that is called when you click on the image. An event is sent to the server, which returns the reference as a parameter. The reference can then be processed further.

alt Use this attribute to determine an additional help text. The default value is IMAGE.

height Use this attribute to determine the height of the image.

width Use this attribute to determine the width of the image.

tooltip Use this attribute to determine the quick info text that appears when the cursor is moved over the image.

Example

See BSP application SBSPEXT_HTMLB, page image.bsp.

Event handling




Tips and Tricks

You can also use this element to render SAP symbols (icons). To do this, you have the following options:

Use the usual internal short code for the SAP symbol, such as @ 38 @ (no blank spaces)

Alternatively, use the internal name of the SAP symbol, such as ICON_CHECK

Further information




IS HTMLB INPUTFIELD

Functionality

This BSP element implements the concept of a generic, single-cell input field. The content type of this field iscompletely determined by the corresponding data object type, which ensures extensive flexibility.

The inputField element depends largely on the concept of data objects and data binding. All generic data objects are supported, that is, STRING for strings, INTEGER for whole numbers, BOOLEAN for Boolean expressions, BCD for fixed point numbers (data type 'P' in ABAP) and DATE and TIME for inputtingthe date and or time. The data type that is accepted an inputField element can be set explicitly with the attribute type.

Attributes


id


Character string, for example, myinputField

design

Use this attribute to determine the font in which the text shouldbe displayed. For example, the text can be displayed as a first-class header or in default font.

STANDARD (default), SMALL

encode

coding. If the attribute is set to TRUE, the text is written as HTML source code.Example:text = "This text is <b> displayed </b> perfectly and has a tooltip." The word "displayed" is formatted in bold. If the attributeis set to FALSE, the text is displayed.Instead of using this attribute, we recommend you use the attribute <htmlb:contentforceEncode>.


required

Use this attribute to determine whether or not the input field is a mandatory field, that is, whether or not user input is required.

FALSE (Standardwert), TRUE


width

Determines the text width for the input field. We recommend that you use the size attribute instead of width.

Numerical value or percentage

size Determines the size of the inputfield.

Numerical value

submitOnEnter

Boolean. If this attribute is set to TRUE, a server roundtrip with the event name submitoneneter is triggered

TRUE, FALSE, for example,<htmlb:inputField id = "i1" submitOnEnter = "true" />

currency

The value attribute in the currency specified in currency is formatted in the combination type=currency

Currency, for example, USD

isAppendUnitThe currency specified in currency is also displayed inthe value attribute


maxLength Maximum length of the user input

Numerical value

showHelp

Determines whether a pushbutton should be displayedimmediately next to the input field, which can be used to display input help or value help for that field. Note that this attribute can only be set for date fields.

Character string

onValueHelp You can use this attribute only JavaScript function, for example,

in conjunction with showHelp.When you click on the pushbutton next to the input field, the JavaScript function specified in onValueHelp is executed.

<htmlb:inputField id = "i2" showHelp = "X" onValueHelp = "alert('ValueHelpPressed')" />

visible

Determines whether the input field should be visible or invisible, that is, whether or not the BSP element should be rendered in the BSP.

X (default) or nothing

disabled

Determines whether or not the input field should be available for input at a specific time. The input field is therefore currently unavailable, and any data that was already entered is grayed out.


value Default value of the input field String

description General descriptive text Text

passwordDetermines whether the input field for the password should beprotected with a *


alignmentText alignment. This attribute is especially important for supporting RTL

RIGHT (right-justified), LEFT (start of line), CENTER (new for Design2003), FORCEDLEFT (new for Design2003, left-justified even when the writing direction oftextDirection on the page is different), ENDOFLINE (new for Design2003, alignment at end of line depending on the direction specified in textDirection)

cellValue Determines whether or not the input field is in a table view

FALSE (default), TRUE.


decimals Number of decimal places. Thisonly applies to BCD data

2 (default) or other numerical value

invalid

Determines whether the input field should be rendered with the status 'invalid'. That is,it specifies whether a valid that was already entered is invalid.

FALSE (default), TRUE, AUTO

firstDayOfWeek

Determines the first day of a week for the dateNavigator element help

0 (default, Sunday), 1 (Monday), 2 (Tuesday), 3 (Wednesday), 4 (Thursday), 5 (Friday), 6 (Saturday).

style

This attribute is deprecated andhas no use for design2003. In the classic design or in design2002 you can use thisattribute to display an additionalstyle for the inputField element.

type Data type of the input fieldSTRING (default), DATE, TIME, BCD, BOOLEAN, INTEGER.



doValidate Presently not available -

cssClass This attribute is deprecated andis not used for design2003. In the classic design or in

design2002 you can use thisattribute to display an additionalCSS class for the inputField.

tooltipText for the quick info that appears when the cursor is moved over the input field

Text

Example

See BSP application SBSPEXT_HTMLB, page InputField.bsp.

Event handling



If you want to read the input field, you do this in the event handling phase in OnInputProcessing. You usuallyuse an event of a button element to trigger the coding that reads the data from the inputField element.


CLASS CL_HTMLB_MANAGER DEFINITION LOAD. DATA: event TYPE REF TO CL_HTMLB_EVENT. event ?= CL_HTMLB_MANAGER=>GET_EVENT(runtime->server->request ).


DATA: data TYPE REF TO CL_HTMLB_INPUTFIELD. data ?= CL_HTMLB_MANAGER=>GET_DATA( request = runtime->server->request name = 'inputField' id = 'myInputField1' ). IF data IS NOT INITIAL. value = data->value. ENDIF.

ENDIF.

Note that all restored data for an element are written expressly to the element class. With the inputFieldelement, class CL_HTMLB_INPUTFIELD is used to do this. An instance of this class is returned by the HTMLB manager.

Data binding with CL_BSP_MODEL

As part of the MVC Design Pattern, the framework for the application model provides you with a base class CL_BSP_MODEL, which you can use as the inheriting class for your own model class. The model class represents the data context of your application and therefore contains a copy of the data relevant to the viewfrom the database model.


Below is a list of the attributes that are available for data binding.The binding type specifies whether data binding is read only or whether both read and write are possible.The column with the value from attribute binding specifies whether the attributes value (such as size) is fetched from the model data from a different attribute (such as value). Here, for example, the length is fetched from the metadata for the model attribute, which is specified with value. Since for inputField the value attribute is the only binding with read and write binding, as many element attributes as possible are filled from the metadata for this attribute.The comment column specifies whether the attribute can be overwritten and additional explanations are given where necessary.


Value from Attribute Binding

Comment

design read -

disabled read -

firstDayOfWeek read -

id valuecan be overwritten. If it is specified, the HTML ID from the entry can be used. The HTML attribute name is taken from the model.

invalid value cannot be overwritten

maxlength value can be overwritten only if it is not available in model data

onValueHelp read value can be overwritten

password read -

required read -

showHelp value cannot be overwritten

size value can be overwritten only if it is not available in model data

type valuecannot be overwritten. With model binding, no data conversion takes place in the element.

valueread and write

-

visible read -

decimals value

Tips and Tricks

Note that the attributes invalid and required are neither set not evaluated by the inputField element. The application is responsible for recognizing invalid or missing user input and for setting the corresponding attributes as required.

You should not normally set the width of an inputField element using the general attribute width. Instead, you should use the element-specific attribute size, which functions just like the corresponding attribute for the HTML <input> element. The value for size is not specified in pixels, but in characters, and is reconciled with the font size and unit of measurement.

If the attribute showHelp has been set, to the right of the inputField-element there is a symbol that looks similar to a pushbutton for a dropDownListBox element. A built-in help function is available for input fields that are linked to a date data source. In this case, there is a dialog window with a dateNavigator element. Users can click on any day in this calendar view and the corresponding date is then automatically returned to the input field.

Further information


For more information about the MVC Design Pattern and data binding, see the SAP Library path named above and choose ... Programming Model -> Model View Controller (MVC).

IS HTMLB ITEMLIST

Functionality



This BSP element arranges elements in a a type of bulleted list.

Bulleted lists are frequently used Web page modules, whereby the bullets can be a number od a symbol. The element itemList offers flexible options for creating lists. For example, in addition to simple text elements, it can also include any other elements that permit a complex layout.

The inner element structure consists of listItems.

Attributes


id Unique name that clearly identifies the BSP element. This attribute is used in event handling and in data handling.

ordered Use this attribute to determine whether the bullets in the list should be displayed as numbers instead of characters.

ExampleSee BSP application SBSPEXT_HTMLB, page itemlist.bsp

Event handling




Further information


IS HTMLB LABEL

Functionality

This BSP element provides a label for an .

Attributes






for x Use this attribute to specify the input field for which the label should be displayed.

text Use this attribute to specify the text that should be displayed before the input field.

design

Use this attribute to determine the font in which the text should be displayed. For example, the text can be displayed as a first-class header or in default font. Possible values are: STANDARD (default), HEADER1, HEADER2, HEADER3, EMPHASIZED, LABEL, LABELSMALL, LEGEND, REFERENCE.

required Use this attribute to determine whether or not the input field is mandatory.

encode Use this attribute to determine the coding.

tooltip Use this attribute to determine the quick info text that is displayed when the cursor is moved over the label text in front of the input field.

widthUse this attribute to determine the text width for the label. Depending on the text width and length, you can use the following attribute to determine whether or not a line break should be inserted.

wrapping Use this attribute to determine whether the label text in front of the input field shouldbe broken, or if it should be placed on one line. See also the previous attribute.

Example

See BSP application SBSPEXT_HTMLB, page Label.bsp.

Eventhandling



Data binding with CL_BSP_MODEL

As part of the MVC Design Pattern, the framework for the application model provides you with a base class CL_BSP_MODEL, which you can use as the inheriting class for your own model class. The model class

represents the data context of your application and therefore contains a copy of the data relevant to the viewfrom the database model.

Below is a list of the attributes that are available for data binding.The binding type specifies whether data binding is read only or whether both read and write are possible.The column with the value from attribute binding specifies whether the attributes value is fetched from the model data from a different attribute.The comment column specifies whether the attribute can be overwritten and additional explanations are given where necessary.


Value from Attribute Binding

Comment

design read -

for read -If this attribute is bound, this does not mean that the value of the model field is used as the for attribute, but instead that label and inputField can be bound to the same model element.

id read forcan be overwritten. The labels ID is specified from the for attribute by appending "_l" only if the attribute is not specified.

required read -

text read for

can be overwritten. The text can be bound as an attribute to a model field.If it is not specified or bound, this means that the for attribute is bound. In this case, the text from the label of the for attribute is fetched. If several labels are specified (in the ABAP Dictionary, short, medium and long are possible), a label that is not empty is searched for in the sequence "medium -> long -> short".

tooltip read forSee also the previous comment. If the value from the binding of the for attribute should be fetched, the long label is selected.

Further information


For more information about the MVC Design Pattern and data binding, see the SAP Library path named above and choose ... Programming Model -> Model View Controller (MVC).

IS HTMLB LINK



Functionality

This BSP element provides hyperlink functionality for an inner element.

Note

We recommend that you only use relative URLs in your BSP application.

The BSP element link is extremely flexible, since it can include a textView or an image element. The most important attribute, reference, determines the destination URL of the link in the usual notation. Furthermore, you can use onClick to define your own event handler, which makes your link behave like a button.

The structure of an inner element consists of:

Embedded BSP elements

Pure HTML

Attributes



Character string

linkType

Changes the design for design2003. If the linkType attribute is not set by the application, a default link is rendered if a URL hasbeen provided with the referenceattribute, or else a function link is rendered if an onClick or onClientClick event is to be triggered. We recommend you use a FUNCTION or a REPORTING link.

DEFAULT (when the reference attribute is used, the link is displayed in violet. Use this value for Internet-like applications in which the font color of the link indicates if the user has already clicked on it or not. However, do not use this value for applications containing many links that are clicked on frequently, so that the browser display stays clear.),FUNCTION (when the onClick or onClientClick attribute is used, the link is displayed in blue and is underscored),REPORTING (when the onClick and onClientClick attribute is used, the link is rendered in a table. Link is blue but not underscored),RESULT (Link is displayed in black in its standard status. This is useful for applications, in which practically everything is displayed on one page and it is obvious to the user that everything can be clicked on anyway.)DRAGRELATE (Link is displayed in its normal status same as with RESULT and FUNCTION, but it is in hover status - green with no underscore)


onClick

Use this attribute to set the event handler that is called when you click on the link. An event is sent to the server, which returns the reference as a parameter. The reference can then be processed further.

Character string

onClientClick Client-side event handler called whenthe link is clicked on.

Character string

reference Use this attribute to determine the destination URL of the link.

URL

target

Use this attribute to determine the frame that the link should point to. Note that this attribute applies only if HREF is specified.

_BLANK, _SELF

textUse this attribute to define simple textlinks. You can also set the text using the BSP element body.

Text



tooltipUse this attribute to determine the quick info text that is displayed when the cursor is moved over the link.

Text

Example

Sample layout for a link with text and quick info as well as a link with a picture:

<%@page language="abap"%><%@ extension name="htmlb" prefix="htmlb"%>

<htmlb:content> <htmlb:page title = "BSP Extension: HTMLB / Element: Link"> <htmlb:form>

<htmlb:link id = "link1" text = "Link With Text" reference = "http://www.sap.de" tooltip = "Quick with link reference: http://www.sap.de" onClick = "MyLinkClick" /> <htmlb:link id = "link2" reference = "http://www.sap.de" > <htmlb:image src="../it00/father_son.jpg" alt="Not available"/> </htmlb:link>


NoteSee also BSP application SBSPEXT_HTMLB, page link.bsp.

Event handling

A BSP element can have many events. The BSP element link has only one event handler, onClick, which is which is passed when the user clicks on a hyperlink.

You usually implement your user interface elements using a form></> element in your BSP layout, which refers back to the same page. In this default case, createthe code for the event handling in the OnInputProcessing section. Withinthe OnInputProcessing event handler, the HTMLB BSP extension can recognize and evaluate events using the event ID variable. For all HTMLBevents, this variable has the value <EX>CL_HTMLB_MANAGER=>event_id</>. Normally, the events are handled accordingly as part of this framework:




In this case, the HTMLB manager is called in order to obtain a reference to a generic event object of type CL_HTMLB_EVENT. You can use the attributes name and event_type on this event object to determine which type of event is available. If the element supports the attribute id, you can use attribute id to find out which element triggered the event. To display detailed event data, map the event object to an event object with the appropriate type. In this example, this is a link event. You can find more information about the link event in class CL_HTMLB_EVENT_LINK. DATA: event TYPE REF TO CL_HTMLB_EVENT. event = CL_HTMLB_MANAGER=>get_event( runtime->server->request ). IF event->name = 'link' AND event->event_type = 'click'. DATA: link_event TYPE REF TO CL_HTMLB_EVENT_LINK.

link_event ?= event. " navigation->goto_page( link_event->reference ). " return. ENDIF.NoteNote that for the BSP element <link> and the onClick event, the event class is CL_HTMLB_EVENT_LINK.

Scenario 2:

Interface is available for event handling. This interface contains methods for all of the BSP elements that are used in the BSP extension HTMLB and which use events.The event can be triggered by a user-instantiated event handler class. In this case, the event handling class can be any user-defined class that must implement and have already instantiated the interface IF_HTMLB_EVENT. You can usually use the application class, for example, to handle specific events. If you do this, the only prerequisite is that the application class must implement interface IF_HTMLB_EVENT.The following example uses a separate class named CL_HTMLB_EVENT_EXAMPLE for event handling: DATA: event_handler TYPE REF TO CL_HTMLB_EVENT_EXAMPLE. CREATE OBJECT event_handler. CL_HTMLB_MANAGER=>dispatch_event( request = runtime->server->request event_handler = event_handler page_context = page_context ).The link triggers event IF_HTMLB_EVENT~LINK_CLICK.Parameter ExplanationID ID of the element used.


REFERENCE Reference parameter that was originally specified in the returned link element.CautionAll link click events for all hyperlinks on the page are triggered by this one method. As a developer, ensure that you select the correct ID to decide which link is triggered.



Tips and Tricks

Use an <htmlb: image> element if you want to display a link as an image (see example).

You can use the BSP element link as content with elements other than TextView or Image. Note that the behavior of the hyperlink cannot be guaranteed due to general HTML restrictions, although this largely depends on the ability of the browser.

Further information




IS HTMLB LISTBOX

Functionality

This BSP element is similar to the classical GUI concept of a selection list with multiple selection (list box).

You can use this element as a replacement for the dropDownListBoxelement.

You can define the list entries in a listBox element in two different ways:

1. Statically in the layout section of a BSP application2. By binding data to a table


The first process is very simple. You add as many listBoxItems as necessary to the listBox element. Note that you must always define the attribute key.

The second process, data binding to a table, is mostly useful for applications written in ABAP, since this language provides direct support for tables. You need at least one table with two columns that contain the key and text ID pairs. Assign the attribute table of the listBox element to this table. You must assign the attributes nameOfKeyColumn and nameOfValueColumn to the technical name of the table columns.

The inner element structure consists of:listBoxItem elements.

Attributes



disabled Use this attribute to determine whether the list box can be clicked on to trigger the select event.

size Use this attribute to determine the size of the list box.

width Use this attribute to determine the width of the list box.

table Use this attribute to specify as a data source the table from which the values for the list box should be taken.

sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20DROPDOWNLISTBOX

nameOfKeyColumn Use this attribute to determine the name of the key column in the table.

nameOfValueColumn Use this attribute to determine the name of the value column in the table.

selection Use this attribute to determine the list entry that is currently selected.

selections This is a string table that contains key values. Use this attribute together with the previous attribute selection.

backgroundColor

Use this attribute to change the background color of the list box. You can use the hexadecimal specification of the color, or the color name (such as brown, dark blue, ...).

textColor

Use this attribute to determine the color of the text to be displayed. You can use the hexadecimal specification of the color, or the color name (such as brown, dark blue, ...).

nameOfBackgroundColorColumn Use this attribute to determine the name of the background color column.

nameOfTextColorColum Use this attribute to determine the name of the text color column.

Example

See BSP application SBSPEXT_HTMLB, page listbox.bsp.

Event handling



If you want to read the list box, you do this in the event handling phase in OnInputProcessing. You usually use an event of a button element to to trigger the coding that reads the data from the listBox element.



* Optional: test that this is an event from HTMLB library.IF event_id = CL_HTMLB_MANAGER=>EVENT_ID.

* See if upload is triggered from button DATA: event TYPE REF TO CL_HTMLB_EVENT. event = CL_HTMLB_MANAGER=>get_event( runtime->server->request ).


DATA: data TYPE REF TO CL_HTMLB_LISTBOX. data ?= CL_HTMLB_MANAGER=>GET_DATA( request = runtime->server->request name = 'listbox' id = 'mylistbox1' ). IF data IS NOT INITIAL. selections = data->selections. ENDIF.

ENDIF.ENDIF.

Note that all restored data for an element are written expressly to the element class. With the listBox element, class CL_HTMLB_LISTBOX is used to do this. An instance of this class is returned by the HTMLB manager.


id

selections

The list box items are always written in coding before the table. The table is therefore rendered after the list box items.

Tips and Tricks

The listBox element is not intended for displaying lists with thousands of entries. In general, a list should never contain more than 30 entries. Ensure that the size of your HTML page grows in proportion to the number of entries.

Further information


IS HTMLB LISTBOXITEM

Functionality


This BSP element provides embedded list entries for dropDownListBox and for ListBox.

This element does not have an inner element structure.

Attributes

Name Mandatory Explanationkey x Use this attribute to determine the unique key for the list entry.

selected Use this attribute to determine whether or not the list entry is selected.

value x Use this attribute to determine the content of the list entry.

backgroundColorUse this attribute to change the background color of a list box entry. You can use the hexadecimal specification of the color, or the color name (such as brown, dark blue, ...). This attribute is deprecated.

textColorUse this attribute to determine the color of the text to be displayed. You can use the hexadecimal specification of the color, or the color name (such as brown, dark blue, ...). This attribute is deprecated.

Example

See BSP application SBSPEXT_HTMLB, page listbox.bsp.

Event handling




Tips and Tricks

Note that textColor and backgroundColor are deprecated attributes.

Further information



sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20DROPDOWNLISTBOX

IS HTMLB LISTITEM

Functionality

This BSP element provvides a list entry or bulleted list entry for the element itemList.

The inner element structure consists of embedded elements.

Attributes


Example

See BSP application SBSPEXT_HTMLB, page itemlist.bsp

Event handling




Tips and Tricks

For this BSP element Right-to-Left support is provided indirectly when you use a text edit element

Further information


IS HTMLB MONTH

Functionality

This BSP element defines a reference to a specific week within the dateNavigator element.

See also days and week.

Attributes

Name Mandatory Descriptionmonth x Use this attribute to determine the month.

year Use this attribute to determine the current year.

sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20WEEK

sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20DAYS




sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20ITEMLIST

tooltip Use this attribute to determine the quick info text that is displayed when the user moves the cursor over a month.

selection Use this attribute to determine an index for an existing range of months that should be displayed as selected.

Example


Event Handling




Further information


IS HTMLB PAGE

Functionality

This BSP element represents a complete HTML page.

HTML/WML and the head are rendered. In addition, the standard includes for style sheets (CSS files) and scripts (JS files) are automatically inserted, as well as the body and the standard style class.

You can use the page element to easily define the document structure, as well as the header and the body parts.Alternatively, you can also use the more complex BSP element document with the embedded documentHead and documentBody element, which provide you with more control over the granularity of the document structure.


Embedded elements

Pure HTML

Attributes






titleUse this attribute to determine the title of the page, which is usually displayed as the title of the browser window. As this is text, you can also use blank characters in the text.

onLoadThis attribute is used when a file is loaded. In the introductory <page> tag, the event handler onLoad= is quoted. It calls the client-side script function thatis defined in a script area in the file header.

marginBottom Use this attribute to determine the bottom margin. The default value is 2 (pixels).

marginTop Use this attribute to determine the top margin. The default value is 2 (pixels).

marginLeft Use this attribute to determine the left margin. The default value is 2 (pixels).

marginRight Use this attribute to determine the right margin. The default value is 2 (pixels).

scrolling Use this attribute to determine whether or not a scrollbar should be displayed.Possible values are AUTO (default), YES and NO.

Example

<%@extension ....<htmlb:content> <htmlb:page title = "my Title"> ... Remaining body ... </htmlb:page></htmlb:content>

Event handling




Further information


IS HTMLB RADIOBUTTON

Functionality

Use this BSP element to create the concept of an individual radio button. Since an individual radio button never appears on its own, but is always grouped together with other logically related radio buttons, you needthe surrounding BSP element radioButtonGroup.

Attributes


id x


Character string, such as myRadiobutton

tooltip

With this attribute you determine the quick info text that appears when the cursor is moved over the radio button.

Character string

checkedUse this attribute to determinewhether or not the radio button can be selected.

TRUE means that it is selected. If you do not assign any value to thisattribute, or if it is false, the radio button is not selected.

encode Code

If the attribute is set to TRUE, the text is written as HTML source. Example: text = "This text is <b>displayed</b> perfectly and has a tooltip." Here, the word "displayed" is in bold font. If the attribute is set to FALSE then the text is output as it is.We recommend you use attribute <htmlb:contentforceEncode>.

TRUE (default), FALSE

key The key is the value characterstring that is transported back to the server and is made available again to the user. If you call get_data for a <htmlb:radiobuttongroup>, then the key is returned. If youdo not set the key, then key=id

Character string or blank (default)


sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20RADIOBUTTONGROUP

(default).

text

Use this attribute to determinethe text that should be displayed next to the radio button as an explanatory text.

Character string

onClick

Use this attribute to set the event handler that is called when you click on the radio button. An event is sent to the server.

Character string

onClientClick

Use this attribute to set the event handler on the server side that is called when you click on the radio button.

Character string


LTR (predominant writing direction in Indo-European languages) , RTL(predominant writing direction in Middle Eastern languages, for example, Hebrew and Arabic) , INHERIT (default value, use the writing direction already set on the page)

disabled

Use this attribute to determinewhether the radio button can be clicked on to trigger the select event.


Example

See example in radioButtonGroup .


Event handling

A BSP element can have many events. BSP element radioButton has only two event handlers, onClick and onClientClick.

sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20RADIOBUTTONGROUP

You usually implement your user interface elements using a form></> element in your BSP layout, which refers back to the same page. In this default case, createthe code for the event handling in the OnInputProcessing section. Withinthe OnInputProcessing event handler, the HTMLB BSP extension can recognize and evaluate events using the event ID variable. For all HTMLBevents, this variable has the value <EX>CL_HTMLB_MANAGER=>event_id</>. Normally, the events are handled accordingly as part of this framework:




In this case, the HTMLB manager is called in order to obtain a reference to a generic event object of type CL_HTMLB_EVENT. You can use the attributes name and event_type on this event object to determine which type of event is available. If the element supports the attribute id, you can use attribute id to find out which element triggered the event. To display detailed event data, map the event object to an event object with the appropriate type. In this example, this is a radioButton event. You can find more information about the radioButton event in class CL_HTMLB_EVENT_RADIOBUTTON. DATA: event TYPE REF TO CL_HTMLB_EVENT. event = CL_HTMLB_MANAGER=>get_event( runtime->server->request ). IF event->name = 'radioButton' AND event->event_type = 'click'. DATA: radiobutton_event TYPE REF TO CL_HTMLB_EVENT_RADIOBUTTON. radiobutton_event ?= event. ENDIF.NoteNote that for the BSP element <radioButton> and the onClick event, the event class is CL_HTMLB_EVENT_RADIOBUTTON.

Scenario 2:

Interface is available for event handling. This interface contains methods for all of the BSP elements that are used in the BSP extension HTMLB and which use events.The event can be triggered by a user-instantiated event handler class. In this case, the event handling class can be any user-defined class that must implement and have already instantiated the interface IF_HTMLB_EVENT. You can usually use the application class, for example, to handle specific events. If you do this, the only prerequisite is that the application class must implement interface IF_HTMLB_EVENT.The following example uses a separate class named CL_HTMLB_EVENT_EXAMPLE for event handling: DATA: event_handler TYPE REF TO CL_HTMLB_EVENT_EXAMPLE. CREATE OBJECT event_handler. CL_HTMLB_MANAGER=>dispatch_event( request = runtime->server->request event_handler = event_handler page_context = page_context ).The radioButton element triggers event IF_HTMLB_EVENT~RADIOBUTTON_CLICK, which contains the following additional parameters:

o ID


Name of the event handler specified by the userThere is the onClick attribute for all triggered events. This is the name assigned by the user for the event handler method.CautionAll radioButton click events for all radio buttons on the page are triggered by this one method. As a developer, ensure that you select the correct ID to decide which radio button is triggered.



Further information


IS HTMLB RADIOBUTTONGROUP

____________________________________________________

Functionality

This BSP element arranges a group of radio buttons (ex) radioButton) in columns. Only one individual radiobutton can be selected at a time. When you select a different radio button, this automatically deactivates the radio button that was initially selected. A possible area of application for this BSP element would be a screenthat offers several options that can be selected.

You determine the arrangement of radio buttons in columns using the attribute columnCount. Radio buttons that follow on from each other are arranged in rows.

To include a radio button in a group, add a element to the radioButtonGroup element.

The inner element structure therefore consists of radioButton elements.

Attributes


id xUnique name that identifies the BSP element.This attribute is used in event handling and indata handling.

Character string, such as myradioButtonGroup

columnCount Use this attribute to determine the number of columns for the group of radio buttons.



selection Use this attribute to determine the radio button that is currently set.

Name of the selected button

disabled Use this attribute to determine whether the radio button can be clicked on.


helpValues Help values for model binding

width Width of the group of radio buttons. Numeric value, such as 500

modeDeprecated attribute for testing buttons, which may be grouped together but are placed at different locations.

LAYOUT_GROUPING and LOGICAL_GROUPING

Example

See BSP application SBSPEXT_HTMLB, page radiobuttongroup.bsp.

Event handling



If you want to read the status of a radio button, you do this in the event handling phase in OnInputProcessing. The event handler OnInputProcessing may look as follows:

DATA: radioButtonGroup TYPE REF TO CL_HTMLB_RADIOBUTTONGROUP.radioButtonGroup ?= CL_HTMLB_MANAGER=>GET_DATA( request = runtime->server->request name = 'radioButtonGroup' id = 'myRadioButtonGroup1' ).

IF radioButtonGroup IS NOT INITIAL. selection = radioButtonGroup->selection.ENDIF.

Note that all restored data for an element are written expressly to the element class. With the radioButtonGroup element, class CL_HTMLB_RADIOBUTTONGROUP is used to do this. An instanceof this class is returned by the HTMLB manager.


SELECTION

Tips and Tricks

At the start, no radio button in the group is selected. When you create the element, you should always explicitly set the attribute selection.

If columnCount is not explicitly set, the system uses a single column.

Note that mode is a deprecated attribute.

Further information


IS HTMLB TABSTRIP

Functionality

With this BSP element you can switch between different views that use the same screen area.

A tabStrip element consists of individual tabs (tabStripItem). In turn each tab consists of an indicator (tabStripItemHeader) that can be used to jump between the tabs, as well as a content area (tabStripItemBody) that can record any element. The tab labels are always visible, whereas the content is displayed only when a tab is active.

The inner element structure consists of tabStripItem elements, which consists of tabStripItemHeader and tabStripItemBody.

Attributes


id Unique name that identifies the BSP element. This attribute is usedin event handling and in data handling.

selection Use this attribute to determine the tabstrip entry that is currently selected.

bodyHeight Use this attribute to determine the height of the content area for thetabstrip.

bodyColorWith this attribute you determine the color of the body of a tabstrip. You can use the hexadecimal specification of the color, or the color name (such as brown, dark blue, ...).

sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20TABSTRIPITEMBODY

sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20TABSTRIPITEMHEADER


horizontalAlignmentWith this attribute you determine the horizontal alignment of an entry within the tabstrip. Possible values are LEFT, CENTER (default), RIGHT, JUSTIFY and CHAR.

verticalAlignmentWith this attribute you determine the vertical alignment of an entry within the tabstrip. Possible values are TOP, MIDDLE (default), BOTTOM and BASELINE.

tooltip With this attribute you determine the quick info text that appears when the cursor is moved over the tabstrip.

width Use this attribute to determine the width of the tabstrip.

Example

See BSP application SBSPEXT_HTMLB, page tabstrip.bsp.

Event handling



If you want to read the selected status of a tabstrip, you do this in the event handling phase in OnInputProcessing. The event handler OnInputProcessing may look as follows:

DATA: tabstrip TYPE REF TO CL_HTMLB_TABSTRIP.tabstrip ?= CL_HTMLB_MANAGER=>GET_DATA( request = runtime->server->request name = 'tabStrip' id = 'myTabStrip1' ).

IF tabstrip IS NOT INITIAL. selection = tabstrip->selection.ENDIF.

Note that all restored data for an element are written expressly to the element class. With the tabStrip element, class CL_HTMLB_TABSTRIP is used to do this. An instance of this class is returned by the HTMLB manager.


ID

SELECTION

Tips and Tricks

From the point of view of usability, you should define the size of the tabstrip element explicitly, taking into consideration the size of the tab with the largest content. If you do not, the size of the tab is adjusted during switching, or else scroll bars will be displayed. This is not suitable for the Web and should therefore be avoided.

Further information


IS HTMLB TABSTRIPITEM

Functionality

This BSP element provides an inner element for the tabstrip (see tabStrip) and is therefore the description of the entries in a tabstrip.

The tabstrip entries are displayed in the sequence of their indexes. If an entry already exists for a specific index, this is overwritten by the new entry.


tabStripItemHeader

tabStripItemBody

Attributes



index x Use this attribute to determine an index for the tabstrip entries.

height Use this attribute to determine the height of the tabstrip entry.

onSelect Use this attribute to set an event handler on the server side that is called when a tabstrip entry is selected.



sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20TABSTRIP



title Use this attribute to determine the title for the tabstrip entry.

tooltip Use this attribute to determine the quick info text that is displayed when the user moves the cursor over the tabstrip entry.

width Use this attribute to determine the width of the tabstrip entry.

Example

See BSP application SBSPEXT_HTMLB, page tabstrip.bsp.

Event handling

A BSP element can have many events. BSP element tabStripItem has only one event handler, onSelect.





In this case, the HTMLB manager is called in order to obtain a reference to a generic event object of type CL_HTMLB_EVENT. You can use the attributes name and event_type on this event object to determine which type of event is available. If the element supports the attribute id, you can use attribute id to find out which element triggered the event. To display detailed event data, map the event object to an event object with the appropriate type. In this example, this is a tabStripItem event. You can find more information about the tabStripItem event in class CL_HTMLB_EVENT_TABSTRIP. CLASS CL_HTMLB_MANAGER DEFINITION LOAD. DATA: event TYPE REF TO CL_HTMLB_EVENT. event = CL_HTMLB_MANAGER=>get_event( runtime->server->request ). IF event->name = 'tabstrip'. DATA: tabstrip_event TYPE REF TO CL_HTMLB_EVENT_TABSTRIP. tabstrip_event ?= event. ENDIF.

NoteNote that for the BSP element <tabStripItem> and the select event, the event class is CL_HTMLB_EVENT_TABSTRIP.

Scenario 2:

Interface is available for event handling. This interface contains methods for all of the BSP elements that are used in the BSP extension HTMLB and which use events.The event can be triggered by a user-instantiated event handler class. In this case, the event handling class can be any user-defined class that must implement and have already instantiated the interface IF_HTMLB_EVENT. You can usually use the application class, for example, to handle specific events. If you do this, the only prerequisite is that the application class must implement interface IF_HTMLB_EVENT.The following example uses a separate class named CL_HTMLB_EVENT_EXAMPLE for event handling: DATA: event_handler TYPE REF TO CL_HTMLB_EVENT_EXAMPLE. CREATE OBJECT event_handler. CL_HTMLB_MANAGER=>dispatch_event( request = runtime->server->request event_handler = event_handler page_context = page_context ).The tabStripItem element triggers event IF_HTMLB_EVENT~TABSTRIP_SELECT, which contains two useful parameters id and selection. The id is the ID of the BSP element, and selection is the element that is currently selected.CautionAll tabStripItem select events for all tabstrip entries on the page are triggered by this one method. As a developer, ensure that you select the correct ID to decide which tabstrip entry is triggered.



Tips and Tricks

For this BSP element Right-to-Left support is available when you use a textView element.

Further information


IS HTMLB TABSTRIPITEMBODY

Functionality

You use this BSP element to group the content of a tabstrip entry body according to the tabstrip entry header(see tabStripItemHeader).

This BSP element is embedded in a tabStripItem.







Caution


Attributes


Example

See BSP application SBSPEXT_HTMLB, page tabstrip.bsp

Event handling




Further information

For more information about BSP extensions see the SAP Library at the Internet address help.sap.com/nw04-> SAP NetWeaver -> Application Platform (SAP Web Application Server) -> ABAP Technology -> UI Technology -> Web UI Technology -> Business Server Pages -> Programming Model -> BSP Extensions

IS HTMLB TABSTRIPITEMHEADER

Functionality

Use this BSP element to group the contents of a tabstrip entry header in front of the tabstrip entry body (see tabStripItemBody).

This BSP element is embedded in a tabStripItem.

Caution


Attributes


Example

See BSP application SBSPEXT_HTMLB, page tabstrip.bsp

Event handling








Further information


IS HTMLB TABLEVIEW

Functionality

This BSP element is used to display mass data in a layout similar to a table.

Tables are used in many business applications. The tableView element is "data-oriented" which means itis largely based on the concept of data binding. The most important attribute is therefore table, which must be assigned to every suitable external table. A tableView element is useless without a data source.

In specific cases, a tableView element should not display all of the data source's content, but only a specific line area. You can define or restrict the line area that is currently visible using the attributes visibleFirstRow or visibleRowCount. In the first attribute, the index of the first visible lines of thedata source as stored, whilst in the second attribute the total number of visible lines is stored. Note that the line area defined by these attributes should be a subset of the actually available lines provided by the data source. If the data source contains fewer lines than the visibleRowCount requires, the tableView element displays the missing lines as empty. You can prevent this by deleting the attribute fillUpEmptyRows. In case the data source does not contain any data, for example if a database query fails, you should define an explanatory text for the attribute emptyTableText that informs the user what has happened.

A tableView element can have a title bar, column headers and a footer. The title bar is only displayed if attribute headerText is defined. To activate a column header or a footer, set the attribute headerVisible or footerVisible. By default the footer contains the status display with the currently visible range of table lines. If attribute navigationMode has been defined, pushbuttons also appear in the footer. These pushbuttons are used for navigation within the tableView element.

A tableView element consists of the inner element tableViewColumns, which in turn can contain one or more elements.

Attributes


id x


Character string, such as myTableView



table xUse this attribute to define the table that should be rendered.

Table name, predefined ABAP type DATA

designUse this attribute to determine the title for the tabstrip entry.

Possible values are STANDARD (default), ALTERNATING and TRANSPARENT.

headerVisible

Use this attribute to determine whether or not the header should be visible.


columnHeaderVisible

Use this attribute to determine whether or not the column header should be visible.


columnDefinitions

Table for defining the standard behaviour of columns, such as the sort behaviour. You candefine the rendering behavior for DISPLAY_BEE and EDIT_BEE in particularin case you want to display or edit them. Fill the control table with the columns of thetable that should be rendered. We recommend that you use this table instead of inner elements to define which columns are rendered.

See structure TABLEVIEWCONTROL.

columnWidthUse this attribute to determine the width of a column.

Numeric value

columnWrapping Use this attribute to TRUE (default) and FALSE

determine whether or not the text within the column should be wrapped.

footerVisible

Use this attribute to determine whether or not the footer should be visible. The footer contains the navigationpushbuttons.


fillUpEmptyRows

Use this attribute to activate and deactivatethe automatic filling of empty table rows. To do this, the number of table rows that are actually visible must beless than the number ofvisible table rows that were counted (see visibleRowCount).


filter Use this attribute to determine a filter.

NONE (default, there is no filter), SERVER (HTMLB carries out the filtering) and APPLICATION (the application carries out the filtering)

filterButtonText

Use this attribute to specify in the classic design (see content element) a button with a text if there is a filter and selectionMode is not equal to NONE.

FilterButtonTooltip Use this attribute to specify in the classic design or in Design2002 (see content element) a button with a text and aquick info text if there isa filter and selectionMode is not equal to NONE. In

Design2002 there is animage for this with a quick info text.

onFilter

Use this attribute to seta server-side event handler that is called if the filter is activated.

String

iterator

Use this attribute to change the rendering behavior for rows, depending on the row that was clicked on. In this way you define thatfrom a certain row, depending on this row, something should happen, which you candefine using columnDefinitions or overWriteDefinitions.

See also IF_HTMLB_TABLEVIEW_ITERATOR and SBSPEXT_HTMLB/tableView.htm

keepSelectedRow

Use this attribute to define that the selection remains visible if this attribute isset to TRUE and the application takes over the sorting.

FALSE (default, which means that the visibleFirstRow attribute is not changed) and TRUE

keyColumn

Unique key (column name) in the table for using the full functionality, such as automatic filtering and sorting.

Column name of the table.

overWriteDefinitions

Overrides the default behaviour for certain cells (see also columnDefinitions).

See also structure TABLEVIEWOVERWRITE.

sort Use this attribute to NONE (default, there is no sorting),

activate sorting for the individual rows and to determine who is responsible for the sorting.

SERVER (HTMLB carries out the sorting) and APPLICATION (the application carries out the sorting) If you specify SERVER, you should also set the attributes keyColumn and onHeaderClick. See also columnDefinitions and the sort attribute from tableViewColumn.

widthUse this attribute to determine the width of the whole table.

Numeric value

navigationMode

Use this attribute to determine how the table view reacts to thescrolling command. If the footer is visible, theinformation that is displayed includes either the visible rows, or the visible page numbers, depending on the navigation mode.

Possible values are BYPAGE (default) or BYLINE.

selectionMode

Use this attribute to determine which selection modes shouldbe available for users:

NONE (default, no selection), SINGLESELECT (single selection, that is, only one single line can be selected using a checkbox), MULTISELECT (multi-selection, that is, several lines canbe selected by clicking checkboxes), LINEEDIT (edit a line) and MULTILINEEDIT (line edit for several lines). LINEEDIT means that a line can be edited when you click on it. With MULTILINEEDIT you can select several lines for editing using the checkboxes. If DESIGN2002 is active (from the contentelement), clicking on the same line switches from the editor to the display mode. The checkboxes are 'switched off'automatically whenever selectionMode is set to NONE or onRowSelection was not specified.

headerTextUse this attribute to determine the table title.

Enter any text you like.

onNavigate

Use this attribute to define an event handleron the server side, which is always called when a user clicks on acolumn title in the table.

Event handler name, such as onMyNavigate

onHeaderClick

Use this attribute to define an event handleron the server side, which is always called when a user clicks on acolumn title in the table.

Event handler name.

onRowSelection

Use this attribute to define an event handleron the server side, which is always called when a user selects a table row.

Event handler name.

visibleFirstRow

Use this attribute to determine which lines should be displayed as the first visible lines.

1 (default value) and any other numeric values.

visibleRowCount

Use this attribute to determine how many table rows should be visible. By default, all table rows are initially visible.

Numeric value

rowCountUse this attribute to determine the number of table rows.

Numeric value

emptyTableTextUse this attribute to define cells that do not have any content.

Table is empty! (default value)

selectedRowIndex

Use this attribute to define an index for the row that is currently selected.

selectedRowKey

Use this attribute to define a key for the rowthat is currently selected.

summary

Use this attribute to determine summary information about the table, which can be read by an external program. This attribute is important for accessibility.

Text

Example

See BSP application SBSPEXT_HTMLB, page tableView.bsp.

Tips and Tricks

The tableView element automatically fetches suitable field labels from the Dictionary information for table types (if available) and displays them as column headings By default, the content of the field label "Heading" is used. If you have to create your own column header, create a field catalog for the tableView element.

The tableView element always prevents the client column from being displayed (field name MANDT) for dictionary table types

In order to define specific sorting behavior, first set the sort attribute as: <htmlb:tableViewsort = "application" ... />Then determine which columns should be sorted, and which should not be sorted. Sometimes only certain rows should be sorted, and others should be excluded from the sort. You should therefore determine the following for the columns to be sorted: columnDefinitions-SORT = 'X' .

Further information


IS HTMLB TABLEVIEWCOLUMN

____________________________________________________

Documentation in Process

Functionality

This BSP element provides the individual table columns in a tableViewColumn of a tableView element.

Attributes

Name Mandatory DescriptionPossible Values

columnName xUse this attribute to determine the name of the table column.

encode

Use this attribute to determine the coding. Possible values are TRUE and FALSE. If the attribute is set to TRUE, then the text is written as HTML source. If the attribute is set to FALSE (default), then the text is outputas it is.

sort

Use this attribute to activate the sorting for the individualrows. By default, a column cannot be sorted, that is, thisattribute is set to FALSE. If you set this attribute to TRUE, then the column concerned can be sorted, although the type of sorting depends on the value that you specified in the tableView element as its sort attribute. Possible values are FALSE (default) and TRUE.

fixedColumn

Use this attribute to determine that the column entries should be sorted fixed and hierarchically. In this way, entries with the same content are summarized. A new row is opened automatically when there is a new entry. Possible values are FALSE (default) and TRUE.

editUse this attribute to determine whether or not a cell can be edited. Possible values are FALSE (default) and TRUE.

horizontalAlignment With this attribute you determine the horizontal alignment of an entry within the cell. Possible values are

sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20TABLEVIEW

sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20TABLEVIEWCOLUMNS

LEFT, CENTER (default), RIGHT, JUSTIFY and CHAR.

IsAppendUnitUse this attribute to determine that the data value and the corresponding unit should be output together and not in separate table columns.

linkClickTarget Use this attribute to define a hyperlink to the target.

linkColumnKey Use this attribute to define a hyperlink to a column.

onCellClick Use this attribute to set an event handler when the table cell is clicked.

onItemClick Use this attribute to set an event handler when the table row is clicked.

title Use this attribute to determine a title for the table column.

tooltipColumnKeyUse this attribute to determine the quick info text that is displayed when a user moves the cursor over the table column.

type

Use this attribute to determine how the column entries are actually handled by the renderer. The default value is TEXT, that is, the column is formatted according to thedata source type or the ABAP Dictionary information. The following values are also possible: LINK (the cells are displayed as hyperlinks) IMAGELINK (the column data are interpreted as URLs for images), BUTTON (thecells in this column are displayed as pushbuttons), INPUT (the cells become input fields) and USER (user-defined HTML rendering that is specified in the body of the <htmlb:tableViewColumn> element. From SAP Web AS 6.20 Support Package 8, the IMAGE type is also available.

unitColumnKeyUse this attribute to determine which symbols for units of measure or currencies the current column should contain.

verticalAlignmentUse this attribute to determine the vertical alignment of an entry within the table column. Possible values are TOP, MIDDLE (default), BOTTOM and BASELINE.

width

Use this attribute to determine the width of a table column. Depending on the text width and length, you can use the following attribute to determine whether or not a line break should be inserted.

wrapping

Use this attribute to determine whether or not the text in a table column should be broken or if it should be on one line. See also the previous attribute. Possible values are FALSE (default) and TRUE.

Example

See BSP application SBSPEXT_HTMLB, page TableView.bsp.

Further information


IS HTMLB TABLEVIEWCOLUMNS

Functionality

This BSP element provides a wrapper for table elements in a tableView element.

The inner element structure of this element also consists of individual tableViewColumn elements.

Attributes


Example

See BSP application SBSPEXT_HTMLB, page TableView.bsp

sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20TABLEVIEWCOLUMN




Event handling




Further information


IS HTMLB TEXTEDIT

Functionality

This BSP element provides a multiline input field that can be edited.

The textEdit element is intended for handling multiline text input.

The number of text rows and columns should be determined using attributes rows and cols. Both values are specified in figures and can change according to the font size and how they are measured.

Attributes


idUnique name that identifies theBSP element. This attribute is used in data handling.

tooltip

With this attribute you determine the quick info text that appears when the cursor ismoved over the text edit element.

text

Use this attribute to determine the text that should be displayed as the label for a textedit element.

disabled Use this attribute to determine whether or not the text edit element should be available for



input. Possible values are FALSE (default) and TRUE.

fontUse this attribute to determine the text font for the text edit element.

cols Use this attribute to determine the number of columns.

rows Use this attribute to determine the number of rows.



wrapping

Use this attribute to determine whether or not the text in the text edit element should be wrapped. Possible values are HARD (default), SOFT and OFF.

Example

See BSP application SBSPEXT_HTMLB, page TextEdit.bsp.

Event handling



If you want to read the status of a TextEdit element, this takes place during the event handling phase of OnInputProcessing. The event handler OnInputProcessing may look as follows:


DATA: data TYPE REF TO CL_HTMLB_TEXTEDIT.

data ?= CL_HTMLB_MANAGER=> GET_DATA( request = runtime->server->request name = 'textEdit' id = 'myTextEdit1' ).IF data IS NOT INITIAL. text = data->text.ENDIF.

Note that all restored data for an element are written expressly to the element class. With the textEdit element, class CL_HTMLB_TEXTEDIT is used for this. An instance of this class is returned by the HTMLB manager.


ID

TEXT

Further information


IS HTMLB TEXTVIEW

Functionality

This BSP element is used to represent different styles of a text block. It is a fundamental module of almost all Web pages.

The text view element helps you when you use general text types on your Web page. Almost every Web page contains text in some form, such as the description of a product, a legend for a navigation overview, headings, and labels and so on. You may also want to determine special display formats for your text.The text type or style to be displayed is determined by the attribute design (see below). Eight different textstyles are currently supported for the text view: a standard layout type, three styles for headings at different levels, emphasis (using boldface), two styles for labels as well as two special styles, legend and reference, that are displayed by default with special fonts or font attributes. The different formats are defined with the help of cascading style sheets. You can therefore very easily adapt the formatting to your own requirements.Using attribute layout (see below) you can also select between three different predefined display processes: NATIVE (text view is displayed within a <span> tag), BLOCK (text view is displayed within a <div> tag) and PARAGRAPH (text view is displayed within a tag). The attribute wrapping determines the line break rules for the text view.

Attributes


id




alignText alignment. This attribute isparticularly useful for RTL support

RIGHT (right-justified), LEFT (left-justified), CENTER (new for Design2003, centered), FORCEDLEFT (new for Design2003, left-justified, also if the writing direction of textDirection is different), ENDOFLINE (new for Design2003, aligned at end of line depending on the page spelling specified in textDirection)

encode

Code. If this attribute is set to TRUE, the text is written as HTML source.Example:text = "This text is<b> displayed </b> perfectly and has a tooltip." The word "displayed" is formatted in bold. If the attribute is set to FALSE, plain text is displayed.Instead of using this attribute we recommend you use attribute

<htmlb:contentforceEncode>.TRUE (default), FALSE

tooltip

Use this attribute to determine the quick info text that is displayed when a user moves the cursor over the text view.

design

Use this attribute to determine the font in which the text should be displayed. For example, the text can be displayed as a first-class header or in default font. Possible values are: STANDARD (default), HEADER1, HEADER2, HEADER3, EMPHASIZED, LABEL, LABELSMALL, LEGEND, REFERENCE.

text Use this attribute to specify the




text that should be displayed as the text view.

textColor

Use this attribute to change the color of the text to be displayed. You can specify the values as follows: hexadecimalspecification of the color, or the color name (such as brown, dark blue, ...).

layout

Use this attribute to determine the current layout for renderingthe text. Possible values are NATIVE (default value), BLOCK and PARAGRAPH.

required

Use this attribute to determine that an asterisk is created, which signals to the corresponding input field that itis a mandatory field. We recommend that you use a label for such cases.

encode

Use this attribute to determine the coding. Possible values are TRUE and FALSE. If the attribute is set to TRUE, then the text is written as HTML source. Example: text = "This text is <b>displayed</b> perfectly and has a tooltip." Here, the word "displayed" is in bold font. If the attribute is set to FALSE then the text is output as it is.

width Use this attribute to determine the width of the text view. This attribute is available for Microsoft Internet Explorer 5 if wrapping is set to TRUE. Depending on the text width and length, you can use the following attribute to determinewhether or not a line break

should be inserted.


LTR (predominant writing direction in Indo-European languages) , RTL (predominant writing direction in Middle Eastern languages, for example,Hebrew and Arabic) , INHERIT (default value, use the writing direction already set on the page)

wrapping

Use this attribute to determine whether the text of a text view should be broken, or if it should be on one line. See also the previous attribute.

Example

See BSP application SBSPEXT_HTMLB, page textview.bsp.

Event handling




Tips and Tricks

If you want to use a width- based layout with a Netscape browser, for example (that is, not Microsoft Internet Explorer 5), then you can use tables (see tableView ) to render all fields, define the alignment and the column width and then have the text wrap in the cells. You can also use element htmlb:gridLayout .

Further information


IS HTMLB TRAY

Functionality



sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20GRIDLAYOUT


Use this BSP to define a framework around an internal element. You can switch the visibility of the internal element using an expand symbol in the element's header.

The tray element is similar to the group element, although it offers additional functionality. In its 'compressed' status, it is displayed as a narrow horizontal bar with a title and an expand symbol in the upperright hand corner. If you click on this symbol, the contents of the element are expanded and are therefore visible. This status is known as 'expanded'. When you click again on the symbol, the element returns to its compressed status.

Since the content of the element can be any embedded element, a tray can be very useful if you want to include a lot of information in a small space. Note, however, that trays increase the complexity of your page and therefore decrease their usability.

The element triggers two different events for expanding and collapsing the body element, onExpand and onCollapse.

The tray element is an element with a very complex optical screen. It offers three different designs that areoptimized for the most common applications.

The inner element structure consists of a trayBody element.

Attributes



title Use this attribute to determine a title for the tray.

tooltip With this attribute you determine the quick info text that appears when the cursor is moved over the tray.

width Use this attribute to determine the width of the tray.

design Use this attribute to determine the current design for rendering the tray. Possible values are: BORDER (default), BORDERLESS, FORM and TEXT.

onCollapse Use this attribute to set the event handler that is called if the content of the tray is invisible.

sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20TRAYBODY

isCollapsed Use this attribute to determine the initial collapsed status of the tray.

onExpand Use this attribute to set the event handler that is called if the content of the tray is visible.

onEdit Use this attribute to define an event handler that is called when the user clicks on the edit symbol in the header bar.

onRemove Use this attribute to define an event handler that is called when the user clicks on the delete symbol in the header bar.

Example

See BSP application SBSPEXT_HTMLB, page tray.bsp.

Event handling

A BSP element can have many events. BSP element tray has four event handlers, onCollapse, onExpand, onEdit and onRemove.





In this case, the HTMLB manager is called in order to obtain a reference to a generic event object of type CL_HTMLB_EVENT. You can use the attributes name and event_type on this event object to determine which type of event is available. If the element supports the attribute id, you can use attribute id to find out which element triggered the event. To display detailed event data, map the event object to an event object with the appropriate type. In this example, this is a tray event. You can find more information about the tray event in class CL_HTMLB_EVENT_TRAY. DATA: event TYPE REF TO CL_HTMLB_EVENT. event = CL_HTMLB_MANAGER=>get_event( runtime->server->request ). IF event->name = 'tray' AND event->id = 'tray1'. DATA: tray_event TYPE REF TO CL_HTMLB_EVENT_TRAY.

tray_event ?= event. IF tray_event->event_type = 'collapse'. tray1_collapsed = 'X'. ELSEIF tray_event->event_type = 'expand'. tray1_collapsed = ' '. ENDIF. ENDIF.NoteNote that for the BSP element <tray> and the onClick event, the event class is CL_HTMLB_EVENT_TRAY.

Scenario 2:

Interface is available for event handling. This interface contains methods for all of the BSP elements that are used in the BSP extension HTMLB and which use events.The event can be triggered by a user-instantiated event handler class. In this case, the event handling class can be any user-defined class that must implement and have already instantiated the interface IF_HTMLB_EVENT. You can usually use the application class, for example, to handle specific events. If you do this, the only prerequisite is that the application class must implement interface IF_HTMLB_EVENT.The following example uses a separate class named CL_HTMLB_EVENT_EXAMPLE for event handling: DATA: event_handler TYPE REF TO CL_HTMLB_EVENT_EXAMPLE. CREATE OBJECT event_handler. CL_HTMLB_MANAGER=>dispatch_event( request = runtime->server->request event_handler = event_handler page_context = page_context ).The tray element triggers the events IF_HTMLB_EVENT~TRAY_EXPAND_CLICK, IF_HTMLB_EVENT~TRAY_COLLAPSE_CLICK, IF_HTMLB_EVENT~TRAY_EDIT_CLICK und IF_HTMLB_EVENT~TRAY_REMOVE_CLICK, which contain the following additional parameters:

o ID


Name of the event handler specified by the userThere is the onClick attribute for all triggered events. This is the name assigned by the user for the event handler method.CautionAll tray click events for all tree nodes on the page are triggered by this one method. As a developer, ensure that you select the correct ID to decide which tray is triggered.


If you want to read the status of a tray, you do this in the event handling phase in OnInputProcessing. The event handler OnInputProcessing may look as follows:

DATA: tray TYPE REF TO CL_HTMLB_TRAY.tray ?= CL_HTMLB_MANAGER=>GET_DATA( request = runtime->server->request name = 'tray' id = 'tray2' ).

IF tray IS NOT INITIAL.

tray2_collapsed = tray->iscollapsed.ENDIF.

Note that all restored data for an element are written expressly to the element class. With the tray element, class CL_HTMLB_TRAY is used to do this. An instance of this class is returned by the HTMLB manager.


ID

NAME

Tips and Tricks

Note that the height of a tray can change considerably when you switch the visibility of the body area. In this case it is possible that this completely rearranges your page.

If neither an onExpand nor an onCollapse event handler is defined, expanding and collapsing the tray element is completely handled by the browser. No contact is made with the server. Note, however, that this local switch mode is not available for Netscape 4.x due to technical restrictions. By default, tray elements are always displayed as expanded on this platform. If you want to support switching, you must therefore define suitable onExpand and onCollapse event handlers.

Further information


IS HTMLB TRAYBODY

Functionality

This BSP element is deprecated. Try not to use it.

This BSP element is used to group the content of a tray body. This element can contain inner elements.

This BSP element is embedded in a . tray.

Caution


Attributes


Example

sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20TRAY



See BSP application SBSPEXT_HTMLB, page tray.bsp.

Event handling




Further information


IS HTMLB TREE

Functionality

This BSP element arranges a series of entries hierarchically in a tree.

You frequently find data displayed hierarchically in Web pages, such as with navigation bars, menu structures or indexes. Imagine, for example, you want to create a large manual with several chapters, paragraphs, images and tables. You can structure this type of document using the tree element.

A node is the central element of the tree element. A node can be an 'end node' or a 'folder'. An end node displays individual pieces of information, such as a URL, a book title or a file name, whilst a folder contains additional node elements. A tree defines specific relationships between its nodes. Each node has an individual 'parent' node, that is, an element in the next level up in the hierarchy. A folder has a 'child' node, that is, a series of nodes on the next level down in the hierarchy. A node can also have same-level nodes, which are located on the same level in the hierarchy.

Every node in a tree element is represented by a treeNode element. This element determines, for example, which text label should be displayed for the node contents, and whether a node is a folder or an end node. Furthermore, each node has the attribute id. This is a unique name that identifies the node in thehierarchy. A node without a parent node is called a root node (rootNode) and represents the highest level in the hierarchy.

The tree element shows a complex visual design and behavior. If the user clicks on the expand symbol fora folder node, the corresponding part of the tree is displayed. You switch the status locally in the client browser. If the user clicks on the contents of a node, that is, on the text label or any symbol that may exist, the node triggers the onNodeClick event.

The inner element structure consists of treeNode elements. Alternatively, you can fill a tree by using a table of type TVIEW.

Attributes

Name Mandatory Explanationid x Unique name that identifies the BSP element. This attribute is used in event




handling and in data handling.

title Use this attribute to determine a title for the tree. By default, "Tree" is set for this.

tooltip With this attribute you determine the quick info text that appears when the cursor is moved over the tree.

width Use this attribute to determine the width of the tree.

height Use this attribute to determine the height of the tree.

table Use this attribute to specify the table from which the value for the tree should be taken. This table is of type TVIEW (see Dictionary).

onTreeClick Use this attribute to set the event handler that is called when users click on the tree.

toggleUse this attribute to activate the expansion and collapse of the nodes on the browser without having to access the server (provided your browser supports this).

Example

See BSP application SBSPEXT_HTMLB, treeExample.bsp.

Event handling




Tips and Tricks

The tree element is not intended for displaying tree structures with thousands of nodes and end nodes. In general, a tree should never contain more than 30 to 50 entries. Ensure that the size of your HTML page grows in proportion to the number of entries.

Netscape 4.x browsers do not support local node visibility switching. The tree element is therefore always displayed fully expanded.

Further information


IS HTMLB TREENODE

Functionality

This BSP element represents an individual node in a tree element.

This BSP element defines a click event for its nodes, which is triggered when the user clicks on the content of a node, that is, on the text table or the node symbol.

Each node can be represented on the screen by a text label and a small symbol (triangle). The text is displayed to the right of the symbol.

The inner element structure can consist of additional embedded treeNode elements.

Attributes



tooltipUse this attribute to determine the quick info text that is displayed when you move the cursor over a node in the tree.

textUse this attribute to determine the text that should be displayed as the label for a node symbol.

image

Use this attribute to specify an image, for example from the MIME Repository, whichshould be displayed in front of the node inthe tree.

sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20TREE

linkUse this attribute to determine whether a node should be rendered as a hyperlink. See also the following attribute.

target

Use this attribute to define (in conjunction with the link attribute) in which screen section the links target should be displayed. Possible values are _BLANK, _TOP, and so on.

isOpenUse this attribute to determine whether the initial status of the node should be open or closed.

onNodeClickUse this attribute to set the event handler that is called when a node in the tree is clicked on.

toggle

Use this attribute to activate the expansion and collapse of the nodes on the browser without having to access the server (provided your browser supports this). See also the following attribute.



disableFinal

Use this attribute to have the last subnodedisplayed without a dummy subnode. Thisattribute is set to FALSE by default. If you specify TRUE, however, then a dummy subnode is created. In conjunction with the toggle attribute, the toggle symbol is displayed even if no subnodes exist. Clicking on the toggle symbol requests the data from the server.

Example

See BSP application SBSPEXT_HTMLB, page tree.bsp.

Event handling

A BSP element can have many events. BSP element treeNode has only one event handler, onNodeClick.





In this case, the HTMLB manager is called in order to obtain a reference to a generic event object of type CL_HTMLB_EVENT. You can use the attributes name and event_type on this event object to determine which type of event is available. If the element supports the attribute id, you can use attribute id to find out which element triggered the event. To display detailed event data, map the event object to an event object with the appropriate type. In this example, this is a treeNode event. You can find more information about the treeNode event in class CL_HTMLB_EVENT_TREE. DATA: event TYPE REF TO CL_HTMLB_EVENT. event = CL_HTMLB_MANAGER=>get_event( runtime->server->request ). IF event->name = 'tree'. DATA: tree_event TYPE REF TO CL_HTMLB_EVENT_TREE. tree_event ?= event. ENDIF.NoteNote that for the BSP element <treeNode> and the onClick event, the event class is CL_HTMLB_EVENT_TREE.

Scenario 2:

Interface is available for event handling. This interface contains methods for all of the BSP elements that are used in the BSP extension HTMLB and which use events.The event can be triggered by a user-instantiated event handler class. I n this case, the event handling class can be any user-defined class that must implement and have already instantiated the interface IF_HTMLB_EVENT. You can usually use the application class, for example, to handle specific events. If you do this, the only prerequisite is that the application class must implement interface IF_HTMLB_EVENT.The following example uses a separate class named CL_HTMLB_EVENT_EXAMPLE for event handling: DATA: event_handler TYPE REF TO CL_HTMLB_EVENT_EXAMPLE. CREATE OBJECT event_handler.

CL_HTMLB_MANAGER=>dispatch_event( request = runtime->server->request event_handler = event_handler page_context = page_context ).The treeNode element triggers event IF_HTMLB_EVENT~TREE_CLICK , which contains thefollowing additional parameters:

o ID

ID of the element usedo ON_CLICK

Name of the event handler specified by the usero NODE

ID of the node that was clickedThere is the onClick attribute for all triggered events. This is the name assigned by the user for the event handler method.CautionAll treeNode click events for all tree nodes on the page are triggered by this one method. As a developer, ensure that you select the correct ID to decide which tree node is triggered.



Further information


IS HTMLB WEEK

Functionality

This BSP element defines a reference to a specific week within the dateNavigator element.

See also days and month.

Attributes

Name Mandatory Descriptionweek x Use this attribute to determine the current week.

year Use this attribute to determine the current year.

sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20MONTH

sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20DAYS




tooltip Use this attribute to determine the quick info text that appears when you move the cursor over a week.

selection Use this attribute to determine an index for an existing area of weeks that should be displayed as selected.

Example


Event Handling




Further information

textDirectionText or writing direction


IS PHTMLB

Functionality

The HTML Business Library for patterns provides ready-made design solutions for user interaction problemsin the context of user tasks.

In the BSP environment a pattern is a generically configurable BSP application that deals with tasks that are the same in a multitude of applications.

Although there is an enormous number of tasks within business software, the number of task types is small, for example, search tasks, data input tasks, monitoring tasks, and so on.

The benefits of using patterns are:

A uniform design both within the application and across applications

A clear division between front end and back end, so that changes to the user interface (UI) do not affect the business logic


Quicker and more efficient software development

Lower development costs

Reusability

Lower maintenance costs

When you use patterns keep in mind the following:

Patterns can only be changed on a central system.

Application developers have less freedom to adapt the interface to their individual requirements. If there is no suitable pattern available, a new one can be requested. Otherwise the application has tobe adapted to the layout that the pattern provides.

Note

See also the HTML Business Libraries HTMLB and XHTMLB.

Example

You can find examples of PHTMLB in the BSP application sbspext_phtmlb in the system.

Further information


Xslt

<xslt:param>

<xslt:apply>

IS XHTMLB

Functionality

The extended HTML Business (XHTMLB) Library provides in addition to the HTMLB Library an intuitive and easy to understand library for developing Web content.

You can utilize XHTMLB from Microsoft Internet Explorer 5.5 and Netscape 6.2.

Right to Left (RTL)

The standard way to write Middle Eastern languages, for example, Hebrew and Arabic, is from right to left (RTL). This is in contrast to left to right (LTR), as used in Indo-European languages. However, in Midde

sapevent:DOCU_LINK%5CDS:IS.HTMLB



sapevent:DOCU_LINK%5CDS:IS.XHTMLB

sapevent:DOCU_LINK%5CDS:IS.HTMLB

Eastern languages left to right is still used for numbers, for example, telephone numbers, posting items, and proper nouns. Consequently, LTR languages often have sentences containing a mixture of RTL and LTR.

The BSP programming model supports RTL. All BSP applications based on HTMLB or XHTMLB automatically support the RTL layout.

When you log on to a BSP application, the BSP runtime determines the code pages appropriate for the logon data and sets the correct value for the language direction. If you log on, for example, in Hebrew, the text direction is automatically set to RTL.

You can activate RTL rendering using the URL parameter sap-rtl=true. This only applies to the first call before the URL mangling has been executed for the BSP-URL.

To support RTL, SAP provides the textDirection attribute, and additional values for align/alignment for diverse htmlb and xhtmlb elements for design2003.

textDirection has been introduced for the following BSP elements:

htmlb

o <button>

o <checkbox>

o <fileUpload>

o <inputField>

o <label>

o <link>

o <radioButton>

o <textEdit>

o <textView>

o <treeNode>

xhtmlb

o toolbarButton

o toolbarInputField

o toolbarlink

The textDirection attribute is implemented indirectly using the element <textView> for the following htmlb elements:

<tabStripItem>







sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20LINK

sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20LABEL


sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20FILEUPLOAD



sapevent:DOCU_LINK%5CDS:TX.TX_TEXTDIRECTION

<listItem>

Indirect means that although the above elements themselves do not contain a textDirection attribute,you can still use this attribute if a textView is used within a tabStripItem or listItem

align or alignment or horizontalAlignment has been enhanced or implemented for the following BSP elements:

htmlb

o inputField

o textView

o gridLayoutCell

xhtmlb

o toolbarInputField

o SapTableCell+new columnDefintion-forceTextDirectionLTR attribute

o SapTableHeaderCell

Recommendations

To use the full extent of RTL support Application Developers should keep the following points in mind:

Avoid native HTML. Instead, use the elements of the BSP extension HTMLB or XHTMLB.

Make sure that frames appear in the correct sequence.

In MS Internet Explorer frames are numbered in the sequence they are named in the source code. When frames are displayed, they are rendered from left to right and in the sequence they are named in the source code. This happens independently of the layout sequence.In contrast to LTR, with RTL frames should be arranged as follows:

o The menu and content lists belong on the right side

o The actual content belongs on the left side

Remember that this mirroring arrangement does not happen automatically. You can can create RTL versions of your own images (images not provided by SAP). Make sure

that the RTL version of the images is also used in the application. Unsymmetrical images usually have to be mirrored. All SAP symbols are automatically adjusted.

Remember to use the the new values for align (alignment and horizontalAlignment).Do not use RIGHT when you actually mean ENDOFLINE.

Value LTR Alignment RTL Alignment DescriptionFORCEDLEFT Left Left LeftLEFT Left Right Start of line

sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20GRIDLAYOUTCELL




ENDOFLINE Right Left End of lineRIGHT Right Right Right

You can override the direction of texts using the textDirection attribute. Use it together with a string type attribute in the following cases:

o If the text is user input, a telephone number, fax number, or an output text that has a fixed size and must not be rearranged. For example, the material number 01-k2-34, telephone number +49/6227/7-47474 or aircraft type 747-400 would be mistakenlyinterpreted by the standard algorithm as subtractions and the values altered.

o If the text is an input field for an LTR text in an RTL context (and vice versa).

o Example: Input of names in English in a Hebrew or Arabic form.

Note

HTML 4.0 is a prerequisite for RTL support and therefore RTL for BSP is only provided for MicrosoftInternet Explorer as of version 5.5.

Keep in mind that for accessibility the focus triangle is not always correctly positioned due to browser errors.

Example

BSP application SBSPEXT_XHTMLB contains examples of the individual elements.

Notes

In XHTMLB, design variants DESIGN2002 and DESIGN2003 (from SAP Web AS 6.20 Support Package 27) are available.

The individual design variants are supported by different browsers:

Design DESIGN2002:



Design DESIGN2003:



o Mozilla as of Version 1.7

Note that with and within table views, replacing "$$" is not supported.For Enterprise Portal 5, DESIGN2002 and CLASSIC are supported; for Enterprise Portal 6, DESIGN2003 and DESIGN2002 and CLASSIC are supported.

Further information


IS XHTMLB BUTTONGROUP

Functionality

A buttonGroup is a collection of pushbuttons from which infrequently required pushbuttons can be borrowed. Pushbuttons that should always be visible are first rendered on the output screen, whilst infrequently used pushbuttons are rendered only when the buttonGroup is expanded.

Note

We recommend that you use a buttonGroup within a <xhtmlb:toolbar> only.


buttonGroupItem elements and if necessary

buttonGroupSeparator elements.

Attributes

NameMandatory



Character string, such as mybuttongroup

buttonWidthWidth of the pushbutton. By setting this attribute you determine the same width for all available pushbuttons.

Numeric value

expandModeExpand mode. The toggle button can contain an arrow pointing left/right or down for the expansion.

INLINE (default, left arrow) and DROPDOWN (list box hidden)

expanded Initial value for the expand status of the element according to the toggle button

TRUE (expanded) and FALSE (collapsed)

itemTable Table with definitions for application See structure

sapevent:DOCU_LINK%5CDS:IS.XHTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20BUTTONGROUPSEPARATOR

sapevent:DOCU_LINK%5CDS:IS.XHTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20BUTTONGROUPITEM



pushbuttons. This table is used as an alternative to configuring all of the pushbuttons. You can implement the configuration either using internal elements, or using this table. You can, however, also use a combination of both techniques. In this case, some of the configured pushbuttons are rendered.

SBSPEXT_XHTMLB_BUTTONGRP_ITEMS

onClick onClick event handler Name, such as "myClickHandler"

onClientClick

onClientClick event handler. Only a single client click event handler is provided for a buttonGroup. If the client side requires information about which special pushbutton triggered the event, you can use the following code: "onClientClick = "alert(htmlbevent.srcElement.id.split('__')[1])".

Name, such as "myClientClickHandler"

onToggle Event toggle button for expand mode Name, such as "myToggleHandler"

visible Visibility. If the pushbuttons should not be visible, set the value to "FALSE".


Example

See BSP application SBSPEXT_XHTMLB, page buttonGroup.bsp.

Event handling

A BSP element can have many events. BSP element <xhtmlb:buttonGroup> has three event handlers.

You usually implement your user interface elements using an <htmlb:form> element in your BSP layout,which refers back to the same page. In this default case, create the coding for the event handling in the OnInputProcessing section. Within the OnInputProcessing event handler, the HTMLB BSP extension can recognize and evaluate events using the event ID variable. For all (X)HTMLB events, this variable has the value CL_HTMLB_MANAGER=>event_id. Normally, the events are handled accordingly as part of this framework:

IF event_id = CL_HTMLB_MANAGER=>event_id. ... handle (X)HTMLB event... ENDIF.

You can handle HTMLB events as follows: Retrieve the event data and then process the data (this is usual in a large case statement).

Fetch the event and process the data

The HTMLB manager is called in order to receive a reference to a generic event interface of type IF_HTMLB_DATA. You can use the event_name and event_type attribute on this event interface to determine which type of event is available. If the element supports the id attribute, you can use attribute idto find out which element triggered the event. To display detailed event data, map the event interface to an event object with the appropriate type. In this example, this is a buttonGroup event.

DATA: event TYPE REF TO IF_HTMLB_DATA.event = CL_HTMLB_MANAGER=>get_event_ex( runtime->server->request ).if event IS NOT INITIAL AND event->event_name = CL_XHTMLB_BUTTONGROUP=>CO_EVENT_NAME. DATA: buttonGroup TYPE REF TO CL_XHTMLB_BUTTONGROUP. buttonGroup ?= event.ENDIF.

Note

Note that for BSP element <xhtmlb:buttonGroup>, the corresponding event class is CL_XHTMLB_BUTTONGROUP.


No data are stored on the server for this element. You can use call get_data nevertheless. This call returns an empty object.

Further information


IS XHTMLB BUTTONGROUPITEM

Functionality

This BSP element renders an individual pushbutton within an <xhtmlb:buttonGroup> (group of pushbuttons) in a <xhtmlb:toolbar>.

Note

The buttonGroupItem is an internal element that can only be used within an <xhtmlb:buttonGroup>.

See also:

<xhtmlb:buttonGroup>

<xhtmlb:buttonGroupSeparator>

sapevent:DOCU_LINK%5CDS:IS.XHTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20BUTTONGROUPSEPARATOR

sapevent:DOCU_LINK%5CDS:IS.XHTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20BUTTONGROUP

sapevent:DOCU_LINK%5CDS:IS.XHTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20TOOLBAR



Attributes


key xUnique name that identifies the BSP element. This attribute is used in event handling and in data handling.

Character string, such as mybuttongroupitem

disabled Deactivates a pushbutton. This means that it cannot be clicked although it remains visible.


showAlways Determines that a pushbutton is displayed even ifthe buttonGroup is minimized


text x Pushbutton labelCharacter string, such as "Button 1"

tooltip Quick info text that appears when the cursor is moved over a pushbutton.

Text

Example


Event handling

There is no event handling for this BSP element.


There is no data handling for this BSP element.

Further information


IS XHTMLB BUTTONGROUPSEPARATOR

Functionality

This BSP element renders a separator in the form of a vertical separator between pushbuttons in an <xhtmlb:buttonGroup> located in a <xhtmlb:toolbar>.

You can define as many separators as you like.



Note

The buttonGroupSeparator is an internal element that can only be used within an <xhtmlb:buttonGroup>.

See also:

<xhtmlb:buttonGroup>

<xhtmlb:buttonGroupItem>

Attributes

There are no attributes for this element.

Example


Event handling

There is no event handling for this BSP element.


There is no data handling for this BSP element.

Further information


IS XHTMLB GRAPHINLINE

Functionality

The BSP element graphInline is used to display up to 5 values in the form of consecutive horizontal bars in a row.

This BSP element is particularly useful for displaying figures within a HTMLB:TableView element.

Generally, you use this element for cases where you want to present large amounts of figures to users, and also where the actual figures are not that important and you want to show trends only.

Attributes

Name Mandatory Explanation Possible Valuesid x Unique name that identifies the BSP element. This Character string, such as




sapevent:DOCU_LINK%5CDS:IS.XHTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20BUTTONGROUPITEM

sapevent:DOCU_LINK%5CDS:IS.XHTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20BUTTONGROUP

attribute is used in event handling and in data handling. mygraphinline

color1

First color that is used. All colors are string values that you can specify in the usual Internet color coding format (using #, followed by 6 hexadecimal characters for the RGB description, or use symbolic names such as orange, for example)

#80E0FF (default value) or other color coding format or symbolic name

color2

Second color that is used. All colors are string values that you can specify in the usual Internet color coding format (using #, followed by 6 hexadecimal characters for the RGB description, or use symbolic names such as orange, for example)

#40A0FF (default value) or other color coding format or symbolic name

color3

Third color that is used. All colors are string values that you can specify in the usual Internet color coding format (using #, followed by 6 hexadecimal characters for the RGB description, or use symbolic names such as orange, for example)

#0060FF (default value) or other color coding format or symbolic name

color4

Fourth color that is used. All colors are string values that you can specify in the usual Internet color coding format (using #, followed by 6 hexadecimal characters for the RGB description, or use symbolic names such as orange, for example)

#0040C0 (default value) or other color coding format or symbolic name

color5

Fifth color that is used. All colors are string values that you can specify in the usual Internet color coding format (using #, followed by 6 hexadecimal characters for the RGB description, or use symbolic names such as orange, for example)

#004080 (default value) or other color coding format or symbolic name

tooltip1 Quick info for the first bar. Character string

tooltip2 Quick info for the second bar. Character string

tooltip3 Quick info for the third bar. Character string

tooltip4 Quick info for the fourth bar. Character string

tooltip5 Quick info for the fifth bar. Character string

total Total of all values. The values are converted into percentages using this total value.

100 (default value) or other integer value

value1Value of the first bar. The value is converted into percentages (see total) using the total value. The explanation is not displayed.

0 (default value)

value2Value of the second bar. The value is converted into percentages (see total) using the total value. The explanation is not displayed.

0 (default value)

value3Value of the third bar. The value is converted into percentages (see total) using the total value. The explanation is not displayed.

0 (default value)

value4Value of the fourth bar. The value is converted into percentages (see total) using the total value. The explanation is not displayed.

0 (default value)

value5Value of the fifth bar. The value is converted into percentages (see total) using the total value. The explanation is not displayed.

0 (default value)

visible Visibility. Specifies whether or not this element should berendered.

TRUE (default) or FALSE

width Width of the display area for the bars. The value is specified in the usual HTML format.

100% (default value) or percentage or pixel

number (such as 200px)

Example

See BSP application SBSPEXT_XHTMLB, page graphinline.bsp.

Event handling

There are no events for this BSP element.


There is no data return for this BSP element.

Further information


IS XHTMLB OVERFLOWCONTAINER

Functionality

BSP element <xhtmlb:overflowContainer> can be used within other layout elements such as XHTMLB:tabStripItem to handle theoccurrence of overhang situations (where the content is greater than the display area). This BSP element usually wraps a HTMLB:tableView BSP element, especially ifthe table contains more columns than can fit on the screen, although it must define the layout exactly.

Attributes


height Height of the element. It is specified in the usual HTML format.

Pixel number (such as 60px)

modeDisplay mode. With this attribute you define what should be displayed with a text overhang. By default, the overhanging text is simply not displayed.

CUTOFF (default) or SCROLL

width Width of the element. It is specified in the usual HTML format.

100% (default value) or percentage or pixel number (such as 200px)

Example

See BSP application SBSPEXT_XHTMLB, page overflowcontainer.bsp.


sapevent:DOCU_LINK%5CDS:IS.XHTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20TABSTRIPITEM



Event handling




Further information


IS XHTMLB PAGER

Functionality

The symbols that are responsible for navigation within the table are frequently rendered at the lower end of an HTMLB:tableView BSP element. However, in the case of some layout designs it may be more appropriate to implement the navigation within the table as part of the toolbar in which all additional table-related commands are displayed.

The <xhtmlb:pager> BSP element is an independent navigation element that supports both vertical andhorizontal navigation. It can also be used as a controlling element for the <htmlb:tableView> element,although it does not have to fulfil this function.

Caution

The two elements <xhtmlb:pager> and <htmlb:tableView> are in no way related to each other, nor do they belong to each other. Any control function has to be programmed manually (match the pager event to the input for the tableView).

We recommend that you use the pager element within an > XHTMLB:toolbar element for optional rendering only.

Attributes

NameMandatory


design Multiple enumerator. You can use this attribute to control which parts of the pager element are displayed. If you want to define more than one value,separate the individual

VERTICAL_SIMPLE+INDICATOR+SEPARATOR+HORIZONTAL_SIMPLE+HORIZONTAL_SELECTOR (default sequence), HORIZONTAL (left, right, home or end pushbuttons), HORIZONTAL_SIMPLE (pushbuttons either left only or right only), HORIZONTAL_SELECTOR (pushbutton for a dropdown menu that displays a list of horizontal links), VERTICAL (pushbutton up, down, top or bottom), VERTICAL_SIMPLE (pushbutton either top only or bottom only), VERTICAL_SELECTOR (pushbutton for a dropdown menu that is displayed as a list of vertical links), INDICATOR (text description of the optional input fields for the current position, such as "Page 1 of 5"), INSERT (pushbutton that enables the user to insert a new element in the collection), DELETE





values by a +, such as INDICATOR+VERTICAL

((pushbutton for deleting a currently selected entry in the collection), SEPARATOR (inserts a separator | in the sequence)

disabled

Selection that everything is deactivated

FALSE (default value; although the pager is rendered, it is not active) or TRUE

hIndex

Current initial value of the page/entry number

Integer value

hMaxLargest page/entry number


hMinSmallest page/entry number


hSelectors

List of the symbolic column names and values. Generally, this list consists of column names only. It is also possible, however, to group columns together. For example, there can be columns created_on, created_by, changed_on, changed_by, and so on. In this case, makean hSelector entry only with the change date of the title

See structure SBSPEXT_XHTMLB_PAGER_SELECTORS

plus the number of the first columns in this sequence. If this entry is selected, then the hIndex is updated so thatit reflects the new columns indisplay/select.

hStepStep for "previous"/"next" button


id x

Unique name that identifies the BSP element. This attribute is used in event handling and indata handling.

Character string, such as mypager

onPageEvent handler for every event from the pager

Character string, such as myevent

text

String that is used for rendering the indicator. You can use sequence $var$ to replace actual values in the string. The sequences [] determine where you should use input fields to display values and where users can update these values.

Page [$vIndex$] of $vMax$ (default value) or other specification

textBee

User-specific rendering supplied by theuser for the indicator. If this entry is available, it replaces the attribute text. ,,

See IF_BSP_BEE

vIndex

See attribute hIndex (difference: vertical)

vMax

See attribute hMax (difference: vertical)

vMin

See attribute hMin (difference: vertical)

vSelectors

See attribute hSelectors. This selection list is usually used if the rowsin a table can be split into groups, for example with links for "a-e","f-j"k-m", andso on. A numeric value is specified for each entry. If the user selectsa new selectionname, then the numeric value is used in orderto define the new vertically

selected row.

vStep

See attribute hStep (difference: vertical)

visible Visibility TRUE (default value, the pager is rendered) or FALSE

Example

See BSP application SBSPEXT_XHTMLB, page pager.bsp.

Event handling

A BSP element can have many events. BSP element <xhtmlb:pager> has one event handler.

Usually, you implement your user interface elements using an <htmlb:form> element in your BSP layout, which refers back to the same page. In this default case, create the code for the event handling in theOnInputProcessing section. Within the OnInputProcessing event handler, the HTMLB BSP extension can recognize and evaluate events using the event ID variable. For all (X)HTMLB events, this variable has the value CL_HTMLB_MANAGER=>event_id. Normally, the events are handled accordingly as part of this framework:



Fetch the event and process the data using the HTMLB manager

Note that only new method get_event_ex is supported for the XHTMLB Library.

The HTMLB manager is called in order to receive a reference to a generic event interface of type IF_HTMLB_DATA. You can use the attribute event_name and event_type on this event interface to determine which type of event is available. If the element supports the attribute id, you can use attribute idto find out which element triggered the event. To display detailed event data, map the event interface to an event object with the appropriate type. In this example, this is a pager event.

IF event_id = CL_HTMLB_MANAGER=>EVENT_ID. DATA: event TYPE REF TO IF_HTMLB_DATA. event = CL_HTMLB_MANAGER=>get_event_ex( runtime->server->request). if event IS NOT INITIAL AND event->event_name = CL_XHTMLB_PAGER=>CO_EVENT_NAME. DATA: pager TYPE REF TO CL_XHTMLB_PAGER. pager ?= event.

ENDIF.ENDIF.

Note

Note that for BSP element <xhtmlb:pager>, the corresponding event class is CL_XHTMLB_PAGER.

You can use the attribute event_type on this event interface to determine which type of event was triggered. This attribute has one of the predefined constant values of CL_XHTMLB_PAGER=>CO_EVENT_[TOP | BOTTOM | UP | DOWN | FAR_LEFT | LEFT | RIGHT | FAR_RIGHT | INSERT | DELETE | VERTICAL_SELECTOR | HORIZONTAL_SELECTOR.


If you want to read the status of a pager, you do this in the event handling phase in OnInputProcessing. The event handler OnInputProcessing may look as follows:

DATA: pager TYPE REF TO CL_XHTMLB_PAGER.pager ?= CL_HTMLB_MANAGER=>GET_DATA( request = request name = 'xhtmlb:pager' id = 'pgT' ).

Note that all restored data for an element are written expressly to the element class. With the pager element, class CL_XHTMLB_PAGER</> is used to do this. An instance of this class is returned by the HTMLB manager.

Data handling for the XHTMLB Library is also performed using the HTMLB Manager. By default, the HTMLB Manager assumes, however, that the name refers to an element in the HTMLB Library. This is why it is important for the get_data call to specifiy 'xhtmlb:pager' as the name of the BSP element for whichthe data are required.

The h*- and v* attributes are returned with the exception of the selector tables.

Further information


IS XHTMLB PROTECTDOUBLESUBMIT

Functionality

BSP element <xhtmlb:protectDoubleSubmit> can be used within an HTMLB:form BSP element to prevent a user from triggering a new event until the first event has been processed on the server and a response has been sent to the browser, where it was received.

This makes sense in particular if response times exceed a few hundred milliseconds, as in these cases users tend to press a radiobutton again to speed up the response.

sapevent:DOCU_LINK%5CDS:IS.HTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20FORM



This element displays a small popup window that shows that the request is being processed. The popup window disappears as soon as a response is received.

Attributes

Name Mandatory Explanation Possible Valuestitle Text that is displayed in the title line of the popup window. Character string

text Text that is displayed in the body of the popup window. Character string

active Activation. Use this attribute to deactivate this BSP element in the following rendering cycle.


Event handling




Further information


IS XHTMLB TABSTRIP

Functionality

With this BSP element you can switch between different views that use the same screen area. A tabstrip element consists of individual registers or tabs (<xhtmlb:tabStripItem> ). Each tab can include anynumber of other elements. The tab labels are always visible, whereas the content is displayed only when a tab is active.

A sequence of control elements is displayed to the right side of the tabstrip. A pushbutton is displayed if not all tabs can be displayed at the same time. As soon as it is clicked, a full menu is displayed with all defined tabs in list form. Moreover, pushbuttons are available for scrolling through all tabs, from right to left.

Finally, symbols are also displayed for the different events that are triggered by the user.

This BSP element can contain the following internal elements:

<xhtmlb:tabStripHeaderArea> and



<xhtmlb:tabStripItem>

See also:

XHTMLB:tabStripHeaderArea

XHTMLB:tabStripItem

Attributes

NameMandatory


id x


Character string, such as mytabStrip

visibleVisibility. With this attribute you can make the whole tabstrip invisible.


height Height of the tabstrip

width Width of the tabstrip.

tooltip

With this attribute you determine the quick info text that appears when the cursor is moved over the tabstrip.

Character string

horizontalAlignment

With this attribute you determine the horizontal alignment of an entry within the tabstrip.

LEFT (default value), CENTER, RIGHT, JUSTIFY or CHAR

verticalAlignment

With this attribute you determine the vertical alignment of an entry within the tabstrip.

TOP (default value), MIDDLE, BOTTOM or BASELINE


sapevent:DOCU_LINK%5CDS:IS.XHTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20TABSTRIPHEADERAREA

renderSingleTabAsHeading

A tabstrip can also be used purely for display purposes, similar to an <htmlb:group> element. If only a tab is defined, you can use this attribute to control whether the tab should be rendered as a tab or as a group heading.


viewState

This attribute controls the view status of the tabstrip to be rendered. If you do not specify this attribute, the viewstatus of the browser that is currently defined will be used.The entire content is displayed in expanded mode.Only the content of<xhtmlb:tabStripHeaderArea> is displayed in collapsed mode. The content of <xhtmlb:tabStripHeaderArea>and of the<xhtmlb:tabStripItemCompact> area is displayed in compact mode.

EXPANDED, COLLAPSED or COMPACT

viewStateMode

The default mode consists of making available all three view statuses. The user can then switch to the view status required. If this attribute is setto NONE, then the user cannot switch to any view status and the toggle icons are not displayed at all. If this attribute is set to COLLAPSED_EXPANDED, the tabstrip has the usual compress and expand semantic.

NONE, COLLAPSED_COMPACT_EXPANDED or COLLAPSED_EXPANDED

viewStateBee

You can use this attribute for application-specific rendering of the view status symbols and for the code for event handling.

See IF_BSP_BEE

onViewState

With this attribute you set a server-side event handler thatis called when one of the viewstatus pushbuttons is clicked.

Character string

onEdit

Edit event handler. This attribute does not have any additional semantic for <xhtmlb:tabStrip>. If this attribute is not specified, thenthe symbol for onEdit is not rendered.

Character string

onHelp

Help event handler. This attribute does not have any additional semantic for <xhtmlb:tabStrip>. If this attribute is not specified, thenthe symbol for onHelp is not rendered.

Character string

onRemove

Remove event handler. This attribute does not have any additional semantic for <xhtmlb:tabStrip>. If this attribute is not specified, thenthe symbol for onRemove is not rendered.

Character string

onSelect

Select event handler. With this attribute you set a server-side event handler that is called when the user selects a tabstrip entry.

Character string

selection

Currently selected or active tab. This value has to match the attribute name for one of the <xhtmlb:tabStripItem> elements. If the attribute selection is not specified, then the tabstrip that is currently selected (by the request) is reactivated.

Character string

headerLineBee

Application-specific rendered for the area <xhtmlb:tabStripHeaderArea>. You can determine this information either using an internal element or using a BEE.

See IF_BSP_BEE

flowIndicatorVisible

If several tabstrips are aligned underneath each other and if this parameter is set, a small arrow is renderedon the currently selected tab that is used as visual help for the logical flow of information from one tabstrip to another.


brandingNotchVisible

This attribute controls the rendering of the graphical display of the bar to the left ofthe title row


dropDownItemCount

Number of menu entries that are always displayed in the dropdown menu in order to select the next tab for display.


Example

See BSP application SBSPEXT_XHTMLB, page tabstrip.bsp.

Event handling

A BSP element can have many events. BSP element <xhtmlb:tabStrip> has five event handlers.

Usually, you implement your user interface elements using an <htmlb:form> element in your BSP layout, which refers back to the same page. In this default case, create the code for the event handling in theOnInputProcessing section. Within the OnInputProcessing event handler, the HTMLB BSP extension can recognize and evaluate events using the event ID variable. For all (X)HTMLB events, this variable has the value CL_HTMLB_MANAGER=>event_id. Normally, the events are handled accordingly as part of this framework:




The HTMLB manager is called in order to receive a reference to a generic event interface of type IF_HTMLB_DATA. You can use the attribute event_name and event_type on this event interface to determine which type of event is available. If the element supports the attribute id, you can use attribute idto find out which element triggered the event. To display detailed event data, map the event interface to an event object with the appropriate type. In this example, this is a tabStrip event.

DATA: event TYPE REF TO IF_HTMLB_DATA.event = CL_HTMLB_MANAGER=>get_event_ex( runtime->server->request ).if event IS NOT INITIAL AND event->event_name = CL_XHTMLB_TABSTRIP=>CO_EVENT_NAME. DATA: tabStrip TYPE REF TO CL_XHTMLB_TABSTRIP. tabstrip ?= event.ENDIF.

Note

Note that for BSP element <xhtmlb:tabStrip>, the corresponding event class is CL_XHTMLB_TABSTRIP.


If you want to read the status of a tabstrip, you do this in the event handling phase in OnInputProcessing. The event handler OnInputProcessing may look as follows:

CLASS CL_HTMLB_MANAGER DEFINITION LOAD.DATA: tabStrip TYPE REF TO CL_XHTMLB_TABSTRIP.* Reading data from toolbartabStrip ?= CL_HTMLB_MANAGER=>GET_DATA( request = request name = 'xhtmlb:tabstrip' id = 'tb3' ).

Note that all restored data for an element are written expressly to the element class. With the tabStrip element, class CL_XHTMLB_TABSTRIP is used to do this. An instance of this class is returned by the HTMLB manager.

With the get_data call, you have to specifiy the name of the Library explicitly, that is, xhtmlb:tabstrip.

Further information


IS XHTMLB TABSTRIPHEADERAREA

Functionality

BSP element <xhtmlb:tabStripHeaderArea> is used to mark the parts of the body that always have to be displayed, regardless of the tabstrips current view status (minimized or compact or



maximized). It therefore represents the static display areas in the tabstrip. Element <xhtmlb:tabStripHeaderArea> may be used in an <xhtmlb:tabStrip> BSP element only.

It is usually used purely for information purposes only, by specifying which information always has to be visible for the user, such as information and error messages, or a selected data record.

The use of this BSP element is optional.

Note that this element is placed within an <xhtmlb:tabStrip> BSP element and not within a <xhtmlb:tabStripItem> BSP element.

See also:

XHTMLB:tabStrip

XHTMLB:tabStripItem

Attributes


Example


Event handling




Further information


IS XHTMLB TABSTRIPITEM

Functionality

BSP element <xhtmlb:tabStripItem> is used to describe a tabstrip entry or a tab. Tabs (registers) are displayed in the sequence in which they are defined. You have to use an <xhtmlb:tabStripItem>element for each tab.

Note that only the body of the currently displayed tab is processed. This means that changes to the selectedtab always involve a server round trip.




sapevent:DOCU_LINK%5CDS:IS.XHTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20TABSTRIP

Element <xhtmlb:tabStripItem> may only be used within an <xhtmlb:tabStrip> BSP element.

See also: XHTMLB:tabStrip

Attributes


name xUnique name of the tab that identifies the BSP element. This name is used during the selection and in event handling.

Character string, such as myTabStripItem

hidden Attribute that completely hides the element. Use this attribute to make a certain tab invisible.

FALSE (default value) or TRUE

disabled Attribute for deactivating a tab. The tab remains visible, although it cannot be selected.


title With this attribute you determine the title for the tabstrip entry.

Character string

tooltipQuick info. With this attribute you determine the quick info text that appears when the cursor is moved over the tabstrip entry.

Character string

imbedCompactBody

With this element you determine whether the content of the internal element tabStripItemCompact should be regarded as part ofthe tabStripItem body or if it should be interpreted as a compact part only. If you choose FALSE, the content of tabStripItemCompact is not rendered as a component of tabStripItem, but is used for compact display only. In the default mode, the compact section is regarded as a component of the normal tabstrip body.

TRUE (default) or FALSE

compactBee

With this attribute you return the content of the compact areas as application-specific rendering instead of using BSP element tabStripItemCompact.

See IF_BSP_BEE

titleBee

With this attribute you return the title for the tabstrip entry as application-specific rendering. This title replaces the default use of the attribute title and tooltip.

See IF_BSP_BEE

Example


Event handling




Further information


IS XHTMLB TABSTRIPITEMCOMPACT

Functionality

BSP element <xhtmlb:tabStripItemCompact> is used to select part of the body that has to be displayed if the tabstrip is placed in the compact view (compact). It therefore represents the short body of a tabstrip entry.

Usually, such a short display consists of the summarized data for the special tabstrip, so that the screen area that is taken up by the special tabstrip is minimized.

Element <xhtmlb:tabStripItemCompact> can only be used within an <xhtmlb:tabStripItem> BSP element.

The use of this BSP element is optional.

See also:

XHTMLB:tabStrip

XHTMLB:tabStripItem

Attributes



sapevent:DOCU_LINK%5CDS:IS.XHTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20TABSTRIP



Example


Event handling




Further information


IS XHTMLB TOOLBAR

Functionality

This BSP element usually renders a complex toolbar. <xhtmlb:toolbar> represents an open work area (horizontal line) on the screen. By default there are no toolbar entries. The toolbar may, however, contain other types of entries. Optionally, a toolbar also supports the concept of layers, where each layer is associated to different operations and the display can be switched with the layer switch event. To give an example, there may be a toolbar layer for a table data view where you can use pushbuttons to scroll throughthe data one page up or one page down. In a second layer, detailed information about a data record may bedisplayed in the table, with pushbuttons for scrolling to the previous or next data record.

In each layer, you can define as many entries as you like. Each <>toolbarItem> has a body, containingthe actual content that is available in the toolbar. Within a toolbarItem you can store any content, such as text, links or buttonGroups, or even dropdown list boxes. For each item you can determine whether it should be aligned left (increasing from this point to the right) or right (increasing from this point to the left).

See also:

XHTMLB:toolbarLayer

XHTMLB:toolbarItem

XHTMLB:toolbarSeparator

Attributes


id x


Character string, such as mytoolbar

sapevent:DOCU_LINK%5CDS:IS.XHTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20TOOLBARSEPARATOR

sapevent:DOCU_LINK%5CDS:IS.XHTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20TOOLBARITEM

sapevent:DOCU_LINK%5CDS:IS.XHTMLB%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20TOOLBARLAYER



layerSelected Currently selected layer (view) to be displayed

Character string

onLayerSelect Event that displays that a layer(view) was switched to

Character string

nowrap Specifies whether or not the content may be broken up.


visibleVisibility. Determines whether the whole toolbar should be visible or invisible.


layerTable

Definition of the layers (views).Usually, the layers are defined using BSP element <xhtmlb:toolbarLayer>. However, all layers may also be defined within a table. This makes sense if the configuration is loaded dynamically during runtime or if it is set by a controller.

See table type SBSPEXT_XHTMLB_TOOLBAR_LAYERS

itemTable

Definition of the toolbar items (view-dependent element groups). Usually, the toolbar entries are defined using BSP element <xhtmlb:toolbarItem>.However, all entries may also be defined within a table. This makes sense if the configuration is loaded dynamically during runtime or if it is set by a controller.

See table type SBSPEXT_XHTMLB_TOOLBAR_ITEMS

Example

See BSP application SBSPEXT_XHTMLB, page toolbar.bsp.

Event handling

A BSP element can have many events. BSP element <xhtmlb:toolbar> has only one event handler.

Usually, you implement your user interface elements using an <>htmlb:form> element in your BSP layout, which refers back to the same page. In this default case, create the code for the event handling in theOnInputProcessing section. Within the OnInputProcessing event handler, the HTMLB BSP extension can recognize and evaluate events using the event ID variable. For all (X)HTMLB events, this variable has the value CL_HTMLB_MANAGER=>event_id. Normally, the events are handled accordingly as part of this framework:




The HTMLB manager is called in order to receive a reference to a generic event interface of type IF_HTMLB_DATA. You can use the attribute event_name and event_type on this event interface to determine which type of event is available. If the element supports the attribute id, you can use attribute idto find out which element triggered the event. To display detailed event data, map the event interface to an event object with the appropriate type. In this example, this is a toolbar event.

DATA: event TYPE REF TO IF_HTMLB_DATA.event = CL_HTMLB_MANAGER=>get_event_ex( runtime->server->request ).if event IS NOT INITIAL AND event->event_name = CL_XHTMLB_TOOLBAR=>CO_EVENT_NAME. DATA: toolbar TYPE REF TO CL_XHTMLB_TOOLBAR. toolbar ?= event.ENDIF.

Note

Note that for BSP element <xhtmlb:toolbar>, the corresponding event class is CL_XHTMLB_TOOLBAR.


If you want to read the status of a toolbar, you do this in the event handling phase in OnInputProcessing. The event handler OnInputProcessing may look as follows:

CLASS CL_HTMLB_MANAGER DEFINITION LOAD.DATA: toolbar TYPE REF TO CL_XHTMLB_TOOLBAR.toolbar ?= CL_HTMLB_MANAGER=> GET_DATA( request = request name = 'xhtmlb:toolbar' id = 'tb3' ).

Note that all restored data for an element are written expressly to the element class. With the toolbar element, class CL_XHTMLB_TOOLBAR is used to do this. An instance of this class is returned by the HTMLB manager.

With the get_data call, you have to specify the name of the Library explicitly, that is, xhtmlb:toolbar.

Further information


<xhtmlb:toolbarButton><xhtmlb:toolbarDDLB><xhtmlb:toolbarInputfield>

IS XHTMLB TOOLBARITEM

Functionality

With BSP element <xhtmlb:toolbarItem> you can define an element that should be displayed as a toolbar entry on the toolbar.

For each entry you can determine whether it should be displayed at a specific layer only, or at all layers. Depending on the sequence in which they were defined, entries can be aligned to the left (that is, #growing#to the right) or right (that is, "growing" to the left).

The toolbar entry is only a container element that defines the content to be displayed. A toolbar entry itself does not contain any information whatsoever about the content.

Element <xhtmlb:toolbarItem> can only be used within a <>EX><xhtmlb:toolbar> BSP element.

See also: XHTMLB:toolbar

Attributes


hidden Attribute that completely hides the element. Use thisattribute to make a certain toolbar entry invisible.


layer Layer in which the element should be displayed* (default value, that is, all layers) or specific name of a certain layer

placement Alignment of the entry within the toolbarLEFT (default value) and RIGHT

bee

The body of a toolbar entry is usually used to contain the rendering for the entry. You can, however, also use this attribute to return the contentusing a BEE.

See IF_BSP_BEE




Example


Event handling




Further information


IS XHTMLB TOOLBARLAYER

Functionality

BSP element <xhtmlb:toolbarLayer> is used to define a new layer for a toolbar. A toolbar can present more than one function layer to the user. Each layer is associated with different operations, and the display can be switched using the layer switch event. To give an example, there may be a toolbar layer for a table data view where you can use pushbuttons to scroll through the data one page up or one page down. Ina second later, detailed information about a data record may be displayed in the table, with pushbuttons for scrolling to the previous or next data record.

All <xhtmlb:toolbarLayer> elements must be aligned within an <xhtmlb:toolbar> BSP element, where each element contains the information for the definition of the layers only. If no layers are defined in the toolbar, then a default layer is defined and used.


Attributes


name x Unique name that identifies the BSP element. Character string, such as myToolbarLayer

design Predefined semantic for this layer. Each design has its own symbol and its own, special visualization.

FORM, TABLE, LIST, CHART or TREE

locked Layer switch is locked, although it is rendered as visible. FALSE (default) and




This means that the layer cannot be clicked away. You use this attribute if an operation must always be performed another operation can be started.

TRUE

image

Image or symbol on the layer switch. With this attribute you can specify a self-defined URL that points to an image or a symbol that should be used for rendering thislayer.

Character string withURL

imageLocked

Image or symbol on the layer switch that is deactivated for the next display. With this attribute you can specify a self-defined URL that points to an image or a symbol that should be used as locked for rendering this layer.

Character string withURL

text

Text instead of symbol for the layer switch for the next view. Note that this attribute is not currently implemented. It could be used for a different type of layer switch mechanism, such as with a dropdown list box, with which the text elements are implemented for each layer.

Character string

tooltipQuick info. With this attribute you determine the quick info text that appears when the cursor is moved over thetoolbar layer.

Character string

hiddenAttribute that completely hides the element with rendering. Use this attribute to make a certain toolbar layer invisible.


Example


Event handling




Further information


<xhtmlb:toolbarLink>

IS XHTMLB TOOLBARSEPARATOR

Functionality

With BSP element <xhtmlb:toolbarSeparator> you can define a separator between two or more toolbar entries. As a toolbar can "grow" from the right as well as the left, you have to define exactly where the separator is required.

Element <xhtmlb:toolbarSeparator> may only be used within an <xhtmlb:toolbar> BSP element.


Attributes


layer Layer in which the element should be displayed

* (default value, that is, all layers) or specific name of a certain layer

placement Alignment of the separator LEFT (default value) and RIGHT

Example


Event handling




Further information







IS BENCHMARK - Donutsdocshare01.docshare.tips/files/24241/242414054.pdf · 2. Set the attributes of...

Documents

Transcript of IS BENCHMARK - Donutsdocshare01.docshare.tips/files/24241/242414054.pdf · 2. Set the attributes of...