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.