Understanding Pagelets

This section discusses:

  • Pagelets.

  • Pagelet development.

  • Pagelet extensions.

  • Pagelet personalizations.

This document provides a practical guide for technical users and programmers who develop pagelets (or portlets) for operation within a PeopleSoft portal. To take full advantage of the information covered in this document, Oracle recommends that you have a basic understanding of the PeopleSoft Pure Internet Architecture and portal technology. Extensive information can be found in the PeopleBooks documentation. Many of the fundamental concepts related to the portal are also discussed in the following PeopleTools document: PeopleTools: System and Server Administration.

Pagelets are small pages that provide display-only snapshots of useful and relevant content from PeopleSoft or non-PeopleSoft applications or websites. In other portal products, pagelets are sometimes referred to as portlets, gadgets, widgets, or modules.

Homepage pagelets are designed to appear on tabbed homepages or dashboard pages. Homepage pagelets typically present general, high-level information; however, many are designed to provide the user with easy access to more detailed information either in another pagelet on the homepage or a target transaction page. Users can select the homepage pagelets that appear on his or her homepages by way of the Personalize Content link that is in the upper left corner of the homepage.

Template pagelets are small, narrow-format pagelets that are designed to appear in a template iframe, much like the Menu pagelet. Usually, you incorporate template pagelets into a portal template when you create and configure the template. You also use template pagelets when you configure the task panel of WorkCenter pages or context-sensitive pagelets that use Context Manager. You should design template pagelets so that they display data that is related in some way to the target transaction.

Pagelets follow a basic set of rules so that they can be displayed properly on PeopleTools portal homepages, dashboard pages, related content frames, or in the pagelet area of WorkCenter pages. Homepage pagelet size should correspond to the homepage layout specified by the user. A user can specify either a two-column layout of one narrow pagelet and one wide pagelet, or a three-column layout of three narrow pagelets.

Template pagelets should use the narrow column format of a pagelet. Banner pagelets span the width of the homepage or dashboard page. Any pagelet that you design must conform to the dimensions of the narrow column and optionally, of the wide column. Column width is the only restriction on pagelet dimensions, although design principles suggest keeping pagelets as compact as possible.

The homepage pagelets that appear on the portal homepage depend on several factors, including the type of portal that you implement, the permissions that you grant to the user, and the manner in which the user personalizes his or her homepage.

PeopleSoft pagelets are URL-accessible HTML documents that are designed to be size-appropriate for display on a homepage. Pagelets can also originate from remote, non-PeopleSoft systems such as static HTML files or HTML that is generated dynamically from a variety of technologies.

You can use PeopleTools to develop pagelets as smaller-than-normal pages, just as you would any other PeopleSoft transaction page. PeopleSoft portals are delivered with a suite of pagelets, primarily built using PeopleTools technology. However, you can also base the design of a pagelet on PeopleCode internet scripts (iScripts). Use iScripts only when you can't accomplish the same task with a PeopleSoft transaction page, for example, if you are developing a pagelet that uses external content (content that does not originate in a PeopleSoft application). You can also create pagelets using other leading web-enabling technology such as JavaServer pages (JSP), Java servlets, Microsoft Active Server Pages (ASP), Perl scripts, and common gateway interface (CGI) programs.

A well-designed and well-developed pagelet serves these primary functions:

  • Summarizes data that is relevant, personalized, and actionable. Page space is valuable; pagelets must be more than attractive.

  • Provides links to more detailed information, such as content in another application.

In addition, pagelets should also:

  • Aggregate data from multiple sources.

  • Be simple and intuitive.

  • Be sized appropriately.

    The size of pagelets corresponds to the homepage layout that a user chooses. Any pagelet that you design must first conform to the dimensions of the narrow column and optionally, of the wide column. Pagelet width is the only dimension to which you must adhere. The height of pagelets can vary; however, good design principles suggest keeping them as short as possible.

  • Avoid the use of scrollable grids.

    Grids that you insert on pagelets are nonscrollable by default. If the grid appears on a pagelet and on a standard transaction page, Oracle recommends that you use the nonscrollable grid to ensure consistent user experiences.

