The University of Chicago


Skip to: main navigation | utility navigation | main content

Portlet Guide

What is a Portlet?

According to Wikipedia, Portlets are pluggable user interface software components that are managed and displayed in a web portal.

Anatomy of a Portlet

Each portlet consists of 2 main components: 1) the Chrome and 2) the main content area.
portlet components


The portlet chrome consists of a title and one or more functionality links (represented by icons).

The portlet title bar will have one of seven colors, denoting the type of content that can be found within the portlet. The title bar will display the portlet title, also descriptive of the portlet’s content. Portlet Content Types include:

  • Administration, Contacts
  • Announcements, My Information
  • Life and Wellbeing
  • CnetID Authenticated Systems
  • My Personalized Content
  • News, Features, Entertainment, Calendars

The functionality icons represent actions that can be taken to manipulate the portlet, including minimizing, maximizing, editing content, and removing the portlet from the current tab. If a given portlet does not offer specific functionality, the associated icon will not be shown. Icons and their related functions include:

  • Locked locked icon: cannot be moved or deleted from the current tab
  • Minimize minimize icon: Shrinks the given portlet to display only the title bar
  • Normal normal icon: expands the portlet from the minimize view back to the standard portlet view
  • Maximize maximize icon: Enlarges the portlet to fill the entire portal pane, with all other portlets for the same tab becoming links beneath the tab name.
  • Edit edit icon: Allows user to manipulate portlet content (Ex.: RSS feed portlets, Bookmarks, etc.)
  • Remove remove/delete icon: Deletes the portlet from the current tab. (Note: any removed portlet can be re-added to a tab by following the steps to "Add Content."

Main Content Area:

The main content area houses all of the information for a given portlet. It is designated by its white background and is framed by a thin grey border. Some portlets included additional functionality to show and hide content. Referred to as a "toggle," this functionality is denoted by "+" or "-" icons. Content can be shown or hidden by clicking anywhere in the associated category heading.