Tutorials

Labels
AJAX(112) App Studio(6) Apple(1) Application Builder(245) Application Factory(207) ASP.NET(95) ASP.NET 3.5(45) ASP.NET Code Generator(72) ASP.NET Membership(28) Azure(18) Barcode(2) Barcodes(3) BLOB(18) Business Rules(1) Business Rules/Logic(140) BYOD(13) Caching(2) Calendar(5) Charts(29) Cloud(14) Cloud On Time(2) Cloud On Time for Windows 7(2) Code Generator(54) Collaboration(11) command line(1) Conflict Detection(1) Content Management System(12) COT Tools for Excel(26) CRUD(1) Custom Actions(1) Data Aquarium Framework(122) Data Sheet(9) Data Sources(22) Database Lookups(50) Deployment(22) Designer(177) Device(1) DotNetNuke(12) EASE(20) Email(6) Features(101) Firebird(1) Form Builder(14) Globalization and Localization(6) How To(1) Hypermedia(2) Inline Editing(1) Installation(5) JavaScript(20) Kiosk(1) Low Code(3) Mac(1) Many-To-Many(4) Maps(6) Master/Detail(36) Microservices(4) Mobile(63) Mode Builder(3) Model Builder(3) MySQL(10) Native Apps(5) News(18) OAuth(8) OAuth Scopes(1) OAuth2(11) Offline(20) Offline Apps(4) Offline Sync(5) Oracle(10) PKCE(2) PostgreSQL(2) PWA(2) QR codes(2) Rapid Application Development(5) Reading Pane(2) Release Notes(178) Reports(48) REST(29) RESTful(29) RESTful Workshop(15) RFID tags(1) SaaS(7) Security(80) SharePoint(12) SPA(6) SQL Anywhere(3) SQL Server(26) Stored Procedure(4) Teamwork(15) Tips and Tricks(87) Tools for Excel(2) Touch UI(93) Transactions(5) Tutorials(183) Universal Windows Platform(3) User Interface(338) Video Tutorial(37) Web 2.0(100) Web App Generator(101) Web Application Generator(607) Web Form Builder(40) Web.Config(9) Workflow(28)
Archive
Blog
Tutorials
Saturday, March 24, 2012PrintSubscribe
Custom Form Template: Creating Custom HTML Table Layout

Let’s create a custom HTML table layout that will use the field placeholders to position the data fields.

Below is the new, longer version of the template. The style element defines CSS rules .FieldLabel and .RightAlignedInputs. Several div and table elements organize the field references surrounded by curly brackets into a complex layout.

Make sure to paste the markup text below the Control instruction in the .ascx file. The Control instruction looks as follows:

<%@ Control Language . . . %>

Template for ~/Controls/OrderFormTemplate.ascx:

<style type="text/css">
    .FieldLabel
    {
        font-weight: bold;
        padding: 4px;
        width: 90px;
    }
    .RightAlignedInputs input
    {
        text-align: right;
    }
