Blog: Posts from October, 2011

Labels
AJAX(112) App Studio(7) 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(177) 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(183) 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(2) 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
Posts from October, 2011
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.

Thursday, October 20, 2011PrintSubscribe
Northwind Sample

Many of Code On Time tutorials are using Northwind sample database created by Microsoft to illustrate concepts of database design and implementation with Microsoft SQL Server.

The database is somewhat outdates and does not reflect the latest advancements in Microsoft SQL Server features and capabilities. Nevertheless it provides a perfect dataset to illustrate the concepts of code generation.

We have included the script creating the Northwind sample database with the code generator. The script can be used to create a sample dataset for Microsoft SQL Server 2005, 2008, and SQL Azure.

Please follow this instructions if you want to create your own Northwind database sample.

Getting SQL Server on Your Computer

Download and install Microsoft SQL Server Express edition if you have not done so already. You can download the server along with free development tools that will help you customizing generated web applications at http://www.microsoft.com/web/downloads/platform.aspx. The link provides access to Microsoft Web Platform Installer, which makes the download and installation process extremely simple and pain-free.

If you do have a retail or development version of Microsoft SQL Server then this step is not needed.

If you are developing with other types of databases, such Oracle, DB2, MySQL, Microsoft Access, then getting Microsoft SQL Server Express installed will still help to get started with Code On Time. Generated web applications use provider-independent model to access data. It means that there is no code specific to Microsoft SQL Server in the generated application framework. If your back-end database server is Oracle 11g then exactly the same code will be generated.

Creating a Database

Run Code On Time and start creating a new Web Site Factory project.

image

Enter project name and choose your programming language (C# or Visual Basic.NET):

image

Click Next button to advance to Database Connection page of the project wizard.

Click the button next to the Connection String field to open the connection configuration window.

image

If you just have installed Microsoft SQL Server Express Edition on your computer then enter the following text in the Server field :

.\SQLExpress

The dot in front of “\SQLExpress” indicates that you are connecting to your own computer.

If you already have a database server or working with SQL Azure then enter the actual server name or IP address.

Enter Northwind in the Database field and click Create button to create a blank database. You should see a message stating that the database has been created successfully.

Select Northwind in the drop down under Sample Tables and click Install button. You will notice the activity log displaying various SQL statements executed against the database. A message indicting completion of the process will be displayed.

image

Click Add button under Membership section to create optional support for ASP.NET Membership in your database. This option is not available in DotNetNuke Factory projects.

Azure Factory project offers additional section to configure session state support for multi-server deployment.

Wait for membership installation to complete and click OK button to save the settings.

Click Next button several times until you reach the summary of data controllers that will be implemented in your web application.

image

Click Generate to start the code generation.

A browser window will open up when code generation has been completed.

Start using and customizing your own Northwind sample.

image

You can reference the same database in other projects whenever you need.

Tuesday, October 18, 2011PrintSubscribe
DotNetNuke Factory with DNN 5.6.3

DotNetNuke Factory has been designed for use with the latest version of DotNetNuke, 6.0.2 (you can find the instructions for 6.0.2 here). This article will guide you through the steps to deploy to the previous version, DotNetNuke 5.6.3.

Installing DotNetNuke 5.6.3

First things first – let’s download DotNetNuke 5.6.3. We used the New Install download from CodePlex at http://dotnetnuke.codeplex.com/releases/view/67841. Save the zip file on your computer.

image

Once the download is complete, you will need to extract the files within the zip folder. We suggest extracting to [My Documents]/My Web Sites/MyDNN563.

image

Wait until all files are extracted, then run Microsoft’s WebMatrix. Press Site From Folder, and select the “MyDNN563” folder.

image

The website will be loaded into WebMatrix. On the ribbon, press Run to start the website. The DotNetNuke Installation Wizard will start.

image

Select “Typical Installation Method” and press Next. Confirm that your site will pass the permissions check and continue.

The next screen requires you to configure your database connection. Make sure to enter the correct settings for an existing database, and enter an object qualifier of “DNN” so that DotNetNuke’s tables will not encroach on your own.

image

Press Next to start database installation. Wait until completion, and press Next. You will have to configure the Host and Admin accounts. We will be using “host123%” and “admin123%” default passwords.

When you finish account creation, the DotNetNuke website will load.

image

Creating a DotNetNuke Factory Project

Let’s create a DotNetNuke Factory project for this website. Run Code On Time Generator, and create a new project, of type DotNetNuke Factory.

image

Give the project a name of “MyDNNFactory” and press Create.

image

On the next page, you will need to specify the path to the DotNetNuke website. Use the “…” button to browse for the folder, and select the “MyDNN563” folder.

image

Click Next and you will arrive to the Database Connection page.

Typically, your application will share the database with DotNetNuke, particularly if you plan to sell or distribute your module to other owners of DotNetNuke portals. If this is your situation, leave “Use connection string of the host application” box checked.

You can also use DotNetNuke as a powerful front end for the Internet facing portion of your web site and build an application with other types of backend database servers such Oracle and MySQL. If this is the case then make sure to uncheck “Use connection string of the host application” box and configure your database connection.

image

If you are creating your first app in a blank SQL Server database then we suggest populating this database with content. Click the “…” button next to Connection String field. Select the Northwind sample tables, and press Install. Press Yes to confirm installation.

image

Press OK twice to go back to the Wizard, and continue to the next page. Enable reporting in the application and press Next. In the list box, switch to Package Properties. These are the settings for the DotNetNuke module. Change Friendly Name to “My DNN Module”.

image

Continue pressing Next, then Generate, and wait for the generated web application to load in your browser.

Preview Web App

You will see a login screen – enter the credentials you specified during installation of DotNetNuke.

image

The next page will require you to select a logical page to display. Click on a page and press Update.

image

The page will be loaded in your browser.

image

The pages in the screen shots above are not a part of DotNetNuke portal. These pages simulate a hosting environment for your application. Your application “lives” in the Preview area of the main page of the host application.

This test web app is useful for making changes to the application and quickly previewing. You can log out and try different identities and configure the host page to present different logical pages of your applications.

Publishing DotNetNuke Factory Project

Now it’s time to publish the application to the DotNetNuke portal. Bring up Code On Time generator and select the publish action next to your project.

image

The resource file used to distribute DotNetNuke modules is created for your application and presented in Windows Explorer folder window. You can use this file to install your application in a different portal. The code generator will also copy this resource into the installation folder of the previously specified DotNetNuke instance.

We can now continue installation from within our own DotNetNuke portal.

Installing the Module

Bring up the browser window with DotNetNuke portal. If you have lost the window then start the application again using WebMatrix. Login as host/host123%. Only host users are allowed to install new modules and other types of extensions. Click on the Host link at the top of the portal page, and press Extensions under Basic Features.

image

Scroll to the bottom of the page and select “Install Available Extensions”. Select the “MyCompany.MyDNNFactory” package file, and press Install Selected Extensions.

image

Go back to the Home page. Let’s create a new page using the toolbar at the top of the page. Give it the name of “Northwind”, and insert after Home.

image

Press Add Page, and the page will appear on the menu bar. It will have one module, called Enter Title. Press Edit Module, scroll down, and press Delete. The page will now appear blank. Now let’s add our Northwind module using the Insert Module section at the top of the page. The Title will be “Northwind” and the Module will be “My DNN Module”.

image

A Northwind module will appear, but will tell you that a logical application page has not been selected. Press the Edit button in the bottom right corner of the module. Uncheck “Inherit View permissions from Page”, and allow registered users to view the module. Scroll to the bottom, and select a logical page.

image

Press Update, and you will see a page similar to the one shown below.

image