In this blog post we will show you how to allow content editors to edit similar but different "pages" in Drupal, all based on a shared content type without confusion, by hiding the unnecessary form elements.

There can be times when you wish to create several similar content types that only differ slightly from one another (perhaps by a field or two). Let’s take a website that posts environmental warnings on different types of pollution as an example. The site could report air pollution, water pollution and ground pollution warnings. One option is to create 3 separate content types, one for each type of pollution. Air pollution may have an air quality index field, while ground pollution may have a field that shows how it affects the property value of nearby buildings. The point here is that most of the fields for all 3 content types are the same. Discovery Date, Detail Review, Severity, and so on. An alternative implementation is to use one content type called Pollution and a field in that content type named ‘Pollution_type’. This field in the content type would allow us the flexibility to know what type of pollution we are dealing with.

The problem comes when an environmental investigator wishes to add a new air pollution warning. They will see a Drupal form with a ground pollution area field, land value field and all the other fields which are not related to the air pollution type. This can make the user interface crowded with unrelated fields, and unusable. So how can we have one content type and one form which adapts to the type of pollution a user has selected? 

Simple.

By overriding the node_form.tpl file in the themes directory for the ‘pollution’ node type, we can take full control of the appearance of our form. We can then add some JavaScript, or better yet JQuery, which will hide and show elements based on which review type the user has chosen.

Step 1: Set Up CCK Fields

To set this example up we need a simple CCK content type with the following fields (please see Drupal documentation about how to create CCK fields):

Review_ type : drop down with default fields: ( 1 – air, 2 – ground, 3 – water)
hazard_time (text box)
area_affected (text box)
warning_date (date)
warning_details (text area)

etc ...

Step 2: Override the Node Form for the Review Content Type

To do so you need to create a function in the template.php file (which will be found in your themes directory). The name of the function will need to take on the following form:

phptemplate_[content_type]_node_form() and in our case the function will look like the following:

function phptemplate_pollution_node_form($form) {
    drupal_add_js('sites/all/modules/js/pollution.js');  

    // Add JQuery to act on the form
    // load the review_node_form.tpl.php file to render this 
    //form.   
    return _phptemplate_callback('pollution_node_form',
    array('form' => $form));  
}

The reason why this works is because when Drupal processes the form for a particular node that has been queued up to render, it will search through the template.php file for a function in the form of phtemplate_[content_type]_node_form: If it finds one it will then load and render the form returned by this function.

Step 3: Render a Custom Form

In the themes directory you need to create the form theme function that is returned by the function in the template.php function. In our example this would be pollution_node_form.tpl.php

Now in the pollution_node_form.tpl.php file we create the HTML and attributes we need to render the form. This includes any tags and classes that will help us when we use JQuery to hide and show the form.

<?php>

<legend> Type And Title </legend>
<?php echo drupal_render($form['field_pollution_type']); ?>
    <?php echo drupal_render($form['title']); ?>
