AX2149

Text Box component for Axiom forms

The Text Box component displays text on the Axiom form and allows users to edit that text. This text can be used to impact the data in the form in some way, or it can be saved to the database.

Text boxes are always displayed in a bordered box, to signal to the user that the text is an editable field. Text boxes can be used for regular free-form text input, or they can use special features such as:

  • Single-line or multi-line input
  • Rich text input (font formatting, lists, alignment)
  • Numeric-only input within an optional range
  • Masked input text to restrict the input to valid characters and to define an input format (such as for a phone number)

Generally speaking, text boxes should only be used when text needs to be edited. Although it is possible to configure a text box as read-only, this option is intended to support dynamically enabling or disabling a text box for editing based on some criteria. Text boxes are not intended for display text that never needs to be edited—for that, you should use a Label component.

Component properties

You can define the following properties for a Text Box component.

Component properties can be configured using the Form Assistant task pane or the Form Designer unless otherwise noted. All properties can also be defined on the Form Control Sheet directly if desired. For example, if you want a property to be dynamic depending on the result of a formula, you can define that formula in the control sheet. To access the control sheet settings for the component, double-click any property name to go to that property in the Form Control Sheet.

Component behavior properties

The following properties control the display and behavior of this particular component type.

Item Description

Text

The text for the text box. This setting serves two purposes:

  • It defines the initial text for the text box, when the user first opens the form. You should only define text here if you want that text to be the default value for the text box. If you want to display instructional text within the text box, such as "Enter name here", then you should use the Placeholder field instead.

  • When a user views the form and edits the text in the text box, this changed text will be submitted back to the source file and placed in this cell on the Form Control Sheet. Formulas can reference this cell in order to dynamically change the form based on the current state of the check box.

NOTES:  

  • This setting supports indirect cell references. You can enter a cell reference in brackets, such as [Info!B3]. This causes the text to be read from and written to the specified cell reference instead of directly within the Text cell.

  • This setting supports use of the FormState tag and the SharedVariables tag, so that the text is stored in memory instead of written to the file, and therefore can be shared with other files. Form state can be used to share values between a form dialog and an active client spreadsheet, in the Desktop Client. Shared variables can be used to share values between multiple forms that are open in a shared form instance (embedded forms).

Placeholder

The placeholder text for the text box. This text is displayed when no Text value is defined for the text box. It is typically used to define instructional text for the text box, such as "Enter name here".

As soon as a Text value is defined for the text box, the placeholder text is no longer displayed and instead the Text value is displayed.

Keep in mind that placeholder text is not the same as defining a default value for Text. Placeholder text only displays when the value of Text is blank. This also applies when using indirect cell references for Text (if the target cell is blank), or when using a form state / shared variable tag for Text (if no value has been set for the form state key or shared variable). If instead you want Text to have a default value, then you should define that value as the Text value instead of using placeholder text.

NOTE: The appearance of placeholder text depends on the skin assigned to the form, and on the browser used to view the form. In most environments the placeholder text displays in a lighter color than the Text value, but not always.

Tooltip

Optional. The tooltip text for the component. When a user hovers the cursor over the component, the text displays in a tooltip.

NOTE: For numeric text boxes, the custom tooltip displays unless validation detects that the current entry is out of bounds in regard to the defined Min or Max. In that case, the validation tooltip displays.

Read-Only

Specifies whether the text box is read-only.

  • If disabled (default), then the text box is editable, and Axiom form users can change the text in the text box.

  • If enabled, then the text box is not editable and the text displays as read-only.

This is intended for situations where you want to dynamically change the text box from read/write to read-only depending on a certain criteria. If you want text that will always be static, use a Label component instead.

Type

Specify a type for the text box:

  • Text (default): The text box accepts free-form text inputs. When using this type, you can also optionally enable multi-line input or enable rich text input.

  • Input Mask: The text box uses a defined input mask format to restrict the user input to certain character types and formats. Selecting this type exposes additional options that only apply when using the Input Mask type. For more information, see Using an input mask with text boxes.

  • Numeric: The text box only accepts numeric characters within an optional range. Users cannot input letters or other special characters. Selecting this type exposes additional options that only apply when using the Numeric type. For more information, see Using numeric text boxes.

Rich Text

Specifies whether the text box supports rich text. Only applies if Type is set to Text.

By default, this is disabled. This means that the text box is a regular text box, and any text entered into the text box is plain text. For more information on enabling this option and using rich text, see Using rich text boxes.

Multi-Line

