Tutorial 4: How to build a combobox

This tutorial explains how to build a combo box in a Formspider Application. It continues from the Employees application built in the “Tutorial3: How to show a dialog“.

In this tutorial, you will add a combo box to the “singleEmpPanel” to display/edit the department the employee works for.

Open the “Employees” application in Formspider IDE.

The Model

In this step you are going to create the Datasource Defintion (DSD) and the Datasource, the combo box needs to list the available departments.

Expand the Datasource Definition accordion Panel, select the Datasource Definitions node in the Navigation Tree and click the “+” button in the accoridon Panel menu. Alternatively, you may right click the Datasource Definitions node and select the “New” menu item in the popup menu. The New Datasource Definition Dialog shows up. Enter “DEPARTMENTS” as the name. Since this DSD is going be used in a combo box and nowhere else in this application, it does not need to commit its changes to the Database. Therefore, select the Query radio button from the Based On section. Note that the “DML Permissions” checkboxes are disabled. Ensure that the “Create Datasource” check box is checked.

Creating a new DSD.

Click the Query node from the Navigation tree on the left. Enter the Query below as the SQL Statement to retrieve the list of Departments.

SELECT department_id, department_name FROM departments

Expand the Columns node in the Navigation Tree and note that the Formspider IDE detected the column names in your query and automatically added them to Navigation Tree. Click OK to create the “DEPARTMENTS” DSD and “DEPARTMENTS1″ Datasource.

Formspider IDE automatically detects column names in your query.

The User Interface

Open the “singleEmpPanel” for editing. Add a combobox to the panel that is bound to the “DEPARTMENT_ID” column of the “EMPLOYEES1″ Datasource. Assign “DEPARTMENTS1″ as thelistDataSource, the Datasource that the combobox will show its options from. Choose “DEPARTMENT_ID” as the valueColumns and the “DEPARTMANT_NAME” as the displayColumn, so that the combobox shows the department names but stores the “Department ID”.

<panel>
  <tableLayout>
    <row>
      <cell width="30%">
        <textLabel label="First Name: " text-align="Right"/>
      </cell>
      <cell childWidth="180">
        <textField column="FIRST_NAME" dataSource="EMPLOYEES1"/>
      </cell>
    </row>
    <row>
      <cell>
        <textLabel label="Last Name: " text-align="Right"/>
      </cell>
      <cell childWidth="180">
        <textField column="LAST_NAME" dataSource="EMPLOYEES1"/>
      </cell>
    </row>
    <row>
      <cell>
        <textLabel label="Salary: " text-align="Right"/>
      </cell>
      <cell childWidth="180">
        <textField column="SALARY" dataSource="EMPLOYEES1"/>
      </cell>
    </row>
    <row>
      <cell>
        <textLabel label="Email: " text-align="Right"/>
      </cell>
      <cell childWidth="180">
        <textField column="EMAIL" dataSource="EMPLOYEES1"/>
      </cell>
    </row>
    <row>
      <cell>
        <textLabel label="Department: " text-align="Right"/>
      </cell>
      <cell childWidth="180">
        <comboBox displayColumn="DEPARTMENT_NAME" valueColumn="DEPARTMENT_ID" column="DEPARTMENT_ID" dataSource="EMPLOYEES1" listDataSource="DEPARTMENTS1"/>
      </cell>
    </row>
  </tableLayout>
</panel>

Click the “Save” button to commit your changes. Run the application. Double click an employee and open the Dialog. Note that the combobox shows the department the employee is assigned to.

Created Application is running.