Liferay form navigator example

In this tutorial, we will look into liferay-ui:form-navigator example

Create JSP with below code:

<%@include file="/html/init.jsp" %>
<%
 String[] CAT_NAMES = new String[]{"Details","Education","Experiences","Custom Sections"};
 String[] details = new String[]{"details", "contact"};
 String[] education = new String[]{"education"};
 String[] experience = new String[]{"experience"};
 String[] custom = new String[]{"customsection"};
 
 String[][] CAT_SECTION = {details, education, experience,custom};
%>

<portlet:actionURL var="updateStudentVar" name="updateStudent" />
<aui:form action="<%=updateStudentVar%>" method="post" name="fm">
 
 <liferay-ui:form-navigator 
 categoryNames="<%= CAT_NAMES %>"
 categorySections="<%= CAT_SECTION %>"
 jspPath="/html/liferayformcontrols/jsps/"
 />
</aui:form>

• categoryNames :  input the list of categories that you want to display on siderbar
• categorySections :  this array contains the list of jsp files that need to display under each category
• jspPath : this hold path to jsps

Note : Set value to displayStyle attribute to get  layout as “steps” or “tabs” panels

Create JSP folder:

Create JSP folder  under your html folder. In this example create “jsps” folder under liferayformcontrols folder. In “jsps” folder create correspoding jsp names as shown in below:

Deploy the portlet and finally your form will be looks like liferay edit user form: