Web Form Builder

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(8) OAuth Scopes(1) OAuth2(11) Offline(20) Offline Apps(4) Offline Sync(5) Oracle(10) PKCE(2) PostgreSQL(2) PWA(2) QR codes(2) Rapid Application Development(5) Reading Pane(2) Release Notes(180) Reports(48) REST(29) RESTful(29) RESTful Workshop(15) RFID tags(1) SaaS(7) Security(80) 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
Web Form Builder
Thursday, June 23, 2016PrintSubscribe
Web Site Factory

All project types have the same level of features, offered in different forms. Web Site Factory projects are the simplest and easiest to work with. They do not require Visual Studio or any extensions in order to compile just-in-time. The folder layout can be seen below.

Folder layout of Web Site Factory project.

All files necessary for Code OnTime app generator to create the project are located at the root. The solution file, used by Visual Studio, is also located at the root. All web site files and folders are located in the ~/WebSite folder. This folder layout makes it easy to place the entire project folder under source control.

Note that Web Site Factory projects created in release 8.5.8.0 or below will have all project and web site files and folders at the root of the project, and the solution file was placed at ~/Code OnTime/Solutions/Web Site Factory/[Project Name] folder. The app generator will ask to move the web site files under the ~/WebSite folder if an older project is detected in release 8.5.9.0 or above. Selecting ‘Yes’ will automatically move the files. If your project is under source control, press ‘No’ and move the files manually to match the folder layout above.

Learn how to get started creating a Web Site Factory project.

Tuesday, December 15, 2015PrintSubscribe
Getting Started with Model Builder

Code On Time release 8.5.6.0 introduces Model Builder – a new way to build the app you want.

In the past, applications created with Code On Time created a baseline for every entity in the database, and tried to estimate the best configuration for every page, controller, and application component. A frequent complaint about the previous versions about the app generator is the lack of ability to control this automatic process. In response to these complaints, we have included a new feature, designed to give Code On Time users more control over the application development process.

The Model Builder allows developers to design a data model for each and every database entity used by the app generator. They can pick and choose fields to include in the model, define or create foreign key relationships, and even import fields from several levels away easily. Names and labels can be easily changed, formatting can be applied globally, and sorting and filtering can be applied to form a business entity.

The Model Builder is now the first step for the creation of any Code On Time premium database app.

See an example of the default data model for Order Details table of Northwind database.

example of the default data model for Order Details table of Northwind database

In addition to Model Builder, the following noteworthy bug fixes and improvements have been added to release 8.5.6.0:

  • Support for Visual Studio 2015
  • Support for Azure 2.7 and 2.8
  • Support for .NET 4.6
  • CodeMirror integration in Model Builder and Project Designer
  • Charts in Touch UI now support color tags. Specify a list of colors, like so: "pivot1-row1-colors:'red, green, blue'".
  • Added tag “calendar-mini-disabled” to disable the mini calendar on the sidebar
  • Controller XML files ending with “.baseline.xml” in the Controllers folder will be used as a baseline controller, ignoring the data model.
  • Fixed scaling problem on high DPI devices.
  • Touch UI inputs now show a single line below the input.
  • Neutral cultures are now included in the list supported by app generator
  • Boolean fields will show check glyphicon in Touch UI when in read-only mode
  • Many more minor bug fixes

Working with the Model Builder

After entering the database connection string, a list of database entities will be listed. Select an entity to start building a data model.

List of database objects listed that can be used to create data models.

The Model Builder will open.

The default data model for Products table.

Adding additional fields to the data model is simple. Check the box next to a column to include the field.

Including "Country" field in the data model.

Fields defined with a custom SQL formula are also simple to add. Click the “Add Formula Field” button on the toolbar to get started.

Adding a custom SQL formula field to the data model.

Enter a name for the field in the first textbox. Enter the formula in the text area.

Adding a custom SQL formula field to the data model.

Use “Ctrl+Space” to see a list of columns. Fields can also be dragged from the diagram to be added to the formula.

