You are here: User interface > User interface rules > Harness and section forms > Adding formatted text

Harness and Section forms - Adding formatted text

Cells and headers in a layout can present formatted text. You can style formatted text in the skin rule. See Skin form — Components — Controls — Text inputs and Formatted text.

Adding a formatted text control

  1. From the Basic control group , select Formatted text.
  2. 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.

  3. Click the View propertiesicon to display the Properties panel and complete the following tabs:

To speed development, you can drag and drop a Single Value property from the Application Explorer into the right cell of a pair of adjacent cells. The system drops a label control into the left cell (if it is empty).

General tab

Field

Description
Property

Press the down arrow to select a property.

If the set of possible values is provided by a property using the Table Type field , specify a Single Value mode property that has a Table Type other than None.

For Single Value properties in the Applies to class (or higher) of the current rule, you can drag a property name into the cell from the list of properties visible in the Application Explorer. If the container that holds this field 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 (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.

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.

Value

Select to display one of the following:

  • Property value— displays the value of the selected property
  • Another property's value— displays the value of the property that you specify. In the field that displays, select the property for which you want to display the value.
  • Constant— displays the value that you specify. In the field that displays, type that constant.
  • Display text of selected option— displays the description
  • Localize property value— displays the localized value of the property that you specify.
Visibility

To control the visibility of the label, select one of the following:

  • Always: always visible
  • Condition (expression): the region is visible under the specified condition. In the field that displays, select a condition or click the Gear icon to open the Condition Builder. You can define a 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.
  • Condition (when): the region is visible under the specified condition. In the field that displays, select a when rule. Click the Open icon to create a new when condition or review an existing when condition.

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:

pyCurrentSpace=="ASpaceName"

Then select the Run visibility condition on client check box.
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.
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
Style

Specifies the skin format for this control. You can style fomatted text in the skin.

Advanced Options

Appears only when you select the Display advanced presentation options check box.

  • Cell width – Enter a positive number to indicate the pixel width of this cell. At run time, normal browser processing for rendering tables determines the actual displayed width.

  • Cell height – Enter the cell height in pixels.

Instead of creating a new custom format in the skin, you can adjust elements in a cell by applying Cascading Style Sheet (CSS) helper classes. For example, you can use a CSS helper class to center an element in a cell or to double the standard right margin for the element.

  • Cell read-write classes – Click the Open helper class picker icon to specify one or more CSS helper classes to apply to this cell when the form is displayed in read-write mode. You can enter several helper classes, separated by a space. Alternatively, you can enter the name of a custom style to apply to this cell.

  • Cell read-only classes – Click the Open helper class picker icon to specify one or more CSS helper classes to apply to this cell when the form is displayed in read-only mode. You can enter several helper classes, separated by a space. Alternatively, you can enter the name of a custom style to apply to this cell.

  • Inline style (not for production use) – You can use this field to define an inline style by entering CSS code. However, entering an inline style results in a guardrail warning. For maintainability and reuse, the recommended approach is to use read-write or read-only classes.

For more information, see CSS helper classes.

Format
Type

Select a format (read-only) used with this property. Your selection filters the format options.

Group/Selection

Description
None The property is not formatted. There are no options.
Date Renders DateTime and Text property types in date-only format (hours and minutes are not displayed). See Understanding the Date, Time of Day, and DateTime property types.

Specify the format in the Date Format field.
Date/Time Renders DateTime and Text property types in date and time format. See Understanding the Date, Time of Day, and DateTime property types.

Specify the format in the DateTime Format field.
Number Numeric properties on output.
Text Unedited text, which may contain spaces, tabs, line break characters, and other control characters.
True/False Boolean values.

Specify the format in the True Label and False Label fields.
DateTime Format

or

Date Format

Appears if Type is Date/Time or Date.

Select one of the following:

  • A DateTime format (for example: 1/1/01 1:00 AM), or a Date format (for example: 1/1/01). Both the DD/MM/YYYY and MM/DD/YYYY formats can be selected from the Date format drop-down control. The number of characters displayed is the same regardless of the date inputted (for example, 1/1/2014 displays as 01/01/2014).

    You can also create a custom date when using either of these formats. For example, entering EEE, MMM D, YY H:MM A in the "Custom" field displays as Sat, May 1, '99 2:00 PM.

  • The elapsed time format (2 days, 5 hours ago or 2d, 5h ago). The system displays the value calculated as the difference between the current system date/time and the date/time value of the property. For example:

Current = 3/21/2011

Property value of 3/20/2011 = 1 day ago

Property value of 3/22/2011 = 1 day from now

The units of measure are minutes, hours, days, and years. If greater than 59 minutes, the value is represented in two units (unless the difference is exactly one unit). For example:

1 hour, 10 minutes

2 days, 20 hours

1 month, 4 days

1 year, 3 months

If less than a minute, the value is displayed as "less than a minute ago" (or from now). For the 2d, 5h ago date/time format, the past and future indications such as ago or from now can be excluded from the time stamp by selecting the Do not display past or future text check box.

To calculate months and days, the system uses today's numerical day in the previous month(s). For example, if today is March 21, one month ago was February 21, not one month, six days ago.

If the property is a Date type or the format is Date, minutes are excluded.

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 Auto, which displays a maximum of three decimal places (placeholder zeroes are not added). Select to remove all digits after the decimal point and round to the nearest integer. Select All to include all digits.
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 Thousands, a value of 20,000 appears as "20 K." If Percentage, the value appears as a percentage sign (.8 appears as "80%").
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 Style Ref options. By default, the class name is NegativeNumber.
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

  • Currency — Formats the number as a currency using the default locale.
  • Constant — A text string or character (for example, "%") ASCII character that you enter.
  • Reference — A property value.
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 Yes if you want the characters entered by the user to appear as a string of bullets. The input characters are initially added to the clipboard as unencrypted, clear text values. The system computes the hashed value only as the page is committed to the PegaRULES database. Thereafter, the hashed value appears in both the clipboard and the database row.
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 True/False and Show Value AsImage is selected.

Select an image to label either outcome. Used with a boolean type.
True Text

False Text

Appears if the Type is True/False and Show Value AsText is selected.

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.

About Flow Actions

About Harnesses

About Sections

Open topic with navigation