Drag and Drop, Cut/Copy/Paste, and More…

Code On Time release 6.0.0.29 includes enhancements to both code generation library and application design environment.

Generated web applications now support JavaScript Business Rules and Automatic Tracking of Selected Record. The Project Designer has been enhanced with drag & drop and cut/copy/paste  capabilities and offers “Navigate To” window that allows quickly locating project configuration elements.

The following features, enhancements, and bug fixes are included in this release:

• Drag & drop and cut/copy/paste are support for pages, containers, data views, controls, user controls, controllers, and commands. Other project configuration elements will also be enhanced in the coming weeks.
   
• The entire data controller can now be cloned.
   
• Project Designer properties of menu configuration elements can be easily synchronized with Project Explorer.
   
• Navigate To window allows quickly finding project configuration elements.
    
• Code generator automatically combines all JavaScript files found in [Documents]\Code OnTime\Library\_Client\Scripts folder in a single _System.js file. The file is included in the generated web applications of all types.
   
• Automatic Tracking of Selected Record is supported by the client library. Developers can take advantage of selected record synchronization.
   
• New search option $autocompleteanywhere will cause the auto-complete to search anywhere in the field values. By default, the framework searches using "Begins With" operation, which generally performs better, but will not yield partial matches.
   
• Data field property "Search Options" supports $disableautocomplete, $disablesamples, and $disablemultiplevalues options.
   
• Modal form views now support dragging of the header.
   
• View Details shows a modal view that will refresh the original source if changes are made.
   
• "Hidden" fields will be displayed in summary if marked as "Show In Summary".
   
• Master data sheet views automatically set focus on the first cell of the first row.
   
• "Flat" actions will display the action description as a tooltip.
   
• Implemented a fix for Import Processor to ensure that field values that are missing in import file are created to simulate as if the values were entered in the user interface form. Previous implementation has passed the non-blank values only. This makes it possible to implement UPSERT when importing data records.
   
• Code On Time will now pre-process the designer logs before navigating to the data controller summary.
   
• Localizer now takes into account the name of the module/webpart when caching the resource strings.
   
• Project Explorer tab now feature "Home" button that shows List of Pages, List of Controllers, or List of User Controls.
   
• The issue with the left border in AjaxControlToolkit tabs is fixed in all themes.
   
• Sorting on fields with Format On Client = false will not cause a runtime exception.
   
• Method Controller.UserInInRole is now creating an instance of ControllerUtility class to verify the user identity. This allows implementing custom role validation against SharePoint or DotNetNuke user groups.
   
• ControllerDataSource will correctly perform Update/Insert/Delete operations when C#/VB business rules are associated with the data controller.
   
• Component ControllerDataSource will use "=" filter operation if FilterParameter instance has its DBType property set to any value other than Object or String.
   
• Aggregate fields are correctly formatted on the server when "Format On Client" property of a data field is set to "false".
   
• It is possible to specify "about:blank" as the URL of top level pages without breaking the rendering of Advanced Menus.
   
• Context Field Filters now support static filters in the both formats:
  FieldName = 12345 and FieldName='12345'
    
• Decimal parameters are automatically initialized as Decimal(38,10) in SQL Business Rules and SQL action.
   

Feature: Automatic Tracking of Selected Record

Applications automatically keep track of the selected record when users page, sort, filter, or modify data.

For example, the product “Chang” has been selected on the second page of the list.

Filter Category Name by “Beverages”, and sort in descending order of Product Name.

The grid will display page three with product “Chang” selected in the view.

Clear the filter. The data view will display page two and with “Chang” still selected in it.

Sort the Unit Price field in ascending order. The data view will preserve the selection by navigating to page eight.

The application framework automatically locates the page that the data row belongs to while taking into account the sort order and filters. This behavior is automatic – it requires no programming.

Developers can take advantage of this application framework feature. For example, an application can select a page of data that contains a specific record in response to user actions.

