Collaborate on Invoice Preview for Sales with Ease Using airSlate SignNow

Invoice preview for Sales

hello guys welcome to filament daily today I want to show you an interesting code example with filament but not from myself not my own code but open source project by Andrew Waller from Atlanta Georgia who created this SAS with filament that looks like this and specifically this page caught my attention of how to show something like this with this form an invoice preview this repository is open source and I will link that in the description below but let's take a look at that specific page and this invoice setting page is not a filament resource it's a filament custom page which is actually Livewire component with the form it is an app filament company Pages setting invoice PHP and if we scroll up we see something like this some of the settings are from filament like navigation like slug some other stuff but the important part is probably this one so there is a view blade view that contains that page the page Blade with the form so the form is defined in this class in the mount and then fill form and then a bit later there's General save and the form schema is defined in here so there's a form method and the form contains a few sections so General content and template and then each section contains the familiar stuff with filament text input select and others in this video I will not dive deep and explain every line I want to show you the principle of how to create such a page with the preview of invoice so in one of the sections of that form in the get template section there's quite an impressive work done with grouping everything to make it visually appealing and then at the very end of the form you may find another group with this so there's a view field which basically means inside of the form you have blade View and this is a blade view file so in the invoice blade file you have just the form you need to extend filament panels component like page form and form actions but this is what gets rendered after all that component from filament this one is parsed and as a part of that you have view field with components we can scroll down to resources views components invoice layouts and in fact there are three layouts and if we take a look at that default blade it looks like this some PHP code on top which is a bit ugly in my opinion but I guess there's no other more elegant way to achieve that to have those variables and then inside of the blade you have a typical thing with variables company address logo and stuff like that so nothing really fancy here and this is how it looks if you the project I've installed it locally it's actually really easy to and the repository even even contains the seeds so I didn't have to create anything manually and if you want to edit that inv voice here's how it looks so a few field groups for like main stuff and then the template where you can customize things on the left and this would be automatically refreshed so for example if you change the template the modern template would be refreshed automatically so this is I think a great example of combination of power of a few tools on top of each other so larl on the back end then for that Dynamic Behavior it's a live wire component with Live Wire forms and variables and then everything is wrapped in a filament functionality of admin panel layout user management and stuff like that great great example and I will link that GitHub repository in the description below so you can take a look at the full code and I'll probably pick a few more tricks from that repository because I think there's quite a lot of things for us all to learn about filament and live wire and custom page so expect a few more videos about that open- Source SAS in the future to get all of those of course subscribe to the channel and see you guys in other videos