Tag: Symfony

Enable Twig Components in Pimcore

I installed Symfony’s Twig Components in Pimcore to test if and how to do that.

A small warning ahead: This feature is still experimental, as their documentation titles.

To install the components in Pimcore simply install the components bundle via composer

composer require symfony/ux-twig-component

Now you need to tell Pimcore about this bundle in config/bundles.php

// config/bundles.php
return [
    ...
    Symfony\UX\TwigComponent\TwigComponentBundle::class => ['all' => true],
];

It is installed and ready to be setup.
Depending on the specific setup these steps might vary, adjust accordingly

  1. Register the components in the services.yaml and make them public
  2. Create the components-class
  3. Create the components-template
  4. Use the template in your code e.g. the default-template
// services.yaml
AppBundle\Components\:
    resource: '../../Components'
    public: true
// src/Components/AlertComponent.php
namespace App\Components;

use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;

#[AsTwigComponent('alert')]
class AlertComponent
{
    public string $type = 'success';
    public string $message;
}
{# templates/components/alert.html.twig #}
<div class="alert alert-{{ type }}">
    {{ message }}
</div>
{{ component('alert', { message: 'Hello Twig Components!' }) }}

Create custom form themes for Dachcoms Formbuilder Plugin in Pimcore

From time to time you want to overwrite the default templates for forms in pimcore.
I had some problems to find the information I need as they are spreaded widley.

To get it to work it should look like this:

Filestructure

# src/AppBundle/Resources/config/pimcore/config.yml
form_builder:
    form:
        templates:
            ivoclar_div_layout:
                value: 'my_form_div_layout.html.twig'
                label: 'Custom form layout'
                default: true
{# tempaltes/bundles/FormBuilderBundle/Form/Theme/Macro/my_form_div_layout.html.twig #}
{% macro form_builder_form_head() %}
{% endmacro %}

{% macro form_builder_form_foot() %}
{% endmacro %}

{% macro form_builder_form_message(flash_messages) %}
    {% if flash_messages is not empty %}
        {% for label, messages in flash_messages %}
            {% for message in messages %}
                <div class="message message-{{ label }}">
                    {{ message|raw }}
                </div>
            {% endfor %}
        {% endfor %}
    {% endif %}
{% endmacro %}
{# tempaltes/bundles/FormBuilderBundle/Form/Theme/my_form_div_layout.html.twig #}
{% extends "form_div_layout.html.twig" %}

{%- block widget_attributes -%}
    id="{{ id }}" name="{{ name }}"
    {%- if disabled %} disabled="disabled"{% endif -%}
    {%- if required %} required="required"{% endif -%}
    {{ block('attributes') }}
{%- endblock widget_attributes -%}

Overwrite field-names with a template

In Pimcore I’m using https://github.com/dachcom-digital/pimcore-formbuilder to create input forms in my project.
I have the problem that the default input names are not the once I need for my task.

Default names
<input .. name="formbuilder_1[task]"
<input .. name="task"

I created a form theme to overwrite it

{# /templates/bundles/FormBuilderBundle/Form/Theme/myform_div_layout.html.twig #}
{% extends "form_div_layout.html.twig" %}

{%- block widget_attributes -%}
    id="{{ id }}" name="{{ name }}"
    {%- if disabled %} disabled="disabled"{% endif -%}
    {%- if required %} required="required"{% endif -%}
    {{ block('attributes') }}
{%- endblock widget_attributes -%}

The default name is {{full_name}}, replaced with {{name}} returns the fieldname I’ve set in the formbuilder form.