Image
Drupal build with webform

Quando pensamos em formulários no Drupal, pelo menos dois nomes vem à nossa cabeça: Contact e Webform.

Contact é um módulo do Core do CMS muito simples e objetivo no que faz, criar formulários de contato e enviar e-mails. Não  que isso seja ruim, na verdade a grande ideia dele vir no Core é justamente isso, entregar uma funcionalidade out-of-the-box. Ele até possui módulos contribuídos que extendem suas funcionalidades, mas dependendo do caso, o ideal é partir para algo mais completo. Aí é que entra o Webform.

O Webform é um dos módulos mais instalados em grande parte das aplicações Drupal, isso se dá pelo fato da quantidade de ferramentas que ele lhe entrega para criar formulários de forma dinâmica e direto pela interface do CMS. Dentre essas funcionlidades está a integração com o JQuery UI modal para exibir popups de confirmação de submissão.

Image
Webform configuração do modal de confirmação
Webform configuração do modal de confirmação.

Porém, em alguns casos específicos, a configuração padrão do modal pode não lhe servir. Então o que fazer nessa hora?

Para a nossa sorte, os desenvolvedores já pensaram nisso e deixaram uma forma de customizarmos isso via um código customizado. Primeiro de tudo, precisamos entender onde está o Javascript responsável por criar esse modal de confirmação. Para pegar um atalho, segue aqui o caminho:

webform/js/webform.confirmation.modal.js
/**
 * @file
 * JavaScript behaviors for confirmation modal.
 */

(function ($, Drupal) {

  'use strict';

  // @see http://api.jqueryui.com/dialog/
  Drupal.webform = Drupal.webform || {};
  Drupal.webform.confirmationModal = Drupal.webform.confirmationModal || {};
  Drupal.webform.confirmationModal.options = Drupal.webform.confirmationModal.options || {};

  /**
   * Display confirmation message in a modal.
   *
   * @type {Drupal~behavior}
   */
  Drupal.behaviors.webformConfirmationModal = {
    attach: function (context) {
      $('.js-webform-confirmation-modal', context).once('webform-confirmation-modal').each(function () {
        var $element = $(this);

        var $dialog = $element.find('.webform-confirmation-modal--content');

        var options = {
          dialogClass: 'webform-confirmation-modal',
          minWidth: 600,
          resizable: false,
          title: $element.find('.webform-confirmation-modal--title').text(),
          close: function (event) {
            Drupal.dialog(event.target).close();
            Drupal.detachBehaviors(event.target, null, 'unload');
            $(event.target).remove();
          }
        };

        options = $.extend(options, Drupal.webform.confirmationModal.options);
        var dialog = Drupal.dialog($dialog, options);

        // Use setTimeout to prevent dialog.position.js
        // Uncaught TypeError: Cannot read property 'settings' of undefined
        setTimeout(function () {
          dialog.showModal();

          // Close any open webform submission modals.
          var $modal = $('#drupal-modal');
          if ($modal.find('.webform-submission-form').length) {
            Drupal.dialog($modal .get(0)).close();
          }
        }, 1);
      });
    }
  };

})(jQuery, Drupal);

Ao abrir este arquivo, você verá o código responsável por chamar o JQuery Dialog. Vou comentar aqui o que algumas dessas linhas fazem:

Neste trecho ele verifica se as variáveis Drupal.webform já foram criadas, se não, cria elas como arrays vazios

// @see http://api.jqueryui.com/dialog/
Drupal.webform = Drupal.webform || {};
Drupal.webform.confirmationModal = Drupal.webform.confirmationModal || {};
Drupal.webform.confirmationModal.options = Drupal.webform.confirmationModal.options || {};

Aqui o módulo aplica as opções padrão para chamar o JQuery Dialog

var options = {
    dialogClass: 'webform-confirmation-modal',
    minWidth: 600,
    resizable: false,
    title: $element.find('.webform-confirmation-modal--title').text(),
    close: function (event) {
    Drupal.dialog(event.target).close();
    Drupal.detachBehaviors(event.target, null, 'unload');
    $(event.target).remove();
    }
};

Depois é feito um merge do array de options criado anteriormente com as configurações pré-existentes na configuração Drupal.webform.confirmationModal.options e depois o dialog é instânciado com suas opções.

options = $.extend(options, Drupal.webform.confirmationModal.options);
var dialog = Drupal.dialog($dialog, options);

 

Legal! Mas onde eu configuro minhas opções customizadas?

A resposta para isso está naquele primeiro de código. Basicamente o que precisamos fazer é criar um Javascript customizado, que deve ser chamado antes do Javascript do Webform confirmation modal para setar as opções que queremos. Mas vamos ao exemplo. Minha necessidade em customizar o popup é adicionar um botão de "OK" que irá fechar o popup além da opção padrão do fechar (dentro do código está os comentários a respeito do que foi feito):

(function ($, Drupal) {

    'use strict';

    // Estou garantindo que as variáves do Webform estejam criadas e também que eu não sobrescreva algo que possa ter sido instanciado anteriormente em outro lugar;
    Drupal.webform = Drupal.webform || {};
    Drupal.webform.confirmationModal = Drupal.webform.confirmationModal || {};
    Drupal.webform.confirmationModal.options = Drupal.webform.confirmationModal.options || {};

    // Criei meu array de opções customizadas para criar meu botão de confirmação;
    var options = {
      buttons: [
        {
          text: 'OK',
          click: function() {
            $( this ).dialog( "close" );
          }
        }
      ],
    };

    // Fiz um merge das minhas opções customizadas com as possíveis configurações pré-existentes no Drupal.webform.confirmationModal.options;
    $.extend(Drupal.webform.confirmationModal.options, options);

})(jQuery, Drupal);
  

Agora é só garantir que esse código JS seja carregado e o resultado deve ficar assim:

Modal de confirmação do webform customizado
Modal de confirmação do webform customizado.

 

Referências:

 

 

 

Últimos posts

13 Aug 2020 | By bdiasti

Guia para resolver problemas em Drupal :)

Quando estamos iniciando em determinada tecnologia ficamos meio perdidos em como vamos resolver determinado problema, por exemplo seu gerente pediu pra você criar um ranking das pessoas que mais contribuíram este mês com a comunidade Drupal, e ai como você começaria a resolução deste problema em Drupal?