This section focuses on Pagelets, where and when to use them, and some of the guidelines for using Pagelets effectively.

What is a Pagelet?

Pagelets are simply small pages – or panes – within a larger window. They provide snapshots of useful and relevant content from applications, websites, or information related to transactions. Pagelets are typically used on Dashboards, Home Pages, WorkCenters, and for Related Content. Pagelets are also reusable; the same pagelet can appear on multiple pages. Pagelets are also known as Portlets.

Pagelets that appear on Dashboards or Home Pages are content boxes that typically present general, high-level information. However, many are designed to provide the user with easy access for drilling down to more detailed information either on another pagelet on the Dashboard or Home Page, or a target Transaction Page.

Pagelets follow a basic set of rules to be displayed properly on Home Pages, Dashboards and Related Content frames, or in the Pagelet area of a WorkCenter. On a Home Page, the Pagelet size should correspond to the Home Page layout of the specific user. Users can specify either a two-column layout (one narrow pagelet and one wide pagelet), or a three-column layout of three narrow pagelets.

In the figure below, the boxes on the far left and far right are Pagelets.

A Pagelet Header can contain three types of objects: A Pagelet Title, a Pagelet Title Icon, and Pagelet Action Icons, which may be on the header or in a menu.

The figures below show examples of Pagelet Headers.

A Pagelet Title is recommended (the title can also be hidden), and the title should be a meaningful indicator of the contents in that Pagelet. In the figures above, the Pagelet Title is My Applicants.

A Pagelet Title Icon is optional and is typically used to provide visual distinction to each pagelet.

A Pagelet Menu can include the following actions available for a Pagelet:

  • Personalize – allows the user to customize what is displayed on the pagelet
  • Minimize/Maximize – allows the user to minimize or maximize the pagelet
  • Remove – allows the user to remove the pagelet

There is no absolute restriction on the length of a Pagelet, but it is recommended that they be as short as possible and not contain too much information. The Pagelet should contain a snapshot of data, not detailed data. Detailed data can be navigated to from the pagelet via a hyperlink.

Dashboard Header Pagelets are a special type of Pagelet which is located at the top of the Dashboard and spans the entire width of the Dashboard as shown in the figure below. Use of the Dashboard Header Pagelet is entirely optional. When it is used, it is a fixed Pagelet in the dashboard which means that it must be placed in the first, top position in the Dashboard and cannot be removed by the end user.

The following figure illustrates a Dashboard Header Pagelet.

back to top

Guidelines for Using Pagelets

A well-designed and well-developed pagelet serves a number of primary functions for the user.

  • Pagelets should summarize data that is relevant, personalized, and actionable. The amount of information contained on a single Pagelet should be limited.
  • Pagelets should be designed to be simple and intuitive.
  • Pagelets can provide links to more detailed information, such as content in another application. However, users typically prefer to see the information they need directly in the pagelet without having to click to additional information.
  • Pagelets must be sized appropriately. The size of pagelets corresponds to the homepage layout that a user chooses. Any pagelet must first conform to the dimensions of the narrow column and optionally, of the wide column. Pagelet width is the only dimension that is pre-defined and restricted. The height of pagelets can vary; however, keeping them as short as possible is optimal.
  • Avoid the use of scrollable grids in a Pagelet. Grids that are inserted on Pagelets are non-scrollable by default. If the grid appears on a Pagelet and on a standard transaction page, PeopleSoft recommends that you use the non-scrollable grid to ensure consistent user experiences.

back to top