Section, Harness, and Flow Action forms - Adding an Icon/Image control

You can add an Icon/Image control (pxIcon) to a cell in a layout or a harness.

Icon/Image controls display an icon or image and can invoke an action when the user clicks or hovers the mouse pointer over the icon or image. You can configure the pxIconcontrol as desired, specifying an icon, image, external URL, property, or icon class as the source of the icon/image. You can also configure actions that execute when the user clicks or hovers the mouse pointer over the icon/image, as well as conditions that disable the icon/image.

PRPC ships with a number of pre-configured variations of the pxIcon control, such as pxIconAddItem. Each of these controls is pre-configured with an icon, tooltip, and action. See Standard icon controls below for a complete list. These rules eliminate the need to manually configure the values in the pxIcon Parameters dialog.

Beginning with 7.1, add an image using the Icon/Image control (pxIcon).

The UI Gallery contains a working sample. To view and interact with the sample, select > User Interface > UI Gallery. In the Components area, select Icon.

Adding an Icon/image control

1. Click the down-arrow at the right end of the Basic control group and select Icon/Image.
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 magnifying glass to display the Properties panel and complete the following tabs:

• General
• Actions

General tab

Field	Description
Icon Source	Select one of the following as the source for the icon/image: Standard Icon: select from a list of icons pre-configured with a default icon, tooltip, and action. Image External URL Property Icon Class
Standard icon	Appears if you selected Standard Icon as the Icon Source. Press the down arrow and select the standard icon that you want to display. Standard icons are pre-configured with an icon and a tooltip. Variants of the pxIcon control are also configured with actions; see Standard icon controls below for details.
External URL	Appears if you selected External URL as the Icon Source. Type the URL that you want to display as the icon/image source.
Image	Appears if you selected Image as the Icon Source. To search through binary file rules containing images, click the magnifying glass icon to start the Image Catalog tool (a pop-up version of the Image Library landing page). If the image is not already loaded to a binary file rule, create a binary file rule and upload the image to the binary file rule.
Image size	Appears if you selected Image, External URL, or Property as the Icon Source. For images, this field displays only if the selected image is not a sprite (Treat Image As A Sprite is not selected on the Main tab of the image binary file.) Select the image size: Auto: automatically sizes the image by allowing the layout to determine the width of the control area. Default. Custom: select to specify the width and height of the image in pixels in the Image dimension field.
Position	Appears if you selected Image as the Icon Source and the selected image is a sprite. (Treat Image As A Sprite is selected on the Main tab of the image binary file.) Sprites typically contain columns of images, representing each icon in normal, hover, and disabled states. Press the down arrow to select the column number of the image that you want to display.
Class	Appears if you selected Icon Class as the Icon Source. Specify the class of the icon.
Property	Appears if you selected Property as the Icon Source. Press the down arrow to select the property that you want to use as the source of the image/icon. The property can be an internal binary file (Rule-File-Binary) or an external URL.
Tooltip	Specify a tooltip to display when the user hovers the mouse pointer over the image or icon. You can press the down arrow to select a property value or type the text that you want to display as the tooltip. As a best practice, start the sentence with verb either in the imperative ("Enter price of item here") or as an infinitive ("To cancel the order, click here").
Privilege	Press the down arrow to select a privilege rule that controls the availability of this control at runtime. If there is a privilege and a when rule (see Disabled field), both rules must evaluate to true for the icon/image to be available to the user.
Disabled	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.

Standard icons

Each of the following is configured with a default icon, tooltip, and action, eliminating the need to configure these values.

Configure the control

1. Click beside the Control field on the Cell Properties panel to open the Parameters dialog.
2. In the Options area, configure the icon/image as desired: 
   

