Custom Forms and Configuration Forms:examples of Drupal 8 objected oriented APIs

@ItaloMairoItalo Mairo

Drupal.org username: itamair

Custom Forms and Configuration 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 Developermore than 5 years of full-time work experiencecollaboration with several Drupal Italian Web Agencies

Individual Member of Drupal Association

Personal website: www.italomairo.com

Linkedin Profile: italomairo

Who I am …

Custom Forms and Configuration 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 maintainerand more …

Custom Forms and Configuration Forms in Drupal 8 - Italo Mairo (itamair)

Form API in Drupal 8Is largely similar to the Drupal 7 Form API.

Forms are defined by implementing the \Drupal\Core\Form\FormBuilderInterface

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).

Custom Forms and Configuration 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

Custom Forms and Configuration Forms in Drupal 8 - Italo Mairo (itamair)

Form API in Drupal 8Integrate 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: 'Drupal\ddd_forms_talk\Form\DddForm' _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(‘Drupal\ddd_forms_talk\Form\DddForm’, $extra_params);

(corresponds to the D7 drupal_get_form($form_id) function)

Custom Forms and Configuration 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.

Custom Forms and Configuration Forms in Drupal 8 - Italo Mairo (itamair)

Dependency Injection for a Form

namespace Drupal\ddd_forms_talk\Form;use Drupal\Core\Form\FormBase;use Drupal\Core\Form\FormStateInterface;use Symfony\Component\DependencyInjection\ContainerInterface;use Drupal\Core\Render\RendererInterface;

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.

Custom Forms and Configuration 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

Custom Forms and Configuration 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