Personal tools

Portlets

What is a portlet?

Portlets placement at the edge of a web pagePortlets are defined boxes of content (text, links, images, etc) that appear down the left and right hand sides of a plone site. Your navigation is a portlet for example. There are portlets at the edges of these pages - see the image on the right. 

You have the facility to add portlets to individual pages but you can also add them to whole sites - meaning that they run through your site appearing on every page. For example, if you added a portlet to the top level folder in your site then it would cascade down to every page in your site unless you told it not to. Portlets are flexible and easy to create and can add a great deal to the usability of any site you are building.

Adding a portlet

To add a portlet you need first to think about where you want your portlet to be seen. Is the portlet you have in mind for your entire site or is it specific to a particular page or subsection?

  • If it's for your entire site then your starting point needs to be your top level site folder.
  • If you're putting it somewhere more specific then you need to start at that page or folder.

Manage portlets buttonOnce you've decided where you want your portlet then you need to navigate to that area and look for the 'manage portlets' button - which you should find at the bottom of your left or right hand column or both (if you have both) - see the image on the right.

Plone portlets menu expandedWhen you click the Manage Portlets button you will be taken to the Portlet Management Interface which presents you with two identical interfaces, one on the left and one on the right. You can get back to your main page view at any time by pressing the return button.

The menu on the left controls portlets on the left hand side of your page and vice versa. The interface has the following options (see image to the right):

Add portlet...

The Add portlet... down box allows you to choose a portlet type. Choosing a portlet will immediately take you to a configuration interface for the particular portlet you have chosen to allow you to configure it. The configuration inteface will vary depending on the portlet you have chosen. See below for a description of the various portlet types and for a short explanation of how to configure them.

Portlets assigned here

This area will show any portlets that are already configured for this part of your site. You can click on any one of them to edit them. You can also reorder and delete them should you want to using the red cross and up/down arrow buttons.

Block/unblock portlets

This menu allows you to block or unblock the inheritance of portlets from higher up in your site or the University site (Plone refers to these portlets as Parent portlets). This can be useful when you want a portlet to run through most of your site but not a specific area.

At time of writing we would ask you NOT to use the Group portlets or Content type portlets drop down menus as we are not supporting their use.

Save settings

The portlet maintenance interface ends with a save settings button - you need to use this to save any changes you've made to portlet order or deletions otherwise they will not save.

What types of portlets are available at the moment?

There are nine (9) portlet types available currently in the drop down portlet menu (following a change made on the 25th feb 2010).

The following is a description of what the different portlet types actually do:

Portlet type descriptions

Static text portlet (Core - essential)

The static text portlet is the one of the most commonly used Plone portlets. It gives you an area in a box at the side of your site into which you can put anything that could go on a standard plone page. In fact the two are so similar that the editing interface for a static portlet looks like the standard page editing interface - bold, italics, alignment, links, images, tables, etc.

  • The interface will ask you for a portlet header which will be the heading at the top of the portlet e.g. Contact Details.
  • Text and editing goes on in the main Text area.
  • The Omit portlet border option allows you to remove the standard box that frames any portlet you create. If you choose this option then remember to put a title in the main text area. Also, removing the border will hide the portlets header box - so if your header information is important to the portlet then repeat it within the portlet main body.
  • Portlet footer gives you the opportunity to add some text that will appear in the footer of the portlet - which you have the option to turn into a link e.g. Futher info...
  • Details link - If given, the header and footer will link to this URL.
  • Hide portlet - useful if you have a portlet that you only want to show a certain times and don't want to have to delete and remake. You hide it when it's not needed.

Navigation (Core - essential)

By default every Plone page comes with an auto-generated navigation portlet showing all the content in the site. This would be great on a small site but on a massive site like the University of Leicester it can be overwhelming.

Instead, you have the option in areas you control to add your own custom navigation. The potential here for disaster is high so we recommend the following approach.

  • At the root folder of your site, click on the manage portlets interface and under Parent Portlets choose the Block option from the drop down menu. This will block the auto-generated navigation that your site is getting.
  • From the add portlet interface choose the Navigation option.
  • In the navigation portlet editing screen ignore all the empty fields until you get down to Include top node which you should tick.
  • Ignore other fields again until you get to Start level which you should set as a number which is equal to the level that you are down from the homepage of Plone. So if you are a department or service site and you are two levels down from home in either the departments or services folder then you need to put the number 2.
  • Navigation tree depth should always be set to 5 - which means there are 5 styled levels of navigation starting from your site and going downwards.
  • Click save and return to your site and your navigation will just reflect your site.

Collection Portlet (Very useful)

A common misconception of the collection portlet is that it's a mini version of a normal collection and people are suprised when they don't see an interface that allows them to filter and pull in content. Collection portlets only do one thing - their raison d'etre is to reference existing collection folders defined elsewhere - your's or other people's.

  • When you add a collection portlet then you will be prompted to give it a portlet header - this is essential and is the label that people will see at the top of your portlet.
  • The Target Collection field is what you use to search for your already created collection folder - hence it's a good idea to know where your folder is and what you called it. Search for your collection and it will appear in the search results area below - then select it and click update selection.
  • Use Limit to set the number of items the portlet will show. Three to five is normal. 
  • Show more... link will give you a footer linking to the underlying Collection.
  • Show dates - If enabled, effective dates will be shown underneath the items listed. These aren't useful for events - for which you should be using an event collection portlet.