Introducing JavaScript Business Rules

An application data controller can define powerful JavaScript Business Rules to perform validation and required interactions with the user. The rules are written in JavaScript to execute in the client web browser.

Application client library will create an instance of a JavaScript class enhanced with the rules defined in the data controller to handle actions in a fashion similar to server-side SQL Business Rules and C#/Visual Basic Business Rules. A rule can analyze the field values, change them, request additional information, or prevent an action from execution.

This is the example of a JavaScript business rule performing client-side validation.

// validate the data field value
if ([Country] == 'USA') {
    // tell the client library to skip the execution of update, insert, or delete
    this.preventDefault();
    // set the focus to the field "Country" and display an error message
    this.result.focus(
        'Country', 'You are not authorized to {0}, if the country ' +
        'is equal to "USA".',
        this.arguments().CommandName);
    // show an additional information in the message bar at the top of the page
    this.result.showMessage('Error trying to execute {0} command', 
        this.arguments().CommandName);
}

The implementation of the business rule is functionally equivalent to the SQL business rule performing validation on the database engine level, but does not involve a round-trip between a browser and webserver.

This screenshot demonstrates the business rule in action.

Learn to create sophisticated JavaScript Business Rules performing complex data validation and just-in-time correction of values.

Action “Client Script”

Client Script actions allow execution of arbitrary JavaScript code. For example, an action with command name Client Script can select a page of data that contains a specific record in response to user actions. This example takes advantage of automatic tracking of selected records supported by the application framework.

The Employees table of the Northwind sample has a foreign key column ReportsTo that references the table itself. Code On Time generator automatically creates a master-detail relationship on the Employees page. Let’s configure an action on the Employees data controller to select a specific record in the master view.

There are two data views on the Employees page hooked to the Employees controller. Let’s tag the top view as a “master list” of employees.

Start the Project Designer. In the Project Explorer, double-click on Employees / container1 / view1 node.

Change the following properties:

Property	New Value
Tag	MasterList
Page Size	3

Press OK to save the data view.

Next, add an action to perform synchronization of the master list with a specific EmployeeID. Right-click on Customers / container1 / view1 / Actions / ag1 (Grid) node, and select New Action.

Give this action the following properties:

Property	Value
Command Name	Client Script
Command Argument	Web.DataView.find('MasterList', 'Tag').sync(this.fieldValue('EmployeeID'))
Header Text	Show in Master List

Press OK to save the action. On the toolbar, select Browse button.

On the Employees page, select Andrew Fuller from the list. An Employees child data view will open underneath. Activate the context menu for Steven Buchanan and select Show in Master List option.

The master data view will move to the page that contains Steven Buchanan with the corresponding row selected. The child data view will refresh showing employees reporting to Mr. Buchanan.

Using the context menu for Robert King, select Show in Master List.

Robert King will be selected on the third page of the master view.

Auto-Complete with Matching Anywhere

Code On Time applications feature auto complete of field values in multiple elements of the user interface. By default, auto complete will match any field values that begin with the provided sample text.

The following example of “begins with” matching in the Advanced Search Bar shows last names that begin with “le”. Only one data row with value “Leverling” in the Last Name field has been matched.

Let’s configure the field to perform auto complete matching in any part of the field value.

Start the Project Designer. In the Project Explorer, double-click on Employees / container1 / view1 / grid1 / LastName data field node.

Change the Search Options property:

Property	New Value
Search Options	$autocompleteanywhere

Press OK to save the data field. On the toolbar, select Browse.

When the web application loads, activate the Advanced Search Bar on the Employees page. The auto complete for Last Name will now match the search parameter “le” with two data rows that have “Fuller” and “Leverling” values in the column.

Converting Field Values with C# and Visual Basic

The CustomerID field from the Customers controller should have all values formatted in uppercase.

Let’s create a business rule in C# or Visual Basic to convert all user input to uppercase.

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

