README

Object-oriented editable dialog box configuration building for Areabricks.

Installation

Require the bundle

composer require teamneusta/pimcore-areabrick-config-bundle

Enable the bundle

Add the Bundle to your config/bundles.php:

Neusta\Pimcore\AreabrickConfigBundle\NeustaPimcoreAreabrickConfigBundle::class => ['all' => true],

Usage

This bundle allows you to create Areabrick configuration dialogs in an object-oriented way.

1. Prepare Areabrick Class

Your Areabrick class must implement the Pimcore\Extension\Document\Areabrick\EditableDialogBoxInterface interface and use the Neusta\Pimcore\AreabrickConfigBundle\HasDialogBox trait.

Then, implement the buildDialogBox() method to define the dialog.

<?php

namespace App\Document\Areabrick;

use Neusta\Pimcore\AreabrickConfigBundle\DialogBoxBuilder;
use Neusta\Pimcore\AreabrickConfigBundle\HasDialogBox;
use Pimcore\Extension\Document\Areabrick\AbstractTemplateAreabrick;
use Pimcore\Extension\Document\Areabrick\EditableDialogBoxInterface;
use Pimcore\Model\Document\Editable;
use Pimcore\Model\Document\Editable\Area\Info;

class MyAreabrick extends AbstractTemplateAreabrick implements EditableDialogBoxInterface
{   
    /** @template-use HasDialogBox<DialogBoxBuilder> */
    use HasDialogBox;

    private function buildDialogBox(DialogBoxBuilder $dialogBox, Editable $area, ?Info $info): void
    {
        $dialogBox
            ->addNamedTab('settings', 'Settings',
                $dialogBox->createInput('my-input')
                    ->setLabel('Text Input')
                    ->setPlaceholder('Please enter text...')
            )
            ->addNamedTab('options', 'Options',
                $dialogBox->createCheckbox('my-checkbox')
                    ->setLabel('Activate')
                    ->setDefaultChecked()
            );
    }
}

2. Access in Twig Template

The configured values can be retrieved via the Pimcore editables in the template as usual:

<p>Input: {{ pimcore_input('my-input').getData() }}</p>

{% if pimcore_checkbox('my-checkbox').isChecked() %}
    <p>Checkbox is activated!</p>
{% endif %}

Features

Dialog Configuration

You can customize the size of the dialog and specify whether the page should be reloaded after closing.

$dialogBox
    ->width(800)
    ->height(600)
    ->reloadOnClose(true);

Layout Options

Simple Content

For simple dialogs you can use addContent:

$dialogBox->addContent(
    $dialogBox->createInput('field-1'),
    $dialogBox->createInput('field-2')
);

Tabs

If you want to organize your fields into multiple tabs, use addNamedTab:

$dialogBox->addNamedTab('tab_name', 'Tab Title', 
    $dialogBox->createInput('field-1'),
    $dialogBox->createInput('field-2')
);

Calling addNamedTab again with the same tab name adds the fields to the existing tab instead of creating a new one.

Important

You cannot mix tabs and addContent in the same dialog.

Available Editables

The DialogBoxBuilder provides various methods for creating editables:

Input

A simple text input field.

$dialogBox->createInput('name')
    ->setLabel('Label')
    ->setPlaceholder('Placeholder')
    ->setDefaultValue('Default value')
    ->setWidth(300);

Checkbox

A simple checkbox to toggle a boolean value.

$dialogBox->createCheckbox('name')
    ->setLabel('Label')
    ->setDefaultChecked(); // or setDefaultUnchecked()

Select

A dropdown selection field.

$dialogBox->createSelect('name', [
    'value1' => 'Label 1',
    'value2' => 'Label 2',
])
    ->setLabel('Selection')
    ->setDefaultValue('value2');

Relation

Allows the selection of objects, assets, or documents.

$dialogBox->createRelation('my-relation')
    ->setLabel('Relation')
    ->allowObjectsOfClass('MyPimcoreClass')
    ->allowAssetsOfType('image')
    ->allowDocumentsOfType('page');

Link

A field for selecting internal or external links.

$dialogBox->createLink('my-link')
    ->setLabel('Link')
    ->allowTypes('document', 'asset', 'object')
    ->disallowFields('anchor', 'rel');

Numeric

An input field for numbers with min/max validation.

$dialogBox->createNumeric('count', 1, 10)
    ->setLabel('Count')
    ->setDefaultValue(5);

Date

A date picker.

$dialogBox->createDate('date')
    ->setLabel('Date')
    ->setFormat('d.m.Y');

Custom Configuration

All editables allow setting arbitrary configuration values via the addConfig method. This is useful for passing additional parameters that are not covered by the dedicated methods:

$dialogBox->createInput('name')
    ->addConfig('any-editable-config-key', 'value');

Translatable Labels

Text that only ever appears in the dialog box itself — labels, descriptions, placeholders, tab/panel titles, select options — accepts either a plain string or a Symfony\Contracts\Translation\TranslatableInterface, so you can use Symfony's t() helper instead of a hardcoded string:

