Jump to content

Component: Combo Box ( Control): Difference between revisions

From Flowcode Help

SteveT (talk | contribs)

4 user groups
6,424 edits
Created page with "{| style="width:50%" |- | width="20%" style="color:gray;" | Author | MatrixTSL |- | width="20%" style="color:gray;" | Version | 0.1 |- | width="20%" style="color:gray;..."
 
m Text replacement - "style="background-color:#EAE1EA;"" to "class="mtx-class-propfolder""
 
(12 intermediate revisions by 2 users not shown)
Line 5: Line 5:
|-
|-
| width="20%" style="color:gray;" | Version
| width="20%" style="color:gray;" | Version
| 0.1
| 1.4
|-
|-
| width="20%" style="color:gray;" | Category
| width="20%" style="color:gray;" | Category
Line 15: Line 15:
Creates a user selectable combo box for selecting between various options.
Creates a user selectable combo box for selecting between various options.


==Component Source Code==
==Version information==
 
Please click here to download the component source project: [https://www.flowcode.co.uk/wiki/componentsource/FC_Comp_Source_WEBEXP_ComboBox.fcsx FC_Comp_Source_WEBEXP_ComboBox.fcsx]


Please click here to view the component source code (Beta): [https://www.flowcode.co.uk/FlowchartView/?wfile=componentsource/FC_Comp_Source_WEBEXP_ComboBox.fcsx FC_Comp_Source_WEBEXP_ComboBox.fcsx]
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==
==Detailed description==


''No detailed description exists yet for this component''
''No detailed description exists yet for this component''


==Examples==
==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==
==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===
===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" | &nbsp;
| colspan="2" | Returns the index of the selected item&nbsp;
|-
|-
|-
|-
Line 46: Line 88:


===GetSelectedText===
===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" | &nbsp;
| colspan="2" | Returns the text for the currently selected item&nbsp;
|-
|-
|-
|-
| width="10%" align="center" style="border-top: 2px solid #000;" | [[File:Fc9-string-icon.png]] - STRING
| 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''
| width="90%" style="border-top: 2px solid #000;" | ''Return''
|}
|}
Line 61: Line 122:
==Property reference==
==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 74: Line 135:
| width="90%" | Options
| width="90%" | Options
|-
|-
| colspan="2" | &nbsp;
| colspan="2" | A list of choices available in the combobox&nbsp;
|-
|-
| width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
| width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
| width="90%" | Type In
| width="90%" | Type In
|-
|-
| colspan="2" | &nbsp;
| colspan="2" | Set to allow the user to type directly into this combobox&nbsp;
|-
|-
| width="10%" align="center" | [[File:Fc9-type-21-icon.png]]
| width="10%" align="center" | [[File:Fc9-type-21-icon.png]]
| width="90%" | Show Lines
| width="90%" | Show Lines
|-
|-
| colspan="2" | &nbsp;
| 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 97: Line 158:
| width="10%" align="center" | [[File:Fc9-type-21-icon.png]]
| width="10%" align="center" | [[File:Fc9-type-21-icon.png]]
| width="90%" | Font Size
| width="90%" | Font Size
|-
| colspan="2" | &nbsp;
|-
| width="10%" align="center" | [[File:Fc9-type-21-icon.png]]
| width="90%" | Font size
|-
|-
| colspan="2" | The font size in pixels&nbsp;
| colspan="2" | The font size in pixels&nbsp;
Line 108: Line 164:
| width="90%" | Horizontal Alignment
| width="90%" | Horizontal Alignment
|-
|-
| colspan="2" | &nbsp;
| colspan="2" | Aligns the caption text on the button&nbsp;
|-
|-
| width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
| width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
| width="90%" | Bold
| width="90%" | Bold
|-
|-
| colspan="2" | &nbsp;
| colspan="2" | Make the caption text bold&nbsp;
|-
|-
| width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
| width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
| width="90%" | Italic
| width="90%" | Italic
|-
|-
| colspan="2" | &nbsp;
| colspan="2" | Make the caption text italicised&nbsp;
|-
|-
| width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
| width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
| width="90%" | Underline
| width="90%" | Underline
|-
|-
| colspan="2" | &nbsp;
| colspan="2" | Make the caption text underlined&nbsp;
|-
|-
| width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
| width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
| width="90%" | Strikethrough
| width="90%" | Strikethrough
|-
|-
| colspan="2" | &nbsp;
| 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 144: Line 200:
| colspan="2" | Specifies the background colour value&nbsp;
| 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
|-
|-
|-
|-
Line 151: Line 207:
| width="90%" | Custom Attributes
| width="90%" | Custom Attributes
|-
|-
| colspan="2" | &nbsp;
| colspan="2" | Text here will be added to the html tag of this component to allow advanced customisation&nbsp;
|}
|}
==Component Source Code==
Please click here to download the component source project: [https://www.flowcode.co.uk/wiki/componentsource/FC_Comp_Source_WEBEXP_ComboBox.fcsx FC_Comp_Source_WEBEXP_ComboBox.fcsx]
Please click here to view the component source code (Beta): [https://www.flowcode.co.uk/FlowchartView/?wfile=componentsource/FC_Comp_Source_WEBEXP_ComboBox.fcsx FC_Comp_Source_WEBEXP_ComboBox.fcsx]

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

Retrieved from "https://www.flowcode.co.uk/wiki/index.php?title=Component:_Combo_Box_(_Control)&oldid=48201"