Hello,

The site that I maintain uses Webform Conditionals to determine which fields are displayed on certain pages. Specifically, I use a hidden field with the value [current-page:title] to identify the page. The conditionals applied to the appropriate fields show or hide them (usually, all but one field is hidden as they are semi-product specific. See: https://hartfordrents.com/360-camera-rental - The field "360 Camera Model:" that is 2/3 of the way down the form is shown while all other product-specific fields are hidden.

I am now experimenting with Dialog boxes and they are working fine except for the page-specific conditionals described above. I understand why this is happening; it is due to the fact that the form is being called into the dialog box as it's own page...

IE: a href="/form/quick-quote-form"

So, since it is it's own page essentially, it doesn't see the parent page's H1 tag and hence cannot fire the conditional for the field it needs to be displayed. All fields with conditionals are simply hidden since the page title of the form itself does not match the set conditions.

I am wondering if there is a way to either reference the form (in the href) in a way where it is still a part of the parent page or, is there an accepted token to refer back to the page and use that Page Title to fire the conditionals?

CommentFileSizeAuthor
#27 Quick Quote Form Webform Demo Site.png180.03 KBjrockowitz
#26 webform.webform.quick_quote_form.yml43.09 KBericroks
#25 step-05.jpg517.61 KBericroks
#25 step-04.jpg570.42 KBericroks
#25 step-03.jpg629.54 KBericroks
#25 step-02.jpg413.31 KBericroks
#25 step-01.jpg356.96 KBericroks
#19 webform.webform.issue_2989923.yml3.71 KBjrockowitz
#13 step-1.jpg351.87 KBericroks
#13 step-2.jpg391.86 KBericroks
#13 step-3.jpg285.57 KBericroks
#13 step-4.jpg625.61 KBericroks
#13 step-5.jpg589.15 KBericroks
#13 step-6.jpg506.74 KBericroks
#10 Contact Webform Demo Site.png245.69 KBjrockowitz
#10 2989923-10.patch4.57 KBjrockowitz
#9 Issue 2989923 Dialog Modal Conditionals Using Current Page Tokens Webform Demo Site.png188.56 KBjrockowitz
#8 3.jpg409.83 KBericroks
#7 07.jpg563.51 KBericroks
#7 06.jpg579.52 KBericroks
#7 05.jpg493.28 KBericroks
#7 04-1.jpg601.55 KBericroks
#7 03.jpg529.58 KBericroks
#7 02.jpg528.42 KBericroks
#7 01.jpg482.08 KBericroks
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

ericroks created an issue. See original summary.

ericroks’s picture

ericroks CreditAttribution: ericroks commented
Issue summary: View changes
jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commented
Status: Active » Needs review

We can't really hack at the [current-page:title] in the webform module. You might want to use the [webform_submission:node:title] token. The current node is passed to the dialogs.

ericroks’s picture

ericroks CreditAttribution: ericroks commented

I replaced [current-page:title] with [webform_submission:node:title] and an error was returned:

"Value is using the following invalid tokens: [webform_submission:node:title].
2 errors have been found: ValueDefault value"

jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commented

Do you have the webform_node.module enabled?

Try using [webform_submission:source-entity:title]

You might have post an example webform and/or a screenshot.

ericroks’s picture

ericroks CreditAttribution: ericroks commented

Webform_node.module was not enabled (leftover from past database issues). I enabled and tried both tokens that you recommended, neither gave me the desired result.

Please, give me a day to prepare some screenshots & a more descriptive message for you. Perhaps a clearer picture needs to be painted.

ericroks’s picture

ericroks CreditAttribution: ericroks commented
FileSize
01.jpg482.08 KB
02.jpg528.42 KB
03.jpg529.58 KB
04-1.jpg601.55 KB
05.jpg493.28 KB
06.jpg579.52 KB
07.jpg563.51 KB

As it stands now, I have a webform that is placed in a block that is used over all of our product pages called "Quick Quote Form". It uses conditional logic to hide/display the appropriate product fields on the individual product pages.
Only local images are allowed.

The form determines which page it is on by placing the token [current-page:title] in a hidden field called "Current Page". Basically, sniffing out the H1 tag on the page.
Only local images are allowed.

As you can see, there are lots of fields that are being toggled by this conditional. For this instance, we will be looking at "360 Camera Models".
Screen

On the conditions tab for 360 Camera Model, I use the statement: The field is only visible if the Current Page value is "360 Camera Rental".
Only local images are allowed.

These conditionals work fine when the form is embedded as a block on a page. It is when I call it out with the dialog settings that it stops working. I take the code from the Dialog Settings group.
Only local images are allowed.

And place it in the body of the page.
Only local images are allowed.

Press the button titled "Get A Quick Quote" and the dialog box pops up displaying the form.
Only local images are allowed.

However, there should be the field "360 Camera Model" in between the "Zip/Postal Code" and "Quantity" fields. Since the form is being called as its own node over the page, the page title does not match up with conditional statement and does not display the appropriate field.

How can I get the conditions to fire as I would like them to in this situation?

ericroks’s picture

ericroks CreditAttribution: ericroks commented
FileSize
3.jpg409.83 KB
jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commented
FileSize
Issue 2989923 Dialog Modal Conditionals Using Current Page Tokens Webform Demo Site.png188.56 KB

You need to use the [webform_submission:node:title] token and have to manually pass the entity type and id in your link.

<a href="/wf/form/issue-2989923?entity_type=node&entity_id=123" class="webform-dialog webform-dialog-normal button">Test Normal</a>

You will also need to configure 'Allow all elements to be populated using query string parameters. (/admin/structure/webform/manage/{WEBFORM_ID}/settings/form)


I need help documenting how custom dialogs work within the webform module.

jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commented
FileSize
2989923-10.patch4.57 KB
Contact Webform Demo Site.png245.69 KB

The attached patch makes it a little easier for developers to enable 'Allow (dialog) source entity to be populated using query string parameters'.

  • jrockowitz committed e4b097d on 8.x-5.x 
    Issue #2989923 by jrockowitz, ericroks: Dialog Modal...
jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commented
Status: Needs review » Fixed

I committed the patch. Please download the test dev release to review.

ericroks’s picture

ericroks CreditAttribution: ericroks commented
FileSize
step-6.jpg506.74 KB
step-5.jpg589.15 KB
step-4.jpg625.61 KB
step-3.jpg285.57 KB
step-2.jpg391.86 KB
step-1.jpg351.87 KB

Ok, I started off by adjusting the token in the hidden field.
step 1

Changed it to [webform_submission:node:title].
step 2

Navigated to /admin/structure/webform/manage/MY_FORM/settings/form and checked the box for "Allow source entity to be populated using query string parameters".
step 3

Then, went to /admin/structure/webform/manage/MY_FORM/settings and copied the code for the "Custom" option.
step 4

Pasted into the body of the node (ID: 27). Then customized the link to use node for the Entity and 27 for the ID. Hit save.
step 5

Clicked on the "Test Custom" link and the dialog box popped up without the proper conditional responding.
step 6

I then submitted a test of the form and looked at the email for the hidden field content. In the message it returned: Current Page [webform_submission:node:title]. It should have returned "360 Camera Rental" as that is the title of node 27.

Am i missing something here?

ericroks’s picture

ericroks CreditAttribution: ericroks commented

PS. I saw that you could use some help on the documentation. I can help if you let me know what, specifically you need done.

ericroks’s picture

ericroks CreditAttribution: ericroks commented

PPS. I failed to mention that I also manually updated the Webform module to the latest Dev release and ran update script.

jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commented
Status: Fixed » Needs work

@ericroks #13 looks right. I will try to find sometime to replicate your steps and see what is wrong.

Once we sort this out, it would help everyone if we could create a recipe

ericroks’s picture

ericroks CreditAttribution: ericroks commented

Sure, I can help with the recipe. It's the least I can do to give back for all of the help received.

  • jrockowitz committed 0e75afa on 8.x-5.x 
    Issue #2989923 by jrockowitz, ericroks: Dialog Modal...
jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commented
FileSize
webform.webform.issue_2989923.yml3.71 KB

The attached webform replicates the issues when it is attached to a webform node that supports 'Full HTML' in the body content.

  • jrockowitz committed e1eeb66 on 8.x-5.x 
    Issue #2989923 by jrockowitz, ericroks: Dialog Modal...

  • jrockowitz committed d731bb7 on 8.x-5.x 
    Issue #2989923 by jrockowitz, ericroks: Dialog Modal...
jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commented

Doh!!! I failed to read my own documentation.

entity_type needs to be source_entity_type and entity_id needs to be source_entity_id.

<a href="/wf/form/issue-2989923?entity_type=ENTITY_TYPE&amp;entity_id=ENTITY_ID" class="webform-dialog button" data-dialog-options="{&quot;width&quot;:400,&quot;height&quot;:400}">Test Custom</a>

jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commented
Status: Needs work » Needs review
ericroks’s picture

ericroks CreditAttribution: ericroks commented

I'll give it a try.

ericroks’s picture

ericroks CreditAttribution: ericroks commented
FileSize
step-01.jpg356.96 KB
step-02.jpg413.31 KB
step-03.jpg629.54 KB
step-04.jpg570.42 KB
step-05.jpg517.61 KB

I was not able to produce the desired results for my form in question. Below are the steps that I took:

First, I edited the hidden field that contains the Title token;
step 1

Next, edited the token used in that hidden field to [webform_submission:source-entity:title]
step 2

Navigated to the Dialog Settings and grabbed the stock code for the "Custom" option.
step 3

The fourth step, pasted the code into the body of the node I am editing (Full HTML, of course) as seen below.

a class="webform-dialog button" data-dialog-options="{"width":400,"height":400}" href="/form/quick-quote-form?source_entity_type=node&source_entity_id=27"

step 4

Hit Save.

Edited page loads and I click "Test Custom". The dialog box appears, however, the form is unable to load.
step 5

ericroks’s picture

ericroks CreditAttribution: ericroks commented
FileSize
webform.webform.quick_quote_form.yml43.09 KB

In addition, here is the .yml export for reference.

jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commented
FileSize
Quick Quote Form Webform Demo Site.png180.03 KB

The issue with your webform is the 'Type of source entity to be populated using query string parameters' needs to be blank or set to 'Content' (aka node) and not 'Field'

@see /admin/structure/webform/manage/quick_quote_form/settings/form

ericroks’s picture

ericroks CreditAttribution: ericroks commented

Changed Type of source entity to be populated using query string parameters to "Content" instead of "Field". That did bring the form back to the dialog box. But, still does not show the conditional field.

Submitted a test from that form and the entire field "Current Page" was totally excluded in the resulting email.

ericroks’s picture

ericroks CreditAttribution: ericroks commented

Oh, never mind. It worked!!!

I double checked the hidden field "Current Page" and saw that the Default Value was populated with the appropiate tag but the Value field was blank. I added [webform_submission:source-entity:title] to the Value field and it worked! I have the conditional field in there now.

Thank you very much for the assistance!

jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commented
Status: Needs review » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

liquidcms’s picture

liquidcms CreditAttribution: liquidcms commented

I guess the recipe for this was never put together?

Trying to do what seems like the same thing but no luck. Some things have possibly changed? There is no longer a Dialog Options; but i think just to provide help for the dialog url.

I have tried this:

<p><strong>Is there a problem with this page? <a class="btn webform-dialog webform-dialog-narrow" href="/en/form/user-feedback-form?source_entity_type=node&amp;source_entity_id=1187">Report problem</a></strong></p>

both in a block and on the node page. both give same result for this token: [webform_submission:source-entity:title] which is the title of the webform; but the page it is sued on.