Applying the Add Button Pattern

Clay’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. Follow these steps to add a plus button to your app:

1. Add the liferay-frontend taglib declaration to your portlet’s init.jsp:

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

2. Add an add-menu tag to your portlet’s view:

   <liferay-frontend:add-menu>
   </liferay-frontend:add-menu>
   

3. Nest a <liferay-frontend:add-menu-item> tag for every menu item you have. Here’s an example of the add button pattern with a single item:

   <liferay-frontend:add-menu>
       <liferay-frontend:add-menu-item 
         title='<%= LanguageUtil.get(request,"titleName") %>' 
         url="<%= nameURL.toString() %>" 
       />
   </liferay-frontend:add-menu>
   

   If there’s only one item, the plus icon acts as a button that triggers the item. If there’s multiple items, clicking the plus icon displays a menu containing them.

   

   Figure 1: The add button pattern consists of an `add-menu` tag and at least one `add-menu-item` tag.

The com.liferay.mobile.device.rules.web module’s add menu is shown below:

<liferay-frontend:add-menu
  inline="<%= true %>"
>
  <liferay-frontend:add-menu-item
    title='<%= LanguageUtil.get(resourceBundle, "add-device-family") %>'
    url="<%= addRuleGroupURL %>"
  />
</liferay-frontend:add-menu>

There you have it! Now you know how to use the add button pattern.

Related Topics

• Setting Empty Results Messages
• Implementing the Management Toolbar