</style>
<div style="display:none">
    <div id="Orders_editForm1">
        <table style="width: 100%">
            <tr>
                <td valign="top">
                    <table>
                        <tr>
                            <td class="FieldLabel">
                                Customer:
                            </td>
                            <td>
                                <div class="FieldPlaceholder DataOnly">
                                    {CustomerID}</div>
                            </td>
                        </tr>
                        <tr>
                            <td class="FieldLabel">
                                Employee:
                            </td>
                            <td>
                                <div class="FieldPlaceholder DataOnly">
                                    {EmployeeID}</div>
                            </td>
                        </tr>
                        <tr>
                            <td class="FieldLabel">
                                Order Date:
                            </td>
                            <td>
                                <div class="FieldPlaceholder DataOnly">
                                    {OrderDate}</div>
                            </td>
                        </tr>
                        <tr>
                            <td class="FieldLabel">
                                Required Date:
                            </td>
                            <td>
                                <div class="FieldPlaceholder DataOnly">
                                    {RequiredDate}</div>
                            </td>
                        </tr>
                        <tr>
                            <td class="FieldLabel">
                                Shipped Date:
                            </td>
                            <td>
                                <div class="FieldPlaceholder DataOnly">
                                    {ShippedDate}</div>
                            </td>
                        </tr>
                    </table>
                </td>
                <td valign="top">
                    <table style="float: right" class="RightAlignedInputs">
                        <tr>
                            <td class="FieldLabel">
                                Address:
                            </td>
                            <td>
                                <div class="FieldPlaceholder DataOnly" style="float: right">
                                    {ShipAddress}</div>
                            </td>
                        </tr>
                        <tr>
                            <td class="FieldLabel">
                                City:
                            </td>
                            <td>
                                <div class="FieldPlaceholder DataOnly" style="float: right">
                                    {ShipCity}</div>
                            </td>
                        </tr>
                        <tr>
                            <td class="FieldLabel">
                                Region:
                            </td>
                            <td>
                                <div class="FieldPlaceholder DataOnly" style="float: right">
                                    {ShipRegion}</div>
                            </td>
                        </tr>
                        <tr>
                            <td class="FieldLabel">
                                Postal Code:
                            </td>
                            <td>
                                <div class="FieldPlaceholder DataOnly" style="float: right">
                                    {ShipPostalCode}</div>
                            </td>
                        </tr>
                        <tr>
                            <td class="FieldLabel">
                                Ship Country:
                            </td>
                            <td>
                                <div class="FieldPlaceholder DataOnly" style="float: right">
                                    {ShipCountry}</div>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    {dv101Extender}
                </td>
            </tr>
            <tr>
                <td valign="bottom">
                    <table>
                        <tr>
                            <td class="FieldLabel">
                                Ship Name:
                            </td>
                            <td>
                                <div class="FieldPlaceholder DataOnly">
                                    {ShipName}</div>
                            </td>
                        </tr>
                        <tr>
                            <td class="FieldLabel">
                                Ship Via:
                            </td>
                            <td>
                                <div class="FieldPlaceholder DataOnly">
                                    {ShipVia}</div>
                            </td>
                        </tr>
                    </table>
                </td>
                <td align="right">
                    <table style="margin-right: 4px;" class="RightAlignedInputs">
                        <tr>
                            <td class="FieldLabel">
                                Subtotal:
                            </td>
                            <td align="right">
                                <div class="FieldPlaceholder DataOnly" style="float: right">
                                    {Subtotal}</div>
                            </td>
                        </tr>
                        <tr>
                            <td class="FieldLabel">
                                Freight:
                            </td>
                            <td align="right">
                                <div class="FieldPlaceholder DataOnly " style="float: right">
                                    {Freight}</div>
                            </td>
                        </tr>
                        <tr>
                            <td class="FieldLabel">
                                Total:
                            </td>
                            <td>
                                <div class="FieldPlaceholder DataOnly" style="float: right">
                                    {Total}</div>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
</div>

From within Visual Studio, switch to Design View using the Design button in the bottom left corner. You can see that there is a text label next to each field placeholder. Visual tools can be used to rearrange the fields in the order of your preference.

Design view of the Custom HTML Table layout

One key element is {dv101Extender}, located in the center of the layout. This placeholder refers to Details View with ID of “dv101”, which shows Order Details.

Save the template file, and refresh the web application. Select an order, and you will see the new layout.

The new layout of Order Form using a Custom HTML Table Layout

The Customer, Employee, and Date fields are presented on the left side. Shipping Information is displayed on the right side.

The Details grid is automatically inserted in the next row of the template.

Ship Name and Ship Via are displayed in the bottom left.

Subtotal, Freight, and Total are in the bottom right, underneath the Extended Price row of Order Details.

If you edit the record, you can see that the fields are using the lengths specified previously. If you use the up and down arrows to move through Orders, you can see the order record and order details change.

New Custom HTML Table layout of Order Form in edit mode

If you have a lot of Order Detail records, you can sort and filter using the columns. You can also search for specific products with Quick Find. For more complex searches, you can use the advanced search bar. The Sum aggregate in the bottom Extended Price column shows a sum of the filtered rows, while Subtotal will be calculated for all rows that belong to the Order regardless of the filter.

New Custom HTML Table layout of Order Form with a filter applied to the Order Details

Users can activate the Data Sheet view mode to quickly enter line items using the keyboard.

Order Form with Order Details in Data Sheet View

Saturday, March 24, 2012PrintSubscribe
Custom Form Template: Defining Template Placeholder

Let’s customize the template that was generated.

Switch back to Visual Studio, and refresh the solution. Navigate to and open ~/Controls/OrderFormTemplate.ascx. On the menu bar, select Edit / Advanced / Format Document to reformat the automatically generated markup of the control. You will see that there is just an UpdatePanel element present.

Default UpdatePanel in 'OrderFormTemplate'

Delete the UpdatePanel element and replace it with the sample below.

