You are here: User interface > User interface rules > Harness and section forms > Harness and section forms - Adding a V5 icon

About the V5 Icon control

About Harnesses

This control is deprecated. Use the auto-generated pxIcon control in new development. See Harness and Section forms — Adding an Icon control.

A cell in a layout can contain a predefined icon that starts an activity when clicked. You can also add an icon to the header of a harness. Follow these instructions to add an icon to a cell or header.

Cell Properties panel — Top fields

Click (Magnifying glass) to display the Cell Properties panel.

Your updates to this panel update the rule form upon clicking Apply. If the panel is pinned(pin), the wireframe on the rule form changes immediately to reflect your inputs. If the panel is not pinned(pin), click Apply to apply your inputs.

Field

Description

Type

Select a function for this icon from the predefined values. See Built-in Types. Each has a corresponding style that determines an image, shown in the wireframe preview.

Select CUSTOM to define a custom icon.

Tooltip

Optional. Enter a sentence or phrase that conveys to users the purpose and function of the icon.

As a best practice, start the ToolTip text for an input field with a verb; for example "Review work item history" or "Add an attachment".

If this text is to be localized. enter no more than 64 characters. Clickmagnifying glass to review or create the field value rule supporting localization, with a middle key part of pyActionPrompt.

Style

Select the icon image. If you have selected a predefined icon, then in most cases — to avoid user confusion — accept the standard style that matches the value in the Type field.
Two additional icons are available:

Standard icons are predefined in the standard text file rule named webwb.workform.css, an HTML style sheet. Click(magnifying glass) to review the style sheet that defines these icons. If necessary, your application can override the appearance of an icon by overriding the corresponding binary file rule and updating a style sheet.

The selection list presents all binary file rules available to your RuleSet list with a File Name key part starting with "icon." To include a custom icon in this list:

  1. Using any graphics program, create a CompuServe GIF file of appropriate size and appearance.
  2. Create a binary file rule in your application to hold the GIF file, choosing a File Name key part that starts with "icon".
  3. Upload the GIF file to the binary rule.
  4. Save the binary file rule.

Cell Properties panel — General tab

Complete the General tab.

Field

Description

Do Action
Target


Window Width


Window Height

These fields appear only when the type is CUSTOM.

See Complete additional information for custom icons below.

Visible

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

  • Choose Always to have the icon appear or be hidden based on the visibility of the enclosing section or flow action when the form is first presented or is 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.
Visible When

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(magnifying glass) 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 expression evaluated upon JavaScript events — To dynamically control the visibility of this property with a JavaScript event, enter a simple comparison involving a target property and select the Run on Client? box. The result at runtime determines whether the content of this cell appears in read-only mode or in the mode of the enclosing layout.
    For example, enter .Color =="Blue" in this field to make this field visible when the property Color has the value Blue, and invisible otherwise. Depending on the state of the Run on Client check box, the comparison can be executed only once as the form is initially displayed, or dynamically. See Implementing dynamic form actions and the Client Event Editor.

An icon that is not visible is also disabled and cannot be clicked.

Wrap Text?

Not meaningful for icons.

Disable

Select to disable the text input:

  • Never: never disabled
  • Always: always disabled
  • Condition (expression): the text input is disabled under the specified condition. In the field that displays, select a condition or click 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 text input is disabled under the specified condition. In the field that displays, select a when rule. Click to create a new when condition or review an existing when condition.
Run on Client?

This check box appears only if the Condition field contains a simple comparison.

Select to cause dynamic execution of the condition each time the value of the property mentioned in the condition changes. (Mark the field containing that property as a Client Event.) Leave cleared to cause the condition to execute only once, upon initial presentation of the form.

Cell Properties panel — Advanced tab

Complete the Advanced tab.

Width

As a best practice, use SmartLayouts to achieve uniform width of cells throughout your application's forms. You can set the width of SmartLayout templates using the Skin rule. See Skin form — Components tab — Layouts — Smart layouts.

Optional. This field appears only when the cell is not controlled by SmartLayout column restrictions. Enter a positive number for the width in pixels of this cell. (At runtime, normal browser processing for rendering tables determines the actual displayed width.) You can also adjust the width this column directly:

  1. Click a vertical wireframe cell border.
  2. Wait until the pointer shape changes (drag), then drag the border.
Height

As a best practice, use SmartLayouts to achieve uniform height of cells throughout your application's forms. You can set the width of SmartLayout templates using the Skin rule. See Skin form — Components tab — Layouts — Smart layouts.

Optional. This field appears only when all columns in the Layout are not controlled by SmartLayout column restrictions (that is, all columns have the None template). Enter a positive number for the height in pixels of this cell. (At runtime, normal browser processing for rendering tables determines the actual displayed height.) You can also adjust the height of a row directly:

  1. Click a horizontal wireframe cell border.
  2. Wait until the pointer shape changes (drag), then drag the border.
Privilege

Optional. Select the Privilege Name key part of a privilege rule that controls the availability of this icon at runtime. During rule resolution at runtime, the system uses the Applies To key part of the current rule as the first key part.

At runtime, the icon is not available to users who do not hold this privilege.

Click(magnifying glass) to review or create the privilege rule.

Read-Only Style

Optional. By default, when the user form or flow action form appears in read-only mode, the CSS style named LabelValueRead applies. You can enter another style name or select from those listed.

Click(magnifying glass) to review the text file rule that defines the style sheet. Your application can override the standard style sheet in the text file rule webwb.user_work_form.css.

Use Header Styles

Select to change this table cell to use header styles (by changing from <TD> elements to <TH> elements).

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.

   

Additional information for custom icons

When you choose CUSTOM as the Type value, additional fields appear on the Advanced tab.

When clicked, the custom icon executes an activity, using parameter values determined in this panel or parameter values determined by user input.

Field

Description

Do Action

Select an activity to execute when users click the custom icon. To find the activity at runtime, the system uses the Applies To key part of this rule as the initial Applies To key part of the activity.

Parameters

If the activity selected accepts input parameters, you can specify sources for the parameter values here, or allow users to enter them at runtime.

To define parameter values on the panel, enter a constant value, a property reference, or expression for each parameter.

Pass Current Parameters

Select to share the parameter page of the current activity with the called activity.

params

If the activity accepts input parameters, enter constant values for each required parameter.

(no label)

Select one:

  • Current window — The custom activity displays a success message in the current window. (To suppress this message, the activity can call the standard activity Work-.Show-Harness as a final step; this redisplays the entire user form.)
  • Pop-up window — The custom activity presents its results in a pop-up window. To suppress all results, select this option and make the activity return an HTML stream that closes upon load.
  • Custom Frame — The custom activity presents its results in a new frame.
No Data Submission

If you selected Current window for the Target field, select this option to indicate that the custom activity is to run without the data on the current form, which is not submitted.

Target Name

If you selected Custom Frame for the Target field, identify the name of the target window or frame.

Window Width

If you selected Pop-up window for the Target field, enter an integer value to determine the initial width of the target window or frame, as a percentage of the entire window width. The default value is 20 percent.

Window Height

If you selected Pop-up window for the Target field, enter an integer value to determine the initial height of the target window or frame, as a percent of the entire height of the window. The default value is 20 percent.

Built-in Types

Icons listed in the following table support standard activities. You can override the activity or the ToolTip text.

To avoid user confusion, do not use a standard icon for a processing function that is unrelated to its default function.

Type

Icon Style and Description

Add New Work

iconDefault (iconDefault) — Enter a work item.

Attachments

iconAttachment () — Presents a list of work item attachments, so users can view or add attachments. This icon appears only for users who hold the Work-.AccessAuditTrail privilege.

Cancel

iconClose () — Closes the current form without applying any changes.

Contents

iconContents () — For a cover work item, changes the form to allow users to view and navigate among the covered work items. You can override a standard list view rule to control details of this display.

Enable Action Section

iconDefault () — Presents the user form in review-only mode; inputs allowed in the action section only.

Expand/Collapse

iconExpandAll () — Redraw the form with all areas fully expanded.

Explore

iconExplore () — For a folder work item, changes the form to allow users to view and navigate among the associated work items.

Finish Assignment

iconDefault () — Submits changes and marks this assignment as complete.

Get Next Work

iconDefault () — Cancels any unsubmitted changes and finds the most important assignment to work on next.

History

iconHistory () — Displays the work item history, for users who hold the Work-.AccessAuditTrail privilege.

Local Action

iconDefault (iconDefault) — Perform a local action.

Reopen Work Item

iconReopen () — Reopens a resolved work item, for users who hold the Work-.Reopen privilege. Runs the standard activity Work-.Reopen or your application override.

Review

iconDefault () — Presents the user form in review-only mode, allowing no updates.

Save

iconSave () — Saves the work item with Submit.

Show Reopen Screen

iconReopen () — Shows the form in review mode but allows users to reopen a resolved work item. Available to users who hold the Work-.Reopen privilege. Runs the standard activity Work-.Reopen or your application override.

Show Flow Location

iconLocation() — Known as the Where-am-I? icon marks the location of the current assignment with an arrow. This icon appears only to users who hold the Perform privilege.

If the harness is a New harness — one supporting the entry of new work items — do not include the Show Flow Location icon in most cases. A flow execution doesn't start until users submit a user form. If you do include this icon in a New harness, use a when condition rule to disable the icon at runtime unless a non-blank work item ID exists.

Spell Checker

iconSpell (Spellcheck) — Enables spell-checking. See How to enable spellchecking in user forms.

Update

iconUpdate () — Redraws the form in update mode. Appears only for users who hold the Work-.Update privilege. Update mode allows changes to values that appear in sections other than the TAKE ACTION section.

This capability is not desirable in all applications, as it allows users to overwrite values entered previously, perhaps by other users.

The  Apply   button sends changed user inputs to the server, but does not commit these changes. The user must select and complete a flow action to save the changes. See Understanding transactions in flow executions.

Up About Flow Actions

Up About Harnesses

Up About Sections