ViewColumn does not open modal with Modal Blade component

As in the docs, I have a ViewColumn:

use Filament\Tables\Columns\ViewColumn;
 
ViewColumn::make('status')->view('custom-view')

use Filament\Tables\Columns\ViewColumn;
 
ViewColumn::make('status')->view('custom-view')

Within that View I have:

<x-filament::modal>
    <x-slot name="trigger">
        <x-filament::button>
            Open modal
        </x-filament::button>
    </x-slot>
 
    {{-- Modal content --}}
</x-filament::modal>

<x-filament::modal>
    <x-slot name="trigger">
        <x-filament::button>
            Open modal
        </x-filament::button>
    </x-slot>
 
    {{-- Modal content --}}
</x-filament::modal>

This is enough to render a modal anywhere within a form using ViewField. However, when trying to do this in a ViewColumn, I'm getting the following error: Alpine Expression Error: isOpen is not defined ___ I would usually run this in an action, but I am unable to run any custom js within the action. Anything within script tags in a custom view do not execute. E.g.

Tables\Actions\Action::make('myAction')
->requiresConfirmation()
->form([
    ViewField::make('name')
        ->view('test'),
])

Tables\Actions\Action::make('myAction')
->requiresConfirmation()
->form([
    ViewField::make('name')
        ->view('test'),
])

// test.blade.php
<script>
console.log('here') // this is ignored

function test() { 
    console.log('hello world') // never gets called
}
</script>

<button onclick="test">Click!</button> // renders fine

// test.blade.php
<script>
console.log('here') // this is ignored

function test() { 
    console.log('hello world') // never gets called
}
</script>

<button onclick="test">Click!</button> // renders fine

Does anyone know why this is the case on either issue and how I can fix? (Screenshot is of first issue, referencing ViewColumn modal)

7 Replies

toeknee•13mo ago

I suspect it's because it's not loading as a livewire view so it has not been processed the isOpen function into the runtime. You will likely need function isOpen() { } onto the parent element. But you can just use Filament Actions and pass in your custom view to render your data instead?

Josh777OP•13mo ago

Hi @toeknee, can you give me a bit more detail on your first suggestion? The second suggestion doesn't work because of what I mentioned in the second half of my question, js does not ever execute in a filament modal

toeknee•13mo ago

What are you trying to render in your popup

Josh777OP•13mo ago

Rendering this would be a start

<script>
console.log('here') // this is ignored

function test() { 
    console.log('hello world') // never gets called
}
</script>

<button onclick="test">Click!</button>

<script>
console.log('here') // this is ignored

function test() { 
    console.log('hello world') // never gets called
}
</script>

<button onclick="test">Click!</button>

toeknee•13mo ago

That's a start but not what you want, what you are trying to rendering is what is important here. You could use a form, or a table possibly and so no custom view needed

Josh777OP•13mo ago

I am implementing this: https://www.npmjs.com/package/xterm/v/5.1.0

toeknee•13mo ago

Actual javascript needs adding to the application boot sequence so add it as per the docs as functions, then you can call those functions in the view if you need js

Gaming

Programming

ViewColumn does not open modal with Modal Blade component