Change the Handler property:

Property	New Value
Handler	CustomersRule

Press OK to save the controller. In the Project Explorer, double-click on Customers / Fields / CustomerID field node.

Make the following changes:

Property	New Value
The value of this field is calculated by a business rule expression.	True
Context Fields	CustomerID

Exit the designer and generate the application.

Click on the project name, and press Design. Visual Studio will open the project.

In the Solution Explorer, double-click on ~\App_Code\Rules\CustomersRule.cs(vb) file.

Replace the sample code base with the following:

C#:

using System;
using System.Data;
using System.Collections.Generic;
using System.Linq;
using MyCompany.Data;

namespace MyCompany.Rules
{
    public partial class CustomersRule : MyCompany.Data.BusinessRules
    {
        [ControllerAction("Customers", "Insert", ActionPhase.Before)]
        [ControllerAction("Customers", "Update", ActionPhase.Before)]
        [ControllerAction("Customers", "Calculate", ActionPhase.Execute)]
        public void CalculateCustomerID(string customerID)
        {
            UpdateFieldValue("CustomerID", customerID.ToUpper());
        }
    }
}

Visual Basic:

Imports MyCompany.Data
Imports System
Imports System.Collections.Generic
Imports System.Data
Imports System.Linq
Namespace MyCompany.Rules
    Partial Public Class CustomersRule
        Inherits MyCompany.Data.BusinessRules
        <ControllerAction("Customers", "Insert", ActionPhase.Before)>
        <ControllerAction("Customers", "Update", ActionPhase.Before)>
        <ControllerAction("Customers", "Calculate", ActionPhase.Execute)>
        Public Sub CalculateCustomerID(ByVal customerID As String)
            UpdateFieldValue("CustomerID", customerID.ToUpper())
        End Sub
    End Class
End Namespace

Save the file, and switch to the web application. Navigate to the Customers page, and create a new record. Type in lowercase letters for Customer# field.

Press Tab or click on another area of the page. The text in Customer# will be converted to uppercase.

The same business logic can be implemented with the help of SQL Business Rules.

Browsing Project Configuration Elements

The picture shows the Project Designer window of a Northwind web application.

The screen is split into two parts.

The flexible left side of the window holds the Project Configuration Browser. This window initially displays a list of pages, with other tabs that display Controllers, User Controls, All Commands, All Fields, All Views, and All Data Fields. 

The resizable right side holds the Project Explorer. It displays a logical hierarchy of the application configuration elements.

The options on the Project Browser toolbar allows the developer to generate the app, develop in Visual Studio,  open the folder, or exit the Project Designer.

The Generate button will generate and open the application in the Preview window. The Browse button will generate and open the application in the default web browser. The generated application is stored locally and executed by IIS Express.

The Develop button will open the solution in Visual Studio. If it is already open, the button will switch to Visual Studio.

The Exit button will close the Designer and return to the project settings.

The Project Browser displays lists of project configuration elements. The lists offer the same Quick Find, sorting, and filtering capabilities that are available in Code On Time web applications. Notice that the Project Browser runs locally and only displays the project configuration stored on the hard drive without interacting with any web server.

Clicking on a link in the first column will navigate to the properties form of the selected item.

There may be additional tabs at the top of the window that allow access to related project configuration elements. The next screenshot shows Containers, Data Views, and Controls associated with Customers page.

The context menu Sync command selects the relevant element in the Project Explorer window on the right side of the Designer.

    

Clicking on links in the breadcrumbs will navigate directly to the parent project configuration element. The Home link will lead to the Home page of the Project Configuration Browser. Pressing OK or Cancel on the main tab will navigate back up one level.

The Project Explorer, on the right side of the Designer, displays a full hierarchy of project configuration elements across three tabs: Pages, Controllers, and User Controls.

The toolbar at the top of the Project Explorer offers context-sensitive commands. The buttons Sync, Navigate To, and Home are always displayed.

