Filament "Live" Fields: Loading Indicator
Vložit
- čas přidán 10. 09. 2024
- What if you have a form with dynamic elements and expect a slow network connection for your users? It's important to show them that something is "Loading..." on the page.
Links mentioned in the video:
- Code on our Filament Examples: filamentexampl...
- Discord thread with the solution: / discord
- Livewire wire:loading livewire.larav...
- Filament Blade UI Components filamentphp.co...
@FilamentDaily Thank you so much for the video and answer. Just to add, This works perfectly in a page but if you want to use this in a Relation Manager which displays those elements in modal you have to use
' mountedTableActionsData.0.elementName ' and
' mountedActionsData.0.elementName ' in Action Modal.
where elementName (date in this video.) in the wire:target . Hope this will help someone who gets stuck.
I hope they make that a default thing in Filament v4... that would be such a handy addition
Great suggestion, thanks!
Awesome video, might check it on my actual project!
I do have a question about a different topic on filament. i dont know if u can give me a hand, but i'll leave it here:
Is there a way to customize user login form input values?
For example:
I have user_email and user_password in my users db table, but my login form doesn't seem to work unless i change default laravel migration values on my users table (email, password).
Is possible, to override these values on login class? Or creating a custom login is a better choice for this specific problem?
I really hope my question is not confusing at any point and gets understood easily since i'm not proficient at english, but i can rephrase my question or provide any further details if needed.
Thank you in advance, and great work as usual!
It's possible but then you need to override it in the core of two systems: Filament and Laravel Auth. With no guarantees that it would not break anywhere else than login.
So, I would definitely rename the DB fields to the standard ones, it would be much easier if you can do it.
@@FilamentDaily Oh, i see. I guess at some point it should affect the Filament workflow, so it might be not worth to do. Anyways, i'll keep it simple (renaming to standard DB fields), at least for now. Tysm for answering!
Good tip! thanks!!! Is there any method to make "global" indicator like top horizontal infinity progress bar which appears while loading any element dynamic on the page?
Not that I know of
There is a tip on the filamentglow to do something similar I believe
Hi. Can show percentage value also. I try to find it on the internet but couldn't. Like a progress bar. I have a livewire page which can dowload pdf using Laravel DomPDF package. There are more images in the pdf and it take 30s to download start after click the download button. If i could add a progress bar much better. Currently I have added wire loading and text like please wait..
I don't think it's possible to get/calculate the percentage of how much PDF is generated from that package.
Generally in Laravel, there are Bus Batches with progress bars, but that's if you have a longer set of queued jobs that you can calculate yourself how many of them are completed.
@@FilamentDaily Thanks for the reply. I am planning to subscribe to the laravel daily course. Waiting for this month's salary.🥰🥰 Thank you for hard work.
Nice video again :)
I do have a request at least this common scenario I guess,
In the create form, I want to populate live inputs from the URL params, so when the live input has value, the dependent input will show depending on the live input value.
Hope you notice this comment, been searching for a while but still got unfortunate also submitted a concern in filament discord but not yet been resolved.
what do you mean by from url params?
Can you give an example of that URL params and inputs? I'm not sure I understand the practical scenario.
Here a temporary helper to use inside the ->hint() method.
function hintLoading(): Closure
{
return fn($component) => new HtmlString(Blade::render(''));;
}
To use just pass like this ->hint(hintLoading())