Use custom component in create.blade.php ('add new' form)

[ammma]

I've created a custom component which works fine in edit form(form.blade.php) but then i've added it to create.blade.php and i'm getting [Vue warn]: Unknown custom element: ....
Is there an elegant way to make it work?

[pboivin]

Hey @ammma,

Just did a quick test on my end and I can confirm that create.blade.php isn't aware of custom Vue components. I believe it's because the modal belongs to the listing view, which uses the main-listing.js bundle. This bundle doesn't import custom Vue components like main-form.js does. Not sure if it would be complicated to transfer this behavior over from main-form.js.

I'll look into it a bit more and report here :)

[ammma]

@pboi20 Thank you so much.

Quick question - lets say you have 2 select fields and options of one depends on selection at other, for example countries and cities. How would you implement this using Twill's set of fields? I believe this is a very common situation but i didn't find a way other than creating custom component.

[pboivin]

Hey @ammma,

I have experimented a bit more with this. Turns out that enabling custom Vue components in the listing view is simple :
https://github.com/pboi20/twill/commit/e97d5e63b4962975d8cd764e6ad23c3e553261b1

Not sure if this is 100% desirable or if it would have any unintended side effects. I will try to get more feedback on this one before sending a PR.

Quick question - lets say you have 2 select fields and options of one depends on selection at other, for example countries and cities. How would you implement this using Twill's set of fields? I believe this is a very common situation but i didn't find a way other than creating custom component.

Yes, I believe you would need a custom component for this. There is the (newly documented) @formConnectedFields that can show/hide some fields based on the value of another:
https://github.com/area17/twill/blob/2.x/docs/.sections/form-fields.md#conditional-fields

If your use case is relatively simple, you may be able to simulate dynamic options by having multiple copies of the same select field and show the appropriate one based on some other value. Definitely hacky :)

Hope this can help!

[ammma]

Hey @ammma,

I have experimented a bit more with this. Turns out that enabling custom Vue components in the listing view is simple :
pboi20@e97d5e6

Not sure if this is 100% desirable or if it would have any unintended side effects. I will try to get more feedback on this one before sending a PR.

Quick question - lets say you have 2 select fields and options of one depends on selection at other, for example countries and cities. How would you implement this using Twill's set of fields? I believe this is a very common situation but i didn't find a way other than creating custom component.

Yes, I believe you would need a custom component for this. There is the (newly documented) @formConnectedFields that can show/hide some fields based on the value of another:
https://github.com/area17/twill/blob/2.x/docs/.sections/form-fields.md#conditional-fields

If your use case is relatively simple, you may be able to simulate dynamic options by having multiple copies of the same select field and show the appropriate one based on some other value. Definitely hacky :)

Hope this can help!

Hi. I've tried to use connected fields for other case but they doesn't seem to be working too. I mean if you put them into create.blade.php

This is an error i got after adding @formConnectedFields section:

Field is shown but no reaction on connected field's changes.

Is this an expected behavior or bug or i did something wrong?

[pboivin]

Hey @ammma,

Sorry for leading you down the wrong path. This makes sense, you didn't do anything wrong. The ConnectorField component is also only registered on the main form, not in the modal:
https://github.com/area17/twill/blob/2.x/frontend/js/main-form.js#L90

I guess this is a good opportunity to rethink what should be available in the create modal, in relation to the main form.

[pboivin]

Have you tried setting 'skipCreateModal' => true in your controller $indexOptions? I believe this could be a workaround for your use case, as it takes the user directly to the main form, where custom components are available.
https://twill.io/docs/#controllers

[ammma]

I've tried this option now, thanks. Despite connected field is working, console if full of errors like: