Tutorial 5: How to show data from a table

This tutorial explains how to show rows from a database table in a Formspider Application. You will build an application called “Regions” which will display all the rows in the “HR.Regions” table in a Formspider Grid Component.

Open the Formspider IDE and enter your user name and password (“admin”/”admin” is the default user created with every Formspider local installation. To log on to Formspider Online use the email and password you provided during sign up). Click “New Application” under “File” menu from the menu bar. The New Application Dialog will show up. Enter “Regions” as the application name. Enter “HR” as the Datasource Schema Name. Leave values in the other fields unchanged. Click OK to save your changes.

Creating Regions Application.

Formspider IDE creates and opens the “Regions” application for editing. Please note that Formspider IDE already created the “mainFrame” of the application and placed a Panel named “mainPanel” inside it for your convenience.

As the first step, you will create a DataSource Definition (DSD) which will help the application query rows from the “HR.Regions” table. To achieve this, expand the Datasource Definitions accordion Panel, select the Datasource Definition root node and click the “+” button from the toolbar of the accordion Panel. Alternatively, you may right click the Datasource Definitions root node in the Navigation Tree and click the “New” menu item from the pop up menu that is displayed.

Creating a new DSD.

Creating a new DSD.

The Datasource Definition Dialog will show up.

Creating Regions DSD.

Make sure that the Table radio button at the upper right corner of the Dialog is selected and pick the “Regions” table from the list of tables in the combo-box. Note that the Datasource Definiton Nameautomatically changed to “REGIONS” for your convenience. Also note that the “REGION_ID” column is automatically assigned as the Primary KeyA Primary Key must be selected for a DSD to be updatable. Ensure that the “Create Datasource” checkbox is ticked. Selecting this option will automatically create a Datasource based on the “REGIONS” DSD and name it “REGIONS1″. Click OK to complete the creation of the “REGIONS” DSD.

Note the “REGIONS” DSD node and the “REGIONS1″ Datasource node under it in the Navigation Tree.

Regions DSD is displayed in DSD Tree

Expand the Panels node in the “Containers” tree and double click the “mainPanel” to open it in the Editor.

mainPanel of the Regions Application.

You will use borderLayout to place the grid component to the “mainPanel”. To achieve this, enter <borderLayout></borderLayout> tags inside the <panel></panel> tags. Next, create a cell inside theborderLayout which is docked to the “Center”. When you are done, the “mainPanel” XML should look like this:

<panel>
  <borderLayout>
    <cell docking="Center">
  </borderLayout>
</panel>

As the next step, place a grid component inside the borderCell and select “REGIONS1″ as its datasource.

<grid dataSource="REGIONS1"></grid>

When you are all done, the panel XML should look like as shown below:

<panel>
  <borderLayout>
    <cell docking="Center">
      <grid dataSource="REGIONS1"/>
    </cell>
  </borderLayout>
</panel>

Click the “Save All” button in the Formspider IDE toolbar.

Save All button in the Formspider IDE toolbar.

Adding Columns to the Grid

Add a column to the grid with the label “ID”. Then add a textLabel inside the column tag. Bind thetextLabel to the “REGION_ID” column of the “REGIONS1″ datasource. Please note that a textLabel in a Grid automatically binds to the datasource of the Grid and only needs the column information. At this point the “mainPanel” XML in the Editor should look like below:

<panel>
  <borderLayout>
    <cell docking="Center">
      <grid dataSource="REGIONS1">
        <column headerLabel="ID">
          <textLabel column="REGION_ID"/>
        </column>
      </grid>
    </cell>
  </borderLayout>
</panel>

Add another column to the grid and label it “Name”. Then add a textField inside new grid column. Bind the textField to the “REGION_NAME” column of the “REGIONS1″ datasource. The final XML of the “mainPanel” is below:

<panel>
  <borderLayout>
    <cell docking="Center">
      <grid dataSource="REGIONS1">
        <column headerLabel="ID">
          <textLabel column="REGION_ID"/>
        </column>
        <column headerLabel="Name">
          <textField column="REGION_NAME"/>
        </column>
      </grid>
    </cell>
  </borderLayout>
</panel>

Click the “Save” button. Run the application. Note that the region names are editable because they are displayed by a textField but the region ID’s are not. This application cannot save your changes yet because it is missing the “Save” button. But that’s the topic of another tutorial.

Regions Application is running.