Code On Time: Web Application Generator

Blog

Web Application Generator

Monday, April 9, 2012Print Subscribe

The picture below shows the Employees editForm1 view. By default, the fields are arranged in a vertical list. The category description is at the top of the form, the field labels are in the first column, and the data fields are in the second column. When you resize the page width, the column width will change.

Let’s use the Float property on the category to change the presentation of the data fields.

Start Code On Time generator, click on the project name, and press Design. In the bottom right corner of the Project Explorer, switch to the Controllers tab. Double-click on Employees / Views / editForm1 / c1 – Employees node.

Change the Floating property to “Yes”.

Press OK to save the category. On the tool bar, press Generate. Navigate to the Employees page, and select a record. The category is now much more compact. Each field has the label above it, floating around the category. When you resize the page, the fields will be rearranged to fit.

You can use a combination of floating and non-floating categories to optimize the user interface, such as the Order Details page shown below.

Floating data field categories can serve as a quick way to make a compact user interface without much effort. If you want more control over the placement of data fields, then use custom form templates or category-level templates.

Labels: Designer, User Interface, Web Application Generator

Sunday, April 8, 2012Print Subscribe

Grid Template for Edit Mode

If you create a generic custom grid template, then this template will be applied to inline edit mode as well as new and select mode of data row. Let’s create a custom grid template for edit mode specifically.

In the picture below, you can see the generic grid template being used for inline edit mode in our sample application.

Start Code On Time web application generator, click on the project name, and press Design to open the project in Visual Studio. Double-click on the ~/Controls/Employees_GridTemplate.ascx file. Create a div with id “Employees_grid1_edit”. If you already have a generic or new templates defined, they can be arranged in any sequence.

<div style="display: none;">
    <div id="Employees_grid1">. . . . .</div>
    <div id="Employees_grid1_new">. . . . .</div>
    <div id="Employees_grid1_edit"></div>
</div>

The surrounding div hides the static templates from the user. Paste in the following HTML body into the new Employees_grid1_edit div element:

<table>
    <tr>
        <td style="width: 320px; padding: 6px 0px 0px 6px;">
            <div class="FieldPlaceholder DataOnly" style="width: 90px; height: 120px;">
                {Photo}</div>
        </td>
        <td style="vertical-align: top; border: solid 1px #9d5a00; border-radius: 5px; 
            padding: 3px; background-color: rgba(255,252,235,0.5)">
            <table>
                <tr>
                    <td>
                        <div class="FieldPlaceholder DataOnly">
                            {Address}</div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="FieldPlaceholder DataOnly">
                            {City}</div>
                        <span style="float: left; margin-right: 4px;">,</span>
                        <div class="FieldPlaceholder DataOnly">
                            {Region}</div>
                    </td>
                </tr>
                <tr>
                    <td style="vertical-align: top;">
                        <div class="FieldPlaceholder DataOnly">
                            {PostalCode}</div>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td style="vertical-align: top; border: solid 1px #9d5a00; border-radius: 5px; 
            padding: 3px; background-color: rgba(255,252,235,0.5)">
            <div class="FieldPlaceholder DataOnly" style="margin-top: 4px;">
                {TitleOfCourtesy}</div>
            <div class="FieldPlaceholder DataOnly" style="margin: 4px;">
                {FirstName}</div>
            <div class="FieldPlaceholder DataOnly" style="float: none; margin: 4px;">
                {LastName}</div>
            <div class="FieldPlaceholder DataOnly" style="float: none; margin: 4px;">
                {BirthDate}</div>
            <div class="FieldPlaceholder DataOnly" style="float: none; margin: 4px;">
                {Title}</div>
            <div class="FieldPlaceholder DataOnly" style="float: none; margin: 4px;">
                {HireDate}</div>
        </td>
        <td style="vertical-align: top; border: solid 1px #9d5a00; border-radius: 5px; 
            padding: 3px; margin: 5px; background-color: rgba(255,252,235,0.5)">
            <div class="FieldPlaceholder DataOnly">
                {Notes}</div>
        </td>
    </tr>
