FormAPI + Drupal 8 Form and AJAX Mikhail Kraynuk Mikhail Kraynuk - - PowerPoint PPT Presentation

FormAPI + Drupal 8 Form and AJAX

Mikhail Kraynuk

Mikhail Kraynuk

Drupal Senior Developer

About my experience in Drupal development

• Development
• Project management
• Drupal audit
• Drupal Localization

Mikhail Kraynuk

Drupal Senior Developer

Form API Drupal 8

OK

Class

namespase

function

Object-oriented programming

extends use

Mikhail Kraynuk

Drupal Senior Developer

New Form

<?php ¡ ¡ /** ¡ ¡ * ¡@file ¡ ¡ * ¡Contains ¡\Drupal\Example\Form\ExampleForm. ¡ ¡ */ ¡ ¡ ¡ namespace ¡Drupal\example\Form; ¡ ¡ use ¡Drupal\Core\Form\FormBase; ¡ ¡ use ¡Drupal\Core\Form\FormStateInterface; ¡ ¡ ¡ /** ¡ ¡ * ¡Provides ¡a ¡simple ¡example ¡form. ¡ ¡ */ ¡ ¡ class ¡ExampleForm ¡extends ¡FormBase ¡{ ¡ ¡ ¡ } ¡

public function getFormID() public function buildForm($form, $form_state) public function validateForm(&$form, $form_state) public function submitForm(&$form, &$form_state)

Mikhail Kraynuk

Drupal Senior Developer

Form ID

/** ¡ ¡ ¡* ¡Implements ¡\Drupal\Core\Form\FormInterface::getFormID(). ¡ ¡ ¡*/ ¡ public ¡function ¡getFormID() ¡{ ¡ ¡ ¡ ¡return ¡’my_special_form’; ¡ } ¡ ¡ /** ¡ ¡ ¡* ¡Form ¡builder ¡for ¡my ¡form. ¡ ¡ ¡*/ ¡ function ¡my_special_form($form, ¡&$form_state) ¡{…}

Drupal 7

Mikhail Kraynuk

Drupal Senior Developer

Form builder

/** ¡ ¡ ¡* ¡Implements ¡\Drupal\Core\Form\FormInterface::buildForm(). ¡ ¡ ¡*/ ¡ public ¡function ¡buildForm(array ¡$form, ¡FormStateInterface ¡$form_state, ¡$a ¡= ¡0) ¡{ ¡ ¡ ¡ ¡ ¡$form['my_text_field'] ¡= ¡array( ¡ ¡ ¡ ¡ ¡'#type' ¡=> ¡'textfield', ¡ ¡ ¡ ¡ ¡'#title' ¡=> ¡'Example', ¡ ¡ ¡); ¡ ¡ ¡ ¡return ¡$form; ¡ ¡ } ¡ ¡

Mikhail Kraynuk

Drupal Senior Developer

Form validate

/** ¡ ¡ ¡* ¡Implements ¡\Drupal\Core\Form\FormInterface::validateForm(). ¡ ¡ ¡*/ ¡ public ¡function ¡validateForm(array ¡&$form, ¡FormStateInterface ¡$form_state) ¡{ ¡ ¡ ¡ if (strlen($form_state-­‑>getValue('phone_number')) < 3) { $form_state-­‑>setErrorByName('phone_number', $this-­‑>t('The phone number is too short.')); } ¡ } ¡ ¡

Mikhail Kraynuk

Drupal Senior Developer

Form submit

/** ¡ ¡ ¡* ¡Implements ¡\Drupal\Core\Form\FormInterface::submitForm(). ¡ ¡ ¡*/ ¡ public ¡function ¡submitForm(array ¡&$form, ¡FormStateInterface ¡$form_state) ¡{ ¡ ¡ ¡ ¡ ¡$phone ¡= ¡$form_state-­‑>getValue('phone_number'); ¡ ¡ } ¡ ¡ ¡

Mikhail Kraynuk

Drupal Senior Developer

Get form

$form ¡= ¡\Drupal::formBuilder()-­‑>getForm('Drupal\Example\Form\ExampleForm'); ¡ ¡ ¡ ¡ ¡ $form ¡= ¡\Drupal::formBuilder()-­‑>getForm('Drupal\Example\Form\ExampleForm', ¡'test'); ¡

Mikhail Kraynuk

Drupal Senior Developer

Special forms

Mikhail Kraynuk

Drupal Senior Developer

Settings form

use ¡Drupal\Core\Form\FormBase; ¡ use ¡Drupal\Core\Form\ConfigFormBase; ¡ ¡ class ¡ExampleConfigForm ¡extends ¡ConfigFormBase ¡{ ¡ ¡ ... ¡ ¡ ¡public ¡function ¡buildForm(array ¡$form, ¡FormStateInterface ¡$form_state) ¡{ ¡ ¡ ¡ ¡ ¡ ¡$form ¡= ¡parent::buildForm($form, ¡$form_state); ¡ ¡ ¡ ¡ ¡ ¡... ¡ ¡ ¡ ¡ ¡return ¡$form; ¡ ¡ ¡ ¡} ¡ ¡ ... ¡ } ¡

system_settings_form()

Drupal 7

Mikhail Kraynuk

Drupal Senior Developer

Confirm form

