Component: Combo Box ( Control): Difference between revisions

Latest revision as of 14:37, 13 July 2026

Author	MatrixTSL
Version	1.4
Category	Control

Combo Box component

Creates a user selectable combo box for selecting between various options.

Version information

Library Version, Component Version, Date, Author, Info
3, 1.1, 14-06-24, ST, Corrected the select element id tag, and fixed SplitString use
4, 1.2, 18-06-24, ST, Added macros to clear and set entries and fixed TypeIn version
5, 1.3, 02-02-26, ST, Added SetSelectedIndex macro
6, 1.4, 16-06-26, ST, Fix for SplitString change in v11.0.2

Detailed description

No detailed description exists yet for this component

Examples

BasicControls example

This simple example shows how to sue some basic controls in a Web Developer project.

BasicControls.fcweb

The web app created by this example can be viewed here: BasicControls Example

Macro reference

AddEntry

	AddEntry
Adds a text entry to the combobox
- STRING	NewEntry
The new text entry to add
- VOID	Return

ClearEntries

	ClearEntries
Clears the list of entries in the combobox
- VOID	Return

GetSelectedIndex

	GetSelectedIndex
Returns the index of the selected item
- INT	Return

GetSelectedText

	GetSelectedText
Returns the text for the currently selected item
- STRING	Return

SetSelectedIndex

	SetSelectedIndex
Sets the index of the selected item
- LONG	idx
The item to select
- VOID	Return

Property reference

	Properties
	ComboBox
	Options
A list of choices available in the combobox
	Type In
Set to allow the user to type directly into this combobox
	Show Lines
If this is greater than 1, this many options will be shown as a selectable list
	Style
	Font
Specifies the font style for the item
	Font Size
The font size in pixels
	Horizontal Alignment
Aligns the caption text on the button
	Bold
Make the caption text bold
	Italic
Make the caption text italicised
	Underline
Make the caption text underlined
	Strikethrough
Make the caption text crossed-out
	Colour
	Text
Specifies the font colour for the item
	Background
Specifies the background colour value
	Advanced
	Custom Attributes
Text here will be added to the html tag of this component to allow advanced customisation

Component Source Code

Please click here to download the component source project: FC_Comp_Source_WEBEXP_ComboBox.fcsx

Please click here to view the component source code (Beta): FC_Comp_Source_WEBEXP_ComboBox.fcsx

@@ Line 5: / Line 5: @@
 |-
 | width="20%" style="color:gray;" | Version
-| 1.1
+| 1.4
 |-
 | width="20%" style="color:gray;" | Category
@@ Line 19: / Line 19: @@
   Library Version, Component Version, Date, Author, Info
 , 1.1, 14-06-24, ST, Corrected the select element id tag, and fixed SplitString use
+, 1.2, 18-06-24, ST, Added macros to clear and set entries and fixed TypeIn version
+, 1.3, 02-02-26, ST, Added SetSelectedIndex macro
+, 1.4, 16-06-26, ST, Fix for SplitString change in v11.0.2
 ==Detailed description==
 ''No detailed description exists yet for this component''
 ==Examples==
