Code On Time: User Interface

Blog

User Interface

Saturday, January 24, 2015Print Subscribe

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.

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

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 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!

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.

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.

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.

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

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.

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

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

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

Wider window will show charts distributed in three columns.

Labels: BYOD, Charts, Data Aquarium Framework, Features, Mobile, Touch UI, User Interface, Web 2.0

Friday, January 23, 2015Print Subscribe

Responsive Grids, Lists, and Cards

A challenge of figuring the best presentation style for your data on a variety of devices is non-existent in apps created with Code On Time. Data views always provide at least three responsive view styles to end users. Application automatically elects the best presentation style if developers do not provide a default option. Mobile devices will present data as responsive lists while desktop devices will switch to responsive grids. If “image” or multi-line text fields are detected, then desktop presentation will be switched to “responsive list” instead.

Responsive List

The screen shot demonstrates a responsive list in action. Every data field is visible. The data fields and their content overflow to the next line as needed. Multi-line text fields start a new paragraph in the list item.

This presentation style is perfect when large amounts of information needs to be displayed.

A wider screen will fit more items, since data fields are redistributed along the entire available width.

Responsive Cards

An alternative responsive compact presentation of list items is called “Cards”. Only a subset of data fields is included in a card by default. Fields that do not fit will become invisible. The content of a field does not overflow to the next line.

List items are “cards” of the same height. Wider screen will break the flow of cards into two or three columns if possible.

This presentation style maximizes the amount of information available to the user without scrolling.

Responsive Grid

The spreadsheet style presentation of data is convenient when field values require comparison. Responsive grid displays field values aligned horizontally in each row. Better yet, the grid will dynamically measure the available width, relative width of individual fields, and their importance. Then it will hide the “less important” fields to provide the best presentation possible given the width of the device.

Wider screen will reveal more data columns.

Developers can control how individuals data fields are displayed in each view style through tags using Project Designer.

Application users switch between view styles either by choosing the desired option on the sidebar or through the context menu options. Sidebar may not be available for some screen orientations and sizes.

Context menu is available on all devices. User activates context menu by touching or clicking on the context menu button. Next user selects the very first option in panel that shows the name of the current view.

Available presentation styles will be displayed. User touches or clicks on the options and the view style will change after the panel has closed.

Developers can tag the data view on a page to display a specific view style by default using Project Designer.

Labels: Application Builder, Application Factory, BYOD, Touch UI, User Interface, Web 2.0, Web Application Generator, Web Form Builder

Thursday, January 15, 2015Print Subscribe

Brand New Advanced Search, Deep Search, Right-Click to Filter

Code On Time release 8.0.12.0 introduces a collection of new features designed to improve productivity of end users.

The highlights of this release are:

Brand New Advanced Search implementation in Touch UI. Users can search for data by entering groups of conditions. Each group uses one of the four matching methods – “Match All”, “Match Any”, “Do Not Match All”, “Do Not Match Any”. Unlimited number of groups can be created. Data views will keep track of up to 30 recent searches. End users can execute and edit previous searches.
Deep Search is a new capability available in Touch UI. It is now possible to find master records via the content of the details. For example, users can find customers that have orders placed by employee Fuller and shipped to London. Application automatically detects master-detail relationships on the pages and allows specifying detail fields in advanced search groups or in the scope of quick find.
Right-Click to Filter is now supported in lists and grids of Touch UI applications. Users can right-click any visible value and immediately apply “Equal”, “Does Not Equal” and several other filtering options. This feature is supported by Touch UI applications on desktop computers equipped with a mouse.
Empty/Not Empty and dedicated Less/Greater Than and Less/Greater Than Or Equal are now supported in Desktop UI and Touch UI. The first two new filters allow located records that match the corresponding criteria. Previous implementations supported only the last variation of typical comparisons.
Data Pivoting is now integrated in the application framework. The new implementation includes support for a high performance universal server-side data pivoting driven by tags. This feature is the foundation of the upcoming brand new charting support that will be introduced first in Touch UI. The same pivoting capability will also be used for sidebar filtering options similar to those found on popular shopping web sites. This pivoting capability will also be used in the Calendar view style that will become available first in the Touch UI.

Take a look at the screen shots of the new user interface features.

The search button on the toolbar now activates either Quick Find search box or Advanced Search screen. The default option is Quick Find. If a data view is configured to “Search on Start” than Advanced Search is always engaged when a data page is loaded.

The new Quick Find box has a drop down arrow next to the search icon on the left and advanced search button on the right.

The drop down arrow activates a list of child data views on the page that are directly connected to the data view in focus. User has expanded the scope of search to include master data view Customers and child data views Orders and Order Details. Inclusion of child data views will engage deep search capability.

If a user clicks on the button on the right side of the Quick Find search box on the toolbar than advanced search screen slides down from the top of the browser window.

Four data matching methods are supported.

Groups can be deleted and duplicated as needed.

Right-click on the data values will display a context menu.

An example of “deep search” conditions.

The result of the “deep search”.

The history of searches on Advanced Search screen.

Searching from recent history on Advanced Search page.

The complete list of enhancements and bug fixes is presented below:

A new implementation of advanced search for Touch UI with multiple matching groups, history of recent searches and favorite searches.
Deep search is supported in Touch UI.
Right-click to filter is now available in Touch UI.
Data Pivoting is supported in GetPage method.
Ensured that SQL Server database with one custom schema and the rest of the tables in "dbo" will generate a correct initial menu.
Renamed __resultset to resultset__ to ensure wider compatibility with database engines.
Fixed DateTime UTC formatting issue when printing reports.
Method $app.find first tries to find a data view by ID and then tries to find it by controller name.
User-level properties are now application and user-specific in Touch UI apps.
Implemented InitBusinessRules to enable IDataEninge.ExecuteReader to work with business rules.
Data type TimeStamp will not break applications.

We are finally ready to publish various new tutorials that were in work for the past few months. This year you will see tutorials demonstrating development of single page apps with jQuery Mobile and Bootstrap. A new tutorial will explain how to build the Order Form sample with Touch UI.

In about two weeks we will release another with supported for data visualization in Touch UI and numerous other enhancements including BLOB uploading in Touch UI.

Labels: Application Builder, Release Notes, User Interface, Web Application Generator