« Back

Feedback for Liferay 6: Global unified breadcrumb

Company Blogs April 26, 2010 By Jorge Ferrer Staff

 

This is the first post of what I hope will become a series of posts asking for feedback on some of the new features that will be including in Liferay 6. What we are hoping for right now is comments regarding issues from a usability or functional perspective. We'll be looking for ideas for improvements later, as part of the definition of the 6.1 roadmap, but right now our goal is to focus on polishing the features in 6.0 so that we can release 6.0 GA as soon as possible (hopefully within the next few weeks).

After this introduction I'm going to get to the point of this post: The global unified breadcrumb. This is a new navigation component that is shown in all pages at the top and underneath the page navigation:

 

Those of you who have been using Liferay for a while know that the product already had a portlet called breadcrumb that allowed for this. So what's really new?

  1. We have integrated the navigation of the portlets within the breadcrumb of the page. Why? Because as developers we see the portlets as independent components, but to the eyes of a non-technical user, whenever he navigates within a portlet the result is as if he's taken to a new page. Previously we had portlets which had their own breadcrumb but that could get very confusing, because some pages would have 2 or more different breadcrumbs in different positions of the page. Now we've created an API so that portlets could add items to the page breadcrumb as the users navigation through them. We've also modified Liferay's out of the box portlet to make use of this API and have removed their internal breadcrumbs.
  2. As you probably know, Liferay allows having multiple web sites in one single installation: there is one default site, which is called "Guest" but you can add many more sites per community, organization and user. The issue was that there wasn't any way to navigate between them. While such navigation is very dependent on the specific characteristics of each portal, there are some things that are general to all or most. In particular what we have done in the global breadcrumb is to add also the hierarchy of sites that lead to the current one. To that end we've considered that "Guest" is always the parent of all sites (this can be disabled). Underneath are all communities and the hierarchy of organizations. Users' sites are always shown underneath their organization. Here are some example paths:
    1. Guest
    2. Guest > Organization A > User X
    3. Guest > Organization A > Organization A1 > User Y
    4. Guest > Community B
  3. The global unified breadcrumb is always visible on the screen. This feature actually started as a joke to Nate, to which he answered that would be impossible to acomplish. But some time later he came back saying "Don't trust me again when I say something is impossible"... He had done it! So what is it? Basically, the issue with some portal pages is that they are quite long, so if you scroll down the navigation elements are not visible any more. That is specially annoying in the case of the breadcrumb because it also shows where you are, which is always useful. How did nate fix it. Basically when the page scrolls down to a point where the breadcrumb is going to be hidden it gets attached to the top of the page, as if it was a browser bar and stays there, always visible. Here is a picture showing this behavior, you can see how the breadcrumb has changed the background color from white to black to become more easily visible:

     
  4. All of the new features mentioned in points 1 and 2 have been implemented as improvements to the breadcrumbs portlet. But we've also decided that this should always be included by default and thus are including that portlet from the default classic theme. You can of course change this in your own themes, but if you do then you might loose some useful features.

That's mainly it. The best way to understand how it works completely is to download Liferay 6.0 RC and beging playing with it. Try creating several communities, organizations and pages, also add some portlets to it such as blogs, document library with several folders, etc. and navigate through all of it.

We'd love to know how you like it. To make it easier to send your feedback and to allow you to subscribe to the ongoing discussion, I've created a message board post to that end. I've also given some specific points were we'd like to receive feedback. Here is the link:

www.liferay.com/community/forums/-/message_boards/message/4897465

 

