Web 2.0

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
Web 2.0
Monday, January 9, 2012PrintSubscribe
Handling “Report…” Actions

Code On Time web applications support out-of-the-box reporting capabilities that require zero programming.

Standard Report Actions

All data views offer four standard actions that yield a different output.

  • Action “ReportAsPdf” will render the data presented to end users as a Adobe PDF document. The shorthand action “Report” will produce the same result. This type of report requires a compatible software installed on the client computer to view and print the report output. You can download free Adobe Acrobat Reader at at http://get.adobe.com/reader.
     
  • Action “ReportAsImage” creates a TIFF image file, which requires a compatible software installed on the client. TIFF format supports multiple pages and is a perfect alternative to PDF. The quality of output in PDF and TIFF formats is equivalent.
     
  • Action “ReportAsWord” renders a report as Microsoft Word document with a high-quality output. In some instances the output is less precise then the output produced by the action “ReportAsImage” and “ReportAsPdf”.
     
  • Action “ReportAsExcel” produces a Microsoft Excel spreadsheet that offer a lesser quality output due to rendering restriction of the popular spreadsheet software.

If a user  requests a “Report...” action then a report is rendered on the server with the help of Microsoft Report Viewer. The output is streamed to the client browser. Typically a prompt is displayed before a compatible installed software viewer will be activated. Users also have an option to save the output locally. If a viewer is not installed on the client computer then the prompt to save the file is the only option.

Code On Time web applications execute various server calls off-band to provide smooth Web 2.0 user experience. Modern web browsers make sure to prevent all sorts of popups initiated by the scripts embedded in the web pages. The client library makes use of correct techniques to process reports on the server without causing automatic activation of popup blockers.

Custom Report Action Handlers

Code On Time web applications created with version 6.0.0.19 or higher allow developers to perform custom processing of reporting actions in business rules. There are several reasons that may require an execution of  custom code that must precede or override the standard report rendering logic:

  • The data must be “prepared” before a report is rendered.
  • The report request must be logged.
  • An external report rendering engine is available. The custom code will redirect the report request to such an engine.
  • A special report preview page needs to be displayed.
  • A custom report building code must execute. The custom code replaces the standard report rendering logic.

Create a business rule for your data controller and implement methods to handle the corresponding “Report...” actions when you need to override the standard report processing.

Example

Generate a Northwind sample using Code On Time web application generator.

Select the project name on the start page of the code generator and click Design.

Select Controllers tab in the Project Explorer and enter CustomerBusinessRules in the Handler property of the Customers data controllers. Click OK to save the changes.

image

Expand Actions node of the Customers data controller in Project Explorer, right-click Actions and create a new action group with the Scope of Action Column.

Add a new action in the newly created action group, set its Command Name to Report, and Command Argument to _blank.

image

Here is the sub-tree of the Customers data controller with the  Report action selected.

image

Click Exit on the Designer tool bar and generate your application.

Select the project name on the start page of the web application generator and choose Develop. Visual Studio or Visual Web Developer will start.

Locate the file ~/App_Code/Rules/CustomerBusinessRules.cs(vb) and enter the following code.

C#:

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

namespace MyCompany.Rules
{
    public partial class CustomersBusinessRules : MyCompany.Data.BusinessRules
    {
        [ControllerAction("Customers", "Report", "_blank")]
        public void RedirectToCustomReport(string customerId, string companyName)
        {
            // Redirect user to another URL
            Result.NavigateUrl = String.Format(
                "~/Pages/Customers.aspx?CustomerID={0}&_controller=Customers" + 
                "&_commandName=Select&_commandArgument=editForm1",
                customerId);
        }

        [ControllerAction("Customers", "ReportAsImage", "")]
        public void GenerateCustomReport(string customerId, string companyName)
        {
            PreventDefault();
            // return the same image in response to all "Report..." commands
            Context.Response.Clear();
            Context.Response.ContentType = "image/jpeg";
            Context.Response.AddHeader("Content-Disposition", 
                String.Format("attachment;filename={0}.jpg", customerId));
            byte[] reportData = 
                File.ReadAllBytes(@"C:\Users\Public\Pictures\Sample Pictures\Koala.jpg");
            Context.Response.AddHeader("Content-Length", reportData.Length.ToString());
            Context.Response.OutputStream.Write(reportData, 0, reportData.Length);
        }
      
    }
}

Visual Basic:

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

