I spent the better part of a week doing nothing but this and sleep, but I think it's nearly ready. If you're brave, you can go get the current one out of CVS. I warn you, it'll be minorly annoying because I got rid of the delegator (What's that do?!) module and replaced it with the Page Manager (I bet you can guess what that does) module.

First, once you've got everything, if you go to admin/build/panels you'll see the Panels dashboard. It's really just an overlay over other stuff, because Panels itself doesn't really have a UI. But it gives UI to lots of other stuff.

Panels 3 dashboard

So from there, you might click through to the page manager. Because we are prejudiced against panel nodes and mini panels.

Panels 3 page list

Then, after you've had fun sorting and filtering that page, you'll probably try to create a new panel. You'll get presented with a screen to provide some basic information. You know, name it, describe what it's going to be, and check off which of these features you want. You're going to get these features anyway, but if you don't check them you won't be asked about them. Think of it as 4 or 5 screens you won't have to look at because you don't care about them.

Panels 3 start of new page

Then you get to the meat of what you really want to do:

Panels 3 pick layout for new page

Then, after I skip the screenshot for the actual drag and drop UI, which hasn't changed terribly much (well, it has but not in THIS round), you are presented with the full edit interface for the Panel. Notice how it's still new and not really in your database yet, but you're one click away from making it live:

Panels 3 just hit save

So moving on, let's look at some of the features from another page I have. When you first click on a page to edit it, you're presented with a bit of summary about what the page is.

Panels 3 summary

Like Views, when you make changes, they're not immediately permanent, and it's happy to let you know this:

Panels 3 don't save that crap

Where this system gets really cool, though, is that you can have multiple pages per page, and use a system called selection rules to figure out which page is actually used. For example, here is a simple idea of a membership page, where members get completely different content than everyone else:

Oooh, variants! What does variant mean?

And you have a bunch of control over the actual criteria. You can choose any number, based upon the objects (aka contexts) that are available. Note on the left that now that we have variants, they're collapsible so that the UI doesn't get too difficult to figure out. Also, beneath the list of available access tests what you can't read is that you can say "All of these" or "Just one of these".

So I can make this page only viewable by midgets in Argentina at night? Sweet!

One last thing. Editing a panel can be complex and time consuming. It sucks when someone edits things out from under you.

Well, we don't let that happen:

Yoda said NO, mofo

This UI will probably see some refinements, corrections, and "I coulda had a V8" moments as time goes on, but whatever glitches it may have, I don't think anyone will argue that it isn't miles better than the previous UI which was scattered all over the place and required tons of extra clicking. It was a nice idea but ultimately proved to be a failure. Mostly I'm sad about how much time I wasted doing it, but it wasn't all wasted. The actual code level changes for this UI were not nearly as bad as they could've been, because I spent a lot of my time previously making sure I could easily do multi-step forms and all kinds of cute little things to make this work.

This is in CVS now. I hope to have the beta out within the next week or so. This is the point where I'm looking for usability comments before some of this gets too late to change!

Comments

Wow, this looks insanely cool. Thank you!

One small observation: The one thing in the third screenshot (http://www.angrydonuts.com/files/panels3-ui-choose-features.png) that I could not immediately guess at what it means was the "Selection rules" checkbox. It became clear enough with the following screenshots and explanation, but there seems to be a discrepancy between the terms "Selection rules" and "Variants". I think it would be more intuitive that if I want add a page with variants that I should select "Variants" as the feature, and not "selection rules". After all, each selection rule is bound to a variant, isn't it? So, I'd prefer "Variants" for this checkbox, or maybe "Rule-based variants".

Hah, this is getting somewhere. Hats off to Gandalf the white... I really like the dashboard page. If you'd like some nagging and Improvement proposals, make sure to invite the UX Police...

Wow, Panels is evolving into matching Views in complexity. Those two feel more and more like Sub-Applications instead of modules. We can make a fortune in only holding Views and Panels Workshops... Where is the guy that makes a "Simple Panels" Version? Rock on to shake the drupal world.

Hey ho, let's go

I just checked and yep I crapped my pants. ;-)

You are my favorite Drupal person, Earl. I love the views-like interface, it feels like home.

