Drag&Drop on Liferay CE 7.3.0 Widget Pages

Chapter 6 - the trolling continues

Olaf Kock

February 03, 2020

A Minute Read

Two things in life are certain. And one of them is what this article is about ;)

Now that Liferay CE 7.3.0 is out and still offers Widget Pages, I'm happy to present a long standing optional feature that just requires a few lines of CSS (and - as always - could benefit greatly from someone donating a slightly prettier version)

What's it all about? When you drag&drop widgets on the page, you might expect a visual indicator for the possible drop zones (that depend on your page's layout) by now (pardon me for reusing the same illustration as in chapter 5, it's still accurate, apart from the mountains and version label):

The necessary CSS from chapter 5 - just like my illustration - still works: No change necessary. But as there are always new people coming on board, you might not have seen the old chapters. And as it's still the same CSS as last year, the effect is still as ugly as always, but works.

If you want to see the same in your installation, just add the following CSS to your pages, or to your theme:

.portlet-dropzone { transition: padding 0.5s linear;
}

.yui3-dd-drop-active-valid .portlet-dropzone { outline: 1px dotted black; padding: 10px; margin: 3px; min-height: 100px; }

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

With the upcoming release strategy for 7.3 (introducing some new features in 7.3.1) and Jorge's December 2019 comment on LPS-40571, there's a good chance for a last farewell article once 7.3.1 comes out. Otherwise, of course, there's a very good chance for more trolling ;)

10 Comments

Please sign in to comment.

No, now I prefer the LPS will not resolved.. We want this blog post from Olak every new version release!! :-) It's a ritual for good times

Please sign in to reply.

And a "trolling" themelet here: https://www.npmjs.com/package/liferay-dropzone-themelet :) So you just have to run 'gulp extend' in your theme to add this piece of CSS.

Please sign in to reply.

Why a themelet, why not just a sass file in the theme? #sass

Please sign in to reply.

This is what a themelet does in the end: inject a sass file in your theme. And if you have multiple themes where you want this piece of code, it avoids hard code duplication it in each theme.

Please sign in to reply.

I guess that's cool if you have multiple themes. One theme is way plenty for me, multiples would be nightmare fuel.

Please sign in to reply.

For a single project, yes. But what if you jump in a new project and you want to reuse this? You just look for that old theme where you wrote this and copy/paste those few lines? IMHO this is one the few use cases where you want to use themelet publicly available — and open-sourced — because this something you're more likely to reuse in any theme.

Please sign in to reply.

Copy paste

Please sign in to reply.

Give widget pages the love they need! This looks like an easy quick win and let me tell you our users have struggled with that stupid blue bar for long enough. Look at it this way rather than ... doing all this with content pages, web content could have become fragments. All the founding functionality was there, it just needed to be taken from 80% complete to 100%.

Yet no, yet another story of where Liferay have abandoned the old in search of the new only to discover the greatness that was there all along. "Widget pages", it's a joke. I have to stand in front of my users and say "Widget Page"?? Yuck.

Please sign in to reply.