Creating Image Definitions

This chapter provides an overview of images and discusses how to:

Create new image definitions.
Open an image definition.
Update an image definition.
Convert images.
Consolidate images.
Use the catalog of image definitions.

Understanding Images

Images improve the look and usability for the user. PeopleSoft Internet Architecture comes equipped with several different types of image-related features, each of which serves a different function. The following table provides a brief description of each image type:

Image Type	Description
Image field	Use for storing images in a user-defined format, such as bitmap (BMP) or PostScript (EPS). Image fields cannot be changed at runtime.
ImageReference field	Use to change an image dynamically at runtime by using PeopleCode.
Image definition	Use as the source from which all static images and image fields are taken and used elsewhere in the system.
Image control	Place on a page when you want a variable image that is taken from a record field in the database.
Static image control	Use to place a static image definition on the page, such as on a push button.

Creating New Image Definitions

This section provides an overview of image definitions and discusses how to:

Create an image definition.
Set image properties.
Import and create alternate image types.

Understanding Image Definitions

Image definitions are managed PeopleSoft definitions that you can associate with a variety of page controls. They are primarily for aesthetic purposes, but can also demonstrate a simple function, such as an arrow on a push button. Many organizations store images along with the rest of their employee, customer, and supplier data as part of their ongoing business operations. For example:

Retailers often store images of each product with the standard merchandise information that they use to manage inventory.

Online retailers can display product pictures on their customer web sites.
Many organizations store images of each employee as part of their standard human resources information.
Consumer banks might store images of their customers’ canceled checks.

PeopleSoft Application Designer enables you to create an image definition from any type of image file and store it in a central PeopleTools image catalog. In this process, you convert the image files into image definitions and store them in the image catalog so that you can refer to them from a PeopleTools application. After you create the image definition, it is available for use throughout the system, such as in a static image page control or on a push button or link.

Image Types

When creating new image definitions to use with applications, you might want to use different image types for different purposes. Some developers believe, for example, that JPG is the best format for photographic images because it provides the greatest compression of any bitmap format in common use. However, some believe that JPG is not as effective in compressing text and drawings as it is at compressing photographs. GIF images, on the other hand, seem to be the most widely used format for image storage and continue to be the preferred format for storing text and drawings. Regardless of your image type preferences, PeopleSoft enables you to store all image types in the image catalog.

However, two image types (GIF and WBMP) cannot be viewed in PeopleSoft Application Designer during design time, but they can be viewed through the browser at runtime. By providing an alternate image type of the image, such as JPG, PeopleSoft enables you to import images for viewing purposes only in PeopleSoft Application Designer. The image that you view at runtime in the browser or in the wireless application is still the original GIF or WBMP image.

Creating an Image Definition

To create an image definition from an image file:

Select File, New.
Select Image.
Click OK to access the Open Image File dialog box.
Select an image file type.

You can select from several file types, such as BMP, wireless bitmap (WBMP), device independent bitmap (DIB), Graphics Interchange Format (GIF), and Joint Photographic Experts Group (JPEG). You can create an image definition by using any file type. GIF and WBMP images are considered alternate image types.

See Importing and Creating Alternate Image Types.

Note. Some browsers do not support all image types. For example, Netscape does not support BMP images.

See Customer Connection, "Troubleshooting Browser Limitations."
Select an image file name.

PeopleSoft Application Designer displays a warning message if the image size is greater than 32 kilobytes. The maximum image size depends on the database platform that you are using. Some database platforms support much larger image sizes while others limit the size.
Select Open.

The image is now open as an image definition in the definition workspace.
Select File, Save to save the image definition in the PeopleSoft image repository.

Upon saving, the Image Properties dialog box appears.

Setting Image Properties

After you create a new image definition, you can set the image properties.

To set image properties:

Access the Image Properties dialog box.

If not already open, select File, Definition Properties.
(Optional) Enter a description on the General tab.

Select the Use tab to view image use properties.

Image Format

