Liferay: Líder no Quadrante Mágico da Gartner pelo sexto ano consecutivo! Leia mais aqui
« Voltar para 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 Anexos
52896 Visualizações
Média (9 Votos)
A média da avaliação é 4.66666666666667 estrelas de 5.
Comentários
Respostas do tópico Autor Data
It was very helpful. I spend days to findout... Olcay Yüce 4 de Agosto de 2010 01:14
Is there something similar for toggle edit... Jules OU 19 de Agosto de 2010 00:06
AUI().use( 'aui-dialog', ... Jules OU 25 de Agosto de 2010 02:31
If i want to display the contents without popup... Nagendra Kumar Busam 11 de Novembro de 2010 03:07
HI Jules, I tried to add toggle edito control... Dhrutika Vyas 29 de Agosto de 2013 07:09
See my earlier comment. ... S L B 29 de Agosto de 2013 07:17
Thanks S L B for quick reply. Yes I read that... Dhrutika Vyas 29 de Agosto de 2013 22:31
Hi, Do you have the same thing for... Dan Smith 9 de Setembro de 2010 10:18
I too would like a way to disable the myPlaces... James Denmark 11 de Setembro de 2010 16:57
Works great! For our setup, I only had to make... Patrick Stackpoole 15 de Novembro de 2010 14:49
Thanks a lot for this code but it doesn't seem... Serge Bajda 19 de Maio de 2011 09:02
Dear All, My requirement is I need different... Dinesh Balaji 4 de Julho de 2011 03:34
Is the a similar solution for the 'add page'... Gem E 17 de Novembro de 2011 20:06
I'd like to know if there is a similar solution... A Herrera 20 de Janeiro de 2012 12:14
Here's what I was able to figure out: In the... A Herrera 25 de Janeiro de 2012 14:01
Dragging is not working on the component. I... Jawwad Farooq 28 de Junho de 2012 04:50
Hi All, I tried with the above snippets... Jatin Panchal 19 de Julho de 2012 06:39
Liferay.Util.toggleControls() actually adds the... S L B 2 de Agosto de 2012 12:29
Liferay.LayoutConfiguration.showTemplates is... Tran Hong Quan 5 de Setembro de 2012 09:27
Has anyone figured out how to make the link to... Dahai Zheng 28 de Junho de 2013 14:28
How to place "Add Page" link to allow user to... Ravi Soni 14 de Setembro de 2012 05:25
Adding a shameless plug here because others may... Nick Piesco 10 de Janeiro de 2014 07:49
How to write the same for 6.2 , it works great... Srinivas KK 21 de Junho de 2014 10:54
Did you find any updated post for 6.2 GA3 ? All... Achmed Tyrannus Albab 17 de Fevereiro de 2015 21:21

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.
Postado em 04/08/10 01:14.
Is there something similar for toggle edit controls? TIA!
Postado em 19/08/10 00:06.
AUI().use(
'aui-dialog',
'liferay-layout-configuration',
'liferay-util',
function(A) {
...
A.one('#toggleControls').on('click', function(event) {
Liferay.Util.toggleControls();
});
Postado em 25/08/10 02:31 em resposta a Jules OU.
Hi,

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

Thanks.
Postado em 09/09/10 10:18.
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.
Postado em 11/09/10 16:57 em resposta a Dan Smith.
If i want to display the contents without popup (in normal window state) how i need to invoke
Postado em 11/11/10 03:07 em resposta a 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();
}
});
Postado em 15/11/10 14:49.
Thanks a lot for this code but it doesn't seem to work in IE9 ?
Postado em 19/05/11 09:02.
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
Postado em 04/07/11 03:34 em resposta a 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!
Postado em 17/11/11 20:06 em resposta a 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.
Postado em 20/01/12 12:14 em resposta a 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.
Postado em 25/01/12 14:01 em resposta a 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
Postado em 28/06/12 04:50.
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.
Postado em 19/07/12 06:39.
Liferay.Util.toggleControls() actually adds the onClick method so you should only run that once when the page is ready.
Postado em 02/08/12 12:29.
Liferay.LayoutConfiguration.showTemplates is not a function
Do anyone know why it is not a function? Please help me to fix this bug

Thanks
Postado em 05/09/12 09:27.
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
Postado em 14/09/12 05:25.
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.
Postado em 28/06/13 14:28 em resposta a 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
Postado em 29/08/13 07:09 em resposta a 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.
Postado em 29/08/13 07:17 em resposta a 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.
Postado em 29/08/13 22:31 em resposta a 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
Postado em 10/01/14 07:49.
How to write the same for 6.2 , it works great for 6.1. 6.2 GA2 has lot of changes on dockbar.
Postado em 21/06/14 10:54.
Did you find any updated post for 6.2 GA3 ?
All I want to do is hide the dockbar for normal users, and make my menu responsive as you can see here in the top page of this forum.

Having AUI complicates everything with only CSS Bootsrap 2.3.2, now I am at lost.

I hid the dockbar if user isn't logged in, but then if i change the view to a smaller width, my navigation is completely gone.

So I stumbled across this thread amongst others. But still no real solution.
Please help.

Btw I'm developing theme using velocity.

Cheers.
Postado em 17/02/15 21:21 em resposta a Srinivas Konakanchi.