Return to site

Webform 6.x is almost here

· Drupal,Webform,jQueryUI

I’d like to begin by saying most people will not notice any significant difference between Webform 8.x-5.x and Webform 6.x because most of the noteworthy changes are happening under the hood to APIs and configuration: there was a bump in the Webform module's road to Drupal 9, which helped fix subclassing and stop the overriding constructors. This change became the initial commit to the Webform module's 6.x branch. Most of the subsequent commits to the Webform 6.x branch addressed the removal of deprecated code plus some minor tweaks to settings and options.

Removing the Webform module's dependency on jQueryUI

The most noticeable change in Drupal 9 and Webform 6.x is most jQuery UI asset libraries are deprecated and moved to contrib modules. The Webform module was using the jQueryUI's Tabs, Tooltip, and Date picker plugins. Although I considered keeping the requirement of these plugins using Drupal's corresponding jQueryUI modules, after some nudging from the Drupal community, I decided to replace the jQueryUI Tabs and Tooltip and make the jQueryUI Date picker an optional dependency.

The jQuery UI Tabs plugin was replaced with Tabby, a lightweight, accessible vanilla JS toggle tabs library. Since tabs only appear within the Webform module's admin UI, I felt that Tabby was the most straightforward solution without having the Webform module provide its own tabs implementation.

Below is a screenshot of Tabby in the Webform module's user interface.

Tabby in the Webform module's user interface.

Replacing the jQuery UI Tooltip plugin with Tippy.js was a no-brainer because Tippy.js depends on Popper.js, which is now included with Drupal core. Tippy.js was super easy to implement and provides a lot of flexibility.

Below is a screenshot of Tippy.js's tooltips in the Webform module's user interface.

Tippy.js's tooltips in the Webform module's user interface.

Entirely replacing the jQueryUI Date picker plugin became impractical because it’s a plugin that works great, and a lot of Drupal sites have enhanced it with their own custom options and behaviors. I also made the mistake of having the jQueryUI Date picker tightly integrated with the Webform module's Date and Date/time elements. This decision makes it very difficult to "replace" the jQueryUI Date picker dependency. The jQueryUI Date picker is now optional and requires the jQuery UI Datepicker module to be installed. In the long term, we should build a dedicated date/time picker element as a Webform add-on/contrib module using a supported open-source modern JavaScript library.

Some minor tweaks to settings and options

Some minor tweaks were made in Webform 6.x to improve settings, options, behaviors, and features. For example, URL aliases on the Webform module's General setting form are now prefixed with a forward slash. This approach is more consistent with how Drupal core handles URLs/paths.

 

One of the biggest changes, which does not impact any existing installation of the Webform module, is the Webform module's default 'gender' options are more now inclusive. Personally, I like ensuring that the Webform module user experience reflects the diversity and inclusivity of the Drupal community.

The Webform module's default 'gender' options.

Finally, one major tweak to translations

And the last tweak I want to mention is the one I made to the user interface for translating webform elements. Translators no longer need to use a YAML editor but now instead can edit individual element labels and descriptions.

Tips for upgrading to Webform 6.x

Right now, there is an initial beta release of Webform 6.x for Drupal 8/9. This beta release means that the APIs are frozen. There will be an upgrade path between beta releases. This beta version is intended to give people a chance to help with some testing and quality assurance. There should be a stable release coming very soon.

Besides updating the Webform module using Composer or manually, everyone needs to update the Webform's module external libraries, especially the Progress Tracker, which was upgraded from version 1.x to 2.x. Finally, please make sure to test everything on a staging or local server and confirm that your exported webform configuration is also up-to-date.

Contrib and custom modules that extend the Webform module may need to update their Webform related code not to override constructors for service objects, plugins, and controllers.

If you run into any bugs or issues, don't hesitate (after reading the issue etiquette) to create a new ticket in the Webform module's issue queue.

All Posts
×

Almost done…

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

OK