Liferay is easy: Open/Close Dialog Box using AUI in Liferay

Today we will discuss how to Open and Close a Aui Dialog box in liferay.In this we create a button on click of button a form is opened in dialog box which contain two input fields name , password and two buttons one for Submit the form and second for cancel.On Submit form is Submitted and details are shown in the dialog box .On Cancel form is simply closed so lets start this step by step.

Step 1:-Create Liferay project and Change view.jsp
Create a liferay project and then create a Generic portlet in it.Open view.jsp and paste the content:-

view.jsp
Explanation

Here we create a renderUrl with param value loginPage. On click of button with id="login" Liferay.Util.openWindow function is called which send the render Request to our controller with a parameter loginPage.

Step 2:-Handle Render Request inside Controller
Just fetch the path attribute and if it equals to loginPage then include login.jsp ie

String path = ParamUtil.getString(renderRequest, "path");
if (path.equalsIgnoreCase("loginPage"))
{
include("/html/demo/login.jsp", renderRequest, renderResponse);
}

Step 3:-Create login.jsp
Inside login.jsp we just create a simple form with two text fields and two buttons one for cancel and one for submit and a actionUrl for submittion of form:-

login.jsp

Step 4:-Handle Action Request inside Controller
When Submit button is clicked processAction method of our Controller is called

Demo.java
Explanation:-
Here we fetch the attributes that comes in Action request and set in response so that we can use in detail page.Here we also set a third attribute :-

response.setRenderParameter("path", "details");
This attribute help to determine the path in our doView() .

Step 5:-Send Controller to Details Page
The attribute set in as "path" inside processAction() is used in doView() because after processAction() doView() is called as:-

Demo.java
Explanation:-
Here we fetch the attributes that are set as Render Parameter in processAction and again set in render Request so that they are available in details.jsp.

Step 6:-Create details.jsp
The details.jsp is simple and self explanatory:
details.jsp

Thats it this will open a dialog box and show details inside this.But what about CLOSE BUTTON.For Closing a Dialog box these steps are necessary:-

Step 7:-Modify login.jsp and view.jsp
Paste this code inside login.jsp .Here this method internally call method closeYourPopUp which is inside view.jsp
login.jsp
view.jsp

Thats it Complete code of view.jsp,login.jsp and Controller is:-

view.jsp
login.jsp
Demo.java

Output