⌘K
Noting Found

View all related articles

Creating Custom Links in Filament: A Handy Trick

Tips & Tricks 1 min read

Table of Content

    Introduction

    Filament is a powerful Laravel package for building admin interfaces, but what happens when you need to create custom links to record URLs in your Filament tables? By default, Filament doesn't provide this feature (You can create a custom field, tho). However, with a bit of creativity and some Laravel magic, you can implement a handy trick to solve this problem.

    The Problem

    Picture this: you're working on a Filament-based project, and you want to provide users with a direct link to a specific record's URL. Maybe it's an external resource related to the record, or perhaps it's a page with additional details. Unfortunately, Filament doesn't offer a built-in solution for adding custom links to your records.

    The Solution - goTo Method

    Fear not! We've come up with a neat solution: the goTo method. This method allows you to create custom links with ease, giving you the flexibility to direct users to external URLs, additional information, or any destination of your choice.

    Here's what the goTo method looks like:

    1protected static function goTo(string $link, string $title, ?string $tooltip)
    2{
    3 return new HtmlString(Blade::render('filament::components.link', [
    4 'color' => 'primary',
    5 'tooltip' => $tooltip,
    6 'href' => $link,
    7 'target' => '_blank',
    8 'slot' => $title,
    9 'icon' => 'heroicon-o-arrow-top-right-on-square',
    10 ]));
    11}

    Let's break down what each parameter does:

    • color: Sets the color of the link (e.g., 'primary').
    • tooltip: Adds a tooltip to provide extra information when users hover over the link.
    • href: Specifies the URL that the link points to.
    • target: Determines how the link opens (e.g., _blank for opening in a new tab).
    • slot: Sets the text or content displayed in the link.
    • icon: Adds an icon to the link for visual appeal and clarity.

    Implementation

    Now, let's see how you can implement the goTo method in your Filament project:

    Create the Method: Add the goTo method to your Filament table class, or make a trait to use it in multiple places.

    Use it in Your Table: Inside your Filament table, you can now use the method to create custom links to record URLs. For example:

    1public static function table(Table $table): Table
    2{
    3 return $table
    4 ->columns([
    5 // ...
    6 Tables\Columns\TextColumn::make('external_resource')
    7 ->formatStateUsing(
    8 fn (string $state) => self::goTo($state, 'See External Resource'),
    9 )
    10 ->searchable(),
    11 // ...
    12 ])
    13}

    Customize as Needed: Feel free to customize the link's appearance, behavior, and destination to match your project requirements.

    Real-World Use Cases

    The goTo method isn't just a theoretical concept; it's a practical solution that can enhance your Filament-based projects. Here are a few real-world scenarios where this trick comes in handy:

    External Resources: Provide direct links to external resources or websites relevant to the record.

    Additional Details: Link to a dedicated page with in-depth information about the record.

    Workflow Efficiency: Streamline user workflows by giving them quick access to related content.

    Conclusion

    Creating custom links in Filament doesn't have to be a daunting task. With the method, you have a powerful tool at your disposal to enhance the user experience in your admin interfaces. Give it a try in your Filament projects and see how it can make a difference.

    Remember, Filament is all about flexibility and customization, and this method is just one example of how you can tailor your admin panels to meet your specific project needs. Explore the possibilities, experiment, and unlock the full potential of Filament!

    Related Tags

    About the Author

    Oussama's Profile Picture
    Oussama
    Full Stack Web Developer | Technical Writer

    Oussama is an experienced full-stack web developer with a strong focus on Laravel. He's passionate about crafting web applications with Filament and the TALL Stack. With 8+ years of experience, and he's a dedicated open-source contributor.

    Comments

    Join our newsletter

    Subscribe to Our Newsletter and never miss our offers, latest news, Articles, etc.

    We care about the protection of your data. Read our Privacy Policy.