BYOD

Blog
BYOD
Sunday, October 9, 2016PrintSubscribe
Basket Lookup, Wizards, Smart Dates

Release 8.5.11.0 is here! This release contains several major features, bug fixes, as well as major performance enhancements to the Form Rendering Engine in Touch UI.

Basket Lookups

The headliner feature for this release is Basket Lookups. This feature permits using Lookup, AutoComplete, and DropDownList item styles for many-to-many relationships. Property Target Controller is now visible in Project Designer when one of these view styles is selected. The property must point to a compatible data controller that corresponds to the many-to-many junction table in the database.

DropDownList rendered as a basket lookup allows adding multiple territories to an employee using the dropdown control.

Many-to-many relationships permit connecting records together in any combination. Typically, a list of available values are enumerated in a separate table, and a joining table will connect the primary record with a number of values. For example, a product can be tagged with multiple keywords, such as “New”, “Exclusive”, “Discontinued”, and etcetera.

In read-only mode, many-to-many fields are displayed as a comma-separated list of values.

Many-to-many field values are displayed as a comma-separated list in read only mode.

Upon pressing Edit, each item will be rendered in a box, and the input control will be rendered on the following line.

Each item is rendered in a box, with the lookup control on the next line.

The user can tap on an item, or use arrow and Backspace keys to remove items. Typing in or activating the dropdown and selecting an item will add that item to the list. The basket input control behaves just like the original lookup, auto complete, or drop down list control.

Basket Lookups offer a better alternative to the Check Box List (displayed below) when there is a large number of items to choose from.

The Territories many-to-many field rendered as a Check Box List.

Wizards

The Wizard feature is now introduced in Touch UI. The “Wizard” property has been added to categories. When the client library detects that at least one category has the “Wizard” property defined, the form will be rendered in Wizard mode. A list of steps will be enumerated using the values of the “Wizard” property, and a status bar will be shown for the available steps. The “Visible When” property can be used to conditionality hide steps based on field values. Actions “Prev” and “Next” will be automatically injected into “Form” scope, and the “Cancel” action will be moved to the leftmost position.

New Employees form configured as a Wizard in Touch UI.

Click here to learn more about configuring Wizards.

Wizard is the core feature that enables rapid simplified configuration of projects in the upcoming Code On Time V9.

Responsive Templates

The goal of Touch UI is to ensure a consistent and usable UI across a wide range of screen sizes. Automatically created templates will position fields and categories depending on the width of the screen. Release 8.5.11.0 will allow defining multiple view templates based on the screen width.

For example, the Orders form of the Northwind Demo will render in two columns.

The Orders Form in Northwind Demo on larger screens will be rendered in two columns.

On smaller devices, the form will be displayed in one column.

The Orders Form in Northwind Demo on smaller screens will be rendered in one column.

Developers can define multiple templates for different sizes in the HTML view template file by using the “data-layout-size” attribute.  For example, two form layouts can be defined in a file ~/Views/Customers.editForm1.html:

<div data-layout="form" data-layout-size="sm">
    ...
</div>
<div data-layout="form" data-layout-size="tn">
    ...
</div>

When the user opens the form, the client library will parse the file and use the largest possible template that matches the currently available width (minus the sidebar). The possible values are listed below.

Value Minimum Width (px)
tn 0
xxs 480
xs 640
sm 768
md 992
lg 1200
xl 1440

Batch Edit With Dependent Lookups

The previous release overhauled the Batch Edit functionality by rendering a custom form. Each available field is rendered as a checkbox. When the checkbox is enabled, an input is displayed below, and the value of that input will be used to batch update the selected records.

Release 8.5.11.0 now handles the situation with dependent lookups, to ensure that data validity is preserved. When a series of fields are dependent, these fields will be grouped under the same checkbox, and the user is required to set all related values.

Batch Edit with dependent lookups will group the lookups.

Smart Dates

