Skip to main content
Skip table of contents

ComboBox

<ComboBox> controls are used to create selection lists.

To trigger the Action "Select" when a ComboBox item is selected, a SelectAction can be inserted within the ComboBox control.

In addition to the standard attributes for controls, the following attributes are available for the element <ComboBox> element:

Attribute

Description

displayName

Title of the ComboBox. Displayed small above the input/output field.

  • Translatable

  • Data binding possible

Possible values: Any string

displayProperty

Has to be set if optionsList is set. Text that is displayed as option in the ComboBox.

Possible values: String that corresponds to a defined property.

The specified string must correspond to a valid subproperty used in optionsList. If no displayProperty is specified, the first subproperty of the property specified for optionsList is automatically used.

iconColorProperty

Name of the property that contains the color information of the icon.

This attribute is only used for material icons. The color specification can be a hexadecimal color value, e.g.ff5a00 or a color code from the color palette of the web app (see Theming), e.g. A200.

  • Data binding possible

Possible values: String that corresponds to a defined property.

For relative bindings a hashtag # must be used as prefix for the property, e.g. #Country.Id.

iconProperty

Name of the property containing the URL of the icon resource.

The icon can be either a resource from the Resources folder, a Material icon or an icon embedded via an external URL.
If the icon is included via an external URL, an additional attribute type="external" must be specified in the property.

  • Data binding possible

Possible values: String that corresponds to a defined property.

For relative bindings a hashtag # must be used as prefix for the property, e.g. #Country.Id.

optionsAutoWidth

Enable automatic width for the option list

Possible values:

  • true (default): The width of the option list automatically adjusts to the width of the option values

  • false: The width of the option list depends on the width of the ComboBox

optionsList

If the option list is outsourced : Source of the list. Can only be used together with displayProperty.

  • Controlled by data binding (list).

Possible values: String (data binding)

optionsMaxWidth

Maximum width of the option list in percent or pixels, where percent refers to the screen width

Possible values: Integer

optionsUnits

Defines the unit for the attribute optionsMaxWidth

Possible values:

  • percents

  • pixels (default)

value

Value that is displayed and saved.

  • Data binding possible

Possible values: Any string

valueProperty

Value that is processed technically. If this attribute is set, the property that is defined for this value must have the same name. If this attribute is not set, value is used.

Possible values: Any string

The specified string must correspond to a valid subproperty used in optionsList. If no valueProperty is specified, the value specified for displayProperty is automatically used.

background

Defines a color for the background of the control.

  • This setting overwrites the default color of the color scheme!

  • This attribute doesn't work with the Maps and HtmlDocument controls!

Possible values:

  • Hexadecimal color value, e.g. ff5a00

    Do not use a hash in front of the color value!
    do not use a shortened notation of the color value!


  • Color code from the color palette of the Web App (see (7.4.0-en) Theming), e.g. A200

enabled

Defines if the user can interact with the control.

  • Data binding (boolean) possible

Possible values: true / false or data binding expression

The enabled attribute replaces the obsolete disabled attribute. enabled="true" thus corresponds to the obsolete disabled="false" attribute.

fontFamily

Defines the font family.

  • This attribute overrides the default font of the Web App for this control.

  • If the attribute is defined on an element, the font family is inherited by the element's child elements, unless the child elements have the fontFamily attribute explicitly set.

  • This attribute doesn't work with the Image, Maps and HtmlDocument controls.

Possible values:

  • MainFont: Stored main font

  • Font code from the font palette, e.g. Font04

fontSize

Defines the font size.

  • This attribute overrides the default font size of the Web App for this control.

  • This attribute doesn't work with the Image, Maps and HtmlDocument controls.

Possible values:

  • Any integer or decimal number with a dot as decimal separator, e.g. 20; 20.8; .9

  • Font size in pixels, e.g. 20px

  • Font size in points, e.g. 18pt

  • Font size compared to the font size of the parent element, e.g. .8em or 120

  • Key words: xx-Small, x-small, small, medium, large, x-large, xx-large, smaller, larger

fontStretch

Sets the width of the single characters.

This attribute overrides the default width of the characters of the Web App for this control.

Possible values:

  • Condensed

  • Expanded

  • ExtraCondensed

  • ExtraExpanded

  • Medium

  • Normal (default)

  • SemiCondensed

  • SemiExpanded

  • UltraCondensed

  • UltraExpanded

