PeopleTools 8.51 PeopleBook: PeopleSoft Application Designer Developer's Guide

Appendix: Using Images in PeopleSoft Applications

This chapter provides an overview of the five image-related features of PeopleSoft Application Designer and discusses how to:

Use PeopleTools image definitions.
Generate a list of images in the image catalog.
View all images in the image catalog.

Understanding Image-Related Elements

You find images throughout PeopleSoft applications. Images serve many purposes such as identifying an employee or indicating to a user their current step in a series of steps in a process. PeopleSoft Application Designer offers several image-related elements, each of which you use depending on the purpose of the image. The following table describes the usage of each image-related element and provides an example of it:

Image-Related Feature	Usage	Example
Image field	Use to create a field in a database table that stores images in a user-defined format, such as portable network graphic (PNG) or bitmap (BMP). Like all fields, you place image fields in record definitions.	The EMPLOYEE_PHOTO field is an image field in the EMPLOYEE_PHOTO record definition.
ImageReference field	Use to create a field in a derive/work table that temporarily holds an image that can change programmatically at runtime using PeopleCode. Like all fields, you place image fields in record definitions.	The LOGO field is an image reference field that appears in the TE_HTL_LIST derived work record definition.
Image definition	Use to store an image file as a PeopleTools-managed item in the image catalog.	For example, the spinning image that appears when the system processes user information is the PT_PROCESSING image definition
Image control	Use to display image data that is stored in image fields in the database.	For example, an image control appears on the EMPLOYEE_PHOTO page; this control references the EMPLOYEE_PHOTO record field.
Static image control	Use to display a static image that is stored in the image catalog.	For example, a static image control appears on the COMPANY_CAR page; this control references the CAR_STOCK image in the image catalog.

Using PeopleTools Image Definitions

All PeopleSoft applications include a common set of PeopleTools images that in the image catalog. If you use PeopleTools images when developing your own applications, you should use each image in a way that is consistent with its use in PeopleSoft applications.

Important! Do not change PeopleTools image definitions. If you want to change a PeopleTools image definition, copy it and then modify the copy.

The following list contains many common PeopleTools images and their standard usage; the list is not exhaustive. The images are categorized by function and listed alphabetically by image name.

General Images

	PT_ABORT: Abort a transaction. Used in some PeopleCode message boxes.
	PT_APPLY: Apply changes that were made to the database. Usually found when transferring to another page through PeopleCode.
	PT_CALENDAR: Open the calendar prompt.
	PT_COPYURL: Used in the pagebar. Copy contents of address bar to the clipboard.
	PT_IGNORE: Used in some PeopleCode message boxes.
	PT_NO: Used in some PeopleCode message boxes.
	PT_OK: Accept the input on a secondary page and return to the main page.
	PT_POPUP: Open a pop-up menu from which the user can select a page to which to transfer.
	PT_POPUP_SKIP: Use if a pop-up menu has only one menu item to select from; bring the user directly to a page.
	PT_PRINT: Open the print dialog box for the designated item.
	PT_PROCESSING: Appears as animated image while accessing a server or database.
	PT_PROMPT_LOOKUP: Lookup button for a field prompt table.
	PT_SPELLCHECK: Opens the spell check page for the current field.
	PT_REPORT_DIST_ICN: Usually found on the Process Scheduler Request page, this button takes you to the Distribution Detail page. Use to select roles and users who can access or receive an email of report output.
	PT_SEC_RETURN: Return from a secondary page to the main (calling) page.
	PT_WF_ACTIVITY: Used for a subprocess of the business task for workflow, consisting of one or more steps.
	PT_WF_BUSPROC: Depict a complete business task for workflow.
	PT_WF_STEP: Show a discrete step in the business process that corresponds to a single transaction that is performed on an application page or through an external program.

Scroll or Grid Action Images

Use these images when creating scroll areas, scroll bars, and grids.

	PT_ADD: Add a row button.
	PT_ADD_LARGE: Add a large row button. Alternative to PT_ADD if the page has enough room.
	PT_DELETE: Delete a row button.
	PT_DELETE_LARGE: Delete a large row button. Alternative to PT_DELETE if the page has enough room.
	PT_GRID_NO_TABS: Expand grid button. Expand grid columns horizontally so that grid tabs no longer show.
	PT_GRID_SHOW_TABS: Tabbed grid button. Collapse grid columns horizontally so that grid tabs show.
	PT_NEXTROW: View the next row button.
	PT_PREVIOUSROW: View the previous row button.

Tab Images

Use these images to change the look of both folder and grid tabs.

	PT_TAB_LSCROLL: Scroll left to the previous tab in a page or grid.
	PT_TAB_RSCROLL: Scroll right to the next tab in a page or grid.
	PT_TABxxx through PT_TABxxxxxxxx: Selection of more than 80 images you can use to create folder tabs.

Lookup and Search Page Images

