Drupal 7 iToggle Module

By shane
Thu, 2013-01-10 22:29
Daily Dose of Drupal Episode #85

Share with Others

The Drupal 7 iToggle module is a simple module that makes checkboxes look much nicer. This module can be used on the promoted, published, and sticky checkboxes of a content type and also has modules that allow it to be integrated with Drupal Fields and the Drupal views.

In this episode you will learn:

  • How to download and install the iToggle module
  • How to use the iToggle module on Node promoted, published, and sticky checkboxes
  • How to use the iToggle Drupal module with Drupal 7 Fields
  • How to use the iToggle module with Drupal 7 Views

Hello everyone, hello everyone and welcome to another episode of the Daily Dose of Drupal. I am Shane Thomas; you can follow me on Twitter at smthomas3, also go to codekarate.com and sign up for the newsletter, check out the other posts and videos. Today we’re on Episode Number 85 of the Daily Dose of Drupal and we’re going to be covering the iToggle Module.

This is a neat little module that I just found out about recently and it basically allows you to have nice looking On Off checkboxes and you can use it either with the promoted status or publish status and sticky options on a node or content type, you can also use it on fields, you can create your own fields with the iToggle Fields Module and you can also use it in Views.

So we’re going to through those pretty quickly and take a look at all of them, I already downloaded this. After you download and installed the iToggle Module if you want to easily download the dependencies because it does have a few dependencies and you can use a handy Drush command, Drush iToggle-DL and that will take care of all that for you so you don’t have to do it manually.

So I’m going to go ahead and get started; so I already have the module here, I’m going to go ahead and install it again. So now that I have it installed we’re going to take a look at what it can do. So I’m going to pick a content type, in this case I’ll use the Article Content Type. I will come in to the Content Type’s page and you’ll see that there’s an iToggle Settings, I’m going to go ahead and turn that on, you can save that and we’ll go ahead and go to one of the article content … pieces of content and we will click Edit. If we come down now to the publishing options you’ll notice now the checkboxes are available and they of course work as you would expect nice little Yes, No checkboxes.

So all in all that’s essentially what the iToggle Module can do, is that functionality right there but it can also do a lot more so we’re going to go ahead and first look at the Configuration page. So you can see that there’s a couple of options here; we’re using the Production version, Animation Speed, we’re going to go ahead and enable Easing because we did install the jQuery Module or I guess that’s a plug-in not a module and we’ll go ahead and save that.

There’s some advance settings which you can use different callbacks and setup some Java Script but we’re not going to go through any of that today so we have that enabled and you’ll see it doesn’t … you’ll notice a huge difference but it does use the J Query Easing plug-in. And so now we’re going to go through the other modules that come with iToggle. The first one we’re going to go over is the iToggle Field.

So I’m going to go ahead and enable that, I’m now going to come into the same content type and I’m going to go to Manage Fields. You’ll notice I have added a Bullian Field here, I just called it a Bullian Test just to show what this can do, this one is just a simple On, Off checkbox, if I come to Manage Display I can now change this display to iToggle Widget and you can see it says the display types on and off, you can make it yes or no, 1 or 0 so there’s a couple of different options there, we’ll leave it as on or off, I will save it and I will come in to this test article and you’ll notice that right here it still looks the same, just a regular checkbox but since we changed the display on the front end it shows the nice little display.

It’s not clickable though so what we want to do is we also are going to add another field to this content type, come in to Article, go to Manage Fields, I’m going to add a Toggle Test Field and we’re going to select iToggle Widget. We’ll leave it at the iToggle Widget and go ahead and click Save.

Now we’re going to come in here and we’re going to make the Widget clickable, we could add Help Text, let’s change this to yes or no instead of the On or Off just to show the difference, here you can see the default value, the number of values and now we’ll save it, we’ll come back to our article page and edit this. Now you’ll notice that you can see I have the iToggle Widget. I’m going to go ahead and set this to No, I will save this and I will come to the Test Article page.

You’ll notice now that the Toggle Test is then set to No but you’ll also notice if I hover over it I can actually click on it. So now that I click that and if I come in here and edit this value again it has changed. It uses Ajax now to automatically update that value from the actual Node View page and sends it back and actually does an update so you don’t have to worry about actually editing it just to change that value.

So that’s kind of a neat little feature, now we’re going to take a quick look just really briefly of what the iToggle Views Module can do. So go ahead and turn that on and save it and I’m going to build a very simple view; I’ll call it Toggle View and I’m going to show content of type article, I’m going to create a page, I’m going to create a table of fields and I’m going to go ahead and hit continue and edit. For the Fields I’m going to add this iToggle section here and I’m going to say iToggle Promoted to Front Page, iToggle Content Status and iToggle Content Sticky and Lists. So I’ll add those … well we’ll just go ahead and leave this labels the way they are for now so you can see how it works so I’ll click apply in all three of those, I will click Save and I will view the page.
Now you can see if I want to unpromote Test Article 1 I can go ahead and just check it so I have a nice little view. So now it’s not promoted to the front page, if I come in here and edit this you will notice that it is no longer promoted to the front page. I can unpublished it here so now they’re all set to No, I come back to my View which I need to find the path to that so I’ll go back to my view here and you’ll see now it does even show up in the view because it’s not even published.

I can of course fix this in the View to make it show on published, go ahead and remove this just so the unpublished content will show up in the View so we can see this last example and I’ll go ahead and view the page you’ll see now my Test Article 1 is back, I can of course publish it by just checking that box and now my content is published. So you can see it can be really useful to allow you to easily publish and unpublished articles from nice looking interface without having to go in and click the Edit button and then scroll down and check the box and save it.

So it can definitely be useful especially if you’re doing a lot of administration with a lot of different content. I know I will be using it on future sites that have a lot of administration work that needs to be done. So go ahead and give it this module a try and let me know what you think and that’s it for this time on the Daily Dose of Drupal and we’ll be back again next time with another episode. Thank you for watching.


I use the development version of the Module Filter module to get the nice buttons on the module page. It is separate from the iToggle module and only works on the module page.

Post new comment