Date values rendered in Touch UI will now display simplified values, such as “Today” or “Next Mon”. These values are much easier for the user to comprehend without having to consult a calendar. Dates between a week ago and in two weeks will show days of the week. Dates occurring this year will show the month and date. Any dates with time values set to 12:00 AM will hide the time. The original value is still viewable by hovering over the text. This feature can be disabled from the user settings.

Orders grid displaying all possible permutations of Smart Dates.

Click here to learn more about Smart Dates.

“Auto” Action Button Location

In previous releases, form action buttons were displayed above and below the form. The default mode for “Show Action Buttons” has been changed to the new value “Auto”. This will render the action buttons in a fixed footer at the bottom of the screen. This ensures that the user always has easy access to the actions available at the time. It also avoids the visual overhead of duplicate button rows on small forms.

The "Auto" Show Action Buttons mode will display a footer containing the form buttons.

Medium size screens will align the buttons to the right of the footer. Larger screens will align the buttons to the center of the footer, to ensure proximity to the inputs. Very small screens, such as those on mobile devices, will display action buttons at the bottom of the form, in order to maximize usable screen space.

Small screens will render buttons at the bottom of the form.

Object References in Touch UI

Object references have made a return in 8.5.11.0! When the form is in read mode, a chevron will be displayed next to the field value. Pressing on the chevron will load the edit form for that record.

image

To hide the object reference, tag the data field as “lookup-details-hidden”.

Geocode and Calculate Distance

It is now possible to automatically geocode an address value and save the result to predefined Latitude and Longitude fields. Simply tag the relevant address fields with “geocode-city”, “geocode-region”, “geocode-zip”, and “geocode-country”, and tag the positional fields with “geocode-latitude” and “geocode-longitude”. On Insert or Update, if the address values have changed, Google Geocoding API will be queried using the specified API key. The results will be saved in the positional fields.

It is also possible to manually trigger this request inside a C# or Visual Basic business rule, as in the example below.

decimal latitude;
decimal longitude;
if (Geocode(address, out latitude, out longitude))
    Result.ShowAlert("Latitude: " + latitude + ", Longitude: " + longitude);

An additional function has been added to calculate driving distance between two addresses. It can be used in code business rules, as in the example below.

decimal meters = CalculateDistance(sourceAddress, destinationAddress);
decimal miles = meters * 0.00062137m;

Make sure to follow Google Maps APIs Terms of Service when using these functions.

Features and Enhancements

A partial list of new features, enhancements, and fixes in release 8.5.11.0 is shown below.

  • Touch UI
    • Type-sensitive keyboards will be displayed on mobile devices (Number, Phone, URL, Email).
    • “Flicking” horizontally in Grid presentation will scroll one screen at a time.
    • If the HTML file of a view template contains the name of another view template file, that file will be loaded.
    • Forms are now incrementally rendered based on what is visible at the time.
    • Form buttons will align to the right on smaller screens.
    • Auto-complete window will highlight matching text.
    • Field values can now be placed inside category descriptions.
    • If a DateTime field does not allow time selection, selecting the day of the month will hide the input.
    • Tooltip will not cover the Search button in Advanced Search.
    • Resolved issues with Auto Highlight First Row.
    • Resolved issues with Date Picker not setting correct date depending on the order of selection.
    • Mini calendar on sidebar will now resize correctly to display filter values.
    • Removed “Labels In Form” user setting.
    • Actions now support jQuery Mobile icons containing a dash (such as “carat-r”).
    • Removed spinning bar icon in Chrome.
    • Lookups now support Data Text Fields that are numeric types.
    • User theme selection will be differentiated by user name.
  • General
    • Fixed exception with systems that do not have .NET 3.5 installed.
    • Content Framework detection will work with both ASPX controls and HTML pages. This resolves the issue with Bootstrap-based dedicated login pages.
    • Added support for $quickfind and $quickfinddisabled to limit the number of fields included in Quick Find query.
    • Creating a data field in the Project Designer will no longer throw “DataType is undefined” error.
    • Controllers built from data models will use the column configured as the alias as the “Data Text Field”.
    • The “Copy” property will now be configured with the correct name of the field from the lookup controller, instead of the column name.
    • Fixed issue with generated apps using Turkish “i” in the generated code.
    • New JavaScript methods editing() and inserting() can be used in Visible When and Read Only When expressions, as a replacement for this.get_isEditing(). The result is correctly evaluated when user presses “Edit”.
    • Many-to-many fields now show “New Item” if New Data View is enabled, to support adding new items inline.
    • Fixed exception if no models are defined when Project Wizard “Summary” step is opened.
    • Generator will now request to install IIS Express 10.0 if no IIS Express installation is detected.
    • Filter text displayed at the top of views will show a simpler date representation.
    • New implementation of BusinessRules.Whitelist and Blacklist to avoid performance regression.
    • Fields named “Password” or “Pwd” will have Text Mode set to “Password”.
    • Renamed “Click OK” to “Press Save” in resources to account for touchscreen users.
    • Data Objects will no longer create properties for on demand fields.
    • SharePoint Factory option will be hidden if .NET 3.5 is not installed.

