Page Comparison

Description

The select widget represents a labelled single select dropdown. The selected result can be bound to a variable with a basic data type, object instance, object instance attribute or an custom enum variable.

The default initial value for binding is null and is displayed as "Not Specified" on the widget.

The collection source for the widget that will be displayed can be a collection of basic data types, an object collection or an enum.

In the case of an object collection as source, one or more attributes can be specified to be displayed in the dropdown list. 

The title is specified as a key to a lang file entry and is required. Visibility bindings are also supported.

The select widget can be used to submit the values on a view to the backend.

Example

Enum as collection source

The abbreviated code snippets and screenshots below shows the use of <select/> with a custom enum as collection source.

 enum STATES {
    West_Coast,
    South_Coast,
    Inland
}
persistent object Farmer {
    .
    .
    STATES state;
    .
    .
}

 <select label="select.state">
    <binding variable="farmer">
        <attribute name="state"/>
    </binding>
    <enum>STATES</enum>
</select>

Farmer farmer;

void init() {
    farmer = Farmer:new();
    .
    .
}

select.state = State: 

Object array/collection as collection source

The abbreviated code snippets and screenshots below shows the use of <select/> with a collection of object instances as collection source.

 persistent object Shop {
    .
    .
    @OneToOne
    ShopOwner owners via shops;
}

persistent object ShopOwner {
    string firstName;
    string lastName;
    bool deleted;
    .
    .
}

 <select label="select.shop_owner">
    <binding variable="ownerToAdd"/>
    <collectionSource function="getAllShopOwners">
        <displayAttribute name="firstName"/>
        <displayAttribute name="lastName"/>
    </collectionSource>
</select>

ShopOwner ownerToAdd;

void init() {
    ownerToAdd = null;
}

ShopOwner[] getAllShopOwners() {
    return ShopOwner:equals(deleted, false);
}

 select.shop_owner = Shop owner:

Basic data type array/collection as collection source

The abbreviated code snippets and screenshots below shows the use of <select/> with a collection of strings as collection source.

<select label="select.crop_type">
    <binding variable="selectedCropType"/>
    <collectionSource variable="cropTypes"/>
</select>

string[] cropTypes;
string selectedCropType;
 
void init() {
	cropTypes.append("Coffee");
	cropTypes.append("Nuts");
}

 select.crop_type = Crop type:

Submit view on change event

An attribute called submitOnChange can be declared on a view, when this is set as "true" the view will be submitted to Helium when an option of the select is clicked by the user. The submit event will bind user input to the unit variables and reload the view in the same way as the <submit/> widget. The use case for doing this is to filter results displayed on a view when a user selects an item from a select dropdown, without the need to click a submit button.

In the following example, when a user selects a value from the rendered select widget then the view will be submitted.

<select label="view.select.Select" submitOnChange="true">
    <binding variable="selectedOption"/>
    <collectionSource variable="options"/>
</select>

Note that similarly to using a submit button and then reloading the current view by navigating to it from itself, a view's init function will not be executed when reloading a view as a result of an "on change" event. Init functions are only executed when navigating to a view from a different view or as a result of a menu navigation. Collection sources for any view widgets are, however, re-evaluated.

Additional Mentions and References

• Devoted section in the Helium Tutorial Lesson 5: Model Objects, Enums
• Mentioned in section in the Helium Tutorial Lesson 6: Relationships 
• Helium DSL and View Quick Reference