Liferay is a Gartner Magic Quadrant Leader for the Sixth Year! Find out why
« Back to Development

Add Portlet Progress Bar

Introduction #

A progress bar is one of the most useful widgets for a user interface when the user can perform lengthy tasks. Unfortunately, while it's a widget very often found in desktop applications it's not so common in web applications. The reason for this is that it's not so obvious how to implement them.

This article shows how easy it's to add an bar to show the progress of a file upload in Liferay.

How to add the progress bar to your own portlet #

Simply add the following taglib invocation at the end of the JSP:

 <liferay-ui:upload-progress
    id="<%= uploadProgressId %>"
    message="uploading"
    redirect="<%= HtmlUtil.escape(redirect) %>"
  />

And invoke it with JavaScript from the submit button:

 <input type="submit" value="<liferay-ui:message key="upload" />" onClick="<%= uploadProgressId %>.startProgress(); return true;"/>

Note that the value of uploadProgressId can be any String but it must be unique. One way to generate a unique String is:

 String uploadProgressId = PwdGenerator.getPassword(PwdGenerator.KEY3, 4);

How this works #

The taglib will add some JavaScript code that will poll the server every few seconds to get the percentage of the file uploaded so far. Liferay's file upload mechanism automatically updates the state of the upload as a request attribute so the poll request is actually very light.

If you are curious and want to know more about how this works, check the LiferayServletRequest and LiferayInputStream classes for information about how the status of the upload is maintained, and upload_progress_poller.jsp for information about how the state is checked and sent to the progress bar. Check upload_progress.js for the JavaScript code that performs the polling and does the actual rendering of the progress bar.

0 Attachments
35367 Views
Average (2 Votes)
The average rating is 3.5 stars out of 5.
Comments
Threaded Replies Author Date
Hi ,This is really good article to add the... Mahendra Mahakle July 19, 2011 4:47 AM
Hi, cool feature, but when I use it, it goes... Puj Z January 8, 2015 4:47 AM

Hi ,This is really good article to add the progress bar in our portlet.
But one think that I can't be understand that what will be the value of "redirect" variable in above article.
I am waiting for response!
Thanks.
Posted on 7/19/11 4:47 AM.
Hi,

cool feature, but when I use it, it goes to 100% in 2 seconds and then waits for my process to finish. It is a bit confusing if you see 100% progress and then have to wait 30 seconds for the process to actuallly be finished. Any thoughts? Is this a bug or "a feature"? ;)
Posted on 1/8/15 4:47 AM.