Download the PHP package networkteam/fusionform-displaycondition without Composer
On this page you can find all versions of the php package networkteam/fusionform-displaycondition. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download networkteam/fusionform-displaycondition
More information about networkteam/fusionform-displaycondition
Files in networkteam/fusionform-displaycondition
Package fusionform-displaycondition
Short Description Control the visibility (JavaScript) of Neos Fusion Form elements while filling out the form.
License
Informations about the package fusionform-displaycondition
Networkteam.FusionForm.DisplayCondition
Control the visibility of Neos Fusion Form elements while filling out the form.
A display condition ensures that an element is only displayed if the configured condition is fulfilled. A subset of JavaScript (networkteam/eel) can be used for this purpose. Form values can be referenced using the element identifier.
Installation
Required package via composer.
Prerequisites
For using display conditions within a form a few prerequisites must be met:
- The CSS class
dynamic-form
must be applied to the<form>
tag - The
<form>
tag must have anid
attribute with the forms namespace as value - Add tags to
Neos.Neos:Page
for loading stylesheet and JavaScript
This package does that already by extending Neos.Fusion.Form:Form
and Neos.Neos:Page
.
Usage
Add id to form control you want to interact with
To dynamically show or hide elements (based on entered form values) within a form, you must set an id
for the controls
you want to interact with. The id
is used as variable name inside display condition expression.
Add data attribute holding display condition expression
Any component inside your form which visibility you want to control via condition must have a data-display-condition
attribute. The value is a Javascript EEL expression.
Use the provided helper (Networkteam.FusionForm.DisplayCondition:Helper.DisplayConditionAugmenter
) to add the required
data attribute to your components.
Example:
Compile Javascript
The Javascript is compiled with esbuild. Run the following commands on CLI: