• Button List Properties
• Button List Styling
• Chart Properties
• CheckBox Properties
• Control Type
• Data Binding
• Date - Time Picker Properties
• DropDownBox Properties
• Field Label
• Field Properties
• Ink Properties
• Label Properties
• List Properties
• Lookup
• Map Control Javascript
• Map Properties
• RadioButton Properties
• Repeating Section Properties
• Signature Capture Properties
• Slider Properties
• Spin List Properties
• Switch Properties
• TextArea Properties
• Textbox Properties
• Tree CSS
• Tree Javascript
• Tree Properties
• ViewBox Properties

TextArea Properties

Description

A complete reference of all properties available for the TextArea control in the UX Component. Text area controls display data in a text area. Use this when you have long data to display. The text area can optionally be configured as an HTML editor.

Field Properties

Variable name

The name of the variable for this control.

Type

Specify the data type (e.g. Character, Numeric, Date, Time, Short-time, Logical, Guid).

Default value

Specify the default value for the control. The default value can be:

• a value

  (for example: ALPHA)

• an expression

  (start expression with = sign) (for example =date() - today's date)

• a session variable

  (e.g. session.name, or =session.name (recommended to use the = prefix))

• a page variable

  (e.g. pageVariable.name, or =pageVariable.name (recommended to use the = prefix))

• an argument

  (e.g =:arg1)

TIPS:

• Multi-valued controls

  If the control is multi-valued (e.g. checkbox, List configured as multi-select, etc.) you can use the special array() syntax. For example: array(red,green). Alternatively, enter an expression that has a CR-LF delimited list. For example: ="red" + crlf() + "green".

• Numeric fields

  For numeric fields, numbers must be entered with a period for the decimal separator, regardless of the regional settings on the machine where the server is running.

Validation Xbasic

Specify Xbasic code to test if the data in this field is valid. By default, only dirty fields are validated. You can specify that all fields should be validated in Update Settings, Editing Properties. NOTE: If this field is in a Repeating Section, then see setting in the Repeating Section for Validation - field option and Validation - row option.

Validation rules

Specify rules to test if the data in this field is valid. By default, only dirty fields are validated. You can specify that all fields should be validated in Update Settings, Editing Properties.

Immediate validation

Specify if the value in the field should be validated as soon as you tab out of the field, or in the case of radio button, dropdown or checkbox controls, as soon as you change a value. The 'server-side' option will generate an Ajax callback, so you should try to limit the number of fields that require real-time server-side validation.

Validation Javascript

Specify Javascript to validate the data in the field. Client-side validation is very fast because it does not involve making an Ajax callback to the server. Your Javascript code can use the data variable name to refer to the current value in the control. Your code should include a return statement that returns true, or a string with an error message. For example: return true; (no error), or return 'Value is not valid'; (if there is an error).

Class

Specify the class name for the control. Specify <Default> to use the default class name for the style selected. You can specify a class name to use in addition to the default style by prefixing the class name with + (for example: +myCustomClassName). If the class name you specify does not have a leading + character, the specified class name is used in place of the default class name.

Style

Specify the in-line style for the control.

Width

Specify the control's width. Use CSS units (e.g. 1in, 200px, etc). If you specify a width here and also in the 'style' property, this value will be used. Leave blank to use the default width. Percentage widths not supported for controls in Repeating Sections.

TIP: If the control has a custom class that also specifies a width, set the width property here to <none>.

Height

Specify the control's height. Use CSS units (e.g. .25in, 200px, etc). If you specify a height here and also in the 'style' property, this value will be used. Leave blank to use the default height.

Break

Force a column break before, after, or both before and after this control.

Hide

Specify if this control should be hidden. Controls are typically hidden so that they can be manually placed into the Dialog HTML in a 'Free-form Container'.

Has help

Specify if there is help for this field. The help will appear in a window when the user presses F1. The Help text is read from a database. Go to the Properties pane to configure the Help database source. The Help Window style can either be a pop-up window or a dropdown window.

Initial focus

Specify if this control should have focus when the Dialog is first shown. If you check this property on more than one control, the first control checked will get focus.

Control container class name

(Advanced/Optional) All controls are automatically wrapped in a div (with a class name of 'A5CWLayout' or 'A5container' ) (unless the control is in a 'NoFloat' or 'Alignment' container). You can specify a class name to use for the control container in addition to the 'A5CWLayout' or 'A5container' class that is automatically used. This allows you to have more control over the appearance of the control.

Control container style

Style on the container that surrounds the control.

Control container prevent float

(Advanced/Optional) All controls are automatically wrapped in a div. This container automatically 'floats' the control (so that your controls lay out automatically from left to right until a control with a 'break after' is encountered). In addition, the class adds padding around the control. By checking this property, you are specifying that the div container that encloses this control will not have the 'A5CWLayout' or 'A5container' class applied.

TextArea Properties

Sub-theme

Specify the sub-theme for the control. If you leave blank the default ('base') sub-theme is used.

Allows you to implement sub-themes for a textarea control. See the Local sub-theme definitions - CSS in the 'UX Properties' section of the UX Properties page.

Control Javascript

Specify any Javascript code that should be emitted for this control. You can use the special {Dialog.ControlId} and {Dialog.ControlIdEscaped} placeholders to reference the control's Id.

This is an advanced feature typically used by developers who are using a 3rd party Javascript library, such as jQuery, to style a control using Javascript.

HTML editor

Specify if the control has an HTML editor. The html editor allows you to set fonts and colors for your text and to use other HTML features such as tables, ordered and un-ordered lists, etc.

Use QUILL HTML Editor?

Specify if you want to use the QUILL HTML editor instead of the default HTML editor.

*(Visibility: Visible only if 'HTML editor' is checked)*

See [Quill HTML Editor Integration] below for details.

QUILL HTML Editor settings

JSON configuration settings for the Quill editor.

*(Visibility: Visible only if 'Use QUILL HTML Editor?' is checked)*

HTML editor width

Specify the editor width. Use CSS style syntax. For example: '6in', '100px' etc.

*(Visibility: Visible only if 'HTML editor' is checked)*

HTML editor height

Specify the editor height. Use CSS style syntax. For example: '6in', '100px' etc.

*(Visibility: Visible only if 'HTML editor' is checked)*

HTML editor is popup

Specify if the HTML editor is always 'live', or if the user must click in it, or on the 'Click to edit' hyperlink before it enables editing.

*(Visibility: Visible only if 'HTML editor' is checked and Quill is DISABLED)*

Popup editor width

Specify the width for the popup editor. If width is blank uses same size as the initial display. Use CSS style syntax. For example: '6in', '100px' etc.

*(Visibility: Visible only if 'HTML editor' is checked and Quill is DISABLED)*

Popup editor height

Specify the height for the popup editor. If height is blank uses same size as the initial display. Use CSS style syntax. For example: '6in', '100px' etc.

*(Visibility: Visible only if 'HTML editor' is checked and Quill is DISABLED)*

Submit data when closing popup editor

Specify if the data in the Dialog should be submitted when the popup editor is closed. Normally the Dialog data is not submitted when the popup editor is closed.

*(Visibility: Visible only if 'HTML editor is popup' is checked)*

HTML editor style

Specify the in-line style for the HTML editor content.

*(Visibility: Visible only if 'HTML editor' is checked and Quill is DISABLED)*

HTML editor linked CSS

Specify a single CSS file to be used in the editor. The HTML content normally only uses in-line styles to set fonts and colors and other styles. A CSS file can be specified to add additional styles, such a styles for specific tags such as header styles.

*(Visibility: Visible only if 'HTML editor' is checked and Quill is DISABLED)*

HTML editor toolbar icons

Customize the icons used in the HTML editor toolbar.

*(Visibility: Visible only if 'HTML editor' is checked and Quill is DISABLED)*

HTML editor toolbar customization

You can customize the toolbar for the HTML editor. You can select which controls appear on the toolbar, and the order in which they appear.

*(Visibility: Visible only if 'HTML editor' is checked)*

QUILL editor fonts

Customize the list of fonts that are available in the QUILL editor. See [Customizing Available Fonts (Quill)] below.

*(Visibility: Visible only if 'Use QUILL HTML Editor?' is checked)*

Has 'Click to edit' button

If the HTML editor is a popup editor, by default, clicking on the control causes the editor to pop up. However, if you have enabled 'File upload' then you will want to be able to download linked files by clicking on them. If you check this property, an 'Edit' hyperlink will be shown. Clicking on the HTML editor will not cause it to pop-up, but instead will allow you to download linked files. You will need to click on the Edit hyperlink to edit the HTML.

*(Visibility: Visible only if 'HTML editor' is checked and Quill is DISABLED)*

Edit hyperlink text

Specify the text for the edit hyperlink. When you click this hyperlink the HTML editor pops up so that you can edit the text in the field.

*(Visibility: Visible only if 'Has Click to edit button' is checked)*

Allow image upload

Specify if the user can upload images to the server when editing this field. The uploaded images are inserted into the body of the memo.

*(Visibility: Visible only if 'HTML editor' is checked and Quill is DISABLED)*

Upload folder

Specify the folder where the uploaded images are stored. You can also enter a named storage connection string.

*(Visibility: Visible if Image Upload is allowed)*

Image upload dialog customization

Specify how the Image Upload dialog should be customized.

*(Visibility: Visible if Image Upload is allowed)*

Allow file upload

Specify if the user can upload files to the server when editing this field. The uploaded files are inserted into the body of the memo as hyperlinks.

*(Visibility: Visible only if 'HTML editor' is checked and Quill is DISABLED)*

Upload folder

Specify the folder where the uploaded files are stored. You can also enter a named storage connection string.

*(Visibility: Visible only if 'Allow file upload' is checked)*

File upload dialog customization

Specify how the File Upload dialog should be customized.

*(Visibility: Visible only if 'Allow file upload' is checked)*

Bubble help

Specify the bubble help for this field.

*(Visibility: Visible if 'HTML editor' is NOT checked)*

Rows

Specify the control height.

NOTE: It is recommended that you set the height using the Height property in the Field Properties section.

*(Visibility: Visible if 'HTML editor' is NOT checked)*

Columns

Specify the control width.

NOTE: It is recommended that you set the width using the Width property in the Field Properties section.

*(Visibility: Visible if 'HTML editor' is NOT checked)*

Allow resize

In certain browsers, you can resize the textarea control by dragging on the bottom right corner. You can un-check this box to disallow this behavior.

*(Visibility: Visible if 'HTML editor' is NOT checked)*

Watermark

*(IMPORTANT: Do not use the placeholder attribute if the field's position property is set to Float above )*.

Specify if the field has a watermark. The watermark text appears in the textbox when there is no value in the textbox.

NOTE: You can also use the built-in HTML5 watermark feature (by specifying the 'placeholder' custom attribute - See the 'Custom attributes' property below). The built-in HTM5 watermark is preferred over the Alpha Anywhere watermark feature.

See [Watermark Examples] below for details.

*(Visibility: Visible if 'HTML editor' is NOT checked)*

Watermark text

Specify the watermark text. Set to <FieldLabel> to use the field label as the watermark text.

*(Visibility: Visible only if 'Watermark' is checked)*

Watermark class name

Optional. Specify the class name for the watermark text. Leave blank to use default class. This class is applied on top of any existing classes.

*(Visibility: Visible only if 'Watermark' is checked)*

Watermark style

Optional. Specify the style for the watermark text.

*(Visibility: Visible only if 'Watermark' is checked)*

Readonly

Specify if the control is read-only. NOTE: Alternatively, if you want the control to be readonly only if a certain condition is true, see the 'Client-Side Properties', 'Readonly expression'.

*(Visibility: Visible if 'HTML editor' is NOT checked)*

Disabled

Specify if the control is disabled. NOTE: Alternatively, if you want the control to be disabled only if a certain condition is true, see the 'Client-Side Properties', 'Enable expression'. IMPORTANT: If this control is used in a List control's 'Detail View' you MUST use client-side properties to disable the control.

*(Visibility: Visible if 'HTML editor' is NOT checked)*

Custom attributes

*(IMPORTANT: Do not use the placeholder attribute if the field's position property is set to Float above )*.

Specify any custom attributes that you want to inject into the HTML markup for this control. A popular attribute is the 'Placeholder' attribute. This allows you to use an HTML5 native watermark for the field. It is recommended that you use this in place of the Alpha Anywhere 'Watermark' feature. For more information on using CSS to style a placeholder see: http://frontendbabel.info/articles/styling-placeholder-using-css/

*(Visibility: Visible if 'HTML editor' is NOT checked)*

See Textbox Custom attributes for more detailed information.

Quill HTML Editor Integration

When you configure a textarea control as an HTML editor, you now have the option of using the 3rd party, open source, QUILL editor. Quill is a modern, powerful rich text editor built for compatibility and extensibility. For more information, visit https://quilljs.com/.

Enabling the Quill Editor

The image below shows how the QUILL editor is rendered in a UX component.

Quill Editor in a UX Component

You can customize the QUILL editor toolbar by defining the HTML editor toolbar customization property. If you do not customize the toolbar, a default toolbar is shown.

Customizing Available Fonts (Quill)

You can now customize the fonts that are available in the QUILL HTML editor. By default three fonts are available, Serif, Sans Serif and Monospace.

1. To customize the available fonts click the smart field for the HTML editor fonts property.

   

   HTML Editor Fonts Property

2. This will open a fonts selection dialog.

   

   Font Selection Dialog

3. Select the fonts you want to make available in the QUILL HTML editor.

4. When you open the font selection dropdown, the list of selected fonts is shown.

   

   Quill Font Dropdown

Customizing Available Fonts in the Quill HTML Editor

In this video we show how to customize the fonts in the QUILL HTML editor.

• Watch Video

Watermark Examples

A watermark is text that appears in the textarea control before any text is actually entered into the control.

A watermark

Setting the Watermark text

The result

High Order Characters (e.g. Hebrew)

Specifying watermark text for a textbox or textarea control using high order characters (for example, Hebrew characters) is possible, but requires the text for the Watermark to be entered as a unicode encoded string, with the {unicode} prefix.

For example, to set the watermark to the characters shown in the screenshot below, enter the following into the Watermark text property:

{unicode}05D0{unicode}05D1{unicode}05D2

In the screenshot shown below, the watermark is in Hebrew and it is on the right side of the control.

A watermark in Hebrew

To get the text flow direction to 'right-to-left' (so that the watermark is on the right side of the control), the following Javascript was added to the client-side onRenderComplete event:

document.body.style.direction = 'rtl';

Client Side Properties

Client side formatting

Specify if the textbox has client side formatting, such as a mask, or custom display format.

Format type

Specify the format type (e.g., Mask, Number, etc.). (Visibility: Visible only if 'Client side formatting' is checked)

Calculated field expression

Define a calculated field expression. The calculation is done in the Browser (i.e. on the 'client side') using Javascript.

Show/hide expression

Specify the show/hide expression. The show/hide expression can refer to session variables, or arguments (defined on the Properties pane). The control is shown if the expression is true. If the expression is false, or invalid (perhaps because a referenced session variable has not yet been defined), the control is not shown.

Example expressions: session.var1="alpha", :argument1 = 2

*(Important: Cannot be used on controls set to 'Fill container'. Instead, put the show/hide expression on the container.)*

Enable expression

If the expression evaluates to true, the control will be enabled. The calculation is done in the Browser (i.e. on the 'client side') using Javascript.

Readonly expression

If the expression is true, the control will be readonly. IMPORTANT: If the control has a 'picker' (e.g. date/time picker, edit combo, Grid lookup, etc.), the control that opens the picker is NOT disabled and the user will still be able to open the picker and make a selection from the picker to change the value in the control. Setting the control to readonly merely prevents the user from typing a value directly into the control. If you want to disable the picker, set the 'Enable' property instead.

Conditional style, class, text and events

Specify if the style, class and text for this control is conditional. For example, you might want to display a control with a red background if a value in a field is outside a certain range. Note: The calculation is performed in the Browser using Javascript.

On Get Value Javascript

Specify the Javascript to call to transform the value returned by the .getValue() method.

On Set Value Javascript

Specify the Javascript to call to transform the value that will be used to set the value of the control.

Lookup

Lookup

Lookup data in another Grid, Table, or static data source. (Visibility: Hidden if Quill Editor is enabled)

Lookup type

• Grid Component

  Shows a 'Lookup' link next to the field. Users can click this link to open another window which displays a Grid component from which they can select the value for this field.

• Auto-Suggest List

  As users start typing, a list of suggestions is shown.

• Edit-Combo List

  Users can either type in a value, or click a button to show a drop-down list with choices.

• Cascading List

  A menu of choices is displayed. When the user hovers over an item that has a sub-menu, the sub-menu of choices is shown, and so on until the list has no more children. Then, the user can select an item to fill into the lookup control.

• List control

  When the lookup window is opened, a List control is shown. Users can select a row in the list to fill in the lookup field.

• Custom

  When the dropdown is opened a user-defined Window container is shown. You can include any controls that you want in the Window container. The Window container will have a commit button that updates the value in the parent control.

*(Visibility: Visible only if 'Lookup' is checked)*

Lookup definition

Click the smart field button to define the lookup properties. (Visibility: Visible only if 'Lookup' is checked)