Edit Record Page

This example shows a series of fields as text boxes and allows the application user to edit and save the record.  An HTML layout page is created with one FieldValue code generation tag for each database field to be displayed.  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 save the record and how the Cancel button is configured to go back to the previous screen.

Description

Attribute

Description

Layout Page File

EditRecord.html

Properties File

EditRecord.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.  Specify the editable property for a code generation tag in the Page Properties dialog.  You also need to set the button tag’s properties to save the record data 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:  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 we cannot change the ID of a record during editing.

Step 2:  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

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.

Step 3:  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 4:  Build the application.

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

http://localhost/Tutorial/Tutorial%20Pages/EditRecord.aspx?Product=1

Product is the query string parameter and the value 1 is the primary key value of the specific Product record to be selected and displayed.