Applying Lexicon Styles to your App

It’s important to have a consistent user experience across your apps. Liferay Portal’s built-in apps achieve this through Liferay’s Lexicon Experience Language and its web implementation, Lexicon.

Lexicon provides a consistent, user-friendly UI for Liferay Portal apps, and is included in all themes that are based on the _styled base theme, making all the components documented on the Lexicon site accessible.

This means you can use Lexicon markup and components in your Liferay Portal apps. These tutorials explain how to apply Lexicon’s design patterns to achieve the same look and feel as Liferay Portal’s built-in apps.

The tutorials in this section cover the following topics:

  • Configuring your portlet title and back link
  • Applying Lexicon patterns to your forms, navigation, and more
  • Using the Add Button pattern
  • Implementing the Management Bar
  • Configuring your admin app’s actions menu
  • Setting search container animations
  • Using Lexicon icons in your app

Configuring Your Application’s Title and Back Link

For Liferay Portal CE 7.0 administration applications, the title should be moved to the inner views of the app and the associated back link should be moved to the portlet titles. If you open the...

Read More

Applying Lexicon Patterns to Your Forms, Navigation, and Search

This tutorial covers how to leverage Lexicon patterns in your app’s forms, navigation, and search results to make them more user-friendly. You can learn how to update your navigation next. Applying...

Read More

Applying the Add Button Pattern

Lexicon’s add button pattern is for actions that add entities (for example a new blog entry button): it gives you a clean, minimal UI. You can use it in any of your app’s screens. The add button...

Read More

Configuring Your Admin App’s Actions Menu

In versions prior to Liferay Portal CE 7.0, it was common to have a series of buttons or menus with actions in the different views of the app. In Liferay Portal CE 7.0 the proposed pattern is to...

Read More

Setting Search Container Animations

If you’ve toured Liferay Portal CE 7.0’s UI, you’ve probably noticed animations in the search containers. These animations show the user when there is no available content. Figure 1: This is a...

Read More

Using Lexicon Icons in Your App

Whether you’re updating your app to Liferay Portal CE 7.0 or writing a new Liferay Portal CE 7.0 app, follow the process here to use Lexicon’s icons. You can find the list of available Lexicon...

Read More

Adding the Management Bar

The Management Bar controls display options for search container results. You can use it to display content in a list or a grid, or to display a specific type of content. You can also customize...

Read More
0 (0 Votes)
Using npm in Your Portlets Previous