Modales con CTools Auto-modal

13/11/2014
Modales con CTools Auto-modal

Creando modales de forma sencilla con CTools Auto-modal

Podemos encontrar multitud de módulos que nos permiten desarrollar modales en Drupal 7, en este artículo veremos como podemos desarrollar modales totalmente customizables basándonos en CTools y CTools Auto-modal.

Introducción 

En la mayoría de proyectos que desarrollamos tienen habitualmente interacciones con el usuario donde se deben mostrar formularios o contenido de forma modal. Para este artículo nos basaremos en un ejemplo, imaginemos que necesitamos que nuestros usuarios puedan rellenar un formulario en una ventana modal la cual se desplegará desde cualquier punto que necesitemos. Por ejemplo imaginemos que queremos hacer que nuestra página de administración de nuestro módulo se vea de forma modal. Si bien este ejemplo es muy sencillo nos ayudará a ver como realizar ventanas modales con CTools Auto-modal y CTools.

Antes de continuar debo aclarar que en este post nos basaremos en el fork https://github.com/wojtha/ctools_automodal ya que incorpora varias correcciones que la version dev de Drupal.org no tiene aplicada. Además, como ya veremos, incorpora varios hooks que nos permitirán realizar muchas cosas como añadir styles o definir acciones que hará la ventana modal cuando se envíe el formulario. Para más información de cómo surge este fork recomiendo leer https://www.drupal.org/node/1420534.

¿Por qué CTools Automodal?

CTools Auto-modal nos proporciona una capa de abstracción sobre CTools, de esta forma mediante su API podemos definir que paths van a ser modales a la vez que podemos definir el estilo de la mismas como por ejemplo el tamaño. Como bien he comentado, nos proporciona una capa de abstracción, así que podemos llegar a obtener los mismos resultados si usamos CTools únicamente. Sin embargo, bajo mi punto de vista y experiencia, si tenemos que desarrollar varias modales y usamos CTools únicamente, se hace un poco engorroso y finalmente posiblemente entremos en duplicidad de código etc..

Por tanto si tenemos varias paths en modal, sin duda CTools Auto-modal te ayudará simplificar el desarrollo de las mismas y mantendrá tu código más limpio y organizado ya que centraliza la generación de la modales y nosotros sólo tenemos que indicarle qué paths serán modales.

Creando ventanas modales con CTools Automodal

Volviendo a nuestro objetivo, supongamos que partimos de un módulo con una ruta de administración admin/config/system/modal-form, si quisiéramos establecer esta como modal simplemente debemos implementar el hook_modal_paths().

/**
 * Implements hook_modal_paths().
 */
function modal_form_example_modal_paths() {
  $paths = array();

  $paths['admin/config/system/modal-form'] = array(
    'close' => TRUE,
  );

  return $paths;
}

Donde:

 

  • La clave del array devuelto es la path que deseamos establecer como modal.
  • El parámetro close indica que la ventana debe cerrarse cuando haga submit.

De esta forma ya habrémos definido que nuestra path de administración debe abrirse en modal y ya la tendremos funcionando en todos los links que apunten a admin/config/system/modal-form , sencillo ¿verdad?

Otras opciones a la hora de definir modales

En el ejemplo anterior hemos establecido que la modal se cierre tras hacer submit con el parámetro ‘close’, sin embargo CTools Automodal nos aporta otras opciones a la hora de definir nuestras modales como por ejemplo:

  • Reload: Si establecemos este parámetro a TRUE haremos un reload de la página que lanzó el modal.
  • Redirect: Si establecemos una ruta en este parámetro haremos que nuestras modales se cierren y nos dirijamos a la ruta establecida tras hacer el submit de nuestro formulario.
  • Confirm: Mediante este parámetro podemos establecer un mensaje de confirmación dentro de la modal que se visualiza tras hacer submit.
  • Style: Este parámetro nos sirve para indicar qué estilos podemos aplicarle a la modal. Un uso de este parámetro lo veremos en post sucesivos.

Finalmente vamos a agregar un mensaje de confirmación en la modal tras el envío del formulario, para ello vamos a redefinir nuestra modal de la siguiente forma:

/**
 * Implements hook_modal_paths().
 */
function modal_form_example_modal_paths() {
  $paths = array();

  $paths['admin/config/system/modal-form'] = array(
    'confirm' => array(
      'title' => t('Confirmation'),
      'text' => t('The form was submitted.'),
    ),
  );

  return $paths;
}

En este ejemplo hemos establecido que se muestre el mensaje que hemos establecido en ‘text’ y el título de la modal será el que hemos establecido en ‘title’. Por defecto el callback que maneja la salida de nuestra pantalla de confirmación que usa CTools Automodal es ctools_automodal_confirmation_callback el cual además nos añade un botón de cierre de la ventana. Si queremos podemos establecer nuestro propio callback se la siguiente forma:

/**
 * Implements hook_modal_paths().
 */
function modal_form_example_modal_paths() {
  $paths = array();

  $paths['admin/config/system/modal-form'] = array(
    'confirm' => array(
      'title' => t('Confirmation'),
      'text' => t('The form was submitted.'),
      ‘callback’ => ‘modal_form_example_modal_callback’,
    ),
  );

  return $paths;
}

/**
 *  Define a confirmation callback for modal_form_example module.
 */
function modal_form_example_modal_callback($vars) {
  $options = array_shift($vars);
  $confirmation = array();

 /*
  *  Definir el render array.
  */ 

 return $confirmation;
}

Resumiendo lo aprendido

Con este post hemos visto que ventajas tenemos al usar CTools Automodal frente a implementar nuestras modales directamente con CTools, al mismo tiempo hemos visto qué mejoras tenemos si usamos el fork en github. Y por último hemos realizado un pequeño ejemplo de uso a la vez que hemos repasado qué opciones nos ofrece para implementar nuestras modales.

Comentarios

#40

Funcionó excelente, justo a

Funcionó excelente, justo a la medida de mis necesidades. Gracias por la información.

Añadir nuevo comentario

HTML Restringido

  • Etiquetas HTML permitidas: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Saltos automáticos de líneas y de párrafos.
  • Las direcciones de correos electrónicos y páginas web se convierten en enlaces automáticamente.