Display a Master-Detail Page

This example shows how you can easily create master-details pages.  The detail portion of the page is limited to displaying records belonging to the master portion.  This example also shows how you can utilize the ID of the record from the parent record instead of getting it from a URL as in earlier examples.

Description

Attribute

Description

Layout Page File

MasterDetailPage.html

Properties File

MasterDetailPage.xml

Code Generation Tags Used

GEN:Table within a GEN:Record
Generated Page

Layout Page File

 

     <div align="center">

           <GEN:Record Name="Order">

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

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

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

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

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

                        <GEN:FieldValue Name="OrderId" />

                   </td>

              </tr>

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

                   <td align="right">Order Date:</td>

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

                        <GEN:FieldValue Name="OrderDate" />

                   </td>

              </tr>

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

                   <td align="right">Freight:</td>

                   <td>

                        <GEN:FieldValue Name="Freight" />

                   </td>

              </tr>

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

                   <td align="right">Shipping Address:</td>

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

                        <GEN:FieldValue Name="ShipName" /><br />

                        <GEN:FieldValue Name="ShipAddress" /><br />

                        <GEN:FieldValue Name="ShipCity" />,&nbsp;

                        <GEN:FieldValue Name="ShipRegion" />&nbsp;

                        <GEN:FieldValue Name="ShipPostalCode" /><br />

                        <GEN:FieldValue Name="ShipCountry" /></td>

              </tr>

          </table>&#160;

          <GEN:Table Name="OrderDetails">

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

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

              <GEN:HeaderTemplate>

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

                   <td align="center">Product Id</td>

                   <td align="center">Unit Price</td>

                   <td align="center">Quantity</td>

                   <td align="center">Discount</td>

              </tr>

              </GEN:HeaderTemplate>

              <GEN:ItemTemplate>

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

                   <td>

                        <GEN:FieldValue Name="ProductId" />

                   </td>

                   <td align="right">

                        <GEN:FieldValue Name="UnitPrice" />

                   </td>

                   <td align="right">

                        <GEN:FieldValue Name="Quantity" />

                   </td>

                   <td align="right">

                        <GEN:FieldValue Name="Discount" />

                   </td>

              </tr>

              </GEN:ItemTemplate>

          </table>

          </GEN:Table>

          </GEN:Record>

     </div>

Procedure

The GEN:Table tag is used within the GEN:Record tag.

Step 1:  Set the data source properties for the OrderDetails tag.

Tag Property

Setting

Code generation tag

OrderDetails

Table, view or query

OrderDetails

WHERE Clause

(Foreign key relationship)

Orders.OrderID = Order_Details.OrderID

This specifies the foreign key relationship from the Order Details table to the Order table.  (FK_Order_Details_Order is the foreign key relationship.)

Step 2:  Build and run the application.