Blog

Labels
AJAX(112) App Studio(8) 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(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(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
Thursday, June 2, 2016PrintSubscribe
Top Secret: New Form Layout Engine and “Lookup” Style in June 2016 Update

It’s been four months since the last software update. It does feel like an eternity, doesn’t it! 

Originally we intended to release an incremental set of changes in March of 2016.  A major rewrite of Touch UI form layout engine was also under way at that time.  One thing led to another and the team has decided to postpone the release by a couple of weeks to complete the new layout engine. Two weeks have stretched into a month and we have announced that the release will go out in the middle of May, which was too optimistic. Finally the development of the new code has been completed. We are validating the new capabilities and fine tuning the software.

Code On Time release 8.5.8.0 will become available on June 8, 2016.

The release incorporates our experience gained from the development of a few real-world projects. In the coming days we will post a collection of the highlights describing the product changes. Keep reading to see what’s new!

Layout Engine and Universal Input

The new layout engine has been introduced to enable custom form development with precise positioning of user interface elements in responsive fashion. We have developed a layering technique of HTML content that makes possible complex layouts without sacrificing performance.

The major runtime component of the layout engine is called Universal Input.  New version of Touch UI does not allocate multiple input controls when the form is rendered in the browser. An on-demand input control is created instead when a user interacts with the page content in edit mode. The input control takes the space allocated in the form layout for the data item. This makes possible positioning the fields with high precision. It is also creating an illusion of live inline editing of page content. Universal Input introduces keyboard-driven navigation for rapid data entry not found anywhere else.

Custom form development now becomes very similar to report development. You are developing a blueprint for data presentation and the data is “magically” editable as needed.  Custom form layouts are stored in the ~/Views folder of the project.

image

The follow up release 8.6.0.0 will introduce the Form Designer, the feature borrowed from the upcoming http://cloudontime.com.

If a custom form layout is not available then an automatic layout is created at runtime. The automatic layouts are similar to the most recent releases of Touch UI.

New Lookup Style

The screenshot shows an example of an Order record in edit mode. Notice that the text value of the customer company name is selected automatically. A tooltip is displayed when user hovers over the input field. The same field is also displayed at the bottom of this layout. It is now possible to place a data field on custom form any number of times with optional read-only flag when needed. 

The lookup data fields based on foreign keys are indicated by drop arrows pointing to the right. A user can tap on the arrow to make a selection or use keyboard Right key to activate the row selection from the full screen view of customers. The lookup data view is also activated if user presses Ctrl+Enter.

image

Up and Down keys will change the selection in the Grid, List, or Cards view of lookup records. Press Enter key or a tap on an item to select the lookup value.

image

Pressing Ctrl+Space or Ctrl+Down will activate a simplified selection mode of a lookup value.

image

User can choose a different value with Up/Down keys, manually activate the full screen selection mode of a lookup value, or create a new lookup item if enabled.

image

Typing a text in the input field will start auto-complete mode of lookup value search in the second instance of “customer company name” data field at the bottom of the layout in the next screenshot.

image

User will simply erase the lookup text to clear the value.

image

This is the same form layout displaying a record in the new mode in the next screenshot.

Notice that the forms in the new mode now display Save, Save And New, and Cancel buttons. Some of the shipping fields display custom placeholders with input instructions. Clicking on the field label or in the empty space will activate the input control.

image

Desktop UI users will recognize that the new lookup style combines the direct selection of lookup values from the multi-column view of records with the ability to type ahead in Auto Complete style.

The dedicated auto-complete mode is now also available for lookup fields in Touch UI. If this style of value selection is enabled then the arrow next to the field value will point down and See All option will not be available in the popup list of values.

The same presentation will be displayed for Drop Down List view style in forms. Inline editing in grid uses Auto Complete style input for Radio Button List and List Box styles of lookup selection.

Sunday, January 24, 2016PrintSubscribe
Model Builder, Horizontal Scrolling With Freezing, Conditional Styling, and Geolocation Tracking in Touch UI

Code On Time release 8.5.7.0 has arrived!

The second iteration of the Model Builder has been greatly enhanced. It works faster, creates smaller models and allows quickly expanding the base query model as needed. It is now possible to “add all entities” at once.

Tables are now displayed in a more compact fashion. Only selected, primary, and foreign key columns are displayed on the diagram by default.

image

Models created automatically will not have more than 14 tables included.  Previous implementations of the app generator included every possible relationship with several parent levels up. The default discovery depth remains to be set to 3, but the discovery stops when 14 tables are found.  If the desired relationship is missing then right-click the corresponding foreign key column to add a table to the diagram.

image

image

Grid view style in Touch UI has been enhanced to display all fields defined in the data controller with the help of horizontal scrolling with ability to freeze columns.

image

Touch UI also offers exciting conditional styling options for your data.

Place pictograms next to field values in grids, lists, and forms.

image

Change background color of rows.

image

Display colorful “corners” to elegantly indicate the status of data items.

image

Read the tutorial to learn more about conditional styling of data in Touch UI.

Release Notes

This is the summary of the features and enhancements included in this release:

  • Grid view shows all columns in Touch UI. Previously a subset of columns when displayed if the screen width was insufficient.
  • Horizontal scrolling of columns is enabled in Touch UI grids.
  • User interface option “Freeze” to freeze/unfreeze columns is available in Touch UI. By default the first column is frozen).
  • Geolocation capturing has been enhanced and now works in Touch and Desktop UI. The client app will now store geolocation before Insert and Update to ensure that the user’s permission to track location is captured upon first attempt to edit data. Location watching starts with a 1.5 second delay to support form transitions in Touch UI.
  • Lookup context is correctly passed along with the server-side requests. Both desktop and touch apps can inspect Request.LookupContextField, Request.LookupContextController, and Request.LookupContextView properties.
  • Enhanced sidebar summary allows to click or tap the first field value to see all record properties. The summary is now also displayed in the context menu.
  • Filtering and Sorting are now automatically enabled on formula fields created in Model Builder.
  • New “more” and “less” options are displayed at the bottom of the tables on the diagram.  Tables are presented on the diagram in compact form. Only selected columns, primary, and foreign key columns are visible.
  • Right-click on the foreign key column in Model Builder to connect the table to the diagram.
  • It is now possible to create models for all undefined at once by selecting “add all entities” option in the menu of undefined entities.
  • Discovery depth parameter is now taken into account when Model Builder creates a default model for an entity.

Coming Soon

Next release will bring about a brand new rendering engine for forms in Touch UI. It will be possible to create custom layouts of forms for variuos screen dimensions in a new Form Designer. Also a new Universal Input feature will replace the current “native” inputs of Touch UI to enable unparalleled quality and complexity of form layout presentation and keyboard-friendly and mobile-friendly data entry. 

Field type “DataView” will allow shifting definition of master-detail relationships from pages to the data controllers. Infinite depth of relationships will be possible in both “grid” and “form” views. Form Designer will allow placing “DataView” fields in categories. A custom template will be individually supported on a view level in data controllers. There will be no need to keep a template outside of the data controller definition.

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.