Field	Description
Icon Source	Select one of the following as the source for the icon/image: Standard Icon: select from a list of icons pre-configured with an icon and a tooltip. Add events and actions as desired in the Behaviors area. Image External URL Property Icon Class
Type	Appears if you selected Standard Icon as the Icon Source. Press the down arrow and select the standard icon that you want to display. Standard icons are pre-configured with an icon and a tooltip. Variants of the pxIcon control are also configured with actions; see Standard icon controls below for details.
External URL	Appears if you selected External URL as the Icon Source. Type the URL that you want to display as the icon/image source.
Image	Appears if you selected Image as the Icon Source. To search through binary file rules containing images, click the magnifying glass icon to start the Image Catalog tool (a pop-up version of the Image Library landing page). If the image is not already loaded to a binary file rule, create a binary file rule and upload the image to the binary file rule.
Image size	Appears if you selected Image, External URL, or Property as the Icon Source. For images, this field displays only if the selected image is not a sprite (Treat Image As A Sprite is not selected on the Main tab of the image binary file.) Select the image size: Auto: automatically sizes the image by allowing the layout to determine the width of the control area. Default. Custom: select to specify the width and height of the image in pixels in the Image dimension field.
Position	Appears if you selected Image as the Icon Source and the selected image is a sprite. (Treat Image As A Sprite is selected on the Main tab of the image binary file.) Sprites typically contain columns of images, representing each icon in normal, hover, and disabled states. Press the down arrow to select the column number of the image that you want to display.
Class	Appears if you selected Icon Class as the Icon Source. Specify the class of the icon.
Property	Appears if you selected Property as the Icon Source. Press the down arrow to select the property that you want to use as the source of the image/icon. The property can be an internal binary file (Rule-File-Binary) or an external URL.
Tooltip	Specify a tooltip to display when the user hovers the mouse pointer over the image or icon. You can press the down arrow to select a property value or type the text that you want to display as the tooltip. As a best practice, start the sentence with a verb, either in the imperative ("Enter price of item here") or as an infinitive ("To cancel the order, click here").
Disabled	Select Yes if you want to apply a when condition that tests whether the user can use the control. If selected, the following options appear: Disabled Condition Select one of the following: The When Name key part of a when condition rule. Click() to review or create the rule. 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 ( ) to open the tool. See Using the Condition Builder to configure dynamic UI actions. Run On Client Appears only if the Disabled Condition field contains an expression that can be evaluated on the client. Complex expressions and When rules are not eligible. Select to cause evaluation and execution of the condition each time the value of a property stated in the condition changes.  If unselected, the expression is evaluated and the condition executed when the form is initially presented and whenever the form is refreshed.
Privilege	Press the down arrow to select a privilege rule that controls the availability of this control at runtime. If there is a privilege and a when rule (see Disabled field), both rules must evaluate to true for the icon/image to be available to the user.

3. In the Behaviors area, configure events and actions as desired. See Control Form — Completing the Control tab for descriptions of the available parameters and how to define behaviors.
4. Click OK.
   
   

Complete the Cell Properties panel — General tab

Complete the General tab.

If the panel is pinned (), the wireframe presentation on the rule form changes immediately to reflect of your inputs. If the panel is not pinned (), click Apply to apply your inputs.

Field	Description
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.
Condition	If you selected Other Condition for the Visible field, complete this field. The When Name key part of a when condition rule. Click() to review or create the rule. 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 ( ) to open the tool. See Using the Condition Builder to configure dynamic UI actions.   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() 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 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.
Run on Client?	Appears if the Condition field contains a simple comparison. Select to cause evaluation and execution of the condition each time the value of a property stated in the condition changes. If unselected, the expression is evaluated and the condition executed when the form is initially presented and whenever the form is refreshed.

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	Optional. By default, when the user 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() 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	Optional. By default, when the user 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() 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	Enter CSS code for an inline style for a cells in the column. For guided assistance in composing a style definition, click the magnifying glass icon () to open the Style Editor. You can select from predefined lists or type a style definition directly, and preview the results.
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 icon displays in the row only when the user selects it.

Standard icon controls

PRPC provides standard variations of pxIcon. Each is preconfigured with an icon, tooltip, and action. As a best practice, use these standard rules to ensure correct appearance and behavior. In the Cell Properties panel, use AutoComplete () in the Control field to select a rule.

If the action is not included in the list, keep pxIcon and use the Parameters dialog to configure the control.

This table below describes the icon name, the icon, the action invoked when clicked, and the standard icon control, which contains the control's parameters.

Copying, deleting, duplicating, or moving an icon

• To move a cell containing an icon, select the cell and drag and drop it in another cell in the same layout or another layout.
• To cut, copy, or paste a link in a cell, right-click in the cell to access a context-menu.

As of V6.2, the Icon control uses the auto-generated control pxIcon. The icon and its behavior are 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, do not modify a copy of the rule while designing a section, flow action, or harness. Instead, use the Parameters dialog available in the control's Cell Properties panel. See Control rule — Completing the Control tab.

Use the pxIcon control in new development. The V5 Icon control remains supported in V6.X. See About the V5 Icon control.

Tips

Use these Windows operations to speed development:

• To move a cell containing an image, 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 an image in a cell, right-click in the cell to access a context-menu.

About Flow Actions

About Harnesses

About Sections