Auto complete option in the SQL formula field.

Reorder fields in the model by dragging the Field column to the correct position.

Reordering fields via drag and drop.     Reordering fields via drag and drop.

Field labels and options can be changed by clicking in the cell. The following shortcuts can be used to quickly and easily navigate between the different cells:

  • If mouse cursor shows text, click to change
  • F2 to Select All/End
  • Left/Right moves between cells in row
  • Tab/Shift+Tab to move between cells
  • Up/Down to move up down
  • Enter/Shift+Enter to move up down
  • Esc once will restore original if changed, Esc twice will exit edit mode
  • Ctrl+Enter will save, stay editing

Changing labels in the data model.

Sorting can be added to the data model by entering the Sort Type and Sort Order.

Changing sorting in the data model.

The Query tab shows the command for the data model.

The Query tab shows the command for the data model.

The Data tab shows the output of the command. By default, Raw Data mode is on. This will show all primary and foreign key fields, and show native value formatting from the database.

The Data tab shows sample output of the data model's command.

Disabling Raw Data will hide primary and foreign keys, and apply formatting.

Disabling Raw Data mode will hide keys, and apply formatting.

The Labels button will replace field names with labels.

Enabling "Labels" button will replace field names with labels.

Click Save to persist the new data model. Proceed to generate the application. A page has been added, showing a grid of products, as defined by the data model.

A list of products, as defined by the data model.

The user can also switch to list view.

A list of products, as defined by the data model.

Automatic charts have also been created.

Charts automatically created for Products.

You can edit existing products or create new ones. Notice, however, that the Supplier ID and Category ID have not been configured as lookups.

Products edit form, with Suppliers and Categories not defined as data models.

Let’s add Categories and Suppliers data models. Go back to the generator and create a data model for Categories. Notice that these two tables that are referred to are already suggested.

Creating data models for suggested database entities.

Create the data model for Categories.

Creating data model for categories.

Create a data model for Suppliers. Be sure to sort by CompanyName and disable the HomePage field.

New data model for Suppliers, sorted by CompanyName and HomePage field disabled.

Regenerate the project. Be sure to refresh when prompted. Notice that Supplier and Category are now rendered as lookups.

Products edit form with Supplier and Category models defined.

Activating the Supplier lookup will open a list of suppliers.

Supplier lookup

Activating the Categories lookup will show a list of categories to select.

Categories lookup.

Let’s create a second data model for Products, that only shows products from North America. There are two ways of creating a copy of a data model – saving a copy of an existing model, or creating a new model, listed under “Defined” section.

Creating a data model for an entity with an existing data model.

Let’s create a copy. Open the Products data model, and change the name to “NorthAmericanProducts” by typing in the name in the top-right corner.

Changing the name of the model to "NorthAmericanProducts".

Let’s add a filter to the new model. Click the “Add Filter…” button on the toolbar.

Adding a filter to the model.

Enter the filter in the text area.

Entering a filter.

In addition, sort the ProductName in descending order.

Sorting the model by ProductName in descending order.

The Query tab will show the new command.

The new command of the data model.

The Data tab shows that the sorting and filtering was a success.

The Data tab showing the output of the command.

To save the data model as a copy, activate the dropdown next to “Save”, and press “Save a Copy”.

image

Proceed to generate the application. Notice that another page has been added to the sitemap. This page is a Single Page Application created to handle products from North America.

The new page shows products from North America.

Virtual Connections

One of the most powerful aspects of the Model Builder is the ability to define virtual primary and foreign keys. Let’s create a data model using the view Alphabetical List Of Products.

Creating a data model for "Alphabetical List of Products".

The application framework is unable to perform any CRUD operations on a business entity until a primary key is defined. Let’s create a virtual primary key by right-clicking ProductID and pressing Set Primary Key.

Setting the virtual primary key of the Alphabeticallistofproducts data model.

The spec “VPK” will be added to the first column of the diagram.

The ProductID field has been specified as the primary key of the model.