Threaded Replies Author Date
I don't like "floating" page elements because... S L B April 26, 2010 10:07 AM
Are there any properties to enable o disabile... Denis Signoretto April 28, 2010 2:51 AM
@S L B, that's a fair point. In cases where... Jorge Ferrer April 28, 2010 4:18 AM
To remove the ability of breadcrumbs from... Christopher Brisee August 24, 2010 6:37 AM
Adding breadcrumb into search results - would... Jan Tošovský October 19, 2010 4:01 AM
Hi Jan, I'm not sure I understand your... Jorge Ferrer October 19, 2010 5:14 AM
Here is short example. It is the search result... Jan Tošovský October 20, 2010 1:18 AM
Hi Jan, Thanks for the example. So basically... Jorge Ferrer October 25, 2010 8:13 AM
Hi Jorge, thanks for your patience, I meant... Jan Tošovský October 25, 2010 9:25 AM
Got it. That would certainly be interesting.... Jorge Ferrer October 25, 2010 10:03 AM
Hello Jorge i just wondering is there anyway... Malek Tarboush November 10, 2010 12:51 AM
Hi Malek, It should automatically translate... Jorge Ferrer November 22, 2010 1:34 AM
Hello Jorge thank you for reply what i meant is... Malek Tarboush November 23, 2010 2:17 AM
Hi Malek, That looks like a good short term... Jorge Ferrer November 23, 2010 2:22 AM
Hello Jorge i found an issue about localize... Malek Tarboush November 23, 2010 6:59 AM
In order to remove the first link you can still... Luca Orlandi June 16, 2011 4:11 AM
Hi, Is it possible to show only text not url... neelam bhandari November 16, 2011 2:11 AM
[...] There's a more generic blog post by Jorge... Anonymous January 24, 2012 10:29 AM

I don't like "floating" page elements because when I search for text, my highlighted result will invariably be hidden by the chat bar or whatever. So I have to manually scroll to see what I was looking for. At least the partial opacity is a somewhat solution for that, but I still don't like them.
Posted on 4/26/10 10:07 AM.
Are there any properties to enable o disabile it or change de default behaviour (e.g. if you are using only Guest I wouldn't see "Guest" normal users can't understand what it stands for)?

Bye.
Denis
Posted on 4/28/10 2:51 AM.
@S L B, that's a fair point. In cases where having floating elements is absolutely forbidden the only solution is to disable this feature (it can be done from the theme). Nevertheless, as you can see from the screenshot, we've made the floating element thin and a bit translucid so that it's worth it in many scenarios.

@Denis, yes, it's possible to disable it. Regarding using the word "Guest" I fully agree with you that nobody knows what it is, so instead we are showing the name of the portal as configured in Control Panel >> Settings. For example, in the screenshots you can see that it says "liferay.com" at the beginning of the breadcrumb instead of "Guest".
Posted on 4/28/10 4:18 AM in reply to Denis Signoretto.
To remove the ability of breadcrumbs from always being visible, remove the following from the main.js in your theme:

var siteBreadcrumbs = A.one('.site-breadcrumbs');

if (siteBreadcrumbs) {
siteBreadcrumbs.plug(A.Hudcrumbs);
}
Posted on 8/24/10 6:37 AM in reply to Jorge Ferrer.
Adding breadcrumb into search results - would it be possible to have this info below/instead of tags? It could be useful for users to determine to which LR portal part that item belongs...
Posted on 10/19/10 4:01 AM.
Hi Jan,

I'm not sure I understand your proposal, can you post an example?
Posted on 10/19/10 5:14 AM in reply to Jan Tošovský.
Here is short example. It is the search result (with three items):

Page Name 1
short digest
*tag1 *tag2 *tag3
Liferay > WIKI > Product A > User Manual > 1.0

Page Name 2
short digest
*tag1 *tag2 *tag3
Liferay > WIKI > Product A > User Manual > 1.1

Page Name 3
short digest
*tag1 *tag2 *tag3
Liferay > WIKI > Product A > Getting Started > 1.0

See that last line, it is proposed feature. It would require to store breadcrumb info so that it is accessible during rendering the search results.

In our case there will be many pages with similar title and content. We could transform the given hierarchy into tags, but why not to reuse the breadcrumb info for this. Using tags for this seems to be redundant.
Posted on 10/20/10 1:18 AM in reply to Jorge Ferrer.
Hi Jan,

Thanks for the example. So basically your proposal is not related to the global breadcrumb, but rather to add a breadcrumb as part of the info a each search hit.

The question is where would that breadcrumb point to? In your examples it seems to be a hierarchy of categories, but what if there are several categories?
Posted on 10/25/10 8:13 AM in reply to Jan Tošovský.
Hi Jorge,

thanks for your patience, I meant page hierarchy (sitemap) instead of category hierarchy. And it is unique. But there could be a problem when some content is shared between multiple pages (non scoped wikis). But it is not my case. Of course, this feature should be optional.
Posted on 10/25/10 9:25 AM in reply to Jorge Ferrer.
Got it.

