Implementacija prilagođenih formi

Submitted by victor.bourgade on

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. 

 

Oznake

Drupal 8 Twig Theme

About the writer

victor.bourgade

Victor is a web developer passionnated in drupal and bootstrap technologies. He likes challenges and beautiful designs.

When not behind his computer you'll find him drinking beers with friends or in the middle of nowhere hiking with his dog.