Show TOC Start of Content Area

Object documentation Dropdown List Box  Locate the document in its SAP Library structure

Definition

A control with a dropdown arrow that the user clicks to display a list of options. An item in the dropdownListBox is called listBoxItem. The dropdownListBox supports client side eventing. See the EventValidationComponent description for more details.

·        design

Sets the design of the dropdownListBox.

·        enabled - inherited from EventValidationComponent.

A boolean value that defines if the dropdownListBox is click able. If the dropdownListBox is disabled (enabled = false) it is not selectable. A disabled dropdownListBox has a different color for the displayed listBoxItem.

·        id

Identification name of the dropdownListBox.

·        jsObjectNeeded - inherited from Component.

A boolean value that defines if a JavaScript object has to be generated for the dropdownListBox component.

·        labeled

Notify the component that a label has assigned to it. See the HTMLB Javadoc for more details on the LabeledComponent class.

·        model

Defines the model which provides the dropdownListBox with data. How to work with the IListModel.

·        nameOfKeyColumn

Specifies the name of the column that contains the key. This is used when you use an underlying table in the model.

·        nameOfValueColumn

Specifies the name of the column that contains the visible text. This is used when you use an underlying table in the model.

·        onClientSelect 

Defines the JavaScript fragment that is executed when the user clicks on the dropdownListbox. If both events ('onSelect' and 'onClientSelect') are specified, the 'onClientSelect' event handling method is activated first. By default the 'onSelect' event handling method is activated afterwards. In the JavaScript fragment you can cancel the activation of the 'onSelect' event handling method with the command

htmlbevent.cancelSubmit=true;

The 'onClientSelect' event is useful to pre process the form and only send the form to client if the preprocessing was successful (for example, date validation, valid number format etc.) to save client/server interaction.

 

Example

A dropdownListbox click usually activates the client/server interaction. If an input field has to be filled out for further processing, the JavaScript fragment can check the necessary input on the client side and display a message if the necessary input is missing, without server interaction.

 

Note

To use JavaScript the JSP has to use the page tag (see page tag).

·        onSelect

Defines the event handling method that will be processed when the user clicks on the enabled dropdownListbox. If you do not define a onClick event the dropdownListbox can be clicked but no event is generated.

·        requiresValidation

A boolean value that defines if the selected value in the dropdownListBox has to be validated before a server event is generated.

·        selection

Specifies the key of the listBoxItem which is displayed in the dropdownListBox.

·        tooltip

Defines the hint of the dropdownListBox which is displayed as the mouse cursor passes over the dropdownListBox, or as the mouse button is pressed but not released.

·        width

Defines the width of the dropdownListBox in pixel or percent.

 

Attributes

M

Values

Usage

design

 

STANDARD (d)
SMALL

Taglib
No tag available

Classlib
setDesign (DropdownListBoxDesign.SMALL)

enabled*

 

TRUE (d)
FALSE

Taglib
disabled="TRUE"

Classlib
setEnabled (false)

id

*

String (cs)

Taglib
id = "listbox_te"

Classlib
setId ("listbox_te")

jsObjectNeeded**

 

TRUE (d)
FALSE

Taglib
jsObjectNeeded = "TRUE"

Classlib
setJsObjectNeeded (true)

labeled

 

TRUE
FALSE (d)

Taglib
No tag available

Classlib
setLabeled (true)

model

 

String

Taglib
model = "mybean.model"

Classlib
setModel((IListModel) model)

nameOfKeyColumn

 

String

Taglib
nameOfKeyColumn = "k1"

Classlib
setNameOfKeyColumn ("k1")

nameOfValueColumn

 

String

Taglib
nameOfValueColumn = "v1"

Classlib
setNameOfValueColumn ("v1")

requiresValidation

 

TRUE
FALSE (d)

Taglib
No tag available

Classlib
setRequiresValidation(true)

selection

 

String

Taglib
selection = "HD"

Classlib
setSelection("HD")

tooltip

 

String

Taglib
tooltip = "select an item"

Classlib
setTooltip ("select an item")

width

 

Unit

Taglib
width = "200"

Classlib
setWidth ("200")

* Method is inherited from the EventValidationComponent component. Therefor the attribute is different between the taglib and the classlib.

** Method is inherited from the Component component.

 

See the JavaScript API description for details how to access the component in JavaScript.

 

Events

M

Values

Usage

onClientSelect

 

String (cs)

Taglib
onClientSelect="alert('Click')"

Classlib
setOnClientSelect("alert('Click')")

onSelect

 

String (cs)

Taglib
onSelect="proc_listbox"

Classlib
setOnSelect ("proc_listbox")

 

To entries in the dropdownListBox are created with the listBoxItem control.

 

 

Example

using the taglib

    <hbj:dropdownListBox
           id=
"DDCitiesNearby"
           
tooltip="Cities surounding SAP"
           
selection="WD"
           
nameOfKeyColumn="KeyCol"
           
nameOfValueColumn="KeyVal"
           
onSelect="ProcessCity"
           
onClientSelect="PreprocessCity"
           
>

              <hbj:listBoxItem key=
"HD" value="Heidelberg"    />
              <hbj:listBoxItem key=
"HK" value="Hockenheim"    />
              <hbj:listBoxItem key=
"WD" value="Walldorf"      />
              <hbj:listBoxItem key=
"WL" value="Wiesloch"      />
    
</hbj:dropdownListBox>

 

using the classlib

    Form form = (Form)this.getForm();
    DropdownListBox ddl = 
new DropdownListBox("DDCitiesNearby");
    
ddl.setWidth("300");
    ddl.addItem(
"HD","Heidelberg");
    ddl.addItem(
"HK","Hockenheim");
    ddl.addItem(
"WD","Walldorf");
    ddl.addItem(
"WL","Wiesloch");
    
ddl.setOnSelect("ProcessCity");
    ddl.setOnClientSelect(
"PreprocessCity");
    ddl.setTooltip(
"Cities nearby");
    ddl.setSelection(
"WD");
    
form.addComponent(ddl);

 

Result

This graphic is explained in the accompanying text

End of Content Area