Use these images on lookup and search pages.

	PT_CANCEL: Cancel a lookup page.
	PT_CLEAR: Clear search criteria from the page (appears only on an Advanced Search/Lookup page).
	PT_LOOKUP: Begin looking up data.
	PT_SEARCH: Start a search on the search page.

Query Images

	PT_QUERY_ADD_CRITERIA: Add criteria to a query.
	PT_QUERY_KEY: Denotes a query key field.
	PT_QUERY_SORT: Sort query fields alphabetically.

Tree Images

Use these tree images with PeopleSoft Tree Manager.

Tree node and leaf images include:

	PSTREEMGR_COL_BRANCH: Identifies the root node for a branch.
	PSTREEMGR_COL_NODE: Standard node image.
	PSTREEMGR_COL_SKNODE: Tree node that has skipped a level.
	PSTREEMGR_END_NODE: Tree node that has no children; that is, a terminal node.
	PSTREEMGR_EXP_BRANCH: Root node on a branched tree.
	PSTREEMGR_EXP_NODE: Expanded node.
	PSTREEMGR_EXP_SKNODE: Expanded node that has skipped a level.
	PSTREEMGR_LEAF: Lowest-level detail value of a tree.

Node and leaf command button images include:

	PTTREE_ADDCHILD: Add a new child node.
	PTTREE_ADDLEAF: Add a new detail value, such as a leaf.
	PTTREE_ADDSIB: Add a new node as a sibling to the selected node.
	PTTREE_CUT: Cut a node or leaf and place it on the clipboard.
	PTTREE_DELETELEAF: Delete a leaf.
	PTTREE_DELETENODE: Delete a node.
	PTTREE_DISP_AS_ROOT: Redisplay the tree, starting with the currently selected node being displayed as the root node.
	PTTREE_EDITDATA: Display the underlying user data page.
	PTTREE_MAKEBRANCH: Create a new tree branch, starting with the selected node.
	PTTREE_PASTECHILD: Paste the node on the clipboard as a child of the currently selected node.
	PTTREE_PASTESIB: Paste the node on the clipboard as a sibling of the currently selected node.
	PTTREE_UNBRANCH: Unbranch a branch.
	PTTREE_UPDATELEAF: Update the values and properties for a leaf.
	PTTREE_UPDATENODE: Update the value or properties for a node.

Portal Images

Use these images to perform a specific action. Additional portal images, such as PT_PORTAL_HEADER_BG, are purely aesthetic. In general, all images that are reserved for the portal contain the word PORTAL in the image name, such as PT_PORTAL_SEPARATOR.

	PT_PORTAL_DOWN_ARROW_Y: Move a pagelet down when personalizing a portal layout.
	PT_PORTAL_IC_CLOSE: Remove a pagelet from a homepage.

Toolbar Button Images

Toolbar buttons are HTML buttons, not images. HTML defines the buttons and the text on the buttons. To modify toolbar buttons, use a style class.

See Setting Style Class Attributes.

Note. Icons that appear on toolbar buttons are images.

Generating a List of Images in the Image Catalog

To generate a list of images in the image catalog, you can:

In PeopleSoft Application Designer, select File, Open, Image and click the Open button.
In the query tool for your database platform, enter and run this SQL statement to list all image definitions:
```
SELECT DISTINCT CONTNAME FROM PSCONTDEFN WHERE CONTTYPE = 1. 
```
In the query tool for your database platform, enter and run this SQL statement to the language-dependent versions of images, :
```
SELECT CONTNAME, LANGUAGE_CD, CONTTYPE CONTFMT DESCR FROM
PSCONTDEFNLANG WHERE CONTTYPE = 1
```
Note. Before signing into PeopleSoft Application Designer in a different language, you must enable the language support. Use PeopleTools Utilities to enable support.
Create a query definition in PSQuery that uses the PSCONTDEFN record, the CONTNAME field from that record, and select for images where the CONTTYPE = 1 only.

Viewing All Images in the Image Catalog

You might want to see the images that exist in the image catalog. PeopleSoft Application Designer enables you to see some of the image definitions. However, you have to open each image definition. You can view all images online by creating a custom component. The elements of the component should include:

A record definition that contains one long character field.
A page definition that contains an HTML area you associate to the record field.
A SQL definition that retrieves the names of all image definitions in the image catalog.
A PeopleCode program that generates text in HTML format.

The program should generate the HTML by looping through and enclosing each image definition name in the appropriate HTML and metaHTML tags. The program can also add the image name and a line break so that the page is crisper. The program must concatenate the lines together to form the HTML as a string. Each line of HTML should look similar to this line:
```
|"<img src='%Image("|&ImageDefinitionName|")'/>"|&ImageDefinitionName|"<BR />"
```
Finally, the program must assign the string output to the HTML record field that you associated to the HTML area.

After you create the component, you must register it and grant the appropriate permissions. Then you can access the page and view the images.