use function Symfony\Component\Translation\t;

$dialogBox->createInput('name')
    ->setLabel(t('my_input.label', domain: 'areabricks'))
    ->setPlaceholder(t('my_input.placeholder', domain: 'areabricks'));

Translation only happens once, when the dialog box is built, so it's safe to mix translatable and plain string values freely.

If most of your labels share the same translation domain, set it once instead of repeating domain: '...' everywhere. There are two ways to do this, for two different audiences:

Projects building areabricks directly should use the bundle configuration (default_translation_domain). It's simpler and generally sufficient.
Bundles that build areabricks on top of this bundle should call DialogBoxBuilder::defaultTranslationDomain() instead, so they don't depend on whatever default_translation_domain the consuming project happens to have configured:
```
$dialogBox->defaultTranslationDomain('areabricks');
```

Either way, t() calls without an explicit domain argument then fall back to that default.

Note

The HasDialogBox trait passes the translator to the DialogBoxBuilder for you. If you instantiate DialogBoxBuilder yourself (e.g. in a custom createDialogBoxBuilder()), the translator is optional, but you need to pass a TranslatorInterface as the constructor argument to use translatable labels/values. Without one, building a dialog box containing a translatable value throws a LogicException, and defaultTranslationDomain() has no effect.

Note

setDefaultValue() only ever accepts a plain string, even though it looks similar to a label. Unlike the dialog box chrome above, it seeds the editable's actual value and, unless overwritten by the editor, ends up rendered on the live page — so it isn't retranslated on every dialog box build the way labels are. If you need a translated default, resolve it yourself (e.g. via an injected TranslatorInterface) before passing the plain string to setDefaultValue().

DialogBoxConfigurator

The DialogBoxConfigurator allows you to customize the dialog box configuration dynamically. This is particularly useful if an Areabrick is used within another Areabrick and you want to adjust settings like default values or select options based on the context.

1. Create a Configurator Class

Implement the Neusta\Pimcore\AreabrickConfigBundle\DialogBoxConfigurator interface:

<?php

namespace App\Areabrick;

use Neusta\Pimcore\AreabrickConfigBundle\DialogBoxBuilder;
use Neusta\Pimcore\AreabrickConfigBundle\DialogBoxConfigurator;
use Pimcore\Model\Document\Editable;
use Pimcore\Model\Document\Editable\Area\Info;

final class MyAreabrickDialogBoxConfigurator implements DialogBoxConfigurator
{
    public function configureDialogBox(DialogBoxBuilder $dialogBox, Editable $area, ?Info $info): void
    {
        $dialogBox->height(500);

        $dialogBox->getTab('Settings')
            ->getEditable('my-input')
                ->setDefaultValue('Custom Context Value');

        $dialogBox->reloadOnClose(false);
    }
}

Important

The configurator class must be registered as a public service in your container.

2. Usage in Twig

You can pass the service ID of your configurator via the dialogBoxConfigurator parameter in the pimcore_area or pimcore_areablock helpers.

Tip

If the service ID matches the FQCN, you can simply use the FQCN.

{{ pimcore_area('myfield', {
    type: 'my-areabrick',
    params: {
        'my-areabrick': {
            dialogBoxConfigurator: 'App\Areabrick\MyAreabrickDialogBoxConfigurator',
        }
    },
}) }}

Configuration

neusta_pimcore_areabrick_config:
    default_translation_domain: 'admin' # default

default_translation_domain sets the translation domain used for translatable labels when none is set explicitly (either on the TranslatableInterface object itself or via DialogBoxBuilder::defaultTranslationDomain()). It defaults to 'admin', since dialog boxes are rendered in the Pimcore backend, consistent with the rest of this bundle's own translations.

Contribution

Feel free to open issues for any bug, feature request, or other ideas.

Note

This bundle does not yet cover all of Pimcore’s possibilities and will be expanded as needed. Pull Requests are welcome!

Please remember to create an issue before creating large pull requests.

Local Development

To develop on your local machine, instance identification for Pimcore 12 is needed.

Copy the compose.override.yaml.dist file to compose.override.yaml:

cp -n compose.override.yaml.dist compose.override.yaml

And replace all replace_with_secret values with your data.

Then install the dependencies:

bin/composer install

We use composer scripts for our main quality tools. They can be executed via the bin/composer file as well.

bin/composer cs:fix
bin/composer phpstan

For the tests there is a different script that includes a database setup.

bin/run-tests

teamneusta / pimcore-areabrick-config-bundle

Package info

Security

Statistics

README

Installation

Usage

1. Prepare Areabrick Class

2. Access in Twig Template

Features

Dialog Configuration

Layout Options

Simple Content

Tabs

Available Editables

Input

Checkbox

Select

Relation

Link

Numeric

Date

Custom Configuration

Translatable Labels

DialogBoxConfigurator

1. Create a Configurator Class

2. Usage in Twig

Configuration

Contribution

Local Development