C#:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="OrderFormTemplate.ascx.cs" 
    Inherits="Controls_OrderFormTemplate" %>
<div>
    <div id="Orders_editForm1">
        <div class="FieldPlaceholder">
            {CustomerID}
        </div>
        <div class="FieldPlaceholder">
            {EmployeeID}
        </div>
        <div class="FieldPlaceholder">
            {ShipVia}
        </div>
        <div class="FieldPlaceholder">
            {OrderDate}
        </div>
        <div class="FieldPlaceholder">
            {Freight}
        </div>
        <div class="FieldPlaceholder">
            {Total}
        </div>
    </div>
</div>

Visual Basic:

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="OrderFormTemplate.ascx.vb" 
    Inherits="Controls_OrderFormTemplate" %>
<div>
    <div id="Orders_editForm1">
        <div class="FieldPlaceholder">
            {CustomerID}
        </div>
        <div class="FieldPlaceholder">
            {EmployeeID}
        </div>
        <div class="FieldPlaceholder">
            {ShipVia}
        </div>
        <div class="FieldPlaceholder">
            {OrderDate}
        </div>
        <div class="FieldPlaceholder">
            {Freight}
        </div>
        <div class="FieldPlaceholder">
            {Total}
        </div>
    </div>
</div>

The top level div element has another div element with id “Orders_editForm1”. This element instructs the client-side library of the application to present the contents of editForm1, rendered by Orders data controller, using the template. There are several more div elements within Order_editForm1, marked with the CSS class “FieldPlaceholder”. The field names, surrounded by curly brackets, have been placed inside as placeholders.

If you save the file, and refresh the webpage of the application, then you will see the field names in brackets from the template appear above the order form view.

Order Form with custom template

To hide the field names in brackets, change the main div of the user control as follows:

<div style="display:none;">
    <div id="Orders_editForm1">
        <div class="FieldPlaceholder">
            {CustomerID}
        </div>
        <div class="FieldPlaceholder">
            {EmployeeID}
        </div>
        <div class="FieldPlaceholder">
            {ShipVia}
        </div>
        <div class="FieldPlaceholder">
            {OrderDate}
        </div>
        <div class="FieldPlaceholder">
            {Freight}
        </div>
        <div class="FieldPlaceholder">
            {Total}
        </div>
    </div>
</div>
You can see that no field names in brackets will appear, and that only the fields specified in the template are presented in the detail view listed from left to right.

Order Form with hidden custom template

Let’s make a more sophisticated design for the template, which includes the rest of the fields. In order
to build a completely custom template and retain the data functionality of the client side library, you
need to get rid of the labels. Switch back to Visual Studio, and add the class “DataOnly” to each field, as shown in the example:

<div style="display:none;">
    <div id="Orders_editForm1">
        <div class="FieldPlaceholder DataOnly">
            {CustomerID}
        </div>
        <div class="FieldPlaceholder DataOnly">
            {EmployeeID}
        </div>
        <div class="FieldPlaceholder DataOnly">
            {ShipVia}
        </div>
        <div class="FieldPlaceholder DataOnly">
            {OrderDate}
        </div>
        <div class="FieldPlaceholder DataOnly">
            {Freight}
        </div>
        <div class="FieldPlaceholder DataOnly">
            {Total}
        </div>
    </div>
</div>

When you save and refresh the application, you can see that labels are no longer present, but the
formatting is terribly off.

Order Form with custom template DataOnly

Don’t worry. This gives you a perfect foundation to position the fields as you see fit.

Friday, March 23, 2012PrintSubscribe
Custom Form Template: Adding an “Order Form Template” User Control

Let’s rearrange the Order Form page to make it easier for the end user to interact with the data. To do this, we will need to add a custom “Order Form Template” user control to the page.

In the Designer, right-click on OrderForm / c100 node, and press New Control.

'New Control' option in Code On Time Project Explorer

The new control requires you to select an existing user control. Instead of pressing (select), click on the New icon to the right of the field.

'New User Control' button on the 'New Control' page

Give this user control the name of:

OrderFormTemplate

New User Control 'OrderFormTemplate'

Press OK to create the User Control. You will return to the New Control page.

'OrderFormTemplate' control for a Custom Form Template

Leave the rest of the settings as default, and press OK to insert the control into the page container Order Form / c100.

Press generate to regenerate the application.

The new user control will be generated if it doesn’t exist. If the generator detects that the file exists, then it will not be overwritten – any changes to the file will be preserved between code generation sessions.

Continue to Calculating Freight