Introduction #

For a lot of Liferay implementations, the dockbar needs to be hidden and the "Add Application" button and the "Layout Templates" button need to be placed on the site body. Unfortunately, doing that has not been the easiest thing to figure out. Fortunately, there does exist an easy way to do it.

Code #

If you place this code anywhere in portal_normal.vm, it links to the "Add Application" container as well as the "Layout Templates" container.

<!-- This can be placed anywhere in the portal_normal.vm -->
<a href="javascript:;" id="addApplications">Add Application</a>
<a href="javascript:;" id="layoutTemplates">Layout Templates</a>
<script type="text/javascript">
	AUI().use(
		'aui-dialog',
		'liferay-layout-configuration',
		function(A) {
			// Create the Add Applications dialog
			var addApplicationsDialog = new A.Dialog({
				title: 'Add Application',
				width: 280,
				visible: false
			}).plug(A.Plugin.IO, {
				after: {
					success: function(event, id, obj) {
						Liferay.LayoutConfiguration._dialogBody = addApplicationsDialog.get('contentBox');
						Liferay.LayoutConfiguration._loadContent();
					}
				},
				autoLoad: false,
				data: {
					doAsUserId: themeDisplay.getDoAsUserIdEncoded(),
					p_l_id: themeDisplay.getPlid(),
					p_p_id: 87,
					p_p_state: 'exclusive'
				},
				showLoading: false,
				uri: themeDisplay.getPathMain() + '/portal/render_portlet'
			});

			// Attach the click listeners to the links
			A.one('#addApplications').on('click', function(event) {
				addApplicationsDialog.render().show().io.start();
			});

			A.one('#layoutTemplates').on('click', function(event) {
				Liferay.LayoutConfiguration.showTemplates();
			});
		}
	);
</script>