In addition to the items listed above, there are a large number of other fixes and performance enhancements.

Saturday, September 5, 2015PrintSubscribe
What is a Premium Line-of-Business App?

Databases organize the real-world information and transform it into the structured data. Ends users can share, analyze, and process the contents of databases with the help of custom applications. Application developers write custom database apps. Custom database apps are known as line-of-business applications. What is a Premium Line-of-Business App?

Multiple data presentation styles, sophisticated data entry forms,  complex page layouts, and touch-enabled responsive screens are the hallmarks of  a true Premium Line-of-Business App. Premium features typically imply a premium price of a lengthy application implementation . Code On Time application code generator eliminates the word “premium” from the price and drastically reduces application implementation time for developers.

1. Premium Data Presentation

Naturally, the purpose of a database app is to present data items to the end users. A premium database application will allow viewing data in multiple styles whenever more than one data item of the same type is displayed. List, Cards, Grid, Charts, Map, Calendar, and Spreadsheet presentation styles are elevating an app to a premium level.

View styles available for selection by end users in a premium line-of-business database app.

List is a mandatory presentation style for a modern app. List makes it easy to present data on a device with any screen size. Data fields of list items in a premium database application will wrap to the next line on devices with a smaller screen size.

List veiw style in premium app created with Code On Time application generator.

List items must have a variable height to allow viewing data composed of any number of fields.

Cards is an alternative to a list view. Cards have the same height and will limit the visibility of long data values .

Cards view style displays data items of the same height in app created with Code On Time.

A premium database application will display cards in multiple columns on larger screens.

Large screen will display cards in multiple columns in a line-of-business database app created with Code On Time.

Grid presents data as a table of rows and columns to allow comparative analysis of data items.  This is a must-have view style for an application dealing with numbers.

A responsive grid of data items with multiple selection controls in an app created with Code On Time.

The variable screen size of devices in the hands of end users poses a challenge to the design of a grid presentation. Typical desktop computers have plenty of the screen real estate while the screen size of tablets and smartphones can vary widely. The hallmark of a premium database apps is ability to display a responsive grid. Responsive design of a grid will hide the less important fields from the view on a smaller screen size.

A responsive grid will collapse the less important columns in favor or more important information when a display area is small.

Premium database apps make it possible to display all data fields even on a small screen by enabling horizontal scrolling of data. Spreadsheet presentation style allows freezing columns and scrolling the invisible columns into the view.

Map brings work with data in  a real world in a premium database application. This view style can be triggered by a mere presence of City and Address fields.

Your data is displayed in real world in Map view style of an app created with Code On Time.

Seeing a calendar of data items with dates makes enormous difference for the end users.

Calendar view must be available whenever the application end users are dealing with the dates. A premium database app will offer a variety of ways to see data on a calendar.

For example, Month presentation with drag & drop operations and infinite scrolling transform the traditional “wall” calendar into a powerful electronic record of events.

Electronic alternative to 'wall' calendar is the Month mode of Calendar view style in apps created with Code On Time.

Scheduling of events is convenient in the Day and Week modes. Make sure that your app does that too.

