Designer

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
Designer
Friday, September 21, 2012PrintSubscribe
Implementing a Custom Action

Let’s implement a custom action that will apply a discount to all line items of a specific order. Orders are stored in the table Orders, and line items are stored in Order Details.

Relationship between Orders and Order Details tables in the Northwind database.

Adding a Custom Action

First, an action needs to be defined in the action group of a data controller.

Start the Project Designer. In the Project Explorer, switch to the Controllers tab. Right-click on Orders / Actions / ag4 (ActionBar) – Edit/Delete action group node, and press New Action.

New Action context menu option for action group 'ag4' of Orders controller.

Assign the following values:

Property Value
Command Name Custom
Command Argument ApplyDiscount
Header Text Apply a Discount
When Key Selected Yes
Confirmation _controller=OrderDiscount
_title=Specify a Discount
_width=500

Press OK to save the action.

The Confirmation property references a data controller called “OrderDiscount”. This data controller does not exist in the project – we will create this confirmation data controller from scratch and have it configured to collect the Discount value from the user. The data controller will not be based on any database table or view.

Creating the Confirmation Controller

On the Project Explorer toolbar, press the New Controller icon.

New Controller context menu option on the Project Explorer toolbar.

Give this controller a name:

Property Value
Name OrderDiscount

Press OK to save.

Right-click on OrderDiscount / Fields node, and press New Field.

New Field context menu option for OrderDiscount controller.

Assign the following values:

Property Value
Name CustomerCompanyName
Type String
Length 50
The value of this field is calculated by a business rule expression.
True
Label Customer Company Name
Values of this field cannot be edited True

Press OK to save.

Add another field with these values:

Property Value
Name Discount
Type Single
Label Discount

Save the field.

Generate the app and select an order. On the action bar, press the Apply a Discount action.

Custom action 'Apply a Discount' accessible on the action bar of Orders grid view.

A modal form with two empty fields, Customer Company Name and Discount, will be displayed.

ApplyDiscount confirmation modal window with empty values in fields 'Customer Company Name' and 'Discount'.

Let’s populate Customer Company Name with the name of the company associated with the selected order and initialize Discount with the average discount of the order details.

In the Project Explorer, right-click on OrderDiscount / Business Rules node, and press New Business Rule.

New Business Rule context menu option for OrderDiscount confirmation controller.

Assign the following values:

Property Value
Type SQL
Command Name New
Phase Execute
Script
set @CustomerCompanyName = @Context_CustomerCompanyName

select @Discount = avg(Discount) 
from "Order Details"
where OrderID = @Context_OrderID

Press OK to save the business rule.

The parameter @CustomerCompanyName refers to the CustomerCompanyName field of the confirmation data controller.

The parameter @Context_CustomerCompanyName refers to the CustomerCompanyName field of the Orders data controller.

The application framework will pass the script for execution to the database engine when the action Custom / ApplyDiscount is activated by the user. The result is shown in the next screenshot.

Specify a Discount modal confirmation window with average discount.

If the user clicks OK, nothing will happen. The application does not know what to do with a “Custom” action with argument of “ApplyDiscount”.

Creating an SQL Business Rule to Handle the Action

Now that an action and controller are in place to capture the user input, a business rule needs to be created to apply the specified discount to all OrderDetails data rows associated with the selected order.

Right-click on Orders / Business Rules node, and press New Business Rule.

New Business Rule context menu option for Orders controller.

Use these values:

Property Value
Type SQL
Command Name Custom
Command Argument ApplyDiscount
Phase Execute
Script
-- apply discount to order details
update "Order Details"
set Discount = @Parameters_Discount
where OrderID = @OrderID

-- force refresh of child views
set @Result_RefreshChildren = 1

Press OK to save.

The first statement in the SQL script will update [Order Details].[Discount] column where the OrderID matches the selected order. The value of the discount is referenced by @Parameters_Discount parameter.

The second statement instructs the client library to refresh the child data views of the master data view Orders. This will cause Order Details data view to reflect the updated discount.

On the Project Designer toolbar, press Browse. Navigate to the Orders page and select an order. A list of related order details will be displayed below. Take note of the discounts of the order details.

Selecting an order from the list will reveal a list of order details related to the order.

On the action bar of Orders grid view, press Apply a Discount. The confirmation modal popup will appear, displaying the current Customer Company Name and the average discount. Enter a discount of “.25”.

Discount has been specified in the confirmation modal popup.

Press OK, and the specified discount will be applied to all records in Order Details table that belong to the selected order.

Order Details have all been updated with the new discount.

Creating “Code” Business Rule to Handle the Action

Instead of using SQL, you may also create a code business rule written in C# or Visual Basic to handle the calculation.

If you have implemented the previous SQL business rule, you will need to delete it.

Right-click on Orders / Business Rules / Custom, ApplyDiscount (Sql / Execute) - r100 business rule node and press Delete.

Delete context menu option for the previously created SQL business rule.

Right-click on Orders / Business Rules node and press New Business Rule.

New Business Rule context menu option for Orders controller in the Project Explorer.

Assign these values:

Property Value
Type C# / Visual Basic
Command Name Custom
Command Argument ApplyDiscount
Phase Execute

Save the rule. “Code” business rules do not have a script stored in the data controller definition file. A code file must be created in the project. The application generator will create an initial “empty” business rule code file as soon as the project is generated.

On the Project Designer toolbar, press Generate.

