Harness and Section forms - Adding a Text Area control
A text area is an area in which the user types or pastes one or multiple lines of text, without formatting the text.
If formatting is required, use a Rich Text Editor control instead. If the text content is only a few words, use a Text Input control instead of the Text Area or Rich Text Editor controls.
A cell in a layout can present the value of a property as display-only or as an input field using the TextArea control, pxTextArea. You can configure a text area control, specifying the width, height, and maximum number of characters that users can enter into the text area. You can also display placeholder text and/or tooltips at runtime and configure actions based on events.
The UI Gallery landing page contains a working example of this element. To display the gallery, click
.> Adding a Text area control
- From the Basic control group, select Text area .
-
Drag the control into the layout and release the mouse button to drop the control.
If you are using a cell-based layout and you drag the control into a cell that is not empty, then the dropped control replaces the current contents of the cell.
- Click the View properties icon to display the Properties panel and complete the following tabs:
General tab
Field | Description |
---|---|
Property |
Press the down arrow to select 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
Click the Open icon to review the property (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. For a harness, the property generally must be on the primary page of the rule — the page corresponding to the Applies To key part of the rule. However, a section within the harness may have a different Applies To class, and that section can include properties from its own class.
If this field is always displayed as read-only, you can enter a
linked
property
reference here, of the form
|
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.
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. |
Visibility |
To control the visibility of the label, select one of the following:
If this section is to become part of navigation in a composite portal, you can make the header visible only when a specific space is the current space. Enter an expression here similar to the following:
Then select the Run visibility
condition on client check box.
|
Disable | |
Wrap Text | Select if the label is to be presented as multiple lines when the text is longer than the cell width. If this check box box is not selected, the label may appear truncated at runtime. |
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. |
Identifiers | |
Tour ID | Optional: Provide an ID for use in a guided tour. Use a combination of numbers, letters, and underscores. Pega Platform uses the Tour ID when it finds an anchor button during a tour stop anchor point. |
Test ID |
Optional: If authorized, you can provide a unique Test ID for use in your test suite in order to support better automated testing against any Pega application. When creating a control that supports Test ID, the Test ID field is initially blank. Use a combination of numbers, letters, and underscores, or click the Generate ID button to create a time stamp as a unique ID. The attribute data-test-id is then generated for the selected element. When you save an existing section, any supported controls that do not have a Test ID will have one automatically generated. You can override these with a custom ID at a later time. Once generated, you can view your Test ID in HTML or display it in the Live UI panel. You also have the option to have all controls that support Test IDs in a ruleset updated in bulk. A standard, out-of-the-box developer role, PegaRULES:SysAdm4, includes the privilege for Test ID. To disable Test ID for this role, modify the pxTestID privilege. |
Presentation tab
Field | Description | ||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Edit Options |
Select an edit mode for this control. The edit mode of the control, specified
here, takes precedence over section and harness settings.
|
||||||||||||||
Read-only when |
Appears only when you select
Read Only
in the Edit Options
field. Enter or select one of the following:
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. |
||||||||||||||
Specify width |
Select Auto if you want the layout to determine the width of the control area. This is the default. If you want to specify the width, select Custom and set the width in columns, pixels, or percent. |
||||||||||||||
Specify height |
Select Auto if you want the layout to determine the height of the control area. This is the default. If you want to specify the height, you can select Size to Content, which means setting the minimum number of pixels or rows to display, or Custom to set the height in pixels or percent. |
||||||||||||||
Min/Max characters | Optional. Enter a value that determines the minimum and maximum number of characters that can be entered in the text input. You can designate either value as unlimited by leaving it blank. | ||||||||||||||
Tooltip | If you want to display a tooltip when the user hovers the mouse pointer over the text input, press the down arrow to select the property that you want to display as a tooltip or type a text string within quotations, for example, "Select to open an item" . | ||||||||||||||
Placeholder |
Select None if you do not want to display placeholder text. Select Other if you want to display a hint or instructional text in the field. The text disappears when the user enters a value. If the user does not enter a value, the placeholder text reappears when the field loses focus. |
||||||||||||||
Style |
Specifies the format of the text input. You can style text input controls and create additional formats in the skin rule. To select a custom format, press the down arrow and select Other. |
||||||||||||||
Advanced Options | |||||||||||||||
Type |
Select a format (read-only) used with this property. Your selection filters the
format options.
|
||||||||||||||
DateTime Format
or Date Format |
|||||||||||||||
Text Alignment |
Appears if Type is
Number.
Select left, right, or center alignment. |
||||||||||||||
Decimal Places |
Appears if Type is
Number.
A non-negative integer to control the number of digits presented after the
decimal place. The default is
|
||||||||||||||
Scale |
Appears if Type is
Number.
Select a label indicating the scaling you wish to apply to the number. The
scales are K for thousands, M for millions, B for billions, and T for trillions.
For instance, if you select
|
||||||||||||||
Negative Format |
Appears if the Type is
Number .
Select a format (minus sign or parenthesis) for displaying negative numbers.
You can also specify a CSS class if you select one of the
|
||||||||||||||
Symbol |
Appears if Type is
Number.
When a symbol is specified an
additional character(s) is prepended to the value. Currency automatically uses the
localized currency symbol, constant uses a string, and reference uses a property
value.
Select an option for representing the number as
|
||||||||||||||
Separators |
Appears if Type is
Number.
Select to use a thousands' separator. Depending upon the default locale, a comma or period is used. |
||||||||||||||
Obfuscated |
Appears if the Read-only format Type is Text.
Select
|
||||||||||||||
Auto Prepend |
Appears if Type is
Text
and the control is not obfuscated.
Select a property or constant that you want to add either before the displayed property value. For example, when the user name appears, the system can automatically prepend the user's title. |
||||||||||||||
Auto Append |
Appears if Type is
Text
and the control is not obfuscated.
Select a property or constant that you want to add after the displayed property value. For example, when the user name appears, the system can automatically append the full mail extension to the name. |
||||||||||||||
Show Value As |
Appears if the Type is
True/False .
Select to label either outcome using Text or an Image. |
||||||||||||||
True Image
False Image |
Appears if the Type is
Select an image to label either outcome. Used with a boolean type. |
||||||||||||||
True Text
False Text |
Appears if the Type is
Enter a text string to label either outcome. Used with a boolean type. If the Localize? check box is selected on the section's HTML tab, a SmartPrompt Appears in the Constant field in the Parameters dialog. Select a field value rule if you plan to localize the text. If this text is to be localized, enter no more than 64 characters. A field value rule with pyCaption as the second key part and this text as the final key part is needed for each locale. |
||||||||||||||
Show validation messages in read-only mode |
Copying, deleting, duplicating, or moving a Text Area control
- To move a cell containing a Text Area, select the cell and drag and drop it in another cell in the same layout or another layout.
- To cut, copy, or paste a Text Area in a cell, right-click in the cell to access a context-menu.