You are here: User interface > User interface rules > Harness and section forms > About the Input Box control

About the Input Box control

 

For new development, use the Text Input control (control pxTextInput)..

Cell Properties panel — Top fields

Click the View properties icon to open the Cell Properties panel. Complete the top fields that appear.

If the panel is pinned (Pinned), the wireframe presentation on the rule form changes immediately to reflect of your inputs. If the panel is not pinned (not pinned), click Apply to apply your inputs.

Field

Description

Open icon

(Appears only when this field is in a section included within the current open rule.) Click to open the section that immediately contains the field.

Property

Select or type a property reference that identifies a single text value.

Alternatively, you can drag a property name from the lists of properties visible in the Application Explorer. Typically, this works for Single Value properties belonging to in the Applies to class of the current rule (or a higher class). If the container in which this field sits has a non-blank Using Page value, you can drag a Single Value property from within that embedded page property.

Click the Open icon to review the property rule (if the reference is to an existing property in the Applies To class of this rule or a parent of that class). If the property is not found, the New dialog box for the property form appears.

You can reference properties on any page identified on the Pages & Classes tab, using the normal notation pagename.propertyname for pages other than the page corresponding to the Applies To class of the rule.

If this field is in a cell of a section that includes parameter declarations on the Parameters tab, you can enter the notation param.NAME here, to use a parameter value for the field, where NAME identifies a string parameter. Make sure that the NAME parameter is declared on the Parameters tab, and that your application provides a non-blank value for the parameter value in all possible situations where the section appears. See Sections — Completing the Parameter tab.

Select a control

Optional. Select a control to format the property value. The wireframe preview changes to reflect the value (when presented in read-write mode.)

If you leave this blank, the form uses the control identified in the property. (If no control is referenced in the property, the control named Default is used.)

