Filament is a robust framework for building beautiful admin panels in Laravel. Customizing Filament allows you to tailor its components to your specific needs, such as creating a custom page. In this blog, we'll walk through how to create a custom "Resume" page in Filament using a practical example.
For a visual guide, check out my YouTube tutorial
We'll cover:
- Setting up the custom page class.
- Defining the form schema.
- Handling form actions.
Let's dive in!
Prerequisites
Ensure you have the following before starting:
- Filament installed and set up in your Laravel project.
- Knowledge of Laravel and Filament basics.
- Enum for Page Types (optional but recommended).
Subscribe to my Newsletter
Get the latest updates right to your inbox. Subscribe now!
We respect your privacy. Unsubscribe at any time.
Example Code Overview
Here's a complete example of the Resume
page we'll create. We'll dissect it step by step to understand each part:
Step-by-Step Breakdown
1. Setting Up the Custom Page Class
Create a new class in the App\Filament\Pages
namespace. This class should extend Filament\Pages\Page
and implement Filament\Forms\Contracts\HasForms
.
Explanation:
- Namespace: Ensure it's under the correct namespace.
- Inheritance: Extends
Page
and implementsHasForms
to integrate form functionalities. - Mount Method: Initializes the user using Filament's authentication.
2. Defining the Form Schema
Define the form's structure in the form
method. Use Filament's form components to build the form schema.
Explanation:
- Repeater: Creates repeating fields for entries like education, experience, etc.
- DatePicker and TextInput: Define various input fields.
- itemLabel: Generates labels for each repeater item.
3. Handling Form Actions
Define form actions for handling form submissions. In this example, we have a "Save" action.
4. Saving the Form Data
Implement the save
method to handle data saving. This method updates or creates the user’s resume data.
Explanation:
- Form State: Retrieves the form's current state.
- Update or Create: Updates existing resume data or creates a new entry.
- Notification: Sends a success notification upon saving.
5. Configuring Navigation
Configure the page's navigation properties such as icon, title, and group.
Explanation:
- Icon: Sets the navigation icon.
- Title: Sets the page title.
- Group: Groups the page under CMS in the navigation.
- Sort:
Defines the sort order.
- View: Specifies the Blade view for rendering.
Conclusion
Creating a custom page in Filament PHP involves defining a new page class, building a form schema, and handling form actions. This example provides a solid foundation for building more complex custom pages in your Filament admin panel.
Feel free to experiment with different form components and actions to tailor your pages to your specific needs. Happy coding!
Refrence : Custom pages - Panel Builder - Filament
If you have any questions or need further assistance, leave a comment below or reach out through my YouTube channel.
Crafting digital dreams into reality, one line of code at a time. Embracing the chaos of creation to engineer a brighter tomorrow.