Princip implementacije prilagođenih formi bazira se na kreiranju upper layer u predlošku forme koja će se pozivati preko osnovne forme i renderirati umjesto nje.
U nastavku donosimo primjer implementacije prilagođenih formi za login i registracijsku formu.
Prvi korak je implementacija hook funkcije koja označava da želimo kreirati upper layer forme.
U .theme datoteku dodajte sljedeće:
function THEMENAME_theme() {
return array(
'user_login' => array('render element' => 'form'),
'user_pass' => array('render element' => 'form'),
);
}
Na ovaj način govorimo Drupalu da prilikom renderiranja forme, user_login i user_pass moraju biti postavljeni unutar varijable $form, koja će biti upper layer.
Sljedeći korak jest naredba kojom ćemo Drupalu prenijeti da za odgovarajuće forme mora pretražiti novu datoteku predložaka.
U .theme datoteku dodajte sljedeće:
function THEMENAME_form_user_login_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) {
$form['#theme'] = 'user_login';
}
function THEMENAME_form_user_pass_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) {
$form['#theme'] = 'user_pass';
}
Prethodnim programskim kodom mijenjamo forme na način da na poziv povuku novu datoteku predložaka.
Sve što je sada potrebno uraditi jest kreirati dvije datoteke predložaka sa imenima koje ćete im dodijeliti:
user-login.html.twig & user-pass.html.twig
Ono što možete primjetiti jest da su podvlake u nazivima datoteke prevedene kao spojnice.
Sada ćemo vidjeti što se nalazi unutar user-login.hrml.twig:
{#
/**
* Exemple of twig template for user-login
*/
#}
<form{{ attributes }}>
<div class="account-input-wrapper">
<div>{{ form.name }}</div>
<div>{{ form.pass }}</div>
{{ form|without('name', 'pass') }}
</div>
</form>
Kao što možete vidjeti, “trik” je u tome da se cijela forma poziva na kraju datoteke, bez dodijeljenih vrijednosti. Cilj je ispisati sva validacijska polja koja su potrebna Drupalu. Ukoliko se to ne učini u većini slučajeva će se prikazati greška kao rezultat slanja forme.
Ova metodologija se može primjeniti na bilo koji tip forme. Za polje koristite {{ form.field_name }} i ne zaboravite ispisati cijelu formu bez ručno dodijeljenih vrijednosti.