Skip to main content
Skip table of contents

ComboBox

<ComboBox> controls are used to create pick lists with automatic completion.

To trigger the action "Select" when selecting a ComboBox entry, a SelectAction can be inserted within the ComboBox control.

In addition to the general attributes for controls, the following additional attributes can be defined for the <ComboBox> element:

Attribute

Description

displayName

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

  • Translatable

  • Data binding possible

Possible values: Any string

displayProperty

Must be specified if optionsList is set. Text that is displayed in the ComboBox as a selection option.

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, then 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 can be a hexadecimal color value (e.g. ff5a00) or a color code from the Web App color palette (see Theming), e.g. A200.

  • Data binding possible

Possible values: String that corresponds to a defined property.

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

iconProperty

Name of the property that contains 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 integrated via an external link, the 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, the hashtag # must be used as a prefix for the property, e.g. #Country.Id.

optionsAutoWidth

Enable automatic width for the options list

Possible values:

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

  • false: The width of the options list depends on the width of the ComboBox.

optionsList

For swapped-out options list: Source of the list. Can only be used in conjunction with displayProperty.

  • Is activated via data binding (list).

Possible values: String (data binding)

optionsMaxWidth

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

Possible values: Any integer

optionsUnits

Defines the unit for the optionsMaxWidth attribute

Possible values:

  • percents

  • pixels (default)

value

Value that is displayed and stored.

  • Data binding possible

Possible values: Any string

valueProperty

Value that is technically processed. If this attribute is set, the property defined for this value must also be called this. 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 overrides the default color of the color scheme!

  • This attribute does not work for the Maps and HtmlDocument controls.

Possible values:

  • Hexadecimal color value, e.g. ff5a00

Do not use a hash before the color value.

Do not use an abbreviated notation of the color value!

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

enabled

Specifies whether the user can interact with the control.

  • Data binding (Boolean) is possible

Possible values: true/false or expression for data binding

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

fontFamily

Specifies the font family.

  • This attribute overwrites the default Web App font for this layout.

  • If the attribute is defined on an element, the font family is inherited by any child elements unless the fontFamily attribute is explicitly defined for the child elements.

  • This attribute does not work for the Image, Map , and HtmlDocument elements.

Possible values:

  • MainFont: stored main font

  • Fontcode from the font palette, e.g. Font04

fontSize

Sets the font size.

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

  • This attribute does not work for the Image, Map , and HtmlDocument elements.

Possible values:

  • Any integer or decimal number with a period as a 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 oder 120%

  • Keywords: xx-small , x-small , small , medium , large , x-large , xx-large , smaller , larger

fontStretch

Specifies the width of each character.

This attribute overrides the default character width for this layout.

Possible values:

  • Condensed

  • Expanded

  • ExtraCondensed

  • ExtraExpanded

  • Medium

  • Normal (default)

  • SemiCondensed

  • SemiExpanded

  • UltraCondensed

  • UltraExpanded

This attribute does not work for the Image, Map, Chart, and HtmlDocument elements.

fontStyle

Sets the tilt of the font.

This attribute overrides the default font tilt for this layout.

Possible values:

  • italic: Italic font

  • normal: Normal font (default)

  • oblique: Slanted font style (calculated)

This attribute does not work for the Image, Map , and HtmlDocument elements.

fontWeight

Sets the font weight.

This attribute overrides the default font weight for this layout.

Possible values:

  • Black

  • Bold

  • DemiBold

  • ExtraBlack

  • ExtraBold

  • ExtraLight

  • Heavy

  • Light

  • Medium

  • Normal (default)

  • Regular

  • SemiBold

  • Thin

  • UltraBlack

  • UltraBold

  • UltraLight

This attribute does not work for the Image, Map , and HtmlDocument elements.

foreground

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

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

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

  • Hexadecimal color value, e.g. ff5a00

Do not use a hash before the color value.

Do not use an abbreviated notation of the color value!

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

horizontalAlign

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

Possible values:

  • left (default)

  • center

  • right

textOverflow

Specifies what should happen when the control is full.

Possible values:

  • ellipsis : Use ... to show that the text is not finished

  • hidden : Break off text, watch for whole words

  • wordBreak : Break off text within word

  • allow (default): break off text between words

visible

Defines if the control is visible.

  • Data binding (Boolean) is possible

Possible values:

true/ false or string for data binding

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

Note:

You can insert an empty <Option> element if you do not want the first entry in the pick list to be pre-selected automatically. For connected ComboBox elements, you must add an empty <Option> element in each element.

If you add an empty <Option> element and have added a display name for the ComboBox using the displayName attribute, the display name (for example, Please select) is displayed as the first entry:

image-20250905-123810.png

For the <Option> element, you can define the following attributes:

Attribute

Description

displayName

Required

Display name of the selection option.

  • Translatable

  • Data binding possible

Possible values: Any string

Note:

If you want to quickly switch to a specific option in a ComboBox with many selection options instead of scrolling through the entire list, click in the ComboBox and enter all or part of the display name of the option.

value

Value of the selection 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 before the color value, and do not use a shortened notation for the color value!

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

iconUrl

Path to the icon used

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), for example, clock.png

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

With Ctrl+Space, you display an overview of the available icons. The selection may differ from the actual available material icons.

  • External URL

The data for an outsourced option list must be XML data. The options must be included in a list:

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

Properties are defined according to the XML data. Note that an additional property saveValue is created, which is used as the 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 of <ComboBox>

The following example shows how to use 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>

The above code results in the following ComboBox:

Example of <ComboBox> with outsourced option list

The following example uses a swapped-out option list. The displayed name and associated technical value differ.

The data for an outsourced option list must be XML data. The options, including the technical values, must be included 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>

Properties are defined 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.

The data from the outsourced option list (optionsList attribute) is used in the ComboBox. The OptionValue elements are displayed, but the technical data from the TechnicalValue element is 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>


Note:

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 of <ComboBox> with icons

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

The following options are provided as a selection option via a Technical Process (in this case 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:

A 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 looks like this:

JavaScript errors detected

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

If this problem persists, please contact our support.

Contact Support Close