Notice that because Alphabetical List Of Products is a view, foreign keys are not known, and values from these foreign key relationships cannot be included until a virtual foreign key is defined.

On the toolbar, click the “Add Table” button.

Adding a table to the diagram.

The field list at the top of the Model tab will be replaced with a list of database objects.

Adding a table from the list of available tables.

Drag the “dbo.Suppliers” table onto the diagram. Rename the alias of Suppliers to “Supplier” by clicking on the header of the new table in the diagram.

Renaming the new table to "Supplier".

Then, drag the “SupplierID” field from Alphabeticallistofproducts onto SupplierID column of Suppliers table to form a virtual foreign key. You can now check fields from the Suppliers table to include in the data model.

Including fields of Suppliers table into Alphabeticallistofproducts data model.

Sort this data model by entering “Descending” in the Sort Type of ProductName.

Sorting by ProductName.

The final result will show the inclusion of Supplier fields in the grid.

The new SPA for Alphabeticallistofproducts.

Friday, November 13, 2015PrintSubscribe
Introducing Model Builder

Yoga aficionados will testify that the world looks quite different if one masters the position known as a “Headstand”. The point of view changes, and interesting ideas will rush to one’s head when Up is Down and Down is Up. 

That is exactly what we have done with Code On Time application generator.  We have turned a few things upside down.

The fundamental principal of the product has been based on the premise that a foundation of a line-of-business  app can be automatically constructed by application generator from a selection of database entities and subsequently refined by a developer. Think of it this way – you buy a fully furnished apartment, move in, and start redecorating. But there is also a large group of people who will prefer to decorate their apartment from scratch.

The next release of application generator is introducing a new development workflow based on a new built-in tool called Model Builder. The purpose of this tool is to enable fast construction of line-of-business apps from scratch by building out a model, one database entity at a time.

New Development Workflow

Let’s consider how the process is changing when building a classical Northwind sample. First, a developer sets up a database connection for a project.

Database connection configuration in Code On Time application generator.

Next, a list of database entities is displayed on the Data Model & Business Logic page of the Project Wizard. This list includes database tables and views.

A list of database entities in a Code On Time project wizard.

The developer selects a desired entity to be added to the project. The Model Builder window is displayed.

Model Builder displays configuration of Products entity in a line-of-business application created with Code On Time.

Application generator automatically constructs the data model for Products entity by linking in Suppliers and Categories tables and borrowing their identifying fields CompanyName and CategoryName.

Developer adds Country column from Suppliers table to the model to complement supplier information and selects Data tab to preview the output. Previously, application configuration has been performed on top of the baseline model constructed by application generator. It was relatively difficult to select tables joined in the table query. Model Builder enables direct and effective participation of the application developer in the construction of the baseline models. Model Builder allows visual configuration of virtual primary keys and foreign key relationships.

'Raw Data' view of the model output in the Model Builder of Code On Time application generator.

The developer can review the raw output of the model. They can also activate the “end user view” of data with labels instead of field names. Primary and foreign key fields are hidden and data format strings are applied to field values when “Raw Data” option is unselected.

'End User' view of the model output in the Model Builder of Code On Time application generator.

The data model for Products is acceptable.  Developer saves the model and proceeds to generate the app.

A  model of Products entity is defined in an app created with Code On Time.

An application with a new menu option Products is now displayed in a default web browser.

Physical implementation of the model in an app created with Code On Time application generator.

The process can be repeated multiple times until the model is refined to perfection. Display labels, field names, data format strings, sort order, and calculated fields can be defined directly in the model with inline editing and instant data preview. More than one model can be defined for each database entity.

Model Options

The “Options” tab of Model Builder provides a collection of quick configuration options for the model. The upcoming release will introduce a handful of options to enable quick selection of supported view styles, default view style, and a few more.

We will provide hundreds of quick configuration options to speed application construction with an open API that will enable 3rd party developers to create custom configuration wizards for private consumption and for commercial use in the follow-up releases.

