drupal-header

Drupal 7: Campos dependientes en formularios con Ctools

Hola gente como están. Hoy voy a hablar de campos dependientes en formularios.

Ctools entre las utilidades que nos da, nos proporciona la posibilidad de indicar cuales elementos de formulario dependen de otros.
Puede parecer algo que añada complejidad, pero nada mas lejos de la realidad. De hecho, para implementarlo solo necesitas dos lineas de código.

Elementos

Los elementos que son capaces de mostrar contenidos en base a lo seleccionado son:

  • checkbox/checkboxes
  • radios
  • select

Luego está lo que se muestre

Cualquier elemento FAPI es susceptible de ser dependiente de alguno de los elementos mencionados antes. por ejemplo, un textfield, un textarea, otros select, e incluso fieldsets.

Acá van tres ejemplos:

select

Es el mas simple de todos:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
< ?php function formulario_ejemplo_de_selects() { ctools_include('dependent'); $form['pais_select'] = array( '#title' => 'Selecciona un país',
    '#type' => 'select',
    '#required' => TRUE,
    '#options' => array(
      "es" => "España",
      "other" => "Otro"
    ),
  );
 
  $form['provincias_espanolas'] = array(
    '#title' => 'Selecciona tu provincia',
    '#type' => 'select',
    '#options' => array(
      0 => "Alava",
      1 => "Albacete",
      2 => "Etcétera"
    ),
    '#dependency' => array('edit-pais-select' => array('es')),
  );
 
  $form['provincia_extrangera'] = array(
    '#title' => t('Provincia'),
    '#description' => t('Indica la provincia de tu país'),
    '#type' => 'textfield',
    '#required' => TRUE,
    '#dependency' => array('edit-pais-select' => array('other')),
  );
 
  return $form;
}

Se aprecia rápidamente que es un formulario normal de toda la vida pero que tiene dos extras:

ctools_include(‘dependent’); Necesario en todo formulario que quiera hacer uso de elementos dependientes ya que es el plugin que nos lo permite.
‘#dependency’ => array(‘DOM id sin “#”‘ => array(‘un_valor_del_select’)), Es la propiedad que le dice a este elemento de formulario de quien depende. para que funcione solo tenés que indicarle cual es el DOM id del select (en este caso es #edit-pais-select) y cual es el valor que espera para mostrarse.

Explicado lo anterior se entiende bastante bien que se va a mostrar el select de provincias españolas solo si la opción seleccionada en $form[‘pais_select’] es “es” por ejemplo.

Y esa es la base del plugin. los radio y checkbox tienen unas particularidades así que dejo los ejemplos respectivos para aclararlo.

radios

Para usar radios es necesario cambiar un poco el selector que usamos en #dependency.

1
< ?php '#dependency' => array('radio:pais_radios' => array('other')),

Como pueden ver y a no estamos usando el DOM id, sino que en su lugar estamos usando “radio:” seguido del nombre del field “pais_radios“. Si se preguntan por que es así en los radios es porque necesita hacer referencia a la propiedad “name” del elemento ya renderizado (pueden inspeccionar los name de los radios en firebug para confirmarlo).

Aquí el ejemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
< ?php function formulario_ejemplo_de_radios() { ctools_include('dependent'); $form['pais_radios'] = array( '#title' => 'Selecciona un país',
    '#type' => 'radios',
    '#required' => TRUE,
    '#options' => array(
      "es" => "España",
      "other" => "Otro"
    ),
    '#default_value' => "other"
  );
 
  $form['provincias_espanolas'] = array(
    '#title' => 'Selecciona tu provincia',
    '#type' => 'select',
    '#options' => array(
      0 => "Alava",
      1 => "Albacete",
      2 => "Etcétera"
    ),
    '#dependency' => array('radio:pais_radios' => array('es')),
  );
 
  $form['provincia_extrangera'] = array(
    '#title' => t('Provincia'),
    '#description' => t('Indica la provincia de tu país'),
    '#type' => 'textfield',
    '#required' => TRUE,
    '#dependency' => array('radio:pais_radios' => array('other')),
  );
 
  return $form;
}

Checkbox/es

Nuevamente en los checkboxes #dependency cambia ligeramente. Seguimos usando el DOM id pero cada uno de los checkboxes tiene su propio id y el valor no es ni “es” ni “other” (son los ejemplos que estábamos usando en los formularios de muestra). En su lugar hay que usar 1 o 0 para indicar si queremos que los elementos se muestren cuando esté activo o inactivo.
Como soy malisimo explicando mejor les dejo el ejemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
< ?php function formulario_ejemplo_de_checkboxes() { ctools_include('dependent'); $form['pais_select'] = array( '#title' => 'Selecciona un país',
    '#type' => 'checkboxes',
    '#required' => TRUE,
    '#options' => array(
      "es" => "España",
      "other" => "Otro"
    ),
  );
 
  $form['provincias_espanolas'] = array(
    '#title' => 'Selecciona tu provincia',
    '#type' => 'select',
    '#options' => array(
      0 => "Alava",
      1 => "Albacete",
      2 => "Etcétera"
    ),
    '#dependency' => array('edit-pais-select-es' => array(1)),
  );
 
  $form['provincia_extrangera'] = array(
    '#title' => t('Provincia'),
    '#description' => t('Indica la provincia de tu país'),
    '#type' => 'textfield',
    '#required' => TRUE,
    '#dependency' => array('edit-pais-select-other' => array(1)),
  );
 
  return $form;
}

Para que puedan probarlo les adjunto un modulo con los ejemplos. Para probar cada uno de los ejemplos accedan a las siguientes URL:

  • /formulario-dependiente-de-select
  • /formulario-dependiente-de-radios
  • /formulario-dependiente-de-checkboxes

Descargar modulo de ejemplo

Chau!

3 Comments

  • Noemí 26/02/2013

    Hola Marcelo,

    Muy interesante esta forma de implementar campos dependientes. Otra forma de hacerlo alternativa al uso de #states, que publiqué hace poco en mi blog.
    Si no entiendo mal, con ctools la dependencia es de visibilidad no? Quiero decir, que el campo dependiente no se verá a menos que se cumpla la condición del campo del que depende. O también existen otras posibilidades?

    • Capy 28/02/2013

      Noe como estas, un gusto verte por aquí.
      Cierto, lo único que hace este plugin es mostrar otros campos en base a lo que se seleccione en el desplegable, checkbox o radios, y si, tenés razón, hace lo mismo que #states tal como menciona tu articulo.
      “Entre nosotros”, prefiero la técnica de #states, tiene mas posibilidades, pero no quería dejar de comentar esta funcionalidad ya que se presenta como una alternativa.

      Un saludo!

      • Noemí 28/02/2013

        Genial Marcelo. Si es otra de las cosas buenas que tiene Drupal, que hay muchos caminos para llegar al mismo sitio.
        Un abrazo!

:).