Code On Time: User Interface

Blog

User Interface

Saturday, October 22, 2011Print Subscribe

Code On Time web applications offer powerful methods of presenting your data with very little effort. In this tutorial we will show you how to create a wizard form view with the context sensitive status bar.

Form views editForm1 and createForm1 are included with each data controller in a generated Code On Time web application. The first form, editForm1, is typically used to present a data row in “view” or “edit” mode. The second form, createForm1, provides user interface for “new” data rows.

The picture below shows an example of editForm1 rendering an employee record in “view” and “edit” modes.

Each form view must have at least one category that binds data controller fields to a view. A binding of a field to a view is called a “data field”. Only one binding of a field to a view can exist in any type of view.

For purposes of this tutorial, create your own Northwind sample application as explained at /blog/2011/10/northwind-sample.html.

Multiple Data Field Categories in Form Views

A simple list of business object data fields presented in a form view works well in many situations. On the other hand, business requirements might call for a grouping of related fields and even conditional display of field groups based on the user input.

Consider the following screenshot depicting automatically generated createForm1 of Employees data controller.

Let’s break this form in four categories presenting “New Employee” fields, “Address”, “Miscellaneous” information, and an overall “Summary” of a new employee record.

Start the web application generator, select the name of your project, and click the Design button.

Select Employees data controller on All Controllers tab.

Activate Views tab and select view createForm1.

Activate Categories tab, shown below.

Rename New Employees category to New Employee and clear the description.

Add three more categories with the following properties:

Header Text	Visibility	Description
Address	true	Enter address of {FirstName} {LastName}.
Miscellaneous	true	Enter {FirstName} {LastName}'s phone number, birthday, any relevant notes.
Summary	true	Please review the summary of the new record. <div style="margin:8px; padding:8px; height:220px; overflow:auto; border:solid 1px silver"> Last Name: {LastName}<br/> First Name: {FirstName}<br/> Title: {Title}<br/> Title Of Courtesy: {TitleOfCourtesy}<br/> Birth Date: {BirthDate}<br/> Hire Date: {HireDate}<br/> Address: {Address}<br/> City: {City}<br/> Region: {Region}<br/> Postal Code: {PostalCode}<br/> Country: {Country}<br/> Home Phone: {HomePhone}<br/> Extension: {Extension}<br/> Notes: {Notes}<br/> Reports To: {ReportsTo}<br/> Photo Path: {PhotoPath}<br/> </div>

The list of categories in Designer will look as follows.

All data fields are presently bound to the New Employee category.

Let’s change that. Select view createForm1 in the path at the top of the Designer page and activate Categories tab.

Select Address category, activate Data Fields tab and add new data fields referencing Address, City, Region, PostalCode, and Country fields of the controller.

You will notice that the Designer automatically copies properties of the fields from New Employee category. Designer also removes the fields from New Employee category to ensure that there are no duplicate field references.

Now follow the same routine and add TitleOfCourtesy, BirthDate, HomePhone, Notes, ReportsTo, and PhotoPath to Miscellaneous category of view createForm1.

The new layout of fields of the view createForm1 is presented in the screen shot.

We also recommend that you select data fields Title and TitleOfCourtesy and set their Auto Complete Prefix Length property to “1”. This will provide an auto complete option for both fields.

Generate web application and start creating a new Employee record. As you enter values in FirstName and LastName fields, the descriptions of categories will change. Notice that John Doe is displayed in the category descriptions in the picture below.

Dynamic Category Descriptions

References to the names of fields enclosed in curly brackets are automatically replaced with field values as soon as the field value is changed, provided that the category visibility is dynamic.

Descriptions are automatically formatted with field value injection when you open a form view. If the category visibility is not dynamic then the values will not change even if the user is editing the record.

We have entered “true” expression in Visibility property of Address, Miscellaneous, and Summary categories. The expression is written in JavaScript and evaluated whenever data values are changed by user. This will ensure that the categories will be permanently visible, as true tends to evaluate to true.

The following picture shows collapsed Address and Miscellaneous categories and fully expanded New Employee and Summary categories. Note that Summary category has no fields bound to it but displays dynamic content thanks to the expressions embedded in the category description.

Converting Form View to a Wizard

Our form is quite lengthy and warrants some refinement and simplification.

We will change the form to present one category at any given time and move between categories upon request. This style of presentation is often referred as a wizard. Data field categories in view createForm1 will become “pages” of the wizard.

If a category is visible then two buttons Back and Next will be visible as well to allow advancement to the next step or return to previous step of data collection.

We will rename OK button to Finish and have it available on the Summary page of New Employee wizard only. Button Cancel will remain visible at all times.

“Status” Field

The upcoming release of EASE (Enterprise Application Services Engine) will be available in Unlimited edition of Code On Time. It has also brought some enhancements to the application framework for other editions.

