Adding usability with the #states attribute

. Adding usability with the #states attribute

Show 1 video updates
1. In our next example, what we're going to do is add some usability to this form. Because this "Computer stats" field set only makes sense if the user answers "Yes" to "Do you own to computer?", we would only want to show that section if this was selected. And we can do that with an attribute called "state". So, lets go ahead and open the next step file, which is number six, which is called "state-attribute", and then go ahead and copy all the code and paste it into your "input dot module" file overriding everything that's there again and save it.

2. Ok. This file is identical to the previous one except we're added these lines right here in our "import_more_form" function. All we've done is added the "states" attribute to the "Computer stats" item in the form array.

3. This "states" attribute tells the form what different sort of actions are associated with different states. So in this, what we are going to do is make this visible only if the input that's called "computer" has a value of "yes". So here are the different parts of this.

4. First is the "state". In this case, we are making it "visible". So this is the state which we are going to make it, not the state in which it begins.

5. And we're going to make it visible if this item here and this element is a selector in jQuery and what we're doing is taking an input and we're passing it a attribute and a value that that input should have. So what we can do is use the name that we assign to it here. We assigned it the name of "computer" and we can use that here as the name because if you look at the HTML of the input itself, the name is the same as what we assigned it in the form array.

6. So we are taking this jQuery selector, and we'll cover jQuery selectors in another video, and we're assigning it an array. And the array contains this state in which this item should be in, in order to trigger this state in our current field. So, it's checking for a value of "yes" and if the value is"yes", then it will trigger this state.

7. Ok. Let's go ahead and save this and look at this in action so you can see it. Now save it.

8. I'm going to jump back to our form and refresh the page.
Become a member to view the 2nd half of the transcript (and the video, of course). See the pricing options over on the left.
Drupal 7 Development Core Concepts

In our most popular collection, we build a strong foundation for developing in Drupal, covering the most commonly used APIs, building practical and interesting modules, and covering a tremendous amount of ground. Just a few of the topics we cover:

  • How to build and manipulate forms with the Form API
  • How to write jQuery to build a rich interface
  • How to programmatically manipulate content and user data
Video Library
21m 46sIntroduction
21m1. Welcome to BuildAModule
10h 36mBuild Your First Drupal 7 Web Site
36m1. Introduction to Our Project and Reviewing Mockups
35m2. How to Create and Edit Content
38m3. How to Work With Menus, Modules and Webform
41m4. How to Work With Content Types and Fields
37m5. How to Work With Pathauto and Introduction to Views
32m6. How to Add Fields to a View and Work With the Date Module
36m7. How to Fix Broken Views and Work With Taxonomy
35m8. How to use Term and Node Reference Fields
31m9. How to Work With Blocks and Permissions
31m10. Overview of Permissions and Text Formats
34m11. Configuring Text Formats and Setting Up a Wysiwyg
33m12. Working With Custom Blocks and Image Styles
34m13. How to Work With CSS
34m14. Troubleshooting Module Installation and Configuration
33m15. Updating Modules and Manipulating CSS
32m16. More CSS Updates and Troubleshooting Text Formats
31m17. How to Evaluate Modules and Install IMCE
44m18. How to configure IMCE and Wrap Up Our Project
6h 18mAdvanced Site Building in Drupal 7
23m1. Welcome to Advanced Site Building
30m2. How to Set Up Administration Tools to Speed Up Productivity
36m3. How to Configure Content Type Settings and Splitting Fields Between Types
41m4. How to Use Display Suite for Grouping Fields and Positioning Content
14m5. How to Use the Context Module for Positioning Content
42m6. How to Use Panels for Positioning Content
48m7. How to Import Content With Feeds
48m8. Advanced Views
30m9. Where Display Modules Overlap and URL Strategy
28m10. How to Work With User Fields and Import Users
34m11. Formatting a Blog Entry Page
12h 48mPHP Programming Basics
25m1. Series Introduction and Your First PHP Script
45m2. Working With Strings and Variables in PHP
31m3. How to Work With Arrays in PHP
40m4. Logic, Control Structures and Looping
1h5. Creating Custom Functions and Working With External Data
22m6. Troubleshooting errors and using operators
1h7. Working With Forms in PHP
1h8. Working With Sessions in PHP
1h9. Working With the (MySQL) Database
1h10. Working with CRUD functionality and our database
2h11. How to Build Your Own Content Management System and Understand Drupal Better
1h12. Generalizing Functionality and Object Oriented Programming Primer
12h 23mDrupal 7 Development Core Concepts
22m1. Welcome to Module Building
35m2. How to Build Module Scaffolding
1h3. How Hooks Work and How to Use Them
26m4. Overview of Coding Standards
51m5. Development Tips and Tricks
1h6. How to Build and Manipulate Forms with the Form API
1h7. How to Add and Manipulate Pages With the Menu System
52m8. How to Add to and Manipulate the Theme Layer
1h9. How to Work With the Database
54m10. How to Work With Users
1h11. How to Work With Nodes
2h12. How to Work With JavaScript and jQuery
9h 25mChange Management and Version Control
49m1. Installing Git and Working on the Command Line
58m2. Staging, Committing and Undoing in Git
34m3. Branching, Merging and Tagging in Git
1h4. Working With Remote Git Repositories
38m5. Deploying Releases, Features, and Fixes With Git
24m6. How to Version Control the Database
1h7. How To Version Control Site Configuration With Features
25m8. How To Manage Non-Exportable Configuration Changes
57m9. How to Override Shared Features and Modify Text
33m10. How to Upgrade Drupal and Patch Contributed Modules
37m11. How to Install Drupal, Manage Features and Perform Common Tasks Using Drush
31m12. How to Configure Drush and use Drush Make
37m13. How to Extend Drush and Other Useful Drush Tools
8h 1mDrupal Theming Essentials
1h1. Important Drupal Theming Concepts
1h2. How to Build and Modify a Drupal Theme or Sub-Theme
1h3. How to Build and Modify a Drupal Theme or Sub-Theme, Part 2
54m4. Theme CSS File Structure and Extended Drupal Theme Building
1h5. Template Files, Theme Function Overrides and Preprocessing Functions
1h6. How to Work With Drupal Theme Settings
8h 55mDrupal 6 Development and Tools
3h1. Essential Concepts
27m2. Working with jQuery and Javascript
1h3. Securing a Module
58m4. Testing and Debugging a Module
1h5. PHP and MySQL Basics
1h6. Using Komodo Edit as an IDE
2h 17mWorking with Files and the File API
39m1. How to Work With Files and the File API
1h2. How to Work With Files and the File API, Part 2
22m 53sAppendix
22m1. Mentored Training Resources
Double-tap to return to library

Loading...