Specifies whether the text box allows multiple lines. Only applies if Type is set to Text, and if the Rich Text option is not enabled.

  • If disabled (default), only one line is allowed in the text box. The text does not wrap, and the Enter key cannot be used to create new lines. Instead, the Enter key exits the component and triggers an auto-submit (if Auto Submit is enabled).

  • If enabled, then the text box allows multiple lines. The text will wrap if it exceeds the width of the component, and the Enter key can be used to create new lines. To exit the component and trigger an auto-submit, you must use the Tab key or click outside of the component.

Auto Submit

Specifies whether the Axiom form automatically updates when a user changes the state of the component.

  • If disabled (default), then a form update is not triggered when the user edits the text box. This means that you must use a separate Button component (or a different component configured to auto-submit) if you want users to be able to update the form after entering text into the text box.

  • If enabled, then the Axiom form automatically updates when the user inputs text into the box and then exits the component—such as by clicking the Enter key, the Tab key, or by clicking outside of the component.

Save On Submit

Specifies whether a save-to-database occurs when a form update is triggered by this component.

  • If disabled (default), then changing this component does not trigger a save-to-database.

  • If enabled, then a save-to-database will occur as part of the form update process when this component triggers an update. The save occurs after editable values have been submitted to the source file and after data has been refreshed in the source file. A save-to-database process must be enabled and configured within the source file. For more information, see Saving data from an Axiom form.

This setting only applies if Auto Submit is enabled for the component. If you are not using the auto-submit behavior but you do want to save data to the database from the Axiom form, then you should instead enable Save on Submit for the Button component that you are using to trigger the update process.

Enabled

Specifies whether the component is enabled. By default this is set to On, which means that the component displays normally and users can interact with it (if applicable).

This setting can be used to dynamically enable or disable the component using a formula. If set to Off, then the component displays as grayed out. If the component is normally interactive, users cannot interact with the component while it is disabled. Disabled components cannot trigger update events for the form.

NOTE: This setting is only available on the Form Control Sheet; it cannot be set in the Form Assistant or in the Form Designer.

General properties

The following general properties are available for all components:

Item Description

Component Name

The name of the component. This is for identification in the file; this name does not display on the Axiom form canvas.

The name of the component identifies the corresponding settings for the component on the Form Control Sheet. The component names are also useful if you have multiple types of the same component within an Axiom form, so that you can tell which component you are currently editing.

Component names must be unique within a file and must start with a letter. Names can only contain letters, numbers, and underscores. Names are validated when the file is saved; an invalid name will prevent the save.

NOTE: Spaces are not allowed in component names and will be automatically removed by Axiom Software. For example, if you enter "My Component" as the component name, it will be automatically adjusted to "MyComponent".

Visible

Specifies whether the component is visible on the Axiom form (On/Off). By default this is set to On.

This setting can be used to dynamically show or hide the component using a formula. Keep in mind that if you have multiple components that you need to dynamically show or hide based on the same condition, then it is preferable to place those components on a dedicated layer and then show or hide the entire layer instead of the individual components.

NOTE: This setting is only available on the Form Control Sheet; it cannot be set in the Form Assistant or in the Form Designer.

Layer

The layer that the component belongs to on the Axiom form canvas. In the Form Assistant and the Form Designer, this displays as the layer name (for example: Layer 1). In the Form Control Sheet, this is recorded as the layer ID (for example: 1).

If the canvas only has one layer, then the component is automatically assigned to that layer and cannot be changed. If the canvas has multiple layers, you can assign the component to any layer using the drop-down list. By default, the component will be assigned to whichever layer is selected in the Layers box when you initially drag the component onto the canvas. For more information on layers, see Using multiple layers on the canvas.

If desired, you can jump to the applicable layer settings on the Form Control Sheet by clicking the binoculars icon next to the drop-down list.

Parent

The parent component that this component is assigned to. If blank, then the component does not have an assigned parent. Currently, only Panel components can be designated as parents.

If a component has an assigned parent, then that component is positioned within the parent instead of within the canvas at large. If the parent is hidden, all "child" components of that parent are also hidden.

The parent assignment is automatically completed when a component is dragged into a panel in the Form Designer, and automatically cleared when a component is dragged out of a panel. In most cases, you should not need to manually assign a parent.

For more information, see Using panels to group and position components.

Style and formatting properties

To define the component formatting, you can assign one or more styles to the component. Styles can impact formatting properties such as fonts, borders, and colors.