Pagelet Header Icons

The icons that you see in the pagelet header function similarly across most pagelet types. You do not have to use all header icons on all pagelets. You can vary the icons that appear in the header based on business rules or technical constraints.

This table lists and describes the icons that you can use in pagelet headers.

Field or Control


Expand buttonExpand

Click to show the content of the pagelet so that more than just the pagelet header is visible. When you click this icon, in its place you will see the Hide icon.

Help buttonHelp

Click to view pagelet help. When you click this icon, any documentation that you configure appears. Not all pagelets provide documentation.

Personalize buttonPersonalize

Click to personalize the pagelet. When you click this icon, a page appears so that you can change any pagelet settings that you are allowed to configure. The options that you can personalize vary among users and pagelets, and not all pagelets have options that you can personalize.

Minimize buttonMinimize

Click to hide the body of the pagelet so that only the header is visible. When you click this icon, in its place you will see the Show icon.

Refresh buttonRefresh

Click to force an application server trip so that the pagelet data and settings are current.

Remove buttonRemove

Click to remove the pagelet from the page. You will be prompted to confirm the action and must accept or dismiss the confirmation.

Pagelet Example

Image: Tasks pagelet

The following screenshot demonstrates many characteristics of a well-designed pagelet and the pagelet header icons in the Tasks pagelet.


Some pagelets use pagelet extensions, which are the supporting or supplementary components for a pagelet. They are not displayed on your homepage; you access pagelet extensions by associating them with links and buttons on pagelets. Pagelet extensions are optional. They are a means of providing additional information or editing capability that is too cumbersome to display on the pagelet.

You could configure a homepage pagelet so that each item is a link to the worklist item in another database, or to the personal task defined in the portal, or to a variety of resources.

Image: Tasks pagelet

The Tasks pagelet is a homepage pagelet that is designed to display a short list of relevant tasks. If dozens of tasks were open, which is likely over time, the pagelet would grow to be too long and possibly crowd out relevant, actionable data on other pagelets.

The following screenshot illustrates that the tasks pagelet is configured with active links and buttons that access pagelet extensions, which enhance the functionality of the pagelet.


Here you see two extension pages that you access from the Tasks pagelet:

  • The Task Details page.

    Image: Task Details extension page

    Click a link for a task name to access the Task Details page, which you use to view or modify personal task information. The Task Details page enhances the pagelet by showing more detail and enabling you to perform further actions, such as attaching a file or deleting the task.

  • The Tasks page.

    Image: Tasks page

    Click the Show All/Enhanced link to access the Tasks page, which provides the user with more options such as the ability to display all or certain types of tasks. Because it is a standard page, the extension page can use a grid to retrieve and display a longer list of tasks. In addition, the extension page is also better suited to display more details because it is wider than the pagelet and can show more columns

    The following screenshot displays more details with more columns.


Like homepages, pagelets can be personalized in different ways. The data displayed can be filtered automatically to show only data that is relevant to a particular user. The user can also explicitly personalize the data shown by setting options on a personalization page.

Personalization pages are another type of pagelet extension. However, personalization page pagelet extensions are different from previously discussed pagelet extensions in the following ways:

  • You do not click a button or link on the pagelet to access personalization pages. Instead, clicking the Personalize icon on the pagelet header accesses a personalization page where you can define user options that are specific to that pagelet.

  • Setting values on the personalization page will change the way data appears on the pagelet for the user. Detail pages usually display data in read-only mode or allow you to change application data.

Note: Any text that the pagelet developer enters during Step 3 in Pagelet Wizard appears as instructions on the Personalize page.

Image: Pagelet personalization example - Personalize Tasks page

The following screenshot illustrates to specify default values to be able to personalize a Pagelet..


Image: Tasks pagelet after making personalizations

You can use the Personalize Tasks personalization page for the Tasks pagelet to change the type and number of tasks shown on the pagelet. Clicking Save stores these values and returns you to the homepage. The Tasks pagelet now reflects these changes.

The following screenshot illustrates about changing type and number of tasks on the Task Pagelet.