Copied to clipboard

Flag this post as spam?

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


  • Emil 3 posts 75 karma points
    Aug 02, 2018 @ 08:30
    Emil
    1

    Malfunctioning conditions in Umbraco Forms

    Hi,

    I'm using Umbraco v. 7.6.11 and Umbraco Forms v. 6.0.8 with .NET v. 4.5.2.

    About now, I have noticed that I'm not the only one having problems with conditions in Umbraco Forms (at least historically :) ). I've tried just about every solution I've been able to dig up but to no avail.

    So, let's say we got an input field (Short answer) A and a file picker (File upload) B. I create a condition on B that goes as follows: "show" this field if "any" of the following match: A contains test

    Okay, so I go to the page, and upon inspection of the rendered HTML, I can see that A is there and visible and B is in the DOM with a display: none styling on its parent umbraco-forms-field wrapper element.

    <div class="umbraco-forms-field fil fileupload alternating" style="display: none">...</div>
    

    For debugging, I put a log on the change events added in the ready function in Script.cshtml; mainly just to see if it ever fires.

    When I enter "test" into A, nothing happens; nor on the page or in the console. I tab away from the button to loose focus (provoke the js .change event on it) but nothing.

    Okay, so I scavenge the forums for a pointer, and see that there's something about inconsistencies with contourforms and umbracoforms. I basically replace #contourform with #umbracoform in Script.cshtml, Form.cshtml and umbracoforms-dependencies.js.

    Script.cshtml

    var contourFieldValues,
            recordValues = JSON.parse($("#values_" + formId).val()),
            fsConditions = JSON.parse($("#fsConditions_" + formId).val()),
            fieldConditions = JSON.parse($("#fieldConditions_" + formId).val()),
            form = $("#umbraco_form_" + formId);
    

    umbracoforms-dependencies.js

    var umbracoForm = document.getElementById('umbraco_form_' + formId);
    

    Form.cshtml

    <div id="umbraco_form_@Model.FormClientId" class="contour @Model.CssClass">...</div>
    

    Now the change events fires, maybe not exactly the way I want them to, but hey, that can be fixed :)

    Problem is, though, that B is still not showing. In Script.cshtml I can see that CheckRules() has condition-handling for the form, so I go to umbracoforms-conditions.js and put in logs... Well, all over.

    Long story short, I does actually hit the Contains operator, but with further logging, I find a bit of weirdness. The value that is passed to it, as in the value it checks up against to see whether or not the condition it met, is the help text for A provided when creating the form in the back office. Okay, so I remove the help text, and then it gets the right value (the one actually entered in A). It finds the match and says the condition is met by returning true (B is still not visible by the way).

    I go to evaluateCondition to see if things look right, which they do, and then on to handleCondition (just enable the out-commented logging there); all looks great - except for the fact that B is never turned visible.

    I then see that what it tries to do is make the element itself visible, but the element it gets (B) is hidden within the display: none styled wrapper (like I mentioned earlier). So I made a working fix for this in handleContidion:

     function handleCondition(element, id, condition, type) {
                // console.log(type + " " + id);
                var shouldShow = isVisible(id, condition);
                var parent = $(".umbraco-forms-field:has(#" + id + ")");
                if (shouldShow) {
                    // console.log("showing " + id + "\n");
                    parent.show();
                    // element.hide();
                } else {
                    // console.log("hiding " + id + "\n");
                    parent.hide();
                    // element.hide();
                }
            }
    

    Now, I'm by no means an expert in javascript nor umbraco (or, especially, umbraco forms), so I can't quite fathom the consequences of this change. Is this really the way to go? The wrapper has the "questions" alias on it as a class, so it might be prettier to select through that instead of what I've done, but I can't seem to find a way to do this (and I'm not even sure if it actually is a better way to go around it).

    I would love your take on this before I put this to production. Any help will be highly appreciated, and help that will eventually lead to a viable solving of my little problem here, will even be paid quite handsomely in both ego-stroking praise and virtual high-fives :D

    Thanks in advance, guys.

    PS. I apologize for the tour, was kind of reproducing my steps while writing to make sure I had done exactly what I wrote I did.

  • Claus Jensen 48 posts 114 karma points hq
    Aug 10, 2018 @ 08:24
    Claus Jensen
    1

    Hi Emil,

    Sounds like there's more than just a few bugs there that needs to be fixed. Your instructions are pretty clear and I would suggest that you create an issue on the Forms issue tracker with these instructions copied over so we can have someone look into it.

    If your fix works for your needs, I would say go ahead and use it until we can get this prioritized for sprint work. From a quick glance it doesn't seem like there's anything terrible being done here (showing/hiding things) - my guess is you would fairly quickly see any obvious issues if there were any.

    I can't remember exactly how the DOM structure for Forms is, but couldn't you simply fetch the parent for the element using the jQuery parent function that locates the nearest parent based on a selector which allows you to filter for the .umbraco-forms-field ?

    Also keep in mind that if you update your packages you would need to maintain this fix yourself until we get it fixed in an official patch for Forms.

  • Emil 3 posts 75 karma points
    Aug 10, 2018 @ 09:23
    Emil
    1

    Hey Claus,

    Thanks a million for the response.

    I will do as you suggest, and post the issue on the Forms issue tracker. I think I actually did try going with the parent function, but can't quite remember what the issue was with this; I'll try to revisit that approach.

    And yea, I'm aware of the whole update issue, but the solution I'm working on isn't updated that often, and will probably not be updated again any time soon; perhaps not before an official fix to this problem has been patched. Besides, it needs fixing, and a temp fix is better than no fix at all :P

    But thanks again, and have a nice day :)

Please Sign in or register to post replies

Write your reply to:

Draft