Copied to clipboard

Flag this post as spam?

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


  • M 40 posts 273 karma points
    Jan 13, 2023 @ 13:17
    M
    1

    Umbraco Forms conditions with custom theme

    Hi,

    I'm having trouble getting conditional fields to work with a custom form theme in Umbraco 10. If I render the scripts using the default theme the conditions work. i.e

    @await Component.InvokeAsync("RenderForm", new {formId = Model.SelectForm.Value, recordId = Guid.Empty, theme = "my-theme"})
    @await Component.InvokeAsync("RenderFormScripts", new {formId = Model.SelectForm.Value, theme = "bootstrap3-horizontal"})
    

    Loading the theme scripts (which are the same as default) the conditions don't work:

    @await Component.InvokeAsync("RenderForm", new {formId = Model.SelectForm.Value, recordId = Guid.Empty, theme = "my-theme"})
    @await Component.InvokeAsync("RenderFormScripts", new {formId = Model.SelectForm.Value, theme = "my-theme"})
    

    The issue seems to be in my theme the formElementHtmlIdPrefix used in umbracoforms.js returns undefined compared to an empty string in the default, so it's looking for "undefinedxxxxxxx" in my theme rather than just "xxxxxxx".

    The only reference to formElementHtmlIdPrefix I can find says it's set in appsettings.json https://docs.umbraco.com/v/10.x-lts/umbraco-forms/developer/configuration#formelementhtmlidprefix which I've tried setting, but that doesn't appear to be picked up by my theme or the bootstrap one.

    Am I doing something wrong? Any ideas?

    Thanks

  • Jarno van Klaarbergen 2 posts 45 karma points
    Feb 15, 2023 @ 12:45
    Jarno van Klaarbergen
    102

    Hi M,

    Today we encountered the same problem where toggling Umbraco Forms fields using conditions didn't work. Umbraco 10, forms v10.2.2

    What we found is that the "undefined" value of formElementHtmlIdPrefix can be solved by adding a data attribute "data-form-element-html-id-prefix" to the .umbraco-forms-form-config div in Script.cshtml in your forms theme.

    This would result in the following:

    <div class="umbraco-forms-form-config"
     style="display: none"
     data-id="@Model.FormClientId"
     data-serialized-page-button-conditions="@JsonConvert.SerializeObject(Model.PageButtonConditions, FormsJsonSerializerSettings.Default)"
     data-serialized-fieldset-conditions="@JsonConvert.SerializeObject(Model.FieldsetConditions, FormsJsonSerializerSettings.Default)"
     data-serialized-field-conditions="@JsonConvert.SerializeObject(Model.FieldConditions, FormsJsonSerializerSettings.Default)"
     data-serialized-fields-not-displayed="@JsonConvert.SerializeObject(Model.GetFieldsNotDisplayed(), FormsJsonSerializerSettings.Default)"
     data-trigger-conditions-check-on="@Model.TriggerConditionsCheckOn"
     data-form-element-html-id-prefix="@Model.FormElementHtmlIdPrefix"></div>
    

    You can create your own custom prefix as Model.FormElementHtmlIdPrefix by adding the Forms settings in appsettings.json like explained in the docs you linked to in your post.

    I'm unsure if this is a workaround for a problem of our own creation, or if this is a bug in the default theme in Umbraco Forms. If anyone has a better solution I'm more than happy to hear it

  • Cimplex 113 posts 576 karma points
    May 11, 2023 @ 07:05
    Cimplex
    0

    Thank you so much <3

Please Sign in or register to post replies

Write your reply to:

Draft