How To Use Custom Laravel Livewire Components in Filament

[@tecnobyte23]

Great video! Thank you! Why is method maxItems not reactive? The new item limit is not updated in the select, according to the value placed in the input dynamically. TextInput::make('max_items_input')->live(onBlur: true), Select::make('technologies') ->multiple() ->options([ 'tailwind' => 'Tailwind CSS', 'alpine' => 'Alpine.js', 'laravel' => 'Laravel', 'livewire' => 'Laravel Livewire', ]) // It doesn't work. ->maxItems(fn (Get $get): int => $get('max_items_input') ?? 1) // It works. ->helperText(fn (Get $get): string => $get('max_items_input') ?? 1)

[@Tuto1902]

I haven't used the builder field so I can't provide much information. I would assume that using ->live() on the builder would help with the issue, but I'm not sure.

[@VadimBesedin]

Clear, simple, straight-forward tutorial. *@Tuto1902, your teaching style is great!* Subscribed :) Thank you for your time and knowledge.

[@JonBrookes]

This I was looking for and could not find a simple answer for elsewhere, until I came across your wonderful channel. Many thanks.

[@Somcoders]

Straight to the point - Thank you.

[@DarrylWaterhouse]

This is a really great starting point. Is there a way, for example, to have a guest access a Filament resource? So, maybe I have a list of posts about some courses, and I would like for a guest to be able to see these and click something to make contact with the admin. They would be outside of the Filament Admin panel. Could you possibly so a short tutorial on that, please? Oh, and the short condensed video format is brilliant. 👌

[@Tuto1902]

I believe there is. Here's the documentation about it filamentphp.com/docs/3.x/panels/users#setting-up-guest-access-to-a-panel

[@engbz]

Hello, thank you very much for the lesson. When I use CheckboxList, the names do not appear. I don't know what's wrong

[@Tuto1902]

Depends on what you are using for the options. When using a simple array, the key will be the value of the checkbox and the array value will be the checkbox label. When using relationships, just need to specify what column will be used as the label of the checkbox using the titleAttribute parameter filamentphp.com/docs/3.x/forms/fields/checkbox-list#overview

[@HamadAbdulla_7]

great video

[@md.yeasin5214]

um follow your filament live project and it is awesome.plz make a livewire project like filament

[@Tuto1902]

That's a great idea. I do have a couple of projects in mind and I still haven't decided if I'll go Filament, Jetstream (Livewire & Blade) or simply Laravel. I think I'm leaning more towards Livewire. Thank you for watching and I'm glad you like it 🫶🏼

[@АртурЗарипов-б2й]

Good job! Thank you!

[@nikolicvladimir]

love the music :D

[@development2301]

Thank you. Great videos

[@JuniorOliveiraEs]

Sensacional, bem esclarecedor.

[@minvalencia9598]

Hi how to add a custom livewire components in existing resource?

[@Tuto1902]

You can use one of the many render hooks provided by filament and render a custom component inside it. filamentphp.com/docs/3.x/panels/configuration#render-hooks

[@AMoktar]

Awesome thanks

[@justgkp]

Great video!!! Please make more videos on Livewire Components in Filament.

[@Tuto1902]

You got it 👍🏻

[@tote_channel]

Really awesome. I'm stuck in adding a custom component in a Filament form schema. Using a View::make().I can render only the view, but any dispatched event is not seen in the custom component. Any ideas?

[@Tuto1902]

What kind of component are you trying to create? Like a custom form input of some kind?

[@tote_channel]

@@Tuto1902 A components that handles the dynamic generation of multiple fields. For now I've solved with a custom field component, that get the "json_fields" field from the object and generate the fields from there.

[@irfanfathurr]

Awesome

[@SandeepThakkar-y6o]

Awesome video. Can you create video to integration of Image carousel using custom live wire component to filament V3 ?

[@Tuto1902]

Thank you! I’m glad you liked it. I appreciate the suggestion. Sounds like an interesting idea. I’ll definitely keep it in mind for a future video 👍🏻

[@SandeepThakkar-y6o]

@@Tuto1902 Thank you for your quick reply, will wait for the same :)

[@DionatanCazarotto]

dont work in filament 3

[@Tuto1902]

It's not a catch all solution for sure. Any particular reason why you don't like it?

