Back Forward Harness, Section, and Flow Action forms
Adding an Image

About Harness rules

  Show all 

A cell in a layout can contain an image (such as a PNG, JPG, or GIF file). GRP-1041

If the image is not already loaded to an appropriate binary file rule, create a binary file rule and upload the image to the binary file rule before attempting to add the image to the harness, section, or flow action form. Enter webwb as the first key part — the Application Name — of the binary file rule. BUG-6248 rejected

  1. Drag and drop the Image control

Click the down-arrow (Arrow) at the right end of the Basic control group (Basics) and select the Image control (Check box). Drag the control to the cell or header that is to contain the property value. 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. The default image is a 20-pixel square temporary image (Temp Image).

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

Your updates to this panel can update the rule form immediately or upon clicking Apply, depending on the Property Panel settings in your Edit preferences. See Setting your preferences. 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.GRP-229

  2. Complete the Cell Properties panel — Top fields

Complete the top fields of the Cell Properties panel.

Enter in the Image field the three key parts of a binary file rule, in the format zzzzz/name.type, where zzzzz is the Relative Path on the Main tab (typically images), name is the File Name key part, and type is the File Type key part, such as JPG, GIF, or PNG. (The Application Name key part must be webwb.)

To search through binary file rules containing images, click the magnifying glass icon (Magnifying glass) to start the Image Catalog tool (a pop-up version of the Image Gallery landing page).

Complete the optional Tool Tip field by identifying a field value rule. Click the magnifying glass icon (Magnifying glass) to open or create the field value rule. The SmartPrompt list shows field values with @baseclass as a first key part and pyActionPrompt as the second key part.

  3. Complete the Cell Properties panel — General tab

Field

Description

Visible

Select to determine when the image appears. Select

  • Always — to have the image appear or be hidden based on the visibility of the enclosing section or flow action when the form is first presented or is refreshed. The system checks this condition only once.
  • 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. C-1990 B-21692
  • If Not Blank — Do not use. BUG?
  • If Not Zero — Do not use. BUG?
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. PROJ-283 Specify one of three outcomes:

  • When condition rule evaluated once — Enter the When Name key part of a when condition rule that determines the visibility of this image 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 image with a JavaScript event, enter a simple comparison involving a target property and select the Run on Client? checkbox. 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 image visible when the property Color has the value Blue, and invisible otherwise. Depending on the state of the Run on Client? checkbox, the comparison executes only once as the form is initially displayed, or dynamically. See Implementing dynamic form actions and the Client Event Editor. C-1990
Run on Client?

This field appears only if you select Other Condition for the Visible field. SR-4450 SR-4339 B-21697 embeddedARE THERE ADDITIONAL criteria?

Select to indicate that the Condition field contains a simple property comparison test that will be evaluated on the user workstation in response to a client event. See Implementing dynamic form actions and the Client Event Editor. C-1990

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.

Field

Description

Width

TipAs a best practice, use SmartLayouts to achieve uniform width of cells throughout your application's forms. You can set the width of Smart Layout templates using the Branding wizard.

Optional. Enter a positive number for the width in pixels of this image. (At runtime, normal browser processing for rendering tables determines the actual displayed width.)

This field appears only when the Width field in the Layout panel or Repeat panel (for the layout containing this cell) is set to px fixed and the cell is not controlled by SmartLayout restrictions. In that case, you can also adjust the width of columns directly:

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

TipAs a best practice, use SmartLayouts to achieve uniform height of cells throughout your application's forms. You can set the height of Smart Layout templates using the Branding wizard.

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

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). In that case, 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. PROJ-281
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 DataValueReadRV2 applies. If this cell is not controlled by SmartLayout 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 see the style definition.

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 see the style definition.

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 PROJ 242 – TASK 16156, 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. (This is not typically useful for images.)

  Tips

TipUse these Windows operations to speed development:

Up About Flow Action rules

Up About Harness rules

Up About Section rules