Tab Heading
This is the heading that appears on the Tab.
A jQuery UI Icon name (without the
ui-icon-
part) to display on the tab, to the left of the tab name. For
example
'check'.
An image file containing an image to display to the left of the tab
name. For example
'\images\whatever.png'
Tab Condition
If this condition is false then the tab is excluded from the form.
Excluded tabs are not there - they cannot be hidden and
unhidden.
Tab Equate (no quotes)
A unique ID for the tab. This is a constant string so a variable or
expression cannot be used. No quotes are required.
Tab Hide IF
An expression to determine if the tab is visible or not. A Use
Equate must be set for this feature to work. Tabs which are hidden
can be unhidden at runtime.
CSS to apply to the Tab heading.
Tab CSS
CSS to be applied to the tab.
Span Columns
If this is on then all the prompts, values and comments on this tab
will be in a single column. If this is off then the tab is divided
into (at least) 3 columns - one for the prompts, one for the values
and a third for the comments.
Fields
The form is made up of one or more fields.
There are many different kinds of fields(like Strings, Numbers,
Checkboxes and so on.) Many of the field types use common
settings, however many field types have custom settings as well.
Field Tab - Common Settings (part 1)
These settings are common to almost all field
types.
Type
The Type of the field.
Field
The local variable, global variable, or table field to use here.
If the Type is set to PROCEDURE then this setting does not apply.
For some field types, like Display or Map this setting is
optional.
Use Equate (no quotes)
A unique ID for the field on the form. Most often it is the same
as the field name, but it doesn't have to be, and therefore the
same field can appear on the form multiple times (like perhaps on
separate tabs.)
Prompt
The Text which goes to the left of the field on the form.
Include Condition
If this condition is true, the field is included on the form. Note
that fields that are not included cannot be hidden or unhidden.
They are simply not on the form to begin with. If you wish to
hide, or unhide a field then use the next setting.
Hide Condition
If this condition is true then the field is hidden. If false, then
the field is unhidden. This condition is reevaluated whenever the
form field is reset. (ie whenever another field, which has this
field on its reset list, is changed.) If this field is dependant
on other fields on this form (or elsewhere in the application)
then use the SessionValue of those fields in the expression here.
For example;
p_web.GetSessionValue('inv:paid') rather
than just
inv:paid.
Comment
The comment for this field. Note that many comments are generated
automatically based on dictionary, and field, validation rules. To
suppress the automatic comment, explicitly set this field to
something else, or explicitly set it to the empty string ('') for
a blank comment. Comments typically appear to the right of the
field itself. Some field types (like PROCEDURE) do not have a
comment.
Tooltip
The tooltip that will be displayed when the user hovers over the
field.
Span prompt/value/comment
If this is on, then the Prompt, Value and Comment cells will be
combined for this field. Some field types, like PROCEDURE are
automatically spanned across the Prompt, Value and Comment
columns.
Last on Line
Tick this on if the field is the last field on this horizontal
row. If it is off then the next field on the form will be placed
to the right of this field.
Last In Cell
If this is off, and the field is not Last On Line, then the next
field will be placed in the Value cell for this field. If this on,
and the field is not Last On Line, then the next field will occupy
3 additional cells to the right of the 3 cells for this field.
Suppress Comment
Do not generate the Comment cell for this field.
Span Rows
Typically each field spans one row of the form. However you can
use this setting to let it span multiple rows. This is
particularly useful when you have a field on the right (say an
image for example) which is displayed to the right of a number of
other form fields.
Common Settings (part 2)
The following settings do not apply to all
field types, but are common across a number of types, and have the
same behavior regardless of the field type.
Read Only
If this is on then the value of the field cannot be changed.
Read Only IF condition
An expression here allows the field to be read-only in some cases,
but read-write in others.
Right-Justify
Tick this on to justify the contents of the field so they are
right-aligned.
Width (chars)
Sets the width of the field, expressed as a number of characters.
Max Length
The maximum number of characters the user can enter into the
field.
Allow Browser Auto-Complete
Allows the browser to use its own Auto-Complete functionality for
entry fields. Due to the way browsers generate events, this
setting is usually off, and it's recommended to leave it off for
any field that requires immediate validation.
Immediate Validation
If this is on then the new value of the field is sent to the
server when the user completes the field in the browser. You can
then add code on the Client-Side tab to do server-side processing,
and/or update parts of the form. For example one field may alter
the values in other fields, hide or unhide fields and tabs and so
on.
When Accepted, Set Focus On
Once this field has been changed, the focus then should be placed
on another field. Use the Use Equate of the other field here.
Placeholder
A placeholder is text that appears inside an entry field,
describing what sort of entry is expected. The placeholder text is
typically in a light shade to differentiate it from an actual
entry.
Send Every Keypress to server
An event is generated, and sent to the server for each keypress,
as the user enters data into the field.
Field Type Specific Settings
In addition to the common settings mentioned
above, many field types have custom settings which apply to them.
The following sections deal with each field type, and the settings
for it.
Form
Barcode Scanner
The barcode scanner field type makes use of
the camera on the device (or webcam on a PC) to scan a barcode or
QR Code. This code can then be places in another form field after
scanning. Barcodes can be scanned in any orientation.
Destination Field Equate
This is the Use Equate of some other field on the form. When a
barcode is scanned the value in the barcode is placed in this
field, and a change event on the field is triggered. Server-side
code that should execute when a field is scanned should be placed
on this field.
Barcode Type
Select from the list of types provided. Notice that QR code is on
this list (even though QR Codes are not strictly Barcodes.)
Follow URL
If the code contains a URL, and this is tacked on, then the URL
will automatically be followed when the scan is made.
Play Sound
If you want a sound to play when an item is scanned then enter the
URL to the file here. This is typically an MP3 file, and is
typically in the \sounds\ folder. So, for example,
'/sounds/ding.mp3'
Reset Timeout
By default the same value will not be read twice in a row. If you
wish multiple reads to be allowed then enter the minimum time
between reads here. This number is in thousandths of a second, so
setting it to 2000 would require a gap of 2 seconds between
duplicate reads of the same value.
Show Bounding Box
If this option is on then a colored box is displayed around the
barcode when it is read.
Bounding Color
The default color is red, but you can set the bounding box color
to anything you like. Set it to color:none to use the default
color.
Button
A button is an object on the form which the
user can press. This can take be used for navigation (ie taking
the user to another popup window, or page) or it can simply
execute some code on the server. The server can then update parts
of the page as it desires.
Type
Select from
Button,
Start,
Save,
Delete,
Cancel,
Logout,
Submit or
Reset.
The
Save,
Cancel,
Delete and
Logout
buttons allow you to add multiple standard form buttons
to the form. If you choose one of these then none of the other
options apply, as the global options for those buttons are used.
Start buttons are used to start a
task (usually in conjunction with a Progress Bar control).
The plain
Button type allows you to
create a generic button for the user to press, which will perform
some action. This action may be a navigation event or just some
code on the server (but not both).
Name
All buttons require a (unique) name on the form. Use quotes for a
fixed value here. Something simple like
'whatever_btn'
can be used. This name is not displayed to the user.
Desktop Text
The text (if any) that will appear on the button when in desktop
mode.
DIV CSS Class
The CSS Class for the Form DIV which surrounds the button.
Button CSS Class
The CSS Class for the button itself.
Default Button
Tick this on if this is a default button on the form. The default
button is triggered when the user presses ENTER on the keyboard.
Only one button on the form can be a Default button.
Start Automatically When Form Generates
This option is available if the button is a START button. If this
is on then the button is automatically pressed when the form
opens.
When Clicked Set Focus On
Enter the name of another field on the form here. If the user
clicks on the button, focus will be transferred to the nominated
control.
Use jQuery Styled Button
If this is on then the button will be styled according to your CSS
rules. If it is off then a browser-button will be displayed. The
button may then change it's look to match the browser, and
operating system, being used.
JavaScript Icon
The jQuery-UI icon to use on the button when the form is in
desktop mode. The ui-icon part of the name is not included here.
For example 'cart' for the shopping cart icon.
Disabled If
The button is in a disabled state when this condition is true.
This will be re-evaluated whenever the button is reset by another
form field.
Start Button Set
Buttons can be grouped together into a set. If this button is the
first in a set, then tick this option on.
End Button Set
Buttons can be grouped together into a set. If this button is the
last in a set, then tick this option on.
Image
The web-folder-relative path and name of the image to display. The
image itself should be in a web-compatible format, and be either
in the web folder, or a sub-folder of the web folder.
Image Width
The width of the image, in pixels.
Image Height
The height of the image, in pixels.
Image Alt
Alternate textto display if the image is not, or can not, be
displayed.
Image CSS
A CSS class to apply to the image container.
Carousel
Dots
If on then dots are displayed below the carousel, one dot to
indicate each item in the carousel.
Autoplay
If on then the carousel will automatically play using the speed
property (see below).
Speed
The time, in thousandths of a second, between carousel changes.
Form
Checkbox
Use jQuery Button
Tick this on if you want the checkbox to appear as a button. If
this is off then a regular checkbox will appear.
True Text
The text (if any) to display on the button when the variable is
true.
False Text
The text (if any) to display on the button when the variable is
false.
True Icon
The icon (if any) to display on the button when the variable is
true. This is a Themeroller icon name without the
icon-
prefix.
False Icon
The icon (if any) to display on the button when the variable is
false. This is a Themeroller icon name without the
icon-
prefix.
True Value
The value to assign to the underlying variable if the checkbox is
in a checked state. Usually 1.
False Value
The value to assign to the underlying variable if the checkbox is
in an unchecked state. Usually 0.
More
See the
Common Settings for more.
Form
Color
These are settings specific to the Color
Picker field type. The color picker allows users to select a color
value from a color chart, rather than having to enter the color as
a number.
Color is stored as
In a web app you may choose to store the color value using the
regular Clarion format (BGR) or as a Web string (#123456). Use
this setting so the forms knows which format to use.
Show Entry Field
If this is on then an entry field will be displayed containing the
color value. This allows the user to modify the color selected
directly. (For example cut & pasting from a color elsewhere.)
Force user to use Lookup
If this is on the user can see the color value, but con only
change it using the color picker.
Live Update
Tick this on to apply the color immediate to another field on the
form.
Field
The Use Equate for another field on the form (usually a Display
field) which will immediately get the color selected by the user.
This allows the user to see the effect of their color choice.
Attribute
The attribute that this color choice will affect. Select from
Color, Background Color and Border color.
More
See the
Common Settings for more.
Date
Dates are obviously a common input format into
any form. However NetTalk Date fields are clever in ways you may
not expect. Apart from offering a lookup button to the right of
the field (which allows the user to select a date from a calendar)
the user is also able to type various date-related phrases into
the date field, and it will automatically figure out the
appropriate date. Some of these phrases include
today,
yesterday,
last
week,
next month,
last
quarter,
3rd monday in june
and so on.
Force User to Use Lookup
If this is on then the user will not be able to type a date, but
they will be required to use the lookup button to select a date.
Picture
The date picture to use when displaying the field. Note that if
the user enters a date directly, with the wrong picture, but which
is unambiguous, then the input will be accepted, and handled
appropriately. For example if you ask for
dd/mm/yyyy and they enter
2014/3/14 then the date will be accepted.
Date Lookup Picture
the date picture to use in the lookup (if different.)
More
See the
Common Settings for more.
Display
Display fields can display text or HTML on the
form. Most of the settings for this field type are common to other
fields, and are on the
Field tab.
Horizontal Line
Tick this on to display a horizontal line on the form.
Button
An alternative to selecting the Button field type. This option is
deprecated. You should rather use the Button field type instead of
the Display field with this option on.
Text
The text to display. If this is blank then the contents of the
form field is displayed.
Picture
A picture used to format the data being displayed.
Allow xHTML
Allows the Display field to display formatted HTML. The developer
is responsible to ensure that the data being displayed is valid
xHTML.
Allow Unsafe xHTML
Allows the xHTML to contain code which may be considered unsafe.
It is not advisable to turn this on for any user-generated
content.
Image
The web-folder-relative path and name of the image to display. The
image itself should be in a web-compatible format, and be either
in the web folder, or a sub-folder of the web folder.
Image Width
The width of the image, in pixels.
Image Height
The height of the image, in pixels.
Image Alt
Alternate text to display if the image is not, or can not, be
displayed.
Image CSS
A CSS class to apply to the image container.
This field allows you to enter JavaScript code here which will be
executed when the Display field is generated onto the form. This
makes it easier to add custom JavaScript widgets to the form where
they take the form of a DIV or other identifier, plus a small
amount of JavaScript initialization code.
Drop
Height
The height of the dropped area.
Width
The width of the control - in Pixels.
Allow Multiple Selections
Allows multiple items on the Drop control to be selected at the
same time.
Form
Email
Email is a special entry type recognized by
the browser. Browser support is excellent, and it is supported by
all browsers that NetTalk targets.
The exact effect will vary from browser to browser.
This type behaves a lot like a Entry type, but gives the browser
some clues as to the content of the field. The most obvious
difference is on devices with an on-screen keyboard; many devices
will display a different keyboard here than the usual one.
See Also:
Telephone,
URL
More
See the
Common Settings for more.
External
The External form
field type requires the external
script to be included in the app.
External fields aren't really fields at all. Rather they create an
instance of the
ntexternal widget on
the form. This widget (invisibly) polls other servers for
information, and then injects that information directly onto a
field in the form. In other words the WebForm fetches information
not from the WebServer, but from some "External Web Server". The
reply from that server is then fed into the
value
property (by default) of some other field on the form.
Destination
The target field on the form that will receive the incoming
external data.
Host Name
The host name of the "other server". For example
'127.0.0.1'
for this machine, or
'www.other.com'
for another server on the LAN or WAN.
Host Port
The Port number to connect to. Defaults to port 80. If this port
is set to 80, and the current page is SSL (and hence the remote
server is presumed to be SSL) then the port is automatically
transposed to be port 443 internally.
Host URL
The Page name (procedure name) to call in the remote server.
Defaults to
'GetData'. This means the
GetData procedure will be called (and will return the value) when
the external server is queried.
Timer
Set to a number (in thousandths of a second) to poll the remote
server, when the widget is in Polling mode. Set it to 0 to
disallow polling.
Auto Start
If this is on then the page will start polling the server (or will
call it once) as the page opens.
The widget can be controlled using Buttons on the page, of type
"External". This allows you to change the behavior of the widget
as required.
Form
File Upload
The File Upload
form field type requires the file
upload script to be included in the app.
Settings specific to the File Upload field type.
Use Advanced Uploader (HTML5)
If this is on then a JavaScript uploader will be used instead of
the native HTML File Upload control. This uploader allows for a
lot more functionality, and gives the user more feedback, but may
not be supported on some older browsers.
Use jQuery Buttons
Tick this on to style the Uploader buttons as jQuery buttons.
Start Upload when File Selected
If this is on the the file is uploaded to the server as soon as it
is selected by the user. If it is off, then the user will have to
press the Start button to begin uploading. In either case The user
will not be able to click on Save until the file upload has
completed.
Allow Multiple Selections
Allows the user to select multiple files to upload. If this is off
only one file will be selected at a time.
Only Allow 1 Upload
If this is on, then once the upload is complete, the user will not
be able to upload another file.
Add,
Start, Clear, Remove, Cancel and Text tabs
These tabs let you override the global settings for the various
file upload buttons.
Max Length
This setting only applies to the old upload entry type. It limits
the length of the name that can be uploaded (including the path).
Save Incoming Files to Uploads Folder
If this is on then incoming files are automatically saved into the
\web\uploads folder. If this is off
then you will need to manually save incoming files by adding embed
code to the
SaveFile::FieldEquate
routine.
Example;
p_web.SaveFile('MAI:MailBoxPicture','c:\temp:\whatever.jpg')
Remove WebFolderPath from Incoming File Name
The incoming file is saved in a folder on the disk - usually the
uploads folder inside the web folder. Thus the name of the file,
as saved on the server, might be
c:\app\web\uploads\whatever.jpg.
This field value is now stored in the form field, presumably for
writing into a database table. If you would like to store this as
\uploads\whatever.jpg with the
c:\app\web part removed, then tick this
option on. If this option is off then the full pathname to the
uploaded file will be stored in the table field. If the uploaded
file is not stored relative to the web folder then the full
pathname will be stored in the table field even if this option is
on.
Allows you to set the maximum file size allowed by the Upload
button.
Tick on the options you want to support for file uploading. The
user is still able to upload any file they like, but this setting
gives the browser some clues as to which files are desirable and
may filter the File Dialog to these options. Built-in common types
are Audio, Video, Image, PDF and ZIP. This is also a Custom field
which can contain a comma separated list of acceptable mime types.
You can also use a .xxx extension (and hence a comma separated
list of extensions) here. For example
'.doc,.xls'
Allow capture
from local device
If this is on and the accepted file type is Image, Video or Audio,
then the user may be able to use the local hardware to capture one
of these directly. For example, if the file type is Image, and
this is on, and the user is on a recent phone then they will be
able to take a picture which is then uploaded. Not all hardware
supports this option but most recent phones and tablets do.
More
See the
Common Settings for more.
Form
Gallery
The Gallery form
field type requires the gallery
script to be included in the app.
A Gallery is a collection of images that can be displayed to the
user.
From Table
The table containing the list of images.
Filter
A filter on the above table to limit the image list for this
gallery.
Order
The order in which the records are read, and hence the order in
which the images appear.
Image
The web-folder-relative path and name of the image to display
(full size). The image itself must be in a web-compatible format,
in a folder in or below the WEB folder.
Thumbnail
The web-folder-relative path and name of a thumbnail image to
display, if one exists. The thumbnail image itself must be in a
web-compatible format, in a folder in or below the WEB folder.
Title
A title to display at the bottom of the image.
Description
A description to display at the bottom of the image.
Max Pics
The maximum number of images to include in the gallery.
AutoPlay
If on then the gallery will automatically scroll between the
available images.
Form
Gauge
The Gauge form
field type requires the gauge script
to be included in the app.
A Gauge is a visible indicator which can be displayed to the user.
Gauge Tab
Width
See Height
Height
The gauge widget is drawn using a canvas tag on the page. The
Width and Height settings determine the initial size of the gauge.
The size can be overridden using the Canvas CSS Class (see CSS
Tab).
Live via WebSocket
If this option is on then the gauge will be updated automatically
from the web server when the linked Host or Session value changes.
If this option is on then be sure that the WebSockets script is
included in the application (WebServer procedure, Scripts tab).
Scope
The scope of the field to use for the websocket update.
Field
The name of the field to use for the web socket update. If this
value is left empty then the Form Field (on the General tab) is
used.
Text Prefix
The text which appears before the gauge value, on the gauge.
Text Suffix
The text which appears after the gauge value, on the gauge.
Minimum Value
The minimum value for the gauge. Defaults to 0.
Maximum Value
The maximum value for the gauge. Defaults to 100.
Auto Increase Maximum Value
If this option is on, and the gauge receives a value greater than
the maximum value, then the gauge automatically rescales itself,
and re-labels itself.
Animation Speed
The speed of the animation as the gauge pointer moves. Set to 0
for no animation. Default is 32.
Angle
The "shape" of the gauge expressed as an angle from the horizontal
from -0.5 (bottom) to 0.5 (top). So 0 is a semi-circle gauge with
a horizontal base. -0.5 is a circular gauge. +0.5 is pure vertical
gauge (that's basically invisible.)
Line Width
The width of the bar around the edge of the gauge.
Auto Labels
If this is a number greater than 0 then this many labels will
automatically be placed around the gauge. The preference is for
whole numbers rather than being at specific points on the gauge.
Labels at (comma separated list)
If the Auto Labels field is blank, then you can enter specific
label values here, as a comma separated list.
Pointer Graphic
The name of a graphic file to place at the end of the pointer. The
graphic should contain a pointer when the pointer itself is
vertically straight up to the top of the screen.
Pointer Length % (0-100)
The length of the pointer, as a percentage of the canvas size.
Default is 50.
Pointer Thickness (0-300)
The thickness of the pointer. Default is 10.
Colors Tab
The colors for the gauge are typically set using the Pointer class
and Dial class (see CSS Tab). Settings on this tab however
override the CSS class.
Change Color based on Value
If this option is on then the gauge can change color based on the
value.
Generate Gradient
If this is true then the gauge changes gradually as it moves
through the values. The gradient is calculated from the
percentages below.
Percent colors
This allows you to specify as many colors as you like, linked to
specific percentages. So for example, 0:green, 75:orange, 100:red.
Background Zones
If this option is on then the dial part of the gauge will be
divided into zones - as many as you like. Each zone can have a
different color, and a different thickness.
Ticks Tab
Ticks are markers on the gauge itself which help to divide the
gauge into sections. There are Main ticks, and then each Main dick
can be further divided by Sub ticks. the width, length, and color
of main as sub ticks can be set on this tab.
CSS Tab
The CSS tab allows you to control the various layout settings for
the gauge.
Pointer Class
Only the Color property from this class is used. (All other
properties are ignored.) This determines the color of the pointer.
Dial Class
Only 3 properties from this class are used. The color property
sets the "inside" of the dial, up to the pointer value. The
border-color property sets the "outside" of the dial, up to the
pointer value. The background-color is used as the color for the
background between the pointer value and the max value.
Labels Class
Only 3 properties from this class are used to create the labels
around the outside of the gauge. The font-size, font-family and
color properties are all used.
Form
Image
Form
JsonList
Keyboard
The on-screen keyboard allows you to make a
popup, or inline, keyboard, which allows the user to type on the
screen.
Typically this would be used in situations where the machine does
not have a keyboard (like a kiosk).
Unusually this is one field where the Use Equate name matters - if
the equate name is osk, then some additional functionality may be
in play.
Type
There are some keyboards "built in" to the template, however you
may choose to make your own keyboard. The keyboard widget can have
any number of keys, on any number of rows, in any layout you like.
So you may choose to start with one of the pre-defined keyboards,
and then adjust to your needs. If you do create a custom keyboard
then you will need to manually (ie in embed code) set the options
for the alphabet, css and action arrays which are passed to the
widget.
Inline
If this option is off then the keyboard appears in a popup dialog.
This can be moved around the screen, and will appear regardless of
what tab the user is on. If this option is on then the keyboard
appears "inline" in the form - so it'll be bound to a tab, it will
remain visiable (and locked in position) and so on.
AutoHide
This feature only applies if the Inline option above is OFF and
the Use Equate for the field is set to osk. If these conditions
are met, and this option is set to on, then the keyboard will
automatically slide into view when the user is on an entry, or
entry-type field, and slide out of view when the focus is not on
an entry field.
Start Case
You can select if the keyboard should appear in upper, or lower
case mode.
Width
The width of the keyboard. A recommended width for qwery keyboards
is '72em'. A recommended width for numeric keyboards is '15em'.
Map
The Map form
field type requires the maps script
to be included in the app.
Width (pixels)
Set the width of the map control (in pixels)
Height (pixels)
Set the height of the map control (in pixels)
Use Current Location
When the map opens it will attempt to locate the current position
of the user (which may or may not be accurate, depending on the
abilities of the hardware) and will start the map at that
position.
Latitude
Set the Latitude which will be at the center of the map. The value
is in degrees, and can contain (and probably will contain) a
decimal portion. Latitude is measures in degrees North or South of
the equator. Negative values entered here are treated as South,
positive values are treated as North.
Longitude
Set the Longitude which will be at the center of the map. The
value is in degrees, and can contain (and probably will contain) a
decimal portion. Longitude is measures in degrees East or West of
the Greenwich Meridian (which goes through London, England).
Negative values entered here are treated as West, positive values
are treated as East.
Zoom
Set the initial zoom level for the map. Zoom level 1 is from far
far away, whereas zoom level 16 is very close to the ground.
Display Marker
Tick this on to display a "Home" marker on the map.
Description
A small popup description can be displayed when the user clicks on
the marker.
Display Description when Map Opens
If this is on the the description is visible when the map opens -
the user does not need to click on the marker. If the user clicks
somewhere else on the map, the description will close.
Allow xHtml
Tick this on to allow compliant xHTML code in the marker
description.
Allow UNSAFE xHTML
Tick this on to allow unsafe xHTML code in the marker description.
Be very sure you know what you are doing before you tick this
option on.
Marker Object Name
The Markers are pre-defined images which are used to pinpoint data
on the map. A number of marker objects are available, and it is
possible for you to create your own custom markers.
Custom Name
If a custom marker is being used, then enter the name of the
custom marker here.
Draggable
If this is on the Home marker can be dragged around on the map.
(This dragging does not update a table, but it can be used to
update other fields on the form.)
Show Metric Scale
If this is on then a metric scale is displayed on the bottom left
corner of the map.
Show Imperial Scale
If this is on then an imperial scale is displayed on the bottom
left corner of the map.
Max Width(pixels)
The size of the scale (in pixels.)
Form
Media
The Media form
field type requires the media script
to be included in the app.
The Media field type allows you to include various external media
assets in the form. PDF files, iFrames and so on.
Text
URL
The URL resource containing the media to display.
Width (pixels)
The width of the container.
Height (pixels)
The height of the container.
Autoplay
If this is on, and the media container contains a play button
(such as for audio or video) then this switch determines if the
media will automatically play or not.
Form
Month
Month is a special type recognized by the
browser. For a list of browser support see
CanIUse .
Support for this type mostly exists on mobile browsers, and
Chrome on the desktop. IE is not supported. On browsers that don't
support it it falls back to being a simple text entry field.
Browsers that do support it present their own lookup interface for
the field. The exact look will vary from browser to browser.
The input format for the field is
yyyy-mm
(aka @D016-), however the browser may display the value in any
format it deems suitable.
The field will be treated as a Clarion Date,
or a simple string, and should be stored in either a LONG or
STRING data type.
See Also
Date,
Time,
Week
Number
Numbers are a special type recognized by the
browser. In some browsers these will be displayed as a Spin
control, however this is not universal behavior. The formatting of
the number is also browser dependent, and you cannot format the
number with a Picture. In many cases it may be preferable to use
either the String field type or the Spinner field type.
More
See the
Common Settings for more.
Procedure
Settings specific to the Procedure field type.
Procedure
the name of the procedure to include at this point. Browses, other
forms (which don't have a FORM tag, NetWebSources, NetWebYears can
all be included on a form here.
Parameter Condition
A condition to determine f the parameter is included or not.
Parameter
The name of a parameter to include.
Value
The value of the parameter to include.
Progress
Progress Timer (thousands of a second)
The progress bar updates by sending a small request from the
browser to the server. The server inspects the session queue to
determine the progress, and reports this to the browser. Set this
number to something reasonable, given the amount of time you
expect the process to take. For a report a setting of 10000 (10
seconds) may be fine, for a process that can take hours you may
want to set it even higher.
Create Hyperlink when Process Completes
If the procedure being run creates a file, then the file name will
be passed back to the form when the procedure completes. If you
want to display a hyperlink to the user then tick this option on.
Note that whether this option is on or off, the fields listed on
the Client-Side tab will be refreshed when the progress bar
completes.
In some cases you can skip right over the "hyperlink" and simply
display the file for the user. The Reports examples show this
approach.
Target
The target where the link will open. For example
'_blank'
opens the link in a new tab.
Text
The text to display in the hyperlink when the process completes.
Picture
A picture used to format the text being displayed.
Allow xHTML
Allows the text field to display formatted HTML. The developer is
responsible to ensure that the data being displayed is valid
xHTML.
Allow Unsafe xHTML
Allows the xHTML to contain code which may be considered unsafe.
It is not advisable to turn this on for any user-generated
content.
Width (value and unit)
Allows you to set he width of the progress bar. You can use any of
the CSS width units including px or em. For example '200px' or
'15em'
Form
Radio
Use jQuery Buttons
Tick this option on for the radio options to appear as a set of
buttons, with one button "latched". If this is off then normal
radio buttons will be displayed.
Text
The text (if any) for the Radio option.
Value
The Value for this radio option.
Include Condition
An expression which, if false, excludes this radio option from the
possibilities.
ReadOnly IF Condition
An expression which will set this radio option to read-only.
Tip
A tip for this radio option.
Image
An image for this radio option.
Last On Line
Tick this on if this field is the last one on the line.
More
See the
Common Settings for more.
Form
Range
Form
Signature
The Signature
form field type requires the signature
script to be included in the app.
Signatures are areas on the form where the user can draw with
their finger (on a touch screen) or using a mouse or touchpad on
other computers.
Width (pixels)
The width of the signature area, in pixels.
Height (pixels)
The height of the signature area, in pixels.
Allow on Insert Only
If this is on, then the signature will only allow the field to be
changed when the form is in Insert mode. If the form is in Change
mode then the existing signature will be visible but can't be
changed.
Include Clear Button
If this is on then a clear button will be visible which will allow
the user to clear the signature field before entering a new
signature.
Clear Button Text
The text which will appear on the Clear button.
Use jQuery Button
Tick this on if you want the Clear button to be a jQuery styled
button.
Clear Button Icon
The icon (if any) to put on the Clear button.
Include Guide Line
If this is on then a light grey line will appear in the signature
box. This helps people to know where to start writing their
signature.
Save Signature as Image File
If this is on the then signature will be saved to an image when it
arrives on the server. You will need a procedure to write the
image (see setting below.)
Save to File on Insert
Turn this on to save the signature to a file when the form was in
Insert mode.
Save to File on Change
Turn this on to save the signature to a file when the form was in
Change mode.
Procedure
The name of the procedure that converts the signature to a graphic
file. The Signatures (75) example uses the CapeSoft DRAW library
to do this, but it's possible to write the procedure using which
ever drawing library is your favorite.
File Name
The name of the image file to save.
More
See the
Common Settings for more.
Form
Slider
Settings specific to the Spinner field type.
To Field
The Slider control can have two handles. If this field is set then
a second handle is added to the bar, and the value of the second
handle is assigned to this field. (The first handle is assigned to
the normal form field as expected.)
Hide Entry Field
If this is on then only the slider is displayed. If it is off then
a normal entry field is displayed to the right of the slider which
allows the user to see (and enter) the specific value.
Slider Length
The length of the slider bar. This is a CSS setting so you can
include the unit. Valid units are
em,
% and
px.
For example
'25%' or
'20em'.
Spinner
Settings specific to the Spinner field type.
Page Step
The value to step by with each tick up or down of the spinner.
Quick Scroll
when holding down the arrow button the scrolling will speed up to
jump in increments of this size.
Up Icon
The jQuery-UI icon name - minus the
icon-
part.
Down Icon
The jQuery-UI icon name - minus the
icon-
part.
String
Settings specific to the String field type.
Lookup Button
If this is on then a lookup button will be displayed to the right
of the field (and more tabs will appear with other various lookup
options - those are documented lower down.)
Hide Lookup button (Use Hotkey Only)
Lookups can be triggered from the button, or via a hotkey on the
field (usually F2 or ?). If this option is on then the button is
hidden and the user would need to know about, and use, the hotkey
in order to see the lookup list.
Hide Lookup button IF
If this expression is true then the lookup button will be hidden.
As with the option above the lookup is still there, and can be
triggered using the hotkey.
Password Field
Tick this on if the field is a password field. This means that the
text in the entry box is replaced with dots or asterisk characters
so what the user is typing is not revealed. Note that it doesn't
offer any security beyond the immediately visible text. If the
user inspects the page source then the value of the field is
visible.
Picture
The entry will be formatted to this picture after the user
completes typing it in. If any existing value is in the field then
it will be formatted to this picture before it is displayed to the
user.
Auto Tab
If this is on, and the user types in the maximum allowed number of
characters, then the focus will move to the next field. this is
useful where you are creating a group of fields next to each
other, like a credit card number, or activation code field, and as
the user completes one part of the field it automatically moves on
to the next.
Send Every Keypress To Server
If this is on then each keypress is sent to the server as the user
types it. In this situation it does not wait to the end of the
field before sending the contents to the server.
More
See the
Common Settings for more.
Telephone
Telephone is a special type recognized by the
browser. Browser support is excellent, and it is supported by all
browsers that NetTalk targets.
The exact effect will vary from browser to browser.
This type behaves a lot like a Entry type, but gives the browser
some clues as to the content of the field. The most obvious
difference is on devices with an on-screen keyboard; many devices
will display a different keyboard here than the usual one.
See also
Email,
URL
More
See the
Common Settings for more.
Text
Lookup Button
If this is on then a lookup button will appear to the right of the
field. This will allow the user to select some common text for
this field.
Hide Lookup Button
If this is on then the lookup functionality is still there, but
the button itself is hidden. The user will then need to use a
hotkey to open the lookup window.
Hide Lookup button IF
If this expression is true then the lookup button will be hidden.
As with the option above the lookup is still there, and can be
triggered using the hotkey.
Rows
The initial vertical size of the text field.
Columns
TThe initial horizontal size of the text field.
Allow xHTML
Tick this on to allow the user to enter xHTML in the field. If
this is on then you can allow them to type in "raw" HTTP, or use
one of the built-in WYSIWYG editors.
Allow Unsafe xHTML
Tick this on if you want unsafe input to be allowed. In this
position this is strongly not recommended.
Editor
Select your preferred HTML editor here. You can set the editor
globally (in the WebServer procedure) and you can override that
global setting here if you wish.
Autosize Text box vertically
If this is on then the box will expand automatically if the user
needs more rows of text. If this is off then the field will be
limited to the number of specified rows.
More
See the
Common Settings for more.
Form
Time
Time is a special type of entry field
recognized by the browser. For a list of browser support see
CanIUse. Support is generally good. It is
not supported in IE, or Desktop Safari. On browsers that don't
support it it falls back to being a simple text entry field.
Browsers that do support it present their own lookup interface for
the field. The exact look will vary from browser to browser.
See Also
Date,
Month,
WeekTree
The Tree form
field type requires the tree script
to be included in the app.
Form
URL
URL is a special type recognized by the
browser. Browser support is excellent, and it is supported by all
browsers that NetTalk targets.
The exact effect will vary from browser to browser.
This type behaves a lot like a Entry type, but gives the browser
some clues as to the content of the field. The most obvious
difference is on devices with an on-screen keyboard; many devices
will display a different keyboard here than the usual one.
See Also
Email,
Telephone
More
See the
Common Settings for more.
Webcam
The Webcam form
field type requires the webcam script
to be included in the app.
The Webcam form field type uses the HTML5 API called GetUserMedia.
This is not supported on all browsers. You can check to see which
browsers support this by going to
http://caniuse.com/#feat=stream.
If your form makes use of this field type, then when the form
opens the user will be prompted to allow the app to use the camera
and/or microphone. If the users selects "No" then this form field
will not work. At this point most browsers do not allow the user
to "Always Accept".
Most browsers will require the page to be served over a TLS
connection (ie HTTPS) to allow use of the camera.
Video
Tick this on to activate the users Video camera (webcam) on the
form.
Use Camera
If the device has multiple cameras (like a phone or tablet) then
you can use this option to determine which camera will be used.
Select between
user and
background.
Audio
Tick this on to activate the users Audio recorder (microphone) on
the form.
Image to show the shot
If you wish to show a snapshot (taken with a Webcam button) to the
user, in an Image control, then select the image control here.
(You will need to add another form field, a Display field, with
the Image property set to
'something',
to the form to receive this image.)
Upload
Tick this option on to automatically upload the image to the web
server when it is taken.
Save
Tick this on to Save the incoming image directly into the
web\uploads folder as it arrives. the file will be given a random
name, which will be placed in the Webcam FIELD.
Form
Week
Week is a special type recognized by the
browser. For a list of browser support see
CanIUse .
Browser support is good on mobile, as well as Edge and Chrome on
the desktop. On browsers that don't support it it falls back to
being a simple text entry field. Browsers that do support it
present their own lookup interface for the field. The exact look
will vary from browser to browser.
The input format for the field is
yyyy-Wnn
(aka @D091-)
The field will be treated as a Clarion Date, or a simple
string, and should be stored in either a LONG or STRING data
type.
YouTube
The YouTube control depends on the API
provided by Google. All the current options of the API are
supported, however the Google API may change in the future. The
Parameters supported by the YouTube link are documented at
https://developers.google.com/youtube/player_parameters.
Videos are embedded using the
Iframe
method.
Width
The width of the player.
Height
The height of the player.
Video ID
The YouTube ID of the video to play.
Auto Hide
One of All, Some or None. Determines the behavior of the video
controls once the video starts playing.
Auto Play
Tick this on for the video to start playing immediately. Note that
outside of specific use cases this is considered to be undesirable
on most pages. For example on a regular web page this should be
off, however if this video was selected from a browse, and clearly
the user wants to see it, then it can be on.
Color
One of Red or White. This determines the color of the progress bar
as the video plays. Note that setting the color to white will
disable the Modest Branding option.
Controls
One of No, Yes or Fast. Determines if the player controls are
displayed in the video or not.
Annotations
Tick this off to prevent annotations from being displayed in the
video.
Modest Branding
If this is on then the player does not display the usual YouTube
logo on the control bar. A small logo will appear if the user
hovers over a paused video.
Loop
Tick this on for the video to loop back to the beginning once
completed. If a playlist is being used then the whole playlist
will be displayed before the playlist beings again from the first
video.
Playlist
A comma separated list of Video ID's to play. The Video ID field
above will be the first video to play, and this list will play
after that video.
Related
If this is on then related videos will be displayed at the end of
the video. If it is off then related video are not shown.
Start At
A position (in seconds) of where to start playing in the video.
Theme
One of Dark or Light. These correspond to the themes Google offers
for the YouTube video player.
TinyMCE
Not currently used
Auto Complete
Auto-Complete is available for String and
Lookup fields. It provides the user with suggestions as they are
entering data.
Enable Autocomplete
Tick this on if the field is to have auto-complete functionality
activated.
Filter Type
Select the filter type to use as the user types. You can return
items which start with the same characters as the user types,
(Begins-With) or which contain the text anywhere in the string
(Contains). The Search option is a special form of Contains, it
treats the typing as a space-separated list and searches for the
different terms in the list.
Case Sensitive
Tick this on if the search should be case sensitive.
Minimum Chars
Set the minimum number of characters that the user must type
before a search is done. Usually this is 2 characters.
Maximum List
Enter the maximum number of items to return in the suggestion
list. For large tables it's a good idea to limit the possibile
replies, as it can shorted the search time.
Delay (millisecs)
the length of the delay between typed characters before the search
will be done. In other words as long as the user is typing, no
search is done, however if they pause for this number of
"thousandths of a second" then a search is started.
From Table
The table containing the possible suggestions.
Order by
the order to search the table, and hence the order of the items
presented.
Filter
A filter of the table to limit it to certain records.
Value field
The Value field which will ultimately be stored in the variable
(but not necessarily seen by the user.)
Description Field
The description field which will be displayed in the list.
Display Description instead of Value
If this is on then when a user selects a suggested item, the
description will appear in the entry field, not the value. This
makes for a more pleasing user interface, but does require that
the foreign table has a single-component-key on the description
field.
More Assignments
You can enter more assignments to be made from the Foreign table
to the local table here.
Gallery Settings
this tab allows you to add items to the
gallery which are not from a table. A single gallery can contain
fixed images, then data from the table, then more fixed images.
this tab contains the fixed images which go before, and the images
that go after, the ones from the data table. Of course both of
these lists are optional, as indeed are the ones from the table.
Image
The web-relative path and file name of the full image. The image
needs to be in, or below, the WEB folder.
Thumbnail
The web-relative path and file name of the thumbnail image. The
image needs to be in, or below, the WEB folder.
Title
A title for the image.
Description
A description of the image.
Lookup Settings
Lookup settings are used for String and Text fields, with the Lookup
button option ticked on. Similar settings are also also used for
Drop fields. This tab of settings dictates the foreign table which
contains the foreign record being looked up on. In the Drop field
case these settings are optional.
Procedure
The Browse procedure (or form procedure containing a browse) to
use as the Lookup.
Parameters
Any extra parameters you want to pass to the Lookup procedure.
These parameters are in the form
parameter=value¶meter=value
and so on.
Popup Lookup
Tick this on if the lookup will open in a popup window.
URL
If the lookup is not a procedure, but a static page, then enter
the URL here. This is for advanced users only.
Target
If you enter a specific URL you can enter a Frame name here.
Lookup Title
If the Lookup is a Popup then you can enter a custom title for the
popup here.
From Table
The name of the foreign table which is being looked up on.
Order By
The order of the records in the foreign table.
Value Field
The value field in the remote table which will be copied into the
field in this form table. The value field is what links the
foreign table to this table. The user won't necessarily see this
value, but it's still the linking value.
Description Field
The description field in the foreign table.
Auto-Lookup on Insert
If the form is in Insert mode, then open the Lookup as soon as the
Insert form opens.
Force User to Use Lookup
If this is on then the user has to use the lookup button, they
can't enter the field directly.
Display Description Instead of Value
If the foreign table has a key with just the description field in
it, then you can display the Description field to the user, and
the Value field is completely hidden. This makes a very good
lookup because the user does not need to see, or remember, obscure
or arbitrary codes.
Allow Custom Value not in Lookup Table
If this is on then the value entered is not validated against the
foreign table. In other words the user can enter text that does
have to be in the foreign table.
More Assignments
Add more assignments here. this allows you to copy other fields
(not just the Value field) from the foreign table. For example,
when looking up a product the product code is the value field, but
the LineItem price is copied over as a starting point for the line
item price.
Drop Settings
Validation
Different field types have different options
for validation. So the settings you see on this tab (or indeed if
the tab is even visible) depends on the field type. Most of the
options on this tab are self explanatory.
An expression, that contains JavaScript, which will be executed
when the value on the form changes. Usually validation is done on
the server side, but there are cases - especially with
disconnected apps and so on - where the server is not in play, and
so validation needs to be done on the client side. This setting
allows you to add that JavaScript (typically as a call to a custom
JavaScript function).
On Click - Button
URL
The URL to go to when the button is pressed. (If you are going to
another procedure in the app then use the next setting instead.)
Procedure
The name of a procedure in the app to go to. This can be a
NetWebPage, Browse, Form, Year and so on, but not a NetWebSource.
Parameters
Parameters to pass to the URL or procedure. This is a &
separated list of the form
parameter=value¶meter=value
and so on.
Open as Popup
Open the procedure as a Popup. (URL's cannot be opened as a
popup.)
Title
The Title of the popup window.
Target Frame
If a URL, then the name of a Target Frame (if any) for the new
page.
URL Contains Email Address
Tick this on if the URL contains an email address rather than the
URL of a web page.
Include Action
Tick this on to include an Action in the call.
Action
Select the Action to include.
onClick [JavaScript]
JavaScript code will be executed in the browser when the button is
pressed.
On Click - Start Button
Procedure
The name of a Procedure to call. For example to start the
generation of a report, then the report procedure will be entered
here.
Parameters
The parameters to pass to the Procedure.
Progress Field
The Use Equate of a Progress bar on the form.
On Click - Map
Call Form (INSERT)
Select a NetWebForm procedure which will be called when the user
clicks on the map (not on an existing marker.) Make sure the From
Map Priming is set on that form so that the location of the click
is primed in the new record.
Insert into Data Name
If one of the data sources for the map should be refreshed after
an Insert, then add the name of that data source in here.
Reset Home Marker
If no Insert procedure is selected, then clicking on the map can
reset the position of the Home Marker. This won't update any
records, but can be used to update other fields on the form.
Copy Latitude To
Select a field here. This will recieve the new Latitude of the
click.
Copy Longitude To
Select a field here. This will recieve the new Longitude of the
click.
Copy Zoom To
If a field is selected here, then when the user changes the zoom
level on the map, this variable will be updated.
Data - Map
Multiple data sources can be displayed on the
map at the same time. Each data source contains the following
settings.
Data Type
Select the nature of the data in this set. You can select from
POINTS (one or more points on the map, represented by markers),
AREA (a collection of points that defines the boundary a specific
area), or ROUTE (a collection of points, with a line drawn from
each point to the next point in the sequence.)
Name
Each data source requires a unique name. This is used to identify
the source on the map. Users can turn data sets on and off at
runtime (based on the name.)
Source
Select from TABLE or QUEUE. If a QUEUE then the queue needs to be
declared locally, and populated before it is used. Mapping from a
queue is not common, and only useful if a small number of fixed
points are pre-determined.
Table Tab
Table
The table in the database to get the data from.
Unique Key
The unique key (usually the primary key) used ot identify the
records in the table. This should be the same as the key used by
any data form which will appear based on the user clicking on the
record.
Filter
Enter an expression which will be applied as the VIEW Filter.
Order
Enter an expression which will be applied as the VIEW Order. When
describing a Route or Area the order of the fields becomes
important.
Form
The name of the form to go to when the user clicks on a marker.
Note that if the marker has a form, then it can't also have a
popup description, and so the popup description is not used.
Open Form as Popup
Tick this on for the form to open as a popup.
Action
Set the action for the form to one of Change, View or Copy.
Draggable
Tick this on if the marker record can be updated simply by
dragging the marker on the map.
Queue Tab
From Queue
Select the Queue which contains the data to be added to the map.
Data Tab
Latitude
The field containing the Latitude.
Longitude
The field containing the Longitude.
Description
The popup description for the field, which is displayed if the
user clicks on the marker. If a Form is set, then this field is
ignored - the click takes the user to the form.
Allow xHTML in Description
Allow xHTML compliant code in the marker description.
Allow UNSAFE xHTML in Description
Tick this on to allow unsafe xHTML code in the description. Only
tick this on if you know what you are doing, and are aware of the
security risks.
Marker Tip
A tip which will be displayed when the user hovers over the
marker.
Marker Object Name
The look of the marker is defined by a pre-declared JavaScript
object. You can add your own objects if desired. Select from the
built-in list, or use custom to use a custom marker.
Custom Name
Enter the name of the custom marker here.
Marker Opacity (%)
Set the opacity of the marker. 100 is fully opaque (ie visible), 0
is completely transparent (invisible.)
Disable Clustering at Zoom
As the user zooms out, markers that are close together will be
clustered into a single cluster marker. This setting prevents
clustering once the user has zoomed into this level. Set this to 1
to disable clustering completely.
CSS
Various CSS settings which apply to the form
field.
Client Side
The Client-Side tab determines what will
happen to the field as the user interacts with it. Different field
types can have limited access to some of these options (for
example Hidden fields can't be clicked on) but the appropriate
settings for the field type will be offered.
When Field Selected in Browser [onFocus]
When the field is selected in the browser, then an
onFocus
event is triggered in JavaScript. If you want to embed
JavaScript code for this event then you can do it here. You can
also refresh the Prompt, Value and/or Comments components of the
field when it gets the focus. these options are not used much.
When Field Accepted in Browser [onChange]
After the user completes a field and
onChange
event is generated in the browser. This is similar to an
Event:Accepted in a Clarion program.
Send new value to server
Tick this on to explicitly send the new value to the server.
Several other options (such as having items in the reset list)
will implicitly send the value to the server, but if you wish to
embed hand-code on the server side then ticking this on is
recommended.
Server Code
This button takes you to an embed point where you can embed code
which will execute, on the server, when the field is completed. It
is recommended that you view the embed point "in context" so you
can see what is happening. For example there are embeds nearby for
code which may happen before the field is validated, or after the
field is validated.
The key item to remember at this point in the code is that any
other field you may change MUST be changed in the Session Value,
not just the field itself. For example;
inv:paid = 1
should be
p_web.SetSessionValue('inv:paid',1)
JavaScript Hand-code
You can enter JavaScript here, which will be executed in the
browser itself.
Reset
You can enter a list of other fields on the form here. Fields in
this list will be refreshed, from the server (specifically from
the session queue on the server) when this field completes. This
is especially useful for other fields which may be hidden, or
unhidden based on the contents of this field.
Security
See Security Tab