This attribute doesn't work with the Image, Maps, Charts and HtmlDocument controls.

fontStyle

Defines the font style.

This attribute overrides the default style of the characters of the Web App for this control.

Possible values:

  • italic: italic characters

  • normal: normal characters (default)

  • oblique: italic characters (calculated)

This attribute doesn't work with the Image, Maps and HtmlDocument controls.

fontWeight

Defines the font weight.

This attribute overrides the default font weight of the Web App for this control.

Possible values:

  • Black

  • Bold

  • DemiBold

  • ExtraBlack

  • ExtraBold

  • ExtraLight

  • Heavy

  • Light

  • Medium

  • Normal (default)

  • Regular

  • SemiBold

  • Thin

  • UltraBlack

  • UltraBold

  • UltraLight

This attribute doesn't work with the Image, Maps and HtmlDocument controls.

foreground

Defines a color for the foreground (texts etc.) of the control.

  • This setting overwrites the default color of the color scheme!

  • This attribute does not work with the Map and HtmlDocument controls!


Possible values:

  • Hexadecimal color value, e.g. ff5a00

    Do not use a hash in front of the color value!
    do not use a shortened notation of the color value!

  • Color code from the color palette of the Web App (see Theming), e.g. A200

horizontalAlign

Direction in which the elements flow. The order of the elements corresponds to their declaration.

Possible values:

  • left (default)

  • center

  • right

textOverflow

Defines what happens if the page is full.

Possible values:

  • ellipsis: Show with ... that the text is not finished

  • hidden: Break off text, paying attention to whole words

  • wordBreak: Break off within the word

  • allow (default): Break off text between words

visible

Defines if the control is visible.

  • Data binding (boolean) possible

Possible values: true / false or data binding expression

ComboBox contains at least one <Option> element that creates an option. The options of the pick list can either come from a Technical Process or be entered manually.

The <Option> element may have the following attributes:

Attribute

Description

displayName

Mandatory. Display name of the pick list option.

  • Translatable

  • Data binding possible

    Possible values: any string

Note:

To quickly jump to a specific option in a combo box with many choices, rather than scrolling through the entire list, click in the combo box and type all or part of the option's display name.

value

Value of the pick list option

  • Data binding possible

Possible values: any string

iconColor

Color of the icon

This attribute is only used for Material Icons.

Possible values:

  • Hexadecimal color value, e.g.ff5a00
    Do not use a hash in front of the color value! Do not use a shortened notation of the color value!

  • Color code from the color palette of the Web App (see Theming), e.g. A200

iconUrl

Path to the used icon

The icon can be either a resource from the Resources folder, a Material icon or an icon embedded via an external URL.

Possible values: 

  • String (URI), e.g. clock.png

  • Specification of a material icon according to the pattern icon:<MaterialIconName> , , e.g. icon:extension

    With  Ctrl+Space you get an overview of the available icons. The selection may differ from the actual available Material Icons.


  • External URL

The data for the outsourced options list must be available as XML data. The options must be contained in a list:

XML 
<example>
	<listElement>list element 1</listElement>
</example>
<example>
	<listElement>list element 2</listElement>
</example>

The property definition is carried out according to the XML data. Please not that an additional property saveValue is created, which is used as initial value and container for saving the user input.

XML 
<Property name="example" type="List">
	<Property name="listElement" type="String" />
</Property>
<Property name="saveValue" type="String" />

Examples

Example <ComboBox>

The following example shows the usage of the <ComboBox> tag.

XML 
<DetailComponent name="ExampleComboBox" path="ExampleComboBox" displayName="Example ComboBox" process="ComboBox.wrf">
	<FlowLayout>
		<ComboBox value="#saveValue">
			<Option displayName="Answer A"/>
			<Option displayName="Answer B"/>
		</ComboBox>
	</FlowLayout>
</DetailComponent>

Above code creates the following ComboBox:

Example <ComboBox> with outsourced pick list

The following example shows the usage of the <ComboBox> element with an outsourced pick list. The displayed name and the associated technical value differ.

The data for an outsourced options list have to be available as XML data. The options including the technical values must be contained in a list:

