9.8. Werken met formulieren in Drupal. Voeg een configuratieformulier programmatically toe.
In deze tutorial gaan we werken met de Drupal Form API en een instellingenformulier voor de module maken. We hebben al modules gemaakt voor het weergeven van de pagina en blokken, laten we nu een configuratieformulier maken waarin we gegevens voor de verbinding met een voorwaardelijke service zullen opslaan. Stel dat we de API-sleutel en de API-client-ID op de site moeten opslaan, bijvoorbeeld voor de Google Maps API.
Codevoorbeelden kunnen worden bekeken op github:
https://github.com/levmyshkin/drupalbook8
We kunnen deze gegevens opslaan in settings.php en deze instellingen aan git toevoegen. Maar dit is niet veilig, het is beter om toegang tot services in de database op te slaan.
Laten we een nieuwe route voor ons formulier toevoegen:
modules/custom/drupalbook/drupalbook.routing.yml
drupalbook.settings:
path: '/admin/structure/drupalbook/settings'
defaults:
_form: '\Drupal\drupalbook\Form\DrupalbookSettingsForm'
_title: 'DrupalBook Instellingen formulier'
requirements:
_permission: 'administer site configuration'
In tegenstelling tot de vorige routes, geven we in defaults niet _controller op, maar _form. Het feit is dat we geen Controller-klasse voor het formulier zullen maken, maar een formulierklasse. Laten we een bestand voor de formulierklasse maken:
modules/custom/drupalbook/src/Form/DrupalbookSettingsForm.php
Je moet een aparte Form-map maken in de src-map voor je formulieren. Dit maakt het mogelijk om de modulecode in afzonderlijke mappen te scheiden en je kunt de benodigde code gemakkelijk vinden op basis van de naam van de mappen.
Voeg de volgende formuliercode toe en we zullen elk van de codeblokken en hoe het werkt analyseren:
<?php
namespace Drupal\drupalbook\Form;
use Drupal\Core\Form\ConfigFormBase;
use Drupal\Core\Form\FormStateInterface;
/**
* Configureer voorbeeldinstellingen voor deze site.
*/
class DrupalbookSettingsForm extends ConfigFormBase {
/**
* {@inheritdoc}
*/
public function getFormId() {
return 'drupalbook_admin_settings';
}
/**
* {@inheritdoc}
*/
protected function getEditableConfigNames() {
return [
'drupalbook.settings',
];
}
/**
* {@inheritdoc}
*/
public function buildForm(array $form, FormStateInterface $form_state) {
$config = $this->config('drupalbook.settings');
$form['drupalbook_api_key'] = array(
'#type' => 'textfield',
'#title' => $this->t('API Key'),
'#default_value' => $config->get('drupalbook_api_key'),
);
$form['drupalbook_api_client_id'] = array(
'#type' => 'textfield',
'#title' => $this->t('API Client ID'),
'#default_value' => $config->get('drupalbook_api_client_id'),
);
return parent::buildForm($form, $form_state);
}
/**
* {@inheritdoc}
*/
public function submitForm(array &$form, FormStateInterface $form_state) {
// Haal de configuratie op
$this->configFactory->getEditable('drupalbook.settings')
// Stel de ingediende configuratie-instellingen in
->set('drupalbook_api_key', $form_state->getValue('drupalbook_api_key'))
// Je kunt meerdere configuraties tegelijk instellen door
// meerdere oproepen naar set() te maken
->set('drupalbook_api_client_id', $form_state->getValue('drupalbook_api_client_id'))
->save();
parent::submitForm($form, $form_state);
}
}
We hebben al te maken gehad met namespace en use-operatoren, en dat Drupal deze gebruikt om automatisch alleen de benodigde klassen te verbinden:
\drupalbook\Form;
use Drupal\Core\Form\ConfigFormBase;
use Drupal\Core\Form\FormStateInterface;
Om een configuratieformulier te maken, moet je uitbreiden van de ConfigFormBase-klasse. ConfigFormBase impliceert dat je gegevens van het formulier naar de configuratie zult opslaan.
extends ConfigFormBase {
Vervolgens geef je de formulier-id op, deze moet uniek zijn voor elk formulier. Als je de id van je formulier begint met de naam van de module, is de kans groot dat je id uniek zal zijn:
function getFormId() {
return 'drupalbook_admin_settings';
}
Geef de groep configuraties op waarin we de gegevens zullen opslaan:
function getEditableConfigNames() {
return [
'drupalbook.settings',
];
}
Laten we nu zien hoe we de formuliervelden zelf maken. Je kunt de mogelijkheden van de Form API evalueren en welke velden je kunt weergeven door de documentatie te lezen:
https://api.drupal.org/api/drupal/elements/8.5.x
We hebben tot nu toe alleen textfield gebruikt:
Maar je zult vaak met keuzelijsten werken:
Met checkboxes en radioknoppen:
Probeer je velden toe te voegen aan het formulier, beperk je niet tot alleen tekstvelden.
function buildForm(array $form, FormStateInterface $form_state) {
$config = $this->config('drupalbook.settings');
We vormen een formulier-array in $form en bouwen vervolgens HTML daarvan. De variabele $form_state slaat alle gegevens van het formulier op die we indienen, hier en de waarden van alle velden, de formulier-id, CSRF-token ter bescherming tegen automatische formulierindiening. $form_state maakt het ook mogelijk om gegevens tussen de stappen van een meerstapsformulier door te geven, we zullen dit gebruiken in een van de volgende lessen. Ook wordt elk formulier dat via AJAX wordt ingediend, opnieuw opgebouwd en maakt $form_state het mogelijk om een kopie van het formulier te bouwen die vóór het klikken op de verzendknop was. En als het formulier niet wordt ingediend vanwege een fout, bijvoorbeeld als een verplicht veld niet is ingevuld, worden alle velden opgeslagen met de waarden die in $form_state waren opgeslagen. Daarom gaan $form en $form_state altijd samen.
Hier laden we ook gegevens uit de configuraties. Misschien heb je al iets opgeslagen in drupalbook.settings en is $config niet meer leeg, dit maakt het mogelijk om de huidige waarden in de velden in te stellen met #default_value in elk van de tekstvelden, waarbij je gegevens uit de configuraties ontvangt met de get()-methode.
['drupalbook_api_key'] = array(
'#type' => 'textfield',
'#title' => $this->t('API Key'),
'#default_value' => $config->get('drupalbook_api_key'),
);
$form['drupalbook_api_client_id'] = array(
'#type' => 'textfield',
'#title' => $this->t('API Client ID'),
'#default_value' => $config->get('drupalbook_api_client_id'),
);
En aan het einde van de methode retourneren we $form en $form_state zodat het formulier wordt opgebouwd.
::buildForm($form, $form_state);
Vervolgens hebben we de submitForm() methode, deze wordt uitgevoerd als het formulier is ingediend en er geen fouten zijn opgetreden. Als je echter een niet ingevuld verplicht veld had en Drupal een fout gooit, dan zal submitForm niet werken. Als je de ingediende gegevens van het formulier wilt controleren, moet je validateForm() gebruiken. Validate werkt zelfs als er een fout in het formulier zit en met validate kun je de formulierinzending annuleren en een fout veroorzaken als iets niet klopt in de gegevens. We behandelen validate in een van de volgende formulieren tutorials.
In de submitForm() methode gaan we door alle velden, verzamelen we hun waarden en werken we de drupalbook.settings configuratie bij:
function submitForm(array &$form, FormStateInterface $form_state) {
// Haal de configuratie op
$this->configFactory->getEditable('drupalbook.settings')
// Stel de ingediende configuratie-instellingen in
->set('drupalbook_api_key', $form_state->getValue('drupalbook_api_key'))
// Je kunt meerdere configuraties tegelijk instellen door
// meerdere oproepen naar set() te maken
->set('drupalbook_api_client_id', $form_state->getValue('drupalbook_api_client_id'))
->save();
parent::submitForm($form, $form_state);
}
We roepen ook de oudermethode submitForm aan, die een bericht weergeeft over de succesvolle indiening van het formulier. Je kunt deze regel uitcommentariëren en je eigen bericht schrijven:
//parent::submitForm($form, $form_state);
drupal_set_message($this->t('My Cool Form has been saved!'));
Vergeet niet de cache te wissen zodat je route wordt toegepast. Nu kun je je formulier in actie proberen. Wanneer je de API-sleutel moet laden, kun je deze code gebruiken:
$config = \Drupal::config('example.settings');
$api_key =$config->get('drupalbook_api_key');
$api_client_id = $config->get('drupalbook_api_client_id');
Deze code werkt in elke module of preprocess-functie, omdat er een enkel configuratiesysteem in Drupal is.
Dat is alles voor de volgende les over formulieren, we zullen analyseren hoe we meerstapsformulieren kunnen maken.
Codevoorbeelden kunnen worden bekeken op github:
https://github.com/levmyshkin/drupalbook8