Data Aquarium Framework

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
Data Aquarium Framework
Monday, March 23, 2015PrintSubscribe
Charts, Drag & Drop Upload, Signature Capturing, Integrated Content Management System, Workflow Register, Single Page Applications, Dynamic Access Control List

Code On Time release 8.5.0.0 includes a monumental collection of enhancements and features.

The release highlights are presented below. Detailed tutorials dedicated to individual features will be published over this week. The roadmap for 2015/2016 with detailed release notes will also become available this week. We are looking forward to your input.

“Charts” View Style for Touch UI

Touch UI applications now supports a new presentation view style called “Charts”. The feature works automatically and can be configured at design time. Here is a sample of charts created for Orders data controller in the Northwind sample.

image

Learn about Charts view style now!

“List” View Style for Touch UI

We have reworked “Cards” and “List” view styles for Touch UI. Touch-enabled devices will default to “List” view, while the “Grid” view is the default option for desktop users. The new “List” view style displays items of uneven height with every single field presented to the users. Text of field values will wrap to the next line.

image

View style “Cards” offers multi-column presentation of items. All items have the same height.  The text of “long” values does not wrap. Only a subset of fields may be visible within a card.

image

Grid view style offers the most compact presentation of data.

image

“Charts” view style provides an insight into the current data set.

image

Drag & Drop File Upload

Drag & Drop file upload is now supported in both Desktop and Touch UI. File upload preview is also integrated.

First, the user taps or clicks on the drop box to show the file upload prompt. The user may also drag the files into the drop area directly from the file system.

image

A preview of the files is displayed directly in the form prior to upload.

image

The drop box provides visual feedback when files are dragged over.

image

Progress indicator is displayed at the top of the drop box while the files are being sent to the server.

The relevant FileName, DataContentType, and Length data fields will updated when the user drags or drops the file.

End users can capture images directly from camera or mobile operating system on touch-enabled devices.

Signature Capturing

If you have a binary field in a table then you can configure the field to capture signatures for Touch and Desktop UI. Just set On Demand Display Style to “Signature” to have it activated.

image

End users can use touch gestures or pointer devices to draw a signature. The signature is uploaded as PNG file with white background directly to the database.

Single Page Applications

A new single-page application implementation based on HTML is now supported for Azure Factory, Mobile Factory, Web App Factory, and Web Site Factory projects.

Create a new project with default settings to see it in action. There are no *.aspx files in the project, just the HTML files. Here is the sample markup of the Customers page in the sample Northwind web app.

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Customers</title>
    <meta name="description" content="This page allows customers management." />
  </head>
  <body>
    <div data-flow="row">
      <div id="view1" data-controller="Customers" data-view="grid1" 
data-show-in-summary="true"></div> </div> <div data-flow="row"> <div data-activator="Tab|Orders"> <div id="view2" data-controller="Orders" data-view="grid1" data-filter-source="view1"
data-filter-fields="CustomerID" data-page-size="5" data-auto-hide="container"
data-show-modal-forms="true"> </div> </div> <div data-activator="Tab|Customer Demo"> <div id="view3" data-controller="CustomerCustomerDemo" data-view="grid1"
data-filter-source="view1" data-filter-fields="CustomerID" data-page-size="5"
data-auto-hide="container" data-show-modal-forms="true"> </div> </div> <div data-activator="Tab|Order Details"> <div id="view4" data-controller="OrderDetails" data-view="grid1"
data-filter-source="view1"
data-filter-fields="OrderCustomerID" data-page-size="5" data-auto-hide="container"
data-show-modal-forms="true"> </div> </div> </div> </body> </html>

Integrated Content Management System

Applications generated with SPA page implementation can include an integrated content management system that turns your app in a highly customizable solution. Just create the table called SiteContent  shown below and have it included in your project (SITE_CONTENT and site_content variations are also supported).

CREATE TABLE [dbo].[SiteContent](
    [SiteContentID] [int] IDENTITY(1,1) NOT NULL PRIMARY KEY,
    [FileName] [nvarchar](100) NOT NULL,
    [Path] [nvarchar](100) NULL,
    [ContentType] [nvarchar](150) NOT NULL,
    [Length] [int] NULL,
    [Data] [image] NULL,
    [Text] [ntext] NULL,
    [Roles] [nvarchar](50) NULL,
    [Users] [nvarchar](50) NULL
) 

Generate your app, navigate to ~/pages/site-content and upload images, html pages, data controllers, or any other content. Specify the path to the files and they will become available to the authorized users. Hook up content to your static navigation system with the help of dynamic sitemaps.

The sitemap sys/sitemaps/employee-directory will merge with the default sitemap to create new navigation options in the default app.

+ Home

++ One More Level

+++Employee Directory
~/hr/directory
description: Directory of company employees.

image

Create a sitemap with the name sys/sitemaps/main to replace the default navigation system of your app.

Integrated CMS is supported in both Desktop and Touch UI.

image

Dynamic Access Control List

Premium and Unlimited edition users can take advantage of Dynamic Access Control List. Create access rules in the integrated CMS with the path sys/dacl. Application framework will locate files stored in the CMS and apply rules to all matching SELECT statements composed at runtime. You can also store access control rules as text files in the ~/dacl folder of your application.

This sample set of rules will affect all data controllers of the Northwind sample that have CustomerID field in the views.

Field: CustomerID
Roles: Users
Role-Exceptions: Administrators
 
[CustomerID] in ('ANTON', 'ANATR')
 
Field:       CustomerID
Controller:  Customers
Users:       user
 
[Country]='USA' and [ContactTitle]='Owner'
 
Field:       CustomerID
Role-Exceptions: Administrators
 
select CustomerID from Customers
where Country='UK' and City='London'

The picture below shows the effect of the rules on the Customers data controller.

image

Learn more about access control rules that can be written in code.

Dynamic Controller Customization

Integrated CMS can also store customizations of data controllers.

For example, file sys/controllers/hr/Employees.Alter.Directory will turn Employees data controller in a phone directory when defined as follows:

when-tagged("employee-directory");

select-views("editForm1", "createForm1").delete();

when-user-interface("Touch").select-view("grid1")
    .create-data-field("Photo")
    .create-data-field("HomePhone")
    .create-data-field("Extension").set-header-text("Ext");

select-view("grid1")
    .set-access("Public")
    .select-data-fields("LastName", "FirstName", "Extension", "HomePhone", "Photo")
    .use()
    .set-columns("20");

select-actions("CHANGE", "Select", "EXPORT")
    .delete();

This is how the new phone directory will look.

image

It is not possible to edit any data on this page. Only a small subset of actions is visible.

image

Workflow Register

Workflow Register uses the integrated content management system to define workflows as a collection of resources. For example, the workflow sys/workflows/hr can be defined as the following collection.

hr/directory
sys/controllers/hr/Employees.Alter.Directory
sys/sitemaps/employee-directory

It provides access to page hr/directory, activates a customization for controller Employees, and adds employee-directory sitemap to the application sitemap.

The workflow can be assigned to anonymous users by creating the entry “sys/register/roles/?” with the text “hr”  in the site content.

Consolidated Client Library Files

The script library has been consolidated. The scripts have been renamed.

  • daf.js <- Web.DataView.js
  • daf-resources.js <- Web.DataViewResources.js + Web.MembershipResources.js
  • daf-membership.js <- Web.Membership.js + Web.MemershipManager.js
  • daf-menu.js <- Web.Menu.js
  • daf-extensions.js <- Web.DatViewExtensions.js
  • touch.js <- Web.Mobile.js

Pages Can Be Generated “First Time Only”

Pages of the project can be based on templates and be configured to generate “First Time Only” similar to user controls.

image

image

Monday, March 2, 2015PrintSubscribe
Automatic Construction of Charts in Touch UI

Data views in an app created with Code On Time may present users with the view style called “Charts”. This view style is either enabled automatically by application at runtime or by developers at design time. The purpose of the view style is to provide instant insight into data.

If the definitions of charts are not a part of application design, then the application framework will compose up to nine charts based on the properties of fields in the data view if possible.  The app will attempt to define charts after examining the presence of lookup, date, or numeric fields in the view. First, it will try creating charts with dates as the rows, and lookups as the values. Then, it will pair a few numeric fields with a lookup.

The picture shown below displays the charts automatically created for the Orders controller of the Northwind sample application.

All nine charts that were automatically composed for Orders page of Northwind sample database.

The automatically created definitions for all of the nine charts are shown below. Each chart is described with one or two tags that start with “pivot-“ keyword followed by properties.  The elegant simplicity of the tag language makes possible sophisticated collections of charts defined both by developers and end users.

