Filament•3mo ago

Can an action from a table call an event inside a widget?

Hey all, I am currently working on a system where I have a resource called assetResource. On the ListAssets page I have a widget that shows a map using a mapping tool. This mapping tool can highlight/target a locations using an id. I want it so that whenever I click on the asset in the table or perform an action for an asset, the map highlights/targets the location on the map. So my question is, what is the best way to implement this? If anything is not clear, or if any code is needed please let me know.

3 Replies

MohamedSabil83•3mo ago

Try to add an action which dispatch event with an argument, and add a listeners in that widget. In the end, it's all Livewire.

Povilas K•3mo ago

Try the terms like ExposesTableToWidgets and InteractsWithPageTable Docs: https://filamentphp.com/docs/3.x/panels/resources/widgets#accessing-page-table-data-in-the-widget Our article about it: https://laraveldaily.com/post/filament-stats-widgets-above-table-auto-update-with-filters

Laravel Daily

Filament: Stats Widgets Above Table - Auto-Update with Filters

Widgets - Panel Builder - Filament

Tjiel•3mo ago

Ty for this sugestion, I have created an action with a livewire dispatch event like this:

            ->actions([
                Tables\Actions\Action::make('Target asset')
                    ->label('Target asset')
                    ->translateLabel()
                    ->action(function (Component $livewire, Asset $asset) {
                        $closestLocation = $asset->closestGateway()->first();

                        $livewire->dispatch('targetAsset', $closestLocation ? ($closestLocation->space ? $closestLocation->space->id : $closestLocation->section->id) : 'Unknown');
                    }),
                DefaultActionGroup::make(),
            ])

            ->actions([
                Tables\Actions\Action::make('Target asset')
                    ->label('Target asset')
                    ->translateLabel()
                    ->action(function (Component $livewire, Asset $asset) {
                        $closestLocation = $asset->closestGateway()->first();

                        $livewire->dispatch('targetAsset', $closestLocation ? ($closestLocation->space ? $closestLocation->space->id : $closestLocation->section->id) : 'Unknown');
                    }),
                DefaultActionGroup::make(),
            ])

Then in my widget the following function:

    public function targetAsset($assetLocationId): void
    {
        $this->currentAssetLocationId = $assetLocationId;
    }

    public function targetAsset($assetLocationId): void
    {
        $this->currentAssetLocationId = $assetLocationId;
    }

and finally a listener in the blade file

            Livewire.on('targetAsset', currentLocationId => {
                const store = mapElement.store;
                  updateMapData('https://mapplic.com/getMapData?id=SLdntSNHu21mkMABidVp');
                store.getState().openLocation('' + currentLocationId);
            })

            Livewire.on('targetAsset', currentLocationId => {
                const store = mapElement.store;
                  updateMapData('https://mapplic.com/getMapData?id=SLdntSNHu21mkMABidVp');
                store.getState().openLocation('' + currentLocationId);
            })

Gaming

Programming

Can an action from a table call an event inside a widget?