Filament•3mo ago

Action->extraAttributes(['target' => 'my_frame']) is not showing

Hi all, Thank you for this great package!! I'm trying to make a printer friendly view for all the records in a table. What i'm trying to do is: Filament\Tables\Actions\Action::make('printer_action')->extraAttributes([''target' => 'my_frame']). So, pretty straight forward if you ask me, but the target="my_frame" is not showing. When i change target to _target, it's showing. What am i missing?

14 Replies

awcodes•3mo ago

Are you just not seeing it in devtools? If that’s the case the browser could be removing it since ‘target’ isn’t necessarily a valid attribute. ‘Target’ could also be reserved for something like ‘wire:target’ I would look into using the ‘print’ modifiers of tailwind and add the extraAttributes as a class instead.

kippie1985•3mo ago

Hi awcodes. It must be protected then.

kippie1985•3mo ago

In my table->columns, i have this. Is it possible for actions too? Cannot find it in the docs

awcodes•3mo ago

Yea. Target isn’t a valid attribute on anchor tags. But definitely with actions target is scoped to wire:target in the blade file. Again I would use extraAtrributes([‘class’ => ‘…’]) then target the class in js. Or add a valid ‘data-print’ attribute or similar that could still be targeted in js. But tailwind does have a print sudo selector, just like hover and focus. That should just work out of the box if you setup a custom theme.

kippie1985•3mo ago

As far as i can see, the target attribute is valid: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/target. Anyway, i've "fixed" it now by making the ->label() an anchor.

MDN Web Docs

target - SVG: Scalable Vector Graphics | MDN

The target attribute should be used when there are multiple possible targets for the ending resource, such as when the parent document is embedded within an HTML or XHTML document, or is viewed with a tabbed browser. This attribute specifies the name of the browsing context (e.g., a browser tab or an (X)HTML iframe or object element) into which ...

awcodes•3mo ago

Target is valid on an svg element, but that’s not what you are trying to do. Either way. It’s reserved in the way you are trying to do it. So you have to find a different way. I have offered alternatives. 😀 What you shared is working you just have to target everything appropriately in your print command. Or your print css.

kippie1985•3mo ago

Very true!! I already did try to use JS like this:

<script>
            document.addEventListener('DOMContentLoaded', function() {
                document.querySelectorAll('[data-target]').forEach(function(element) {
                    element.setAttribute('target', element.dataset.target);
                });
            });
        </script>

<script>
            document.addEventListener('DOMContentLoaded', function() {
                document.querySelectorAll('[data-target]').forEach(function(element) {
                    element.setAttribute('target', element.dataset.target);
                });
            });
        </script>

But that's only on the DOMContentLoaded of course., so it works only on page load. As documented in the LW documentation, i can only use these JS hooks: livewire:initialized and livewire:init. In this resource, i only have a date filter. Can i hook into Filament as well?

awcodes•3mo ago

You shouldn’t have to. I think you’re trying to over complicate it. The easier way would be to make a custom theme. And in your css you can use the tailwind ‘print’ class to target and change the styling for any element under that ‘print’ class. Then you just have to do extraAttributes(‘class’ => ‘print’]) and it will honor your css file. No js actually necessary.

awcodes•3mo ago

https://tailwindcss.com/docs/hover-focus-and-other-states#print-styles

Handling Hover, Focus, and Other States - Tailwind CSS

Using utilities to style elements on hover, focus, and more.

awcodes•3mo ago

https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme

Themes - Panel Builder - Filament

kippie1985•3mo ago

I think we don't understand each other haha. I have a button, that should load a route in a frame that's dedicated to print only some texts. The route will load a controller and the controller will load a view. In this view, i have a javascript window.print(), so this page will show the printer dialog, without opening the actual print page

awcodes•3mo ago

Ok, so just

Action::make(‘print’)
  ->alpineClickHandler(‘window.print()’)

Action::make(‘print’)
  ->alpineClickHandler(‘window.print()’)

But yea, maybe I’m just not following. Sorry.

kippie1985•3mo ago

Your solution will print the current page. I'll try to explain the problem more detailed: I have a resource, let's say: PicklistResource. In this resource, i can see all the products i have to pick today for all pending orders. I need a signature from the carrier that he picked up the products, just to have proof, it's a client requirement. It's just a simple list with a barcode, Product description and order number. Beneath that, there will be some space for the driver name, license plate and a signature, so a completely other view

awcodes•3mo ago

Ok, but once the user is redirected to that page it’s still just a print page action on that page. So it’s 2 actions. One to send the user to that page, then another on that page after it loaded to print.

Gaming

Programming

Action->extraAttributes(['target' => 'my_frame']) is not showing