« Back to Dockbar

Link to Dockbar

Table of Contents [-]

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>
0 Attachments
14340 Views
Average (8 Votes)
Comments

Showing 12 Comments

Olcay Yüce
8/4/10 1:14 AM

It was very helpful. I spend days to findout replacement for toggle(87) - add application in liferay 6.0.X. This exactly what i need. Thanks.

Jules OU
8/19/10 12:06 AM

Is there something similar for toggle edit controls? TIA!

Jules OU
8/25/10 2:31 AM

AUI().use(
'aui-dialog',
'liferay-layout-configuration',
'liferay-util',
function(A) {
...
A.one('#toggleControls').on('click', function(event) {
Liferay.Util.toggleControls();
});

Dan Smith
9/9/10 10:18 AM

Hi,

Do you have the same thing for My-place-menu ?

Thanks.

James Denmark
9/11/10 4:57 PM

I too would like a way to disable the myPlaces menu in the dockbar and instantiate it on a click or hover event within the page. I can grab the myPlaces UL using $theme.myPlaces() in Velocity but am wondering if there is a better way to do this now with Liferay 6 and Alloy UI.

Thanks.

Nagendra Kumar Busam
11/11/10 3:07 AM

If i want to display the contents without popup (in normal window state) how i need to invoke

Patrick Stackpoole
11/15/10 2:49 PM

Works great! For our setup, I only had to make one change, as I was having an issue when the "Add Application" link was clicked multiple times. The following updated version of the A.one click event function will only render/show if the dialog isn't already rendered/shown. Otherwise it will toggle between show or hide. This prevents multiple applications from being adding to the page at a time (when the dialog is opened/closed or the link clicked multiple times).

// Attach the click listeners to the links
A.one('#addApplications').on('click', function(event) {

// Only Show() and Render() if it isn't already shown and rendered
if (addApplicationsDialog.get('visible') == false)
{
if (addApplicationsDialog.get('rendered') == false)
{
addApplicationsDialog.re­nder().show().io.start();
}
el­se // Already rendered
{
addApplicationsDialog.show();
}
}
­ else
{
addApplicationsDialog.hide();
}
});

Serge Bajda
5/19/11 9:02 AM

Thanks a lot for this code but it doesn't seem to work in IE9 ?

Dinesh Balaji
7/4/11 3:34 AM

Dear All,

My requirement is I need different dock bar for different themes. Since each user has different themes for them and their contents in the dockbar will also differ ,such as one will have the add option and other will not have any such options.

So how this thing can be achieved. Currently I have created a hook for the dock bar. And How to map this dockbar for a particular theme alone.

By the solution that is provided above, we can have the links respectively, but how to get the similar dockbar itself for the specific theme selected by the user.

Thanks in advance for your guidance,

Warm Regards,
Dinesh V

Gem E
11/17/11 8:06 PM

Is the a similar solution for the 'add page' link to go outside the dockbar?

I know this question was asked here: http://www.liferay.com/community/forums/-/message_boards/message/6715258 but it didn't get a reposnse.

Many Thanks!

A Herrera
1/20/12 12:14 PM

I'd like to know if there is a similar solution for removing the Add -> Page as Gem E has requested previously. Anyone figured an easy way to move the Add -> Page or just the Page so it's outside of the dockbar?
I'd like to know how this can be done in Liferay v6.

Thank you in advance.

A Herrera
1/25/12 2:01 PM

Here's what I was able to figure out:

In the theme's navigation.vm before the last </ul> line add ($add_page_text is a variable I set in init_custom.vm):
<a id ="myAddPage">$add_page_text</a>

In Liferay's navigation.js alter the _makeAddable function with the following:
if (instance.get('hasPermission')) {
/**
* AH: change to make button work on nav bar
*/
var addPageButton = A.all('#myAddPage');
if (addPageButton) {
/**
* AH: for some reason, the click here and the click
* inside of the _createEditor work on the same
* mouse click. Changed original to mouseover
* instead.
*/
addPageButton.on('mouseover', instance._addPage, instance);
}
}

Then to hide the dockbar, simply set the .dockbar css to display: none.
.dockbar {
background: #97A1AE url(../images/dockbar/dockbar_bg.png) repeat-x 0 0;
border-bottom: 1px solid #636364;
font-size: 13px;
padding: 1px 5px;
position: relative;
z-index: 300;
display: none;
}

I hope I didn't miss anything... hope this helps.