Josh

It was simply makeing my head explode.
The new UI concept looks like it really follows a natural workflow. Most people are used to the views interface so I guess it is a very good idea to style the Panels UI this way.

Hope the new beta allows an easy upgrade from the last one.

Your work is amazing. Thanks!

This looks great, and I can already see that the workflow is going to be improved without having even used it. There *was* excessive clicking and page loads on the old UI, which was actually pretty irritating.

I can't comment on delegator's untimely demise, but at least page manager has a name that's probably more in line with what it does!

How does this affect existing panels 3 installs? Is there (or will there be) an upgrade path for poor lowly delegator users?

This is some more smart, good quality work Earl. Thanks so much.

Other than needing to go and activate a new module, it should be fairly smooth. I'm hoping a few adventurous people will do that upgrade in dev and let me know if there are problems with it.

"he said, looking NikLP squarely in the eye..."

...Ulp!

Upgraded to the dev version on a site I'm developing to test it out... Downloaded the ctools cvs and the panels 3.x cvs, then I enabled ctools page manager module. Last step we to visit /admin/build/pages and enable the node template page I set up to override node views. And Bam! Worked like a charm. All my content is still showing up properly. Loving the new interface.

Looks powerful. Can't wait to try it out. Couple of constructive nits...

Why is it "add custom page"? When creating a page, it's natural to want to add format to it. Seems the link should just say "add page" or "add"

I'm getting lost between all the tabs. Left tabs, two levels of top tabs with breadcrumbs separating the tabs. It's a complicated UI, so maybe it needs something like this, but the bigger concern I have is making sure it's navigation is model is similar to the rest of Drupal. Seems that vertical tabs are on their way out with the MBD work. Top tabs are in, but do these top tabs map to the model MBD is using (think they might but not sure).

Additionally, while this feels really powerful, "outsiders" would have real trouble with this. Managing layouts/content is a feature that separates Drupal from its competitors, and if it were usable to "outsiders" - wow! To may that happen, this UI would need to hide some of the advanced features.

is making sure it's navigation is model is similar to the rest of Drupal

no, no. The navigation should be similar to Views 2, not Drupal..

Why is it "add custom page"? When creating a page, it's natural to want to add format to it. Seems the link should just say "add page" or "add"

Because it's pluggable and there may be other types of pages, either simpler or more complex to add.

I'm getting lost between all the tabs. Left tabs, two levels of top tabs with breadcrumbs separating the tabs.

Originally I had all of the links in the left nav, but it was overwhelming. We needed some separation between the things that are operations and the things that are info/forms, so I moved them to top navigation.

Seems that vertical tabs are on their way out with the MBD work. Top tabs are in, but do these top tabs map to the model MBD is using (think they might but not sure).

Vertical tabs just went into core, so I don't think you're correct here. But in any case, top tabs have a much more limited amount of space than vertical tabs. That alone is reason enough not to use top tabs.

but the bigger concern I have is making sure it's navigation is model is similar to the rest of Drupal.

When I designed Views, the Views 1 UI made sure its navigation model was similar to the rest of Drupal. But frankly, the rest of Drupal simply doesn't have objects with this much data being edited. It was clear that a new paradigm was needed. The Views 2 paradigm has been successful. Conversations made it clear that following the Views 2 UI model would help users already familiar with it, and provide even more incentive for other software to follow it.

Additionally, while this feels really powerful, "outsiders" would have real trouble with this.

This is the kind of statement that needs more to back it up. What would "outsiders" have trouble with? What would you do different?

Only one word seems to capture it--

WOW

I'm off to checkout my copy now... just when I think things can't get any more awesome your modules take another leap forward. Truly amazing work.

This is some great work. The interface is intuitive and hangs well together. It feels much tighter and dare I say it more views like. This is important I think and big credits to you for putting some serious thought into making this happen. There is a great deal of power to be tapped underneath. I'm convinced now that this is the right interface to focus this power and it is going to make a huge difference to the drupal community.

In terms of the design work, a lot of this came from yoroy and other suggestions both in the Panels group on GDO and in an issue in the Panels queue. When this comes out publicly I need to remember to give credit where it is due!

