onlinq/form-collection-bundle

Symfony bundle to build forms with Onlinq Form Collection web components

0.2.1 2022-11-17 12:53 UTC

Requires

• symfony/form: ^4.4|^5.0|^6.0
• symfony/framework-bundle: ^4.4|^5.0|^6.0
• symfony/twig-bundle: ^4.4|^5.0|^6.0

MIT

• Tim Goudriaan

• form-collection

README

Symfony bundle to build forms with Onlinq Form Collection web components.

It allows form collections to be manipulated through JavaScript and customizable buttons.

Installation

Onlinq Form Collection Bundle requires PHP 7.2+ and Symfony 4.4+.

Install this bundle using Composer and Symfony Flex:

composer require onlinq/form-collection-bundle

The easiest way to enable the Onlinq Form Collection web components in forms is by adding one of the built-in form themes to the project's Twig configuration:

# config/packages/twig.yaml

twig:
    form_themes:
        - '@OnlinqFormCollection/collection_theme.html.twig'

Make sure to add the Onlinq Form Collection script to pages with forms through a JavaScript bundler or by including it at the bottom of your page with:

<script src="{{ asset('bundles/onlinqformcollection/onlinq-collection.js') }}"></script>

Read on to start using the bundle immediately or visit the documentation.

Usage

The Onlinq Form Collection web components are enabled when a compatible form theme has been loaded. The easiest way to configure the resulting form collection is by using the built-in form type that can be used as a drop-in replacement for the Symfony CollectionType class:

// ...
use Onlinq\FormCollectionBundle\Form\OnlinqCollectionType;

class TaskType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            // ...
            ->add('tags', OnlinqCollectionType::class, [
                'entry_type' => TagType::class,
                'entry_options' => ['label' => false],
                'allow_add' => true,
                'allow_delete' => true,
                'allow_move' => true,
            ])
            // ...
        ;
    }

    // ...
}

Built-in form themes

The bundle includes multiple built-in form themes to make collections look great without having to create your own styling:

• @OnlinqFormCollection/collection_theme.html.twig
• @OnlinqFormCollection/bootstrap_4_collection_theme.html.twig
• @OnlinqFormCollection/bootstrap_5_collection_theme.html.twig

Learn more about the built-in form themes in the documentation.

Using a JavaScript bundler

When using a bundler like Webpack it's possible to include the Onlinq Form Collection web components through the compiled JavaScript bundle.

Install the Onlinq Form Collection web components package:

npm install @onlinq/form-collection

Import the package in the project's JavaScript assets:

// assets/js/app.js

import '@onlinq/form-collection';