-''<span style="color:red;">No additional examples</span>''
+===BasicControls example===
+This simple example shows how to sue some basic controls in a Web Developer project.
+{{Fcfile|BasicControls.fcweb|BasicControls.fcweb}}
+The web app created by this example can be viewed here: [https://www.flowcode.co.uk/example/WebComps/BasicControls.html BasicControls Example]
 ==Macro reference==
+===AddEntry===
+{| class="mtx-class-macrotable wikitable"
+|-
+| width="10%" align="center" class="mtx-class-macrohead" | [[File:Fc9-comp-macro.png]]
+| width="90%" class="mtx-class-macrohead" | '''AddEntry'''
+|-
+| colspan="2" | Adds a text entry to the combobox&nbsp;
+|-
+|-
+| width="10%" align="center" | [[File:Fc9-string-icon.png]] - STRING
+| width="90%" | NewEntry
+|-
+| colspan="2" | The new text entry to add&nbsp;
+|-
+| width="10%" align="center" style="border-top: 2px solid #000;" | [[File:Fc9-void-icon.png]] - VOID
+| width="90%" style="border-top: 2px solid #000;" | ''Return''
+|}
+===ClearEntries===
+{| class="mtx-class-macrotable wikitable"
+|-
+| width="10%" align="center" class="mtx-class-macrohead" | [[File:Fc9-comp-macro.png]]
+| width="90%" class="mtx-class-macrohead" | '''ClearEntries'''
+|-
+| colspan="2" | Clears the list of entries in the combobox&nbsp;
+|-
+|-
+| width="10%" align="center" style="border-top: 2px solid #000;" | [[File:Fc9-void-icon.png]] - VOID
+| width="90%" style="border-top: 2px solid #000;" | ''Return''
+|}
 ===GetSelectedIndex===
-{| class="wikitable" style="width:60%; background-color:#FFFFFF;"
+{| class="mtx-class-macrotable wikitable"
 |-
-| width="10%" align="center" style="background-color:#D8C9D8;" align="center" | [[File:Fc9-comp-macro.png]]
+| width="10%" align="center" class="mtx-class-macrohead" | [[File:Fc9-comp-macro.png]]
-| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''GetSelectedIndex'''
+| width="90%" class="mtx-class-macrohead" | '''GetSelectedIndex'''
 |-
 | colspan="2" | Returns the index of the selected item&nbsp;
@@ Line 49: / Line 88: @@
 ===GetSelectedText===
-{| class="wikitable" style="width:60%; background-color:#FFFFFF;"
+{| class="mtx-class-macrotable wikitable"
 |-
-| width="10%" align="center" style="background-color:#D8C9D8;" align="center" | [[File:Fc9-comp-macro.png]]
+| width="10%" align="center" class="mtx-class-macrohead" | [[File:Fc9-comp-macro.png]]
-| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''GetSelectedText'''
+| width="90%" class="mtx-class-macrohead" | '''GetSelectedText'''
 |-
 | colspan="2" | Returns the text for the currently selected item&nbsp;
@@ Line 58: / Line 97: @@
 |-
 | width="10%" align="center" style="border-top: 2px solid #000;" | [[File:Fc9-string-icon.png]] - STRING
+| width="90%" style="border-top: 2px solid #000;" | ''Return''
+|}
+===SetSelectedIndex===
+{| class="mtx-class-macrotable wikitable"
+|-
+| width="10%" align="center" class="mtx-class-macrohead" | [[File:Fc9-comp-macro.png]]
+| width="90%" class="mtx-class-macrohead" | '''SetSelectedIndex'''
+|-
+| colspan="2" | Sets the index of the selected item&nbsp;
+|-
+|-
+| width="10%" align="center" | [[File:Fc9-s32-icon.png]] - LONG
+| width="90%" | idx
+|-
+| colspan="2" | The item to select&nbsp;
+|-
+| width="10%" align="center" style="border-top: 2px solid #000;" | [[File:Fc9-void-icon.png]] - VOID
 | width="90%" style="border-top: 2px solid #000;" | ''Return''
 |}
@@ Line 64: / Line 122: @@
 ==Property reference==
-{| class="wikitable" style="width:60%; background-color:#FFFFFF;"
+{| class="mtx-class-macrotable wikitable"
 |-
-| width="10%" align="center" style="background-color:#D8C9D8;" | [[File:Fc9-prop-icon.png]]
+| width="10%" align="center" class="mtx-class-macrohead" | [[File:Fc9-prop-icon.png]]
-| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''Properties'''
+| width="90%" class="mtx-class-macrohead" | '''Properties'''
 |-
 |-
-| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
+| width="10%" align="center" class="mtx-class-propfolder" | [[File:Fc9-conn-icon.png]]
-| width="90%" style="background-color:#EAE1EA; color:#4B008D;" | ComboBox
+| width="90%" class="mtx-class-propfolder" | ComboBox
 |-
 |-
@@ Line 89: / Line 147: @@
 | colspan="2" | If this is greater than 1, this many options will be shown as a selectable list&nbsp;
 |-
-| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
+| width="10%" align="center" class="mtx-class-propfolder" | [[File:Fc9-conn-icon.png]]
-| width="90%" style="background-color:#EAE1EA; color:#4B008D;" | Style
+| width="90%" class="mtx-class-propfolder" | Style
 |-
 |-
@@ Line 128: / Line 186: @@
 | colspan="2" | Make the caption text crossed-out&nbsp;
 |-
-| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
+| width="10%" align="center" class="mtx-class-propfolder" | [[File:Fc9-conn-icon.png]]
-| width="90%" style="background-color:#EAE1EA; color:#4B008D;" | Colour
+| width="90%" class="mtx-class-propfolder" | Colour
 |-
 |-
@@ Line 142: / Line 200: @@
 | colspan="2" | Specifies the background colour value&nbsp;
 |-
-| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
+| width="10%" align="center" class="mtx-class-propfolder" | [[File:Fc9-conn-icon.png]]
-| width="90%" style="background-color:#EAE1EA; color:#4B008D;" | Advanced
+| width="90%" class="mtx-class-propfolder" | Advanced
 |-
 |-

SteveT (talk | contribs)