Code On Time: User Interface

Saturday, November 3, 2012Print Subscribe

Let’s customize the template that was generated.

In the Project Explorer, switch to the User Controls tab. Right-click on OrderFormTemplate node and press Edit in Visual Studio.

The template will be opened in Visual Studio. On the toolbar, press Edit / Advanced / Format Document. You will see that there is an UpdatePanel element present. Delete the UpdatePanel element and replace it with the sample below.

<%@ Control AutoEventWireup="true" %>
<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 fields in the layout specified in the template. You will also see the field names in brackets below the list of order details.

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

<%@ Control AutoEventWireup="true" %>
<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.

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:

<%@ Control AutoEventWireup="true" %>
<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.

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

Labels: Tutorials, User Interface, Web Application Generator

Saturday, November 3, 2012Print Subscribe

Creating an Edit Page

Data views are instances of data controllers placed on pages. The application generator automatically configures data views to start presentation with a list of records. Each data controller defines grid1 view to render a list of records.

If business requirements call for a single record to be visible to an end user, then the grid view becomes unnecessary.

A developer can specify that the form view editForm1 for the data view on the page. The form will be displayed initially. The data view will switch back to grid1 as soon as user initiates Insert, Update, Delete, or Cancel actions. The action state machine of data controllers does not define specific actions that must follow any of these commands. The client library will simply display the first view of the data controller.

View ‘grid1’ happens to be first, and users will see a list of data records.

The developer has the option to add multiple actions that would select editForm1 after Insert, Update, Delete, or Cancel actions. The easiest solution is to move editForm1 to the first position.

To preserve the default functionality of the data controller on other pages, you may want to clone the controller, and have the clone configured to display data in the form view editForm1.

Start the Project Designer. In the Project Explorer, switch to the Controllers tab. Right-click on Customers controller node, and press Clone.

A clone of Customers will be created and named “Customers1”. Drop Customers1 / Views / editForm1 node on the left side of grid1 node to place it first in the hierarchy.

Enter the following Filter Expression to display a specific record:

Property	Value
Filter Expression	CustomerID = 'BONAP'

Press OK to save. This expression will filter data to a specific CustomerID. The filter expression can also be configured to use a parameter returned by a business rule.

Right-click on Customers1 node and press Copy.

Switch to the Pages tab. On the toolbar, press the New Page icon.

Assign the page a name:

Property	Value
Name	My Account

Press OK to save. The page will be added to the bottom of the hierarchy of pages. Drop My Account page node on the right side of Home page node.

Right-click on My Account node, and press Paste.

This will instantiate Customers1 controller in a new container on My Account page.

On the Project Designer toolbar, press Browse. When the My Account page loads, the data view will open in edit form.

Saving changes to the record, pressing Close, or creating a new record will keep the user in the edit form.

Labels: Designer, Tutorials, User Interface, Web Application Generator

Thursday, November 1, 2012Print Subscribe

URL Parameters

Data views on the page can detect and use certain parameters specified in the URL in the address bar of the web browser.

Filter By Field

The picture below shows an unfiltered list of customers.

A URL parameter will act as a filter for any data view on the page if the filter name matches to the name of a data field in the view. Data rows with field values unequal to the filter value will be eliminated from the data view.

For example, the following parameter will show only customers that reside in the country of “Belgium”.

Parameter	Value
Country	Belgium

http://demo.codeontime.com/Northwind/Pages/Customers.aspx?Country=Belgium

The data view will hide the filtered column to prevent display of duplicate values. The column can be shown using the “_display” parameter.

Parameter	Value
Country	Belgium
_display	Country

http://demo.codeontime.com/Northwind/Pages/Customers.aspx?Country=Belgium&_display=Country

Any combination of filters can be applied using URL parameters. Multiple fields can be listed in a comma-separated list for the “_display” parameter.

Parameter	Value
Country	Belgium
City	Bruxelles
_display	Country,City

http://demo.codeontime.com/Northwind/Pages/Customers.aspx?Country=Belgium&City=Bruxelles&_display=Country,City

Select Record

A record can be selected using URL parameters that specify the “Select” command, a command argument to specify the view, and the primary key of the record. The specified field will be hidden on the form. When the _commandName and _commandArgument parameters are used, all controllers will perform the action unless the controller is specified using “_controller”.

Parameter	Value
_commandName	Select
_commandArgument	editForm1
ProductID	1
_controller	Products

http://demo.codeontime.com/Northwind/Pages/Products.aspx?_commandName=Select&_commandArgument=editForm1&ProductID=1&_controller=Products

Edit Record

A record can be edited with URL parameters similar to selecting a record. The only difference is the use of “Edit” command name instead of “Select”.

Parameter	Value
_commandName	Edit
_commandArgument	editForm1
ProductID	1
_controller	Products

http://demo.codeontime.com/Northwind/Pages/Products.aspx?_commandName=Edit&_commandArgument=editForm1&ProductID=1&_controller=Products

Note that successfully performing any action in form view will navigate to the previous page, instead of going back to the grid. This behavior makes it easier to build a logical workflow for users without having to write redirection logic.

Create New Record

URL parameters can be used to open the form in new mode by specifying the “New” command and correct view.

Parameter	Value
_commandName	New
_commandArgument	createForm1
_controller	Orders

http://demo.codeontime.com/Northwind/Pages/Orders.aspx?_commandName=New&_commandArgument=createForm1&_controller=Orders

Initial values can be specified for each field. These fields will also be hidden by default, and require “_display” parameter to be shown.

Parameter	Value
_commandName	New
_commandArgument	createForm1
_controller	Orders
ShipName	John
_display	ShipName

http://demo.codeontime.com/Northwind/Pages/Orders.aspx?_commandName=New&_commandArgument=createForm1&_controller=Orders&ShipName=John&_display=ShipName

When specifying an initial value for a lookup, both the lookup field and the alias field must be specified.

Parameter	Value
_commandName	New
_commandArgument	createForm1
_controller	Orders
ShipName	John
CustomerID	AROUT
CustomerCompanyName	Around the Horn
_display	ShipName,CustomerID,CustomerCompanyName

http://demo.codeontime.com/Northwind/Pages/Orders.aspx?_commandName=New&_commandArgument=createForm1&_controller=Orders&ShipName=John&CustomerID=AROUT&CustomerCompanyName=Around the Horn&_display=ShipName,CustomerID,CustomerCompanyName

Labels: Tips and Tricks, User Interface, Web Application Generator