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.
Include in Mobile
If this is off then this tab is excluded when the user is using the app in Mobile mode.
Tabs which are excluded are missing from the form itself, and
therefore cannot be hidden or unhidden dynamically.
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 In
Determines if the field is included in the mobile version of the form or the desktop version, or both.
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.
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.
Mobile Text
The text (if any) that will appear on the button in mobile 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.
Button Compact in Mobile
If this is off then the button will expand to the full width of the screen in mobile mode.
JavaScript Desktop 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.
JavaScript Mobile Icon
The jQuery-Mobile Icon to use on the button when the button is in mobile mode.
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.
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.
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.
Email
The Email 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, for example including the @ symbol on the keyboard, and removing the space bar.
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.
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.
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.
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.
Image
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.)
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.
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'
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 possiblities.
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.
Range
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.
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.
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
The 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.
URL
The URL 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, for example removing the space bar.
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". The exception is Chrome
connecting over an SSL connection. In this case the user can
allow the permission to persist.
Video
Tick this on to activate the users Video camera (webcam) on the form.
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.
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