When complete, right-click on Orders / Business Rules / Custom, ApplyDiscount (Code / Execute) – r100 node and press Edit Rule in Visual Studio.

Context menu option 'Edit Rule in Visual Studio' for the code business rule.

The file will be opened in Visual Studio. The generator has created a template for the business rule. Replace the existing code with the following:

C#:

using System;
using MyCompany.Data;

namespace MyCompany.Rules
{
    public partial class OrdersBusinessRules : MyCompany.Data.BusinessRules
    {

        /// <summary>
        /// This method will execute in any view for an action
        /// with a command name that matches "Custom" and argument that matches "ApplyDiscount".
        /// </summary>
        [Rule("r100")]
        public void r100Implementation(
                    int? orderID,
                    string customerID,
                    string customerCompanyName,
                    int? employeeID,
                    string employeeLastName,
                    DateTime? orderDate,
                    DateTime? requiredDate,
                    DateTime? shippedDate,
                    int? shipVia,
                    string shipViaCompanyName,
                    decimal? freight,
                    string shipName,
                    string shipAddress,
                    string shipCity,
                    string shipRegion,
                    string shipPostalCode,
                    string shipCountry)
        {
            // This is the placeholder for method implementation.
            using (SqlText applyDiscount = new SqlText(
                "update [Order Details] " +
                "set Discount = @Discount " +
                "where OrderID = @OrderID"))
            {
                applyDiscount.AddParameter("@Discount", SelectFieldValue("Parameters_Discount"));
                applyDiscount.AddParameter("@OrderID", orderID);
                applyDiscount.ExecuteNonQuery();
            }
            Result.RefreshChildren();
        }
    }
}

Visual Basic:

Imports MyCompany.Data
Imports System
Imports MyCompany.Rules

Namespace MyCompany.Rules

    Partial Public Class OrdersBusinessRules
        Inherits MyCompany.Data.BusinessRules

        ''' <summary>
        ''' This method will execute in any view for an action
        ''' with a command name that matches "Custom" and argument that matches "ApplyDiscount".
        ''' </summary>
        <Rule("r100")> _
        Public Sub r100Implementation( _
                    ByVal orderID As Nullable(Of Integer), _
                    ByVal customerID As String, _
                    ByVal customerCompanyName As String, _
                    ByVal employeeID As Nullable(Of Integer), _
                    ByVal employeeLastName As String, _
                    ByVal orderDate As Nullable(Of DateTime), _
                    ByVal requiredDate As Nullable(Of DateTime), _
                    ByVal shippedDate As Nullable(Of DateTime), _
                    ByVal shipVia As Nullable(Of Integer), _
                    ByVal shipViaCompanyName As String, _
                    ByVal freight As Nullable(Of Decimal), _
                    ByVal shipName As String, _
                    ByVal shipAddress As String, _
                    ByVal shipCity As String, _
                    ByVal shipRegion As String, _
                    ByVal shipPostalCode As String, _
                    ByVal shipCountry As String)
            'This is the placeholder for method implementation.
            Using applyDiscount As SqlText = New SqlText(
                    "update [Order Details] " +
                    "set Discount = @Discount " +
                    "where OrderID = @OrderID"
                    )
                applyDiscount.AddParameter("@Discount", SelectFieldValue("Parameters_Discount"))
                applyDiscount.AddParameter("@OrderID", orderID)
                applyDiscount.ExecuteNonQuery()
            End Using
            Result.RefreshChildren()
        End Sub
    End Class
End Namespace

Save the file, and refresh the web page. The Assign a Discount action will function in exactly the same way as the version with the SQL business rule.

Tuesday, September 4, 2012PrintSubscribe
Designing the Forms

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.

Customers editForm1 has data fields rendered in a top-down fashion.

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.

Category 'c1' of Customers 'editForm1' view on the Order Manager page in the Project Explorer.

Change the Float property:

Property Value
Float Yes

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

Context menu option 'View in Browser' for Order Manager page node in the Project Explorer.

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.

Customers edit form data fields are floating, making the form much more compact.

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.

Orders edit form created by the application generator.

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

New Category context menu option on editForm1 view of Orders controller.

Assign the following properties:

Property Value
Header Text Shipping Info
Description This is the shipping information.
New Column Yes

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.

All shipping fields selected and dragged onto 'c2' category.       All shipping fields have been moved into category 'c2 - Shipping Info'.

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

View in Browser context menu option for Order Manager page in the Project Explorer.

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

Orders form with data fields split in two columns.

Custom Category Template

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

Order Details edit form created by Code On Time web application generator.

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.

New Control context menu option on 'c103' container node in the Order Manager page.

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

New User Control icon to the right of User Control property lookup.

Assign a name to the user control.

Property Value
Name OrderDetails_CustomCategoryTemplate

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.

Edit in Visual Studio context menu option for 'contol1' will open the user control 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.

Order details edit form with a custom category template.

Tuesday, September 4, 2012PrintSubscribe
Rearranging Data Fields

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

Customers grid on the Order Manager page without any customization.

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.

Dropping Phone data field on the right side of ContactName data field.     Phone data field has been placed after ContactName in the list of data fields in view 'grid1'.

Deleting

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

Delete context menu option on the Region data field.     Region data field has been removed from 'grid1' view.

Adding

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

Dropping Fax field node onto 'grid1' view node will create a data field.     Fax data field has been created in view 'grid1'.

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

View in Browser context menu option for Order Manager page node will generate the project and open the relevant page node.

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.

The modified Customers grid.

Continue to Allow Sorting