Tutorials

Blog
Tutorials
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.

Friday, October 27, 2017PrintSubscribe
Video Tutorials

Get started quickly with the tutorials we have prepared for you. Take a single Tasks table and develop a full-blown task management application with file upload, many-to-many fields, master-detail pages, and more.

Watch: Building a ToDo App

Data model of Tasks.

Our product helps you turn your database schema into a modern application that works offline, online, and on-premises.

Modern responsive web app created from the Tasks model.

Here is a summary of what you will learn:

  • We will begin by creating a database and add a "Tasks" table. We will then create the app and explore the features. Finally, we will add an icon to the Tasks forms using the Project Designer.
  • To set up business rules, we will configure default values for the "Date" and "Created" fields. Then, we'll hide the "Created" field from the create form, and prevent the user from modifying the field for existing records. Finally, we will add a custom action that will mark tasks as completed. The "Completed" field will be hidden from the create form, and prevent editing in the edit form. Finally, we will create two views, "Active Tasks" and "All Tasks".
  • To add a lookup, we will add the "Categories" table and add a foreign key to "Tasks" table, and update the Tasks model with the new foreign key. Then, we will explore the features of lookups in apps created with Code On Time.
  • We will now add maps by creating a "Locations" table in the database and creating the model. A location lookup will be added to tasks. We will then add some locations, and assign these locations to tasks using the map.
  • In order to add master-detail relationships, we will create the "Attachments" table, create a model, and add a data view field on the Tasks form. We will then upload several files to a task.
  • Now we would like to restrict user access to data. The fields "Creator" and "Owner" will be added to the Tasks table. The corresponding model will be updated to include those fields. Users and Roles will be added to the app using ASP.NET Membership. The two fields will be marked as "User Name" lookups. Business rules will be added to set the current user as the creator and owner by default. Filters will be added to ensure that users can only see tasks created by or owned by them.
  • We will need to add some calculated fields. First, we will add the Expenses table and link it to tasks. We will add "Total Price" calculated field. Expenses data view field will be added on the Tasks form. We will add business rules to calculate the Total Price field, and display some aggregates on the Tasks form.
  • Then, we will need to add many-to-many fields. First, we will add "Tags" and "TaskTags" tables and models. Then, we will add a "Tags" field into the tasks form. This field will first be configured as a checkbox list. We will add several records in-line. Then, we will convert the field to a basket style drop down list. Finally, we will remove the now redundant Categories table.
  • Adding a status bar will help the user. First, we will add a static lookup field "Status" to the "Tasks" table. Then, we will change the business rules to automatically modify the "Status" value. Finally, we will enter a status bar definition for each value of the Status field to visually communicate the state of tasks to the users.
  • Customize forms to enhance the workflow of your users. Learn rapid development of responsive forms that work on any device with any screen size. Master the form design with field flow, tabs, multi-column categories, and custom layouts. Start by changing a flow of fields after a brief introduction of responsive forms. Group in categories, configure categories to display as tabs. Configure a modal popup. Try your hand with custom form layouts.
  • Organize navigation between the single page apps of your universal business application with Quick Launch icons and menu. Drag and drop pages in the navigation hierarchy, set a few icons to populate the Quick Launch bar, and move the menu from the toolbar to the sidebar.
  • Set up a cloud to deploy the app. Our app is ready for production. Learn how to set up Microsoft Azure Cloud for publishing from the app generator. This episode explains how to sign up for an account and provides step-by-step instruction for Azure Active Directory configuration.
  • Add a database to your cloud. An application deployed to Microsoft Azure is typically configured as Web App. The deployment infrastructure of Web App includes an Internet-facing App Service and Database Server. In this episode we will set up a database server and transfer development database schema to the cloud database.
  • Learn to deploy your app as an "app service" to service both web and mobile users. App Service is an Internet facing server that reads and writes data by making SQL queries to the database engine in the cloud. We will set up our app service in the "Standard" tier with SSL, multiple deployment slots, and on-demand performance with auto scaling.
  • Learn the staging-production pipeline to enhance your productivity. Deploy changed app to Staging slot for a live preview. Instantly swap Staging and Production versions of application directly from the app generator.
  • Learn to store binary data outside of the database. Large photos and documents can run up the database size quickly. Such objects known as BLOBs (Large Binary Objects) are frequently stored in the external file system or attached storage. We will show you how to set up external storage of attachments in the file system and Microsoft Azure.
Don't hesitate. Jump right in!