Back Forward Section and Flow Action forms
Adding a Button control

About Harness rules

  Show all 

A cell in a layout can contain a Button control, which invokes an action when the user clicks the button. This and the Icon and Link controls share the same capabilities — their differences are mainly in their presentation.

As of V6.1 SP2, the Button uses the auto-generated control rule pxButton. Its behavior is governed by the settings in the rule form's Control tab. The Parameters tab is not available and the HTML cannot be edited. As a best practice, customize the control using its Parameters dialog within the context of the section; do not edit the rule itself.

You can customize the button's appearance using the Branding wizard. See Branding wizard — Controls.

This control replaces the V5.1x Button control (supported in V6.X). See About the Button control V5.1x. It is recommended that you use the pxButton control rule in new development.

Note You cannot use the auto-generated button control in the bottom row of a harness. See Harness forms — Placing a button in a harness.

Follow these instructions to add a Button control.

  1. Drag and drop the Button control

Click the down-arrow (Arrow) at the right end of the Basic control group (Basics) and select the Button control (). Drag the control to the cell or header that is to contain the Button. When the pointer changes shape to indicate that a single cell is selected, release the mouse button to drop the control.

If the cell is not empty, the dropped control replaces the current contents of the cell

  2. Complete the Cell Properties panel — Top fields

Click the magnifying glass icon (Magnifying glass) 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. GRP-229

Field

Description

Pencil

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

Control Accept the default pxButton control rule. The default label is "Button."

Click the pencil icon (Pencil) to review the control rule identified in this field.

Customizing the control

The Button's default parameters represent the basic configuration. However, you will need to specify what action or actions will execute when the user clicks the control. For example, you can configure the button to launch a local action or display a new harness. In addition, you may want to:

  • Add a label or tooltip.
  • Add conditions that, for specific users, disable or hide the button.

Your edits apply only to the button within the context of the section that contains it and do not update the underlying rule. See Control Form — Completing the Control tab for descriptions of the available parameters and how to define behaviors.

Do the following to customize an auto-generated control rule in a section:

  1. Open the section or harness that contains the rule.
  2. Select the cell containing the rule and open its Cell Properties panel.
  3. In the panel, select the magnifying glass icon () next to the Control field. This displays the control Parameters dialog, which contains most of the settings in the underlying rule's Control tab. You cannot edit the Control Modes and UI Element settings.
  4. Modify as necessary. To immediately render your changes, click OK in the dialog. If satisfactory, save the section. The system generates the XML representing your edits and stores it in the section.

  3. Complete the Cell Properties panel — General tab

Complete the General tab.

Field

Description

Visible:

Select to determine when the button appears. (If this setting is not applicable, the cell contents are blank.)

  • Choose Always to have the field appear at the time this area of the work object 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.
Note In the control rule's Parameters dialog, you can also specify a privilege rule in the Privilege field that hides (or disables) the button. In addition, you can disable the button with a when condition using the Disabled and Disabled Condition fields. See Control Form — Completing the Control tab.
Condition:

SmartPrompt If you selected Other Condition for the Visible field, complete this field. Enter an expression involving another property, or identify the When Name key part of a when condition rule. Specify one of three outcomes:

  • When condition rule — Enter the When Name key part of a when condition rule that determines the visibility of this field at runtime. The system uses the Applies To key part of the current rule in rule resolution to locate the when condition rule. Click the pencil icon (Pencil) to review or create the when condition rule.
  • Expression evaluated once — Enter an expression that returns true or false. This expression can involve multiple properties, function calls, and other syntax as supported by the <pega:when > JSP tag.
  • Simple Java expression evaluated upon JavaScript events — To dynamically control the visibility of this property with a JavaScript event, enter one or more comparisons involving a target property values to literal constant values and select the Run on Client? box. You can use parentheses and the && and || operators to group comparisons. At runtime, the result determines whether the content of this cell appears in read-only mode or in the mode of the enclosing layout. Examples:

.Color =="Blue"

.Phone !="0"

(.Phone!="0")&&(.StateCode=="MA"||.StateCode=="VA"))

Run on Client

This field appears only if you select Other Condition for the Visible field and a simple expression in the Condition field.

Select to indicate that the Condition field contains one more property comparison tests that will be evaluated on the user workstation in response to a client event. See Implementing dynamic form actions and the Client Event Editor.

Clear to indicate that the Condition field contains a when condition rule name or an expression to be evaluated once upon initial display of the form.

  4. Complete the Cell properties panel — Advanced tab

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

Field

Description

Read-Write Style

SmartPromptOptional. By default, when the work object 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 pencil icon (Pencil) 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.

Read-Only Style

SmartPromptOptional. By default, when the work object 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 pencil icon (Pencil) 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.

Inline Style

To apply inline styling to this cell only, type a CSS style definition in this field, or click the magnifying glass 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.

Use Heading Styles

Select to change the cell HTML element from <TD> to <TH>, with a resulting style change.

Show When Active This checkbox appears when control is placed in the repeating area of a Grid, Tree Grid, or Tree layout. If checked, the button displays in the row only when the user selects it.

  Copying, deleting, duplicating, or moving a Button

TipUse these Windows operations to speed development:

Up About Flow Action rules

Up About Section rules