RSS feed (Very useful)

This portlet is used to display external RSS feeds in a Plone site. So for example if you wanted to have the BBC news coming through as a feed on your site then this would be the portlet you would use. When you add an RSS portlet there are only three fields to fill in:

  • Number of items to display (Required) - How many items to list.
  • URL of RSS feed (Required) - Link of the RSS feed to display. To get this you'll need to click on the RSS feeds area of the site from which you are trying to get the feed. RSS feeds are usually URLs that end with /rss.xml. Copy and paste the RSS feed url into this field.
  • Feed reload timeout - Time in minutes after which the feed should be reloaded. We recommend against using quick reload times like 1 min because it puts an unneccessarily high load on the server.

Event Collection (Very useful)

Exactly the same as standard collection portlets with one exception:

  • The Show dates field if enabled shows the event's start date in preference to the effective dates. Also, the dates will be shown underneath each item as they are listed in the portlet.

Flash Movie (Very useful)

The flash movie portlet is very simple - it relies on you having uploaded a flash .swf file to your plone site. When you add the portlet you'll be prompted to choose your flash file from a list of all the flash files you have permissions to view in the entire University Plone site.

  • Something to think about is making sure that your flash file is a sensible size for displaying in a portlet (182 pixels with a border/206 without a border).

Feed Mixer (Very useful)

Intended for anyone who wants to blend or mix a number of RSS feeds from different sources. Works exactly the same as the RSS portlet with a couple of minor differences.

  • You get to specify a Portlet Title because if you have blended a number of feeds then you need a catch all title rather that using one taken automatically from one of the feeds.
  • The Maximum time to cache feed data is the same a timeout with normal RSS portlet feeds - it is the number of minutes before the portlet refreshes it's content.
  • The URL(s) for all feeds is just a big field into which you enter (one per line) all the URLs of the feeds you want to blend. RSS 0.9x, RSS 1.0, RSS 2.0, CDF, Atom 0.3 and ATOM 1.0 feeds are supported.

Blog Portlet (Useful)

This portlet displays recent plog posts within the current blog or in the context of an entire folder structure. Configuration options include:

  • Show calendar - We recommend that you DON'T use this option. The calendar feature is not currently working as intended and will be removed along with the associated Calendar portlet at some point in the near future.
  • Show recent blog posts - Tick this to get the list of recent posts.
  • Number of recent posts to display (Required) - self explanatory.
  • Show categories - Displays all the categories and the number of posts within the category
  • Show comments - Displays any recent comments.
  • Number of recent comments to display - self explanatory.

Tag Cloud Portlet

To quote Wikipedia... "A tag cloud or word cloud (or weighted list in visual design) is a visual depiction of user-generated tags, or simply the word content of a site, typically used to describe the content of web sites. Tags are usually single words and are normally listed alphabetically, and the importance of a tag is shown with font size or color. Thus, both finding a tag by alphabet and by popularity is possible. The tags are usually hyperlinks that lead to a collection of items that are associated with a tag".

The plone tag cloud portlet is simply a means of having a tag cloud in a portlet on your site. Tag clouds are totally dependent upon the use of plone 'keywords' in the documents they are referencing. If your site doesn't use keywords for its various pages then nothing will show in any tag cloud portlet you implement.

Tag cloud portlets can be found with the other portlet types in the 'add portlet' menu in the 'manage portlets' interface.

When configuring a tag cloud portlet you have the following options:

  • Tag cloud title - The title of the tagcloud.
  • Number of different sizes - A number between 1-6 which determines the size of the largest tag in the cloud. This number doesnt correspond to an actual font size so it will take some experimenting before you arrive at a size you're happy with. Default value is 5.
  • Maximum number of shown tags - A number which, if greater than 0, will limit the tags shown.
  • Restrict by keywords - Restrict the keywords searched. Leaving this empty will include all keywords.
  • Filter by keywords - Filter the keywords searched. Only items categorized with at least all the keywords selected here will be searched. The keywords selected here will be omitted from the tag clouds. Leaving the field empty will disable filtering.
  • Restrict by types - Restrict the content types searchable for tags for inclusion in the cloud. Leaving this empty will include all user-friendly content types.
  • Root node - This allows you to search for a folder to restrict the tag cloud's search to. You search for a folder/section in the search box and then make sure, once it's found, that it is then ticked in the 'Current selection' box.
  • Workflow states to show - This simply restricts the tag clouds search to items that meet the workflow states that are selected.
  • Refresh interval - The time, in seconds, before the tag cloud refreshes its list.

Call to Action Portlet

There are a number of ‘calls to action’ that are common across sites at that university, particularly department sites. They include things like:

  • Request a prospectus (Configurable)
  • Apply Online (Configurable)
  • Book an open day (Preconfigured)
  • MyLeicester (Preconfigured)
  • Find a course (Preconfigured)
  • Fees and Funding (Preconfigured)
  • Blackboard (Preconfigured)
  • How to find us (Configurable)

It has been decided that a set of these common calls to action will be provided centrally through Plone as buttons (portlets) for people to add to their sites. Doing this gives greater consistency of appearance, function and usability across web sites and gives the web team greater options for adding to and configuring these portlets going forward.

The way the Call to Action portlet works is such that you only ever need to add one of them. Once you add one then it is like adding a container into which more than one of these calls to action buttons can be put. Call to Action portlets should ideally be added into the right hand column on a page and need to be kept in a consistent place throughout your site.

Adding a Call to Action portlet

Adding a call to action portlet is straightforward and done in the same way as all other portlet types.

  1. Log in with a minimum of edit level permissions.
  2. Click on the manage portlets button at the bottom of the page.
  3. Doing this brings up the manage portlets interface – from which you can add a portlet.
  4. You add the call to action portlet by choosing it from the Add portlet drop down menu at the top of the page (see image).
  5. Once you’ve chosen the call to action portlet then that will bring up the Call to Action button configuration interface (see image).
  6. Select the type or types of call to action buttons that you would like to add by ticking the check boxes.
  7. Then click the Add Configurable buttons button.
  8. Doing this will cause a box with a drop down menu and an empty field in it to appear in the Configure buttons area of the Call to Action button configuration interface. The drop down list within this box will contain a list of all the ‘configurable’  portlets that you have chosen to add (see image). At this point you may be wondering why there’s only one box when you chose three configurable buttons. The answer is that this box serves as the configuration interface for the first item in the drop down menu. To add boxes for the others you need to select them from the drop down menu and click the Add Configurable buttons button again. This will cause a second and third box to appear. Warning: It is actually possible at the moment to add more of one instance of the same button type but we are asking that you DO NOT do this.
  9. If you have added two many boxes then you can rid of one by selecting the check box next to it and clicking the Remove selected items button.
  10. Once you have configured your buttons (by adding in a full URL i.e. must have http(s):// at the beginning) to the blank field in each box, then your last task is to press Save.
  11. When you Save you’ll be taken back to the Manage Portlets interface and you should be able to see a box for your call to action buttons (see image).
  12. Click the Return button and you should be taken back to your actual page where you can view your new Call to Action buttons (see image).

What the different Call to Action button types do

There are two types of call to action buttons: Configurable and Preconfigured.

  1. Configurable ones have parameters which can be changed e.g. URLs.
  2. Preconfigured ones are configured centrally and cannot be altered e.g. the book an open day button always goes to a specific central page about open days.

What follows is a description of what the different button types are for and each type will indicate in brackets after its name whether or not it is configurable.

Request a prospectus (Configurable)

For use with departmental sites and the prospectuses, the request a prospectus portlet, by default, contains a link to the central request a prospectus form which is at: https://myleicester.le.ac.uk/portal/form.html?form_id=6&sub=create

In some cases a query code can be added to the end of this URL to provide Corporate Affairs and Planning staff with an indication of where a visitor has come from to get to the form. For example, there is a code for the Geography Department which if added would indicate in the data collected from the form that the origin of the visitor journey to the page was Geography.

Apply Online (Configurable)

For use on departmental sites and the prospectuses. By default the Apply Online portlet button links to here: http://www2.le.ac.uk/study/what-next/#apply However, you now have the option to link this button to a page of your own choosing instead. We recommend that you link it to the relevant course page in the online Postgraduate Prospectus, rather than directly to the application system. This button can also be used for non-UCAS undergraduate courses.

Book an open day (Preconfigured)

For use on departmental sites and the prospectuses, the Book an open day portlet is preconfigured to link to the following URL: http://www2.le.ac.uk/study/open-days/open-days

MyLeicester (Preconfigured)

For use on departmental sites and at the Corporate layer of the web site, the MyLeicester portlet is preconfigured to link to the following URL: https://myleicester.le.ac.uk/portal/login.html

Find a course (Preconfigured)

For use on departmental sites and at the Corporate layer of the web site, the Find a course portlet is preconfigured to link to the following URL: http://www2.le.ac.uk/study/courses

Fees and Funding (Preconfigured)

For use on departmental sites and at the Corporate layer of the web site, the Fees and Funding portlet is preconfigured to link to the following URL: http://www2.le.ac.uk/study/fees

Blackboard (Preconfigured)

For use in any appropriate location on the web site, the Blackboard portlet is preconfigured to link to the following URL: https://blackboard.le.ac.uk/webapps/portal/frameset.jsp

How to find us (Configurable)

By default this portlet button links to the standard Maps and Directions area of the corporate website – which is at: http://www2.le.ac.uk/maps  However, you also have the ability to add in a URL destination of your own choosing. If you do this then you’ll need to have made a good How to Find us page on your own site that gives the visitor more specific information than they get centrally. Do not duplicate the Maps and Directions page within your own site.