BYOD

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
BYOD
Wednesday, May 13, 2015PrintSubscribe
Action Bar, See All, 250 Icons, Desktop Master-Detail Enhancements, Metadata Compression

Code On Time release 8.5.2.0 significantly improves the speed of loading of complex master-detail pages in Desktop UI and introduces new user interface options in Touch UI. Both presentation modes can now take advantage of more than 250 icons  from Bootstrap library  integrated in the generated apps. Meta-data compression reduces the size of JSON responses for requests to read data by more than 60%.

Master-Detail Pages in Desktop UI

Desktop applications with complex master-detail pages will see immediate increase in speed of initial page loading and refreshing of selected master rows and linked children. We have recently discovered that a large number of data views may lead to degradation of page rendering. One customer has close to 40 data views connected in various master-detail configurations on a single page. Application essentially uses data views to create an electronic data record giving a comprehensive understanding of a business process at a glance. Application has been created two years ago and has performed very well. Recent modifications have uncovered that the same page is rather slow when produced with newer releases of Code On Time. We have corrected the issue – the page with 40 data views loads fluidly and rapidly.

Touch UI Enhancements

This release brings the action bar to Touch UI. Compare the screenshots of Products screen presented in two different interfaces.

image

image

User interface components of Touch UI look almost identical to the Desktop presentation. If the promoted actions are turned “off” in settings then the floating “+” button will disappear and New Products action will migrate back to the action bar.

Summary views now display “See All” button with the count of records when only a subset of records is visible. Summary views also keep track of the current selection.

image

Also note that the page title is not displayed anymore on the toolbar if there is enough space to display at least three menu options. The title will reappear in the toolbar on devices with narrows screens. The navigation menu migrates under “menu” button on the left-hand side of application toolbar.

image

We are committed to transforming Touch UI in a true replacement for the legacy Desktop user interface of generated apps. Future releases will allow displaying all levels of master-detail relationships on the pages in Summary mode. This release finally introduces complete support for cascading lookups in Touch UI. We now support dynamic lookups for Drop Down List, List Box, Radio Button List, and Check Box List with full processing of Context Fields.

Icons in Actions

It is now possible to use glyphicons from Bootstrap library as icons of actions in Desktop and Touch user interface. Touch UI also supports a dedicated set of icons from jQuery Mobile. See sample icons at http://demo.codeontime.com/northwind/touch/icons.html.  Follow the link to see configuration instructions. The screenshot below shows a custom glyphicon-leaf icon in configuration of New Products action.

image

image

Miscellaneous Enhancements

Here is the list of fixes included in this release:

  • Annotations are disabled in Touch UI. Multiple file upload will be implemented in the future instead of "one note" + "one file" at a time in Desktop UI.
     
  • New drag & drop file upload works with annotations in Desktop UI.
     
  • Desktop UI shows summary on first selection of a master row when a child view with "Show In Summary" = true is placed on a different tab.
     
  • Touch UI supports creating new lookup values with context filter based on the current field values.
     
  • Cascading lookup works with Drop Down List, Radio Button List, Check Box List, and List Box.
     
  • Dedicated login page issue on iPad has been resolved in Touch UI.
     
  • Pivot API: Quarter calculation fixed.
     
  • Minifier now adds ";" to every script file as a fix for DNN script compression.
     
  • Fixed transparency issues on iOS and made enhancements to the keyboard input on android.
     
  • Charts: Added ICU Decimal Format support with "pivot1-val1-format:'##'" tags. Supported .NET-compatible formats are “c”, “C”, “d”, “D”, “e”, “E”, “f”, “F”, “n”, “N”, “p”, “P”, “x”, “X”.  Example of Orders chart:
  • EmployeeID Tag: pivot1-row1-column

    Freight Tag: pivot1-val1-sum-format:'c' 

  • It is now possible to use $row.FieldName and $master.FieldName syntax in business rules and various expressions instead of old syntax ([FieldName] and [master.FieldName]).
     
  • Dates are correctly processed in JavaScript business rules in Touch UI.
     
  • Enhanced error reporting when compiling JavaScript business rules.
     
  • Data access objects correctly convert dates to Universal Time when using PageRequest to retrieve data.
     
  • MySQL will hide string primary key fields of length 36 (GUID).
  • Bug with "Remember Me Checked" in HTML page implementation has been fixed.
  • MySQL Session State Provider will use mediumblob instead of longblob.
     
  • Embedded ASP.NET membership provider for Oracle is now generated if membership feature is enabled.
     
  • Membership business rules correctly handle representation of GUIDs and "bool" in Oracle databases.
     
  • Synchronization command wraps primary key field names in "quotes" specific to the database engine.
     
  • Membership bar extender uses "_invoke" as a path for service requests in SPA applications.
     
  • Adding a GUID parameter to an SqlText or SqlProcedure will perform automatic conversion from Guid to byte[].
     
  • Partial implementation of ApplicationServices class allows overriding of UserSessionStart, UserSessionEnd, InstanceStart, InstanceStop, and HandleError methods to handle session-level and application-level events. Delete ~/global.asax file to ensure that the new code is being engaged if you plan to use any of these methods.
     
  • Custom Session State provider is now generated in Azure Factory, Mobile Factory, Web App Factory, and Web Site Factory projects if installed on database connection settings page of Project Wizard. Use session state provider if application is deployed in  multi-server configuration.
     
  • It is now possible to have a "root" page when CMS is enabled. Give it a name “index” with blank path.
  •  Dynamic Controller Customization in CMS now supports When-SQL and When-Test to allow data-driven customization of controllers
     
  • Application framework now support VirtualControllerConditionally method. Developers can call SelectFieldValue method to inspect values of the current row when virtualizing form views.
     
  • Added data view tags view-style-charts-disabled, view-style-grid-disabled, view-style-list-disabled, view-style-cards-disabled, and view-style-map-disabled to allow disablement of specific view styles.
     
  • Fixed bug in Firefox and IE10 of chart context menu not opening.
  • Data views can now be configures with the property "Tags" and "data-tags" instead of Tag and "data-tag".
     
  • Site content is not visible if Role or User exceptions are detected. Previously, both "Role Exceptions" and "User Exceptions" would have enabled access to content instead.
     
  • If a site content page exists in CMS and it is visible to the user then it will override the "design time" page definition. Previous implementation has been using the application-defined page even if a site content page is available.
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.

Friday, January 23, 2015PrintSubscribe
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.

Responsive list in a Touch UI application created with Code On Time.

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 list with a sidebar in a Touch UI application created with Code On Time.

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.

Responsive Cards view in a Touch UI application created with Code On Time. 

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.

Multi-column cards in  a Touch UI applicaiton created with Code On Time.

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.

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

Wider screen will reveal more data columns.

Responsive grid view with a sidebar in a Touch UI application created with Code On Time.

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

Changing tags of data fields in Project Explorer of Code On Time app generator.

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.

Activating context menu in Touch UI app created with Code On Time.   Activating view options in Touch UI app created with Code On Time.

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

Choosing desired view style in Touch UI app created with Code On Time.   Responsive list view style in a Touch UI app created with Code On Time.

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

Changing tags of data view on a page in Project Explorer of Code On Time app generator.