Section, Harness, and Flow Action forms -
|
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.
Field |
Description |
Icon Source | Select one of the following as the source for the icon/image:
|
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:
|
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:
|
Each of the following is configured with a default icon, tooltip, and action, eliminating the need to configure these values.
|
|
Configure the control
Field |
Description |
||||
Icon Source | Select one of the following as the source for the icon/image:
|
||||
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:
|
||||
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:
|
||||
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. |
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.)
|
Condition |
If you selected Other Condition for the Visible field, complete this field.
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 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 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 The SmartPrompt list shows all styles that start with the word 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. |
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.
Icon Name |
Icon and Action |
Control Rule |
Add Item
|
— Adds (above or below) a row to a grid, tree, or tree grid layout |
pxIconAddItem |
Add New Work
|
— Adds a new work item using the primary page data. Saves the new work item on the deferred list. |
pxIconAddNewWork |
Attachments
|
— 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. |
pxIconAttachments |
Blank
|
— No action is associated with it. |
pxIcon |
Cancel
|
— Closes the current form without applying any changes. |
pxIconCancel |
Contents
|
— 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. |
pxIconContents |
Delete Item
|
— Removes a row in a grid, tree, or tree grid layout. |
pxIconDeleteItem |
Enable Action Section
|
— Presents the user form in review-only mode; inputs allowed in the action section only. |
pxEnableActionSection |
Expand/Collapse
|
— Redraw the form with all areas fully expanded. |
pxIconExpandCollapse |
Explore
|
— For a folder work item, changes the form to allow users to view and navigate among the associated work items. |
pxIconExplore |
Finish Assignment
|
— Submits changes and marks this assignment as complete. |
pxIconFinishAssigment |
Get Next Work
|
— Cancels any unsubmitted changes and finds the most important assignment to work on next. |
pxIconGetNextWork |
History
|
— Displays the work item history, for users who hold the Work-.AccessAuditTrail privilege. |
pxIconHistory |
Print
|
— Starts browser-based printing, which prints the current user form as displayed. This printout may not include desired fields and may use colors, fonts, and labels that are not desired in hard copy prints. |
pxIconPrint |
Reopen Work Item
|
— Reopens a resolved work item, for users who hold the Work-.Reopen privilege. Runs the standard activity Work-.Reopen or your application override. |
pxIconReopenWorkItem |
Review
|
— Presents the user form in review-only mode, allowing no updates. |
pxIconReview |
Save
|
— Saves the work item with Submit. |
pxIconSave |
Show Flow Location
|
— 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 |
pxIconShowFlowLocation |
Show Reopen Screen
|
— 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. |
pxIconShowReopenScreen |
Spell Checker
|
— Enables spell-checking. See How to enable spellchecking in user forms. |
pxIconSpellChecker |
Update
|
— 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. |
pxIconUpdate |
Copying, deleting, duplicating, or moving an icon
Use these Windows operations to speed development: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:
SHIFT
key, select the cell, drag and drop it in another cell, in the same one layout or another layout.