Webform. Сергій Шумський

 

Webform - це модуль для створення форм і опитувань в Drupal. Після відправки листи електронної пошти можуть бути відправлені адміністраторам і/або відправникам. Результати можуть бути експортовані в Excel або інші програми електронних таблиць. Webform також надає деякі базові статистичні review і має великий API для розширення своїх можливостей.

В цій доповіді я хочу Вас ознайомити з :

  1. налаштуваннями elements webform по роботі з file
  2. створення файлу формату *.pdf
  3. використання webform для відправки листа своїх даних
  4. розширені можливості element Select

 

1. Налаштування elements webform по роботі з file

Для роботи з elements file в webform, у Вас мають бути встановлені певні налаштовування.

При встановленні сайту Drupal 8, Ви маєте виконати такі налаштування з файлу drupal8/core/INSTALL.txt див. пункт 5

b. Open your settings.php in a plain-text editor, and uncomment (remove the # at the start of line) this line:

     # $settings['file_public_path'] = 'sites/default/files';

     Enter the desired path and save the file.

     If you want to use private file storage, you need to uncomment (remove

     the # at the start of line) the following line in settings.php:

     # $settings['file_private_path'] = '';

     Enter the path for private files and save the file.

Також обов'язково зверніть увагу на налаштування в самій webform, для цього необхідно перейти на /admin/structure/webform, далі на закладку Settings, знайдіть розділ File upload default settings та перевірте налаштування, як показано на малюнку

1.jpg

Після цього у Вас буде можливість додавати до Вашої форми elements webform File

 

2. Cтворення файлу формату *.pdf

В даному проекті для створення файлу формату *.pdf, я конвертував HTML в PDF за допомогою Dompdf.

Для роботи нам необхідно встановити dompdf library, https://github.com/dompdf/dompdf

Як саме конвертував HTML в PDF за допомогою Dompdf ???

Дуже просто: використовуємо наступну функцію:

     function getResultFileResume(&$form, \Drupal\Core\Form\FormStateInterface &$form_state) {

     $values = $form_state->getValues();

     //  todo add date time

     $date = date('m-d-Y-h-i-s', time());

     $file_name = str_replace(' ', '-', $values['position_applied_for'])

     . '--' . str_replace(' ', '-', $values['last_name'])

     . '--' . str_replace(' ', '-', $values['first_name'])

     . '--' . $date . '.pdf';

    $form_params = [

     '#theme' => 'webform_job_aplication',

     '#elements' => $values,

     ];

     $html = \Drupal::service('renderer')->renderRoot($form_params);

     // Init the PDF generator. Here I am using the DOMPDF library

     $dompdf = new Dompdf();

     $dompdf->loadHtml($html);

     $dompdf->render();

     // Convert the HTML data to PDF

     $output = $dompdf->output();

     //   Save PDF file

     $file = file_save_data($output, 'public://' . $file_name ,FILE_EXISTS_REPLACE);

     //   PDF file to add our file in our list values $form_state

     $form_state->setValue('form_result', $file->id());

     }

Тепер я розповім крок за кроком що та як в цій функцію getResultFileResume():

1. $values = $form_state->getValues();

$values - отримуємо всі дані з заповненої форми на сайті в масив. Далі ці дані нам будуть необхідні для створення файлу формату *.pdf

2. $file_name - тут я створюю унікальне ім'я для нашого майбутнього файлу

3. $form_params = [

     '#theme' => 'webform_job_aplication',

     '#elements' => $values,

     ];

 

4. $form_params - створюю масив, куди передаю дані '#elements' => $values, та назву шаблону, який буде використовуватися '#theme' => 'webform_job_aplication'.

     Тепер необхідна функція що буде ці дані обробляти

5. function fco_master_theme() {

     return [

         'webform_job_aplication' => [ 'variables' => [ 'elements' => [], ], ],

         ];

     }

6. $html = \Drupal::service('renderer')->renderRoot($form_params);

Використовую сервіс 'renderer', та отримую дані в форматі HTML

Детальніше ознайомитись з цим сервісом можна тут:

https://api.drupal.org/api/drupal/core%21lib%21Drupal%21Core%21Render%21Renderer.php/class/Renderer/8.2.x

7.   $dompdf = new Dompdf();

     $dompdf->loadHtml($html);

     $dompdf->render();

     $output = $dompdf->output();

     $file = file_save_data($output, 'public://' . $file_name ,FILE_EXISTS_REPLACE);

$output - отримую дані в форматі *.pdf

$file - зберігаю отримай файл в форматі *.pdf

 

8. $form_state->setValue('form_result', $file->id());

В пункті 8 я використовую елемент форми. В даний елемент я "поміщаю" лінку на створений файл, що збережений на сервері.

За допомогою $form_state->setValue('form_result', $file->id()); я використовую налаштування моєї webform і моя форма сама додає лінку на файл до листа.

Таким чином підіб`ю підсумок:

  • отримали масив з всіма даними форми
  • створили унікальне імя
  • створили шаблон та передали в шаблон дані
  • отримали html дані
  • використали Dompdf та отримали файл формату *.pdf
  • зберегли файл формату *.pdf
  • передали в форму лінку на цей файл

 

3. Використання webform для відправки листа своїх даних

Що маю на увазі в цьому пункті ?

Ідея проста - я використав саму webform, а саме, оскільки вже є налаштування Emails / Handlers моєї webform то я просто створю ще одне поле формату file, далі “сховаю” це поле для користувача і після того як створиться необхідний файл формату *.pdf (описано вище), я додам цей файл в “сховане” поле.

Тобто буде виконуватися при Submit форми:

  1. виконається валідація всіх полів форми
  2. створиться необхідний файл формату *.pdf
  3. файл буде додано до листа
  4. відправиться лист за вказаними налаштуваннями

Яким чином це реалізуємо, використаємо form_alter

function fco_master_form_alter(&$form, \Drupal\Core\Form\FormStateInterface &$form_state, $form_id) {

 if ($form_id == 'webform_submission_job_application_form') {

   if (empty($form['actions']['submit']['#submit'])) {

     $form['actions']['submit']['#submit'] = [];

   }

   array_unshift($form['actions']['submit']['#submit'], 'getResultFileResume');

 }

}

Ця функція просто додає до списку функцій що виконаються при Submit форми першою нашу функцію, що створює файл формату *.pdf

 

4. Розширені можливості element Select

В цьому пункті я розповім яким чином використовуючи лише можливості самої webform можна створити щось схожу не можливість Add One More секції форми.

Звичайно найкращим варіантом буде написання свого власного поля в якому буде вказано всі необхідні поля, наприклад з нашого проекту

2.jpg

 

Але ми розглянемо простішу можливість використання функціоналу модуля webform прямо з UI.

Для цього необхідно виконати налаштування:

 

3.jpg

 

  1. Це буде наша кнопка що додасть можливість “ще” заповнити інформацію, тобто якщо ми натиснемо на цю кнопку то з’явиться ще один блок.

        Для налаштування нам неохідно перейти на редагування поля, натисніть Edit, далі:

    • перейдіть на вкладку Conditional logic
    • додайте неодхідні налаштування, в нашому прикладі це4.jpg
  2. Це блок, що необхідно заповнити користувачеві.
Social activity
28.03.2017