Add Record Page

This example shows a series of fields as text boxes and allows the application user to add a new record to the database.  An HTML layout page is created with one FieldValue code generation tag for each database field to be added.  This example illustrates:

  1. How different FieldValue tags can display text boxes for the application user to enter the data.

  2. How the OK button is set to add the record and how the Cancel button is set to go back to the previous screen.

Description

Attribute

Description

Layout Page File

AddRecord.html

Properties File

AddRecord.xml

Code Generation Tags Used

GEN:Record and GEN:FieldValue
Generated Page

Layout Page File

Note: The layout page file for displaying or editing a record is the same.  Set the editable property in the Page Properties dialog.  You also need to set the button tag’s properties to save the data record when clicked.

 
     <div align="center">

          <GEN:Record Name="Product">

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

                        bordercolorlight="#C0C0C0" bordercolordark="#C0C0C0">

              <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>

          </table>

          </GEN:Record>&nbsp;

          <GEN:PushButton Name="OK"/>&nbsp;

          <GEN:PushButton Name="Cancel"/>

     </div>

Procedure

Step 1:  Specify the Data Source for the Record tag as Add new record to database.  Select the Products table to indicate that a product will be added.

Step 2:  Set the display style property of the editable fields to Text Box.

Tag Property

Setting

Code generation tags

ProductName
UnitsInStock
UnitPrice

Display Style

Text Box

Note that the Product ID field will continue to be specified as a Literal because the ID will automatically be assigned by the database.

Step 3:  Set the OK button’s properties.

Tag Property

Setting

Code generation tag

OK

Button Text

OK  (Or something else you prefer such as “Save”.)

Validate page data

True  (if validation is necessary on the fields shown on the page)

Button Command

Save data on page

This indicates to the application that data must be added or updated in the database.

URL

URL of the page you want to go upon success.  If validation is required and successful, the application user will be sent to this URL after the data is updated or added into the database.

URL Parameters

 

Step 4:  Set the Cancel button’s properties.

Tag Property

Setting

Code generation tag

Cancel

Button Text

Cancel

Validate page data

False

We do not any validation performed upon cancellation.

Button Command

Refresh page

URL

URL of the page you wish to return to if the user presses this button.

URL Parameters

 

Step 5:  Build the application.

Step 6:  Open a new browser and enter this URL to display the page:

http://localhost/Tutorial/Tutorial%20Pages/AddRecord.aspx