Add Page Field Properties
Last updated
Last updated
Note: Anything edited on the Add Page Field Properties, reflects on the Edit Page Field Properties and vice versa.
Text: Defines a text entry field in a form.
Number: Defines a number entry field in a form.
Email: Defines an email entry field in a form.
Password: Displays an obfuscated password entry field.
Tel: Defines a telephone entry field in a form.
Range: Defines a range entry field in a form.
Date: Defines a date entry field in a form.
Time: Defines a time entry field in a form.
Datetime: Defines a datetime entry field in a form.
Url: Defines a URL entry field in a form.
Hidden: Makes an input entry field hidden in a form.
Set the default value for current field, if none is supplied by a user.
--datetime_now()-- : Defines current date and time as default value.
--time_now()-- : Defines current time as default value
--date_now()--: Defines current date now as default value.
--random_str()-- : Defines a randomly generated string as default value.
--random_num(10)-- : Defines a randomly generated number as default value.
--random_chr(12)-- : Defines a randomly generated character as default value.
--random_color()-- : Defines a randomly generated color as default value.
Set descriptive message about the current field.
If set to true, the field will be disable which only allows for viewing and not modifying.
When set to true indicates the field should be read only as the name applies and will not allow for modification.
Select an icon to be displayed next to the input field.
This categorizes inputs into groups or sections.
This is a text to be displayed next to the input field.
This the text to display inside the input field while data has not yet been provided.
When set to true will not allow the form to be submitted if that field is empty.
Set the maximum number of characters allowed for users to enter for the current field.
Set the minimum number of characters allowed for users to enter for the current field.
This defines the difference between points in a range bar. This is used with the TextboxType Range.
This defines how many decimal places to format a number.
This is used to match a particular type of data to a query
Checks if the same field value already exist in the database table before adding or updating.
Sets the width of the current field.
This allows user to set event listeners for elements. before you attempt this configuration, you need to have a basic knowledge of JavaScript and jQuery Events.
Events
Double click on any Event to get a code snippet of the event on the editor.
OnChange: This is used to handle data change on <select> element. Use this, when the Fields Properties is set to Select.
OnInput: This is used to handle input value change on <input> or <textarea>. Use this, when the Fields Properties is set to Textbox or Textarea.
OnClick: This is used to handle click event on elements such as <p>, <div>, <span>, etc. This can't be used on input elements.
OnDblClick: This is used to handle double click event on elements such as <p>, <div>, <span>, etc. This can't be used on input elements.
OnHover: This is used to handle mouse hover event on any element.
OnFocus: This is used to handle focus on any form field. This can be used with all Fields Properties, except None.
OnBlur: This is used to handle when a form field looses focus. This can be used with all Fields Properties, except None.
OnKeyPress: This is used to handle when a key on a keyboard is pressed. This can be used with any of the Fields Properties.
OnKeyUp: This is used to handle when a user releases a key (on the keyboard). This can be used with any of the Fields Properties.
The select field shows a drop down list for user to choose options from, and can be customized to suit user's need. The select field property can be customized as shown below.
Allows user to select where to pull data from; from a database, table etc
Quick List: Allows user select list of preferred data, and add more if necessary
Enter Value: Allows user to enter the values in a field and select preferred label
Data Table: Enables user to select table, its value and label
Custom SQL: Allows user to enter their custom query
Query Builder
Designer: Allows user to select tables, fields, sort, sort order, group, aggregate, operand, comparator and value that will be used to build queries
Code: This is where you view generated queries
Result: Allows user to observe query results and apply changes in the designer section if needed
The Datasource look up is just a shortcut for OptionListDataSource -> Data Table. Instead of going through the process of opening the window and then clicking on Data Table and configuring it, configuration can be done using the Datasource Look Up.
This is the database table that contains the data you want to use for your lookup/select field.
This is the database table column that holds the data you want to store when an end-user makes a selection.
This is the database table that holds the data you want to display to end-users when they make a selection.
This is the database table column you want to order the data by.
This is how you want to order the data that will be queried, either in ascending(ACS) or descending(DESC) order. This works hand in hand with the LookUpOrderBy column selected.
This is the Add Page Field that depends on this select fields to populate itself with data.
Here you select the database table column that contains the data that will be matched with the field selected in LookUpDependentField.
If set to True, make the select field display data that matches end-user input, which also makes the select field searchable. If set to False, it disables this feature.
Allows user to set descriptive message about the current field.
This categorizes inputs into groups or sections.
Select an icon to be displayed next to the input field.
Set the default value for current field, if none is supplied by the user.
If set to true, the field will be disable which only allows for viewing and not modifying.
This is a text to be displayed next to the input field.
This the text to display inside the input field while data has not yet been provided.
Set to true if u want to allow for multiple select
Specify the max number of items to select from the list. Use -1 for infinity.
Allows user to set parameters for making custom search
When set to true will not allow the form to be submitted if that field is empty.
Checks if the same field value already exist in the database table before adding or updating.
Sets the width of the current field.
The radio button is a graphical control element that allows the user to choose only one of a predefined set of mutually exclusive options. The select field property can be customized as shown below.
Allows user to select where to pull data from; from a database, table etc
Quick List: Allows user select list of preferred data, and add more if necessary
Enter Value: Allows user to enter the values in a field and select preferred label
Data Table: Enables user to select table, its value and label
Custom SQL: Allows user to enter their custom query
Query Builder
Designer: Allows user to select tables, fields, sort, sort order, group, aggregate, operand, comparator and value that will be used to build queries
Code: This is where you view generated queries
Result: Allows user to observe query results and apply changes in the designer section if needed
This enables users to set how the radio button should appear, as a Button Group or Normal
Allows user to set descriptive message about the current field.
This categorizes the Radio button into groups or sections.
If set to true, the field will be disable which only allows for viewing and not modifying.
This is a text to be displayed next to the Radio button, more like a label.
Set the default checked value for current field, if none is supplied by the user.
When set to true will not allow the form to be submitted if that field is empty.
Sets the width of the current field.
A checkbox is an Input form field that permits the user to make a binary choice, i.e. a choice between one of two possible mutually exclusive options.
Allows user to select where to pull data from; from a database, table etc
Quick List: Allows user select list of preferred data, and add more if necessary
Enter Value: Allows user to enter the values in a field and select preferred label
Data Table: Enables user to select table, its value and label
Custom SQL: Allows user to enter their custom query
Query Builder
Designer: Allows user to select tables, fields, sort, sort order, group, aggregate, operand, comparator and value that will be used to build queries
Code: This is where you view generated queries
Result: Allows user to observe query results and apply changes in the designer section if needed
This enables users to set how the Checkbox should appear, as a Button Group, Single Switch or Normal.
Button Group: This configures the checkboxes as a single group.
Single Switch: This configures the checkbox as a single switch, True or False.
Normal: This sets the checkboxes to default.
Set descriptive message about the current field.
This categorizes the Checkboxes into groups or sections.
This is a text to be displayed next to the Checkbox, more like a label.
This is the value of the checkbox field. If OptionListDataSource is not provided, this would be the value of the checkbox.
This is the label of the checkbox field. If OptionListDataSource is not provided, this would be the label of the checkbox.
Allows user to set checkbox default state to be checked.
If set to true, the field will be disable which only allows for viewing and not modifying.
When set to true will not allow the form to be submitted if that field is empty.
Specify the max number of items to select from the list. Use -1 for infinity.
Sets the width of the current field.
A textarea is an HTML element (tag) used to create a multi-line plain-text editing field.
Set the default value for current field, if none is supplied by the user.
Select an icon to be displayed next to the input field.
This categorizes the Textarea into groups or sections.
Set descriptive message about the current field.
When set to true indicates the field should be read only as the name applies and will not allow for modification.
If set to true, the field will be disable which only allows for viewing and not modifying.
When set to True, it adds a HTML editor to the Textarea.
This is a text to be displayed next to the Textarea.
This the text to display inside the input field while data has not yet been provided.
When set to true will not allow the form to be submitted if that field is empty.
Set the minimum number of characters allowed for users to enter into the current field.
Set the maximum number of characters allowed for users to enter into the current field.
This is used to match a particular type of data to a query.
This checks if the data entered into the textarea already exist in the database.
Sets the width of the current field.
Allow user to set the number of column the current field takes.
This define an input element for file uploads.
This is a text to be displayed next to the File input field.
If set to true, the field will be disable which only allows for viewing and not modifying.
Set descriptive message about the current field.
This categorizes the File Input field into groups or sections.
If set to True allows for multiple file uploads and if set to False allows for single file upload.
If set to True makes it possible for users to Drag And Drop files on the file input field and if set to False disables this feature.
This is the message that appears on the file input field e.g "Drop files here to upload" .
This is where you add your custom class for the file input, if you created one.
This is the directory where the file will be uploaded to.
This is the format the file name will be generated or stored as. If RandomString is selected, a random string will be generated and stored as the file name; If TimeStamp is selected, the current time will be stored as the file name; If Date is selected, the current date will be stored as the file name; If DirectoryFileSequence is selected, the files will be stored with a Sequential directory name; If OriginalFilename is selected, the original file name will be used.
If sets to True, returns the full path to the uploaded file.
This is the name you want to be constant in all files uploaded through the current file input field. it is always added to the front of the FileNameFormat string, example would look like [FileNamePrefix] + [FileNameFormat]
These are the types of files you want to restrict users to upload. You can select the * if you want users to upload any kind of file.
NOTE: The * is dangerous, only use it if you know what you are doing. Defining each file extension you want to accept on the current file input field is the best way.
If you set Multiple to True, this is where you set the maximum number of files that can be uploaded.
Use this field to limit the maximum file size in Megabytes.
When set to true will not allow the form to be submitted if that field is empty.
When selected, it does not add the current field to the form.
