Configuring a text label in a layout cell or header

A cell on the layout can present formatted text, which may include the results of JSP tags or directives. Follow these instructions to control the presentation of the label. Labels can also appear in headers.

Labels may appear in any cell. Labels are not associated with fields (properties) except by visual placement.

You can style labels in the skin rule, as well as create custom label formats. See Skin form — Components — Controls — Labels.

Adding a label control

  1. On the Design tab, from the Data display list, drag Label onto the work area.

    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.

  2. Click the View properties icon to display the Properties panel and complete the General tab and Presentation tab.

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).

In a SmartLayout, some columns are labeled Label or Field. This designation only determines the (default) styles applied to values in the column; it does not restrict which controls can be placed in cells of the column. For example, you can drop a Label control into a Field column.

General tab

Field Description
Text

Type the text that forms the label. If the text is wider than the panel, click the Open icon to access a larger window that allows you to edit the longer text.

When you plan to localize the application using this rule, choose the text carefully and limit text length to 64 characters. When practical, choose a caption already included in a language pack, to simplify later localization.

Optionally, if this label is within 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 label text, 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.

If you need a text label that is longer than 64 characters and do not plan to localize this application, consider a paragraph rule rather than a label. See Adding paragraphs to place rich text in a cell or header.

If the Localization? check box (on the HTML tab of the rule form) is selected, you can click the Open icon to review or create a field value rule supporting localization. See About the Localization wizard.
Label for Optional. If building an accessible application, select here the property name that this label identifies. In other cases, you can leave this field blank.

If you leave this blank, the generated HTML from this form assumes that this label identifies the cell (if any) immediately to the right of the current cell.

If this field is not blank, the generated HTML from this form at runtime allows:

  • A user to click this label to move focus to the cell containing the property
  • Screen reader software (such as the JAWS for Windows®) to identify to the cell containing the property.
  • The Required box on the related property to cause display of an orange asterisk next to the label.

You can't reference a field value rule here.

During design of a harness, section, or flow action form, complete this field to support simpler drag-and-drop operations. When completed, both the label and the associated field move together.

Required

Select to cause an asterisk ( ) to appear next to the label when presented in read-write mode. By convention, this can indicate that a field with this label is required to be non-blank.

However, checking Required for a Label cell does not affect the processing or validation of user input. To mark a field as required to be non-blank, check the Required box in the field Cell panel. To cause both validation of the value and the asterisk to appear, check the Required box for both the Label and Field panels.

Align column with column data Select this check box to align the column headers with the data in the columns.

When cleared, a drop-down menu appears giving you the option of aligning the column headers to the left, right, or middle.

Read Only Leave cleared in most cases. Labels are always presented in read-only mode, so this setting affects only styles.

Select to cause the label to be presented with read-only styles always, or based on a when condition rule, even when the enclosing layout is in read-write mode.

If desired, in the field that displays, specify a read only condition using:

  • The When Name key part of a when condition rule. Click the Open icon to review or create the rule.
  • 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.

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.

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 to better support automated testing of your application.

When creating a control that supports you can use a combination of numbers, letters, and underscores, or click the Generate ID button to create a unique ID. The attribute data-test-id is then generated for the selected element.

After the test ID has been 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.

The Test ID is available to access groups that include the PegaRULES:TestID privilege. To disable Test ID, remove the PegaRULES:TestID from the access group.

Presentation tab

Field Description
Format Specifies the format of the label control.

You can style label controls and create additional formats in the skin rule.

Advanced Options  

Tips

Use these Windows operations to speed development:

  • To move a cell containing a Label, hold down the SHIFT key, select the cell, drag and drop it in another cell, in the same one layout or another layout.
  • To cut, copy, or paste a Label in a cell, right-click in the cell to access a context-menu.
  • To reorder rows or columns within a layout, you can select and drag a single row or column using the dots above or to the left of the table; these act as handles.
  • To duplicate rows or columns within a layout, select by handle but also hold the Ctrl key. Release the Ctrl key to drop a duplicate row or column.

About Flow Actions

About Harnesses

About Sections