Formularios avanzados en Drupal 7 usando #states

Drupal Add comments

En el post Creating a basic form with Drupal 7 vimos cmo crear un formulario sencillo gracias a la API que nos proporciona Drupal.En esta ocasin crearemos un formulario dinmico, es decir responder a las acciones del usuario aadiendo o quitando campos del formulario todo ello de una forma amigable con el usuario.Para ello usaremos la propiedad #states
Creando el contexto del formulario:

En el post anterior ya creamos un contexto para ubicar un formulario, en este caso haremos lo mismo pero nuestro mdulo ser form_example_dynamic y en el cual definiremos un enlace en el menu navigation para nuestro formulario: form_example_dynamic.info: 1name = Form Example - Creating a Dynamic Form 2description = An example of a dynamic form. 3package = Pro Drupal Development 4core = 7.x files[] = form_example_dynamic.module 5 form_example_dynamic.module: 1 <?php 2 /** 3 * @file 4 * An example of how to use new #states Form API element,allowing 5 dynamic forms behavior with very simple setup 6 */ 7 /** 8 * Implements hook_menu() 9 */ 10function form_example_dynamic_menu(){ 11 $items['form_example_dynamic'] = array( 12 'title' => 'Ejemplo formulario dinmico', 'page callback' => 'drupal_get_form', 13 'page arguments' => array('form_example_dynamic_form'), 14 'access callback' => TRUE,

15 'type' => MENU_NORMAL_ITEM 16 ); return $items; 17} 18 19 20

Definiendo el formulario :

Supongamos que tenemos un site sobre alquiler de salas para celebrar reuniones, conferencias, etc.. Queremos que mediante un formulario podamos recibir las solicitudes de reserva de nuestros clientes.El formulario debe cumplir los siguientes requisitos: 1. El cliente pude solicitar tres tipos salas : sala de estudio , sala de conferencias pequea o sala de reuniones. 2. En caso de seleccionar la sala de estudio puede elegir si necesita sillas y/o ordenador , indicando a su vez cuantas sillas necesita y/o qu tipo de ordenador. 3. En caso de elegir la sala de conferencias puede indicar cuntos ordenadores necesita, qu habitacin deseara elegir y si desea pagar por reservarla o puede esperar a que quede libre. En el caso de que desee pagar por reservarla podr indicar el dia y hora en que desa hacer su reserva. 4. En caso de elegir la sala de reuniones se le permiritir escribir de forma libre el da , hora y duracin. 5. Independientemente del tipo de sala que escoja se debe permitir que el usuario deje informacin extra que sea de utilidad para su reserva, para ello se necesita un checkbox que active/desactive la posibilidad de agregar esta informacin. Atendiendo a estos requisitos podemos crear nuestro formulario usando el parmetro #states en los casos que necesitemos que se realice alguna accion dependiendo de algun evento : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
/** * Defines a Form() */ function form_example_dynamic_form($form, &$form_state){ //Radiobutton con las posibles tipos de salas $form['room_type'] = array( '#type' => 'radios', '#options' => drupal_map_assoc(array(t('Habitacin de estudio'), t('Sala de conferencias pequea'), t('Sala de reuniones'))), '#title' => t('Qu tipo de habitacin necesitas?'), ); //Fieldset con la informacin adicional de la habitacin de estudio. $form['study_room'] = array( '#type' => 'fieldset', '#title' => t('Detalles de la habitacin de estudio'), '#states' => array( //Accin que realizar: se har visible. 'visible' => array( //Cuando se realizara : room_type = Habitacion de estudio ':input[name="room_type"]' => array('value' => t('Habitacin de

17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63

estudio')), ), ), ); $form['study_room']['equipment'] = array( '#type' => 'checkboxes', '#title' => t('Detalles de la habitacin de estudio'), '#options' => drupal_map_assoc(array(t('Sillas'),t('PC'))), ); $form['study_room']['chairs'] = array( '#type' => 'textfield', '#title' => t('Cuntas sillas necesitas?'), '#size' => 4, '#states' => array( 'visible' => array( ':input[name="equipment[Sillas]"]' => array('checked' => TRUE), ), ), ); $form['study_room']['pc'] = array( '#type' => 'textfield', '#title' => t('Qu tipo de ordenador necesitas?'), '#size' => 15, '#states' => array( 'visible' => array( ':input[name="equipment[PC]"]' => array('checked' => TRUE), ), ), ); // Fieldset para la informacin adicional sobre la sala de conferencias. $form['small_comference_room'] = array( '#type' => 'fieldset', '#title' => t('Informacin sobre la sala de conferencias pequea'), '#size' => 15, '#states' => array( 'visible' => array( ':input[name="room_type"]' => array('value' => t('Sala de conferencias pequea')), ), ), ); $form['small_comference_room']['how_many_pcs'] = array( '#type' => 'select', '#title' => t('Cuntos PCs necesitas en la sala de conferencias'), '#options' => array( 1 => t('Uno'), 2 => t('Dos'), 3 => t('Tres'), 4 => t('Cuatro'), 5 => t('Cinco o ms'), ), ); $form['small_comference_room']['comment'] = array( '#type' => 'item', '#description' => t('Vaya,esos van a ser bastantes'), '#states' => array(

64 'visible' => array( 65 ':input[name="how_many_pcs"]' => array('value' => '5'), ), 66 ), 67 ); 68 $form['small_comference_room']['room_name'] = array( 69 '#type' => 'textfield', '#title' => t('Qu habitacion quiere usar? :'), 70 ); 71 $form['small_comference_room']['hours'] = array( 72 '#type' => 'select', 73 '#options' => drupal_map_assoc(array(t('Free'), t('Paid'))), 74 '#title' =>t('Quieres reservar la sala cuando este libre (Free) o pagar por uso prioritario (Paid)?'), 75 ); 76 $form['small_comference_room']['hours_writein'] = array( 77 '#type' => 'textfield', 78 '#size' =>50, '#title' =>t('Por favor introduce fecha,hora que te gustara reservar 79 la sala al igual que la duracin.'), 80 '#states' => array( 81 'visible' => array( 82 ':input[name="hours"]' => array('value' => t('Paid')), 83 ), ), 84 ); 85 $form['small_comference_room']['reminder'] = array( 86 '#type' => 'item', 87 '#description' =>t('Recuerda introducir la da,hora de comienzo y 88 fin'), '#states' => array( 89 'visible' => array( 90 ':input[name="hours"]' => array('value' => t('Paid')), 91 ':input[name="hours_writein"]' => array('filled' => TRUE), 92 ), ), 93 ); 94 95 //Fieldset para el caso "Sala de reuniones" 96 97 $form['board_room']= array( 98 '#type' => 'item', 99 '#title' =>t('Informacion sobre la sala de reuniones'), '#states' => array( 100 'visible' => array( 101 ':input[name="room_type"]' => array('value' => t('Sala de 102reuniones')), 103 ), ), 104 ); 105 $form['board_room']["more_info"]= array( 106 '#type' => 'textarea', 107 '#title' =>t('Por favor introduce fecha,hora que te gustara reservar 108la sala al igual que la duracin.'), ); 109 $form['board_room']["info_provide"]= array( 110

