Appendix: Replacing SmartNavigation Images

This appendix presents an overview of SmartNavigation icons and discusses how to:

• Create replacement images.

• Define new style classes.

• Modify folder settings.

• Write PeopleCode.

Understanding SmartNavigation Icons

SmartNavigation folder and content reference icons appear next to each folder and menu item element in the SmartNavigation menu hierarchy. The application generates the icons for the folders and menu items by using:

• Image definitions.

• Style sheet definitions.

• PeopleCode function calls.

Image Definitions

SmartNavigation folders and content references use these images by default:

Note these points about the images and style sheets:

• The dimensions of the images must be 14 pixels by 14 pixels.

• You must use PeopleSoft Application Designer to save the images in the portal site.

• You must include a style class for each image—a folder image and a content reference image—in a free form style sheet.

• You must use PeopleSoft Application Designer to save the style sheet in the portal site.

Sample Style Sheet Code

Each style class defines the background style and specifies the image identifier.

.fldrdynimage {
background: transparent url(%Image(Folder_Image_ID)) ⇒
no-repeat center center;
}

.crefdynimage {
background: transparent url(%Image(Cref_Image_ID)) ⇒
no-repeat center center;
}

Note. You do not have to use the same class names that you see in the sample code.

Creating Replacement Images

To create replacement images:

1. Use the graphic application of your choice to create the replacement images.

2. Open PeopleSoft Application Designer in the portal site database and create an image definition for each of the images .

   See Creating Image Definitions.

3. Save each image definition.

4. Make note of the image name. You must reference the image name, or image ID, in the style sheet.

Defining New Style Classes

To define new style classes:

1. Open PeopleSoft Application Designer in the portal site database and create a free form style sheet definition.

   See Free Form Sub Style Sheet.

2. Enter text to create the style sheet. Use the format that you see here:

   .fldrdynimage {
   background: transparent url(%Image(Folder_Image_ID)) ⇒
   no-repeat center center;
   }
   
   .crefdynimage {
   background: transparent url(%Image(Cref_Image_ID)) ⇒
   no-repeat center center;
   }
   

   Note. You must reference the images you created in PeopleSoft Application Designer.

3. Save the style sheet.

Modifying Folder Settings

To modify folder settings:

1. Access the Folder Administration page (Select PeopleTools, Portal, Structure and Content. Click the SmartNavigation folder that you want to change).

2. In the Style Sheet field, enter the name of the style sheet that you created in the previous step.

3. Save the page.

Writing PeopleCode

The code that you write depends upon the data source. This section discusses the PeopleCode for:

• Rowset data sources.

• Tree data sources.

Rowset Data Source

When you use a rowset as the SmartNavigation folder data source, use the following function call in the PeopleCode program to generate folder and content reference icons in the menu:

LoadABN(&rs_DataSource, &rs_ChartRowset, &rs_RelatedActions, GetABNNode(&reqParams), ⇒
GetABNInitialNode(&reqParams), "fldrdynimage", "crefdynimage");

This table describes the function parameters:

The class id parameters are optional. If you want to use the default icons, make one of the two following calls:

LoadABN(&rs_DataSource, &rs_ChartRowset, &rs_RelatedActions, ⇒
GetABNNode(&reqParams), GetABNInitialNode(&reqParams), "", "");
                
LoadABN(&rs_DataSource, &rs_ChartRowset, &rs_RelatedActions, ⇒
GetABNNode(&reqParams), GetABNInitialNode(&reqParams)); 

See Also

LoadABN

GetABNNode

GetABNInitialNode

Tree Data Source

When you use a tree as the SmartNavigation folder data source and you also use PeopleCode, you use function calls in the program to generate:

• Images for tree nodes (folders).

• Images for tree leaves (content references).

Images for Tree Nodes

When you generate the menu item of a tree node, you must pass both the folder image class name and the content reference image class name because a tree node without children appears as a content reference. Use the following function calls in the PeopleCode program to generate folder icons in the menu and create the HTML fragment that the portal consumes that creates the drop-down menu items:

&ChildNode.GenABNMenuElementWithImage(GetABNInitialNode(&reqParams), ⇒
"fldrdynimage", "crefdynimage");
GenHTMLMenu(&szLI, "folderdynimage");

This table describes the function parameters:

Images for Tree Leaves

When you generate the menu item of a tree leaf, you pass the content reference image class name. Use the following function calls in the PeopleCode program to generate content reference icons in the menu and create the HTML fragment that the portal consumes that creates the drop-down menu items:

&ChildLeaf.GenABNMenuElementWithImage("crefdynimage");
GenHTMLMenu(&szLI, "crefdynimage");

This table describes the function parameters:

Default Images

If you want the default icons to appear, make the following calls in the PeopleCode program to generate folders and content references in the menu and create the HTML fragment that the portal consumes that creates the drop-down menu items:

&ChildNode.GenABNMenuElementWithImage(GetABNInitialNode(&reqParams), "", "");
                
&ChildLeaf.GenABNMenuElementWithImage("");
                
GenHTMLMenu(&szLI, "");
                
GenHTMLMenu(&szLI);

You must pass an empty string as the parameter for both the folder image class name and the content reference image class name.

Note. You must pass parameter values for the class name into the Tree API methods because the Tree API is a psoftapi object; psoftapi object methods do not allow optional parameters.

The class name parameter is optional in the GenHTMLMenu function. If you want the default icons to appear, make one of the two following function calls:

• GenHTMLMenu(&szLI, "")

• GenHTMLMenu(&szLI);

Oracle recommends that you use the first function call in the previous list because it offers more flexibility in the event that additional parameters are added to the GenHTMLMenu function.

Note. If you use a tree as the datasource without PeopleCode, the default images always appear as the folder and content reference elements in the menu.

See Also

GenHTMLMenu