<div id=’warning’>
    <?php echo drupal_render($form['field_warning]); ?>
</div>
<div id= 'land_pollute_field’>
    <?php echo drupal_render($form['field_land_area_affected
]); ?>
</div>
<div id= ‘air_pollute_field’>
    <?php echo drupal_render($form['field_direction_of_
movement]); ?>
</div>
// render other field from the CCK content type ..
<?php>
    // Unset form elements that you don’t want rendered
        unset($form['attachments']);
        unset($form['menu']);
    …
     // Render the rest of the form …
        echo drupal_render($form);
?>

Now to get the JQuery to connect with the HTML id’s of each separate div we add the following JQuery file to the JavaScipt file referred to in Step 2. In our example the file should be named warning.js and be in the /themes/yourtheme/js directory.

$(document).ready( function() {
    // Need to initialize on page load which fields are shown on the page.
    $("#land_pollute_field").css("display","block");
    $("#water_pollute_field").css("display","none");
    $("#air_pollute_field").css("display","none");

    var choice = $("#edit-field-pollution-type").val();  
// You will need to find the ‘id’ of the dropdown list 
    switch(choice) {
        case “land":
            $("#land_pollute_field").css("display","block");
            $("#water_pollute_field").css("display","none");
            $("#air_pollute_field").css("display","none");

        break;
        case "air": 
            
            $("#water_pollute_field").css("display","none");
            $("#land_pollute_field").css("display","none");
            $("#air_pollute_field").css("display","block");

        break;
        case "water":
            $("#land_pollute_field").css("display","none");
            $("#water_pollute_field").css("display","block");
            $("#air_pollute_field").css("display","none");
        break;
});

From here its easy to expand the form and manipulate the layout as needed.

This past Thursday, Pat and I attended Communitech's Tech Leadership Conference, where we were a Silver Sponsor, and came away with a lot of great ideas. Jeremy Gutsche, founder of Trendhunter started the day with a very entertaining talk on innovation. Some key points were have a methodology on how you innovate - break out your steps. I would add that not only is it important to do this, but ensure that your team can talk about your methodology with people outside your company.

Seth Godin focused on the concept of ideas that spread win. It makes me wonder if too many companies and individuals are complicating things by trying to be all things to all people. This idea was echo'd at April Dunford's session at meshU earlier this year which Pat attended. Godin stressed the need to be remarkable, and tell a story that connects and engages your customers. They will spread the word. One needs to look no further than TOMS Shoes for a remarkable, compelling story. Buy a pair of shoes, and TOMS donates a pair to a child in need.

In between these sessions Pat and I split up to attend various sessions in the morning and afternoon. Some highlights - Mike McDerment, CEO of Freshbooks, clad in shorts and a t-shirt presenting with George Tsiolis of AGORACOM. How is moving back in to your parents house and having five friends come over every day to work out of the basement a great example of bootstrapping? One word... Dedication! Gerry Remers, COO of Christie Digital - where I think the only limit to 3D will soon be our imagination. Lastly, Mark Evans' Deep Dive on Social Media Tools was very informative showing how applications like Mr. Tweet, and Common Craft help you use tools like Twitter more effectively. This may be another sign of success in that people are building tools for tools.

Paul Kedrosky wrapped up the day talking about the new normal in the company. What is the new normal? For Startups it is finding customers and revenue before putting your efforts into venture capital.  Self-funding through revenue is a challenge, but as an owner, you have more options to explore ways to grow, and the confidence to say, "No," to investors who don't match your philosophy.

All told, a great day followed by an opportunity to mix afterwards over cocktails and appetizers.  Congratulations to Communitech on a successful day.

Codesta would like to announce our participation as a Silver Sponsor supporting Communitech's 2009 Tech Leadership Conference in Waterloo on May 14th. This promises to be a full day with Seth Godin, Paul Kedrosky, and Jeremy Gutsche establishing the focus on innovating to buck the trend of the current economic downturn.

We renewed our membership with Communitech earlier this year, and are excited to move from attendees at the Techworking Breakfasts, plus Sales and Agile P2P groups, to the role of sponsor. Although this is our third post in a row announcing a sponsorship, the common theme amongst each of the sponsorships is the spirit of entrepreneurship. Iain Klugman and his team at Communitech have done a tremendous job in the Waterloo Region helping the next round of innovative companies like AideRSS, and Well.ca launch their product offerings.

As a team, we are always excited by the entrepreneurial spirit of our clients and the innovative products that we help them build. Pat and I will be attending and we look forward to hearing the many great ideas so we can continue to help our clients "buck the trend."  

See you there.

Codesta is happy to announce our sponsorship of the Toronto Product Management Association (TPMA). We've been regular attendees at association events over the last year, and we've always been impressed by the organization, its membership and topics they cover.

Events have ranged from ProductCamp, to the challenges faced by Product Managers trying to roadmap product plans in the enterprise (a great session delivered by Chris Draper, Rogers Cable), to our very own Robert Osborne participating in a panel discussing on Web 2.0 and 3.0 technology updates.

We're very excited to contribute to this community and support the TPMA's growing membership base. In particular, we look forward to helping the TPMA develop new software tools and services to enable an even greater impact on the Product Management community-at-large.