Namespace MyCompany.Rules
    
    Partial Public Class Customers
        Inherits MyCompany.Data.BusinessRules

        <ControllerAction("Customers", "Report", "_blank")> _
        Sub RedirectToCustomReport(ByVal customerId As String, ByVal companyName As String)
            ' Redirect user to another URL
            Result.NavigateUrl = String.Format( _
                "~/Pages/Customers.aspx?CustomerID={0}&_controller=Customers" + _
                "&_commandName=Select&_commandArgument=editForm1",
                customerId)
        End Sub

        <ControllerAction("Customers", "ReportAsImage", "")> _
        Sub GenerateCustomReport(ByVal customerId As String, ByVal companyName As String)
            PreventDefault()
            'return the same image in response to all "Report..." commands
            Context.Response.Clear()
            Context.Response.ContentType = "image/jpeg"
            Context.Response.AddHeader("Content-Disposition", _
                String.Format("attachment;filename={0}.jpg", customerId))
            Dim reportData As Byte() = _
                File.ReadAllBytes("C:\Users\Public\Pictures\Sample Pictures\Koala.jpg")
            Context.Response.AddHeader("Content-Length", reportData.Length.ToString())
            Context.Response.OutputStream.Write(reportData, 0, reportData.Length)
        End Sub
    End Class
End Namespace

The first method RedirectToCustomReport will use the ID of the selected customer to compose a URL relative to the application. The URL will open in a new browser window and will force the application to select a customer with the specified ID.

The new window will open if your have entered the command argument as “_blank” when defining the action in Project Designer. If action command argument has been left blank then the new URL will replace the page in the web browser. Users will have an option to return to the previous page using the browser’s Back button.

The screen shot of the Customers page prior to execution of our Report action is shown next.

image

If you click on the Report button then a new browser window will open. You can see the address bar reflecting the ID of the selected customer.

image

Our web application is using its own capabilities to present the data with the help of data controller URL parameters. You can redirect the report action to a generic web request handler or to a web-enabled report server such as Crystal Reports or Microsoft SQL Server Reporting Services.

The second method GenerateCustomReport takes control over the report rendering completely.

First, the method cancels out the default reporting logic at the very beginning by calling PreventDefault.

Next it reads the file C:\Users\Public\Pictures\Sample Pictures\Koala.jpg and streams it out. In a real-world application you can produce any sort of output using a custom code.

The method uses the customer ID to assign the file name to the output.

If you are reproducing this sample on a Windows 7 computer then there is not need to change the code . Otherwise change the path to the image file accordingly.

Run your web app, navigate to Customers page and select a customer.

Choose Report | Multipage Image on the action bar above the list of customers.

image

The custom method will execute and you will see the following prompt to download the file AROUT.jpg if you browsing with IE 9.

image

Click Open and the default image viewer will start.

image

If you select any other customer and choose the same action bar option then exactly the same image will be downloaded but the file name will reflect the actual primary key of the selected customer.

In a real-world applications you will likely stream other formats of output such as PDF or custom Microsoft Office documents using 3rd party reporting software.

Saturday, January 7, 2012PrintSubscribe
Code On Time Tools for Excel

We are pleased to announce the new development tool that will complement Rapid Application Development capabilities available in Code On Time web application generator. The new tool will allow business users and developers to maintain all design aspects of Code On Time web applications with Microsoft Excel 2010.

Code On Time Tools for Excel complement the designer built in the code generator. A custom ribbon tab will be available in Microsoft Excel if the COT Tools for Excel is installed on the computer. Ribbon controls will allow selecting projects and populating Excel worksheets with data controllers, pages, fields, views, and other objects that constitute a Code On Time web application. Users will be able to manipulate this information and have the changes incorporated in the project design. The ribbon will also offer control to initiate the code generation and preview the results.

The new tools build on the strength of Designer Spreadsheet (/Documents/UGP3-Using_Excel_to_Build_ASP.NET_AJAX_Apps.pdf. The spreadsheet has been phased out in the latest release of Code On Time. The original implementation has been limited due to technological approach that we have chosen.

Code On Time Tools for Excel will behave as an equal partner to Project Designer available in the code generator. Project changes done in Excel will be recorded in the change log and cache snapshot of the project.

The tools will be released in February / March of 2012.

Saturday, October 22, 2011PrintSubscribe
Wizards and Status Bars

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.

image

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.

image

image

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.

image

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.

image

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.

image

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

image

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.

image

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.

image

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.

image

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.

image

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.

image

“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.

image

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.

image

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.

image

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”.

image

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

image

Status equals “Step 3”.

image

Status equals “Step 4”.

image

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.

image

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”.

image

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.

image

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.

Continue to DotNetNuke Factory