The chart definitions generated by the client library.

Application framework performs efficient server-side data pivots following the tag specification. Data pivots for all charts are performed on the server simultaneously. Data pivots take into account application-level and user-defined filters.

Let’s see how each chart works.

Chart 1 – Stacked Column + Dates

The first chart pivots customers by the order date in a stacked column chart.

Pivoted data of the 'stacked column + dates' chart.

This chart uses the first date field, OrderDate, as the rows. The “pivot1” property assigns the field to the pivot with ID of “1”. The “row” property sets the field as a row in the pivot, and assigns it index “1”.

The property “date” instructs the application to try several date bucket groups and choose the best one available based on the number of rows in the output. Application framework tries not to have too many or too few “date” rows in a pivot. For the dataset in the picture, the framework has produced the pivoted data as if tags “pivot1-row1-year pivot1-row2-month” were specified.

The “all” property ensures that any empty gaps in the data will be included in the pivot dimension.

The first lookup field, CustomerID, is used for the columns. The columns are sorted in descending order by the value of each column. Then, only the top five customers are kept, and the rest of them are dropped from the output. The “columnstacked” property defines the type of chart.

When a value field is not defined for the chart, a count of the first available field is used.

Field Name Tag
OrderDate pivot1-row1-date-all
CustomerID pivot1-col1-sortdescbyvalue-columnstacked-top5

Chart 2 – Area + Dates

The second chart pivots employees by required date in an area chart.

Pivoted data of the 'area + dates' chart.

This chart uses the second date field, RequiredDate, as the rows.

The second lookup field, EmployeeID, is used for the columns, and the top seven employees sorted in descending order are used. The “area” property specifies the chart type.

Field Name Tag
RequiredDate pivot2-row1-date-all
EmployeeID pivot2-col1-sortdescbyvalue-area-top7

Chart 3 – Column + Dates

This chart pivots shipper companies by the shipped date in a column chart.

Pivoted data of 'column + dates' chart.

This chart uses the third date field, ShippedDate, as the rows of the output.

The ShipVia lookup field is used, and only the top five values are kept. The type of the chart is defined as “column”.

Field Name Tag
ShipVia pivot3-col1-sortdescbyvalue-column-top5
ShippedDate pivot3-row1-date-all

Chart 4 – 3d Pie

This chart shows the top ten orders by customer in a 3d pie chart.

Pivoted data of 3d pie chart.

The fourth chart uses CustomerID as the row values. The top ten values are displayed. The “other” property commands the server to sum up the rest of the values in an “Other” row. The type of chart is “pie3d”.

When no column field is defined, there will be only one column to display the value.

Field Name Tag
CustomerID pivot4-row1-top10-other-sortdescbyvalue-pie3d

Chart 5 – Columns

This chart shows the top 10 employees that made orders in a column chart.

Pivoted data of 'column' chart.

The fifth chart uses EmployeeID lookup field for the rows. The top ten values are displayed, and the rest are summed up into an “Other” row. The type of chart is “column”.

Field Name Tag
EmployeeID pivot5-row1-top10-other-sortdescbyvalue-column

Chart 6 – Line

This chart shows the count of orders made by order date in a line chart.

Pivoted data of 'line' chart.

The next chart uses the OrderDate field as the rows. The “date” property will generate multiple sets of data, differentiated by bucket size, and use the best result for the chart. The property “all” will ensure that there are no missing values in the date range. The type of chart is “line”.

Field Name Tag
OrderDate pivot6-row1-line-date-all

Chart 7 – Columns

This chart shows a count of orders made by required date in a column chart.

Pivoted data of 'column' chart.

This chart uses the RequiredDate field for the row values. The type of chart is “column”. The server will compose multiple results and pick the best one that fits in the graph when “date” is used. The chart will not miss any gaps in dates with the “all” keyword.

Field Name Tag
RequiredDate pivot7-row1-column-date-all

Chart 8 - Area

This chart shows the count of orders made by shipped date.

Pivoted data of 'area' chart.

This chart shows values grouped into rows by the ShippedDate field.

Field Name Tag
ShippedDate pivot8-row1-area-date-all

Chart 9- Donut

This chart shows the count of orders made, grouped by shipper company, in a donut chart.

Pivoted data of 'donut' chart.

This chart uses the ShipVia lookup field for the rows of the result. The “top10” tag is disregarded as there are less than ten values in the result.

