« Back

Exploring Liferay 7: Dragging and dropping portlets

Company Blogs April 18, 2016 By Olaf Kock Staff

Yay - Liferay 7 CE is out.

As the exploration begins, I'm sure everybody first looks for their pet peeves. There's something that's been nagging me in 6.1 and 6.2 - and unfortunately I couldn't get my fixed theme regression merged into master - partly because of my missing CSS design skills, partly because I started lobbying too late, when only critical fixes were accepted. And partly because there was an impending update to the DOM which would have rendered the fix invalid almost immediately after committing it.

Turns out that my 6.2 patch is not invalidated by whatever has been introduced in Liferay 7, and it's trivial for you to fix the issue - and easy to bring into your own themes (everybody has their own theme anyways - right?). Here's the problem again:

When you drag and drop portlets on the page, Liferay does not provide an indicator, where you can drop it. While that's easy and intuitive for your stereotype 2-columns layout, it gets more tricky with the more complex layouts that provide multiple rows. Like in this example (showing the fixed version where you can see the dropzones once you start dragging):

As you can see, the visual appearance could use some improvement, but the technical requirement has been met. That's the caveat of having me work on theme issues: I'm able to make things look different - if you want them to look nice, you better ask someone else ;). Well, the arena is open and your suggestions for improvement are accepted and welcome.

The good news: The CSS that worked for 6.2 still works for 7.0 - no need to re-learn anything about the DOM for Liferay 7 - just add this CSS to the page (e.g. through the "Public Pages / Configuration / Look and Feel / CSS", alternatively private or individual pages) or to your own theme, and you're set:

You might also want to vote for LPS-40571 and LPS-53664 to get this feature out-of-the-box again.

Threaded Replies Author Date
You should consider not posting a nearly 20mb... Data Man April 19, 2016 11:56 AM
Thanks for the feedback. You're right (and I'm... Olaf Kock April 20, 2016 7:23 AM
Hi Olaf, I tried to implement liferay polls... Nabil Bahtat April 19, 2016 1:34 PM
@Nabil - please post this on the forums.... Olaf Kock April 20, 2016 7:25 AM
@Olaf: Two things seem to be given for each... Brendan Johan Lee April 20, 2016 3:10 AM
@Brendan - thanks for the tongue-in-cheek... Olaf Kock April 20, 2016 7:27 AM
@Olaf - You know. I just realized. To utilize... Brendan Johan Lee April 20, 2016 7:38 AM
@Brendan I'll try that when I finally get to... Olaf Kock April 28, 2016 4:26 AM

Data Man
You should consider not posting a nearly 20mb gif. Data is not free.
Posted on 4/19/16 11:56 AM.
Hi Olaf,
I tried to implement liferay polls portlet friendly url, but unfortunatlydid not manage tomake it work.
I followed the docs and wikis found in liferay web site, may beI missedsome thing.

<?xml version="1.0"?>
<!DOCTYPE routes PUBLIC "-//Liferay//DTD Friendly URL Routes 6.2.0//EN" "http://www.liferay.com/dtd/liferay-friendly-url-routes_6_2_0.dtd">
I'mreally new to liferay, please can you help me to fix it ?

Thanks alot
Nabil
Posted on 4/19/16 1:34 PM.
@Olaf: Two things seem to be given for each major Liferay release. My own excitement, and your portlet drag and drop post. I almost find myself hoping the feature doesn't make it into core, just so the tradition of your post isn't broken. emoticon emoticon emoticon
Posted on 4/20/16 3:10 AM.
Thanks for the feedback. You're right (and I'm sorry). I'm preparing a smaller image and will update later today.
Posted on 4/20/16 7:23 AM in reply to Data Man.
@Nabil - please post this on the forums. They're monitored by a lot more people than this blog article. There you'll need to add a lot more description of your problem
Posted on 4/20/16 7:25 AM in reply to Nabil Bahtat.
@Brendan - thanks for the tongue-in-cheek feedback. I'm not pushing too hard, so there's a chance for repetition. @developers: You have been warned ;)
Posted on 4/20/16 7:27 AM in reply to Brendan Johan Lee.
@Olaf - You know. I just realized. To utilize the power of LR-7, instead of trying to get this added to the default theme, one (notice the unpersonal pronoun ;) ) should probably make this as a themelet, and have @Nate add it as a default themelet option in the new front-end project.
Posted on 4/20/16 7:38 AM.
@Brendan I'll try that when I finally get to installing the zoo of frontend-tools. However, once I succeed with this, this series might end - is that what you want to tell me ;) ? Don't tell me you're missing my next version's article then
Posted on 4/28/16 4:26 AM in reply to Brendan Johan Lee.