« 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
35177 Views
Average (9 Votes)
The average rating is 4.66666666666667 stars out of 5.
Comments
Threaded Replies Author Date
It was very helpful. I spend days to findout... Olcay Yüce August 4, 2010 1:14 AM
Is there something similar for toggle edit... Jules OU August 19, 2010 12:06 AM
AUI().use( 'aui-dialog', ... Jules OU August 25, 2010 2:31 AM
If i want to display the contents without popup... Nagendra Kumar Busam November 11, 2010 3:07 AM
HI Jules, I tried to add toggle edito control... Dhrutika Vyas August 29, 2013 7:09 AM
See my earlier comment. ... S L B August 29, 2013 7:17 AM
Thanks S L B for quick reply. Yes I read that... Dhrutika Vyas August 29, 2013 10:31 PM
Hi, Do you have the same thing for... Dan Smith September 9, 2010 10:18 AM
I too would like a way to disable the myPlaces... James Denmark September 11, 2010 4:57 PM
Works great! For our setup, I only had to make... Patrick Stackpoole November 15, 2010 2:49 PM
Thanks a lot for this code but it doesn't seem... Serge Bajda May 19, 2011 9:02 AM
Dear All, My requirement is I need different... Dinesh Balaji July 4, 2011 3:34 AM
Is the a similar solution for the 'add page'... Gem E November 17, 2011 8:06 PM
I'd like to know if there is a similar solution... A Herrera January 20, 2012 12:14 PM
Here's what I was able to figure out: In the... A Herrera January 25, 2012 2:01 PM
Dragging is not working on the component. I... Jawwad Farooq June 28, 2012 4:50 AM
Hi All, I tried with the above snippets... Jatin Panchal July 19, 2012 6:39 AM
Liferay.Util.toggleControls() actually adds the... S L B August 2, 2012 12:29 PM
Liferay.LayoutConfiguration.showTemplates is... Tran Hong Quan September 5, 2012 9:27 AM
Has anyone figured out how to make the link to... Dahai Zheng June 28, 2013 2:28 PM
How to place "Add Page" link to allow user to... Ravi Soni September 14, 2012 5:25 AM
Adding a shameless plug here because others may... Nick Piesco January 10, 2014 7:49 AM
How to write the same for 6.2 , it works great... Srinivas KK June 21, 2014 10:54 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.
Posted on 8/4/10 1:14 AM.
Is there something similar for toggle edit controls? TIA!
Posted on 8/19/10 12:06 AM.
AUI().use(
'aui-dialog',
'liferay-layout-configuration',
'liferay-util',
function(A) {
...
A.one('#toggleControls').on('click', function(event) {
Liferay.Util.toggleControls();
});
Posted on 8/25/10 2:31 AM in reply to Jules OU.
Hi,

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

Thanks.
Posted on 9/9/10 10:18 AM.
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.
Posted on 9/11/10 4:57 PM in reply to Dan Smith.
If i want to display the contents without popup (in normal window state) how i need to invoke
Posted on 11/11/10 3:07 AM in reply to Jules OU.
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();
}
});
Posted on 11/15/10 2:49 PM.
Thanks a lot for this code but it doesn't seem to work in IE9 ?
Posted on 5/19/11 9:02 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
Posted on 7/4/11 3:34 AM in reply to Serge Bajda.
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!
Posted on 11/17/11 8:06 PM in reply to Dinesh Balaji.
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.
Posted on 1/20/12 12:14 PM in reply to Gem E.
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.
Posted on 1/25/12 2:01 PM in reply to A Herrera.
Dragging is not working on the component. I think there should be some JS related work to make this working.

Please figure it out
Posted on 6/28/12 4:50 AM.
Hi All,
I tried with the above snippets provided in this wiki and when I clicked on my separate Add Application link , Add Application portlet is also opened but i got following error when i click on + sign to expand each category.

Error: i.DEFAULT_LAYOUT_OPTIONS is undefined

Please share if anyone have solution regarding same.
Posted on 7/19/12 6:39 AM.
Liferay.Util.toggleControls() actually adds the onClick method so you should only run that once when the page is ready.
Posted on 8/2/12 12:29 PM.
Liferay.LayoutConfiguration.showTemplates is not a function
Do anyone know why it is not a function? Please help me to fix this bug

Thanks
Posted on 9/5/12 9:27 AM.
How to place "Add Page" link to allow user to create new page without using dockbar of admin section ?

I appreciate your help in advance ,,
Thanks,
Ravi
Posted on 9/14/12 5:25 AM.
Has anyone figured out how to make the link to layout templates? I am using liferay 6.1. It looks like the LayoutConfiguration object doesn't have function "showTemplates". See /html/js/liferay/layout_configuration.js

Any help will be appreciated.
Posted on 6/28/13 2:28 PM in reply to Tran Hong Quan.
HI Jules,

I tried to add toggle edito control link in my custom theme. It works but its working on alternate clicks. Can you please tell have you faced such issue? If yes please provide solution.

I tried same as you provided below. I also tried by simply calling Liferay.Util.toggleControls(); onclick of anchor tag

Regards,
Dhrutika
Posted on 8/29/13 7:09 AM in reply to Jules OU.
See my earlier comment. Liferay.Util.toggleControls() should only be called once instead of on every click (unless it has changed from a year ago). You're adding a new onclick handler every time you click the element and all of their toggle actions cancel out when there's an even number of onclick handlers. When there's an odd number of onclick handlers, it works.
Posted on 8/29/13 7:17 AM in reply to Dhrutika Vyas.
Thanks S L B for quick reply. Yes I read that post.

But I didn't get without writting onclick how I will be able to call that toggle edit function.

My Requirement is that in my custom theme I have link for toggle edit. It should behave same as of Liferay's toogle edit.

Please suggest appropriate way if you have any idea.
Posted on 8/29/13 10:31 PM in reply to S L B.
Adding a shameless plug here because others may find it useful: I put together a blog post combining the knowledge I gained from this article (and all of your great comments), other bits and pieces I managed to scrape together over the Internet, and lots of trial and error. It includes toggling edit controls, adding portlets, and changing the layout template -- not all of the problems have been solved perfectly, but I hope it'll be a time- and headache-saver for others who have run into the same issues. Take a look -- I'd appreciate your feedback!

http://blogs.xtivia.com/home/-/blogs/building-a-better-looking-user-act­ion-menu-in-liferay-6-1
Posted on 1/10/14 7:49 AM.
How to write the same for 6.2 , it works great for 6.1. 6.2 GA2 has lot of changes on dockbar.
Posted on 6/21/14 10:54 AM.