How do I correctly origrammatically add the wizard behavior to a custom form?

When exporting a wizard webform the generated code seems not convert correctly wizard steps.
They are displayed as “details” instead of wizard pages. Checking on the webform module it seems uses ctools WizardFormInterface so i wonder if i need to extend from another Class instead of FormBase or ConfigFormBase. I could not find an example digging deeper in the module.

Any help is appreciated.

step_one:
  '#type': wizard_page
  '#title': 'Step One'
  phone:
    '#type': textfield
    '#title': Phone
step_two:
  '#type': wizard_page
  '#title': 'Step Two'
  email:
    '#type': checkbox
    '#title': Email
<?php

namespace Drupalprueba_wizardForm;

use DrupalCoreFormConfigFormBase;
use DrupalCoreFormFormStateInterface;
use SymfonyComponentDependencyInjectionContainerInterface;

/**
 * Prueba Wizard configuration settings form.
 */
class PruebaWizardSettingsForm extends ConfigFormBase {

  /**
   * The webform token manager.
   *
   * @var DrupalwebformWebformTokenManagerInterface
   */
  protected $tokenManager;

  /**
   * The webform element plugin manager.
   *
   * @var DrupalwebformPluginWebformElementManagerInterface
   */
  protected $elementManager;

  /**
   * {@inheritdoc}
   */
  public static function create(ContainerInterface $container) {
    $instance = parent::create($container);
    $instance->tokenManager = $container->get('webform.token_manager');
    $instance->elementManager = $container->get('plugin.manager.webform.element');
    return $instance;
  }

  /**
   * {@inheritdoc}
   */
  public function getFormId() {
    return 'prueba_wizard_settings_form';
  }

  /**
   * {@inheritdoc}
   */
  protected function getEditableConfigNames() {
    return ['prueba_wizard.settings'];
  }

  /**
   * {@inheritdoc}
   */
  public function buildForm(array $form, FormStateInterface $form_state) {
    $config = $this->config('prueba_wizard.settings');

    // Step One.
    $form['step_one'] = [
      '#type' => 'webform_wizard_page',
      '#title' => $this->t('Step One'),
    ];
    $form['step_one']['phone'] = [
      '#type' => 'textfield',
      '#title' => $this->t('Phone'),
      '#default_value' => $config->get('phone'),
    ];
    
    // Step Two.
    $form['step_two'] = [
      '#type' => 'webform_wizard_page',
      '#title' => $this->t('Step Two'),
    ];
    $form['step_two']['email'] = [
      '#type' => 'checkbox',
      '#title' => $this->t('Email'),
      '#default_value' => $config->get('email'),
    ];
    $form['actions'] = [
      '#type' => 'actions',
      '#tree' => TRUE,
    ];
    $form['actions']['submit'] = [
      '#type' => 'submit',
      '#value' => 'Guardar configuración',
      '#button_type' => 'primary',
    ];

    // Process elements.
    $this->elementManager->processElements($form);

    // Replace tokens.
    $form = $this->tokenManager->replace($form);

    // Attach the webform library.
    $form['#attached']['library'][] = 'webform/webform.form';

    // Autofocus: Save details open/close state.
    $form['#attributes']['class'][] = 'js-webform-autofocus';
    $form['#attached']['library'][] = 'webform/webform.form.auto_focus';

    // Unsaved: Warn users about unsaved changes.
    $form['#attributes']['class'][] = 'js-webform-unsaved';
    $form['#attached']['library'][] = 'webform/webform.form.unsaved';

    // Details save: Attach details element save open/close library.
    $form['#attached']['library'][] = 'webform/webform.element.details.save';

    // Details toggle: Display collapse/expand all details link.
    $form['#attributes']['class'][] = 'js-webform-details-toggle';
    $form['#attributes']['class'][] = 'webform-details-toggle';
    $form['#attached']['library'][] = 'webform/webform.element.details.toggle';

    return $form;
  }

  /**
   * {@inheritdoc}
   */
  public function submitForm(array &$form, FormStateInterface $form_state) {
    // Get all values.
    $values = $form_state->getValues();

    // Remove Form API values.
    unset(
      $values['form_build_id'],
      $values['form_token'],
      $values['form_id'],
      $values['op'],
      $values['actions']
    );

    // Save config.
    $this->config('prueba_wizard.settings')
      ->setData($values)
      ->save();

    // Display message.
    parent::submitForm($form, $form_state);
  }

}


Go to Source of this post
Author Of this post: lithiumlab
Title Of post: How do I correctly origrammatically add the wizard behavior to a custom form?
Author Link: {authorlink}