Archive for March, 2009

Create Drupal Form elements like ‘DATE’ element

Drupal Form Elements

Drupal Form Elements

Sometime we require from elements for filling “Height” or “Credit card expiry date” or “Phone number(in any specific format)”. We can easily create these type of form elements in Drupal. I am showing here how we can create such type of form elements.

Here I am taking the example of “Height” element. For height element we require two select boxes. One for showing feet and other for inches.

Step 1: First create “hook_elements()” in your module. This hook allows modules to declare their own Forms API element types and specify their default values.

function module_name_elements() {
	return array(
	'height' => array(
     	'#input' => TRUE,
     	'#process' => array('expand_height'),
     	'#element_validate' => array('height_validate'),
  	),
}

Step 2: Define the “#process” callback function “expand_height()”. This will take $element as argument and process it.

function expand_height($element) {
	// Assigning default values to element. You can override these values by passing your own values using "#default_value".
	if (empty($element['#value'])) {
    	$element['#value'] = array(
      		'feet' => '-',
      		'inch' => '-',
    	);
  	}
 
	$element['#tree'] = TRUE;
 
	$parents = $element['#parents'];
	$parents[] = 'feet';
    	$element['feet'] = array(
      	'#type' => 'select',
		'#default_value' => $element['#value']['feet'],
		'#options' => array('-' => '-', '2' => '2', '3' => '3', '4' => '4', '5' => '5', '6' => '6', '7' => '7', '8' => '8',),
		'#suffix' => t('ft.'),
    	);
 
	$parents = $element['#parents'];
    	$parents[] = 'inch';
    	$element['inch'] = array(
		'#type' => 'select',
		'#default_value' => $element['#value']['inch'],
		'#options' => array('-' => '-', '0' => '0', '1' => '1', '2' => '2', '3' => '3', '4' => '4', '5' => '5', '6' => '6', 
			'7' => '7', '8' => '8', '9' => '9', '10' => '10', '11' => '11'),
		'#suffix' => t('in.'),
    	);
 
	return $element;
}

Step 3: Theme your custom element by defining “theme_hook()” for your element.

function theme_height($element) {
  	return theme('form_element', $element, '<div class="container-inline">'. $element['#children'] .'</div>');
}

step 4: We need to register our above theme function “theme_height()” in theme registry. We can do that using “hook_theme()” hook. To see effect of your code, clear your cache because all theme hook is cached by Drupal.

function module_name_theme() {
	return array(
		'height' => array(
      		'arguments' => array('element' => NULL))
  	);
}

Step 5: Define “hook_validate()” for your element. This function is automatically called by FORM API and it validate the given value of element. We verify the values of element and if value is not valid we will set error message using form_error() function. This function take $element as argument.

function height_validate($element) {
  	if (trim($element['#value']['feet']) == '-' || trim($element['#value']['inch']) == '-') {
    		form_error($element, t('The specified height is invalid.'));
  	}
}

How you use it:

$user->height = array('feet' => '5', 'inch' => '8');
// Create element of 'type' height
$form['height'] = array('#type' => 'height',
		'#title' => t('Height'),
		'#required' => TRUE,
		'#default_value' => isset($user->height) ? $user->height : array('feet' => '-', 'inch' => '-'),
	);
 
//Access it in form_submit() like this
$height = $edit['height']['feet']. '-' . $edit['height']['inch'];

Code for Phone Number Element

<php
function mymodule_theme() {
  	return array(
    	'phone' => array(
      	'arguments' => array('element' => NULL))
  	);
}
 
function mymodule_elements() {
	return array(
		'phone' => array(
     	'#input' => TRUE,
     	'#process' => array('expand_phone'),
     	'#element_validate' => array('phone_validate'),
  		),
  	);
}
 
function expand_phone($element) {
	if (empty($element['#value'])) {
    	$element['#value'] = array(
      		'part1' => '',
      		'part2' => '',
      		'part3' => '',
    	);
  	}
 
	$element['#tree'] = TRUE;
 
	$parents = $element['#parents'];
        $parents[] = 'part1';
        $element['part1'] = array(
      	'#type' => 'textfield',
		'#size' => 4,
		'#maxlength' => 3,
		'#default_value' => $element['#value']['part1'],
		'#prefix' => '(',
		'#suffix' => ')',
    );
 
	$parents = $element['#parents'];
        $parents[] = 'part2';
        $element['part2'] = array(
      	'#type' => 'textfield',
		'#size' => 4,
		'#maxlength' => 3,
		'#default_value' => $element['#value']['part2'],
		'#suffix' => '-',
    );
 
	$parents = $element['#parents'];
        $parents[] = 'part3';
        $element['part3'] = array(
      	'#type' => 'textfield',
		'#size' => 6,
		'#maxlength' => 4,
		'#default_value' => $element['#value']['part3'],
    );
 
	return $element;
}
 
function theme_phone($element) {
  	return theme('form_element', $element, '<div class="container-inline">'. $element['#children'] .'</div>');
}
 
function phone_validate($element) {
  	if (trim($element['#value']['part1']) == '' || trim($element['#value']['part2']) == '' || trim($element['#value']['part3']) == '' ||
  		!is_numeric($element['#value']['part1']) || !is_numeric($element['#value']['part2']) || !is_numeric($element['#value']['part3'])) {
    	form_error($element, t('The specified phone number is invalid.'));
  	}
}
?>

Code for Credit card expiry date Element

<?php
function mymodule_theme() {
  	return array(
    	'cardexpdate' => array(
       	'arguments' => array('element' => NULL))
	);
}
 
function mymodule_elements() {
	return array(
		'cardexpdate' => array(
     	        '#input' => TRUE,
     	        '#process' => array('expand_cardexpdate'),
     	        '#element_validate' => array('cardexpdate_validate'),
  		),
  	);
}
 
function expand_cardexpdate($element) {
	$next_month_date = strtotime("+1 month");
	$month = date('n', $next_month_date);
	$year = date('Y', $next_month_date);
 
	if (empty($element['#value'])) {
		$element['#value'] = array(
      		'month' => $month,
      		'year' => $year,
    	);
  	}
 
	$element['#tree'] = TRUE;
 
	$parents = $element['#parents'];
        $parents[] = 'month';
        $element['month'] = array(
      	'#type' => 'select',
		'#default_value' => $element['#value']['month'],
		'#options' => drupal_map_assoc(range(1, 12), 'cardexpdate_map_month'),
    );
 
	$parents = $element['#parents'];
        $parents[] = 'year';
        $element['year'] = array(
		'#type' => 'select',
		'#default_value' => $element['#value']['year'],
		'#options' => drupal_map_assoc(range($year, 2020)),
    );
 
	return $element;
}
 
function theme_cardexpdate($element) {
	return theme('form_element', $element, '<div class="container-inline">'. $element['#children'] .'</div>');
}
 
function cardexpdate_validate($element) {
	$month = $element['#value']['month'];
	$year = $element['#value']['year'];
 
	$exp_date = mktime(0, 0, 0, $month, date('j'), $year);
 
	if ($exp_date < time()) {
    	form_error($element, t('The specified expiry date is invalid.'));
  	}
}
 
function cardexpdate_map_month($month) {
	return format_date(gmmktime(0, 0, 0, $month, 2, 1970), 'custom', 'm', 0);
}
?>

,

2 Comments


Assign attributes to options using FormAPI in Drupal

Drupal FAPI does not support this feature but we can add attributes to options by slightly modifying form.inc file.

You only need to change following line in form.inc file.

<?php
        $options .= '<option value="'. check_plain($key) .'"'. $selected .'>'. 
				check_plain($choice) .'</option>';
	//line no. 1437 of form_select_options() in drupal 6.10
?>

with this

<?php
	$options .= '<option value="'. check_plain($key) .'"'. $selected . 
			drupal_attributes($element['#options_attribute'][$key]) . '>'. 
			check_plain($choice) .'</option>';
?>

You can use like it.

<?php
    $shipping_methods = array('1' => 'Standard Two-Day ($17.00 Total Shipping Price)',
        '2' => 'Priority Overnight ($26.00 Total Shipping Price)',
        '3' => 'FedEx Next Day Delivery $23.95',
        '4' => 'FedEx Next Day Delivery $23.95');
 
    $shipping_method_options = array(
        '1' => array('price' => '17.00', 'class' => 'one'),
        '2' => array('price' => '26.00', 'class' => 'two'),
        '3' => array('price' => '23.95', 'class' => 'three'),
        '4' => array('price' => '23.95', 'class' => 'four'));
 
    $form['default_shipping_method'] = array(
        '#title' => t('Shipping Method'),
        '#type' => 'select',
        '#options' => $shipping_methods,
        '#options_attribute' => $shipping_method_options,
        '#default_value' => variable_get('default_shipping_method', 0),
        '#description' => t('You can change your shipping method from here.'),
    );
?>

, ,

1 Comment


Create simple left tree menu using jQuery

We can easily create left tree menus for our website. Left tree menus provide easy navigation to our website and our website look more organized.

Left Tree Menu Image

Left Tree Menu Image

You can view the working demo here.

You can download the source code here.

In tree menu each item is called node. A node further can have child nodes. We used unordered list for menus “<ul></ul>“. We are just toggling the “display” property of “<ul>” from “block” to “none” and “none” to “block” when user click on it. The “block” will expand the menu and “none” collapsed it.

HTML Code:-

<div class="content">
	<ul id="root" class="menu">
		<li>
			<a href='javascript:void(0);' childid = 'c_12' class='cat_close category'>&nbsp;</a>
			<a href='javascript:void(0);'>Diabeties</a>
		</li>
		<ul id='c_13'>
			<li>
           		<a href='javascript:void(0);' class='product'>&nbsp;</a>
            	<a href='javascript:void(0);'>Skelaxin</a>
            </li>
        </ul>
        <li>
            <a href='javascript:void(0);' childid = 'c_8' class='cat_close category'>&nbsp;</a>
            <a href='javascript:void(0);'>Pain Killers</a>
        </li>
        <ul id='c_8'>
            <li>
        	    <a href='javascript:void(0);' childid = 'c_11' class='cat_close category'>&nbsp;</a>
            	<a href='javascript:void(0);'>Brufin</a>
            </li>
            <li>
	            <a href='javascript:void(0);' childid = 'c_10' class='cat_close category'>&nbsp;</a>
    	        <a href='javascript:void(0);'>D Cold Plus</a>
            </li>
        </ul>
        <li>
            <a href='javascript:void(0);' childid = 'c_5' class='cat_close category'>&nbsp;</a>
            <a href='javascript:void(0);'>Ultracet</a>
        </li>
        <ul id='c_5'>
            <li>
        	    <a href='javascript:void(0);' childid = 'c_7' class='cat_close category'>&nbsp;</a>
         	   	<a href='javascript:void(0);'>Ultracet</a>
            </li>
            <ul id='c_7'>
            	<li>
            		<a href='javascript:void(0);' class='product'>&nbsp;</a>
            		<a href='javascript:void(0);'>Generic Ultracet</a>
            	</li>
            </ul>
        </ul>
        <li>
            <a href='javascript:void(0);' childid = 'c_3' class='cat_close category'>&nbsp;</a>
            <a href='javascript:void(0);'>Watson</a>
        </li>
        <li>
            <a href='javascript:void(0);' class='product'>&nbsp;</a>
            <a href='javascript:void(0);'>Carisoprodol</a>
        </li>
        <li>
            <a href='javascript:void(0);' class='product'>&nbsp;</a>
            <a href='javascript:void(0);'>Levitra</a>
        </li>
	</ul>
</div>

JavaScript Code:-

<script type="text/javascript">
$(document).ready(function() {
	$("#root ul").each(function() {$(this).css("display", "none");});
	$("#root .category").click(function() {
		var childid = "#" + $(this).attr("childid");
		if ($(childid).css("display") == "none") {$(childid).css("display", "block");}
		else {$(childid).css("display", "none");}
		if ($(this).hasClass("cat_close")) {$(this).removeClass("cat_close").addClass("cat_open");}
		else{$(this).removeClass("cat_open").addClass("cat_close");}
	});
});
</script>

, ,

1 Comment


Create Drupal form using theme_table() like module list form

I am showing here an example for Drupal form like you saw in Module list pages.

Drupal Form using theme_table() function

Drupal Form using theme_table() function

I am considering here an example of Featured Product Management form so we can easily understand it.

Step 1:- Create a menu hook for registering your page path. This registered path will display the featured product management page.

<?php
function product_menu() {
	$items = array();
	$items['featured_product_mgmt'] = array(
		‘title’ => ‘Manage featured product’,
		‘page callback’ => ‘drupal_get_form’,
		‘page arguments’ => array(’featured_product_form’),
		‘access arguments’ => array(’access product’),
		‘type’ => MENU_CALLBACK,
	);
    return $items;
}
?>

Step 2:- Create form object for your form. Here the important part is “featured” form element of type “checkboxes”. Checkboxes type is a group of checkbox and format a set of checkboxes. #options is an associative array, where the key is the #return_value of the checkbox and the value is displayed. We will store other information like name, category, discount etc. of product in form array so we can display it later.

<?php
function featured_product_form() {
	$query = “SELECT p.*, UNIX_TIMESTAMP(p.create_date) AS create_date, c.name FROM {product} p LEFT JOIN {category} c ON p.cid = c.cid
	WHERE p.status = 1 ORDER BY p.product_name”;
	$rs = db_query($query);
 
	$featured_products = featured_product();
	$status = array();
 
	if ($rs) {
		while ($data = db_fetch_object($rs)) {
            $options[$data->productid] =;
 
            $form[$data->productid]['name'] = array(#value’ => stripslashes($data->product_name));
            $form[$data->productid]['category'] = array(#value’ => stripslashes($data->name));
            $form[$data->productid]['discount'] = array(#value’ => $data->discount . ‘%’);
            $form[$data->productid]['createdon'] = array(#value’ => date(’m-d-Y’, $data->create_date));
 
            if (in_array($data->productid, $featured_products)) {
                $status[] = $data->productid;
            }
		}
	}
 
	$form['featured'] = array(#type’ => ‘checkboxes’,#options’ => $options,#default_value’ => $status,
	);
 
	$form['submit'] = array(#type’ => ’submit’,#value’ => t(’Submit’),
	);
 
	$form['cancel'] = array(#type’ => ‘markup’,#value’ => l(t(’Cancel’), ‘dashboard’),
	);
 
	$form['#redirect'] = ‘featured_product_mgmt’;
 
	return $form;
}
?>

Step 3:- Create a form submit function. Any form submitted using the “submit” button will pass to their corresponding function if it is available. We will extract the user input from the form array and update our database accordingly.

<?php
function featured_product_form_submit($form_id, $form) {
	$form_values = $form['values'];
	$featured = $form_values['featured'];
 
	$selected_products = array();
 
	foreach($featured as $key => $value) {
		if ($value) {
			$selected_products[] =($value);
		}
	}
 
	$value_string = @implode(,', $selected_products);
 
	// Delete all previous featured products
	$query = “DELETE FROM {product_featured}”;
	db_query($query);
 
	// Insert new featured products
	if (count($selected_products)) {
		$query = “INSERT INTO {product_featured}(productid) VALUES $value_string”;
		db_query($query);
	}
 
	drupal_set_message(t(’Featured product list has been updated successfully.’));
}
?>

Step 4:- Register your modules theme implementation using “hook_theme()” function.

<?php
function product_theme() {
	return array(
		‘featured_product_form’ => array(‘arguments’ => array(’form’ => NULL),),
	);
}
?>

Step 5:- Then finally define your theme function which actually format your form layout in list using the $form array. Using “foreach” loop we navigate through each item of $form array and create $rows array which we pass to “theme_table()” function later. Create the header of your table and call “table_theme()” function with $header and $rows parameters. Call the “drupal_render()” function for render the submit and cancel buttons.

<?php
function theme_featured_product_form($form) {
	$rows = array();
	foreach (element_children($form) as $key) {
		$row = array();
		if (isset($form[$key]['name'])) {
 
			$status = drupal_render($form['featured'][$key]);
			$row[] = array(’data’ => $status,class=> ‘checkbox’);
 
			$row[] = ‘‘. drupal_render($form[$key]['name']) .’‘;
			$row[] = array(’data’ => drupal_render($form[$key]['category']));
			$row[] = array(’data’ => drupal_render($form[$key]['discount']));
			$row[] = array(’data’ => drupal_render($form[$key]['createdon']));
 
			$rows[] = $row;
		}
	}
 
	// Individual table headers.
	$header = array();
	$header[] = array(’data’ => t(’Featured’),class=> ‘checkbox’);
	$header[] = t(’Name’);
	$header[] = t(’Category’);
	$header[] = t(’Discount’);
	$header[] = t(’Created on’);
 
	$output = theme(’table’, $header, $rows);
	$output .= drupal_render($form);
	return $output;
}
?>

, ,

21 Comments


Add image with menu in joomla

You can add image with menu name in Joomla.
You need to make some changes
1: modulesmod_mainmenuhelper.php
line no 300

change this
$tmp->name = null;
to:
$tmp->name = ‘<span><![CDATA['.$item->name.']]></span>’;

2: Some setting in admin, open module manager, select main menu manager,click on Other Parameter, enable
a: Show Menu Images
b: Menu Image Link
Now to add image for the menu, select menu from menu manager, select Parameters (System), then select image

3 Comments