Drag & drop events to update start and end fields of data items in Day and Week mode of Calendar view style in apps created with Code On Time.

A premium calendar will give users a bird-eye look at the data in the Year mode.

Year mode provides a great summary of events in the database when displayed in Calendar view style of an app created with Code On Time line-of-business database app generator.

Everyone needs a “to-do” list. That is the purpose of the Agenda mode in a premium Calendar view style. Application end users will not miss a thing!

Agenda mode of Calendar view style is a perfect To-Do list for end users of apps created with Code On Time.

Charts allow the end users to “see” their data for what it is. A truly premium database app will offer a built-in ability to render data as charts whenever possible.

Agenda mode of Calendar view style is a perfect To-Do list for end users of apps created with Code On Time.

Ability to see the same data in multiple graphical representations will transform every list of data items in an instant dashboard. Zooming into charts and seeing data behind the graphs is what a premium database app shall provide. If the time is displayed on a chart then a premium app must choose the most appropriate time scale as well.

End users can zoom into charts, see data behind the graphs, and touch charts interactively in an app created with Code On Time.

Any filters applied to data must be instantly reflected in the charts.

Charts view style responds to data filters including the ones applied from mini-calendar in an app created with Code On Time.

Filtering, Quick Find, Advanced Search

Data discovery comes in all shapes and forms to the end users. Sometimes it is convenient to see weekly or daily data sets. The mini calendar will be required to make it trivial in a premium app.

Mini-calendar makes it easy to filter data to week and day level in apps created with Code On Time.

Sometimes a user looks at the data value and wants to find all data rows with similar characteristics. A premium line-of-business application will let users to right-click any data value and apply an instance filter to it. Mobile devices will allow tapping and holding the value to bring about filtering options.

Touch UI allows activating quick filters when users tap and holds or right-clicks data values.

Selecting multiple values for a filter should be very simple in a premium application.

Multi-value filters are available in columns of responsive Grid view style in apps with Touch UI.

Search controls must be a touch or a click away in a premium app. Data search with simple conditions need to be supported to assist users with any level of expertise.

Ability to quickly find data is inherently available whenever more than one item is displayed to the user in an app with Touch UI.

Switching between quick find and advanced search will empower experienced users of a premium app.

Touch UI includes powerful advanced search capabilities in line-of-business apps generated with Code On Time.

Multi-Column Grouping And Sorting

Sequence of a data flow can make or break an application. Grouping data items by any combination of columns will make your premium app to stand out of the crowd of mediocre solutions. Much more so if the end users are empowered to do that on their own without requesting help from application developers.

Multi-column grouping simplifies work of users with data in apps with Touch UI.

Business life is unpredictable.  Give your end users ability to sort data items by any combination of fields in any order. That will make their work a premium experience.

Multi-column sorting is something every end user dreams about when working with data. It is possible in apps created with Touch UI.

Premium Data Entry Forms

Data entry forms must automatically fit into any display size while offering sophisticated data lookups and data input controls.

Responsive data entry forms work on any device in apps created with Code On Time thanks to the responsive nature of Touch UI.

Data fields on the forms need to be organized into multiple columns with optional tabs. A premium application implementation will abandon physical positioning of fields if favor of logical field groupings to enable effective display of forms on any screen size. Any other approach will increase the development costs tremendously.

Logical grouping of fields bring order in the development of responsive user interfaces.

Complex Page Layouts

Simultaneous display of different kinds of data on a page is known as dashboard. Dashboards with complex page layouts should be easy to organize in a premium application.

Complex page layouts or 'dashboards' are needed in premium line-of-business apps.  Code On Time application source code generator makes it possible.

Of course, there is no dashboard without charts.

Dashboards can display both data and charts in premium line-of-business apps created with Code On Time application generator.

Support for Devices With Any Display Density

The display technology has improved and now even the smallest devices feature an exceptionally high density of pixels that cannot be seen with a human eye.

The following two screens are displaying the same exact application page on devices with a different density.

Touch UI responds in responsive fashion to available real estate and display density.

High display density will not blur icons or disable actions designed by application developer in an created with Code On Time.