XML 
<?xml version="1.0" encoding="UTF-8"?>
<Ok>
	<ComboBoxValue></ComboBoxValue>
	<OptionList>
		<OptionValue>Red</OptionValue>
		<TechnicalValue>#FF0000</TechnicalValue>
	</OptionList>
	<OptionList>
		<OptionValue>Green</OptionValue>
		<TechnicalValue>#008000</TechnicalValue>
	</OptionList>
	<OptionList>
		<OptionValue>Blue</OptionValue>
		<TechnicalValue>#0000FF</TechnicalValue>
	</OptionList>
</Ok>

The properties definition is done according to the XML data.

XML 
<Properties>
	<Property name="ComboBoxValue" type="String"></Property>
	<Property name="OptionList" type="List">
		<Property name="OptionValue" type="String"></Property>
		<Property name="TechnicalValue" type="String"></Property>
	</Property>
</Properties>

The ComboBox control in the component contains a SelectAction. The SelectAction sends the data to the defined Technical Process when an option is selected from the ComboBox. In the ComboBox the data from the swapped option list is used. The OptionValue elements are displayed, but the technical data from the TechnicalValue element are selected in the background.

XML 
<?xml version="1.0" encoding="UTF-8"?>
<DetailComponent
	xmlns="http://softproject.de/webapp/1.0"
	process="LoadData.wrf">
<Properties>
	<Property name="ComboBoxValue" type="String"></Property>
	<Property name="OptionList" type="List">
		<Property name="OptionValue" type="String"></Property>
		<Property name="TechnicalValue" type="String"></Property>
	</Property>
</Properties>
	<FlowLayout>
		<Header value="Welcome to my new Web App!" />
		<ComboBox 
			value="#ComboBoxValue"
			optionsList="#OptionList"
			valueProperty="#TechnicalValue"
			displayProperty="#OptionValue">
			<SelectAction process="SaveData.wrf" />
		</ComboBox>
	</FlowLayout>
</DetailComponent>

The XML data to be used for the options must be provided by a Technical Process (in the example LoadData.wrf and SaveData.wrf).

Example <ComboBox> with icon

The following example shows the usage of the <ComboBox> element with icons and an outsourced pick list.

The following options are provided as selection options via a Technical Process (here Options.wrf):

Options list
XML 
<?xml version="1.0" encoding="UTF-8"?>
<OkList>
	<Country>
		<Id>6</Id>
		<Name>Worldwide</Name>
		<icon>icon:public</icon>
		<color>ff5a00</color>
	</Country>
	<Country>
		<Id>2</Id>
		<Name>Italy</Name>
		<icon>italy.png</icon>
	</Country>
	<Country>
		<Id>5</Id>
		<Name>Germany</Name>
		<icon>germany.png</icon>
	</Country>
	<Country>
		<Id>3</Id>
		<Name>Portugal</Name>
		<icon>portugal.png</icon>
	</Country>
	<Country>
		<Id>4</Id>
		<Name>Spain</Name>
		<icon>spain.png</icon>
	</Country>
	<selected>6</selected>
</OkList>

The two example ComboBoxes are defined as follows:

Snippet from the definition file
XML 
...
<DetailComponent default="true" displayName="Dashboard" path="Dashboard" 
                 process="folder_1/Options.wrf">
	<Properties>
		<Property name="selected" type="Integer"/>
		<Property name="direction" type="Integer"/>
		<Property name="Country" type="List">
			<Property name="Id" type="Integer"/>
			<Property name="Name" type="String"/>
			<Property name="icon" type="Image"/>
			<Property name="color" type="Color"/>
		</Property>
		<Property name="image" type="Image"/>
	</Properties>
	<FlowLayout>
		<ComboBox displayName="$Country" displayProperty="#Name" 
                  iconColorProperty="#color"
                  iconProperty="#icon"
                  optionsList="#Country"
                  value="#selected"
                  valueProperty="#Id"/>
		<ComboBox displayName="Means of transport" value="#direction">
			<Option displayName="Bike" iconColor="A200" iconUrl="icon:directions_bike" value="1"/>
			<Option displayName="Walk" iconColor="A200" iconUrl="icon:directions_walk" value="4"/>
			<Option displayName="Subway" iconColor="A200" iconUrl="icon:directions_subway" value="3"/>
		</ComboBox>
	</FlowLayout>
</DetailComponent>
...

The result is as follows:

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.

Contact Support Close