1

In our SXA environment we created a form with conditional logic. Depending on the selection in a list of radio buttons, only certain form sections should be visible in the form.

At first, we got an "jQuery is not defined" error. With these tips we were able to fix that error. But the conditions didnt work. We noticed, that the function

$formEl.init_fxbConditions(options);

in the adaption was not executed, because that following test

if ($formEl.length && typeof $formEl.init_fxbConditions === 'function') {

}

fails.

In an old sitecore installation without sxa, the conditional form logic works. In difference to the sxa environment the form scripts are referenced in the head section and not in the body.

Now I´ve tried to move the scripts from the body into the head. The form scripts are referenced in the MetaData partial design. The attempt to move it within the MetaData partial design was unsuccesful. The only way to move the scripts into the head was a HTMLSnipped that I placed in the head section of the MetaData partial design. enter image description here I guess, this code

@foreach (string script in assetLinks.Scripts)
{
    @Html.Raw(script)
}

within the SxaLayout.cshtml is cause of the fact, that scripts are rendered to the body and not into the head section.

If the scripts are rendered within the head section, the conditional logic works!

Is there an easier way to execute conditional forms logic in sxa renderings?

Thanks a lot Uwe

  • 1
    I don't know of any easier way. That's identical to how I have approached it. I've just manually added the tags in a snippet in the header. It sucks, but until Sitecore fix it properly, its the best worst option I've seen. I'd raise it with support, the more noise this bug gets from clients, the more chance we have of seeing a fix. – Richard Seal Mar 17 at 14:08
  • Sitecore have fixed it properly in 9.3, but this is one of the few workarounds for all other versions. Another option is to include jquery just before the form. – Mark Gibbons Mar 18 at 10:22
0

This workaround only works if it's a form with a single page.

If the form has more than one page and also has conditions on the 2nd page, we solved it as described in the aswer SXA destroys the window context used by the conditional logic of forms

| improve this answer | |
0

I was running into similar issue.

Issue here is that forms is using jquery-2.1.3 and SXA using xaquery which are conflicting.

enter image description here

enter image description here

Update forms script to avoid conflict. Also, not need of moving the scripts to head, leave them in body-bottom which is actually rendered from Metadata partial design.

C:\inetpub\wwwroot\website\Views\FormBuilder\Form.cshtml

<script type="text/javascript">
    (function () {
         function initialForm($) {
           var $formEl = $("form[data-sc-fxb='@Model.ItemId']");
           if ($formEl.length && typeof $formEl.init_fxbConditions === 'function') {
               var options = @Html.RenderConditions(Model);
               $formEl.init_fxbConditions(options);
           }
         }
        window.addEventListener('load', function () {
           initialForm($);
        });
    })();
</script>

My earlier script was

window.addEventListener('load', function () {
           initialForm(jquery);
        });
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.