1

I have a multistep webform in Drupal 8. I want to define spearate page template for each page in the webform.

I'm trying to define it using hook_theme_suggestions_hook() like below. But how can I identify the current webform page currently viewing from $variables.

function custom_module_theme_suggestions_webform(array $variables) {
  $suggestions = array();

  $suggestions[] = 'webform__'.$current_page;

  return $suggestions;
}
4
  • in the form itself set $form['#theme'] = 'foo_bar__baz'; and also define the 'foo_bar' theme definition.
    – user21641
    Jun 10, 2017 at 10:36
  • What exactly does "current webform page" refer to in the question - is it the page template or the current route? You can get the current route from \Drupal::routeMatch()
    – Alma
    Jun 19, 2017 at 8:21
  • @Alma, In my question "current webform page" means the page which user currently on. It means my webform is a multistep form. I need to identify the current step the user currently on. I have fixed it for time being using D8 temp storage functionality. Adding my answer here for reference.
    – Cool
    Jun 19, 2017 at 8:48
  • If it's a multi-step form then you don't have to jump through the hoops of using the current page, since that can change later on. Using a variable in your request or tempstore as you say is more robust. Then the template suggestions could be based off those.
    – Alma
    Jun 19, 2017 at 8:54

4 Answers 4

2

I have fixed the issue using D8 temp storage functionality. I was able to get the current step in my form_alter() hook, and I stored it in to a temp variable and accessed it in theme_hook_suggestions() hook().

/**
 * Implements hook_form_alter().
 */
function custom_module_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) {
  if($form_id == 'mywebform_id') {

    $current_page = $form_state->get('current_page');

    $tempstore = \Drupal::service('user.private_tempstore')->get('custom_module');
    $tempstore->set('current_page', $current_page);
  }
}

function custom_module_theme_suggestions_webform(array $variables) {
  $tempstore = \Drupal::service('user.private_tempstore')->get('custom_module');
  $current_page = $tempstore->get('current_page');

  $suggestions = array();

  $suggestions[] = 'webform__'.$current_page;

  return $suggestions;
}
0

You need to enable twig debugging in sites/default/services.yml If you don't have this file, you must do :

cd sites/default
cp default-services.yml services.yml

Set debug to true in place of false, in the twig.config section.

Then using Firebug or SHIFT+CTRL+c in chrome you'll be able to identify in the code source of the page the templates suggestions section by section, from page level, to a simple field or block level.

0

There are two options depending on what your template suggestion varies by - either page route or page path

Page Route

function custom_module_theme_suggestions_webform(array $variables) {
  $suggestions = array();
  $current_page = \Drupal::routeMatch()->getRouteName();
  // Replace non-alphanumeric characters with hyphens.
  $current_page = \Drupal\Component\Utility\Html::cleanCssIdentifier($current_page);
  $suggestions[] = 'webform__' . $current_page;

  return $suggestions;
}

Page path / url

function custom_module_theme_suggestions_webform(array $variables) {
  $suggestions = array();
  $current_url = \Drupal\Core\Url::fromRoute('<current>')->toString();
  $current_page = substr($current_url, strlen(\Drupal::request()->getBaseUrl()))
  // Replace non-alphanumeric characters with hyphens.
  $current_page = \Drupal\Component\Utility\Html::cleanCssIdentifier($current_page);
  $suggestions[] = 'webform__' . $current_page;

  return $suggestions;
}
0

I implemented this method in drupal 9 and webform latest version:

/**
 * Implements hook_webform_submission_form_alter().
 */
function module_name_webform_submission_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) {
if ($form['#webform_id'] === 'your_webform_id' && ($current_page = $form_state->get('current_page')) !== '') {
    $form['current_step'] = [
      '#type' => 'value',
      '#value' =>  $current_page,
    ]; 
  }
}

/**
 * Implements hook_theme_suggestions_HOOK_alter().
 */
function module_name_theme_suggestions_webform_submission_form_alter(array &$suggestions, array $variables, $hook) {
  if ($variables['form']['#webform_id'] === 'your_webform_id') {
    $suggestions[] = $hook . '__' . $variables['form']['#webform_id'] . '__' . $variables['form']['current_step']['#value'];
  }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.