Various elements of your application pay special attention to the presence of a field named “Status”.

The column named Status is frequently found in database tables of a typical line-of-business application. This column generally contains a short phrase or a number reflecting the business state of a data row representing a business object. For example, an Order can have a status of Draft, Open, Cancelled, or Ready to Ship.

Code On Time application framework assumes that field Status exists in all data controllers. Client library will automatically add a virtual Status field to any business object if the physical field is not found.

Visibility of Categories

Implementation of a wizard calls for some sort of status that can be used to determine the active “page” of the wizard.

We will use the virtual “Status” field to determine the visibility of a category and have the value of the field change when a user moves from one “page” of the wizard to another.

Change the Visibility expression of categories in createForm1 view as follows.

Category	Visibility Expression (JavaScript)
New Employee	[Status] == null \|\| [Status] == 'Step 1'
Address	[Status] == 'Step 2'
Miscellaneous	[Status] == 'Step 3'
Summary	[Status] == 'Step 4'

The screenshot of Project Designer shows categories with modified Visibility expression.

The initial value of virtual field “Status” is null, which will guarantee that only New Employee category is visible when a user starts creating a new record.

“Status” Action

If you were to implement an order management system with each order having a certain status then it is possible that you would have used a drop down list of available statuses to present the current status value.

Most of the time, change of the internal status of a business object results in a change to the user interface.

A status change is better implemented as a user interface action. For example, a buyer will set the order status to Submitted by pushing a Submit button. An employee in the shipping department will select a menu option Ship to change the order status to Shipped.

Code On Time web applications offer different action scopes that result in clickable links and button rendering in forms, on action bars, in action column, and grid context menu. We have introduced a new standard action Status that will change the value of a virtual or physical field with the name “Status” to the argument of the action.

Click Employees controller in the path at top of the page in the project designer and activate Action Groups tab.

Select action group ag2 with scope of Form. Activate Actions tab of the group.

Filter available actions by When Last Command Name property with value New. You will see definitions of two actions with command names Insert and Cancel. These actions are rendered as push buttons with captions OK and Cancel in the previous picture.

Add seven actions defined below.

#	Command Name	Command Argument	Header Text	Causes Validation	When Last Command Name	When Client Script
1.	None		Back	No	New	[Status] == null \|\| [Status] == 'Step 1'
2.	Status	Step 2	Next	Yes	New	[Status] == null \|\| [Status] == 'Step 1'
3.	Status	Step 1	Back	No	New	[Status] == 'Step 2'
4.	Status	Step 3	Next	Yes	New	[Status] == 'Step 2'
5.	Status	Step 2	Back	No	New	[Status] == 'Step 3'
6.	Status	Step 4	Next	No	New	[Status] == 'Step 3'
7.	Status	Step 3	Back	No	New	[Status] == 'Step 4'

Open the context menu of Insert action and choose Make Last.

Change its Header Text to “Finish” and enter the following expression in When Client Script property.

[Status] == 'Step 4'

The list of actions will look as follows in the project designer.

Wizard in Action

Generate application and start entering a new Employee record.

User can cancel creation of a new record at any time by pushing Cancel button.

The first “page” of the wizard displays a disabled “Back” button representing the action with command name None. Action None is always displayed as disabled and provides a useful placeholder that gives the user interface consistency.

On this page, Status equals “Step 1”.

Press Next, and Status will change to “Step 2”.

Status equals “Step 3”.

Status equals “Step 4”.

Complex “When Client Script” Expressions

The configuration of navigational actions may seam to be quite a challenge at first. The truth is that there is not much value in a simple flow of wizard “pages” in our sample. A simple list of categories and ability of web pages to scroll do the job quite well.

In a real world your When Client Script expression will likely be more complex.

For example, one can imagine that different employee setup scenarios will be required, based on the employee job description or country.

You can add multiple Status actions activating various categories of the wizard with When Client Script expressions such as this.

[Status] == 'Step 4' && [Country] == 'USA' && [Title] =='Senior Manager'

The expression can manipulate any data field if you are referencing them in square brackets.

Status Bar

Business applications are designed to reflect complex processes of real life. Software developers and designers use the visual language of screens, menus, and various controls to approximate the business processes.

Naturally, the end users of your applications are true experts in their field and will evaluate any such approximation with a critical eye. It usually takes time for a user to understand the relationship of an application screen to an element of a real-world process.

Assigning a status to data representing a business process goes a long way towards making it easier for users to interact with your application.

The perfect example of a business process is an internet shopping cart. A seller has to collect enough information from a customer to ensure that the order is correctly placed, processed, and fulfilled. Internet customers are very impatient and will abandon their shopping cart if takes too long to complete the process or if the ordering process is confusing.

