New in 6.2: The new "Side Page Panels"

In my last blog entry I explained the thought process we followed to improve the Dockbar. What some of you may have noticed is that I skipped talking about three elements that used to be in the left side of the dockbar in 6.1:

So, what happened to them? These options where part of the overall work that we have done to provide a proper Information Architecture for all administration functions a Liferay administrator may need to use. In particular, several of the options that were accessible through the "Manage" menu are now part of the new Site Administration UI.

What has been left are the operations that are related to what the admin is seeing right now, that is, the current page. That includes adding stuff to the current page, adding a new page, previewing the page in different devices (new in 6.2) or controlling whether to show or not display controls.

One other goal we had was to find a way to show these management controls in a way that didn't require a full bar at the top, since that created a significantly different visual effect for admins than for regular users. While that may be fine in some sites, it's very undesired in others. After evaluating several options we decided to use a technique to add the management options for the  "Current Context" to the left side as shown in the image below:

Now, you may be thinking "Wow, that's cool and beautiful, but it may not fit well in my theme". No worries, we thought of you too. The side icons are fully themable. In fact, this representatoin is only part of Liferay's classic theme. If you use "_styled" as the base for your theme you will default to the traditional top bar from side to side. And when you are ready you can switch to the new side icons with a few lines of CSS/HTML as the Classic theme does. Kudos to Nate for making it so easy to choose what better fits your needs.

Now let's take a look at what's inside each of those icons. They all work the same way, upon clicking them a side bar will appear from the left side. This is a new UI pattern that has been introduced in 6.2 that provides a lot of benefits, including the ability to perform operations while in the context of a page, without loosing it from your view at any point in time. Let's look at each of these side panels:

The goal of the "Add Page" panel is to allow creating pages quickly (Just enter the title and click <Enter>) while still providing access to the most commonly used options. Some aspects to highlight here are:

  • We decided to merge Page Templates and Page Type into one set of options, since the difference is mostly technical and the end user doesn't care.
  • Once you select a page type, it's also possible to select some related options. For example, if you select an Empty Page (the default) you can directly choose the layout of columns. If you select a page template you can choose whether to enable propagation of changes or not.
  • As you type, you can see the title of the page appear in the navigation as you type.
  • We used the new "localizer" component which allows specifying the name of the page in all enabled languages of the site.

 

 

The "Add Application" panel is similar to the existing one, although with a much more modern look & feel. We have mainly focused on fixing some usability pitfalls such as the problem caused by having the "highlighted" portlets separate from the complete list.

 

 

 

The "Add Content" panel is a very cool new feature. It allows users to search for existing content (or create a new one on the fly) and just drag & drop it to the page. Liferay will take care of choosing the most appropriate portlet under the hood and configure it to display the chosen content. This is a good example of the efforts we are making to speak the language of the user, helping him get his task acomplished and taking care of the technical details transparently.

The Preview pane is another of the new features of 6.2 and allows previewing the site with the most popular device sizes and with any other custom size. While there are plenty of simulators out there, just having the ability to preview any Liferay page one click away is a game changer. You'll see :)

And finally the "Edit Page" pane. One of my favorites, because it packs a lot of page configuration options into an small area. And having the page always visible as you edit its properties makes a huge difference.

That's it for now, I hope you liked these improvements. Looking forward to hearing your thoughts and opinion.

 

Blogs