Our Work

Add custom section under Users and Organization in Liferay Control Panel

Updated 1 year, 3 months and 20 days ago

Domain: Liferay

Version: 6.1.2 CE

Module: Liferay Control Panel

Sometimes we might require to add new section to Control panel Master data management process such as User and Organization. In my case I want to create a new section and add required UI elements to persist custom attribute values of an Organization/Location. To add a new section Liferay under Users and Organizations we have to follow below steps,

  • Identify the place to include your new section during Organization or User Edit.

  • Add new section name in portal-ext.properties based on your identified place. Requires restart to take effect
    E.g: organizations.form.update.miscellaneous=comments,KTreeOrg
    JSP name and section name (will be mentioned inside portal-ext file E.g: organizations.form.update.miscellaneous)

  • Then create a new custom hook and add Struts action to perform your own business logic with the new section.

  • You should extend struts action as below

<struts-action-impl> com.liferay.portlet.useradmin.action.KTreeOrgAction
  • Struts action should extend with BaseStrutsPortletAction and call the original struts action process then include your business logic before or after the call.

  • Add a custom jsp and implement your UI based on your needs/requirement. Jsp file should be added under respective module. In my case I added my custom jsp in below location to display under Organization Edit section

  • When you save the Orgnization form then your business logic also submit to the global save form and saves your data based on your implementation process.

  • If you want to perform a quick Save without submitting globally then you can implement an Ajax call to do this.

.upload-fileName {
    width: 60px !important;
    padding-right: 10px;
<div class="attributes-upload">
    <aui:fieldset cssClass="upload-fieldSet">
        <aui:column cssClass="upload-file">
            <aui:input name="fileOrgUpload" type="file" accept='image/*'
                label="Upload File"></aui:input>

JS logic
executePublishAction = function(id){

// Ajax Business Logic


Once completed with hook implementation then deploy to your Liferay environment, you can find a new section with specified name and you can see your custom UI build and it would perform your operations as implemented in your business logic.