You want to have a Combo Box drop-down show a Table of data and have a selected column from that data appear in the combo after selection. The Table could be filled with data from a CSV file or the result of a Query.
GUI Design Studio already supports the functionality for showing anything you like in a Combo Box drop-down. That's why the drop-down has always been a separate entity from the Combo Box element itself.
Create the CSV data file
You don't need to use CSV data but there are advantages for future development of a prototype over putting the data directly into a Table. If you have the Express edition, you'll have to skip this part and put the data directly into the Table.
(1) From the Data panel, select the New Data Table command button and give the CSV file a name, e.g. "Planets".
(2) In the CSV editor, right-click the column headings and select "Rename Field" to change their names. You can also insert and remove columns:
(3) Fill in the data then right-click the first "id" column and select "Fill ID Field Values" to automatically fill them with sequential values:
(4) Save the completed data table. As it happens, the "Order" column in this example matches the "id" but that is purely coincidental:
Create the Design
This is going to be a very simple design just to demonstrate the principle.
(1) From the Project panel, create a New Design file:
(2) Add a background element (e.g. Dialog) and some basic controls, including a Combo Box:
(3) Add a Table element off to the side and edit the Column properties. Check the "Use database Table" option and select the appropriate table (e.g. "Planets") from the drop-down. Then click "Fetch Columns" to obtain all the fields:
(4) Select the fetched "id" column and "Delete" it since we don't want it appearing in our table drop-down:
(5) On the Data tab, click "Fetch Top Records" then adjust the column widths, as required. Note, at runtime the data will always be fetched from the current database (CSV) content; fetching the top records is just to fill the Table with some meaningful data to help with the design process:
(6) Hit "OK" to accept the property changes then connect the Combo Box to the Table element. Ensure the connection type is "Modal Choice Popup" (this should be the automatic default for Combo Box connections):
Test the Design
(1) Hit F9 to run the design to test it out:
(2) You'll notice, when you select a row from the drop-down, it will close, due to the Modal Choice Popup navigation, but the value in the combo box is not quite what we expect:
Fix the Selection Value
(1) Back on the design, edit the Columns properties for the Table again. This time, change the "Selection Value Column" from the default of "(Row Index)" to an appropriate data field from the drop-down. This decides what 'value' represents the selected Table row:
(2) Now run the design again and check the return value to the Combo Box:
The complete project for this example can be found attached below: