Customizing the Collection Form Prototype

Hey Francisco C.

Does it happen on both action (create and edit)? If it only happens on edit action (because the form actually contains some genus scientists), then, the trick Ryan showed us doesn't work anymore on Symfony 5. What you can do is to check if there are any genus scientists before calling {{ form_widget(genusForm.genusScientists) }} (after the for). Or, disable the label of that form field directly on the FormType class https://symfony.com/doc/current/reference/forms/types/text.html#label

Cheers!

Hey Brentmtc,

Here's the reference to the docs page about how to customize form rendering: https://symfony.com/doc/cur... . But what you want to do is related to customizing form theme I believe, see: https://symfony.com/doc/cur... . If you use Bootstrap 4 layout for your forms - there's another form theme called "bootstrap_4_horizontal_layout.html.twig", see https://symfony.com/doc/cur... - if you will try to use it on the specific page you need (see https://symfony.com/doc/cur... ) - it will automatically render all your form fields horizontally. This would be the easiest win for you I think.

If the horizontal layout is still not render perfectly, like you really want to customize how fields are rendered - take a look at overriding Symfony form theme. You can find how to override form theme on the same docs page: https://symfony.com/doc/cur... - this way you will be able to override some part of the form layout and make it render as you want. But it's kinda advanced level, I'd recommend you to try the built-in horizontal layout first to see if it solves the problem for you.

I hope this helps!

Cheers!

Hey Brent

It depends on where does the account number comes from. If you can get it at your controller's action level, then you can just pass it to the FormType as an "option". If that's not the case, then you may want to inject a service into your FormType so you can use it to get the account number at the right moment

Cheers!

The aforementioned dropdown of account number is not part of my form that submits. I populate an html dropdown from a query result when my template loads. A user can select an account number when they do an ajax call is made and data for some of the fields in the form gets populated via that ajax call. I don't think passing an account number to the FormType as an 'option' will work because to my knowledge that would be a static value and if a different account number was chosen from the dropdown that account number option would be 'out of date'.

My follow up question is if I were to try and inject a service into my FormType can an account number in the where clause in the query that populates my Materials Collection be updated via javascript or ajax call? Or is there someway I can update the dropdown options in the Material Collection prototype via javascript or ajax? I did create my collection almost exactly as this screencast and Symfony's page describes with addCollection removeCollection functions.

I apologize this is so wordy I am trying to explain how I have this working so far and what I am trying to do. Thank you in advance!

Interesting, in that case, whenever a user selects an account number, then, you should re-render the FormType and update your HTML using Javascript when the AJAX request finishes.

Hello, I was able to get this working. I'll list what I did in case it can help someone else.
1. Set the choices in my MaterialsFormType EntityType to null 2. Added a method in my controller to query for the data by user id and account number (what I was trying to do in my repository) 3. Added an ajax call to that same method in my addMaterialCollectionForm function (after the card creation) 4. Looped through the response to update the select options html in my Materials Form Collection.

Interesting though looking at injecting a service into a FormType. I've have never done that nor am I exactly sure the use case to do so but thank you for your time!

It's rare when you need to inject a service into a FormType but it's easy to do, FormType classes work just like any other service, you only have to add a constructor and add arguments to it

Hey Olivier Mellinger!

Sorry for the slow reply - nice to chat with you!

I come across an "issue" or may be I don't understand one mechanism: how does Doctrine know what items from your collection are new or updates when you submit?

That is an excellent question! It's a team effort. You're correct that there are no ids in the form fields managing the scientists. But, each "does" have an "index". What I mean is, if you have 3 scientists, and so 3 rows, the first is submitted with an index 0 as part of its name, the second as 1 and the third as 2. This is important! Here is the process that happens when you submit. And, by the way, you can see this logic here - https://github.com/symfony/symfony/blob/31ee43a8c67897a2f61782060965f5c8a81f58a2/src/Symfony/Component/Form/Extension/Core/EventListener/ResizeFormListener.php#L93-L112 - that is a complex class, and there are other pieces of logic beyond these lines, but it can still give you an idea. Anyways, let's look at some examples:

A) You originally have 3 rows (so, indexes 0, 1 and 2 - called "$name" in that class I linked above as it's looping). You delete the 2nd row. This means you submit indexes 0 and 2 only. This causes the field with index "1" to be removed from the form.

B) You originally have 3 rows (indexes 0, 1 and 2) and you add a new one, with index 3. In submit, the new one is added to the form.

So this is the first part of the equation. The form uses these indexes to add or remove these "embedded fields" from the form.

But, how does that ultimately get communicated to adding/removing scientists to your entity? This relates to the by_reference => false option we set - https://symfonycasts.com/screencast/collections/by-reference-adder-remover#codeblock-92435a5c26

Basically, if the form detects that index "1" has been removed, then it grabs whatever GenusScientist is attached to that form, and calls $genus->removeGenusScientist($genusScientist). That causes us to remove it from that property, which is ultimately why Doctrine will save the Genus without this relation. The same happens when a new row is added: the for system calls ->addGenusScientist() and passes it the new GenusScientist. It all works... but is pretty crazy :p.

So... in theory, all of this "works the same way" with a ManyToMany relationship. The form system actually doesn't know the difference. Think about it: if we changed Genus to be a ManyToMany to GenusScientist, the Genus object would still have addGenusScientist(), removeGenusScientist() and getGenusScientists() methods that all do the exact same thing. The form would call those methods in the same way, and everything would save the same (Doctrine handles inserting and deleting rows in the "join" table automatically for ManyToMany as you add/remove GenusScientist to Genus).

In my form, i would like to be able to link my POI to existing zones (then i will have to manage a selectbox with the existing ones, fine!) or/and link it to a new zone (using what is explained here so fine as well).

The tricky thing will be that I don't think it would be easy with the form collection system to have a checkbox to select form existing zones AND an embedded form to add a new zone "on the fly". It's because either your "zones" field on your form needs to either be a EntityType that renders as checkboxes OR a CollectionType, which renders as embedded forms. Personally, I would probably use EntityType. And if you want a Zone to be created "on the fly", I would add a "Create zone" link which, for example, opens a modal that allows the user to create the Zone in a separate form. On AJAX submit and save of that form, you would add a new checkbox to the main form. Not the easiest thing to do, but it's a better user experience anyways.

Phew! Let me know if any of this helps ;).

Cheers!

Hey BlackWiCKED

Excellent point. I'm glad you noticed it. We talk about that edge case here and proposed a solution: https://symfonycasts.com/sc...

Cheers!

Nice one, thank you for sharing. Using a listener is more elegant than my scrappy patch, I'll go with yours. ;)

Hey Hervé BOYER

Do you mean something like automatically hitting the "Add another scientist" button if the Genus object doesn't have one already ? If so, you could do a check like this

{% if genusForm.genusScientists|length == 0 %}
    // your code
    // simulate clicking that button
{% endif %}

I hope it helps you, if not, let me know!

Have a nice day :)

Hi Diego !
Thank you very much for your answer.
I'll trying when I'll better in JS ^^

Hey Petr,

Yes, fair point! It makes sense if you extends formLayout.html.twig only with edit.html.twig and new.html.twig templates.

Cheers!