Specify the main and alternate image formats. The main image format, which appears at runtime, is the format in which the image was imported, such as BMP. The alternate format is the optional image format that you can specify if you want a GIF image as the main image format that appears at runtime.

Image URL (image uniform resource locator)

Specify a reference to an image on a web server. This can be used as an alternative to storing an image definition in the database once an image definition is saved. When the user opens a page containing a control that is associated with this image definition, the application retrieves the image from the URL, rather than from the database. Set up URLs in the URL Maintenance utility.

See URL Maintenance.

Used in Workflow Maps

Select to filter images that appear in a list box for the Change Icon function for PeopleSoft Workflow designers.

Importing and Creating Alternate Image Types

To import a GIF or WBMP image type:

Select File, New.
Select Image.

The Open Image File dialog box appears.
Select GIF or WBMP from the Files of Type drop-down list box.
Locate the image that you want to import.
Click the Open button.

The Content Repository Interface dialog box appears, prompting you to select an alternate image.
Select Yes.

The Open Alternate Image File dialog box appears, prompting you to select an alternate image type. You must have the same image stored in the directory under a different file type, such as JPG, to view the image in PeopleSoft Application Designer. If you select No, you can still open the GIF or WBMP image definition, but you cannot see it. Instead, you receive a message that the image cannot be viewed in PeopleSoft Application Designer.
Select the alternate image format and the appropriate file.
Click Open.

You cannot select a GIF image as an alternate image type for WBMP images, nor can you select a WBMP image as an alternate image type for a GIF image.
Select File, Save As.

Upon saving, the Image Properties dialog box appears. If you select the Use tab, the Image Format group box shows the main image format as GIF (or WBMP) and the alternate as JPG. Now you can view the image in PeopleSoft Application Designer as a JPG image and still display the image at runtime as GIF (or WBMP).

Opening an Image Definition

To open an image definition:

Select File, Open.
Select Image from the Definition drop-down list box.
Click Open to view the full list of image definitions and brief descriptions.

Updating an Image Definition

This section discusses how to:

Update an image definition.
Change the image display size.
Specify the image storage format.

Updating an Image Definition

Occasionally, the original image file from which you created an image definition might change. To keep the image definitions current, you might want to update them rather than create entirely new image definitions.

To update an image definition:

To change the image for a saved image definition, right-click the open definition and select Update Image.

The Open Image File dialog box appears, in which you can select the changed image file to replace the open image definition.
Click Open.

This replaces the previous image in the image definition with the new image that you selected.
Select File, Save to save the current image definition with the new image.

Changing the Image Display Size

If the image file is smaller than you want it to appear in the open image definition, you can increase the size by zooming in on the definition workspace. This does not alter the size of the image in the image catalog.

To change image definition display size:

Open the image.
Right-click the image and select Zoom to see the different size ratios.
Select a new image display percentage.

The image automatically changes to that selection.

Specifying the Image Storage Format

You can specify a default format in which image definitions are stored. For example, if JPG is specified as the preferred storage format, then a BMP image is stored as a JPG after it is converted to an image definition.

To specify an image definition storage format:

Select Tools, Options to open the Options dialog box.

Select the Image tab.

No conversion	Select to import all image definitions in their original formats. This is the default.
DIB and JPG	Select to convert and store imported image definitions as either DIB or JPG in the PeopleSoft Application Designer image catalog. GIF and WBMP images cannot be converted to DIB or JPG.

Click OK.

Converting Images

Not all browsers support all image formats, but most browsers support the JPG image type. Therefore, PeopleSoft has a utility to convert all application images to JPG.

To convert images to JPG format:

Select Tools, Upgrade, Convert Images.

Select one of these check boxes:

Convert Static Images in Image Catalog	Converts all image definitions that are stored in the image catalog of the PeopleSoft database.
Convert Dynamic Images for fields	Converts all images that are dynamically referenced by PeopleCode to appear in image fields.

Select the fields to convert.
Click the Start button.