The first button, Sync, will synchronize the Project Explorer hierarchy node with the project configuration element selected in the Project Browser window.

The second button, Navigate To, opens a search window that will help find a project configuration element by name or property value.

The third button will display a list of top-level items in the Project Browser. The list depends on the active tab in the Project Explorer. For example, if the button is pressed when Controllers tab is active, a list of controllers will be displayed in the Project Browser window.

The fourth button will allow creating a new data controller, user control, or top-level page.

Additional options may be displayed depending on the selected node.

Double-clicking on a node will open the properties form for that project configuration element in the Designer window.

If you select a project configuration element in Project Explorer and click OK button to save the changes, then the same element will remain selected in the form. If you Cancel changes, then the original properties will be displayed in the form.

Multiple elements of the same type can be selected in the hierarchy. Many elements in the Project Explorer have Cut, Copy, and Paste commands available in the context menu. Users can drag and drop project configuration elements to modify the project configuration hierarchy. Drag and drop commands will work on multiple nodes.

Changing Application Configuration

The file Web.config is the main settings and configuration database of a ASP.NET web application. The file is encoded in XML format. Code On Time generator automatically creates and configures the web.config file based on the selected project settings.

Every subsequent generation of the project will recreate the web.config file.

It may be necessary to change the web.config file to link custom component libraries or enter custom entries required for the project. The application generator allows specifying Web.Config modification instructions to manipulate the file contents.

Start the web application generator, click on the project name, and select Settings. Click on Web Server Configuration.

The page of the wizard will have the Web.Config modification instructions textbox.

AppendChild

The AppendChild modification instruction will add elements as children of the specified element, provided that the element exists.

For example, consider the /configuration/appSettings section of a Web Site Factory project.

<configuration>
  <appSettings>
    <add key="ChartImageHandler" value="storage=file;timeout=20;dir=c:\TempImageFiles\;" />
  </appSettings>
  ...
</configuration>

Insert the following snippet in the Web.Config modification instructions:

AppendChild: /configuration/appSettings <add key="Setting1" value="Value1" /> <add key="Setting2" value="Value2" />

Generate the application. Open the web.config file, and find the new add elements. They were placed as children of /configuration/appSettings node.

<configuration>
  <appSettings>
    <add key="ChartImageHandler" value="storage=file;timeout=20;dir=c:\TempImageFiles\;" />
    <add key="Setting1" value="Value1" />
    <add key="Setting2" value="Value2" />
  </appSettings>
  ...
</configuration>

InsertBefore and InsertAfter

The InsertBefore modification instruction will add elements on the same level, before the specified node.

Append the previous modification instruction with the following snippet to insert the third add element before the second add element with key of “Setting1”:

InsertBefore: /configuration/appSettings/add[2] <add key="Setting3" value="Value3" />

The web.config file will look like this:

<configuration>
  <appSettings>
    <add key="ChartImageHandler" value="storage=file;timeout=20;dir=c:\TempImageFiles\;" />
    <add key="Setting3" value="Value3" />
    <add key="Setting1" value="Value1" />
    <add key="Setting2" value="Value2" />
  </appSettings>
  ...
</configuration>

Alternatively, the InsertAfter instruction can be used to place the new element after the first add element with key of “ChartImageHandler”:

InsertAfter: /configuration/appSettings/add[1] <add key="Setting3" value="Value3" />

The result will be the same.

<configuration>
  <appSettings>
    <add key="ChartImageHandler" value="storage=file;timeout=20;dir=c:\TempImageFiles\;" />
    <add key="Setting3" value="Value3" />
    <add key="Setting1" value="Value1" />
    <add key="Setting2" value="Value2" />
  </appSettings>
  ...
</configuration>

Delete

The Delete modification instruction will delete the element and any siblings. The nothing element is not incorporated in the web.config file but must be provided for the instruction to work.

