Reusing Webform elements, behaviors, and APIs within a Drupal configuration form

Parent Feed: 

In my previous blog post about a few of my favorite Webform things, I expressed my appreciation for the fact that that "most of the code within the Webform module is reusable and extendable." Writing that blog post helped me re-organize and improve my presentation titled, Webforms for Everyone. While updating my presentation, I found explaining and showing how the Webform module’s APIs are reusable is very challenging. As the Webform module has grown and gotten more complicated, I have continually improved the examples and demos included in the module. These examples have helped developers understand how to extend the Webform module. As a result, I decided the best way to show how the Webform module's APIs - specifically form elements and behaviors - are reusable, was to create an example.

The Webform Custom (Configuration) Form example

The goal of the Webform Custom (Configuration) Form example is to show how to leverage Webform APIs outside of the Webform module. For instance, webform elements can be used within a Drupal configuration forms. A very basic reusable enhancement is attaching the Webform module’s JavaScript to warn users about unsaved changes.

A more advanced example is reusing the Webform module's multiple element widget to collect rich data. Recently, I had to create an arbitrary list of node ids stored within a configuration file. In doing so, I was able to use Drupal’s entity autocomplete element combined with the Webform module’s multiple element support.

The below example shows how to use a multiple entity autocomplete element with the unsaved changes behavior within a configuration form.

Webform Form API example

The above example was created using the below code snippet.

Using a code generator to create examples

Code generators like Drupal Console are incredibly valuable for creating boilerplate code, particularly for complex APIs or concepts. Drupal Console can also create an entire skeleton of a custom module, which inspired me add a code generator to the Webform Devel module. The Webform Devel module's code generator shows how to convert a Webform to Form API form.

The Webform Devel module, included with the Webform core module, now adds a 'Form API' tab within the configuration 'Export' tab. The 'Form API' tab includes all the boilerplate code required to take a Webform and convert it to a custom configuration form. The generated code consists of the form class definition, route definition, default configuration, and even the custom module's info file. All of the example code can be downloaded as a zipped archive, which can then be installed on any Drupal 8 website.

The below screencast recaps some of the examples discussed and illustrates the workflow and concept behind exporting and converting a Webform into a custom Drupal configuration form.

Something about this feature is pretty mind-blowing. When I included the above demo at the end of my "Webforms for Everyone" presentation at DrupalCampNJ, I managed to get every multitasking developer to look up from their laptops.

I am excited about this new feature and approach because it makes our job as developers a little easier, and people's end-user experiences a little better.

I hope you have fun building out awesome Webform and then exporting them as configuration forms into a custom module.

Backing the Webform module

Open Collective is providing us, Drupal, and Open Source, with a platform to experiment and improve Open Source sustainability. If you appreciate and value what you are getting from the Webform module, please consider becoming a backer of the Webform module's Open Collective.

Almost done…

We just sent you an email. Please click the link in the email to confirm your subscription!

OK

Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web