umbraco forms conditions with custom theme

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

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
1

Umbraco Forms conditions with custom theme

Using Umbraco And Getting Started

Umbraco 9
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
Copy Link
Jarno van Klaarbergen 2 posts 45 karma points

Feb 15, 2023 @ 12:45
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
Copy Link
Cimplex 113 posts 576 karma points

May 11, 2023 @ 07:05

0

Thank you so much <3

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?