You are here: User interface > User interface rules > Harness and section forms > Placing a text label in a cell

Harness and Section forms - Placing 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. From the Basic control group, select Label.
  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 General and Presentation 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).

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 Openicon 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

Check this box to align the column headers with the data in the columns.

When unchecked, 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 theOpen 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 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

Format

Specifies the format of the label control.

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

Advanced Options
  • 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 desired 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.

Tips

Use these Windows operations to speed development:

About Flow Actions

About Harnesses

About Sections