Using the Liferay UI Taglib

You can create a lot of components using the Liferay UI taglibs. Liferay DXP’s taglibs provide the following benefits to your markup:

  • Consistent
  • Responsive
  • Accessible across your portlets

The full markup generated by the tags can be found in the JSPs of the tag’s folder in the Liferay Github Repo.

Now that you know the benefits of Liferay DXP’s tags, you can learn how to use them next.

Using Liferay UI Tags

A list of the available Liferay UI taglibs can be found here. To use the Liferay-UI taglib library in your apps, you must add the following declaration to your JSP:

<%@ taglib prefix="liferay-ui" uri="http://liferay.com/tld/ui" %>

The Liferay-UI taglib is also available via a macro for your FreeMarker theme and web content templates. Follow this syntax:

<@liferay_ui["tag-name"] attribute="string value" attribute=10 />

Now you’re good to go!

Each taglib has a list of attributes that can be passed to the tag. Some of these are required and some are optional. See the taglibdocs to view the requirements for each tag.

The example below uses the <liferay-ui:alert> taglib to create a success alert that the user can close:

<liferay-ui:alert
        closeable="true"
        icon="exclamation-full"
        message="Here is our awesome alert example"
        type="success"
/>

Here is an example implementation of a <liferay-ui:user-display> taglib:

<liferay-ui:user-display
        markupView="lexicon"
        showUserDetails="true"
        showUserName="true"
        userId="<%= themeDisplay.getRealUserId() %>"
        userName="<%= themeDisplay.getRealUser().getFullName() %>"
/>

Now you know how to use Liferay-UI taglibs in your JSPs!

JavaScript Module Loaders

Loading Modules with the AUI Script in Liferay

Using the Liferay Util Taglib

« Introduction to Front-End TaglibsUsing the Liferay Util Taglib »
Was this article helpful?
0 out of 0 found this helpful