Custom Forms and Configuration Forms in Drupal 8

Custom Forms and Configuration Forms in Drupal 8

• 1.
  Custom Forms andConfiguration Forms: examples of Drupal 8 objected oriented APIs @ItaloMairoItalo Mairo Drupal.org username: itamair
• 2.
  Custom Forms andConfiguration Forms in Drupal 8 - Italo Mairo (itamair) Engineer - Freelance More than 15 years of working experience 
 in Digital Communication, Multimedia, Digital Cartography, Web & Web GIS 2.0 Opensource Applications. Experienced Drupal Developer
 more than 5 years of full-time work experience collaboration with several Drupal Italian Web Agencies Individual Member of Drupal Association Personal website: www.italomairo.com Linkedin Profile: italomairo Who I am …
• 3.
  Custom Forms andConfiguration Forms in Drupal 8 - Italo Mairo (itamair) About this talk … Presents a practical application of building a
 Custom Form and its Configuration Form, according
 to new Drupal 8 Form Object Oriented APIs. Inspired by Best practices and patterns, applied in the context of an advanced Drupal 8 project run as member of the team of 
 Wellnet Drupal Agency (DDD Gold Sponsor). Special thanks, for his mentoring about Drupal 8 OOP, to Luca Lusso (@ lussoluca), Wellnet Tech Lead, Webprofiler creator & Devel Module maintainer and more …
• 4.
  Custom Forms andConfiguration Forms in Drupal 8 - Italo Mairo (itamair) Form API in Drupal 8 Is largely similar to the Drupal 7 Form API. Forms are defined by implementing the 
 DrupalCoreFormFormBuilderInterface and the basic workflow of a form is defined by • getFormId • buildForm • validateForm • submitForm Check out https://api.drupal.org/api/drupal/elements 
 for all the core provided elements. There are new HTML 5 elements (like ‘tel', 'email', 'number', ‘date', ‘url’) 
 and specific others (‘details’, ‘language_select’, ‘dropbutton & operations’, etc).
• 5.
  Custom Forms andConfiguration Forms in Drupal 8 - Italo Mairo (itamair) Drupal 8 provides extendable base classes for easy form creation. FormBase - The most generic base class for generating forms 
 (implements FormInterface, use FormStateInterface) ConfirmFormBase - For providing users with a form to confirm an action such as deleting a piece of content. ConfigFormBase - For creating system configuration forms, provides additional functionality for improved interaction with the configuration system. Form API in Drupal 8
• 6.
  Custom Forms andConfiguration Forms in Drupal 8 - Italo Mairo (itamair) Form API in Drupal 8 Integrate the form in a Route request The routing system takes care of instantiating the form class and invoking the proper methods. ddd_forms_talk.ddd_form:
 path: '/ddd_form'
 defaults:
 _form: 'Drupalddd_forms_talkFormDddForm'
 _title: 'DDD - Example Form'
 requirements:
 _permission: 'access content' Adding further parameters -> Using parameters in routes Retrieving this form outside of routes The routing system allows form classes to be provided as route handlers, in which case the route system takes care of instantiating this class and invoking the proper methods. $form = Drupal::formBuilder()->getForm(‘Drupalddd_forms_talkFormDddForm’, $extra_params); (corresponds to the D7 drupal_get_form($form_id) function)
• 7.
  Custom Forms andConfiguration Forms in Drupal 8 - Italo Mairo (itamair) Form API #states Form API #states allow us to create form elements that change state (show, hide, enable, disable, etc.) depending on certain conditions—for example, disabling one field based on the contents of another. For most common Form UI tasks, the #states system eliminates the need to write custom JavaScript. It eliminates inconsistencies by translating simple form element properties into standardized JavaScript code.
• 8.
  Custom Forms andConfiguration Forms in Drupal 8 - Italo Mairo (itamair) Dependency Injection for a Form namespace Drupalddd_forms_talkForm;
 
 use DrupalCoreFormFormBase;
 use DrupalCoreFormFormStateInterface;
 use SymfonyComponentDependencyInjectionContainerInterface;
 use DrupalCoreRenderRendererInterface; class DddForm extends FormBase* { 
 public function __construct(RendererInterface $renderer) {
 $this->renderer = $renderer;
 }
 
 public static function create(ContainerInterface $container) {
 return new static(
 $container->get('renderer')
 );
 } … (omissis) Note*: abstract class FormBase implements FormInterface, ContainerInjectionInterface Forms that require a Drupal service or a custom service should access the service using dependency injection.
• 9.
  Custom Forms andConfiguration Forms in Drupal 8 - Italo Mairo (itamair) To trigger an Ajax response: • Add property '#ajax' to a form element in your form array, • Write an Ajax callback to process the input and respond. The #ajax property for a form element is an array, with specific elements, all of which are optional: • callback: The callback to invoke to handle the server side of the Ajax event. • wrapper: The HTML 'id' attribute of the area where the content returned by the callback should be placed. Note that callbacks have a choice of returning content or JavaScript commands; 'wrapper' is used for content returns. • method: The jQuery method for placing the new content (used with 'wrapper') • effect: The jQuery effect to use when placing the new HTML (used with 'wrapper') • speed: The effect speed to use (used with 'effect' and 'wrapper') • event: The JavaScript event to respond to. This is selected automatically for the type of form element; provide a value to override the default. • prevent: A JavaScript event to prevent when the event is triggered. • progress: An array indicating how to show Ajax processing progress. Can contain one or more of these: • type: Type of indicator: 'throbber' (default) or 'bar'. • message: Translated message to display. • url: For a bar progress indicator, URL path for determining progress. • interval: For a bar progress indicator, how often to update it. Ajax Responses in forms
• 10.
  Custom Forms andConfiguration Forms in Drupal 8 - Italo Mairo (itamair) References for further information • Form API in Drupal 8: https://www.drupal.org/node/2117411 • Form and render elements: https://api.drupal.org/api/drupal/elements • Dependency Injection for a Form: 
 https://www.drupal.org/node/2203931 • Form API #states: https://www.lullabot.com/articles/form-api-states • Ajax API:
 https://api.drupal.org/api/drupal/core%21core.api.php/group/ajax/ 8.1.x