Conditionally shown fields are not included in form record

[bjarnef]

I noticed when submitting a form the entry is created and labels looks correct.

However when editing form entry it shows [object Object]

Furthermore I noticed fields which are conditionally shows based on a value of another field (in this case a checkbox) are not stored in the record properties. I did fill out these form fields yes :)

Umbraco v10.2.0
Umbraco Forms v10.1.2

[bjarnef]

Okay, the [object Object] issue was because I added a suffix to prevalue to make it unique.

return dates
                ?.Select(x => new PreValue
                {
                    Id = x.Item.Key.ToString(),
                    Caption = x.Content.Name,
                    Value = x.Item.StartDate.ToShortDateString() + " - " + x.Item.EndDate.ToShortDateString() + $" | {x.Item.Key}",
                    SortOrder = x.Index
                })
                ?.ToList() ?? new();

In that case I also needed to trim it is the field type.

var value = pv.Value.Split("|")[0].Trim();

However I am still seeing the conditionally fields to be missing on submission.

[AndyButland]

What are you using for your condition rule here please? I.e. what value are you checking against to determine that the checkbox is ticked?

[bjarnef]

We have this condition on the group (fieldset):

We then have a groups/fieldset initially hidden, but clicking a button change the value of the hidden field to False.

and when this value is False and user has checked this checkbox, the group/fieldset above is shown.

I should mention that we have some special JS logic in the button to more more fields as it didn't seem Forms reacted on just changing value of the hidden field via JS.

@model Umbraco.Forms.Web.Models.FieldViewModel
@using Umbraco.Forms.Web

@{
    var settings = Model.AdditionalSettings;
    var hasCaption = settings.ContainsKey("Caption") && !string.IsNullOrEmpty(settings["Caption"]);
}

<button type="button"
    class="@Html.GetFormFieldClass(Model.FieldTypeName).ToString().Replace("form-control", string.Empty) btn btn-secondary"
    id="@Model.Id"
    name="@Model.Name" 
    data-umb="@Model.Id"
    value="@Model.ValueAsHtmlString">
    @(hasCaption ? settings["Caption"] : "Tilmeld")
</button>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        document.getElementById("@Model.Id").addEventListener("click", showFields);
    });

    function showFields(e) {
        let btn = e.target;
        let group = btn.closest(".umbraco-forms-field");
        let collapseGroup = group.previousElementSibling;
        let collapse = collapseGroup.querySelector('input[type=hidden]');
        if (collapse) {
            collapse.value = 'False';
            btn.style.display = 'none';
            // Workaround for now
            
            var elements = Array.from(document.querySelectorAll('.umbraco-forms-fieldset'))
                .filter(item => item.id !== '0675d0e0-6455-49ff-a8af-3322973c047e');

            elements.forEach(elem => elem.style.display = 'block');
            document.querySelector(".umbraco-forms-navigation").classList.remove("hidden");
            document.querySelector(".block-list.block-list-main").classList.add("hidden");
        }
    }
</script>

[bjarnef]

For this usecase nested groups/fieldset would be useful and make complex forms easier to manage conditionally shown groups.
#824

[AndyButland]

As far as I can tell from my tests you should find this works OK if you use "true" as your value to match with, rather than "True". I'll have a look though at making this case insensitive. Either works client-side so we should have the same behaviour server-side.

[bjarnef]

@AndyButland regarding the [object Object] this seems to work fine:

return dates
        ?.Select(x => new PreValue
        {
            Id = x.Item.Key.ToString(),
            Caption = x.Content.Name,
            Value = $"{x.Item.StartDate.ToShortDateString()} - {x.Item.EndDate.ToShortDateString()} [{x.Item.Key}]",
            SortOrder = x.Index
        })
        ?.ToList() ?? new();

I guess it may be a deserialization issue when I before used a | as a separator.

Value = $"{x.Item.StartDate.ToShortDateString()} - {x.Item.EndDate.ToShortDateString()} | {x.Item.Key}"

[bjarnef]

@AndyButland you are right about this. It works when we use "true" / "false" instead of "True" or "False".

However it seems it isn't enough changing hidden field value from true to false via JS and with the conditional rules.

So in this button field which change value of the hidden field "Collapse", we also needed to change fieldsets manually from style="display: none;" to style="display: block;" (or just removing the inline style).

I guess Forms isn't watching a value change in this case when changed via JS - at least not from outside.

@model Umbraco.Forms.Web.Models.FieldViewModel
@using Umbraco.Forms.Web

@{
    var settings = Model.AdditionalSettings;
    var hasCaption = settings.ContainsKey("Caption") && !string.IsNullOrEmpty(settings["Caption"]);
}

<button type="button"
    class="@Html.GetFormFieldClass(Model.FieldTypeName).ToString().Replace("form-control", string.Empty) btn btn-secondary"
    id="@Model.Id"
    name="@Model.Name" 
    data-umb="@Model.Id"
    value="@Model.ValueAsHtmlString">
    @(hasCaption ? settings["Caption"] : "Tilmeld")
</button>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        document.getElementById("@Model.Id").addEventListener("click", showFields);
    });

    function showFields(e) {
        let btn = e.target;
        let group = btn.closest(".umbraco-forms-field");
        let collapseGroup = group.previousElementSibling;
        let collapse = collapseGroup.querySelector('input[type=hidden]');
        if (collapse) {
            collapse.value = 'false';
            btn.style.display = 'none';
            // Workaround for now
            
            var elements = Array.from(document.querySelectorAll('.umbraco-forms-fieldset'))
                .filter(item => item.id !== '0675d0e0-6455-49ff-a8af-3322973c047e');

            elements.forEach(elem => elem.style.display = 'block');
        }
    }
</script>

[mcl-sz]

If you set the condition to "true" instead of "True", the FieldConditionEvaluation.IsVisible method returns always false. If i use "True" it works as expected.

[bjarnef]

@mcl-sz that's what we originally used, but unfortunately not.

It did should a group/fieldset when checking "Specify invoice details", but data in these fields wasn't stored in the record. They are now after we changed value to "true".

However modifying a value in a hidden field from "True" or "true" (tried both) from JS (in a custom field) doesn't seem to affect the conditional rule to show/hide groups based on this value. I guess Forms doesn't watch value in this case - only initially or when checking/unchecking e.g. a checkbox.

[mcl-sz]

Hi @bjarnef , thanks for your reply. I see a didn't gave a good explanation of what I mean.
In the confirmation-email (razor mailtemplate) we check whether a field should be shown or not, depending on the conditions. For this we use FieldConditionEvaluation.IsVisible from Umbraco.Forms.Core.
The moment we change "True" to "true" the conditions in the razormail view no longer work. (It would be nice if the supplied example razormailview, comming with Umbraco Forms, would show how to handle conditions in a razor mailview).

[bjarnef]

But then happens before the confirmation email, when the form is submitted and the record is created. As long the record hasn't the submitted data, I wouldn't expect the values to flow into other workflows like in SendRazorEmail workflow/template.

Anyway it should probably handle the invariant value on both client and service side as @AndyButland mentioned, so it doesn't matter whether "True" or "true" is entered.

[AndyButland]

Resolved to make this check case insensitive for the next patch release.