Sellers are “holding” the customer’s hand through the checkout by presenting information about the completed, current, and next steps that need to performed. Typically this is accomplished though a progress bar that indicates the current stage of the checkout process.

A progress bar gives customers a peace of mind and helps them better understand what is going on.

The same exact care must be exercised when programming any other business process.

Start web application generator and select your project. Click Design button and select Employees data controller on All Controllers tab.

Enter the following in the Status Bar property of the data controller and save the changes.

Employees.createForm1.Status: null
[New Employee] > Address > Miscellaneous > Final Review >

Status: Step 1
[New Employee] > Address > Miscellaneous > Final Review >

Status: Step 2
New Employee > [Address] > Miscellaneous > Final Review >

Status: Step 3
New Employee > Address > [Miscellaneous] > Final Review >

Employees.Status: Step 4
New Employee > Address > Miscellaneous > [Final Review] >

Generate your project and observe the status bar displayed just above the description of the view createForm1. This illustration shows the status bar detecting that value of the Status field is “Step 3”.

A status bar is defined by a collection of status values matched to the bar’s topology.

A status value is defined using one of the following methods:

Status: Value
ControllerName.Status: Value
ControllerName.ViewId.Status: Value

ControllerName and ViewId components of the status value are optional.

The second method is provided to support workflows of applications with EASE (Enterprise Application Services Engine). One workflow may define action groups, views, and virtual pages of multiple data controllers. A single status bar definition is defined per workflow.

Use the third method to create variations of status bars presented in different views. This method is also useful when there is no physical Status field.

If field Status in a given data row is empty then the status value is assumed to be null.

Status value is followed by status bar topology. Simply list logic definitions of the past, current and future statuses ending them with “greater than” character. The current logical status is wrapped in square brackets and separates past statuses from the future ones.

It is up to you to provide meaningful logical statuses. For example, our physical status values Step 1, Step 2, Step 3, and Step 4 are defined in status bar topology as New Employee, Address, Miscellaneous, and Final Review.

You can even make up your own logical statuses to help users establish a relationship of a visual presentation with the real world.

Note that Status Bar feature is available in Premium and Unlimited editions only.

Conclusion

Code On Time web applications offer first class high end features that require little or no programming. Wizards and Status Bars are a great example.

EASE workflows will make it possible creating user-specific views and pages enhanced with custom actions and status bars at runtime without changing the application.

Labels: Application Factory, EASE, Tips and Tricks, User Interface, Web 2.0, Web App Generator

Tuesday, October 11, 2011Print Subscribe

DotNetNuke Factory, Oracle Data Provider, Wizards

Code On Time has released a new update 5.0.0.72 with major features and enhancements.

Please see update notes below:

