En este artículo os voy a enseñar como crear un formulario en drupal 8 para usarlo donde queramos, no crear una página que muestre un formulario y no podamos meterle mano, es muy diferente.
Podemos definir un formulario en drupal 8 y luego insertarlo donde queramos, en una página o un bloque. Esto es muy sencillo, en este artículo os voy a mostrar como se desarrollan los formularios en drupal 8 para posteriormente insertarlos en nuestro código, ya bien sea un bloque o una página.
Definir un formulario en Drupal 8
Para crear nuestros formularios tenemos que crear una clase en nuestro módulo, ver como crear un módulo en drupal 8, esta clase la crearemos en src/Form y extenderá de FormBase. Aquí os dejo el código.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
//mi_modulo/src/Form/InsertarGastoForm.php namespace Drupal\mi_modulo\Form; use Drupal\Core\Form\FormBase; use Drupal\Core\Form\FormStateInterface; use Drupal\Component\Utility\UrlHelper; /** * Desarrollo de un formulario en drupal 8 * @author Ignacio Farré */ class InsertarGastoForm extends FormBase { /** * {@inheritdoc} */ public function getFormId() { return 'insertar_gasto_form'; } /** * {@inheritdoc} */ public function buildForm(array $form, FormStateInterface $form_state) { $form['cantidad'] = [ '#type' => 'number', '#title' => $this->t('Cantidad'), '#required' => TRUE, ]; $form['fecha'] = [ '#type' => 'date', '#title' => $this->t('Fecha'), '#required' => TRUE, ]; $form['descripcion'] = [ '#type' => 'textfield', '#title' => $this->t('Descripción'), '#default_value' => $this->t('Un gasto mas.'), '#required' => TRUE, ]; $form['submit'] = [ '#type' => 'submit', '#value' => $this->t('Insertar'), ]; return $form; } /** * {@inheritdoc} */ public function validateForm(array &$form, FormStateInterface $form_state) { if ($form_state->getValue('cantidad') < 1) { $form_state->setErrorByName('cantidad', $this->t('La cantidad tiene que ser mayor que 1')); } } /** * {@inheritdoc} */ public function submitForm(array &$form, FormStateInterface $form_state) { // Display result. foreach ($form_state->getValues() as $key => $value) { drupal_set_message($key . ': ' . $value); } } } |
Aquí os dejo el enlace a la api de Drupal 8 Form. En esta clase tenemos 4 funciones, en las que definimos el id del formulario, los campos que tendrá, las posibles validaciones y el submit. Con esto tenemos un formulario creado en drupal 8. Pero no sirve de nada si no lo mostramos, vamos a ello.
Insertar un formulario en una página de drupal 8 desde el archivo mi_modulo.routing.yml (No recomendado)
Ahora vamos a insertar este formulario en una página en drupal 8 desde nuestro archivo mi_modulo.routing.yml. Esto es una manera muy mala de hacerlo Es una buena práctica pero perdemos el poder del controlador, lo único que enviaremos será el formulario, no tendremos acceso a nada más.
1 2 3 4 5 6 7 8 |
# mi_modulo/mi_modulo.routing.yml mi_modulo.insertarGastoForm: path: '/mi_modulo/insertar-gasto' defaults: _form: '\Drupal\mi_modulo\Form\InsertarGastoForm' _title: 'Insertar gasto' requirements: _permission: 'access content' |
De esta manera definimos una ruta y le indicamos el form. Listo, con esto ya mostramos un formulario en una página.
Si lo que necesitas es mostrar una página con un formulario sin más este es tu método, si por el contrario quieres tener mas control en esa página y poder maquetar a tu antojo hay otras maneras que os mostraré en el siguiente punto.
Insertar un formulario en una página de drupal 8 desde el controlador (manera Pro)
Antes de hacer esto deberías saber como crear una página en drupal 8 te lo recomiendo, pero si creas que puedes seguir el nivel no hace falta, en este artículo tienes todo lo necesario para crear tu formulario en una página.
La mejor manera de insertar un formulario desde el controlador es con la función estática formBuilder() de Drupal, de esta manera usamos la función getForm() y mandamos el formulario a nuestra vista como una variable. este es nuestro controlador.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// mi_modulo/src/Controller/MiModuloController.php namespace Drupal\mi_modulo\Controller; use Drupal\Core\Controller\ControllerBase; use Drupal; class MiModuloController extends ControllerBase { public function insertarGasto() { $form = $this->formBuilder()->getForm('Drupal\mi_modulo\Form\InsertarGastoForm'); return [ '#theme' => 'pagina_insertar_gasto', '#titulo' => $this->t('Mi formulario'), '#descripcion' => 'Insertar formulario', '#formulario' => $form ]; } } |
Con esto hemos mandado el formulario como una variable, ya solo tenemos que recibirlo en nuestro template y mostrarlo al mundo. Para ello creamos nuestro template, pero antes hay que definir los theme del módulo en nuestro archivo mi_modulo.module, pone este código en el.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// mi_modulo/mi_modulo.module /** * @file * Code for the example module. */ /** * Theme hook */ function mi_modulo_theme($existing, $type, $theme, $path) { return [ 'pagina_insertar_gasto' => [ 'variables' => [ 'title' => 'Default title', 'description' => NULL, 'formulario' => NULL ], 'template' => 'pagina-insertar-gasto'], ]; } |
Aquí le decimos cual va ha ser el template encargado de mostrar la pagina_insertar_gasto definida en nuestro controller, vamos ha crear el archivo pagina-insertar-gasto.html-twig
1 2 3 4 5 6 7 8 9 10 |
{# mi_modulo/templates/pagina-insertar-gasto.html.twig #} <div class="row"> <div class="col-md-6"> {{ formulario }} </div> <div class="col-md-6"> <h1>{{ titulo }}</h1> <p>{{ descripcion }}</p> </div> </div> |
De esta manera tenemos acceso a colocar el form como queramos, manejar sus atributos y modificarlo si fuera necesario antes de enviar al template desde el controlador, ya vosotros mismos si veis el potencial de programar de esta manera o no…
Insertar un formulario en un bloque en drupal 8
Ahora para rematar el artículo y enseñaros el potencial de drupal en su parte de framework vamos a usar el mismo formulario y lo vamos a insertar en un bloque, primero mira como se crean los bloques en drupal 8.
Vamos a crear nuestro bloque, coger nuestro formulario, modificar lo que queramos y mandarlo a la vista. Mirar el siguiente código.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
// mi_modulo/src/Plugin/Block/InsertarGastoFormBlock.php /** * @file * Contains \Drupal\mi_modulo\Plugin\Block\InsertarGastoFormBlock. */ namespace Drupal\mi_modulo\Plugin\Block; use Drupal\Core\Block\BlockBase; use Drupal; /** * * Bloque que muestra un formulario para insertar gastos * * @Block( * id = "insertar_gasto_form_block", * admin_label = @Translation("formulario para insertar gastos") * ) */ class InsertarGastoFormBlock extends BlockBase { /** * {@inheritdoc} */ public function build() { $form = Drupal::formBuilder()->getForm('Drupal\mi_modulo\Form\InsertarGastoForm'); //añadimos clases a la etiqueta form $form['#attributes']['class'][] = 'mi-clase'; //accedemos a los inputs y modificamos lo que queramos. $form['cantidad']['#value'] = 23; return [ '#theme' => 'bloque_insertar_gasto', '#titulo' => 'Mi titulo super guay', '#descripcion' => 'Un descripción', '#formulario' => $form, '#cache' => ['max-age' => 0], ]; } } |
A ver que hemos hecho aquí, hemos creado un bloque, hemos cogido nuestro formulario con formBuilder y hemos modificado algunos datos. hecho esto lo hemos enviado a nuestro template. Una cosa muy importante en los bloques con variables dinámicas es la cache, si los datos que van a mostrar nuestro bloque van ha ser cambiantes, hay que decirle a drupal que la cache sea 0, para que cuando el usuario llame otra vez al bloque vuelva a recostruir el código.
Y ahora solo nos quedaría mostrarlo al usuario, para ello vamos a crear nuestro template, para ello volvemos a nuestro mi_modulo.module a decirle que tenemos un nuevo template.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
// mi_modulo/mi_modulo.module /** * Theme hook */ function farre_theme($existing, $type, $theme, $path) { return [ 'bloque_insertar_gasto' => [ 'variables' => [ 'title' => 'Default title', 'description' => NULL, 'formulario' => NULL ], 'template' => 'bloque-insertar-gasto'], 'pagina_insertar_gasto' => [ 'variables' => [ 'title' => 'Default title', 'description' => NULL, 'formulario' => NULL ], 'template' => 'pagina-insertar-gasto'], ]; } |
Y creamos nuestro template para nuestro bloque, aquí hacerlo como queráis.
1 2 3 |
// mi_modulo/templates/bloque-insertar-gasto.html.twig {{ formulario }} |
Buenos con este artículo hemos aprendido a crear formularios, cogerlos, modificarlos y enviarlos a nuestro template como una variable, ¿Qué os parece?