Tutorials

Labels
AJAX(112) App Studio(9) 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(178) 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(9) OAuth Scopes(1) OAuth2(13) Offline(20) Offline Apps(4) Offline Sync(5) Oracle(11) PKCE(2) Postgre SQL(1) PostgreSQL(2) PWA(2) QR codes(2) Rapid Application Development(5) Reading Pane(2) Release Notes(184) Reports(48) REST(29) RESTful(29) RESTful Workshop(15) RFID tags(1) SaaS(7) Security(81) SharePoint(12) SPA(6) SQL Anywhere(3) SQL Server(26) SSO(1) Stored Procedure(4) Teamwork(15) Tips and Tricks(87) Tools for Excel(3) 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
Wednesday, April 11, 2012PrintSubscribe
Changing Settings in an Existing Project

The Project Wizard allows you to change settings that will be applied to the entire application.

Settings can affect one of two things in the application – data controllers or pages. An example of a setting that affects the data controllers is enabling standard action column in all grid views. An example of a page setting is changing the page layout.

If you change any setting in the Wizard, then it is necessary to use the Refresh project action to have the changes reflected in the generated application.

However, changes will only be reflected in the project if the following two conditions are met:

  1. The page, user controls, or controller elements have not been changed in the Designer.
  2. The application and data controller baseline files have not been edited by hand.

If these conditions are not met, then the settings will only be applied to new pages and controllers added to the application at a later time. The verification of these conditions is performed by the application generator to prevent overwriting of project customization.

Consider the Layout setting, which affects the application pages. By default, the layout property is set to Classic. This will create a master view at the top of each page, and all child views in tabs underneath the master view.

Create a brand new Northwind sample application. As you go through the project wizard, leave the layout with the default property of Classic.

Layout page in Code On Time Project Wizard

To change the layout, select the project name on the start page of the web app generator, and choose Settings.

Settings option of a Code On Time web application

Click on the Layouts option.

Layouts page under Settings in Code On Time web application generator

Let’s change the default layout to Tabbed. This puts all master and child views on different tabs in a single page container.

Tabbed standard page layout enabled 

Press Finish to go to the Summary page, and click on Refresh. The layout option change only affects the pages, so just press the Refresh button.

Refresh screen for Northwind sample in Code On Time web application generator

Press OK to confirm the refresh, and proceed to generate the application.

The web application will open in your default web browser. The new tabbed layout will be implemented on all pages in the application.

Customers page with Tabbed Layout in Code On Time web application

Now, let’s add an action column to a select few controllers.

Switch back to the web application generator, select the project name, and click Settings. Navigate to the Features page, and switch to the Grid Properties section. Toggle the checkbox Enable standard action column in all grid views.

Features page of Code On Time Project Wizard with Standard Action Column property enabled

Press Finish, and on the summary page click Refresh. Check the box next to Orders and OrderDetails controllers. Press Refresh button at the bottom of the screen, and then press Yes to confirm the action.

Refreshing data controllers in a Code On Time web application

Click Generate, and wait for the web application to load in your web browser.

You can see that the Customers grid view has not been changed, as it was not included in the refresh.

Customers grid view without Action Column in Code On Time web application

If you switch to the Orders tab, you will see the new action column at work. Actions Edit and Delete are rendered in the first column of the grid view.

Orders grid view with Actions Column in Code On Time web application

Labels: Tutorials
Saturday, March 24, 2012PrintSubscribe
Order Form Sample

In this tutorial, we will show you how to turn a standard automatically generated Orders page into a customized order management screen. The picture below shows the final product of customization.

Customized version of the Order Form

Below is the baseline Orders page created by the web application generator in the baseline app.

Baseline version of the Orders page

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