Drupal 7 Panels Module Variants and Selection Rules

By shane
Sun, 2013-03-31 23:52
Daily Dose of Drupal Episode #133

Share with Others

This episode continues with the Drupal 7 Panels Module and goes over how to use variants and selection rules within a custom panel page.

In this episode you will learn:

  • How to create multiple variants for a single Drupal 7 Panel page
  • How to use selection rules to display a different Drupal 7 Panel variant based on a URL path
  • How to use Drupal 7 Panels module selection rules to display a different variant based on a user's role on the Drupal site

Hello everyone and welcome to another Daily Dose of Drupal, today we’re on Episode Number 133 and we’re going to continue where we left off on Episode 130 and learn a little bit more about the Drupal 7 Panels Module but before we get started; as always I’m Shane Thomas, you can follow me on Twitter at smthomas3, you can also stop over to codekarate.com and check out some of the other videos and make sure to sign up for the newsletter and also make sure you support code karate if you were interested so go ahead and click there and learn a little bit more about the code karate supporter program.

Let’s go ahead and get started though; last time if you remember we went over the layout builder in Drupal 7 Panels. This time we’re going to go over with what you can do with the Selection Rules and how you can really use Selection Rules to change the layout or the look of the page for different users or different … based on different selections, how you can manipulate and control the output of the Panels themselves so we’re going to go ahead and get started and jump right into the Panel here if you want to see we have this custom panel that we built in the previous episode.

I just went here into edit panel and one of the things that we’re going to be looking at is this selection rules option over here. So you can see we have one variance right now, if we go back and look at this panel it’s accessible on panel-page but if we come here and look at the selection rules for this variant, basically the way the panel works is when the page loads it runs through each of the different variance that you have, checks the selection rules and if it matches, the first one that it matches is the actual one that it will display.

So we’ll go ahead and show you how that can work here in a second but as you can see we have a pretty … I guess it’s a little bit of a complex layout but it’s nothing too extreme I guess, pretty basic but what we’re going to do is I’m going to look at the different options for selection rules.

So you can have whether certain context exist and we’re going to go over context in the future episode, you can check the current theme, you can based it on the results of some PHP code, you can also base it on URL path which is what we’re going to check first then you can use Permissions or Roles which we’ll also look at. The first thing we’re going to take a look at is a specific property that Panels has.

So if you look here; if we go to panel-page it’s going to return our panel which is what you would expect. So you can see the URL I go to panel-page it returns this panel. You can also notice if I go to panel-page/anything else it’s still going to return this panel. So I can use a URL rule and I can display a completely different layout for this page based on the second parameter here and this could be useful in different situations depending on how you wanted to structure your site, it’s not something I’ll recommend using a lot, there’s probably better ways to do it than this but it is something that you can use so we’re going to go ahead and add a selection rule to this variant saying string URL Path and we’re going to allow access on just the panel-page so we say allow access on the following page and we’re going to go ahead and say update and save.

Also I noticed there’s extra field in here that I no longer want, at least not quite yet so I’ll go ahead and get rid of that and save it. So now I check that, you see now I’m on panel-page/test. It does not show anything here because it’s limiting it to just panel-page. If I go to panel-page it will of course return my panel but what this does allow me to do now is if I wanted panel-page/test to show something completely different I simply add a new variant by clicking up here, we’re going to call this just Test Panel, we’re going to have Panel, we’re going to use Selection Rules and create the variant.

The Selection Rule in this case is going to be a URL Path of panel-page/test and of course this could be anything you wanted so if you add different sections within this panel page or something like that you could use URL Path Selection Rule, we’ll go ahead and hit continue. We’re going to do a simple one column layout here just to show you that it works, click Continue, we can go ahead and fill out … if we want to remove or add body classes at the CSS or CSS Classes to the body tag or a specific CSS code.
I wouldn’t recommend as I mentioned before adding a CSS Code here, I would add it to your theme If possible but it’s just something you can do if you need just a quick line of CSS or something and now we’re going to give it a title and add … in this case we’ll just do something quick and easy just the advance search from just to keep it simple. So I’ll create that variant and I will update and save that.

You’ll see now I have my Panel Variant and I have my Test Panel Variant. Each one has a different selection rule which determines how or which of these layouts actually gets executed. So now if we go ahead and come back, if I go to panel-page I still get the same page, if I go to panel-page/test you’ll notice I get my search form. You will notice that I see blocks on the left sidebar when I go to that one but I don’t see blocks when I go to the panel-page.

So what we can do here is the reason that is happening is because in this general tab I have disabled Drupal Blocks and Regions selected or checked. If I wanted to get rid of the blocks on this Test Panel I can do that by checking that box, I’m going to update and save. Now if I go panel page/test you’ll notice I do not have the blocks on the left sidebar anymore.

So that’s one way you can use selection rules and just to demonstrate how this Selection Rules work I’m going to go ahead and remove this URL Path Selection Rule, click Update and Save and come back and you’ll notice now that panel-page/test returns this first panel page even though this selection rule specifically matches it and the reason is you can think of it kind of a short circuit evaluation. It runs down this list and the first one that matches … the first one that matches all the selection rules that it needs to; in this case we’re saying all the selection rules must pass so we could have multiple here but they would have to match every selection rule and if it does it will display whatever is in this content section.

So in this case it never even gets to this last, the second variant because it matches the first one. So we’re going to go ahead and add our string URL Path back just to make it so it works the way we intend it to do, we’re also going to add a user role. We could do Permission or a Role and this is basically we can allow only certain users on the site depending on either Permission that they have or a Role that they have to see this specific variant or of this Panel page.

So if I do a user role and only show to authenticated users and I click Update and Save and then I’m going to come down into this Test Panel and in this case I’m just going to remove this because what I want to do here is I want anyone who is on this panel-page and is logged in or as an authenticated user to see this page here or this content or this way that this is laid out and I want anyone else … let’s say anonymous users in this case, I’ll go ahead and add URL path I guess just for panel page just so we don’t have any other URLs that can access this page but an anonymous user will fall through to the second section and only see the search form and you could think of many ways that you could do this based on if you wanted an authenticated user to see a specific version of a page but an anonymous user to see a completely different layout version of the page.

So as you can see I go to panel-page and I am logged in, I see this, if I happen to logout and I go to panel-page I see the search form. I don’t have as many options because anonymous user doesn’t have some of the advance search options that a logged in user or the administrator has but as you can see I’m at the same URL but I’m seeing two completely different results based on my role in this case. So that’s a quick introduction to what you can do with Variants and Selection Rules within Panels.

Next time we’ll cover Visibility Rules which will actually go over how to control a specific item that is being displayed on the Panel. Thanks for watching the Daily Dose of Drupal and we’ll see you next time.