Web Application Generator

Web Application Generator
Tuesday, June 12, 2018PrintSubscribe
Many-To-Many, Project Locations and Groups

Release introduces support for user-defined projct locations and project groups. There is also a set of improvements in many-to-many field handling in forms and inline editing mode. The application framework has been refactored to support addons. For example, release will support Offline Sync Add-On.

Many-to-Many Fields

Inline editing of many-to-many fields is fully supported in the release on mobile and desktop devices.

Inline editing of a many-to-many field in a Touch UI app.

The application generator now handles the following implementations of many-to-many tables. Tables EmployeeTerritories, EmployeeTerritories2, and EmloyeeTerritories use compound, identity-based, and GUID –based primary keys.
Various configurations of primary keys for many-to-many field implementation supported in Code On Time and Touch UI.

Here is an exampl of Check Box List presentation of the field. The previous screen shot shows “basket” implementation with Auto Complete.


Project Locations and Groups

New Project screen of the app generator has changed and allows specifying an arbitrary project name and project location. Developers can change the display name and group directly on the Namespace & Framework page of the Project Wizard. The start of the app generator will group projects and have them displayed alphabetically within a group. There is also a “top 5” or rather “last changed” projects rendered in a dedicated group at the top of the start page. If the number of projects is less than 10 then “top 5” are not presented.

The start page of Code On Time displays groups of projects.

This is the new version of the New Project screen. Note that if the Visual Studio is installed on your development machine then the Location is automatically set to [User Profile]\Source\Repos folder. The new app will also be configured to use Git for source control.

New Project screen in Code On Time app generator of mobile and online apps.

Cloud On Time

The application framework has been changed to support Cloud Identity, the upcoming membership system based on claims.

If you are using Cloud On Time app for development then make sure to install the latest version. If the app is re-generated then it will become incompatible with the prior releases of Cloud On Time.

Summary of the Release

See release details below:

  • Many-To-Many fields are now compatible with inline editing.
  • Many-to-many fields based on tables with identity, guid-based, and comp0und primary keys now work uniformly correctly.
  • Action with command name Navigate and Result.NavigateUrl will now load in iframe embedded in the virtual Touch UI page if URL starts with “http” . Can force behavior with “_internal:” target, or use "_self" to load current tab, or "_blank" for separate tab.
  • Touch hyperlinks will now open in internal iframe if target = "_internal".
  • Touch UI - Read-only checkbox does not overlap the text of the field footer.
  • Classic UI – Data View property  AutoHighlightFirstRow works correctly with hidden child data views.
  • Classic and Touch UI - Corrected processing of NewValue and OldValue in _findKeyValue method, which was previously causing error when uploading binary data.
  • Project Wizard now captures Display Name and Group on the "Namespace and Framework" page. The same page also provides a link to open the project location.
  • The installer now includes folder ~/Library/_Explorer/Images. This folder was missing from the last release.
  • Cloud Identity request handler is now a part of the framework. Learn about this upcoming feature at http://codeontime.com/roadmap.
  • Framework now implements support for addons. This feature makes possible for us to introduce the first new product called Offline Sync Add-on. The upcoming  Code On Time v9 will be delivered as an add-on.
  • Important fixes to NewValue and OldValue processing are delivered in this release.  Value of the read-only fields is calculated as OldValue if not Modified and as NewValue when Modifed property has been assigned explicitly. Otherwise the OldValue is returned for ReadOnly fields. This addresses numerous issues on the forum in the past week.

Sunday, April 15, 2018PrintSubscribe
Data Field Tag: Overview

The data field Tags property is a space-separated list of values used by the client library to automatically add enhanced functionality at run-time. The table below shows available values and their related function.

Value Function
Will render a Call action to activate the device’s dialer application to make a call to the field value. The “disabled” tag will disable the automatic Call action.
Will render an Email action to open the device’s emailing application to send an email to the field value. The “disabled” tag will disable the automatic Email action.
Will render a Link action to treat the field value as a URL. The “disabled” tag will disable the automatic URL action.
calendar-date The primary date field to be used for Calendar presentation style.
calendar-end The “end” date field to determine date range in Calendar presentation style. In forms, will also configure the calendar input to automatically jump to this field from the “calendar-date” field and only allow date values in the future relative to the “calendar-date” field to be selected.
calendar-color The value field that will assign colors to each record.
calendar-text The field will be used as the primary displayed text in an event in Calendar presentation style.
calendar-disabled Will disable calendar presentation style processing for this field.
calendar-input-disabled Will disable calendar input control for this field in Touch UI.
calendar-input-data-none Will disable automatic query of record counts displayed in the calendar input control.
calendar-input-future Only allows selecting date values in the future.
created-coords When a new record is created, the geolocation will be requested from the browser and saved into the field in the form “[latitude],[longitude]” (without brackets or quotation marks).
created-latitude When a new record is created, the latitude will be requested from the browser and saved into the field.
created-longitude When a new record is created, the longitude will be requested from the browser and saved into the field.
data-sheet-freeze The data field will be “frozen” when in second generation data sheet view. The user can still unfreeze the column by activating “Unfreeze” option in the column header dropdown.
focus-auto Opening the form in edit mode will focus this field first.
header-image-original If the field is a BLOB, will render image as header in full quality.
header-text The value of this field (in grid1) will be displayed as the header in Touch UI forms.