That would certainly be interesting. We actually do something like that for Web Content (although only for building the link to the content, we don't show the actual path right now).

We can definitely consider extending it to other portlets, although it would have some challenges, such as considering cases where the same content is shown in several places.
Posted on 10/25/10 10:03 AM in reply to Jan Tošovský.
Hello Jorge

i just wondering is there anyway to localize the global breadcrumb ?
we have a site Arabic/English so when the user switch
to Arabic we want the breadcrumb to switch to Arabic names
like the community , organization
I don't know if i'm asking in the right place
because when we create organization we don't have choice
to add localized name it has just one field for the name

so do you have any idea how to solve it?

thankx
Posted on 11/10/10 12:51 AM in reply to Jorge Ferrer.
Hi Malek,

It should automatically translate things such as the page name as well as any other time that has a translation. Not sure what you mean by translating "community" or "organization" in this context.
Posted on 11/22/10 1:34 AM in reply to Malek Tarboush.
Hello Jorge
thank you for reply
what i meant is that the community,organization
don't have a localized name like page
so we have to choose one name for the community

so when switching between languages
the name of community will not change because
it has no localized name so
it will appear the same whatever the language
you chose when you are exploring our site

look at this image
http://store3.up-00.com/Nov10/eTB06515.png
its how the breadcrumb appear when we switch
to Arabic
tabukportal, University are organization

its all because the the community and the organization
has no localized name

i have a solution for it its not that good
but it works now
so what i did is i added all my organizations and communities
and i added a Language-ex.properties file and i put there
organizations and communities names in Arabic
so i can use the LanguageUtil to get the names
and i edited the file
tomcat-6.0.26/webapps/ROOT/html/portlet/breadcrumb/init.jsp
i added this line

sb.append(HtmlUtil.escape(LanguageUtil.get(themeDisplay.getLocale(),themeDis­play.getAccount().getName()) ));

instead of

sb.append(HtmlUtil.escape(themeDisplay.getAccount().getName()));

also i added this line

sb.append(HtmlUtil.escape(LanguageUtil.get(themeDisplay.getLocale(),group.ge­tDescriptiveName())));

instead of

sb.append(HtmlUtil.escape(group.getDescriptiveName()));

i also did the same in display_style_1/2.jsp

and now it works fine but the problem is
if we added a new organization or community we have to modify
the Language-ext to add the new name


i hope its clear for you now


regards
Posted on 11/23/10 2:17 AM in reply to Jorge Ferrer.
Hi Malek,

That looks like a good short term solution, as long as you don't edit the files directly and use a hook plugin for that. BTW, you may want to upload this plugin to the community plugins catalog within the downloads page because it may be useful for others.

For the long term, the solution would be to allow users to enter the name of organizations and communities in several languages just like it's possible for roles or pages now. Can you search JIRA just in case there is already a ticket for that? If there isn't, could you create a JIRA ticket with this suggested improvement explaining why you think it would be useful?

Thanks,
Jorge
Posted on 11/23/10 2:22 AM in reply to Malek Tarboush.
Hello Jorge

i found an issue about localize communities here
http://issues.liferay.com/browse/LPS-4922
so i added a comment there
and i also created a hook for this and i tested it
it works fine i added it to the community plugins

http://www.liferay.com/downloads/liferay-portal/community-plugins/-/softw­are_catalog/products/6580688?_98_redirect=%2fdownloads%2fliferay-portal%2fcommun­ity-plugins%2f-%2fsoftware_catalog%2fmy_products

Regards
Posted on 11/23/10 6:59 AM in reply to Jorge Ferrer.
In order to remove the first link you can still customize in portal.-ext.properties:

breadcrumb.show.guest.group=false
breadcrumb.show.parent.g­roups=true
Posted on 6/16/11 4:11 AM in reply to Malek Tarboush.
Hi,

Is it possible to show only text not url for the current page in breadcrumb trail?

Regards
Neelam Bhandari
Posted on 11/16/11 2:11 AM in reply to Luca Orlandi.
[...] There's a more generic blog post by Jorge and another blog post by Alexey Kakunin that I found giving instructions on how to work with the global breadcrumb. Flag Please sign in to flag this as... [...] Read More
Posted on 1/24/12 10:29 AM.