Responder al comentario

Crear una vista con links a forms que se abren en ventanas popup modales en Drupal 7 usando ctools

Hola, en esta nota voy a contar como hice en una instalación con Drupal 7 para solucionar el requerimiento de crear una vista con links para cambiar el estado de los elementos. Cada cambio de estado requiere un form donde se ingresa uno o más datos relacionados con el cambio de estado y el form debe mostrarse en una ventana popup modal.

La elección técnica recayó en ctools y programación custom.

Esta es la vista con los links:

Cada uno de esos links muestra una ventana popup modal. Por ejemplo así:

PASO 1: HABILITAR (o verificar que esté habilitado) EL MÓDULO PHP FILTER. Este módulo es necesario para colocar algo de código php en la vista (ver más adelante)

PASO 2: Crear la vista como usualmente se realiza (sin links todavía). En este caso la vista tiene un formato tipo "tabla" pero esto no tiene relación con nuestro problema.

PASO 3: Vamos a agregar algo de magia a la vista: agregamos código para incluir las librerías js de ctools. Para ello agregar un encabezado tipo GLOBAL: TEXT AREA. En formato de texto seleccionar PHP CODE (esto no aparece si antes no hicimos el paso 1). E ingresar el siguiente código:

<?php  {

ctools_include('modal');

ctools_modal_add_js();

 }

 

Luego de lo cual el encabezado quedaría así(en este caso lo puse un texto descriptivo para que se entienda mejor):

Bien! hasta ahora hemos logrado que la vista "permita" links modales. Todavía no agregamos ningún link.

Podemos en este momento salvar la vista. Vamos a dejarla por un rato al costado...como cuando cocinamos y dejamos "reposar" la masa...

 

PASO 4: CREAR CUSTOM CODE PARA GESTIONAR LOS VÍNCULOS MODALES.

Vamos a crear el código custom que gestiona los vinculos modales. Para ello creamos un módulo custom (no voy a adentrarme en esos detalles, asumiendo que ya se sabe como hacerlo) y vamos a agregar nuestros links en el hook_menu:

La nueva url apunta a nuestra función para gestionar el formulario modal y tiene un "parámetro mágico": %ctools_js que nos permite saber en nuestro código si el navegador desde donde se llama soporta Javascript. 

En nuestra función, preguntamos por esa variable primero ($ajax) y si es FALSE quiere decir que no podemos mostrar la ventana modal porque no están dadas las condiciones, por lo que simplemente mostramos el form al "viejo estilo drupal" : drupal_get_form.

 

Como vemos en el código la mayor parte del secreto está en llamar a nuestro form usando la función ctools_modal_form_wrapper, la cual se ocupa de agregarle todos los condimentos para transformar un form común en uno modal.

A continuación mostramos el código del form, lo cual no tiene nada de particular excepto en el botón "CANCELAR":

En realidad el botón CANCELAR podría no estar, ya que la ventana modal tiene el botón para cerrar sin hacer nada, pero en este caso fué un requerimiento del cliente. En este caso le pegamos al botón una acción de ctools que cierra la ventana. En caso de que el formulario no sea modal esto no tiene efecto.

 PASO 5: ACTIVAMOS EL NUEVO MÓDULO CREADO EN EL PASO ANTERIOR. 

Esto permite activar la nueva url para que podamos referenciarla en nuestra vista.

 

PASO 6: AGREGAMOS LOS LINKS A LA VISTA

Este es un paso muy sencillo, agregamos el link como cualquier link a  nuestra vista. En este caso, la url a la que debemos apuntar el link tiene 3 parámetros:

'mimodulo/cambio-rapido-estado-expediente/%/%/%ctools_js'

1) El NID del nodo que estoy mostrando

2) El nuevo estado al que quiero cambiar mi expediente (eso es algo propio de mi aplicación)

3) el parámetro mágico que gestiona ctools

 Notar que para el parámetro mágico le pongo "nojs" y dejo que lo maneje ctools.

El otro tema es el "link class". Si no ponemos "ctools-use-modal" nada va a funcionar, no se olviden de eso.

 

Y listo, ya está lista la view para que muestre el link que aparecerá modal.

 

TROUBLESHOOTING

- Si el formulario te aparece como una página y no en forma modal popup es porque no agregaste "ctools-use-modal", tu navegador no soporta javascript o no agregaste el encabezado de la view

 

Espero les sirva, les mando un abrazo desde Córdoba y hasta la próxima.

 

Responder

El contenido de este campo se mantiene privado y no se mostrará públicamente.
  • Las direcciones de las páginas web y las de correo se convierten en enlaces automáticamente.
  • Etiquetas HTML permitidas: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd><table><p><tbody><tr><td><th>
  • Saltos automáticos de líneas y de párrafos.
  • Se pueden agregar imágenes a este envío.

Más información sobre opciones de formato