Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

[RFC][Form] Improve form theming #29651

Copy link
Copy link
Closed
@yceruto

Description

@yceruto
Issue body actions

color-picker

Suppose you've several form fields (let's say "color") in different place around the app that require a JS component for better UX. For simplicity, this component will not require any additional option, just the value (the hex color #AEA1FF) that coming from the underlying data. And of course, it must be reusable.

How to put custom code easily together with the color input? What's the shortest path to achieve it? Yeah "Form Theming" so let's move forward.

(Step 1) Create a new form type (let's name it ColorPickerType) which will extend from TextType and nothing more, almost empty! Why this step? -> because we need a global/reusable block name in our form themes template to render the JS component code under <input /> tag -> for each color form field regardless what form it belongs to, and it's what precisely I want improve here: "I want to remove this step":

class ColorPickerType extends AbstractType
{
    public function getParent(): string
    {
        return TextType::class;
    }
}

(Step 2) Create the form themes template form/fields.html.twig with the customized block:

{% block color_picker_widget %}
    {{ form_widget(form, {'attr': {'v-model': 'color', '@focus': 'open'}}) }}
    {# custom code here #}
{% endblock %}

Great! we already have a new block prefix called color_picker allowing easy customization. Now, I need to configure my color fields with my new ColorPickerType.

BUT what if you want to configure this block prefix without adding a new form type? Yes, you can currently through the block_name option, but most of the time it'll work only for individual fields as each one is prefixed at the same time with the parent block prefix, that's always happening in my case (using EasyAdminBundle or SonataAdminBundle) where the root form always has a name. (see related source code)

And here is where my proposal comes from:

What about add an exclusive block prefix that don't depend of the parent form?
I'm thinking in a new option, maybe block_prefix or better (default null) if set add this prefix to the list, just before the unique prefix:

$blockPrefixes[] = $uniqueBlockPrefix;

Example (After):

(Step 1) Instead of create a new form type, configure the block_prefix option e.g. color_picker.
(Step 2) Same as before.

What do you think?

Cheers!

Metadata

Metadata

Assignees

No one assigned

    Labels

    FormRFCRFC = Request For Comments (proposals about features that you want to be discussed)RFC = Request For Comments (proposals about features that you want to be discussed)TwigBridge

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      Morty Proxy This is a proxified and sanitized view of the page, visit original site.