Blog: Posts from September, 2012

Let’s customize the forms on the Order Manager page.

Floating Category Data Fields

When a customer is selected, the data item is displayed in the form view editForm1. The form data fields are rendered top-down.

Let’s have the data fields displayed in a more compact fashion.

Switch back to the Project Designer. On the Pages tab of Project Explorer, double-click on Order Manager / c101 / view1 / editForm1 / c1 – Customers category node.

Change the Float property:

Press OK to save the category. Right-click on Order Manager page node, and press View in Browser.

The data fields in Customers form view float from left to right and wrap when they reach the right side of the browser window which makes for a more compact presentation. If the browser window is resized, the form will resize as well.

Configuring a Multi-Column Form

The picture below shows editForm1 view of Orders data controller. Let’s use categories to organize the data fields in multiple columns.

In the Project Explorer, right-click on Order Manager / c102 / view2 / editForm1 view node. Select New Category context menu option.

Assign the following properties:

Press OK to save the category.

In the Project Explorer, expand Order Manager / c102 / view2 / editForm1 / c1 – Orders category node. Select all data fields that start with “Ship-”. Drag the data fields onto c2 – Shipping Info category node.

Right-click on Order Manager page node and select View in Browser.

Data fields on the Orders form will be split in two columns.

Custom Category Template

The Order Details layout of editForm1 view created by the application generator is shown below.

Let’s create a custom layout for the first category in Order Details form. In the Project Explorer, right-click on Order Manager / c103 container node, and select New Control.

Next to the User Control property lookup, activate the New User Control icon.

Assign a name to the user control.

Press OK to insert the new user control into the User Control property, and press OK again to save the control.

On the Project Designer toolbar, press Generate. When complete, right-click on Order Manager / c103 / control1 node, and press Edit in Visual Studio.

The template file will open in Visual Studio. On the menu, select Edit | Advanced | Format Document. Replace everything after the <%@ Control %>  element with the following:

<div style="display: none;">
    <div id="OrderDetails_editForm1_c1">
        <table>
            <tr>
                <td style="padding-right: 36px;font-weight:bold;">Product:</td>
                <td style="padding-right: 18px;">
                    <span class="FieldPlaceholder DataOnly">{ProductID}</span>
                </td>
                <td style="padding-right: 18px;">Discount:</td>
                <td>
                    <span class="FieldPlaceholder DataOnly">{Discount}</span>
                </td>
            </tr>
            <tr>
                <td>Unit Price:</td>
                <td>
                    <span class="FieldPlaceholder DataOnly">{UnitPrice}</span>
                </td>
                <td>Quantity:</td>
                <td>
                    <span class="FieldPlaceholder DataOnly">{Quantity}</span>
                </td>
            </tr>
        </table>
    </div>
</div>

Save the file.

Refresh the web browser page and select a customer, order, and order detail data rows. The first category of editForm1 view of Order Details data controller will be rendered using the new template.

The application generator composes this view of Customers from the database.

Let’s change some of the data fields presented in the view. For example, let’s move Phone data field next to Contact Name, remove the Region data field, and add Fax to the view.

Moving

Switch to the Project Designer. In the Project Explorer, activate the Controllers tab and expand to Customers / Views / grid1 data view node. Drag Phone data field and drop it on the right side of ContactName data field to place it after the target.

Deleting

Right-click on Customers / Views / grid1 / Region data field node, and select Delete.

Adding

Expand Customers / Fields node. Drag Fax field node onto Customers / Views / grid1 node to create a data field from the Fax field.

Switch to the Pages tab in the Project Explorer. Right-click on Order Manager page node, and press View in Browser.

The Customers grid with new column layout will be displayed. The Phone field is more conveniently placed next to the Contact Name. The Region field has been removed. Fax has been added.