When the process is complete, a confirmation message appears in the Image tab of the output window.

Consolidating Images

Use this tool if you create custom image definitions and use them in multiple record definitions. Consolidating images helps you avoid having the same image stored in several places. All image definitions that are packaged with the PeopleSoft system have already been consolidated.

To consolidate custom image definitions:

Open an existing image definition in the definition workspace.
Select Tools, Consolidate Images.
Select a target image from the list.
Click Find to gather all of the consolidated image candidates.
Select all of the images.
Click Consolidate.

The selected image definitions are removed from the Images to be consolidated list box and consolidated into the target image.
Click Close.

Using the Catalog of Image Definitions

In addition to the image definitions that you create, the system comes with many predefined image definitions. You can use these images to identify an action that a user must perform on a page or for aesthetic purposes only. For example, you can access an image either by inserting it onto a page as a static image or by specifying it as a label on a push button to accompany a specific function.

The following tables list some of the common image definitions in the image catalog that are used by PeopleTools in the deployment of internet applications. PeopleSoft does not recommend changing any of these images. You can also use Structured Query Language (SQL) to view a full list of different images:

SELECT DISTINCT CONTNAME FROM PSCONTDEFN WHERE CONTTYPE = 1.

For a list of language-dependent versions of images, use the following SQL:

SELECT CONTNAME, LANGUAGE_CD, CONTTYPE CONTFMT DESCR FROM 
PSCONTDEFNLANG WHERE CONTTYPE = 1

Note. Before logging into PeopleSoft Application Designer in a different language, the language support must first be enabled. Use PeopleTools Utilities to enable support.

In general:

All PeopleTools image definitions start with PT_.
Any image definition with _D at the end of the name is the disabled mode of the image.
All images that start with PT_TAB are used for tab construction and colors.

It is important to use these images consistently as you create new pages and update pages in the applications. The images are categorized by function and listed alphabetically by image name.

Note. This list contains a sample of the common images in PeopleSoft Application Designer, but it is not a complete list of PeopleTools images. For a complete list of images, select File, Open, Image. Click Open to see the full list of images.

Toolbar

In previous releases, the entire toolbar button (Save, Next in List, and so on) was an image, including the text in the button. Currently, the button is an HTML button and the text is specified in HTML, only the icon is an image. This enables you to change the color of the button using a style class. Toolbar buttons are rendered as HTML buttons, not images.

Scroll or Grid Actions

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

	PT_ADD: Add a row.
	PT_ADD_LARGE: Large add a row button. Alternative to PT_ADD if there is enough room on the page.
	PT_DELETE: Delete a row.
	PT_DELETE_LARGE: Large delete a row button. Alternative to PT_DELETE if there is enough room on the page.
	PT_GRID_NO_TABS: Expand grid columns horizontally so that grid tabs are no longer showing.
	PT_GRID_SHOW_TABS: Return an expanded grid to a tabbed grid.
	PT_NEXTROW: View the next row.
	PT_PREVIOUSROW: View the previous row.

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 over 80 images that can be used for creating folder tabs.

Look-up and Search Page Images

Use these images on look-up and search pages.

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

General

	PT_ABORT: Abort a transaction. Used in some PeopleCode message boxes.
	PT_APPLY: Applies changes that were made to the database. Usually found when transferring to another page through PeopleCode.
	PT_CALENDAR: Opens the calendar prompt.
	PT_COPYURL: Used in the pagebar. Copies 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: Opens a pop-up menu from which the user can select a page to transfer to.
	PT_POPUP_SKIP: Use if a pop-up menu has only one menu item to select from, so the user is brought directly to the page.
	PT_PRINT: Open the print dialog box for the designated item.
	PT_PROCESSING: Appears as flashing text while accessing a server or database.
	PT_PROMPT_LOOKUP: Look-up 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, corresponding to a single transaction that is performed on an application page or through an external program.

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 the portal layout.
	PT_PORTAL_IC_CLOSE: Remove a pagelet from the homepage.