5. Other CMS Features

There are other portlets that utilize CMS features. These portlets work together with CMS to add extra functionality to your portal.

5.1. Breadcrumb Portlet

The Breadcrumb navigation portlet shows the location of the current page in context of the site. This form of navigation helps the user visualize the structure of the site and quickly move from a page that is very specific to a broader grouping of information. The Breadcrumb navigation for this documentation page looks like this:

Simply add the Breadcrumb portlet to each page you want it on. The portlet will determine its place in the structure of the website and dynamically build its proper path.

5.2. Navigation Portlet

The Navigation portlet is similar to the Breadcrumb portlet in that it helps the user visualize the structure of the site and provides hyperlinks to quickly move from page to page. The advantage of the Navigation portlet is that it displays more information about the current page.

There are two styles of data iteration for the Navigation portlet (custom iteration styles can easily be written in JSP to customize it to your needs). Look at the following portal's layout structure:

Now, let us assume that a user is looking at the "Home C1" page of the portal. Here are what the two iterations would look like in the Navigation portlet:

  • Iteration Style #1

    This iteration focuses on the page lineage the user is viewing. Let us list some of the items that are shown in this iteration style:

    • Breadcrumb trail starting with the eldest parent (e.g. "Home A1") and terminating in the current page (e.g. "Home C1")

    • Listing of each children of the current page

  • Iteration Style #2

    What are the characteristics of this iteration style?

    • Title using the second to eldest parent (e.g. "Home B1")

    • The current page (e.g. "Home C1") and each of its children are listed

    • The sibling(s) of the current page (e.g. "Home C2") are shown

    This iteration helps to highlight all the relationships to the current page. What is the advantage of having the second to eldest parent be the title? It provides more specificity to the content of the page. The eldest parent of the Liferay website, for example, is "Home" and gives little value to the user, as opposed to "Products," "Documentation," or "News."

To take advantage of this portlet:

  1. Add a Navigation portlet from the drop-down menu at the bottom of the column you want it in.

  2. Click the Edit button to modify the properties of the portlet.

  3. You can select whether to Show Portlet Borders or enter an optional Portlet Title. Note that the title will only show up if the borders are displayed.

  4. Select the Iteration Style.

  5. Click the Save Settings button.

  6. Click the button to exit the preference editor (do not mistakenly click the remove button).

5.3. Associating Navigation Links with Articles and URLs

  1. To associate navigation links with articles and URLs, click on Page Settings.

  2. Select a page.

  3. Click Type.

  4. To associate a page with an article, select Article>Save>enter article ID>Save.

  5. To associate a page with a portlet page, select Portlet.

  6. To associate a page with an embedded URL, select Embedded.

  7. Save.

  8. Enter URL.

  9. To associate a page with a URL that will replace the current window, click URL.

  10. Save>enter URL>Save.

  11. To associate a page with a URL that will open in a new window, click URL.

  12. Save.

  13. Enter URL.

  14. Enter _blank in Target.

  15. Save.

5.4. Layout Design Templates

Our new layout design templates provides incredible flexibility for laying out portlets. Instead of being constrained to placing portlets under one, two, or three columns, you can now mix and match. Look at this example below:

Highlighted in red are four different portlets embedded in an instance of a 1-2-1 layout design template. The Message Boards portlet is laid across the entire width of the page, the Blog and Poll Display portlets are distributed across the middle columns, and the stretch of the bottom column contains the Currency Converter. To use design layout templates after portlets have been added, click on the Add Content link, which shows a pop-up of available portlets and the Template choice. Refer to figure below. To get the the same look as above, select the 1-2-1 template.

Click the Finished button in the pop-up area, then drag the portlets in the area you want. Refer to figure below.

If the preloaded templates are insufficient for your needs, you can create your own deployable layouts, use a sample layout template, or use a community-submitted one.