The point of adding class fb-cl-hide-element?

[studio1gmbh-pimcore]

Hi, in the docs it is mentioned to add the css class fb-cl-hide-element, to make conditional logic work. It seems formbuilder is using this class to set the initial visibility of certain fields, that should be hidden by conditional logic.

pimcore-formbuilder/docs/81_ConditionalLogic.md

Line 8 in ee1bf10

- Add the `fb-cl-hide-element` class with a `display:none;` property to your project style

pimcore-formbuilder/src/FormBuilderBundle/Validation/ConditionalLogic/Rule/Action/ToggleElementAction.php

Lines 25 to 27 in d268b50

	foreach ($this->getFields() as $conditionFieldName) {
	$data[$conditionFieldName] = $state === $toggleState ? 'fb-cl-hide-element' : '';
	}

So when setting up a condition like this:

The fb-cl-hide-element is added to the required form field as expected but then, it never gets removed. Since the "Toggle Visibility" feature in general works by adding inline style style="display:none" in the DOM.

So users now have two options:

1. Don't add the class fb-cl-hide-element to the project styles, then "Toggle Visibility" feature will work
2. Use "Toggle Class" in combination with fb-cl-hide-element to hide form fields

Is it just me or are the docs a bit misleading on this topic?

Thanks for feedback in advance!

[solverat]

@studio1gmbh-pimcore Have you enabled the JS-Extension?

https://github.com/dachcom-digital/js-pimcore-formbuilder/blob/HEAD/docs/02_conditionalLogic.md

A full Setup could look like this:

import {Endpoints, FetchManager, DropzoneHandler, Tracker, Repeater, ConditionalLogic} from 'js-pimcore-formbuilder';

class Form {
    constructor() {
        this.initFormBuilderForms();
    }

    initFormBuilderForms() {
        let formBuilderForms = document.querySelectorAll('.formbuilder.ajax-form');

        if (!formBuilderForms.length) {
            return;
        }
        
        new Endpoints().getEndpoints(formBuilderForms[0].dataset.ajaxStructureUrl)
            .then((endpoints) => {
                formBuilderForms.forEach((formBuilderForm) => {
                    new FetchManager(formBuilderForm, {
                        onSuccess: (messages, redirect) => {

                            if (redirect) {
                                window.location.href = redirect;
                                return;
                            }

                            let successEl = document.createElement('div');
                            successEl.className = 'form-success-wrapper';
                            successEl.innerHTML = messages[0]['message'];
                            formBuilderForm.before(successEl);
                            formBuilderForm.remove();
                            window.scroll({top: successEl.offsetTop - 150, behavior: 'smooth'});
                        },
                        onFail: (responseData) => {
                            window.scroll({top: formBuilderForm.offsetTop - 150, behavior: 'smooth'});
                        },
                        onGeneralError: (generalErrorMessages) => {

                            let errorElement = document.createElement('div');
                            errorElement.className = 'form-general-error';

                            generalErrorMessages.forEach((msg) => {
                                let errorMessage = document.createElement('div');
                                errorMessage.innerText = msg;
                                errorElement.append(errorMessage);
                            });

                            formBuilderForm.before(errorElement);
                        },
                    }, endpoints);

                    new DropzoneHandler(formBuilderForm, {}, endpoints);
                    new Tracker(formBuilderForm);
                    new Repeater(formBuilderForm);
                    new ConditionalLogic(formBuilderForm);
                });
            }).catch((error) => {
            console.error('formbuilder error: fetching file structure', error);
        });

    }

}

document.addEventListener('DOMContentLoaded', () => {
    new Form;
});

[studio1gmbh-pimcore]

Hi @solverat,
JS extension is enabled on my side. The topic of toggle visibility is currently a bit confusing to me, and the related documentation also seems somewhat outdated.

The default value for hideElementClass is fb-cl-hide-element. According to the docs, the user is expected to add display: none for this class manually. In which scenario is this behavior intended to work as-is?

When no frontend framework is used (“div layout”), conditional logic currently does not work because there is no implementation for it yet. In this case, the following error is thrown:
formbuilder error: unknown element transformer action found.
See:
https://github.com/dachcom-digital/js-pimcore-formbuilder/blob/v1.3.3/src/js/core/elementTransformer.js#L59

This means that conditional logic only works when one of the implementations (Bootstrap 4/5 or Tailwind) is selected. However, in those cases fb-cl-hide-element is not applied. For Bootstrap 5, for example, d-none is hardcoded since className is not used in the transformer.

From a user perspective, it might therefore make sense to either:

• clearly document that the proper default class has to be configured depending on the chosen framework, or
• embed the default value directly into the framework-specific implementations.

What do you think about this?
I’d be happy to help with a PR, but would appreciate some guidance on the preferred approach. 🙂

Best regards
/@jeykodev

[solverat]

@studio1gmbh-pimcore

• bootstrap5 issue should be fixed in #40
• We decided (years ago) to use a class (fb-cl-hide-element) instead of display:xy because it's difficult to determinate "the show state": block?, inline-block?, flex? Also, someone may want to change the opacity instead of toggling it. However, as an integrator, you have to make sure to add the class in your frontend, like described here: https://github.com/dachcom-digital/pimcore-formbuilder/blob/master/docs/81_ConditionalLogic.md#preparation

[studio1gmbh-pimcore]

@solverat

• Thx for #40
• With the latest release 1.4.0 in the js vanilla package, the feature now makes sense again, since d-none is not hardcoded anymore in the Bootstrap 5 layout. fb-cl-hide-element does now work like descripbed in the docs. Thx again.

/@jeykodev