Search and Display a Single Record

This example shows how to implement a search control on a table and set it to search for specific fields from a table.  The searchable fields do not have to be displayed on the screen.  This example also shows how a search text control can be linked to a search button through and how the control must also be linked to the table.

One of the key concepts shown in this example is to display only one record as a result of the search.  This is useful if you have unique fields that are being searched.  For example, you can create a page which displays a single invoice based on the invoice number.

Description

Generated Page

Layout Page File

 

     <div align="center" style="font-family:Verdana; font-size:10px">

          Search Product:

          <GEN:SearchFilter Name="SearchTextBox" />&nbsp;&nbsp;

          <GEN:PushButton Name="Search" />

          <GEN:Table Name="Product">

          <table cellpadding="5" style="border-collapse: collapse" border="1" bordercolorlight="#C0C0C0"

                        bordercolordark="#C0C0C0">

              <GEN:ItemTemplate>

              <tr style="font-family:Verdana; font-size:10px">

                   <td align="right">Product Id:</td>

                   <td style="font-weight: bold">

                        <GEN:FieldValue Name="ProductId" />

                   </td>

              </tr>

              <tr style="font-family:Verdana; font-size:10px">

                   <td align="right">Product Name:</td>

                   <td style="font-weight: bold">

                        <GEN:FieldValue Name="ProductName" />

                   </td>

              </tr>

              <tr style="font-family:Verdana; font-size:10px">

                   <td align="right">Unit Price:</td>

                   <td style="font-weight: bold">

                        <GEN:FieldValue Name="UnitPrice" />

                   </td>

              </tr>

              <tr style="font-family:Verdana; font-size:10px">

                   <td align="right">Units in Stock:</td>

                   <td style="font-weight: bold">

                        <GEN:FieldValue Name="UnitsInStock" />

                   </td>

              </tr>

              </GEN:ItemTemplate>

          </table>

          </GEN:Table>

     </div>

Procedure

This example uses a GEN:Table tag and displays the first record that matches the search criteria.  A later example will show how to add Next and Previous buttons to page through multiple records.

Step 1:  Set the Default Table Size property for the Products table to display only one record instead of the default size of 20.

Step 2:  Hook up the search button and search text box to inform the table control when the button is clicked.  In the Page Properties dialog, select the Search control and go to the Bindings tab.  Select SearchTextBox as the control to hook up.

Step 3:  Build and run the application.