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
HTML / XML
1<struts-action>
2<struts-action-path>/users_admin/edit_organization</struts-action-path>
3<struts-action-impl> com.liferay.portlet.useradmin.action.KTreeOrgAction
4</struts-action-impl>
5</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.
CSS
1.upload-fileName {
2    width: 60px !important;
3    padding-right: 10px;
4}
5<div class="attributes-upload">
6    <aui:fieldset cssClass="upload-fieldSet">
7        <aui:column cssClass="upload-file">
8            <aui:input name="fileOrgUpload" type="file" accept='image/*'
9                label="Upload File"></aui:input>
10        </aui:column>
11    </aui:fieldset>
12</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.