</table>

Save the file.

Switch back to the web application generator, click on the project, and press Design. Right-click on Employees / container1 / view1 / ag1 (Grid), and press Show All Actions. Select the ag2 row. On the action bar, press Up.

This will make the action first in the list. The first action in the action group with Grid scope will be executed when a user clicks on the link in the first column of any data row.

You may need to make the Photo field editable. Double-click on Employees / container1 / view1 / grid1 / Photo. Change the Read Only property to “No”.

Press OK to save the data field. On the tool bar, press Exit.

Generate the project.

When your default web browser opens, navigate to Employees. Click on the link in the first column of any employee, and inline edit mode will be activated. The data row will be formatted according to the edit mode custom template.

Labels: User Interface, Web Application Generator

Sunday, April 8, 2012Print Subscribe

Grid Template for New Mode

The same custom grid template will be applied to select, edit, and new modes of a grid view.

It may be beneficial to have a different template for new mode. For example, the generic grid view template works well in select and edit modes. The same template in the inline new mode looks confusing because the data fields do not have labels.

Let’s add a custom grid template to be used in the new mode while reusing the generic template in edit and select modes.

Start Code On Time web application generator, click on the project name, and press Develop. This will open the project in Visual Studio. Double-click on ~/Controls/Employees_GridTemplate.ascx. You will see the custom template that was made earlier. Under the div with id “Employees_grid1”, create another div with id “Employees_grid1_new”, as shown in the sample below:

<div style="display: none;">
    <div id="Employees_grid1">. . . . .</div>
    <div id="Employees_grid1_new"></div>
</div>

The wrapper div prevents the user from seeing the static template. Inside, the first div contains the generic custom grid view template. The second div will contain the new template for use with new mode. Within the second div element Employees_grid1_new, paste the following HTML body:

<table>
    <tr>
        <td valign="top" style="border:solid 1px #9d5a00;border-radius:5px;
            padding:3px;background-color:rgba(255,252,235,0.5)">
            <h3>Personal Info</h3>
            <div style="margin-bottom:4px">{FirstName}</div>
            <div style="margin-bottom:4px">{LastName}</div>
            <div style="margin-bottom:4px">{TitleOfCourtesy}</div>
            <div style="margin-bottom:4px">{BirthDate}</div>
        </td>
        <td valign="top" style="border:solid 1px #9d5a00;border-radius:5px;
            padding:3px;background-color:rgba(255,252,235,0.5)">
            <h3>Residence</h3>
            <div style="margin-bottom:4px">{Address}</div>
            <div style="margin-bottom:4px">{City}</div>
            <div style="margin-bottom:4px">{Region}</div>
            <div style="margin-bottom:4px">{PostalCode}</div>
        </td>
        <td valign="top" style="border:solid 1px #9d5a00;border-radius:5px;
            padding:3px;background-color:rgba(255,252,235,0.5)">
            <h3>Employee Info</h3>
            <div style="margin-bottom:4px">{Title}</div>
            <div style="margin-bottom:4px">{HireDate}</div>
        </td>
    </tr>
</table>
</div>

Save the user control file.

Let’s change the New Employees action on the action bar to send the user to the inline new mode, instead of createForm1.

Switch back to the web application generator, click on the project name, and press Design. Double-click on Employees / container1 / view1 / Actions / ag3 (ActionBar) – New / a1 – New, createForm1.

This default action has a command argument of “createForm1”, which sends the user to the createForm1 form.

Delete “createForm1” from Command Argument property, and press OK to save the action.

On the tool bar, press Browse to regenerate the application and open it in your default web browser. Navigate to the Employees page, and click on the New Employees button on the action bar. Instead of taking you to createForm1, the action will open an inline new mode at the bottom of the grid.

Labels: User Interface, Web Application Generator