F
Filament•5mo ago
jjo63

Changed behaviour of button after data change in table

Please look at the movie attached. The first time I click the "view document" button the modal pops up - and I can navigate with prev / next buttons through the records in the Filament table. I can close the modal and click a different row's button and the modal reopens. However when I change the data (e.g. apply a filter or page the results) the behaviour changes and the document opens taking the whole browser window (i.e. the modal is no longer used). Any tips on where to look first? thx j
10 Replies
jjo63
jjo63OP•4mo ago
Hi, anyone seen behaviour like this before and could share any thoughts? Much appreciated as haven't been able to solve it yet!
bwurtz999
bwurtz999•4mo ago
Can you share the code please?
jjo63
jjo63OP•4mo ago
The table column code is defined thus: 
                doclink::make(name: 'sp_file_id')
                    ->label(''),
                doclink::make(name: 'sp_file_id')
                    ->label(''),
The doclink column is 
 <?php

namespace App\Tables\Columns;

use Filament\Tables\Columns\Column;

class doclink extends Column
{
    protected string $view = 'tables.columns.doclink';
}
 <?php

namespace App\Tables\Columns;

use Filament\Tables\Columns\Column;

class doclink extends Column
{
    protected string $view = 'tables.columns.doclink';
}
And the blade view is 
<x-filament::button class="document-link" tag="a" id="viewDocumentLink_{{ $getState() }}" href="{{ route('getdoc_for_filament', ['file_id' => $getState()]) }}" color="success">
    View Document

</x-filament::button>
<x-filament::button class="document-link" tag="a" id="viewDocumentLink_{{ $getState() }}" href="{{ route('getdoc_for_filament', ['file_id' => $getState()]) }}" color="success">
    View Document

</x-filament::button>
Along with this is some js & css - can supply those as well if required - and it is that code (the js) that is opening a popup (modal) - essentially showing a DIV that is present on the page but hidden until the button is pressed.
bwurtz999
bwurtz999•4mo ago
Weird. I don't have any ideas off the top of my head. Impressive what you've built though. That's a cool doclink feature you've designed. My guess is that the issue is being caused by the fact that you're generating the modal from a column. What if you tried a column action button instead, something like 
use Filament\Tables\Table;
use Filament\Tables\Actions\Action;
use Filament\Forms\Components\ViewField;
 
public function table(Table $table): Table
{
    return $table
        ->actions([
            Action::make('docPreview')
              ->label('View Document')
              ->button()
              ->color('success')
              ->modalWidth('max') // can be whatever you want it to be
              ->form(function ($record) {
                return [
                ViewField::make('doclink')
                  ->label('')
                  ->view('tables.columns.doclink')
                  ->viewData([
                    'file_id' => $record->sp_file_id,
                  ])
                ];
              })
              ->modalSubmitAction(false) // hides the form submit button
              ->action(function () {
                  // nothing happens if submitted
              }),
        ]);
}
use Filament\Tables\Table;
use Filament\Tables\Actions\Action;
use Filament\Forms\Components\ViewField;
 
public function table(Table $table): Table
{
    return $table
        ->actions([
            Action::make('docPreview')
              ->label('View Document')
              ->button()
              ->color('success')
              ->modalWidth('max') // can be whatever you want it to be
              ->form(function ($record) {
                return [
                ViewField::make('doclink')
                  ->label('')
                  ->view('tables.columns.doclink')
                  ->viewData([
                    'file_id' => $record->sp_file_id,
                  ])
                ];
              })
              ->modalSubmitAction(false) // hides the form submit button
              ->action(function () {
                  // nothing happens if submitted
              }),
        ]);
}
you can even position the action at the start of the column to keep the look similar if that's how you want to present it
bwurtz999
bwurtz999•4mo ago
jjo63
jjo63OP•4mo ago
Thanks for the suggestion - I'll take a look at this. I'm getting this message
Missing required parameter for [Route: getdoc_for_filament] [URI: getdoc/{file_id}] [Missing parameter: file_id].
I'm struggling to understand why this isn't being passed through - do I need to do something with the viewData array?
bwurtz999
bwurtz999•4mo ago
Can you try to define a public $file_id in the tables.columns.doclink class 
<x-filament::button class="document-link" tag="a" id="viewDocumentLink_{{ $getState() }}" href="{{ route('getdoc_for_filament', ['file_id' => $file_id]) }}" color="success">
    View Document

</x-filament::button>
<x-filament::button class="document-link" tag="a" id="viewDocumentLink_{{ $getState() }}" href="{{ route('getdoc_for_filament', ['file_id' => $file_id]) }}" color="success">
    View Document

</x-filament::button>
^did you update the view to this? 
<x-filament::button class="document-link" tag="a" id="viewDocumentLink_{{ $getState() }}" href="{{ route('getdoc_for_filament', ['file_id' => $this->file_id]) }}" color="success">
    View Document

</x-filament::button>
<x-filament::button class="document-link" tag="a" id="viewDocumentLink_{{ $getState() }}" href="{{ route('getdoc_for_filament', ['file_id' => $this->file_id]) }}" color="success">
    View Document

</x-filament::button>
or maybe this. Sorry I can't remember exactly which one is the correct way Sorry you don't need a public $file_id in the class You should just be able to use $file_id directly in the Blade view 
<x-filament::button class="document-link" tag="a" id="viewDocumentLink_{{ $file_id }}" href="{{ route('getdoc_for_filament', ['file_id' => $file_id]) }}" color="success">
    View Document

</x-filament::button>
<x-filament::button class="document-link" tag="a" id="viewDocumentLink_{{ $file_id }}" href="{{ route('getdoc_for_filament', ['file_id' => $file_id]) }}" color="success">
    View Document

</x-filament::button>
jjo63
jjo63OP•4mo ago
That generates Undefined variable $file_id
jjo63
jjo63OP•4mo ago
When I use your suggestion and hard-code an ID (just to test the process) I press the the in-row "view document" button and I then get this pop-up: and when I then press the "view document" button within it my document is loaded in the full browser window. What I need is for the document to be presented within the modal. Clearly there is a problem with my original approach (as seen in the video) but am not sure if your proposed approach is heading in the right direction (and not to in any way be critical, I hugely appreciate the effort that you've made to help). thx j
No description
bwurtz999
bwurtz999•4mo ago
Oh no I see what happened. You wouldn't use the button view - my mistake. Do you have a view that route('getdoc_for_filament') uses to render? You would set that as the view and pass in the appropriate data Or - the simplest way to do this would be to set the route('getdoc_for_filament') as the ->url() for the button and then use ->openUrlInNewTab(). But this would open a new tab to view the document which you might not want 
->form(function ($record) {
                return [
                ViewField::make('doclink')
                  ->label('')
                  ->view('docPreviewBladeFile') // this is where you would use the view that getdoc_for_filament uses
                  ->viewData([
                    'file_id' => $record->sp_file_id,
                  ])
                ];
              })
->form(function ($record) {
                return [
                ViewField::make('doclink')
                  ->label('')
                  ->view('docPreviewBladeFile') // this is where you would use the view that getdoc_for_filament uses
                  ->viewData([
                    'file_id' => $record->sp_file_id,
                  ])
                ];
              })
And you can use ->modalCancelAction(false) to get rid of the cancel button in the modal just like you use ->modalSubmitAction(false)
Want results from more Discord servers?
Add your server