Main page

Search Form with a Multi-Select Listbox

Description

This example shows how use a multi-select ListBox in a search form.

Usage

For search:

  1. Optionally enter an employee's name (can be partial).
  2. Select one or more projects in the multi-select Listbox by holding the CTRL key when selecting individual projects.
  3. Click "Search" to view the search results.

Steps to recreate

  1. Use the Grid Builder to create the employees grid as well as the search form which can search against the emp_name and title fields.
    On Step 3 click on the "Advanced" button and select the "Create a single search field and use OR condition" in the "Advansed Search window"
  2. Insert a new row into the search form and move it below the row with the s_keyword control (ALT + arrow-down). Then add a ListBox called s_project into the right cell of the new row.
  3. Under the Format tab of the Properties window, activate the 'multiple' property of the s_project ListBox and set its "Size" property to 3.
  4. Switch to HTML mode and locate the code for the s_project ListBox then delete the <option> tag for the default 'Select Value' option (i.e. <option value="" selected>Select Value</option>).
  5. For the s_project ListBox, set the Connection property to IntranetDB  and select projects in the Data Source property. Select project_id in the Bound Column property, project_name in the Text Column Property and Integer in the Data Type property.
  6. Open the 'Data Source' window by clicking on the [...] button next to the Data Source property of the grid form, then select 'SQL' in the "Data Source Type" field.
    Add the 's_project' URL parameter to the grid's data source with "0" as a Default Value.
    Then modify the SQL statement in the Data Source property by adding the "IN" statement as shown in the example.
  7. Make cosmetic changes as needed, by modifying the text and captions within the HTML.

Database Tables used

Database: Intranet

Tables: projects, employees, projects_employees

Programming Notes

This example doesn't require events.