Tutorial 3: How to show a dialog

This tutorial explains how to open a Dialog Window. It continues from the “Employees” application that is built in “Tutorial2: How to build a search form“.

If you are using the local installation of Formspider, the “Employee” application displays all employees in the “HR.EMPLOYEES” table based on filter criteria. If you are using Formspider Online, it displays the employees in the EMPLOYEE table of your Formspider Online Schema. However, it only shows the “First Name” and the “Last Name” columns. The “EMPLOYEE” table has other columns that are of interest. In this example, you will add a Dialog to the “Employees” application that will show additional columns for a selected “Employee” row.

The User Interface

For the UI, you will create a panel that displays the “FIRST_NAME”, “LAST_NAME”, “SALARY” and the “PHONE_NUMBER” columns for a selected employee and a Dialog that will display this Panel.

Open the “Employee” Application in Formspider IDE.

Expand the Containers accordion panel. In the Navigation Tree, click the Panels node and click the “+” button. Alternatively, you may right click the Panels node and select the “New” menu item from the pop up menu. The New Panel Dialog will show up. Enter “singleEmpPanel” as the name of the Panel and click OK. Formspider IDE creates the Panel and opens it for editing. Using the tableLayout add four textfields to the Panel and bind them to the corresponding Columns in the “EMPLOYEES1″Datasource.

<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>
  </tableLayout>
</panel>

Next, Expand Windows node in the Containers Nagivation Tree and select the Dialogs node. Click the “+” button to create a new Dialog. Alternatively, you may right click the Dialogs node and select “New” from the pop up menu. The “New Dialog” Dialog will show up. Enter “singleEmpDialog” as the name of the Dialog. Specify a width of “300″, a height of “200″ and click OK. Formspider IDE creates the Dialog and opens it in the Editor for editing.

Creating a new dialog.

Include the “singleEmpPanel” panel to the “singleEmpDialog” dialog.

<dialog width="300" height="200">
  <borderLayout>
    <cell docking="Center">
      <include panelName="singleEmpPanel"/>
    </cell>
  </borderLayout>
</dialog>

Click the Save button to commit your changes.

The Code

In order to display the Dialog for the selected “Empoyee” in the Grid, you will add a double click event to the Grid. In this event, you will call an action which will display the new Dialog on the screen.

To write the PL/SQL code this action will execute, open the “employees_pkg” package that we created in the previous tutorial in your favorite PL/SQL Editor. Add a new procedure called “showSingleEmpDialog” that displays the “singleEmpDialog” on the screen to the package. Expose the procedure in the package specification.

procedure showSingleEmpDialog is
begin
  api_dialog.setVisible('singleEmpDialog','Y');
end;

In Formspider IDE, create a new Action named “showSingleEmpDialog” and associate it to the “employees_pkg.showSingleEmpDialog” procedure. Open the “mainPanel” in the Editor and add a double click event to the Grid component that calls the “showSingleEmpDialog” Action.

<panel>
  <borderLayout>
    <cell docking="North" height="40">
      <include panelName="searchPanel"/>
    </cell>
    <cell docking="Center">
      <grid dataSource="EMPLOYEES1">
        <events>
          <doubleClick action="showSingleEmpDialog"/>
        </events>
        <column headerLabel="First Name">
          <textLabel column="FIRST_NAME"/>
        </column>
        <column headerLabel="Last Name">
          <textLabel column="LAST_NAME"/>
        </column>
      </grid>
    </cell>
  </borderLayout>
</panel>

Click the “Save” button to commit your changes. Run the application. Double click to an employee row in the grid. Note that the Dialog shows up showing the details of the row you double clicked.

What’s just happened?

The Grid in the “Employees” application is bound to the “EMPLOYEE1″ Datasource. Clicking any row in the Grid automatically updates the current row indicator of the bound datasource to the Grid’s selected row. The components in the dialog are also bound to the columns in the “EMPLOYEE1″ Datasource. In Formspider Framework, a single value component (such as a text field) automatically shows the value of the column it points to in the current row of a Datasource. Therefore, no extra coding is needed to display the desired data in the “singleEmpDialog”.

Created Application is running.

  • fshimabukuro

    this example is really nice, although I think it doesn’t explain how to populate the dialog, once you double click on the selected row from the field, am I right?

    • fshimabukuro

      forget my last comment, once you link the textfield to a column from the datasource, it automatically fills it with the double clicked row.