The foreign key data field will be used as the parent when creating and rendering a hierarchy in second generation data sheet view. Examples include: ManagerID, ReportsTo.
import-duplicate-test When importing records, the process will search for records with matching values in fields with this tag. If it exists, it will skip this record.
import-duplicate-accept When importing records, the process will search for records with matching values in fields with this tag. If it exists, it will update the existing record.
lookup-auto-advance Advances to the next field when the user makes a selection in the lookup control.
lookup-details-hidden Will hide the lookup details arrow from the user to prevent direct access to the lookup record.
lookup-distinct Searches for "distinct" values in the lookup controller.
lookup-null-value-none Hides "null" value in Drop Down List, Radio Button List, and ListBox.
Use both “map-latitude” and “map-longitude”, or at minimum “map-address” and “map-city” in order to enable Map presentation style in Touch UI.
map-none Will disable map processing for this data field.
modified-coords When a record is modified, the geolocation will be requested from the browser and saved into the field in the form “[latitude],[longitude]” (without brackets or quotation marks).
modified-latitude When a record is modified, the latitude will be requested from the browser and saved into the field.
modified-longitude When a record is modified, the longitude will be requested from the browser and saved into the field.
smart-dates-disabled Disables smart dates feature for this field.
view-selector-none Disables view selector tabs on the lookup view.

Tags are also used to configure the Chart presentation style. All chart tags start with the keyword “pivotX”, with X being the ID of the pivot. Learn more about how to format chart tags.

These keywords must be combined with dashes “-” to form a tag. Note that keywords with “X” require an integer value replacing the X. If not specified, the default value is 0.

Note that keywords can be split into multiple tags. For example, specifying “pivot1-row1-area” will be equivalent to “pivot1-row1 pivot1-area”. Do not specify duplicate keywords for the same pivot.

Some keywords support specifying a string value. This keyword must be the last keyword of the tag. Format these keywords like the following:

pivot1-title:"This is the title"

The table below enumerates the available keywords.

Keyword Function
pivotX The integer value X determines the pivot ID that the properties will be applied to.
rowX The data field will be used as a row. The index of the row is X.
colX The data field will be used as a column. The index of the column is X.
valX The data field will be used as a value. The index of the value is X.
This keyword determines the chart type. If this keyword is not specified on at least one tag referencing pivot X, then the pivot will not be rendered as a chart.
Determines the default size for the chart in the user interface.
topX Only the top X number of rows or columns will be kept. The rest will be hidden.
other When used in combination with “topX”, the hidden rows or columns will be collapsed into an “Other” row or column.
date This keyword, used on a DateTime data field, will compose multiple pivots with different configurations. The pivots tested are: year, year/quarter, year/month, year/month/weekofyear, year/month/day. The pivot with the number of rows closest to 25 will be selected for use.
These keywords will determine the value that will be used when calculating cells.
These keywords determine the date bucket mode. The DateTime value will be parsed and use the relevant part of the date.
all Lookup data fields will select all distinct values from the database and ensure that all possible lookup values will be present in the row or column. DateTime data fields will make sure that each bucket between the first and last row or column will be present.
hideblank The “blank” row or column will be hidden.
Use the “sort” keyword to determine the sorting order for values of this row or column. Specify “sortasc” or “sortdesc” to sort the row or column alphabetically or numerically. Specify “sortascbyval” or “sortdescbyval” to sort the rows or columns numerically by the value itself.
maximize The chart will take the full allocated space in the view. Axis labels and titles will be displayed inside the chart area.
crosshair Crosshairs will be enabled for the supported graphs.
Specify a string value to set the relevant title text.
format Specifies an ICU Decimal format string.  Supported .NET-compatible formats are “c”, “C”, “d”, “D”, “e”, “E”, “f”, “F”, “n”, “N”, “p”, “P”, “x”, “X”. 
Controls how the horizontal or vertical axis labels are formatted. Supported values are “none”, “decimal”, “scientific”, “percent”, “currency”, “short”, “long”.
region Specify a string value to set the region mode for “geo” chart.
displaymode Specify a string value to set the display mode for “geo” chart.
resolution Specify a string value to set the resolution for “geo” chart.
curve Enables curvature in the “line” chart.
explorer Enables zooming and panning in the “line” chart.
maptype Specify a string value to set the Map Type in “map” chart type.
enablescrollwheel Enables the scroll wheel for zooming in “map” chart type.
usemaptypecontrol Enables the Map Type control in “map” chart type.
pointshape Specify a string value to set the point shape.
pointsize Specify a value to set the point size.
orientation Specify a string value for the orientation of the chart.
animation Enables the loading animation.
grandtotal Will show a “Grand Total” row and column for the pivot. Not suggested to be used in conjunction with a chart.
Sunday, April 15, 2018PrintSubscribe
Overview of Data Views