Project Designer remains to be the primary tool when it comes to further project customization. Model Options will equip the baseline model with large chunks of pre-defined functionality, which may reduce and sometimes eliminate the need to use the Project Designer.

Model Query

The live preview of data is based on the query constructed from the visual model of an application entity.

Query of the Products model in Code On Time application generator.

Sample Data Models

This is the model of OrderDetails entity of the Northwind sample.

Model of OrderDetails entity in the Northwind sample created with Code On Time application generator.

Mouse over a table to see direct connections highlighted with the primary database table/view of the model.

Visual relationship tracking in the model of OrderDetails entity in the Northwind sample created with Code On Time application generator.

This is the model of JobHistory entity in HR, a sample database well known to Oracle developers.

Model of JobHistory entity in the HR sample created with Code On Time application generator.

User Interface Changes

All fields of the entity model are included in grid1, editForm1, and createForm1. Data Sheet view style with horizontal scrolling of columns is introduced in Touch UI for that reason. We expect this view style to be included in the “Model Builder” release 8.5.6.0.

The pages are not configured as master-detail by default. The developers will have the option to set unlimited levels of master-detail relationships manually, which is available in the current version of Code On Time.

We are also introducing a brand new data field type called “DataView”. Any entity can have a collection of DataView fields defined in its options or in Project Designer. A relationship between the data model of a DataView field and its owner must be configured. Grid, Data Sheet, and List view styles will support expanding and collapsing of rows to show linked data, which will enable creating unlimited levels of table-in-a-table presentation.

The form views will also support “data view” fields and display linked child rows within the form boundaries in both Desktop and Touch UI. The form views will support the flow of categories creating new columns and new rows.

The new field type will be recommended as a primary method of configuring master-detail relationships. It uses exactly the same master-detail features that were a part of apps created with Code On Time from its inception. A little bit of JavaScript magic is the only ingredient that will significantly enhance presentation. 

Tight coupling of master-detail relationships expressed as “DataView” fields will also make the following possible:

  • Efficient offline data caching and persistence with easy configuration
  • Hierarchical presentation of data with unlimited depth
  • New data access objects with child records
  • Drag & drop linking of child data rows with master rows by end users

Legacy Development Workflow

If you do plan to try the “Headstand”  Yoga position, then you better make sure that you are not going to break anything! Applications created with previous releases will not be affected. Model Builder will be available in Project Wizard but its use will not be required.  Model Builder is an optional tool in the legacy projects.

Only the new projects will require explicit definition of models for database entities. We are confident that if you try the new development workflow then you will love it! A simple switch in the project configuration file will make it possible to have the legacy development workflow activated for any new project should you feel an instant dislike of visual data modeling.

Inline editing capabilities make it very easy to assign custom field names, labels, and display format strings in Model Builder. This feature is intended to replace the need for Tools for Excel.

Why?

Why are we making these changes given the extensive roadmap for 2015/2016?

The two primary goals in the near future for Code On Time is to support offline mode of operation for generated apps and to provide a completely online development environment called http://cloudontime.com.  We have found it to be difficult to implement master-detail offline editing with the current page-based relationships between data views. It also difficult to build an online database app without seeing the data model as a diagram. New “DataView” field type addresses the offline editing issues with unlimited depth of master-detail levels.Visual Model Builder is a tool based on HTML5. It is actually taken from Cloud On Time code base. This will ensure to seamless transitions from online to desktop development.

We are also experiencing a significant level of interest from former IronSpeed developers who are used to the “page generation” concept based on numerous configuration options instead of a more holistic approach exercised by Code On Time. Model Builder and model configuration options are introduced to appeal to broader group of developers while simultaneously increasing value for the existing customers.

Availability

The next release will have the version number 8.5.6.0 and is expected to go out by the end of November 2015 or in the early December 2015. Full support for Visual Studio 2015 and latest Azure SDK  will be included.

Buy Code On Time application generator now and be ready for tremendous productivity improvements when a prompt to install the next release is displayed!

Open a support ticket to request a presentation and see the new features in action!