It's a bit wonky now, as Formulate doesn't currently treat conditional fields as a first class citizen.
The AngularJS template has some support for conditional fields, but the plain JavaScript template doesn't have any support for them. You could always build in some sort of support for them yourself, but it wouldn't be the most straightforward thing.
If using the AngularJS template, you basically copy the CSHTML file for it (Responsive.Bootstrap.Angular.cshtml) and add conditionalControls to the Angular model. Make sure to register that new template in the templates.config file, and select it on the form configuration for the form you're working on.
In terms of code changes to that CSHTML file, first look for this code:
var angularModel = Json.Encode(new
And scroll down to this part of it:
url = "/umbraco/formulate/submissions/submit"
And do something like this:
url = "/umbraco/formulate/submissions/submit",
// Conditional fields - simple conditional structure
conditionalControls = new []
{
// Show the "other" field when a user indicates they heard about the company
// from some other source.
new
{
// How'd You Hear About Us? = 353a5a31089b4010a1713d5acbf34907
fieldId = "353a5a31089b4010a1713d5acbf34907",
show = "Other",
fields = new []
{
// How'd You Hear About Us (Other)? = 829e32d1855a4de28d2a97b6d4125bed
"829e32d1855a4de28d2a97b6d4125bed"
}
}
}
You'd have to adjust the GUID's to match the field ID's for your form.
Note that fields is an array because you can have multiple fields appear based on a value in another field.
A bit wonky, to be sure, but that's your best bet if you want to get it working today.
I would also love if somebody were to submit a pull request to add more first class support for conditional fields.
I've attempted what you've done and the conditions do not work:
I've copied Responsive.Bootstrap.Angular.cshtml to a new cshtml file.
With the newly copied file, I've added the conditionalControls and added the fieldID of the dropdown (in this case, it's a dropdown select list of states), the "show" equals to "NJ" (the value of the state selected) and the fields is a new array of fieldIDs, each of them a checkbox to appear on the form if "NJ" is selected.
I also registered the new cshtml file to templates.config.
I've taken my existing form and added this new template to it.
I've attempted to omit the conditional field from the layout with no luck. I also added the conditional field to the layout and there was no luck either. Am I missing a step to ensure that the conditionalControls are rendered properly? The form does render but the conditionalControls do not seem to be applied. I made no changes to my partial view macro file that invokes the form. Please advise.
That all sounds correct. If you upload your custom Responsive.Bootstrap.Angular.cshtml, your templates.config, and your ~/App_Data/Formulate/Json/ folder, I can copy it to my local to take a look.
What version of Umbraco and what version of Formulate are you using?
I've sent you the information to my code via your contact form. I'm using Umbraco 7.5.3 with Formulate 2.4.8. I omitted any form elements and handlers not needed to troubleshoot this issue and left the drop-down field, a few checkbox fields and the submit button. You are looking at that particular form as I might have a 2nd form in there that's considerably older. Please let me know what you find. Thanks again for your help!
I have one more question. Now I'm attempting to control those checkboxes based on different selections of the same drop-down. How does that get coded successfully in the cshtml's conditionalControls call? I thought the conditionalControls worked as an array of conditional controls?
That did not work - the last "new" declaration worked, but displayed both sets of new fields. I wonder if the Angular.js file needs to be adjusted. Please advise.
the last "new" declaration worked, but displayed both sets of new fields.
I don't really follow what your goal was. Should each drop down selection show a different checkbox field? Some rough visuals might help me understand better.
In any event, if you find some issue with the implementation, I would welcome a pull request. I can point you in the right direction if you are interested in taking that on.
If you submit an issue clearly outlining the problem (with screenshots, code snippets, and all the relevant details), then you submit a pull request that makes it very easy for me to test (e.g., by including sample files, and screenshots of what I should see), and the pull request is of sufficient quality (e.g., adheres to code standards, doesn't cause breaking changes), you should see a new version published in a day or two. Let me know if you need any tips about where to start looking in the code.
Show / Hide Fields
How would I go about setting up a form to show and hide fields based on radio button selection?
Conditions are what you want, here's a doc on it: https://our.umbraco.com/documentation/Add-ons/umbracoforms/editor/creating-a-form/conditional-logic/
Hi Amir,
That is for Umbraco Forms, which is a different product than Formulate.
That's what I get for replying while eating lunch and 1/2 reading :)
@Amir,
This may work for us. Is there a way to send email to different email addresses based on radio button select?
-Lee
That would only work for you if you are using Umbraco Forms.
If you are using Formulate, this may answer your question regarding dynamic email recipients: https://code101.net/code-101/dynamic-email-recipients-with-umbraco-formulate
The article mentions a drop down, but the same concept would apply to radio buttons.
Good question.
It's a bit wonky now, as Formulate doesn't currently treat conditional fields as a first class citizen.
The AngularJS template has some support for conditional fields, but the plain JavaScript template doesn't have any support for them. You could always build in some sort of support for them yourself, but it wouldn't be the most straightforward thing.
If using the AngularJS template, you basically copy the CSHTML file for it (
Responsive.Bootstrap.Angular.cshtml
) and addconditionalControls
to the Angular model. Make sure to register that new template in thetemplates.config
file, and select it on the form configuration for the form you're working on.In terms of code changes to that CSHTML file, first look for this code:
And scroll down to this part of it:
And do something like this:
You'd have to adjust the GUID's to match the field ID's for your form.
Note that
fields
is an array because you can have multiple fields appear based on a value in another field.A bit wonky, to be sure, but that's your best bet if you want to get it working today.
I would also love if somebody were to submit a pull request to add more first class support for conditional fields.
Good morning Nicholas,
I've attempted what you've done and the conditions do not work:
I've attempted to omit the conditional field from the layout with no luck. I also added the conditional field to the layout and there was no luck either. Am I missing a step to ensure that the conditionalControls are rendered properly? The form does render but the conditionalControls do not seem to be applied. I made no changes to my partial view macro file that invokes the form. Please advise.
Hi David,
That all sounds correct. If you upload your custom
Responsive.Bootstrap.Angular.cshtml
, yourtemplates.config
, and your~/App_Data/Formulate/Json/
folder, I can copy it to my local to take a look.What version of Umbraco and what version of Formulate are you using?
If you prefer not to share the files publicly, you can send me a link from this contact form: https://www.nicholaswestby.com/contact
Thank you Nicholas,
I've sent you the information to my code via your contact form. I'm using Umbraco 7.5.3 with Formulate 2.4.8. I omitted any form elements and handlers not needed to troubleshoot this issue and left the drop-down field, a few checkbox fields and the submit button. You are looking at that particular form as I might have a 2nd form in there that's considerably older. Please let me know what you find. Thanks again for your help!
I took a quick look, and I noticed the GUID's in the CSHTML file have dashes in them. I don't think that will work. Try removing the dashes, like in the above example: https://our.umbraco.com/packages/backoffice-extensions/formulate/formulate-questions/99332-show-hide-fields#comment-312802
Thanks Nicholas!
I have one more question. Now I'm attempting to control those checkboxes based on different selections of the same drop-down. How does that get coded successfully in the cshtml's conditionalControls call? I thought the conditionalControls worked as an array of conditional controls?
Thank you, David
Yeah, it's an array. I imagine you could do something like this:
A bit verbose, but should work I would think.
Hi Nicholas,
That did not work - the last "new" declaration worked, but displayed both sets of new fields. I wonder if the Angular.js file needs to be adjusted. Please advise.
Thank you, David
I don't really follow what your goal was. Should each drop down selection show a different checkbox field? Some rough visuals might help me understand better.
In any event, if you find some issue with the implementation, I would welcome a pull request. I can point you in the right direction if you are interested in taking that on.
My apologies Nicholas,
Yes - you've explained the intent perfectly. To illustrate an example:
If I select State1 - Checkbox1 and Checkbox2 are displayed But if I select State2 - Checkbox2 and Checkbox3 are displayed and Checkbox1 is hidden.
Looks as though when I select State1, nothing is still displayed and when I select State2, all three Checkboxes are displayed.
I'd like to initiate a pull request. What's the typical turnaround time between initiating a pull request and a resolution?
Thank you, David
If you submit an issue clearly outlining the problem (with screenshots, code snippets, and all the relevant details), then you submit a pull request that makes it very easy for me to test (e.g., by including sample files, and screenshots of what I should see), and the pull request is of sufficient quality (e.g., adheres to code standards, doesn't cause breaking changes), you should see a new version published in a day or two. Let me know if you need any tips about where to start looking in the code.
Would recommend submitting the issue before you start any work in case there is some oversight that I can point out and save you some work: https://github.com/rhythmagency/formulate/issues
is working on a reply...