|
![]() |
V6.2 GRP-20247 pashm A cell in a layout or a harness header can contain an Icon control, which invokes an action when the user clicks or hovers the mouse pointer over the icon. This and the Button and Link controls share the same capabilities — their differences are mainly in their presentation.
As of V6.2, the Icon control uses the auto-generated control rule 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, customize the control using its Parameters dialog within the context of the section; do not edit the rule itself.
This control replaces the V5.1x Icon control (supported in V6.X). See About the Icon control V5.1x. It is recommended that you use the pxIcon control rule in new development.
Follow these instructions to add an Icon control.
1. Drag and
drop the Icon control
Click the down arrow () in
the Basic control group (
) and select the Icon
control (
). Drag the control to the cell or header area that is to contain it. When
the pointer changes shape to indicate that a single cell or header is
selected, release the mouse button.
If the cell is not empty, the dropped icon replaces the current contents of the cell or header location.
An Icon control can be placed in harness header.
2. Complete the
Cell Properties panel — Top fields
Click the magnifying glass icon () to open the Cell Properties panel.
Complete the top fields that appear.
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 |
![]() |
(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 |
![]() ![]() ![]() Customizing the controlThe Icon's default parameters represent the basic configuration. However, you will need to specify the binary file used for the icon and the action or actions that will execute when the user clicks or hovers the mouse pointer over the icon. For example, you can configure the control to refresh a section or display a new harness. In addition, you may want to:
|
Process Commander provides standard variations of pxIcon. Each is preconfigured with an icon, tooltip, and action. It is suggested that you 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 define the control's look and behavior.
This table below describes the icon name, the icon, the action invoked when clicked, and the standard icon control rule, which contains the control's parameters.
Icon Name |
Icon and Action |
Control Rule |
Add Item
|
|
pxIconAddItem |
Add New Work
|
|
pxIconAddNewWork |
Attachments
|
|
pxIconAttachments |
Blank
|
|
pxIcon |
Cancel
|
|
pxIconCancel |
Contents
|
|
pxIconContents |
Delete Item
|
|
pxIconDeleteItem |
Enable Action Section
|
|
pxEnableActionSection |
Expand/Collapse
|
|
pxIconExpandCollapse |
Explore
|
|
pxIconExplore |
Finish Assignment
|
|
pxIconFinishAssigment |
Get Next Work
|
|
pxIconGetNextWork |
History
|
|
pxIconHistory |
Print
|
|
pxIconPrint |
Reopen Work Item
|
|
pxIconReopenWorkItem |
Review
|
|
pxIconReview |
Save
|
|
pxIconSave |
Show Flow Location
|
|
pxIconShowFlowLocation |
Show Reopen Screen
|
|
pxIconShowReopenScreen |
Spell Checker
|
|
pxIconSpellChecker |
Update
|
|
pxIconUpdate |
3. Complete the
Cell Properties panel — General tab
Complete the General tab.
Field |
Description |
Visible | Select to determine when the icon appears. (If this
setting is not applicable, the cell contents are blank.)
|
Condition |
![]() 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:
An icon that is not visible is also disabled and cannot be clicked. |
Run on Client? | Appears if the Condition field contains a simple Java
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. |
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 |
![]() 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 Click the pencil icon ( |
Read-Only Style |
The SmartPrompt list shows all styles that start with the
word Click the pencil icon ( |
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 EditorYou 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 icon displays in the row only when the user selects it. |
Copying,
deleting, duplicating, or moving an icon