111 '#type' => 'checkbox', 112 '#title' =>t('Has proporcionado la informacion necesaria anteriormente'), 113 '#disabled' => TRUE, 114 '#states' => array( 115 'checked' => array( 116 ':input[name="more_info"]' => array('filled' => TRUE), ), 117 ), 118 ); 119 120 $form['expand_more_info'] = array( 121 '#type' => 'checkbox', 122 '#title' => t('Marca si deseas aportar informacin adicional'), ); 123 //Field set para la informacin adicional independientemente de la 124sala elegida. 125 $form['more_info'] = array( 126 '#type' => 'fieldset', '#title' => t('Instrucciones especiales'), 127 '#collapsible' => TRUE, 128 '#collapsed' => TRUE, 129 '#states' => array( 130 'expanded' => array( 131 ':input[name="expand_more_info"]' => array('checked' => TRUE), ), 132 ), 133 ); 134 135 $form['more_info']['feedback'] = array( 136 '#type' => 'textarea', '#title' => t('Por favor 137ayude en su peticin'), introduzca la informacon adicional que nos 138 ); 139 140 $form['submit'] = array( 141 '#type' => 'submit', 142 '#value' => t('Enviar'), ); 143 return $form; 144} 145 146 147 148 149 150 151 152 153 154 155 156 157

158 159 160 161 162 Observe la sintaxis de cmo se ha definido el parmetro #states : 1 $form['study_room'] = array( 2 '#type' => 'fieldset', 3 '#title' => t('Detalles de la habitacin de estudio'), 4 '#states' => array( 5 //Accin que realizar: se har visible. 'visible' => array( 6 //Cuando se realizara : room_type = Habitacion de estudio 7 ':input[name="room_type"]' => array('value' => t('Habitacin de 8 estudio')), 9 ), 10 ), ); 11 Con todo esto habremos terminado nuestro formulario y podremos comprobar que cumple cada uno de los requisitos especificados: