Aim of this article:
Customize Liferay Create account functionality using Liferay hooks.
Problem:
Look the above screen. The above screen is the create account User Interface. Sometimes the fields available in the create account user interface is not enough. Lets consider we need one extra field called Social Security Number in the above interface. That means at the time of creating new account the user will be able to see an extra field called Social Security Number. The user will enter the new field value and it will be persisted in the database. We need also the validation for the new field.
Solution of the Problem:
To solve this problem below are the concepts implemented.
JSP Hook:
A jsp hook is created to customize the user interface.
Custom Field:
Only showing the extra field in the user interface is not enough. We need to persist the data. We have used custom field for persisting the data. From the control panel we have created the custom field.
Use of liferay-ui:custom-attribute tag:
In the JSP hook this tag is used to capture the user input for Social Security Number.
struts-action hook:
This hook is used to override the struts action while submitting create account form. This hook is required for server side validation of newly added field called Social Security Number.
Language Hook:
This is optional. We have created this hook for providing proper label of custom field created in control panel.
We will explain all the details step by step
Step 1: Creation of custom Field
In our case we are dealing with user registration. Therefore we are going to create a new custom field for the Entity User. Create the custom field from control panel as below. Our key is ssn.
Custom Field Permission:
The custom field is added. But one thing to remember we have to set appropriate permission for the custom field. Because the guest user i.e., at the time of creating new account this field will be viewed and updated.Set the permission as shown in the screen shot
Note: Once we add custom field for an entity Liferay will automatically assign label for it. This label can be customized by using language property hook. In the language hook put ssn as key and give meaningful label. For example
ssn= Social Security Number
Once you deploy the hook the label will be changed.
Step 2: Create language hook. The key should be ssn in the language file
After deploying the language hook
Step 3: Create JSP hook
create_account.jsp is the JSP file where we are going to add new field called Social Security Number. Below is the code added in the JSP.
<div class="exp-ctrl-holder"> <liferay-ui:custom-attribute className="<%= User.class.getName() %>" classPK="<%= 0 %>" editable="<%= true %>" label="<%= true %>" name="ssn" /> </div>
The above code will render one input box with label Social Security Number. Just remember the name attribute in the above code we have given the same key ssn as we entered in the control panel in the Step 1. The benefit of this tag is that we don’t need to do any other thing to persist the data. Once the form is submitted the data entered in the expando field will be also saved in the expando column in the database. After deploying the hook the create account form looks like below
Step 4: Validation of the newly added field
We have added the field and now we are able to persist the data also. But we need to do some server side validation also. Say SSN should be always numeric. To achieve this we can override struts action by hook. Below is the custom action class
package com.proliferay.demo;
import javax.portlet.ActionRequest;
import javax.portlet.ActionResponse;
import javax.portlet.PortletConfig;
import javax.portlet.RenderRequest;
import javax.portlet.RenderResponse;
import com.liferay.portal.kernel.servlet.SessionErrors;
import com.liferay.portal.kernel.struts.BaseStrutsPortletAction;
import com.liferay.portal.kernel.struts.StrutsPortletAction;
import com.liferay.portal.kernel.util.Validator;
import com.liferay.portal.util.PortalUtil;
import com.liferay.portlet.expando.model.ExpandoColumnConstants;
/**
*
* @author Hamidul Islam
*
* Discover more in
* www.proliferay.com
*
*/
public class CustomCreateAccountAction extends BaseStrutsPortletAction{
/**
* This is the custom process action
*
* In this process action we are reading custom field which is entered from create account form
*
* After reading the custom field we are calling the original process action
*/
public void processAction(
StrutsPortletAction originalStrutsPortletAction,
PortletConfig portletConfig, ActionRequest actionRequest,
ActionResponse actionResponse)
throws Exception {
String ssnValue = (String)PortalUtil.getExpandoValue(actionRequest, "ExpandoAttribute--" + "ssn" + "--", ExpandoColumnConstants.STRING, ExpandoColumnConstants.PROPERTY_DISPLAY_TYPE_TEXT_BOX);
System.out.println("##################ssnValue###########################################"+ssnValue);
if(!Validator.isNumber(ssnValue)){
SessionErrors.add(actionRequest,"wrong-ssn");
return;
}
originalStrutsPortletAction.processAction(
originalStrutsPortletAction, portletConfig, actionRequest,
actionResponse);
}
/**
* After process action this method is invoked
*
* From inside of this method we are again calling the original render method
*/
public String render(
StrutsPortletAction originalStrutsPortletAction,
PortletConfig portletConfig, RenderRequest renderRequest,
RenderResponse renderResponse)
throws Exception {
return originalStrutsPortletAction.render(
originalStrutsPortletAction, portletConfig, renderRequest, renderResponse);
}
}
Note 2: To read custom attribute value we have used PortalUtil.getExpandoValue
Note 3: Our custom field key is ssn. When its rendered by liferay-ui:custom-attribute the name of the field would be like this
ExpandoAttribute–ssn–
Note 4: We have added the below code in create_account.jsp for displaying error message
<liferay-ui:error key=”wrong-ssn” message=”The SSN number is not correct”/>
The final liferay-hook.xml looks like
<?xml version="1.0"?> <!DOCTYPE hook PUBLIC "-//Liferay//DTD Hook 6.2.0//EN" "http://www.liferay.com/dtd/liferay-hook_6_2_0.dtd"> <hook> <language-properties> content/language.properties </language-properties> <custom-jsp-dir>/custom_jsps</custom-jsp-dir> <struts-action> <struts-action-path>/login/create_account</struts-action-path> <struts-action-impl>com.proliferay.demo.CustomCreateAccountAction</struts-action-impl> </struts-action> </hook>