Tutorials

Blog
Tutorials
Wednesday, January 24, 2018PrintSubscribe
Cloud On Time App

Cloud On Time app runs cloud applications created with Code On Time products directly on your device with an optional offline mode. Integrated access to device camera and sensors contributes to enhanced user experience.

Employee Registry cloud running hosted in the native Universal Windows Platform app Cloud On Time.

The entire front-end of the cloud application is downloaded and installed on the device for a smooth and responsive user experience.

Installed cloud application front-end is automatically updated whenever the cloud is changed. You can maintain multiple accounts for each installed app with automatic secure sign-in.

If you are installing a cloud application with Offline Sync enabled, then the relevant data is also downloaded on your device. You will work with the local data in offline mode whether your device is online or disconnected. Synchronize data with the cloud when online connection becomes available.

Connect to a compatible application in the Cloud On Time app by specifying the name or URL. If the cloud application can be connected, then its name, icon, and description are displayed in the prompt to install.

Adding Order Management cloud to native Universal Windows Platform app Cloud On Time.

Cloud On Time app will redirect to the application in the cloud and prompt to sign in to authorize access on the device. Enter username and password to confirm your identity.

Logging in to add Order Management cloud to native Universal Windows Platform app Cloud On Time.

If your identity has been confirmed by the application in the cloud, then Cloud On Time app will download a manifest of files required to run the application front-end. Files listed in the manifest are downloaded to the device.

Optionally, the data that you can access in the cloud is download to the device during the last step of installation. This requires the cloud application to be configured for offline mode.

A list of cloud applications installed on the device is displayed on the home screen of Cloud On Time app.

List of clouds displayed in native Universal Windows Platform app Cloud On Time.

List of clouds displayed in native Universal Windows Platform app Cloud On Time.

Tap the application name or select “Launch” in the “more” menu to start the app. Choose “Delete” option to remove the app from the device.

Removing a cloud from native Universal Windows Platform app Cloud On Time.

Cloud On Time app will compare the local manifest of files with the one available in the cloud when the installed application is launched from the home screen. Any missing or changed files are downloaded before the front-end of the selected Cloud is displayed.

If the launched app is working with the local data in offline mode, then the manifest verification is skipped. The manifest will be processed when you initiate data synchronization and successfully commit local changes to the cloud.

If the Cloud On Time app is closed and started again, then the last used front-end is started automatically.

Use “Exit” option in the application front-end to get back to the home screen of Cloud On Time app.

Exiting a cloud in native Universal Windows Platform app Cloud On Time.

The cloud app launched from the home screen will operate under the same identity that was confirmed by the cloud application during installation. If you need to use multiple identities on the same device, then launch the installed application front-end and add an account. Cloud On Time app will redirect you to the cloud to confirm the new identity.

Adding an identity to a cloud in native Universal Windows Platform app Cloud On Time.

Unique files of the front-end specific to the confirmed identity are downloaded and the application is launched on the device. Use the account manager of the installed front-end to switch between identities. Cloud On Time app will use the last selected identity when the application is launched from the home screen.

Log out of all identities of the installed front-end to uninstall the application. It will remain to be listed on the home screen of Cloud On Time app until explicitly deleted. User identity will need to be confirmed to run the front-end of the uninstalled cloud application.

Use Cloud On Time app for instant access to applications deployed in the cloud on your native device. Work with your data offline, online, and on-premises.

Cloud On Time app is perfect for enterprise environment. An administrator can compose a simple text file listing names or URLs of custom enterprise business apps in the cloud. The entire collection of the apps is installed when Cloud On Time app is connected to the text file. Cloud On Time app will automatically check for the revisions of the file and update the contents of its home screen. Administrator can optionally disable ability of users to connect to apps manually or delete from the home screen.

Friday, December 15, 2017PrintSubscribe
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
action-call
action-call-disabled
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.
action-email
action-email-disabled
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.
action-url
action-url-disabled
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.
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.
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.

hierarchy-parent

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.
lookup-details-hidden Hides the lookup reference arrow in the user interface.
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.
lookup-details-hidden Will hide the lookup details arrow from the user to prevent direct access to the lookup record.
map-latitude
map-longitude
map-address
map-state
map-city
map-region
map-postalcode
map-zipcode
map-zip
map-country
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.

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.
area
areastacked
bar
barstacked
candlestick
column
columnstacked
candlestick
donut
geo
map
line
pie
pie3d
scatter
table
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.
small
medium
large
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.
sum
min
max
avg
count
These keywords will determine the value that will be used when calculating cells.
timeofday
second
minute
halfhour
hour
day
dayofweek
weekofmonth
week
weekofyear
twoweek
month
quarter
year
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.
sortasc
sortdesc
sortascbyval
sortdescbyval
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.
title
haxistitle
vaxistitle
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”. 
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.
Friday, November 17, 2017PrintSubscribe
Notifications

Users love getting a confirmation for their actions but would not appreciate if the flow of data input is interrupted with blocking popups. Touch UI now has a built-in ability to automatically confirm Update, Insert, Delete data manipulations and Sort, Group, Search/Filter actions. In the screenshot below you can see an “Update” notification displayed at the bottom of the screen after product has been changed. Notification slide up from the bottom and stay for a short duration visible to the user without blocking interactions with the app. Notification automatically slides away or disappears if the user taps on it.

A notification confirming user action in app with Touch UI.

Notifications take the full display width on devices with small form factor.

A notification on a small factor device takes the entire width of the screen in the app created with Code On Time.

Modify ~/touch-settings.json to allow displaying notifications on the left side of the screen on large display devices.

{
  "ui": {
    "notify": {
      "location": "left"
    }
  }
}

Action notifications can be displayed on the left side of the screen in apps with Touch UI.

It is easy to setup your own notification on any action. For example, set Notification property of Actions / ag2 (Form) / a4 – Update, Save when Edit action in Products controller as follows:

Property Value
Notification Saved "{ProductName}" priced at {UnitPrice}.

This will result in the following notifications:

Custom notifications in Touch UI apps can reference field values.

The framework will automatically assign standard notifications to Insert, Update, and Delete commands in your data controllers if there is no value there.

Command Name Standard Notification
Insert Saved - {0}
Update Saved - {0}
Delete {$selected} deleted

Specifying {0} will include the value of the first visible data field in the view. Indexes are zero-based.

You can also {$selected} to specify the number of selected items or {$count} to specify the total number of items in the view.

If you want to disable a standard notification for a particular action, then enter $none in the Notification property of the action.

The fastest way to change the format of the standard notification is to change ^Saved^ and ^Deleted^ tokens using Visual Studio in the file Solution Name / Code On Time Items/ ClientLibrary.en-US.txt. Note that the culture in the name of the file may be different for your project. Save the changes in the file and re-generate the project. Use Ctrl+F5 to refresh the page to force the browser to load the update resources.

If the business rule forces a display of a message with Result.ShowMessage or Result.ShowViewMessage, then a corresponding notification will be displayed with medium duration.

Here is an example of SQL Business Rule handling a custom action.

set @Result_ShowMessage = 'Archived "' + @ProductName + '" product.'
set @Result_Continue = 1

A custom notification emitted in an SQL business rule implemented in the app with Touch UI.

Standard notifications are always displayed with short duration.

The standard notifications can be displayed with ui.notify.enabled property. The default duration of the notifications expressed in milliseconds is defined as follows:

{
  "ui": {
    "notify": {
      "enabled": true,
      "duration": {
        "short": 2500,
        "medium": 5000,
        "long": 10000
      }
    }
  }
}

JavaScript business rules can send notifications as follows:

$app.touch.notify("Hello World");
$app.touch.notify({ text: "Hello World", duration: "long" });

The duration can be expressed in milliseconds. If force option is specified with value true, then any visible notification will be dismissed and your own notification will get displayed instead.

Future releases of the framework will further enhance notifications with an ability to provide a custom action or callback function that can activated by a button displayed directly in the notification.

Continue to Video Tutorials