Field Name Tag
ShipVia pivot9-row1-top10-other-sortdescbyvalue-donut
Saturday, January 24, 2015PrintSubscribe
Charts Everywhere

Every IT project involves collection of data. Development teams put a lot of thought into database design, middleware programming, business rules. Analysis of data is always somewhere a few milestones away on the project timeline. Sure the charts can make your app look good, but one needs data to feed the charts. Therefore the data analysis and charts will only become a feature of a project if it survives the initial developments stages.

Users Love Charts

Why do users love charts? The charts can tell the story that the raw data cannot.

For example, a typical list of orders hides a treasure trove of information that can be unlocked if data is pivoted, sorted, counted, and summed.  Consider the collection of charts in the screenshot below.

Charts view style in a Touch UI app created with Code On Time app generator.

These charts are derived from the orders stored in the Northwind database. The master-detail form with order data is shown next.

Master-detail form view in a Touch UI app created with Code On Time app generator.

Data fields Order Date, Employee Last Name, Ship Via Company Name, and Ship Country can truly illuminate the business processes within the Northwind mail order company.

For example, we can answer the following questions:

  • Which countries are the main contributors to the sales?
  • Which employee is the most productive?
  • How much are shippers utilized to fulfill orders?
  • Are sales getting better over time?
  • Which employee is contributing the most to the expense of fulfilling orders?
  • How do sales compare year over year?
  • Which month can be expected to be the busiest?

The charts in the screenshot answer the questions.

Charts in the app with Touch UI created with Code On Time.

Charts Are Created Automatically

Application framework has a built-in ability to recognize what data can be analyzed. “Lookup” and “date” fields are tagged to produce various charts without any need for programming.

If the compatible fields are detected than the “Charts” view style becomes available to end users. Charts are literally everywhere!

Sample chart displayed in the user interface of an app with Touch UI.

Developers can tag the fields for charting by default.  A typical “chart” tag in a data controller XML file will cause the chart above to become available when “Charts” view style is activated.

<dataField fieldName="ShipVia" aliasFieldName="ShipViaCompanyName" 
tag="pivot1-row-pie3d"/>

The server-side code of application will pivot the data and package it in the fashion suitable for chart presentation. Application produces multiple pivots while reading the same set of records from the database.  A single request to the server will retrieve all pivots for the charts displayed when “Charts” view style is activated.

The built-in ability to pivot data can be utilized to create custom charts and data presenters.

Responsive Presentation of Charts

Charts are responsive. Users will be able to interact with charts on any device. The small form factor will cause a simple list of charts to be displayed. The height of the charts is computed based on the available width and the height of the display.

Responsive charts are displayed in a window with small form factor in a Touch UI app.

Application will try to fit as many charts as possible on screen without requiring user to scroll horizontally to see the entire set of charts.

Wide displays will allow Touch UI to render multiple charts without the need for scrolling.

Activating “Charts” View Style

The option to activate “Charts” view style is visible on the sidebar as shown in the illustration above. The sidebar may not be visible on all screen sizes.

Context menu provides “Charts” option in the list of data presentation styles. A single touch or click will show the available charts.

Context menu includes an option to activate Charts view style in an app with Touch UI.   Charts view style in an app with Touch UI created with Code On Time app generator.

Shaping The data In The Charts

Users shape the data set rendered in the “Charts” style with the help of Quick Find, Adaptive Filters, and Advanced Search.

For example, a user can specify a criteria for “deep search” that requires data to match the ship country to France and Italy and have associated line items with products in categories that include “Confections” and “Seafood”.

Advanced Search screen in an app with Touch UI.

Here is the result set rendered in the “List” style. User can access “Charts” view style by touching or clicking the context menu button on the right side of the toolbar.

Activating context menu in a Touch UI application.

Here is the set of charts reflecting the “deep search” criteria that required searching in orders and related order details.

Charts view style shows data produced by deep search of orders and linked order details in Touch UI application.

This screenshot shows charts for orders shipped to Canada, USA, and UK and placed by employees Buchanan and Fuller.

Compact set of charts rendered in Charts view style in an app with Touch UI.

User may activate responsive grid view style to see the data behind the charts.

Responsive grid view style in a Touch UI app created with Code On Time.

Wider window will show charts distributed in three columns.

Responsive Charts view style displayed three charts side-by-side in an app with Touch UI.