« 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 添付ファイル
62845 参照数
平均 (9 投票)
平均評価は4.66666666666667星中の5です。
コメント
コメント 作成者 日時
It was very helpful. I spend days to findout... Olcay Yüce 2010/08/04 1:14
Is there something similar for toggle edit... Jules OU 2010/08/19 0:06
AUI().use( 'aui-dialog', ... Jules OU 2010/08/25 2:31
If i want to display the contents without popup... Nagendra Kumar Busam 2010/11/11 3:07
HI Jules, I tried to add toggle edito control... Dhrutika Vyas 2013/08/29 7:09
See my earlier comment. ... S L B 2013/08/29 7:17
Thanks S L B for quick reply. Yes I read that... Dhrutika Vyas 2013/08/29 22:31
Hi, Do you have the same thing for... Dan Smith 2010/09/09 10:18
I too would like a way to disable the myPlaces... James Denmark 2010/09/11 16:57
Works great! For our setup, I only had to make... Patrick Stackpoole 2010/11/15 14:49
Thanks a lot for this code but it doesn't seem... Serge Bajda 2011/05/19 9:02
Dear All, My requirement is I need different... Dinesh Balaji 2011/07/04 3:34
Is the a similar solution for the 'add page'... Gem E 2011/11/17 20:06
I'd like to know if there is a similar solution... A Herrera 2012/01/20 12:14
Here's what I was able to figure out: In the... A Herrera 2012/01/25 14:01
Dragging is not working on the component. I... Jawwad Farooq 2012/06/28 4:50
Hi All, I tried with the above snippets... Jatin Panchal 2012/07/19 6:39
Liferay.Util.toggleControls() actually adds the... S L B 2012/08/02 12:29
Liferay.LayoutConfiguration.showTemplates is... Tran Hong Quan 2012/09/05 9:27
Has anyone figured out how to make the link to... Dahai Zheng 2013/06/28 14:28
How to place "Add Page" link to allow user to... Ravi Soni 2012/09/14 5:25
Adding a shameless plug here because others may... Nick Piesco 2014/01/10 7:49
How to write the same for 6.2 , it works great... Srinivas KK 2014/06/21 10:54
Did you find any updated post for 6.2 GA3 ? All... Achmed Tyrannus Albab 2015/02/17 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.
投稿日時:10/08/04 1:14
Is there something similar for toggle edit controls? TIA!
投稿日時:10/08/19 0:06
AUI().use(
'aui-dialog',
'liferay-layout-configuration',
'liferay-util',
function(A) {
...
A.one('#toggleControls').on('click', function(event) {
Liferay.Util.toggleControls();
});
Jules OUへのコメント。投稿日時:10/08/25 2:31
Hi,

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

Thanks.
投稿日時:10/09/09 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.
Dan Smithへのコメント。投稿日時:10/09/11 16:57
If i want to display the contents without popup (in normal window state) how i need to invoke
Jules OUへのコメント。投稿日時:10/11/11 3:07
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();
}
});
投稿日時:10/11/15 14:49
Thanks a lot for this code but it doesn't seem to work in IE9 ?
投稿日時:11/05/19 9: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
Serge Bajdaへのコメント。投稿日時:11/07/04 3:34
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!
Dinesh Balajiへのコメント。投稿日時:11/11/17 20:06
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.
Gem Eへのコメント。投稿日時:12/01/20 12:14
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.
A Herreraへのコメント。投稿日時:12/01/25 14:01
Dragging is not working on the component. I think there should be some JS related work to make this working.

Please figure it out
投稿日時:12/06/28 4: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.
投稿日時:12/07/19 6:39
Liferay.Util.toggleControls() actually adds the onClick method so you should only run that once when the page is ready.
投稿日時:12/08/02 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
投稿日時:12/09/05 9: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
投稿日時:12/09/14 5: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.
Tran Hong Quanへのコメント。投稿日時:13/06/28 14:28
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
Jules OUへのコメント。投稿日時:13/08/29 7:09
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.
Dhrutika Vyasへのコメント。投稿日時:13/08/29 7:17
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.
S L Bへのコメント。投稿日時:13/08/29 22:31
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
投稿日時:14/01/10 7:49
How to write the same for 6.2 , it works great for 6.1. 6.2 GA2 has lot of changes on dockbar.
投稿日時:14/06/21 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.
Srinivas Konakanchiへのコメント。投稿日時:15/02/17 21:21