Cómo crear un Wizard con CCK
¿Qué pasa cuando hacemos un content type 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
- Crear un content type con CCK llamado por ejemplo: BIBLIOTECA.
- BIBLIOTECA tendría los siguientes campos que definen un libro: title, description, author, genre, year, publisher, ISBN.
Organizando los pasos del Wizard
- En el primer paso del WIZARD quiero mostrar: title y description.
- En el segundo paso del WIZARD quiero mostrar: author, genre, year.
- 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
-
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...).
-
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"
?>- 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;
}
?>- 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,
Soporte con el wizard
Lo hice tal cual y el modulo no se ve en el listado de modules. Tengo el 5.x. Podreis ayudarme
Crear Carpeta
Omorales, esos tres archivos que generaste deben ir incluidos en un carpeta llamada: "biblioteca", por ejemplo. Aclaro ésto porque en texto no lo aclaré... confirmame... capaz es otro problema...
Saludos,
sobre un módulo para bibliotecas
buenas Miolas.
veo que controlas de drupal, ya se que es hecharle mucho morro pero drupal es la herramienta perfecta para las library 2.0, lo malo es que necesita el desarrollo de unos modulos como son el préstamo de materiales, con la consiguiente control de quien ha devuelto o no libros a tiempo y su penalización.
un modulo para montar un opac social que permita a las personas que han sacado prestado un material poder comentarlo en los comentarios.
y algunas cosillas más.
si te animas tratame en drupal.org.es
un saludo
oskar