use ¡Drupal\Core\Form\FormBase; ¡ use ¡Drupal\Core\Form\ConfirmFormBase; ¡ ¡ class ¡ExampleConfigForm ¡extends ¡ConfirmFormBase ¡{ ¡ ¡ ... ¡ ¡ ¡public ¡function ¡buildForm(array ¡$form, ¡FormStateInterface ¡$form_state) ¡{ ¡ ¡ ¡ ¡ ¡ ¡$form ¡= ¡parent::buildForm($form, ¡$form_state); ¡ ¡ ¡ ¡ ¡ ¡... ¡ ¡ ¡ ¡ ¡return ¡$form; ¡ ¡ ¡ ¡} ¡ ¡ ... ¡ }

confirm_form()

Drupal 7

Mikhail Kraynuk

Drupal Senior Developer

AJAX

Mikhail Kraynuk

Drupal Senior Developer

AJAX

OK OK

AJAX AJAX commands

Mikhail Kraynuk

Drupal Senior Developer

• 1. Add Ajax namespace

<?php ¡ ¡ /** ¡ ¡ * ¡@file ¡ ¡ * ¡Contains ¡\Drupal\Example\Form\ExampleForm. ¡ ¡ */ ¡ ¡ ¡ namespace ¡Drupal\example\Form; ¡ ¡ use ¡Drupal\Core\Form\FormBase; ¡ use ¡Drupal\Core\Form\FormStateInterface; ¡ ¡ ¡ use ¡Drupal\Core\Ajax\AjaxResponse; ¡ ¡ use ¡Drupal\Core\Ajax\HtmlCommand; ¡ ¡ ¡ /** ¡ ¡ * ¡Provides ¡a ¡simple ¡example ¡form. ¡ ¡ */ ¡ ¡ class ¡ExampleForm ¡extends ¡FormBase ¡{ ¡... ¡} ¡

Mikhail Kraynuk

Drupal Senior Developer

• 2. Add Ajax-callback

/** ¡ ¡ * ¡Provides ¡a ¡simple ¡example ¡form. ¡ ¡ */ ¡ ¡ class ¡ExampleForm ¡extends ¡FormBase ¡{ ¡ ¡ ¡ ¡public ¡function ¡getFormID() ¡ ¡ ¡public ¡function ¡buildForm(array ¡$form, ¡FormStateInterface ¡$form_state) ¡ ¡ ¡public ¡function ¡validateForm(array ¡&$form, ¡FormStateInterface ¡$form_state) ¡ ¡ ¡public ¡function ¡submitForm(array ¡&$form, ¡FormStateInterface ¡$form_state) ¡ ¡ ¡ ¡public ¡function ¡validateAjaxPhone(array ¡&$form, ¡FormStateInterface ¡$form_state) ¡ } ¡

Mikhail Kraynuk

Drupal Senior Developer

• 3. Update field

public ¡function ¡buildForm(array ¡$form, ¡FormStateInterface ¡$form_state) ¡{ ¡ ¡ ¡ ¡... ¡ ¡ ¡$form['my_phone'] ¡= ¡array( ¡ ¡ ¡ ¡ ¡'#type' ¡=> ¡'tel', ¡ ¡ ¡ ¡ ¡'#title' ¡=> ¡$this-­‑>t('Phone number'), ¡ ¡ ¡ ¡ ¡'#description' ¡=> ¡$this-­‑>t('Enter your phone number with “+”.'), ¡ ¡ ¡ ¡ ¡'#ajax' ¡=> ¡array( ¡ ¡ ¡ ¡ ¡ ¡ ¡'callback' ¡=> ¡array($this, ¡'validateAjaxPhone'), ¡ ¡ ¡ ¡ ¡ ¡ ¡'event' ¡=> ¡'change', ¡ ¡ ¡ ¡ ¡ ¡ ¡'progress' ¡=> ¡array( ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡'type' ¡=> ¡'throbber', ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡'message' ¡=> ¡$this-­‑>t('verifying…'), ¡ ¡ ¡ ¡ ¡ ¡ ¡), ¡ ¡ ¡ ¡ ¡), ¡ ¡ ¡ ¡ ¡'#suffix' ¡=> ¡'<span ¡class=“valid-­‑message”></span>', ¡ ¡ ¡); ¡ ¡ ¡return ¡$form; ¡ ¡ } ¡ ¡

Mikhail Kraynuk

Drupal Senior Developer

• 4. Fill Ajax-callback

public ¡function ¡validateAjaxPhone(array ¡&$form, ¡FormStateInterface ¡$form_state) ¡{ ¡ ¡ ¡ ¡ ¡$response ¡= ¡new ¡AjaxResponse(); ¡ ¡ ¡ ¡ ¡ ¡if (substr($form_state-­‑>getValue('my_phone'), ¡0, ¡1) == '+') { ¡ ¡ ¡ ¡ ¡$message ¡= ¡$this-­‑>t('Phone number is correct'); ¡ ¡ ¡} ¡ ¡ ¡else { ¡ ¡ ¡ ¡ ¡$message ¡= ¡$this-­‑>t('Please start your phone number with “+”'); ¡ ¡ ¡} ¡ ¡ ¡ ¡$response-­‑>addCommand(new ¡HtmlCommand('.valid-­‑message', ¡$message)); ¡ ¡ ¡ ¡return ¡$response; ¡ ¡ } ¡ ¡

Mikhail Kraynuk

Drupal Senior Developer

Ajax result

Mikhail Kraynuk

Drupal Senior Developer

Ajax result

Mikhail Kraynuk

Drupal Senior developer

Mikhail Kraynuk

Drupal Senior Developer

kraynuk.m@i20.biz +7 961 870-26-99 Золотой спонсор:

Спасибо!

При поддержке: Серебряный спонсор: