Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Mov3nforward 117 posts 319 karma points
    Oct 01, 2019 @ 16:48
    Mov3nforward
    0

    Show / Hide Fields

    How would I go about setting up a form to show and hide fields based on radio button selection?

  • Amir Khan 1282 posts 2739 karma points
    Oct 01, 2019 @ 16:55
  • Nicholas Westby 2054 posts 7100 karma points c-trib
    Oct 01, 2019 @ 16:57
    Nicholas Westby
    0

    Hi Amir,

    That is for Umbraco Forms, which is a different product than Formulate.

  • Amir Khan 1282 posts 2739 karma points
    Oct 01, 2019 @ 16:59
    Amir Khan
    0

    That's what I get for replying while eating lunch and 1/2 reading :)

  • Mov3nforward 117 posts 319 karma points
    Oct 01, 2019 @ 18:42
    Mov3nforward
    0

    @Amir,

    This may work for us. Is there a way to send email to different email addresses based on radio button select?

    -Lee

  • Nicholas Westby 2054 posts 7100 karma points c-trib
    Oct 01, 2019 @ 19:18
    Nicholas Westby
    0

    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.

  • Nicholas Westby 2054 posts 7100 karma points c-trib
    Oct 01, 2019 @ 17:10
    Nicholas Westby
    0

    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 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.

  • David Scott 16 posts 107 karma points
    May 27, 2020 @ 14:53
    David Scott
    0

    Good morning Nicholas,

    I've attempted what you've done and the conditions do not work:

    1. I've copied Responsive.Bootstrap.Angular.cshtml to a new cshtml file.
    2. 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.
      1. I also registered the new cshtml file to templates.config.
      2. 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.

  • Nicholas Westby 2054 posts 7100 karma points c-trib
    May 27, 2020 @ 15:07
    Nicholas Westby
    0

    Hi David,

    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?

    If you prefer not to share the files publicly, you can send me a link from this contact form: https://www.nicholaswestby.com/contact

  • David Scott 16 posts 107 karma points
    May 27, 2020 @ 17:37
    David Scott
    0

    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!

  • Nicholas Westby 2054 posts 7100 karma points c-trib
    May 27, 2020 @ 18:00
    Nicholas Westby
    1

    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

  • David Scott 16 posts 107 karma points
    May 27, 2020 @ 21:06
    David Scott
    0

    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

  • Nicholas Westby 2054 posts 7100 karma points c-trib
    May 27, 2020 @ 21:10
    Nicholas Westby
    0

    Yeah, it's an array. I imagine you could do something like this:

    conditionalControls = new []
    {
        new
        {
            fieldId = "...",
            show = "NJ",
            fields = new []
            {
                "..."
            }
        },
        new
        {
            fieldId = "...",
            show = "CA",
            fields = new []
            {
                "..."
            }
        }
    }
    

    A bit verbose, but should work I would think.

  • David Scott 16 posts 107 karma points
    May 27, 2020 @ 21:22
    David Scott
    0

    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

  • Nicholas Westby 2054 posts 7100 karma points c-trib
    May 27, 2020 @ 21:37
    Nicholas Westby
    0

    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.

  • David Scott 16 posts 107 karma points
    May 28, 2020 @ 12:58
    David Scott
    0

    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

  • Nicholas Westby 2054 posts 7100 karma points c-trib
    May 28, 2020 @ 15:07
    Nicholas Westby
    0

    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

Please Sign in or register to post replies

Write your reply to:

Draft