If I created a custom field, where do I manage the livewire interactions?

I created a new custom field ManageGroupSetting and it has a sortable.js

<?php

namespace App\Forms\Components;

use Filament\Forms\Components\Field;

class ManageGroupSetting extends Field
{
    protected string $view = 'forms.components.manage-group-setting';

}

<?php

namespace App\Forms\Components;

use Filament\Forms\Components\Field;

class ManageGroupSetting extends Field
{
    protected string $view = 'forms.components.manage-group-setting';

}

page view

<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <hr>

    <h3>Options</h3>

    <div wire:ignore>
        <ul id="sortable">
            (...)
        </ul>

        <!-- Include Sortable.js -->
        <script>
            document.addEventListener('DOMContentLoaded', () => {
                initializeSortable();
            });

            function initializeSortable() {
                const sortableElement = document.getElementById('sortable');

                if (sortableElement) {
                    const sortable = new Sortable(sortableElement, {
                        handle: '.sortable-handle',
                        animation: 150,
                        onEnd: (event) => {
                            const newOrder = Array.from(event.to.children).map(item => item.dataset.index);
                            // Livewire.emit('reorder', newOrder);
                        },
                    });
                }
            }
        </script>
    </div>
</x-dynamic-component>

<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <hr>

    <h3>Options</h3>

    <div wire:ignore>
        <ul id="sortable">
            (...)
        </ul>

        <!-- Include Sortable.js -->
        <script>
            document.addEventListener('DOMContentLoaded', () => {
                initializeSortable();
            });

            function initializeSortable() {
                const sortableElement = document.getElementById('sortable');

                if (sortableElement) {
                    const sortable = new Sortable(sortableElement, {
                        handle: '.sortable-handle',
                        animation: 150,
                        onEnd: (event) => {
                            const newOrder = Array.from(event.to.children).map(item => item.dataset.index);
                            // Livewire.emit('reorder', newOrder);
                        },
                    });
                }
            }
        </script>
    </div>
</x-dynamic-component>

34 Replies

o.mOP•4mo ago

I have this // Livewire.emit('reorder', newOrder); Where should I add the newOrder function? Is it on the form filament or the custom fields class? nvm I get Livewire.emit is not a function please help If there is a Class when its generated I just dont understand anyway whats the use of the Class when creating a custom field. like its just there to reference the view and nothing else ?

awcodes•4mo ago

Livewire.dispatch(), emit was removed in v3

awcodes•4mo ago

https://livewire.laravel.com/docs/upgrading#events

Laravel

Upgrade Guide | Laravel

A full-stack framework for Laravel that takes the pain out of building dynamic UIs.

o.mOP•4mo ago

Whats the purpose of this component? It seems that I can't call reorder() and use $helloworld

awcodes•4mo ago

Fields aren't livewire components

o.mOP•4mo ago

I have this custom field

o.mOP•4mo ago

And I wanted to add aditional functionalities how do I do that?

awcodes•4mo ago

You're GroupSettings is extending Field which isn't a livewire component so you can't treat it like one. in your ViewField you could have a livewire component, though.

o.mOP•4mo ago

What changes do I need to do on the ViewField

awcodes•4mo ago

in the blade for the view field you just do a standard livewire component and pass the data to it. Hard to give real advice since i'm not sure exactly what you are trying to accomplish.

o.mOP•4mo ago

This one?

o.mOP•4mo ago

I am trying to add another method and call that method such as reorder On the ViewField

awcodes•4mo ago

yea, so that 'component' has no knowledge of any methods on the livewire / page. so, when you define a class that extends Field it doesn't have any direct tie to the livewire component that is rendering the form. If you need to run methods from the class, then you will need to use listeners to run that method defined by the field class I'm doing a terrible job explaining it all. sorry

o.mOP•4mo ago

Yeah even if you explain it I still have trouble making it into actual code hehe Where do I put the listeners though? Inside the ViewField class?

awcodes•4mo ago

maybe this can help: https://github.com/awcodes/filament-tiptap-editor/blob/89ec074e0ebf096eba1de71fab7419d43799d9b8/src/TiptapEditor.php#L122

GitHub

filament-tiptap-editor/src/TiptapEditor.php at 89ec074e0ebf096eba1d...

A Rich Text Editor plugin for Filament Forms. Contribute to awcodes/filament-tiptap-editor development by creating an account on GitHub.

awcodes•4mo ago

it's not your use case but the functionality is similar. then somthing like this in the blade to dispatch it: $wire.dispatchFormEvent('tiptap::setGridBuilderContent', '{{ $statePath }}', {}) there's several ways to do it, just have to get the context right of what is a livewire component and what isn't so you can tie it all together.

o.mOP•4mo ago

daaang plzz

awcodes•4mo ago

Not the easiest example, sorry, just the only one I could think of off the top of my head.

o.mOP•4mo ago

$wire.dispatchFormEvent('tiptap::setGridBuilderContent', '{{ $statePath }}', {}) Tiptap is the class name and called a method setGrid ?

awcodes•4mo ago

Hopefully someone else can help to explain it better than me. Tiptap::setGrid is the name of the listener that is registered to the livewire component / page It can be whatever you want. I just prefixed to avoid collisions

o.mOP•4mo ago

On my scenario EditGroupSetting.php is where I can put my listeners right?

awcodes•4mo ago

correct which ever class is extending Field. i don't know your file structure. the code you showed was ManageGroupSettings but you're also using a ViewField and a ManageGroupSettings field something isn't quite adding up. seems like ManageGroupSettings should be in the form instead of ViewField

o.mOP•4mo ago

The ViewField is inside the form()

o.mOP•4mo ago

awcodes•4mo ago

Right but your ManageagroupSettings is a field so it should be in the form instead. If I’m following correctly. let's try to simplfy this all. lol Put this in your EditGroupSetting class (since it is the livewire component):

use Livewire\Attributes\On;

#[On('reorder')]
public function reorder(array $data = []): void
{
    // do reorder stuff
}

use Livewire\Attributes\On;

#[On('reorder')]
public function reorder(array $data = []): void
{
    // do reorder stuff
}

o.mOP•4mo ago

@awcodes I found that you have a component called repeater Adam, does tweaking it will probably allow me to add a radio button or a check button

o.mOP•4mo ago

Which means I might not need to use ViewField or CustomField

o.mOP•4mo ago

Which also has the same looks as this one. Sorry for the late reply, was in the metting

awcodes•4mo ago

Whatever works for you.

o.mOP•4mo ago

I replicated the simple.blade.php file and did some customization with it, add an input radio am i correctly referencing the model here?

o.mOP•4mo ago

For UI

o.mOP•4mo ago

I still made a custom field but this time I am different approach, I extended the repeater class instead

o.mOP•4mo ago

And called it Answers.php This field works well on Resource, unfortunately it doesn't quite work well with Custom Page

Gaming

Programming

If I created a custom field, where do I manage the livewire interactions?

Did you find this page helpful?