We used cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it. What For?

« Back to Blogs

Portlet Development with Primefaces in Liferay 7/DXP


Primefaces is a cross-platform, open source and Java based library for the UI Development. It provides rich UI components with built-in support for ajax. I am showing you a few examples of ready to use primefaces components in liferay.

Color Picker

Color Picker is used to select the custom color directly using the color picker element. It allows to select using #RGB value, #RGBHSB value, using color hex code, using color selection.


<p:colorPicker value="#{view.color}" mode="inline" />


Data Table

Data Table is used to display data in tabular format with advanced interaction controls like pagination, filter, selection, sorting, grouping and many more.


<p:dataTable var="car" value="#{paginatorView.cars}" rows="10"
     paginator="true" paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                   <p:column headerText="Model" sortBy="#{car.model}">
                       <h:outputText value="#{car.model}" />
                   <p:column headerText="Color" sortBy="#{car.color}">
                       <h:outputText value="#{car.color}" />
                   <p:column headerText="Price" sortBy="#{car.price}">
                       <h:outputText value="#{car.price}" />
                   <p:column headerText="Manufacturing Year" sortBy="#{car.year}">
                       <h:outputText value="#{car.year}" />


Tag Cloud

A Tag cloud is used to display collection of tags. Tags can be displayed in different sizes.


<p:tagCloud model="#{view.model}"></p:tagCloud>


Progress Bar

Progress Bar is mainly used to indicate the current status of the process. It can be either control using ajax call to server side or client side function call or simple static display.


<p:progressBar value="40" labelTemplate="40%" displayOnly="true"/>


contact-us Request a callback WhatsApp