PHPackages networkteam/fusionform-displaycondition - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. networkteam/fusionform-displaycondition ActiveNeos-package[Utility & Helpers](/categories/utility) networkteam/fusionform-displaycondition ======================================= Control the visibility (JavaScript) of Neos Fusion Form elements while filling out the form. 0.2.0(1y ago)12.8k↓33.3%JavaScript Since Jun 2Pushed 10mo ago4 watchersCompare [ Source](https://github.com/networkteam/Networkteam.FusionForm.DisplayCondition)[ Packagist](https://packagist.org/packages/networkteam/fusionform-displaycondition)[ RSS](/packages/networkteam-fusionform-displaycondition/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (3)Dependencies (2)Versions (6)Used By (0) Networkteam.FusionForm.DisplayCondition ======================================= [](#networkteamfusionformdisplaycondition) Control the visibility of [Neos Fusion Form](https://github.com/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](https://github.com/networkteam/eel)) can be used for this purpose. Form values can be referenced using the element identifier. Installation ------------ [](#installation) Required package via composer. ``` composer require networkteam/fusionform-displaycondition ``` Prerequisites ------------- [](#prerequisites) For using display conditions within a form a few prerequisites must be met: - The CSS class `dynamic-form` must be applied to the `` tag - The `` tag must have an `id` 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 ----- [](#usage) ### Add id to form control you want to interact with [](#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 [](#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](https://github.com/networkteam/eel). Use the provided helper (`Networkteam.FusionForm.DisplayCondition:Helper.DisplayConditionAugmenter`) to add the required data attribute to your components. Example: ``` prototype(Vendor.Site:Content.SingleStepFormExample) < prototype(Neos.Fusion.Form:Runtime.RuntimeForm) { // set context variable to enable usage of display conditions. When set to `false` no display condition related // attribute will be renderd @context.displayConditionEnabled = true namespace = "single_step_form_example" process { content = afx` ` schema { firstName = ${Form.Schema.string().isRequired()} lastName = ${Form.Schema.string().isRequired().validator('StringLength', {minimum: 6, maximum: 12})} picture = ${Form.Schema.resource().isRequired().validator('Neos\Fusion\Form\Runtime\Validation\Validator\FileTypeValidator', {allowedExtensions:['txt', 'jpg']})} birthDate = ${Form.Schema.date().isRequired()} sports = ${Form.Schema.arrayOf( Form.Schema.string() ).validator('Count', {minimum: 1, maximum: 2})} } } action { message { type = 'Neos.Fusion.Form.Runtime:Message' options.message = afx`Thank you {data.firstName} {data.lastName}` } email { type = 'Neos.Fusion.Form.Runtime:Email' options { senderAddress = ${q(node).property('mailFrom')} recipientAddress = ${q(node).property('mailTo')} subject = ${q(node).property('mailSubject')} text = afx`Thank you {data.firstName} {data.lastName}` html = afx`Thank you {data.firstName} {data.lastName}` attachments { upload = ${data.picture} } } } } } // Code is taken from https://github.com/neos/fusion-form/blob/master/Documentation/Examples/SingleStepForm.md ``` Compile Javascript ------------------ [](#compile-javascript) The Javascript is compiled with [esbuild](https://esbuild.github.io/getting-started/#yarn-pnp). Run the following commands on CLI: ``` yarn install yarn build ``` ### Health Score 32 — LowBetter than 72% of packages Maintenance51 Moderate activity, may be stable Popularity21 Limited adoption so far Community8 Small or concentrated contributor base Maturity38 Early-stage or recently created project Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~235 days Total 4 Last Release 375d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/7cbf52f8dce27737b73b79ac2c958434339f3dcf704b17a040956ed9a33eb4ef?d=identicon)[networkteam](/maintainers/networkteam) --- Top Contributors [![networkteamcom](https://avatars.githubusercontent.com/u/31891264?v=4)](https://github.com/networkteamcom "networkteamcom (1 commits)") ### Embed Badge ![Health badge](/badges/networkteam-fusionform-displaycondition/health.svg) ``` [![Health](https://phpackages.com/badges/networkteam-fusionform-displaycondition/health.svg)](https://phpackages.com/packages/networkteam-fusionform-displaycondition) ``` ### Alternatives [sitegeist/kaleidoscope Responsive-images for Neos 29352.4k10](/packages/sitegeist-kaleidoscope)[kaufmanndigital/gdpr-cookieconsent A ready-to-run package, that integrates an advanced cookie consent banner into your Neos CMS site. 2540.7k](/packages/kaufmanndigital-gdpr-cookieconsent)[neos/seo SEO configuration and tools for Neos 13990.5k24](/packages/neos-seo)[sitegeist/taxonomy Manage vocabularies and taxonomies as separate node-hierarchy. 1589.7k1](/packages/sitegeist-taxonomy)[shel/neos-colorpicker A plugin for Neos CMS which provides a colorpicker editor 1494.4k6](/packages/shel-neos-colorpicker)[shel/neos-hyphens A plugin for Neos CMS which provides hyphens for the inline editor 20200.7k1](/packages/shel-neos-hyphens) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)