Application must gracefully adjust to the available “viewport” that defines logical pixels of the display on the device. The icons should look crisp and functionality must be adapted in responsive fashion in a premium line-of-business application.

If your app looks too small or too large for a display then your app is likely not in the premium category.

Don’t forget that your end users will literally touch your apps on many devices. A premium app is ready for “touch” interactions on native touch screens and hybrid devices.

Conclusion

Does your app provide a less than premium experience to the end users? Does it take a lot of money and time to get things done?

If so then schedule a live demonstration of Code On Time. Our code generator will assist developers in producing consistently high quality source code of custom line-of-business applications with premium features for Mobile and Desktop devices. Give us a call at 1-877-467-6340.

Monday, June 1, 2015PrintSubscribe
Responsive Grids, User Identity, and Preview of “Live” Content Editing

Code On Time release 8.5.4.0 introduces several important enhancements.

Touch UI now uses glyphicons to indicate sort and filter state. Contents of cells in responsive grid is wrapped to maximize the amount of visible information. The same “wrapped cell” design is implemented in “data sheet” view style, which will be available soon to complement responsive grid. The new view style will display a complete set of fields that can are scrolled horizontally on any screen size. The original implementation of responsive grid displayed rows of the same height making it difficult to read the content in the cells.

image

User identity icon is now displayed on the menu bar. The name of the user is displayed partially or completely next to the icon if the width of the device allows that. Otherwise the user name is displayed in the popup menu assigned to the icon.

image

Install integrated CMS in your app with Single Page App implementation model and you can try live editing of content pages. Add a content page based on any Bootstrap template to your project and select “Edit Page” in the “More” menu. If you choose “Properties’ then the app will redirect to the site content page. Only administrators, content editors, and developers are allowed to edit content pages.

image

Click on any content and change it directly in the browser.

image

Change the properties of content items.

image

Select glyphicons from context menu:

image

Save the page directly to integrated content management system.

image

Content pages stored in CMS are rendered both in Desktop and Touch UI. Live editing is only supported in Touch UI. Future releases will introduce a complete set of page editing capabilities that will enable constructing appealing content without effort. A collection of page templates and content fragments will be installed directly in the CMS.

The following bug fixes and enhancements are also included:

  • Master view refresh when children are changed is now supported in Touch UI. If a master view has one or more fields derived from child tables as aggregates (totals, counts, averages, etc.) then specifying “controller:NAME_OF_CHILD_DATA_CONTROLLER” in Context Fields property of a field will cause the master view to refresh and forms to recalculate the fields. This syntax is supported in both Desktop and Touch UI. The old syntax will also work.
     
  • Fixed desktop CSS but that has colored glyphicons in "content" pages. Now the color is scoped to ".DataViewContainer" selector.
     
  • Removed xmlns="http://www.w3.org/1999/xhtml" from SPA apps and enhanced content encoding tag in the output markup.
     
  • Introduced data-editable tag in content page templates to enable live editing of content.
     
  • Site content is considered to be text if its type is "application/javascript".
     
  • Desktop UI cancels pending "valueChanged" call in calcualted fields that leads to exceptions when a modal data view is closed.
     
  • Client framework will pass a combined filter that includes standard user filters and advanced search options when executing actions.
     
  • User Lookup does not crashes desktop UI anymore.
     
  • If a popup list of options does fit entirely on screen than Touch UI does not resize the menu and instead positions it sideways.
     
  • Touch UI aligns thumbnails vertically when Cards view style is active.
     
  • Touch UI aligns thumbnails to the top in lists with multiple paragraphs.

Calendar View Style is Coming Soon

We are getting close to completion of the new view style called Calendar. Take a look at a few screen shots below. The new view style uses a common “horizontal infinite scrolling” infrastructure in day and week sub-views shared with the upcoming “data sheet” view style. The screen shots are displayed without data. Data will be displayed on demand when user stops scrolling. The data pivoting technology implemented to support Smarts Charts is the foundation of the Calendar view style.

Year

image

Month

image

Week

image

Year View on  a Small Screen

image