Selectoritem Formitem component

With the use of this component, a value from a set of values can be selected. The component is similar to a ComboBoxItem, but its appearance and functionality are different. The component is ideal for handling large sets of values, since the selectable values do not get placed with the component on the client. You can apply a filter to a SelectorItem and select items from a selector window.

If a selector item component is displayed, a non-writable input field and a button with a magnifying glass icon will be displayed. If the user clicks on either of those, a window will appear. The window can be customized and implemented by the developer, or it can be the default selector window, in which a filterable list will be displayed. If the default one is used, the user can select a value from this filterable list. The list uses a lazy fetch implementation, so not every value will be used simultaneously, only a small fraction will be used. If the user goes to the bottom of the list, a new chunk of data will be queried automatically.

If the user double-clicks on a value, or selects one and presses the OK button, the value will be placed in the input field, and the component will register that value.

The JBStrap framework also allows the implementation of a custom window. The display and operation of the window must be implemented, by creating a class that extends from the SelectorWindow class. The SelectorWindow class requires the implementation of the methods that are responsible for the display and the operation of the selector window. Any other method can also be implemented and any component can be used (like for displaying the set of values) during the implementation. For more information, see the SelectorWindow class description.

The component can be based on two DataDescriptors. One can specify the component itself, and the other can contain the component values. In this case, the name of the DataDescriptor, that contains the values must be specified in the component DataDescriptor's column. The data column and displayed column's name must be specified as well. Data in the data column will be saved in the component DataDescriptor, and the display column's values will be displayed on the interface. For example, if you want the user to pick a country, but only want to save the country ID in the database, you should follow the example:

         <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xml>
<datadescriptor name="countryDD" dataClass="com.jbstrap.sample.domain.Country">
    <access>
        <type>Public</type>
    </access>
 
    <column name="id" datatype="NUMBER" length="11" nullable="false" primaryKey="true" visible="HIDDEN" />
 
    <column name="countryName" datatype="VARCHAR2" length="255" nullable="false" visible="VISIBLE">
        <title>Country name</title>
    </column>
</datadescriptor>
        

         <column name="customerId" datatype="NUMBER" length="11" visible="EDIT" nullable="false" editorType="SelectorItem">
    <title>Country</title>
    <params>
        <param name="dataDescriptor">countryDD</param>
        <param name="dataColumn">id</param>
        <param name="displayColumn">countryName</param>
    </params>
</column>
        

         SelectorItem selector = new SelectorItem(JBStrap.getDataDesriptor("exampleDD").getColumn("customerId"));
addComponent(selector);
        

Supported events:

Show, Hide, Change, Focus, Animations, Click, MouseEvents, Touch, HotKey, Drag&Drop

Style customization

This component does not have specific variables to use for style customization. However, you can use custom style classes and Bootstrap variables to change the appearance of this component.

Style customization

Related pages