Data views are instances of a data controller. Data views render views of the data controller on the page, along with corresponding data controller action groups. The same data controller can be exposed with data views on the same or multiple application pages.

Data View Properties:

Property Description
Activator Specifies the user interface element that will activate the data view. The available options are Tab, Side Bar Task, and Site Action.
Auto Hide Specifies which user interface element is hidden when the filter value is empty.
Auto Highlight First Row Specifies that the first row will be highlighted when the view loads.
Auto Select First Row Specifies that the first row will be selected in the form of the master data view.
CSS Class Name Assigns a CSS Class to the div that contains the data view.
Command Argument Specifies an argument for the startup command.
Command Name Specifies a command that will be executed when the data view is loaded.
Filter Field #1-#5 Determines which fields in the child data view are filtered by the values of the primary key fields in the master data view.
Filter Source Determines the master data view.
Id The Id is automatically assigned when the data view is created. It can be changed using the Rename context menu option in the Project Explorer.
Page Specifies which page the data view belongs to.
Refresh Interval Specifies how many seconds will pass before the data view is refreshed. When empty, the data view will not refresh automatically.
Roles Controls which user roles are allowed to see the data view on the page.
Page Size Determines how many rows are displayed in the grid.
Search by First Letter Displays a menu of first letters of values in the first column at the top of the data view for quick filtering.
Search On Start Specifies that no records will be retrieved and the advanced search bar will be opened when the page loads.
Selection Mode Specifies single or multiple row selection mode in the data view.
Sequence Provides sequential index for the data view. Data views and controls are rendered within a container in the order of the index when available.
Show In Summary Controls if the select data fields of the current row are displayed in the summary box on the side bar.
Show Action Bar Determines the visibility of the action bar.
Show Action Buttons Determines the location of the action buttons in form views.
Show Details in List Mode Indicates if detail data views are visible when a master data row is selected in the grid view.
Show Modal Forms Specifies that the form views of the child data views are displayed in modal windows.
Show Page Size Determines the visibility of the page size information in the pager.
Show Pager Determines the visibility of the whole pager bar at the bottom of the data view.
Show “Quick Find Controls the visibility of the Quick Find box.
Show Row Number Displays a logical sequence number next to each row.
Show Search Bar Controls the visibility of the Advanced Search Bar.
Show View Description Determines the visibility of the description text above the data view.
Show View Selector Controls the visibility of the view selector in the top right corner of the data view.
Tag Assigns a tag to the controller to use in custom business rules.
Text Specifies the text displayed in the activator.
Visible When Specifies a JavaScript expression that must evaluate as true for the data view to be visible.

Supported Tags:

Tag Description
action-buttons-none Equivalent to setting Show Action Buttons= “None”
calendar-drag-disabled Calendar events will not be draggable.
calendar-mini-disabled Mini calendar in the sidebar will not be rendered.
calendar-mini-twomonths Mini calendar in the sidebar will show two months.
content-stub-none Disables the spacer at the bottom of the form.
grid-fit-none Automatic grid shrinking to fit available space will be disabled. Grid will be sized according to “Columns” defined on data fields.
header-image-none Disables the display of images in the header area.
header-image-original Form header background will use original blob, instead of thumbnail.
inline-editing Inline editing mode is enabled by default.
inline-editing-disabled Disables the inline editing toggle in the view selector.
modal-always Always render form as a modal.
modal-buttons-fullscreen-none Disables the “fullscreen” icon.
modal-buttons-more-none Disables the “more” icon.
Docks the modal window to the specified side of the window.
modal-fit-content Shrink the modal to fit the content. These modals will begin stacking, instead of sliding from the right.
modal-auto-grow Automatically resize the modal when field values change. Used in combination with modal-fit-content.
The max width of the modal will be restricted to the selected logical size.
modal-never Never render form as a modal.
modal-fullscreen Modal will always start in "maximized" mode.
modal-tap-out Closes the modal form if the user taps outside the modal area.
modal-title-none Disables the modal title bar.
Will begin rendering the form as modal if the screen is at least the specified logical size. Default is “md”.
multi-select-none User will not be able to enable multi-select on the data view.
page-header-none Disables the page header displayed above the form
promo-none Disables “promo” button.
search-on-start-simple When Search On Start is enabled and this tag is added, the simple search will be displayed when the page is loaded.
search-suggestions-none Disables search suggestions displayed on Quick Find.
thumb-person Image fields will be rendered in a circle.
thumb-standard Image fields will be rendered square.
The view will switch to this presentation style when the page is loaded.
The view will not offer this presentation style.

Use tags to apply an icon to a data view.

Learn to work with data views in the Project Designer.

Learn to drag and drop data views in the Project Explorer.

Common tasks:

Task Description
"Soft" Filtering Learn to activate optional filters on a data view based on a condition.
Customizing the Search Bar Learn to control the fields available for search in the Advanced Search Bar.