For example, the configuration/appSettings element contains one add element by default:

<configuration>
  <appSettings>
    <add key="ChartImageHandler" value="storage=file;timeout=60;dir=c:\TempImageFiles\;" />
  </appSettings>
  ...
</configuration>

Use the following modification instructions:

Delete: /configuration/appSettings/add <nothing/>

This will result in all add elements being removed.

<configuration>
  <appSettings />
  ...
</configuration>

Editing an Element Property

There is no direct way of editing a attribute to an element. The original element must be deleted and replaced with a modified version.

For example, let’s have the application compile with debug mode enabled. The debug attribute of the compilation element is set to “false” by default:

<configuration>
  <system.web>
    <compilation debug="false" targetFramework="4.0">
    ...
    </compilation>
  </system.web>
</configuration>

Use the following instructions (each application will probably use different key tokens, so you will need to copy your own <assemblies> section):

Delete: /configuration/system.web/compilation <nothing/> InsertAfter: /configuration/system.web/globalization <compilation debug="true" targetFramework="4.0">   <assemblies>     <add assembly="System.Web.Extensions.Design, Version=4.0.0.0, Culture=neutral,  PublicKeyToken=31BF3856AD364E35" />     <add assembly="System.Design, Version=4.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A" />     <add assembly="System.Transactions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089" />     <add assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />   </assemblies> </compilation>

This will result in the following:

<compilation debug="true" targetFramework="4.0">
  <assemblies>
    <add assembly="System.Web.Extensions.Design, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
    <add assembly="System.Design, Version=4.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A" />
    <add assembly="System.Transactions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089" />
    <add assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
  </assemblies>
</compilation>

SQL Upsert

Upsert is an insert operation with detection of duplicates. The application will update the existing record when a duplicate is detected instead of creating a new record instance. Modern database engines support a dedicated SQL command Merge that performs this function. Applications created with Code On Time offer an elegant mechanism of SQL Business Rules that allows creating flexible and configurable Merge operations.

Let’s implement upsert for the Products table of the Northwind sample. The picture below shows two duplicate records of the product “Chai”.

The upsert implementation will detect an attempt to insert a duplicated product, and will update the values of the existing one.

Delete the duplicate “Chai” record from the list of Products, and paste the following query into SQL Server Management Studio:

-- debug
declare @ProductID int
declare @ProductName nvarchar(40) = 'Chai'
declare @SupplierID int
declare @CategoryID int
declare @QuantityPerUnit nvarchar(20)
declare @UnitPrice money = 42
declare @UnitsInStock smallint
declare @UnitsOnOrder smallint
declare @ReorderLevel smallint
declare @Discontinued bit
declare @BusinessRules_PreventDefault int
-- end debug

select @ProductID = ProductID
from Products
where ProductName = @ProductName

if @ProductID is not null
begin 
    set @BusinessRules_PreventDefault = 1
    update Products
    set 
        SupplierID = IsNull(@SupplierID,SupplierID),
        CategoryID = IsNull(@CategoryID,CategoryID),
        QuantityPerUnit = IsNull(@QuantityPerUnit,QuantityPerUnit),
        UnitPrice = IsNull(@UnitPrice,UnitPrice),
        UnitsInStock = IsNull(@UnitsInStock,UnitsInStock),
        UnitsOnOrder = IsNull(@UnitsOnOrder,UnitsOnOrder),
        ReorderLevel = IsNull(@ReorderLevel,ReorderLevel),
        Discontinued = IsNull(@Discontinued,Discontinued)
    where ProductID = @ProductID
end

The sample debug parameters represent values of a new product where Product Name is “Chai”, and Unit Price is “42”. The script will try to find an existing product that matches the Product Name. If a match is found, then the application framework is instructed to prevent executing the default Insert command. This is accomplished by setting the value of @BusinessRules_PreventDefault parameter to true. Then the new record values will be used to update the existing product. If a new column value is null, then the current column value is preserved with the help of IsNull function.

