Why isn’t my custom Form API #states applied in my webform yaml editor working?

I have the need to set visibility state of a checkbox option in one question (Table checkbox select) based on the value of another checkbox in the same table. I also have other scenarios where I would need same functionality but across different questions in the same webform.

I know I can easily do it between two different questions ( 2 different elements) with the built-in conditional logic UI in webform but no such UI option for my case now (afaik) so I’m trying to set it via the custom one and this is my first time with form states and custom condition in webform so I appreciate your kind help so greatly.

I went through trials and errors and the code wasn’t being saved till I, thanks to @jrockowitz ‘s tip, learnt that I was using php code where I need to use yaml code since I’m using the yaml source editor (shown in the screenshot below). When I fixed that, my custom code would save and it reflects as entered in the webform source yaml. However, the custom condition is still not working as expected and I’m still not sure why.

I’m adding the code in the Edit source box accessible via clicking its link on the form “Conditions” tab.

I got the selectors for the involved question options from the “Available selectors” list by clicking on the “Help” link under “Learn more about Drupal’s Form API #states.” on the “Conditional Logic” for the element editing tab in my webform.

This is a sample full yaml code for the form with a sample question and what I want to achieve but not yet working:

some_question:   '#type': tableselect   '#title': 'some question'   '#options':     q1: 'q1 (hide if q2 is checked)'     q2: 'q2 (hide if q1 is checked)'     q3: q3     q4: q4     q5: q5     q6: q6     q7: q7   '#states':     ':input[name="some_question[q2]"]':       invisible:         ':input[name="some_question[q1]"]':           checked: true     ':input[name="some_question[q1]"]':       invisible:         ':input[name="some_question[q2]"]':           checked: true            

What am I missing here ?!

  • For those who maybe aren’t familiar with the UI edit source, this is a link with info and screenshots : https://www.drupal.org/node/3012686

  • Note: As per @leymannx ‘s kind advice, I re-wrote the whole question to rid it of my dump of updates with my trials and errors. I hope it’s now cleaner, clearer and more worthy of up-votes 🙂

This article was republished from its original source.
Call Us: 1(800)730-2416

Pixeldust is a 20-year-old web development agency specializing in Drupal and WordPress and working with clients all over the country. With our best in class capabilities, we work with small businesses and fortune 500 companies alike. Give us a call at 1(800)730-2416 and let’s talk about your project.

FREE Drupal SEO Audit

Test your site below to see which issues need to be fixed. We will fix them and optimize your Drupal site 100% for Google and Bing. (Allow 30-60 seconds to gather data.)

Powered by

Why isn’t my custom Form API #states applied in my webform yaml editor working?

On-Site Drupal SEO Master Setup

We make sure your site is 100% optimized (and stays that way) for the best SEO results.

With Pixeldust On-site (or On-page) SEO we make changes to your site’s structure and performance to make it easier for search engines to see and understand your site’s content. Search engines use algorithms to rank sites by degrees of relevance. Our on-site optimization ensures your site is configured to provide information in a way that meets Google and Bing standards for optimal indexing.

This service includes:

  • Pathauto install and configuration for SEO-friendly URLs.
  • Meta Tags install and configuration with dynamic tokens for meta titles and descriptions for all content types.
  • Install and fix all issues on the SEO checklist module.
  • Install and configure XML sitemap module and submit sitemaps.
  • Install and configure Google Analytics Module.
  • Install and configure Yoast.
  • Install and configure the Advanced Aggregation module to improve performance by minifying and merging CSS and JS.
  • Install and configure Schema.org Metatag.
  • Configure robots.txt.
  • Google Search Console setup snd configuration.
  • Find & Fix H1 tags.
  • Find and fix duplicate/missing meta descriptions.
  • Find and fix duplicate title tags.
  • Improve title, meta tags, and site descriptions.
  • Optimize images for better search engine optimization. Automate where possible.
  • Find and fix the missing alt and title tag for all images. Automate where possible.
  • The project takes 1 week to complete.