Cómo crear un Wizard con CCK

Posted April 24, 2007 - 15:48 by miolas

¿Qué pasa cuando creamos un tipo de contenido de unos 20 campos en CCK y se hace tediosa la carga ? Podriamos crear grupos de campos pero... por qué no un "Wizard" ?. Con unas pocas lineas de jQuery y algo de PHP podemos armar algo realmente vistoso.

Introducción

Un Wizard es un sistema muy utilzado en gran cantidad de aplicaciones y sitios web para poder realizar una acción en varios pasos o steps (in english).

Drupal por lo pronto no tiene un módulo consistente que permita generar un wizard a partir de un content type. Todo lo que se carga está en la misma pantalla.

Podemos decir que existen dos tipos de Wizard, uno estático, donde con el paso de los steps los campos del formulario no se modifican. Y otro caso es el dinámico, donde por ejemplo, el step 2 se generará a paritr de los datos cargados en el step 1..(me explico ?...mmm)

Nuestro ejemplo es totalmente estático y de alguna manera no respeta la política de desarrollo de Drupal, pero queda muy vistoso y funciona. :)

Preparando el Content Type con CCK

1. Crear un content type con CCK llamado por ejemplo: BIBLIOTECA.
2. BIBLIOTECA tendría los siguientes campos que definen un libro: title, description, author, genre, year, publisher, ISBN.

Organizando los pasos del Wizard

1. En el primer paso del WIZARD quiero mostrar: title y description.
2. En el segundo paso del WIZARD quiero mostrar: author, genre, year.
3. En el tercer paso del WIZARD quiero mostrar: publisher, ISBN.

Aclaración: Esto es sólo para que tengamos en mente en que momento vamos a mostrar cada campo.

Cómo dar formato a un Content Type generado con CCK

1. Es necesario crear un módulo para ésta tarea, lo vamos a llamar biblioteca.module y necesita tener su compañero biblioteca.info, tal cual se requiere en Drupal 5 y vamos a incluirlos en una carpeta dentro de la carpeta MODULES (no es lo ideal, pero bueno...).

2. Código Fuente del archivo biblioteca.info

<?php
name = Biblioteca
description = Transforma el Content Type Biblioteca en un Wizard
version = "5.x-1.0"
package = Others

version = "5.x-1.0"
project = "demo"
?>

3. Código fuente del archivo biblioteca.module que va a tener éste codigo el cual explico entre líneas:

<?php
  // buscamos el path donde se encuentra nuestro modulo BIBLIOTECA
  $path_to_module = drupal_get_path('module', 'biblioteca');

  // Añadimos nuestra libreria en Javascript que les comenté antes y que luego explicaré que hace.
  drupal_add_js($path_to_module . '/biblioteca.js');

  // el HOOK form_alter modifica la presentación del formulario del content type en cuestión.

  function biblioteca_form_alter($form_id, &$form) {
    if ($form_id == 'biblioteca_node_form') {
      $form['#theme'] = 'biblioteca';
    }
  }

  //  theme_biblioteca hace un override del theme organizando los fields, en éste caso como queremos, gracias a que en el hook_form_alter (arriba), los relacionamos.

  function theme_biblioteca($form){
    $output .= "<div id=\"wrapper_step1\"><h1>Datos Básicos</h1>";
      $output .= drupal_render($form['title']);
      $output .= drupal_render($form['field_description']);
    $output .= "<a href=\"#\" id=\"step2\">Siguiente >></a></div>";

    $output .= "<div id=\"wrapper_step2\"><h1>Otros Datos</h1>";
    $output .= "<a href=\"#\" id=\"back-step1\"><< Back</a>";
      $output .= drupal_render($form['field_author']);
      $output .= drupal_render($form['field_genre']);
      $output .= drupal_render($form['field_year']);
    $output .= "<a href=\"#\" id=\"step3\">Next >></a></div>";

    $output .= "<div id=\"wrapper_step3\"><h1>Datos de Editorial</h1>";
    $output .= "<a href=\"#\" id=\"back-step2\"><< Back</a>";
      $output .= drupal_render($form['field_publisher']);
      $output .= drupal_render($form['field_isbn']);

// hasta ahora no veiamos los botones de Preview y Submit... recien los mostramos en el step.

      $output .= drupal_render($form['preview']);
      $output .= drupal_render($form['submit']);
    $output .= "</div>";

    $output .= drupal_render($form);
    return $output;
}

?>

4. Código fuente del archivo biblioteca.js (es un poco rústico pero para el ejemplo es útil verlo asi....)

$(document).ready(function(){

//oculto los steps 2 y3 ...

   $("#wrapper_step2").hide();
   $("#wrapper_step3").hide();


// Cuando hacemos click para ir al step 2 ocultamos el contenedor del step1....  en las funciones sucesivas de éste archivo pueden ver como se ocultan y muestran el resto de los steps.

   $("#step2").click(function(){
          $jq("#wrapper_step1").hide();
          $jq("#wrapper_step2").show();
        return false;
     }
   );



   $("#back-step1").click(function(){
          $jq("#wrapper_step2").hide();
          $jq("#wrapper_step1").show();
        return false;
     }
   );


   $("#back-step2").click(function(){
          $jq("#wrapper_step3").hide();
          $jq("#wrapper_step2").show();
        return false;
     }
   );

   $("#step3").click(function(){
          $jq("#wrapper_step2").hide();
          $jq("#wrapper_step3").show();
        return false;
     }
   );
});

Bueno ésto es todo por ahora... estoy a disposición de todos lo que quieran colaborar con críticas y preguntas !

Saludos,

Inicie sesión o regístrese para enviar comentarios

Comentarios

Demo?

by vaserqno - Mayo 24 2007 - 17:50

Estaría muy bien que pusieras una demo en la web, para ver como quedaría!!
ya que la mayoría de gente hasta que no ve el resultado, no lo intenta hacer :-P

Pero muchas gracias, por el articulo! sencillo y funcional ;)