Web Application Generator

Blog
Web Application Generator
Tuesday, February 28, 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 Will render a Call action to activate the device’s dialer application to make a call to the field value.
action-email Will render an Email action to open the device’s emailing application to send an email to the field value.
action-url Will render a Link action to treat the field value as a URL.
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.

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.
Wednesday, February 8, 2017PrintSubscribe
Customizing the Menu in Touch UI

The menu offers the user access to the pages in your application. The default location of the menu is in the toolbar at the top of the screen. Top level pages will be displayed as tabs in the toolbar. Nested pages can be accessed by pressing on the parent tab. Page icons will be displayed in the dropdown menu. The Quick Launch area of the sidebar will display up to five page icons, if any have been defined. The user can view a full list of pages by pressing the “Apps” icon (three by three grid of dots).

The site menu displayed in the application toolbar at the top of the screen.

If the screen width is insufficient to display the full menu, then the remaining options will be grouped under a “More” option.

If the screen is too narrow to display all menu options, a "More" option will be displayed.

If it is not possible to fit three or more pages, then the menu will be hidden.

The menu is hidden on very small devices.

The user can still access the full menu by pressing the hamburger icon in the top left corner. If any page icons are defined, then a grid of these icons will be displayed in the menu panel.

The menu panel will display a grid of page icons.

The full site map will be displayed if no page icons are defined, or when the user presses “More” in the menu panel.

The full site menu is visible in the menu panel.

Moving the Menu to the Sidebar

Depending on project requirements, it may be desirable to move the menu from the toolbar to the sidebar. One way of changing the location is to change “Menu Location” property under the Touch UI section of the Features page in the Project Wizard.

The other way to change the menu location is to set the ui.menu.location property in the “~/WebSite/touch-settings.json” file to “sidebar”. We will use this technique.

Start the app generator. Press on the project name, and press “Open” to reveal the project folder in File Explorer. Navigate to the WebSite folder, and double-click the “touch-settings.json” file to open in your default text editor. It is recommended to use Visual Studio or other editor that supports syntax highlighting and validation.

Opening the "touch-settings.json" file under the WebSite folder of the project directory.

Replace or merge the contents of the file with the following:

{
  "ui": {
    "menu": {
      "location": "sidebar",
      "apps": {
        "tiles": null,
        "location": null
      }
    }
  }
}

The ui.menu.location property has been set to “sidebar”.

Switch back to the browser, and refresh the app. The menu will now be rendered in the sidebar.

The Touch UI menu rendered in the sidebar.

Changing the Location of the “Apps” Icon

The “Apps” icon offers access to the full site menu. By default, it is displayed in the Quick Launch area of the sidebar.

The "Apps" icon is displayed in the Quick Launch area of the sidebar.

The “Apps” icon location can be changed using the ui.menu.apps.location property. The default value, shown in the picture above, is “sidebar”. The icon can also be placed in the toolbar. Make the following change to your touch-settings.json file:

{
  "ui": {
    "menu": {
      "location": "sidebar",
      "apps": {
        "tiles": null,
        "location": "toolbar"
      }
    }
  }
}

Save the file, and refresh the web page. The result of the change can be seen below. Notice that an additional page icon is now displayed in the Quick Launch area.

The "Apps" icon is rendered in the toolbar.

Disabling the “Apps” grid

Activating the “Apps” icon, or opening the menu panel on a small device, will show a grid of page icons. The rest of the pages can be accessed by pressing the “More” button.

The "Apps" icon will display an "Apps" grid if any page icons are available.

The “Apps” grid can be disabled by setting the ui.menu.apps.tiles property to “false”. Make the corresponding change to your touch-settings.json file:

{
  "ui": {
    "menu": {
      "location": "sidebar",
      "apps": {
        "tiles": false,
        "location": "toolbar"
      }
    }
  }
}

Save the file, and refresh the app. Press the “Apps” icon in the sidebar or toolbar. The full site menu will be shown, bypassing the “Apps” grid.

Disabling tiles will bypass the "Apps" grid.

Monday, February 6, 2017PrintSubscribe
Icons in Touch UI

Starting with release 8.5.12.0, over 4,000 icons are available for use in apps created with Touch UI. Icons can be applied to a page, view, or action to help the user in navigation and data manipulation.
 
By default, every application comes integrated with 1,650 icons from the Material icons library, provided for re-use by Google under the Apache License Version 2.0. There are 260 Halfling glyphicons (included with Bootstrap 3.0 under MIT License integrated as well. Additional icon libraries Font Awesome (730) and Ionicons (1,466) can be included using the method described in the last section of this article.
 
The picture below shows the page “Customers”. The page has been assigned the icon “material-icon-group”, and that icon is displayed as selected in the Quick Launch area of the sidebar. The Customers edit form has been assigned the same icon, displayed in the header of the view. The “New Orders” action has icon “material-icon-add-shopping-cart” applied, and the “New Customers” action has “material-icon-group-add” icon.
 
Icons used in Touch UI apps.

Page Icons

Learn how to assign icons to pages. These icons will be displayed in related menus. Up to five page icons will be added to the Quick Launch area of the sidebar.
 
Adding icons to pages will push them to the Quick Launch bar of the sidebar.
 
The “Apps” menu will display a grid of all page icons.
 
The "Apps" menu shows a grid of pages.

View Icons

Icons can be assigned to views in order to better communicate the purpose of a particular form.
 
The Customers modal form shows an icon in the header.

Action Icons

Adding relevant icons to actions helps the user locate and understand the purpose of that action.
 
The "Ship Order" button, with assigned icon, is displayed in the context menu and sidebar.

Additional Icons

Only Material Icons and Halfling Glyphicons are included in Touch UI apps in order to reduce the size of the generated project and required download size for every client. Offline applications will have access to these icons. If more icons are needed, Font Awesome and Ionicons library icons can be included. If additional icons are desired, please open a support ticket for your request.
 
Let’s include icons  from these two libraries. In the Project Designer, press Open to open the project folder in File Explorer. Navigate to “~/WebSite/touch” folder. Right-click and press “New | Text Document”.
 
Creating a new text document in "~/WebSite/touch" folder.
Name the file “custom-icons.css”. Double-click the file to open in your default text editor. Replace the contents with the following:
/*Font Awesome icons*/
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
/*Ionicons*/
@import url('http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css');
Save the file and close the text editor.
 
Let’s use our new icons on some pages. Switch back to the Project Designer. Make the following assignments:
 
Page Icon
Home glyphicon-globe
Order Details fa-barcode
Categories ion-filing
Suppliers ion-cube
Shippers fa-truck
Employees fa-users

On the toolbar, press Browse. The new icons will be used on the sidebar and dropdown menus.

The new Font Awesome and Ionicons icons are used in the sidebar and context menus.

The icons will be visible in the site menu as well.
 
The new Font Awesome and Ionicons icons are used in the site menu.
Continue to Action Icons