Coder Social home page Coder Social logo

filament-user-attributes's Introduction

Filament User Attributes

Warning

This package is still in development. It is not yet ready for production use and the API may change at any time.

Tests Coverage Status Fix PHP Code Styling

Filament User Attributes

Let your users specify custom attributes for models in Filament, similar to Custom Fields in WordPress.

Demonstration: showing the creation of a custom user attribute for the 'Locations' resource of this app:

demonstration.mp4

In this demonstration:

  1. A checkbox is added and it's order in the table and form is specified.
  2. The checkbox is displayed in the table and form. Users can now toggle the checkbox and view the value in the table.

Note

This is a third-party package not affiliated with Filament or Laravel.

๐Ÿš€ Getting started

  1. Make sure your project meets these requirements:

    • PHP 8.1 or higher
    • Livewire 3.0.3 or higher
    • Filament 3.0 or higher
    • A database that supports JSON columns, e.g:
      • MySQL 5.7.8 or higher
      • PostgreSQL 9.2 or higher
      • SQLite 3.38 or higher
  2. Install the package via composer:

    composer require luttje/filament-user-attributes
  3. Run the following command to fully install the package:

    php artisan filament-user-attributes:install

    This publishes the migrations to create the two required tables and runs them.

  4. Run the wizard command to help you setup your project code:

    php artisan filament-user-attributes:wizard

    The wizard will help you:

    • Specify which models should have custom user attributes
    • Setup a model that can configure the user attributes for each user (e.g. a user or tenant model)
    • Setup resources that the configuration model can configure custom attributes for

    Finally you need to show the user attributes configuration form somewhere. That way users can actually configure their custom attributes for the resource.

  5. Create a resource and inherit from the UserAttributeConfigResource class:

    // app/Filament/Resources/UserAttributeConfigResource.php
    namespace App\Filament\Resources;
    
    use Luttje\FilamentUserAttributes\Filament\Resources\UserAttributeConfigResource as BaseUserAttributeConfigResource;
    
    class UserAttributeConfigResource extends BaseUserAttributeConfigResource
    {
        protected static ?string $navigationIcon = 'heroicon-o-rectangle-stack';
    }

    Or you can create your own resource from scratch. See the source code for inspiration.

๐ŸŽ‰ That was all, you and your users can now configure custom attributes!

Your users (or tenants) can now configure custom attribute fields:

The configured custom attributes are (optionally) added to the resource form and table:

๐ŸŽ‰ You're now ready to:
๐Ÿ–‡ Let your users configure which attributes should be added to models
๐ŸŽˆ Have the custom attribute fields and columns display in a Livewire component
๐Ÿ“Ž Set and use the user attributes yourself

โœ Customizing

  • To modify translations, publish the translations file:

    php artisan vendor:publish --tag=filament-user-attributes-translations
  • To modify the configuration, publish the configuration file:

    php artisan vendor:publish --tag=filament-user-attributes-config

โœจ Features

  • Add custom attributes to any model
  • Support for UUIDs
  • Support for ULIDs
  • Easily display the attributes in a Filament form
  • Easily display the attributes in a Filament table
  • Sensible validations for input types
  • Allow users to specify order of attributes
    • In the form
    • In the table
  • Allow users to hide attributes
    • In the form
    • In the table
  • Users can specify default values for attributes
  • Users can specify if attributes are required
  • Users can specify if attributes inherit their value from another attribute, even from a related model
    • For Resources
    • For Livewire components (if they implement the static ::getModel() method)
    • For related fields that have a {relation}_id field in the form
    • For related attributes that have no field in this form
  • User interface for managing user attributes
  • Support for Tabs and Sections in the form
  • Wizard command to help you setup your project code

Supported Input types:

  • Text
  • Textarea
  • Number
    • Integer
    • Decimal
    • Specific range
    • Specific decimal places
  • Select
    • Specific options
    • From an existing model property
  • Radio
    • Specific options
    • From an existing model property
  • Tags
    • With suggestions
  • Date
    • Date
    • Time
    • Date and time
  • Checkbox
    • With default
  • Toggle
    • With default
  • File
    • Image
    • PDF
    • Other
    • Preview
  • Color

โค Contributing

Please see CONTRIBUTING for details on how to contribute to this project. You'll also find instructions on how to run the tests.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.