If you do not want to apply a style to this component, or if you want to override one or more formatting properties in an assigned style, click the Show Advanced Settings link underneath the Style box to display the individual formatting properties. For more information on defining individual formatting properties for a component, see Formatting overrides for Axiom form components.

NOTE: Styles designed for use with text boxes, such as the required style, will not affect the rich text box.

Item Description

Style

Optional. The styles used to determine the formatting of the component. You can assign one or more styles.

Click the Select component styles button [...] to open the Choose Style dialog. Using this dialog, you can select one or more styles to apply to the component. The available styles depend on the component type and the skin assigned to the form. For more information, see Using component styles.

Some components have several styles that are specifically designed for that component type, while other components may only have the "generic" styles that are available to all components. When using a generic style, keep in mind that they may not be useful for all components. You can view a description of each style and view the effective formatting applied by the selected styles within the Choose Style dialog.

Component Theme

(Deprecated.) The theme to use for the component instead of the form-level theme. If left blank, the component uses the form-level theme.

This setting should be left blank unless you need to override the form theme. Generally speaking, themes should be set at the form level and only overridden at the component level when necessary.

This setting is available in the advanced component properties (click Show Advanced Settings under the Style box). On the Form Control Sheet, the setting displays using the name Theme Override.

NOTE: This setting only applies if your form uses a legacy skin (any skin except the default Axiom2018). The Axiom2018 skin does not use themes.

Position and size properties

You can view the position and size properties for a component by clicking the Show Advanced Settings link under the Style box. If necessary, you can edit these properties directly (instead of automatically modifying them by adjusting the component's position and size on the canvas). For more information on using these settings, see Controlling component position and size.

Item Description

Reference Location

The reference location determines how the x-position and y-position of a component are evaluated. By default the reference location is UpperLeft.

NOTE: This setting is not exposed in the advanced component settings. It can be changed on the canvas by double-clicking the corner selection handles of a component, or you can edit the setting on the Form Control Sheet directly.

X Position

Y Position

The x-position determines the component's position along the horizontal axis, and the y-position determines the component's position along the vertical axis. Both are evaluated relative to the reference location. Positions can be set in pixels (default) or percentages.

Width

Height

The width and height determine the size of the component. The width and height can be set in pixels (default) or percentages. Size keywords are also available to support special behavior.

Rendering Order

The order in which the component is rendered in the layer. A component with a larger order number will display above a component with a smaller order number.

For components that support tab navigation (tabbing to the next editable component), the rendering order also determines the tabbing order.

NOTE: On the Form Control Sheet, this setting is labeled as Z-Index.

Lock Layout

If enabled, the component size and position are locked and cannot be changed by dragging and dropping on the canvas. This optional setting is intended to protect against accidentally moving or resizing a component while working on the canvas.

Interactive behavior

The Text Box component allows the user to type text into the box. This text is submitted back to the source file, and written to the Text field on the Form Control Sheet.

This text can be used to impact the form in some way (for example, so that the user can enter a free-form filter), or it can be saved to the database.

If you want the Axiom form to respond to the submitted text, then you must set up the file so that another component references the text and changes based on it. For more information on setting up interactive components for an Axiom form, see Using interactive components in an Axiom form.

If you want the submitted text to be saved to the database, then you must set up the file to enable save-to-database. For more information, see Saving data from an Axiom form.

Example

An Axiom form could contain a Text Box component to allow a user to enter their name as part of a larger input form. When all inputs are complete, they will be saved to the database. This is typically accomplished via a separate Button component that can trigger the save-to-database once all inputs are complete.

If the text input is required, then you should enable auto-submit for the text box so that the button can be dynamically enabled once all required inputs are complete. If the input is not required, then you might leave auto-submit disabled unless another component is dependent on the input. It would be rare to enable both auto-submit and save-on-submit for the text box, unless the text input is the only thing to be saved to the database and you want it to be saved immediately.

Design alternatives

Axiom forms often support several different ways of performing the same task, to provide a broad range of display options and user interface behavior. Depending on your form design, you may want to consider the following alternatives:

  • Formatted Grids support two ways to allow users to edit text in a grid—simple unlocked cells and the TextArea content tag. The TextArea content tag supports special features similar to the Text Box component, such as placeholder text and multi-line inputs. For more information, see Using text boxes in Formatted Grids.

  • The refresh variables String, Integer, and Decimal can be used to present text boxes in the Web Client filter panel, to allow input of text or numeric values. You may want to do this if the user input only impacts the data refresh and does not need to be displayed on the form itself with the other form contents. For more information, see Defining refresh variables for Axiom forms.