Execute the query. A message will state that 1 row was affected. Go back to the application and refresh the view, and you will see that the query has only updated the existing “Chai” record.

Let’s integrate this script in a new business rule of Products controller.

Start the Project Designer. In the Project Explorer, switch to the Controllers tab. Right-click on Products / Business Rules node, and select New Business Rule option.

Use the following properties.

Property	Value
Command Name	Insert
Type	SQL
Phase	Before
Script	Copy and paste the script from above.

This business rule will execute before every Insert command.

The application framework will ignore the debug section. You can keep the debug section in the script or take it out – it will not make any difference.

Press OK to save the new business rule. On the toolbar, click Browse option.

Navigate to the Products page. Create a new product with the following field values:

Field	Value
Product Name	Chang
Category Name	Condiments
Unit Price	99

Instead of creating the new record, the application updated the existing product. It is automatically selected in the user interface.

This business rule will also work with the Import action. Create a spreadsheet, and paste in the following table:

Product Name	Supplier Company Name	Unit Price
Alice Mutton		120
Aniseed Syrup	Tokyo Traders	44
ABCDE		42

Save the spreadsheet as a CSV (Comma delimited) file type.

On the action bar of the web application, select Actions | Import from File option.

Make sure that the columns are matching, and press Import.

Confirm the operation. Sort by the Product Name field by clicking on the header text. Two of the records already existed, and Unit Price and Supplier Company Name for these records has been updated. The “ABCDE” Product Name was unique, so the row was added.

There are advantages of using SQL Business Rules over the standard Merge operation. If additional processing is required or duplicate records have to be staged in a separate table, then business rules provide more flexibility over the insert/update combination offered by Merge.

Maximum Value Count

Field samples, multi value filters, and search bar auto complete entries display up to 200 related lookup items.

Let’s change the maximum number of lookup items displayed for Supplier Company Name of Products controller.

Start the web application generator. Click on the project name, and select Develop option. Visual Studio will start.

In the Solution Explorer, right-click 0n ~\App_Code folder, and select Add New Item.

 

Select Class item from the list, and press Add.

Replace the entire sample content of the file with the following:

C#:

using System;
using System.Web;
namespace MyCompany.Data
{
    public partial class DistinctValueRequest
    {
        public override int MaximumValueCount
        {
            get
            {
                if (Controller == "Products")
                {
                    if (FieldName == "SupplierCompanyName")
                        return 10;
                    else
                        return 20;
                }
                return base.MaximumValueCount;
            }
            set
            {
                base.MaximumValueCount = value;
            }
        }
    }
}

Visual Basic:

Imports Microsoft.VisualBasic
Imports System
Imports System.Web

Namespace MyCompany.Data
    Partial Public Class DistinctValueRequest
        Public Overrides Property MaximumValueCount As Integer
            Get
                If Controller = "Products" Then
                    If FieldName = "SupplierCompanyName" Then
                        Return 10
                    Else
                        Return 20
                    End If
                End If
                Return MyBase.MaximumValueCount
            End Get
            Set(value As Integer)
                MyBase.MaximumValueCount = value
            End Set
        End Property
    End Class
End Namespace

This class will instruct the application framework to use 20 distinct value samples for all fields in the Products controller with the exception of Supplier Company Name. The limit for Supplier Company Name is 10. No other controllers will be affected.

Save the class. On the keyboard, press Ctrl+F5 to start the web application. Navigate to the Products page.

Activate the Supplier Company Name header dropdown. Only the first 10 items will be available for selection.

Open the advanced search bar, and activate the Auto Complete dropdown for Supplier Company Name. Only 10 items will be displayed at one time.

The Multi Value Filter window will only display 10 items.

Other fields in the Products controller will display 20 distinct value samples, such as the Quantity Per Unit header dropdown.