Our Work

Add custom section under Users and Organization in Liferay Control Panel

Updated 21 day 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
    Note:
    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>
<struts-action-path>/users_admin/edit_organization</struts-action-path>
<struts-action-impl> com.liferay.portlet.useradmin.action.KTreeOrgAction
</struts-action-impl>
</struts-action>
  • 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
    html/portlet/users_admin/organization/KTreeOrg.jsp

  • 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>
        </aui:column>
    </aui:fieldset>
</div>

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.

 

Looking for Liferay Developer?

KTree is the best offshore Liferay development company with extensive experience in Liferay Portal Development services along with Upgrade & Migration. Hire Liferay developers or Liferay development services from LiferayDeveloper.

Request For Quote