Create a progress indicator in Liferay

I want to create a progress bar in Liferay, hopefully inside the Dynamic List Display plugin, but not necessarily. However, the data for the progress bar will come from the list. Any suggestions?

+5
source share
1 answer

You can easily deal with AlloyUI in Liferay 6.2. You need a placeholder for the progress bar - something like this:

<div id="myProgressBar" style="width:100%;height:20px;"></div>

And then you can create it using javascript as follows:

<aui:script use="aui-base,aui-progressbar">
var progressBar = new A.ProgressBar({
        boundingBox: '#myProgressBar',
        label: '<%=percentage%>%',
        orientation: 'horizontal',
        value: '<%=percentage%>',
    }).render();
</aui:script>

You can find out more about the configuration settings of the progress bar here: http://alloyui.com/api/classes/A.ProgressBar.html

And some examples here: http://alloyui.com/versions/2.0.x/tutorials/progress-bar/

+1
source

All Articles