I love that it's a similar UI to Views 2. Most of the people who will use it are familiar with that UI already, and the new Panels allows you to do things that are perhaps even more complex than what Views does.

Only thing that I find a little confusing is the term "variant" for an alternative version of a page display. I don't know what would be better though. I would suggest "display" but that's already been claimed by Views.

The screenshots really look good similar to view2, I will check it out :).

Looks great Earl.

I read a survey comparing joomla to drupal, and deployment, themes, and maintenance seems to have an edge for joomla over drupal.

An internet search for just joomla turns up more results. Also, wordpress platform is gaining more cms functionality due to ease of use.

Those sort of issues result in market penetration, which affects the long term viability of drupal, so your work on this module is a major contribution to the drupal community. However, if you have any weight with Buytart, have him get many more themes and easier to implement themes to come with the next default installation of drupal.

I hope you are getting satisfaction and other rewards for your hard work. I heard about you from lynda.com :o)

Thanks man and take care!!

Themes are important because of branding issues. All things being equal, a person is more likely to subscribe to a site that has better branding. Even if they are not equal, it is an important advantage. Also, the right branding helps to establish the groups identity better to stake their own claim in the digital domains.

Earl, I don't know if you read this, but artisteer.com provides some UI ideas.

Also, having a common profiles auto builder section (manual config option available for the user would be good) for selecting themes, views, and panels would be great for ease of use. Perhaps there can be examples that communicate how such functions work so that a new user gets a helping hand. I haven't been able to read up on drupal 7 yet, so please excuse any redundant communication of ideas.

Hi,

The new layout really looks professional an it is also easy to use. And i think it is faster then previous versions (javascript openings etc.). Yesterday I used some of the features of Panels that I didnt use before like pane visibility settings. And each time, I admire the work done on panels (not to mention views). I dont know if it is appropriate to congratulate you (merlin) here but I didnt find any other place, if it isnt please feel free to erase. You really deserve that MVP title.

Really, you should consider opening a "congratulate" section on your website...

Best regards,

Sinan

Well thank you!

I think many people would agree that my ego is big enough, and a section of my blog specifically to inflate my ego might be dangerous. But it's a neat idea, nonetheless. =)

The new panels 3 looks great, but as a newbie I am having problems with arguments now. I can't seem to figure out how to add arguments to a panel page now. I have looked, but I am not able find any instructions on this.

Thanks

I've been trying to do this too. I have two panel pages. Both with content on the left and a contact form on the right. I've _form_alter the contact form done some other magic but need to be able to either add an argument to the panel or some how pass in a variable... that I can catch in the panel.

Any help would be great

Impressive

Amazing work. you Rock
Its much easier now to create a homepage.
Just wondering if there is a way for a user or "group" to create own homepage without help from admin?
Thanks

See the og_panels module for the group. We're still figuring out how to do it right for users.

I really enjoyed your tutorial but how do I import individual user posted products to their profile?

I'm trying to override a certain cck node using panels 3.2, using Node: ID, all done ok, including the preview works normally. But on node view (front-end) the panels don't override the node layout (using 2 columns, where right column are set 2 views and left displays the node content).

I'm using panels 3.5 (sorry).

I followed Drupal Panels 3 tutorial and several video sessions to install and configure the Drupal Panels. Then, I tried to create a Panels Page following the exact same steps as you presented here. However, when reaching the step to choose a layout, I got into some problems that I cannot resolve (it seems no one has ever experience the same scenario.).

My problem is, when the "Choose Layout" screen is displayed (as shown in your site), my screen is slightly different from yours:
(1) The path displayed on my "Page" is:
Basic Setting >> Panel Setting >> Panel Content (you don't have "Panel Setting")
(2) Instead of "Choose Layout" as on your screenshot, I have:
Category: drop-down box, it contains "Builders", "Column1", Column2" and "Column3"
(3) Instead of several layouts, I have only a single layout ("Flexible" as on your screen).

If I select that single layout (Flexible) and continue, in the Content page, the layout displayed has ONLY ONE pane (Center), which is different from the layout I selected.

I assume that I must missed something since no one experienced the same problem I have. I wonder if you have any advice to resolve this problem.

Thanks

Add new comment