Como crear fácilmente un modal en Drupal

Cuando estamos desarrollando una web y empezamos a pensar en la experiencia de usuario, muchas veces terminamos añadiendo algún modal. Esto puede ser algo tedioso en algunos casos, pero por suerte Drupal nos ofrece una API, o mejor dicho una integración, con la que podremos crear modales fácilmente.

Esta integración la podemos utilizar tanto si somos desarrolladores como si somos site builders (aunque en este caso, tal vez no funcione siempre, pero debería), y es que podemos hacerlo desde una simple etiqueta "<a>" en html y añadiendo unos atributos, como desde php con un render array.

Entendiendo los modales de Drupal

Antes de continuar con los ejemplos, tenemos que entender algunas cosas, y es que normalmente se prepara el contenido del modal en la propia web y posteriormente con JS se muestra en el mismo modal, este suele ser el comportamiento habitual de cualquier desarrollador.

Pero en Drupal no funcionan así, si no que los modales están integrados con la etiqueta <a> de html ya que funcionan como enlaces, y al hacer clic en el enlace es cuando Drupal carga la información de la respuesta y la muestra en el modal, de modo que nos resulta muy sencillo poder cargar la información de manera dinámica. Esto también quiere decir, que tiene que existir una url a la que acceder, puede ser un nodo, un formulario o una view por poner algunos ejemplos.

 Pero siempre tiene que ser un array renderizable, es decir, no podemos mostrar en un modal una web externa embebida (a no ser que nosotros mismos desarrollemos esa funcionalidad).

Lo segundo, es que se basa en Jquery UI, esto que quiere decir? pues que disponemos de todas las opciones de las que Jquery UI disponga para la configuración de los modales, aunque añadirlas puede ser algo complejo y anticuado a nivel de JS.

Manualmente con un enlace

Esta es la opción más simple, pero también podríamos decir que la menos recomendada, pero siempre puede salvar a quien no pueda tocar código.

Consiste en crear una etiqueta <a> con algunos atributos indicando que queremos abrir una url en un modal, y es de la siguiente manera:

<a class="use-ajax" data-dialog-type="modal" href="/search/node">Busqueda</a>

Y listo, con esa simple línea ya podremos tener un modal que apunte a la página de búsqueda de nodos (fijaros en la URL /search/node).

Como se ha comentado previamente, es posible que no funcione, esto se debe a que se necesita de la librería 'core/drupal.ajax' y desde un editor de texto no podemos añadirla como dependencia, aunque por lo general está añadida.

En código con PHP

Cuando pasamos a la parte de código, también podemos crear uno fácilmente con un render array, y es que podemos usar 

$elements['link'] = [
  '#title' => 'Normal Modal!',
  '#type' => 'link',
  '#url' => Url::fromRoute('ruta.a.usar.como.modal'),
  '#attributes' => [
    'class' => ['use-ajax'],
    'data-dialog-type' => 'modal',
    'data-dialog-options' = json_encode($options),
   ],
   '#attached' => [
     'library' => [
       'core/drupal.dialog.ajax',
     ],
  ],
];

Fijaros lo facil que puede ser crear un modal con un render array, es un render array de tipo link, y le pasamos la ruta, los atributos que necesita y le adjuntamos la librería de ajax de Drupal ya que es necesaria para las peticiones.

Lo que debemos tener en cuenta, es que el atributo data-dialog-options es opcional, y es que en ese atributo podemos indicar en formato JSON las opciones que deseemos utilizar de Jquery UI, pero para hacerlo más fácil podemos indicarlas en un array de php y después transformarlas a JSON.

La mayor ventaja que tenemos haciéndolo desde php, es que disponemos de control total sobre lo que queremos hacer, y podemos personalizar la URL enviando información extra como parámetros a la ruta o a la misma URL. Para mas información sobre las URL, podéis visitar el siguiente enlace donde tenéis mucha información sobre la generación de enlaces y url en código.