Code On Time: User Interface

Blog

User Interface

Wednesday, August 1, 2012Print Subscribe

Data integrity is enforced with validation and conversion business rules. The Project Designer can quickly create and configure generic business rules with a single click. JavaScript, SQL, and Code (C#/Visual Basic) validators and converters are created from the context menu of the fields in Project Explorer.

Converter

The generic converter will convert the field value to uppercase.

For example, the Category Name field in the Categories controller has been configured with the default SQL converter. The sample script is shown below.

if @CategoryName is not null and 
    (@Arguments_CommandName <> 'Calculate' or
     @Arguments_Trigger = 'CategoryName')
begin
    set @CategoryName = upper(@CategoryName)   
end

The user may enter any value into the field.

When focus is shifted away from the field, the conversion will take place.

SQL and code validators are executed on the server.

Validator

The generic validator will ensure that the field value is not blank.

The Description field of Categories controller has been configured with the default JavaScript validator:

var fieldValue = [Description];
if (fieldValue == null) {
    // prevent the default action processing
    this.preventDefault();
    // set the focus on the field and display an error
    this.result.focus('Description', 'Required field.');
}

After typing a category name, pressing OK will display a message next to the Description field, despite the fact that the field is not marked as required.

These sample validators and converters can be expanded to perform more complex operations to fulfill specific business requirements. Any single validator or converter can handle multiple fields when necessary.

Labels: Features, User Interface, Web Application Generator

Wednesday, July 25, 2012Print Subscribe

Data Action Notifications

Notifications can be displayed as confirmations after any data manipulation operations.

Let’s implement a code business rule to display a notification after every Update, Insert, and Delete action.

Enable shared business rules. Generate the web app.

Start the Project Designer. On the toolbar, press Develop to open the project in Visual Studio.

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

Replace the existing code 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 SharedBusinessRules : MyCompany.Data.BusinessRules
    {
        protected override void AfterSqlAction(ActionArgs args, ActionResult result)
        {
            base.AfterSqlAction(args, result);
            if (result.Errors.Count == 0 && args.CommandName == "Update" ||
                args.CommandName == "Insert" || args.CommandName == "Delete")
            {
                Result.ShowAlert("The action {0} has been completed.", args.CommandName);
                Result.Continue();
            }
        }
    }
}

Visual Basic:

Imports MyCompany.Data
Imports System
Imports System.Collections.Generic
Imports System.Data
Imports System.Linq

Namespace MyCompany.Rules

    Partial Public Class SharedBusinessRules
        Inherits MyCompany.Data.BusinessRules

        Protected Overrides Sub AfterSqlAction(args As ActionArgs, result As ActionResult)
            If (result.Errors.Count = 0 And Arguments.CommandName = "Update" Or
                Arguments.CommandName = "Insert" Or Arguments.CommandName = "Delete") Then
                result.ShowAlert("The action {0} has been completed.", Arguments.CommandName)
            End If
        End Sub

    End Class
End Namespace

Save the file. Press Ctrl+F5 to run the web application from Visual Studio.

Navigate to any page, edit a record, and save. A popup window will open, displaying a notification.

Labels: Business Rules/Logic, User Interface, Web Application Generator

Tuesday, July 24, 2012Print Subscribe

Tooltips

Tooltips, also called hints, are commonly used to clarify application element functions to the end user.

Let’s apply a tooltip to the Unit Price data field in the New Order Details form.

Start the Project Designer. In the Project Explorer, switch to the Controllers tab and double-click on OrderDetails / Views / createForm1 / c1 – New Order Details / UnitPrice data field node.

Change the Tooltip property:

Property	New Value
Tooltip	Please specify the agreed upon price per unit in this order.

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

Navigate to the Order Details page, and create a new order detail. Mouse over the Unit Price input, and the specified tooltip will appear.

Labels: Database Lookups, Designer, Features, User Interface, Web Application Generator