New code generation project DotNetNuke Factory creates application pages as controls with data views incorporated in a DotNetNuke module. Registered module can be configured by end users. You can integrate a line-of-business database application with a popular open source web content management system in minutes.
Added support for native Oracle.DataAccess client with full support for sequences on primary key fields. Primary key fields of integer type are expected to have sequences named after the name of the tables. For example , “CUSTOMER_SEQ” sequence is expected to match “CUSTOMER” table.
Projects generated from Oracle databases now recognize database views.
Introduced "client-only" virtual Status field to support wizards. Support for new Status and None actions to allow easy implementation of Wizards. The tutorial will be available shortly.
Ajax Control Toolkit 50731 is now shipping with the code generation library.
RichEditor has been changed to support new HtmlEditorBehavior from Ajax Control Toolkit. Read more about the new rich text editor at http://stephenwalther.com/blog/archive/2011/08/01/ajax-control-toolkit-july-2011-release-and-the-new-html.aspx.
Action buttons displayed in forms are now automatically refreshed when data is changed.
WhenClientScript property of actions can now reference values of fields by enclosing the field name in square brackets. For example [Status]. The same capability already exists in visibility expressions for categories and fields.
Numerous improvements to the message bar (yellow message at the top of the screen). It now takes up to 15% of the window height and starts scrolling when needed.
Sidebar boxes are fixed at the top of the screen if there in no horizontal scrolling.
Automatic resizing in multi-column forms is not performed anymore.
Adding a data field to a category will remove any bindings of the field that may exist in other categories of a view.
Designer automatically transfers properties of existing data fields when a field is defined in a new category or view.
Field validators are now using IDs to identify expressions in Project Designer.
Data Field visibility rules are now using IDs to identify visibility expressions in Project Designer.
Category visibility rules are now using IDs instead of header text as primary key. Category description is not mandatory in the new release. Any characters can be used in the category header text.
Bread crumbs of many project items in Designer now include extended information.
Filters and sort order are restored in the grid/data sheet view if you select a record and then return back.
Filtering is automatically disabled on timestamp fields to prevent errors when users do Quick Find or try to apply a filter.
Presence of "onDemand" attribute was causing incorrect production of automatic reports. The issue has been resolved.
Fields with explicitly defined value/text items will correctly render on the search bar. Text of items is displayed instead of actual values.
If a field has explicitly defined value/text item pairs then the multiple-value filter will correctly display the values. The field will also correctly align as text (to the left) and will print in filter details.
Reports will print correctly item text when item value/text pairs are explicitly defined on a field level (0-Open, 1-Closed, 2-Pending). This applies only to .NET 4.0 projects.
Regex validators are invoked when a field value has changed.
Data access objects based on tables that have a primary key field name matching the table name will not result in compilation error.
New implementation of DataController.UserIsInRole takes an array of roles. Each value can be specified as a comma-separated list of roles or simple role name.
Fixed designer error "Can't execute code from a freed script".
Trimming of long words used in summary boxes has been improved to correctly process HTML tags, which was previously causing incorrect display of history.
Designer displays Up/Down options on field Items page.
Values of fields with "Format On Client" set to "False" will print correctly in reports.
Long standing problem with UTF-8 encoding not being applied generated filed has been resolved.
"_Mirror" fields supporting server side formatting have been improved to allow editing of field values.
Hidden primary keys are rendered as "hidden" inputs in insert mode.
Multiple value selection is passed correctly when action is executed from a modal form.
Hidden, static, and read-only fields are now passed as "read-only" to updates performed in response to Batch Edit commands. This ensures that there will no exception "Object not found" with "audit" fields processing (ModifiedOn, ModifiedBy).
Generated *.designer.vb files are now using WithEvents in declarations of control fields.
.NET 3.5 web apps will display rounded corners in modal views.
Implemented Web.DataView.goBack() method in the client library to suppress cancelled requests to retrieve the child data sets when data controller URL parameters are used on complex master/detail pages.
Aliased fields are correctly displayed on automatic search bar if the field's Search Mode property is set to Required or Suggested.
Exception "Key not present in dictionary" now displays the name of the field that is no longer available in the data controller but referenced in its definition.
Code generator project file now supports “zip” mode when executing “copy” instruction.
Universal ProviderFactories variable lists all DB and Membership providers registered in machine.config of standard and 64-bit Microsoft.NET. ProviderFactories variable is now used to configure references to required external assemblies in web.config.
Button “Next” on the data controller summary now reads “Generate”.

Labels: Application Factory, Data Aquarium Framework, DotNetNuke, Oracle, Release Notes, User Interface, Web App Generator

Tuesday, June 28, 2011Print Subscribe

Highlighting “Past Due” and “Within” Data Rows

Code On Time generates applications that can be styled with CSS rules to adjust logo, background, and provide conditional formatting of the data views.

The latest enhancements to the client library allow creating complex rules that depend on current date and time.

The screenshot below shows a list of orders from the Nortwhind database sample presented in a Data Sheet view. Conditional styling rules are applied to the view.

The second row from the top has a pink “FiveDays” background since the required date for this order is 7/2/2011 and the date in the screen shot is 6/28/2011, which places the order within five days of the required date.

There are four rows with red background. The “PastDue” background is applied to these rows since the first row has been shipped after the required date and the other three were not shipped.

Here is how you can set this up in your own application.

Start the code generator, select your project, click Design button, activate All Controllers tab and locate your controller.

Select the controller and activate Views tab.

Select view grid1 and activate Styles tab.

Enter two styling rules shown in the picture

The test formulas shown below are referring to the Orders table from the Northwind sample.

Css Class	Test
FiveDays	[ShippedDate] == null && Date.$within([RequiredDate], 5)
Past Due	Date.$pastDue([ShippedDate], [RequiredDate])

Tests are written in JavaScript. Data controller field names are specified in square brackets. The client library will substitute references to the fields names with calls to a function that will return the field values. The expressions will be evaluated for each data row to see if a custom CSS class must be assigned to the table row.

Client Library extensions to the Date class are being used to test the dates. The extensions are Date.$within and $Date.pastDue.

Exist the designer and generate your application. Open your project in Visual Studio via File | Open Website option if your app is a Web Site Factory project or File | Open Project if your app is a Web App Factory project.

Add new CSS style sheet in your project under the ~/App_Themes folder.

Double click your new style sheet and enter the following CSS rule.

.FiveDays td.Cell
{
    background-color: #FFCCCC!important;
    color: Black !important;
}

.PastDue td.Cell
{
    background-color: #CC3300!important;
    color: Black !important;
}

It is very important to use “!important” after the CSS property values to override the default style sheets of your application.

Run your application in a web browser and make sure to hit the refresh button to ensure that the styles are taking effect.

Labels: AJAX, Application Factory, ASP.NET, Tips and Tricks, User Interface, Web 2.0, Web App Generator