Click Change to see in a new window a list of suggested controls that may be suitable to present the property in the Property field. Columns in the window identify the name of a control, a preview of in the read-only mode, and a preview in the read-write mode. To choose one control, click the radio button next to the row and click Save. (This window does not include all choices available to you. It includes only those controls with a non-blank Property Type value (on the HTML tab) that matches the Type of the property in the Property field.

Click the Open icon to review the control identified in this field.

Parameterized controls

When feasible, use a parameterized control for runtime efficiency and economy. See Standard controls accepting parameters.

Use the Parameters tab to see the default value and preview the runtime appearance of the property. Enter parameter values as desired and click Save.

If this input box is within a section that itself has parameters (defined on the Parameters tab of the Section form), you can reference a section parameter to supply a control parameter value, with the normal notation PARAM.Name.

Width determined by Expected Characters Length

Some properties represented by a Text Input control have an Expected Length (in characters) defined on the Advanced tab of the Property form. Enter the special value auto for the Width parameter of the control to cause the width of the input box to be set at runtime based on the Expected Length.

The auto overrides the column width restrictions of SmartLayouts.

Specific formats

These standard controls provide specific capabilities:

  • DynamicSelect — Supports display of a drop-down list at runtime that is computed on request. See Adding a Dynamic Select control.
  • CalculatedValue — Choose for target property that is computed by a Declare Expression rule, presented in read-only mode, and is to be recomputed interactively based on the Enable Expression Calculation field on the HTML tab of the Harness form or Flow Action form.
  • WordTextArea — Enables inline Word display for the value of a property.
Behavior

Optional. Leave blank if no dynamic form actions to other parts of the form are to occur based on user updates or values for this field.

To establish a dynamic form action, click the Gear icon to open the Client Event Editor in a new dialog window. Complete the Client Event Editor to select an event (OnBlur, OnChange, or OnClick) and the resulting form action.

Click the help icon on the Client Event Editor for assistance. For general information on this capability, see Harness and Section forms Help — Client Event Editor.

Client event support is not available for harnesses, sections, or flow actions that use directives.

Cell properties panel — General tab

Complete the General tab.

Field

Description

Visibility:

Select to determine when the property value is to appear. (If this setting is not applicable, the cell contents are blank.)

  • Choose Always, If Not Blank, or If Not Zero to have the field appear or be hidden based on the property value at the time this area of the user form (section or flow action) is first presented or refreshed. This condition is checked only once.
  • Choose Other Condition to make the visibility depend on a when condition rule, a Boolean expression evaluated only once, or a test evaluated repeatedly upon JavaScript events.

Caution: When a user submits an HTML form, an input field that is not visible is not included in the HTTP details. Don't make an input field invisible if your application expects user input on the field.

Condition

Appears if you selected Other Condition in the Visible field. Select one of the following:

  • The When Name key part of a when condition rule. Click the Open icon to review or create the rule.
  • Simple expression based on the comparison of a pair of constants, properties, or both, combined by Boolean operators, such as .Color="Red". You can combine the expression with a when condition rule or another expression using the && and || operators.

As a best practice, use the Condition Builder to edit this field. Click the Open condition builder icon to open the tool. See Using the Condition Builder to configure dynamic UI actions.

Run on Client

Appears when you enter a simple expression in the Condition field. Select to cause dynamic execution of the condition each time the value of a property stated in the condition changes.

Edit Options Select an edit mode for this control. The edit mode of the control takes precedence over section and harness settings.
  • Auto — the control uses the edit mode of the section or harness in which it appears. If the section is set to Read Only, then the control is Read Only. If the section is set to Auto, then the control uses the edit mode of the harness. For example, a New harness is editable, while a Review harness is read only.
  • Editable — the control is editable, regardless of the edit mode of the section or harness in which it appears.
  • Read Only — the control is presented in read-only mode always, or based on a when condition rule or client-side test, even when the enclosing layout is in read-write mode.
Condition

Optional. Appears only when you select Read Only in the Edit Options field. Enter or select one of the following:

  • The When Name key part of a when condition rule. Click the Open icon to review or create the rule.
  • Simple expression based on the comparison of a pair of constants, properties, or both, combined by Boolean operators, such as .Color="Red". You can combine the expression with a when condition rule or another expression using the && and || operators.

As a best practice, use the Condition Builder to edit this field. Click the Open condition builder icon to open the tool. See Using the Condition Builder to configure dynamic UI actions.

Required

This box appears only for fields in cells on flow actions and sections. Select to require that (when the form appears at runtime in read-write mode) users cannot successfully submit the form if the field is blank.

Selecting Required marks the label for this field with an orange asterisk when the flow action form appears in read-write mode. (The asterisk also appears if the Label control's Value For field is not blank and the Label control's Required box is checked.)

For sections, checking this box enables client-side format validation when this section is part of a harness form that has the Enable Client Side Validation box selected on the HTML tab. At runtime, users who leave this field blank and submit the form are notified immediately that the field is required; the form is not transmitted to the server.

Wrap Text

Select if the text in the cell is to be presented as multiple lines when the text is longer than the cell width. If the box is not selected, the text visible in the cell may appear truncated at runtime.

Cell properties panel — Advanced tab

Complete the Advanced tab to control the presentation and visibility of the field.

Field

Description

Width

As a best practice, use SmartLayouts to achieve uniform width of cells throughout your application's forms. You can set the width of SmartLayout templates using the Skin rule.

Optional. Enter a positive number for the width in pixels of this cell. (At runtime, normal browser processing for rendering tables determines the actual displayed width.)

This field appears only when the cell is not controlled by SmartLayout column restrictions. In that case, you can also adjust the width this column directly:

  1. Click a vertical wireframe cell border.
  2. Wait until the pointer shape changes, then drag the border.
Height

As a best practice, use SmartLayouts to achieve uniform height of cells throughout your application's forms. You can set the width of SmartLayout templates using the .

Optional. Enter a positive number for the height in pixels of this cell. (At runtime, normal browser processing for rendering tables determines the actual displayed height.)

This field appears only when all columns in the Layout are not controlled by SmartLayout column restrictions (that is, all columns have the None template). In that case, you can also adjust the height of a row directly:

  1. Click a horizontal wireframe cell border.
  2. Wait until the pointer shape changes, then drag the border.
Default Value

Optional. Enter a constant value for the property value, a property reference, or an expression, to be used only when the user form or flow action form appears in read-write mode rather than read-only mode.

Click the Open expression builder icon to start the Expression Builder. Click the Open icon to review a property.

Choose a default value that speeds data entry. When the system renders a harness or section in read-only mode (for example because the read-write mode requires a privilege that the current user does not hold), the default value does not appear, because data entry is not permitted.

Cell read-write classes

Optional. By default, when the user form or flow action form appears in read-only mode, the CSS style named DataValueRead or DataValueRead RV2 applies. If this cell is not controlled by Smart Layout restrictions, you can enter another style name or select from those listed.

The SmartPrompt list shows all styles that start with the word Data. You are not limited to these styles.

Click the Open icon to review the text file rule that defines the style sheet. Your application can override and extend this style sheet in an application text file rule.

Cell read-only style

Optional. By default, when the user form or flow action form appears in read-only mode, the CSS style named DataValueRead or DataValueRead RV2 applies. If this cell is not controlled by Smart Layout restrictions, you can enter another style name or select from those listed.

The SmartPrompt list shows all styles that start with the word Data. You are not limited to these styles.

Click the Open icon to review the text file rule that defines the style sheet. Your application can override and extend this style sheet in an application text file rule.

Cell inline style

To apply inline styling to this cell only, type a CSS style definition in this field, or click the Gear icon to access a Style Editor window. Styles you enter in this field supplement and override style elements defined in style sheets, according to normal CSS rules.

Inline styles are recorded in the generated HTML for the form; they do not alter the CSS definitions.

Using the Style Editor

You can select the font, color, font size, text align, vertical align, borders, margins, and other attributes of this cell using selection lists. The Style Editor maintains a preview of the resulting presentation. If you alter the style definition directly, click Apply to update the preview.

Click OK to record the style defined with the Style Editor in the panel.

About Sections