[@DionatanCazarotto]

@@Tuto1902 the bug was fixed in livewire beta 7. Thanks

[@ngetichishmael]

This video is a real live wire.❤

[@neverforget1575]

Hey, loving the content keep up the great work, quick question I was running through your tutorial and it got me thinking can you build a twitter type layout using filament? I've been doing some research but not sure how you would implement filament to show all tweets of the people you follow and how to add tweets etc and it shows up on the UI, most videos are showing filament as a backend admin panel, do you think it could be used for a frontend facing app? With Auth as normal like twitter. Thanks again

[@Tuto1902]

I don't know to be honest. Maybe a combination of sections and info list entries. But I think it would be a lot easier to go with a custom full-page Livewire component than trying to morph filament into something like that

[@neverforget1575]

Yeah was thinking to maybe use form builder, and pull in a livewire component into a blade file, and build the rest of the UI normally but still be able to use filament forms, maybe i could use other parts of filament for the side bar menu as well, or would this be to much? Thanks @@Tuto1902

[@neverforget1575]

Thanks for the reply, I was thinking a fullpage Livewire component for the app, then each page has a filamnet form? and use filament forms, For example have the homepage like twitter with menu on left handside and tweets in the middle the ( tweets form would be a filament form ) have a fulll page component, with a side navbar component also which is a seperate livewire component settings etc be linkable, and when clicked will show a filament form, for crud for those settings is that the kind of thing you mean? Thanks@@Tuto1902

[@wmafendi]

this is what I want! thanks

[@muhammadawwab4402]

how to do this in v3?

[@Tuto1902]

The process is the same in v3 as far as I know. If you're having issues, please post a question on my discord channer under Filament Technical Help so I can better assist you. (link in the video description)

[@muhammadawwab4402]

@@Tuto1902 i already fixed it, i get errror layout not found, i found out it was livewire problem when nesting component, it already fixed by caleb. Then i run composer update livewire and it worked!

[@muhammadawwab4402]

@@Tuto1902 hey i have another problem , i have form in livewire component inside custom page. when i try to $this->validate() it alwyas return "array_merge(): Argument #1 must be of type array, null given", when i try to use this livewire component outside filament custom page it works. do you know why sir?

[@Tuto1902]

@@muhammadawwab4402 It's hard to answer in a KZbin comment. I don't have a lot of context to go off of. Would you mind posting this question in the Filament Technical Help channel over on my discord server? (link in the description). Please include code snippets so I have a better idea of what the problem could be

[@jijirijohnson3453]

Great video, please how to I perform arithmetic operations in filament table? Let say I have quantity, un-price and price as my columns in the model. How do I calculate this, quantity * un-price =price?

[@Tuto1902]

Very simple! You can use what is called a calculated state. Assuming your model class is called Invoice and that "price" is the calculated value you want: TextColumn::make('price')->getStateUsing(fn (Invoice $record) => $record->quantity * $record->unitPrice), Here's the documentation for it: filamentphp.com/docs/2.x/tables/columns/getting-started#calculated-state

[@jijirijohnson3453]

@@Tuto1902 great, but how do I set the result into another column?

[@Tuto1902]

just use whatever column name you want in the ::make method of the TextColumn, like this TextColumn::make('someOtherColumn')->label('Some Other Column')->getStateUsing(...), The calculated result will be displayed in the table in a column labeled "Some Other Column"

[@Tuto1902]

Keep in mind that this is for display purposes. I'm assuming all you need is to display the unit price multiplied by the quantity. If, however, you want to update the price column with this calculation. That should be done at the time of the record creation (whenever you create the record containing unit price and quantity). Say you have a form that create new invoice lines. This form has unit price and quantity. Once the form is submitted, but before saving the record, you would calculate the price and THEN save your model. In this way you would only need to display the price column, since the calculation already took place and you have the value for "price" already stored in the database. I hope this answer your question.

[@jijirijohnson3453]

@@Tuto1902 yes, when I did and tried it, I got error. Actually I have a form in the filament where I entered the un-price and quantity, so I need the total should be calculated and inserted into a column called, total /price. At first I used to enter all the form fields (un-price and quantity) and manually calculate the total and put it in the total column. Now with you directive, I want to fill only the un-price and quantity fields only so that the total field should automatically be filled with the calculations of the price