1. Outline
A combo box is a control that can return a predefined value or invoke a predefined action by selecting from a list of choices.
In the following, we will use the term "2. Development GuidanceYou can download sample programs for frequently used functions in the combo box at3. Parameterssection provides a reference to the parameters to be set in the combo box.
2. Development Guidance
This article introduces parameter settings that are commonly used to familiarize you with combo boxes. The sample projects used in the explanation can be downloaded from the following links.
2-1. Set choices manually
This will be a combo box to manually set up a list of choices.
Since there is no need to prepare a DB, it can be used easily.
2-1-1. Place a combo box and set up a list
Select "Combo" from the control bar and drag it on the screen to position the combo box.
With the combo box selected, select "Data" "List" in the Properties area, then "Value Input". Next, in the "Value Input" field, enter the content you wish to display in the list, with line breaks as shown in the figure below.
If you tick the Insert blank line at the top, a blank choice will appear at the top of the list of choices.
If you wish to reset your selection from the list, you can return it to the unselected state again by selecting the leading blank.
2-1-2. Display the contents of the selected list
If the choices are set manually, what is displayed in the value selection = the result of the selection.
In addition, the display of the contents can be changed in the format as follows
With the combo box selected, go to "Data" "Contents" in the Properties area and set "Format" to "0,000" with a comma for the currency display.
The display in the combo box is delimited by digits.
2-1-3. Change the design
With the combo box selected, you can change the combo box design from "Design" "Color and Shape" in the Properties area.
The color specified in "Border/Border" under "Normal" becomes the border color of the combo box, and the color specified in "Font" under "Normal" becomes the color of the text in the combo box. You can also adjust the "roundness" to round or eliminate rounded corners of the combo box.
2-2. Linking Combo Boxes and Databases
By linking a combo box to a table, the values in the list can be retrieved from the table rather than entered manually.
It is also possible to search a table using the result of a selection in a combo box as a key and display the information stored in the table in other controls such as labels as shown below.
2-2-1. Creating Tables
First, create a new table from the DB design screen in order to create a table to link to the combo box. In the sample project. It is created as "tbl_ItemManager".
Register "Item Name", "Physical Item Name" and "Type" in "Design" of the created table, respectively, in the following manner.
In addition, since data increase/decrease shall not be performed in this project, set the following for "Initial Data" and check the Initialize on Startup checkbox.
This will automatically populate the table with initial data when the application is launched.
2-2-2. Tie a table to a list in a combo box
With the combo box selected, set the following properties
Select "Table" from "Data" "List" and set the item names set in 2-2-1 as "Table Name," "Key Filled Name," and "Value Field Name" as follows.
At this stage, the combo box choices can be retrieved from the table.
2-2-3. Logic to display details in a text box
The process then creates a text box that displays data related to the content selected in the combo box.
Create a new process from the process design screen and create logic as follows The sample project is created as "010_Filter by selected combo".
Receives the selection made in the combo box (key field name) in #1, and narrows the search for "tbl_ItemManager" by the values received in #2 and #3.
The logic in #4-6 is to display the search results in each of the three text boxes.
By setting the created process as the combo box execution process, the process will be executed when the combo box is selected.
2-2-4. Design Settings
With the combo box selected, you can change the combo box design from "Design" "Color and Shape" in the Properties area.
The information described in 2-1-3 is omitted.
The gradient can be set by selecting "Gradient" from the color palette.
To set a background image, please go to "Design" "Image".
3. Parameters
By changing the parameters, you can easily set the position and size of the combo box, its color and shape, and the image to be displayed, so let's take advantage of them to create a well-designed, easy-to-understand screen.
In addition, by setting up actions to be invoked during screen operations, you can make the app perform various actions when the app user touches or clicks on the combo box.
object
Basic Information
| name | Enter a control name. For example, if you want the combo box to have behavior from the processing logic, Specify a combo box with this name. The default is "combo + sequential numbers". |
|---|---|
| pop-up Title. |
Specifies the title of the combo list. If the popup title is blank, the name of the control is It appears in the title of the combo list. |
| Size | Specify the width and height of the control. |
| position | Specify the position of the control from the left and from the top. |
| margin | Specify the margins of the control from left, right, top and bottom. |
| type | Displays the type of control. |
| style | By selecting a pre-defined definition, various properties such as color, border, etc. can be set. Can be set up in batches. |
operation setup
| executable process | Select this option if there is an execution process. |
|---|---|
| long press (of button, esp. mobile phones) | Select this option when there is a long-press process. |
| pushdown processing | Select this option when there is processing at the moment of pressing. |
| At picker/tap Complete your selection (iOS only) |
Select this option if you want to complete the selection when you tap the picker. |
possibility
| available | Check this box if you want to make the control available. |
|---|---|
| display | Check this box if you want to display the control. |
data
Contents
value entry
Select to enter the value to be displayed in the combo box.
| character | Enter the contents of the display. |
|---|---|
| blank form | Enter the display format. |
form
Select this option if you want to use the table specified in the form as the destination for the values displayed in the combo box.
| Field Name | Select the field from which to retrieve the display content. |
|---|---|
| blank form | Enter the display format. |
| available | When a combo box is placed in a subform list, Select the fields from which to obtain the availability settings for each row. |
| display | When a combo box is placed in a subform list, Select the field from which to obtain the display settings for each row. |
| foreground | When a combo box is placed in a subform list, Select the field from which to obtain the foreground color setting for each row. |
| background color | When a combo box is placed in a subform list, Select the field from which to obtain the background color setting for each row. |
table
Select this option if you want to use a table as the destination for the values displayed in the combo box.
| table name | Select the table from which to retrieve the display content. |
|---|---|
| Field Name | Select the field from which to retrieve the display content. |
| blank form | Enter the display format. |
| available | When a combo box is placed in a subform list, Select the fields from which to obtain the availability settings for each row. |
| display | When a combo box is placed in a subform list, Select the field from which to retrieve the display settings for each row. |
| foreground | When a combo box is placed in a subform list, Select the field from which to obtain the foreground color setting for each row. |
| background color | When a combo box is placed in a subform list, Select the field from which to obtain the background color setting for each row. |
list
value entry
Select to enter values to be displayed in the combo list.
| character | Enter the contents of the display. |
|---|---|
| Number of display lists | Specify the number of listings to display. |
| Insert blank line at the beginning | Check this box if you wish to insert a leading blank line. |
table
Select this option if you want to use a table as the destination for the values displayed in the combo list.
| table name | Select the table from which the combo list is to be retrieved. |
|---|---|
| key field name | Select the key field from which the combo list is to be retrieved. |
| Value Field Name | Select the value field from which the combo list is to be retrieved. |
| Number of display lists | Specify the number of listings to display. |
| Insert blank line at the beginning | Check this box if you wish to insert a leading blank line. |
design
Color and Shape
| font | Specify the font. |
|---|---|
| Size | Specifies the font size. |
| bold-type | Check this box if you want to bold text. |
| image | Check this box if you want to add shadows to the text. |
| underline | Select the underline for the text from [None], [Underline], or [Double Underline]. |
| stroke-count line | Check this box if you want to put a strikeout on the text. |
| by return | Check this box if you want the text to wrap around. |
| Shrink to Fit | When the content does not fit within the control, the font size will be automatically adjusted to fit the content inside. |
| vertical alignment | Select the character position of the displayed content from [Align Top], [Align Center Top and Bottom], or [Align Bottom]. Selection. |
| horizontal arrangement | Select the character position of the displayed content from [Align Left], [Align Left], [Align Center], or [Align Right]. Selection. |
| normal font | Specifies the foreground color. |
| Normal Fill | Specifies the background color. |
| Normal ruled/box lines | Specifies the color of the ruled and framed lines. |
| button font | Specifies the foreground color of the pull-down button. |
| button filling | Specifies the background color of the pull-down button. |
| unavailable font | Specifies the foreground color when disabled. |
| unavailable fill | Specifies the background color when disabled. |
| Unavailable ruled lines/frames | Specifies the color of the ruled and bordered lines when disabled. |
| line thickness | Specifies the thickness of the line. |
| roundness | Specify roundness. |
| thickness | Specify the thickness. |
Change image
Vertical/horizontal alignment of text (example)
|
|
|
|
Normal Fill Gradient (Example)
|
|
|
|
|
|
|
|
image
| Standard Image | Paste the image into the control. |
|---|---|
| Image Deletion | Clears the image from the control. |
| pressed image |
Paste the image at the time of the check into the control. To clear the set image, click the Delete Image button. |
| Invalid standard image | Paste the invalid time image into the control.
To clear the set image, click the Delete Image button. |
| invalid pressed image | Paste the image of the check state when invalid into the control.
To clear the set image, click the Delete Image button. |
| Image display position (vertical) | Select the display position of the image from [Align Top], [Align Center Top and Bottom], or [Align Bottom]. Selection. |
| Image display position (horizontal) | Select the display position of the image from [Align Left], [Align Left], [Align Center], or [Align Right]. Selection. |
| Single-sided fit | Resize the image to fit the control. None] [Inscribed fit] [Scribed fit] [Inscribed fit] [Horizontal/vertical fit Selection. |
Image display position (example)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ruled line
| top kind | Specifies the type of upper ruled line. |
|---|---|
| overglaze | Specifies the color of the upper border. |
| lower kinds | Specifies the type of lower border. |
| underglaze color | Specifies the color of the lower border. |
| left kind | Specifies the type of left border. |
| left-handedness | Specifies the color of the left border. |
| Right kind | Specifies the type of right border. |
| dark indigo (almost black) | Specifies the color of the right border. |
| Backslash type | Specify the type of backspace rule. |
| backslash | Specifies the color of the backslash border. |
| / Type | / Specify the type of ruled line. |
| /Color | / Specifies the color of the top border. |