Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

El poder de webform (antes yaml form)

228 views

Published on

El poder de webform (antes yaml form)

Published in: Software
  • Be the first to comment

  • Be the first to like this

El poder de webform (antes yaml form)

  1. 1. EL PODER DE WEBFORM David Gil & Ruben Egiguren #DrupalCampES
  2. 2. David Gil david.gil@biko2.com @david_gil_biko2 ruben.egiguren@biko2.com @regiguren Ruben (keopx) Egiguren
  3. 3. Definimos, diseñamos y construimos negocios digitales
  4. 4. Podemos presumir de trabajar con ... ¿Te interesa unirte a Biko? ¡Búscanos!
  5. 5. ¿Te vienes a ?
  6. 6. Webform 8.x-5.x Jacob Rockowitz (jrockowitz)
  7. 7. ■ Qué es/Historia ■ Creación de Webforms ■ Elementos/Validaciones ■ Formularios multi paso ■ Configuración de Webform ■ Gestión de envíos ■ Extendiendo Webform
  8. 8. Qué es el módulo webform
  9. 9. ¿QUÉ ES? Un módulo para construir formularios y gestionar los envíos
  10. 10. Historia
  11. 11. ■ Webform es el módulo más popular para la creación de formularios en Drupal 7 (>450.000 instalaciones) ■ Cuando se liberó Drupal 8 en Nov-2015 no existía planificación para migrarlo a Drupal 8 ■ El proyecto YAML Form comenzó en Diciembre de 2015 por Jacob Rockowitz (@jrockowitz) ■ En diciembre de 2016 YAML Form fue convertido en la versión de Drupal 8 de Webform ■ Jacob Rockowitz continúa siendo el principal mantenedor ■ Actualmente tiene >11.000 instalaciones en Drupal 8 HISTORIA
  12. 12. ■ Webform: Permite la creación de formularios web y cuestionarios. ■ Webform Node: Proporciona un tipo de contenido Webform que permite integrar los formularios web en un sitio web como nodos. ■ Webform UI: Proporciona una interfaz de usuario para crear y mantener formularios web. CORE MODULES
  13. 13. ■ Webform Devel: Proporciona herramientas de desarrollo para el módulo. ■ Webform Examples: Proporciona ejemplos de todos los elementos y funcionalidades del webform que se pueden utilizar para demostrar y probar funcionalidades avanzadas. ■ Webform Templates: Proporciona plantillas que se pueden utilizar para crear nuevos Webforms. ■ Webform Scheduled Email: Extiende el handler de email para permitir envíos programados. OTROS MÓDULOS
  14. 14. Creando Webforms
  15. 15. La administración de Webform está en: Estructura/Webforms Webform Admin
  16. 16. Creando un Webform
  17. 17. Elementos
  18. 18. Elementos Webform trae de serie más de 70 tipos distintos de elementos (y creciendo...).
  19. 19. Elementos ■ HTML: Textfield, Textareas, Checkboxes, Radios, Select menu, Password ... ■ HTML5: Email, Url, Number, Telephone, Date, Number, Range ... ■ Drupal: File uploads, Entity References, Table select, Date list ... ■ Custom: Likert scale, Star rating, Toggle, Buttons, Credit card number, Geolocation, Select/Checkboxes/Radios with other ... ■ Markups: Inline dismissable messages, HTML Markup, Details, y Fieldsets. ■ Compuestos: Name, Address, Contact, Credit Card
  20. 20. Elementos Edición visual de propiedades
  21. 21. ¡Power user! edición en YAML
  22. 22. Validación de campo
  23. 23. Cada tipo de elemento tiene su propia validación Validaciones
  24. 24. Form States
  25. 25. Renderizado y propiedades basadas en valores de otros campos
  26. 26. Mascaras de entrada
  27. 27. Personaliza fácilmente el formato de entrada de tus campos Mascaras de entrada
  28. 28. Multi paso
  29. 29. Multi paso
  30. 30. Multi paso
  31. 31. Multi paso
  32. 32. Configuración general
  33. 33. 1000 posibilidades! ■ Configurar los permisos de acceso de un Webform y los envíos ■ Inhabilitar el autocompletado de campos ■ Deshabilitar la validación en cliente ■ Permitir a los usuarios guardar borradores de los envíos ■ Permitir a los usuarios actualizar un envío mediante un token seguro ■ Restringir el número de envíos a un Webform en total ■ Permitir añadir clases CSS, estilos y Javascript al Webform ■ ... Configuración de Webform
  34. 34. Configuración de Webform
  35. 35. Handlers Nos permiten actuar en el workflow de envíos o renderización de webform
  36. 36. Envíos
  37. 37. ■ Los envíos de Webform son entidades y contienen todos los datos introducidos en el Webform ■ Además incluyen metadatos: fechas, user id, IP, ... ■ Podemos exportar los envíos a diferentes formatos: CSV, Yaml, HTML, json Envíos
  38. 38. Envíos
  39. 39. Extendiendo Webform
  40. 40. /** * Implements hook_form_alter(). */ function webform_example_form_alter(&$form, &$form_state, $id) { if ($id == 'webform_submission_contact_form') { $form['elements']['name']['#title'] = t('Name'); } } /** * Implements hook_form_form-id_alter(). */ function webform_example_form_webform_submission_contact_form_alter(&$form, &$form_state) { $form['elements']['name']['#title'] = t('Name'); } NOTA: También es posible realizar un alter usando las propiedades de los handler Alter de Webform
  41. 41. Todos los elementos se basan en Drupal Form API de Core. Básico: Extender campos básicos de Webform. Objeto unico. ■ Campo de texto ■ Seleccionar lista ■ ... Compuesto - Extender WebformCompositeBase. Se utiliza como contenedor para múltiples elementos. ■ Dirección ■ Tarjeta de crédito ■ ... Creando elementos personalizados
  42. 42. ■ Permiten reaccionar en los diferentes eventos lanzados en el ciclo de vida de un formulario: alterElements, alterForm, validateForm, submitForm, confirmForm, preCreate, postCreate, postLoad, preSave, postSave, preDelete, postDelete ■ https://gist.github.com/davidgil/2b0a4840b5e9315a243b4cf3 59782d80 Creando Handlers personalizados
  43. 43. Handlers Creación de users
  44. 44. Handlers Integración con APIs
  45. 45. Handlers Creación de nodos complejos
  46. 46. Conclusiones
  47. 47. ■ Compatible con la API de Drupal Form ■ Robusto desde fases iniciales, en continua evolución ■ Extensible fácilmente, convirtiéndolo en una herramienta potente con un poco de imaginación ■ Hay alternativas, pero ni de lejos tan avanzadas y robustas: contact + contact_storage, eform Conclusiones
  48. 48. ¡Gracias! Thank you! #DrupalCampES @david_gil_biko2 @regiguren @biko2

×