mirror of
https://github.com/filamentphp/filament.git
synced 2026-09-24 15:42:09 +08:00
Merge pull request #7613 from duyphuongn/improve-documentation
Improve documentations of all packages
This commit is contained in:
@@ -15,7 +15,7 @@ Filament is a collection of full-stack components for accelerated Laravel develo
|
||||
|
||||
### Panel Builder • [Documentation](https://filamentphp.com/docs/panels) • [Demo](https://demo.filamentphp.com)
|
||||
|
||||
The panel builder is the foundation of Filament. Combining all the packages together, it lets you quickly build Laravel admin panels, customer-facing apps, Software-as-a-Service platforms, and more. Filament makes custom CRUD-driven interfaces feel like a breeze to build and deploy.
|
||||
The Panel Builder is the foundation of Filament. Combining all the packages together, it lets you quickly build Laravel admin panels, customer-facing apps, Software-as-a-Service platforms, and more. Filament makes custom CRUD-driven interfaces feel like a breeze to build and deploy.
|
||||
|
||||
```bash
|
||||
composer require filament/filament
|
||||
@@ -23,7 +23,7 @@ composer require filament/filament
|
||||
|
||||
### Form Builder • [Documentation](https://filamentphp.com/docs/forms)
|
||||
|
||||
Rendering interactive forms in a Livewire component has never been easier than with our form builder. Easily build stunning forms with over 25 components out of the box. It's also fully extensible, so you can add your own custom fields and actions. As well as the panel builder, it is seamlessly integrated into action modals, and is used by the table builder to filter rows.
|
||||
Rendering interactive forms in a Livewire component has never been easier than with our Form Builder. Easily build stunning forms with over 25 components out of the box. It's also fully extensible, so you can add your own custom fields and actions. As well as the Panel Builder, it is seamlessly integrated into action modals, and is used by the Table Builder to filter rows.
|
||||
|
||||
```bash
|
||||
composer require filament/forms
|
||||
@@ -47,7 +47,7 @@ composer require filament/notifications
|
||||
|
||||
### Actions • [Documentation](https://filamentphp.com/docs/actions)
|
||||
|
||||
Actions are buttons that can open modals. They are a very versatile component of many interfaces, avoiding the need for the user to navigate away from the page to complete a task. From confirming a destructive action, to editing an Eloquent record, to importing data from an uploaded CSV file, action modals are a great way to keep the user in the flow of the application. Modals are built upon our form builder, so they are built upon the same principles of flexibility and extensibility. Modals can be added to any Livewire component with just a few lines of code, and no HTML or JavaScript.
|
||||
Actions are buttons that can open modals. They are a very versatile component of many interfaces, avoiding the need for the user to navigate away from the page to complete a task. From confirming a destructive action, to editing an Eloquent record, to importing data from an uploaded CSV file, action modals are a great way to keep the user in the flow of the application. Modals are built upon our Form Builder, so they are built upon the same principles of flexibility and extensibility. Modals can be added to any Livewire component with just a few lines of code, and no HTML or JavaScript.
|
||||
|
||||
```bash
|
||||
composer require filament/actions
|
||||
@@ -55,7 +55,7 @@ composer require filament/actions
|
||||
|
||||
### Infolists • [Documentation](https://filamentphp.com/docs/infolists)
|
||||
|
||||
Infolists are a great way to display read-only information to users about a particular record. They have a fully flexible layout, and can be extended with custom components. They are also seamlessly integrated with the panel builder, so you can easily add them to your panel resources.
|
||||
Infolists are a great way to display read-only information to users about a particular record. They have a fully flexible layout, and can be extended with custom components. They are also seamlessly integrated with the Panel Builder, so you can easily add them to your panel resources.
|
||||
|
||||
```bash
|
||||
composer require filament/infolists
|
||||
@@ -63,7 +63,7 @@ composer require filament/infolists
|
||||
|
||||
### Widgets • [Documentation](https://filamentphp.com/docs/widgets)
|
||||
|
||||
Filament's collection of widgets are built upon Livewire's core principles of real-time reactivity with the server. Combining many widgets lets you quickly build a dashboard for your application, complete with charts and stats, which are able to update live without refreshing the page. They are also seamlessly integrated with any page in the panel builder.
|
||||
Filament's collection of widgets are built upon Livewire's core principles of real-time reactivity with the server. Combining many widgets lets you quickly build a dashboard for your application, complete with charts and stats, which are able to update live without refreshing the page. They are also seamlessly integrated with any page in the Panel Builder.
|
||||
|
||||
```bash
|
||||
composer require filament/widgets
|
||||
|
||||
@@ -46,7 +46,7 @@ The entire look of the action's trigger button and the modal is customizable usi
|
||||
|
||||
## Types of action
|
||||
|
||||
The concept of "actions" is used throughout Filament in many contexts. Some contexts don't support opening modals from actions - they can only open a URL, call a public Livewire method, or dispatch a Livewire event. Additionally, different contexts use different action PHP classes, since they provide the developer context-aware data that is appropriate to that use-case.
|
||||
The concept of "actions" is used throughout Filament in many contexts. Some contexts don't support opening modals from actions - they can only open a URL, call a public Livewire method, or dispatch a Livewire event. Additionally, different contexts use different action PHP classes since they provide the developer context-aware data that is appropriate to that use-case.
|
||||
|
||||
### Custom Livewire component actions
|
||||
|
||||
@@ -96,7 +96,7 @@ If you're looking to add an action to a notification in your app, [visit this pa
|
||||
|
||||
### Global search result actions
|
||||
|
||||
In the panel builder, there is a [global search](../panels/resources/global-search) field that allows you to search all resources in your app from one place. When you click on a search result, it leads you to the resource page for that record. However, you may add additional actions below each global search result. For example, you may want both "Edit" and "View" options for a client search result, so the user can quickly edit their profile as well as view it in read-only mode.
|
||||
In the Panel Builder, there is a [global search](../panels/resources/global-search) field that allows you to search all resources in your app from one place. When you click on a search result, it leads you to the resource page for that record. However, you may add additional actions below each global search result. For example, you may want both "Edit" and "View" options for a client search result, so the user can quickly edit their profile as well as view it in read-only mode.
|
||||
|
||||
These actions use the `Filament\GlobalSearch\Actions\Action` class. They aren't able to open modals, but they can open a URL or dispatch a Livewire event.
|
||||
|
||||
|
||||
@@ -73,7 +73,7 @@ Action::make('updateAuthor')
|
||||
|
||||
### Using a wizard as a modal form
|
||||
|
||||
You may create a [multi-step form wizard](../forms/layout/wizard) inside a modal. Instead of using a `form()`, define a `steps()` array and pass your `Step` objects:
|
||||
You may create a [multistep form wizard](../forms/layout/wizard) inside a modal. Instead of using a `form()`, define a `steps()` array and pass your `Step` objects:
|
||||
|
||||
```php
|
||||
use Filament\Forms\Components\MarkdownEditor;
|
||||
@@ -476,7 +476,7 @@ Action::make('first')
|
||||
])
|
||||
```
|
||||
|
||||
In this example, if the `fourth` action is run, the `second` action is cancelled, but so is the `third` action since it is a child of `second`. The `first` action is not cancelled, however, since it is the parent of `second`. The `first` action's modal will remain open.
|
||||
In this example, if the `fourth` action is run, the `second` action is canceled, but so is the `third` action since it is a child of `second`. The `first` action is not canceled, however, since it is the parent of `second`. The `first` action's modal will remain open.
|
||||
|
||||
## Closing the modal by clicking away
|
||||
|
||||
|
||||
@@ -21,7 +21,7 @@ This page is about customizing the look of the group's trigger button and dropdo
|
||||
|
||||
## Customizing the group trigger style
|
||||
|
||||
The button which opens the dropdown may be customized in the same way as a normal action. [All of the methods available for trigger buttons](trigger-button) may be used to customize the group trigger button:
|
||||
The button which opens the dropdown may be customized in the same way as a normal action. [All the methods available for trigger buttons](trigger-button) may be used to customize the group trigger button:
|
||||
|
||||
```php
|
||||
use Filament\Support\Enums\ActionSize;
|
||||
|
||||
@@ -197,4 +197,4 @@ public function publishAction(): Action
|
||||
|
||||
Now, when the first action is submitted, the second action will open in its place. The [arguments](#passing-action-arguments) that were originally passed to the first action get passed to the second action, so you can use them to persist data between requests.
|
||||
|
||||
If the first action is cancelled, the second one is not opened. If the second action is cancelled, the first one has already run and cannot be cancelled.
|
||||
If the first action is canceled, the second one is not opened. If the second action is canceled, the first one has already run and cannot be cancelled.
|
||||
|
||||
@@ -248,7 +248,7 @@ it('when enabled the send button has correct icon', function () {
|
||||
});
|
||||
```
|
||||
|
||||
To ensure an action's button is displaying the right color, you can use `assertActionHasColor()` or `assertActionDoesNotHaveColor()`:
|
||||
To ensure that an action's button is displaying the right color, you can use `assertActionHasColor()` or `assertActionDoesNotHaveColor()`:
|
||||
|
||||
```php
|
||||
use function Pest\Livewire\livewire;
|
||||
|
||||
@@ -22,7 +22,7 @@ Since Livewire v3 is still in beta, set the `minimum-stability` in your `compose
|
||||
"minimum-stability": "dev",
|
||||
```
|
||||
|
||||
The easiest way to upgrade your app is to run the automated upgrade script. This script will automatically upgrade your application to the latest version of Filament and make changes to your code which handle most breaking changes.
|
||||
The easiest way to upgrade your app is to run the automated upgrade script. This script will automatically upgrade your application to the latest version of Filament and make changes to your code, which handles most breaking changes.
|
||||
|
||||
```bash
|
||||
composer require filament/upgrade:"^3.0-stable" -W --dev
|
||||
@@ -34,7 +34,7 @@ Make sure to carefully follow the instructions, and review the changes made by t
|
||||
|
||||
Finally, you must run `php artisan filament:install` to finalize the Filament v3 installation. This command must be run for all new Filament projects.
|
||||
|
||||
You can now `composer remove filament/upgrade` as you don't need it any more.
|
||||
You can now `composer remove filament/upgrade` as you don't need it anymore.
|
||||
|
||||
> Some plugins you're using may not be available in v3 just yet. You could temporarily remove them from your `composer.json` file until they've been upgraded, replace them with a similar plugins that are v3-compatible, wait for the plugins to be upgraded before upgrading your app, or even write PRs to help the authors upgrade them.
|
||||
|
||||
@@ -46,7 +46,7 @@ Since Livewire v3 is still in beta, set the `minimum-stability` in your `compose
|
||||
"minimum-stability": "dev",
|
||||
```
|
||||
|
||||
### Low impact changes
|
||||
### Low-impact changes
|
||||
|
||||
#### Action execution with forms
|
||||
|
||||
|
||||
@@ -15,7 +15,7 @@ All Filament forms have a "schema". This is an array, which contains [fields](fi
|
||||
|
||||
Fields are the inputs that your user will fill their data into. For example, HTML's `<input>` or `<select>` elements. Each field has its own PHP class. For example, the [`TextInput`](fields/text-input) class is used to render a text input field, and the [`Select`](fields/select) class is used to render a select field. You can see a full [list of available fields here](fields/getting-started#available-fields).
|
||||
|
||||
Layout components are used to group fields together, and to control how they are displayed. For example, you can use a [`Grid`](layout/grid#grid-component) component to display multiple fields side-by-side, or a [`Wizard`](layout/wizard) to separate fields into a multistep form. You can deeply nest layout components within each other, to create very complex responsive UIs. You can see a full [list of available layout components here](layout/getting-started#available-layout-components).
|
||||
Layout components are used to group fields together, and to control how they are displayed. For example, you can use a [`Grid`](layout/grid#grid-component) component to display multiple fields side-by-side, or a [`Wizard`](layout/wizard) to separate fields into a multistep form. You can deeply nest layout components within each other to create very complex responsive UIs. You can see a full [list of available layout components here](layout/getting-started#available-layout-components).
|
||||
|
||||
### Adding fields to a form schema
|
||||
|
||||
@@ -159,7 +159,7 @@ In this example, some fields are `required()`, and some have a `maxLength()`. We
|
||||
|
||||
Since all Filament forms are built on top of Livewire, form schemas are completely dynamic. There are so many possibilities, but here are a couple of examples of how you can use this to your advantage:
|
||||
|
||||
Fields can hide or show based on other field's values. In our form, we can hide the `published_at` timestamp field until the `status` field is set to `published`. This is done by passing a closure to the `hidden()` method, which allows you to dynamically hide or show a field while the form is being used. Closures have access to many useful arguments like `$get`, and you can find a [full list here](advanced#form-component-utility-injection). The field that you depend on (the `status` in this case) needs to be set to `live()`, which tells the form to reload the schema each time it gets changed.
|
||||
Fields can hide or show based on another field's values. In our form, we can hide the `published_at` timestamp field until the `status` field is set to `published`. This is done by passing a closure to the `hidden()` method, which allows you to dynamically hide or show a field while the form is being used. Closures have access to many useful arguments like `$get`, and you can find a [full list here](advanced#form-component-utility-injection). The field that you depend on (the `status` in this case) needs to be set to `live()`, which tells the form to reload the schema each time it gets changed.
|
||||
|
||||
```php
|
||||
use Filament\Forms\Components\DateTimePicker;
|
||||
@@ -182,7 +182,7 @@ use Filament\Forms\Get;
|
||||
|
||||
It's not just `hidden()` - all Filament form methods support closures like this. You can use them to change the label, placeholder, or even the options of a field, based on another. You can even use them to add new fields to the form, or remove them. This is a powerful tool that allows you to create complex forms with minimal effort.
|
||||
|
||||
Fields can also write data to other fields. For example, we can set the title to automatically generate a slug when the title is changed. This is done by passing a closure to the `afterStateUpdated()` method, which gets run each time the title is changed. This closure has access to the title (`$state`) and a function (`$set`) to set the slug field's state. You can find a [full list of closure arguments here](advanced#form-component-utility-injection). The field that you depend on (the `title` in this case) needs to be set to `live()`, which tells the form to reload and set the slug each time it gets changed.
|
||||
Fields can also write data to other fields. For example, we can set the title to automatically generate a slug when the title is changed. This is done by passing a closure to the `afterStateUpdated()` method, which gets run each time the title is changed. This closure has access to the title (`$state`) and a function (`$set`) to set the slug field's state. You can find a [full list of closure arguments here](advanced#form-component-utility-injection). The field that you depend on (the `title` in this case) needs to be set to `live()`, which tells the form to reload and set the slug each time it gets changed.
|
||||
|
||||
```php
|
||||
use Filament\Forms\Components\TextInput;
|
||||
|
||||
@@ -162,7 +162,7 @@ Select::make('technologies')
|
||||
|
||||
### Searching relationship options across multiple columns
|
||||
|
||||
By default, if the select is also searchable, Filament will return search results for the relationship based on title column of the relationship. If you'd like to search across multiple columns, you can pass an array of columns to the `searchable()` method:
|
||||
By default, if the select is also searchable, Filament will return search results for the relationship based on the title column of the relationship. If you'd like to search across multiple columns, you can pass an array of columns to the `searchable()` method:
|
||||
|
||||
```php
|
||||
use Filament\Forms\Components\Select;
|
||||
@@ -404,7 +404,7 @@ Select::make('status')
|
||||
->disableOptionWhen(fn (string $value): bool => $value === 'published')
|
||||
```
|
||||
|
||||
If you want to retrieve the options that have not been disabled, e.g. for validation purposes, you can do so using `getEnabledOptions()`:
|
||||
If you want to retrieve the options that have not been disabled, e.g., for validation purposes, you can do so using `getEnabledOptions()`:
|
||||
|
||||
```php
|
||||
use Filament\Forms\Components\Select;
|
||||
|
||||
@@ -60,7 +60,7 @@ CheckboxList::make('technologies')
|
||||
|
||||
<AutoScreenshot name="forms/fields/checkbox-list/option-descriptions" alt="Checkbox list with option descriptions" version="3.x" />
|
||||
|
||||
Be sure to use the same `key` in the descriptions array as the `key` in the options array so the right description matches the right option.
|
||||
Be sure to use the same `key` in the descriptions array as the `key` in the option array so the right description matches the right option.
|
||||
|
||||
## Splitting options into columns
|
||||
|
||||
@@ -218,7 +218,7 @@ CheckboxList::make('technologies')
|
||||
|
||||
## Tweaking the search debounce
|
||||
|
||||
By default, Filament will wait 1000 milliseconds (1 second) before searching for options when the user types in a searchable checkbox list. It will also wait 1000 milliseconds between searches, if the user is continuously typing into the search input. You can change this using the `searchDebounce()` method:
|
||||
By default, Filament will wait 1000 milliseconds (1 second) before searching for options when the user types in a searchable checkbox list. It will also wait 1000 milliseconds between searches if the user is continuously typing into the search input. You can change this using the `searchDebounce()` method:
|
||||
|
||||
```php
|
||||
use Filament\Forms\Components\CheckboxList;
|
||||
|
||||
@@ -42,7 +42,7 @@ Radio::make('status')
|
||||
|
||||
<AutoScreenshot name="forms/fields/radio/option-descriptions" alt="Radio with option descriptions" version="3.x" />
|
||||
|
||||
Be sure to use the same `key` in the descriptions array as the `key` in the options array so the right description matches the right option.
|
||||
Be sure to use the same `key` in the descriptions array as the `key` in the option array so the right description matches the right option.
|
||||
|
||||
## Boolean options
|
||||
|
||||
@@ -87,7 +87,7 @@ Radio::make('status')
|
||||
|
||||
<AutoScreenshot name="forms/fields/radio/disabled-option" alt="Radio with disabled option" version="3.x" />
|
||||
|
||||
If you want to retrieve the options that have not been disabled, e.g. for validation purposes, you can do so using `getEnabledOptions()`:
|
||||
If you want to retrieve the options that have not been disabled, e.g., for validation purposes, you can do so using `getEnabledOptions()`:
|
||||
|
||||
```php
|
||||
use Filament\Forms\Components\Radio;
|
||||
|
||||
@@ -207,7 +207,7 @@ As well as all rules listed on the [validation](../validation) page, there are a
|
||||
|
||||
### Max date / min date validation
|
||||
|
||||
You may restrict the minimum and maximum date that can be selected with the picker. The `minDate()` and `maxDate()` methods accept a `DateTime` instance (e.g. Carbon), or a string:
|
||||
You may restrict the minimum and maximum date that can be selected with the picker. The `minDate()` and `maxDate()` methods accept a `DateTime` instance (e.g., Carbon), or a string:
|
||||
|
||||
```php
|
||||
use Filament\Forms\Components\DatePicker;
|
||||
|
||||
@@ -346,7 +346,7 @@ FileUpload::make('image')
|
||||
|
||||
### File size validation
|
||||
|
||||
You may also restrict the size of uploaded files, in kilobytes:
|
||||
You may also restrict the size of uploaded files in kilobytes:
|
||||
|
||||
```php
|
||||
use Filament\Forms\Components\FileUpload;
|
||||
|
||||
@@ -409,7 +409,7 @@ All form components are able to [use `$get()` and `$set()`](../advanced) to acce
|
||||
|
||||
This is because `$get()` and `$set()`, by default, are scoped to the current repeater item. This means that you are able to interact with another field inside that repeater item easily without knowing which repeater item the current form component belongs to.
|
||||
|
||||
The consequence of this, is that you may be confused when you are unable to interact with a field outside the repeater. We use `../` syntax to solve this problem - `$get('../../parent_field_name')`.
|
||||
The consequence of this is that you may be confused when you are unable to interact with a field outside the repeater. We use `../` syntax to solve this problem - `$get('../../parent_field_name')`.
|
||||
|
||||
Consider your form has this data structure:
|
||||
|
||||
|
||||
@@ -63,7 +63,7 @@ TagsInput::make('tags')
|
||||
|
||||
## Defining split keys
|
||||
|
||||
Split keys allow you to map specific buttons on your user's keyboard to create a new tag. By default, when the user presses "Enter" a new tag is created in the input. You may also define other keys to create new tags, such as "Tab" or " ". To do this, pass an array of keys to the `splitKeys()` method:
|
||||
Split keys allow you to map specific buttons on your user's keyboard to create a new tag. By default, when the user presses "Enter", a new tag is created in the input. You may also define other keys to create new tags, such as "Tab" or " ". To do this, pass an array of keys to the `splitKeys()` method:
|
||||
|
||||
```php
|
||||
use Filament\Forms\Components\TagsInput;
|
||||
@@ -76,7 +76,7 @@ You can [read more about possible options for keys](https://developer.mozilla.or
|
||||
|
||||
## Adding a prefix and suffix to individual tags
|
||||
|
||||
You can add prefix and suffix to tags without modifying the real state of the field. This can be useful if you need to show presentational formatting to users, without saving it. This is done with the `tagPrefix()` or `tagSuffix()` method:
|
||||
You can add prefix and suffix to tags without modifying the real state of the field. This can be useful if you need to show presentational formatting to users without saving it. This is done with the `tagPrefix()` or `tagSuffix()` method:
|
||||
|
||||
```php
|
||||
use Filament\Forms\Components\TagsInput;
|
||||
|
||||
@@ -17,7 +17,7 @@ Breakpoints (`sm`, `md`, `lg`, `xl`, `2xl`) are defined by Tailwind, and can be
|
||||
|
||||
## Controlling how many columns a component should span
|
||||
|
||||
In addition to specifying how many columns a layout component should have, you may also specify how many columns a component should fill within the parent grid, using the `columnSpan()` method. This method accepts an integer, or an array of breakpoints and column spans:
|
||||
In addition to specifying how many columns a layout component should have, you may also specify how many columns a component should fill within the parent grid, using the `columnSpan()` method. This method accepts an integer or an array of breakpoints and column spans:
|
||||
|
||||
- `columnSpan(2)` will make the component fill up to 2 columns on all breakpoints.
|
||||
- `columnSpan(['md' => 2, 'xl' => 4])` will make the component fill up to 2 columns on medium devices, and up to 4 columns on extra large devices. The default breakpoint for smaller devices uses 1 column, unless you use a `default` array key.
|
||||
@@ -54,7 +54,7 @@ Section::make()
|
||||
|
||||
## Grid component
|
||||
|
||||
All layout components support the `columns()` method, but you also have access to an additional `Grid` component. If you feel that your form schema would benefit from an explicit grid syntax with no extra styling, it may be useful to you. Instead of using the `columns()` method, you can pass your columns configuration directly to `Grid::make()`:
|
||||
All layout components support the `columns()` method, but you also have access to an additional `Grid` component. If you feel that your form schema would benefit from an explicit grid syntax with no extra styling, it may be useful to you. Instead of using the `columns()` method, you can pass your column configuration directly to `Grid::make()`:
|
||||
|
||||
```php
|
||||
use Filament\Forms\Components\Grid;
|
||||
@@ -99,4 +99,4 @@ Section::make()
|
||||
])
|
||||
```
|
||||
|
||||
In this example, the grid has 3 columns on small devices, 6 columns on extra large devices, and 8 columns on extra extra large devices. The text input will start at column 2 on small devices, column 3 on extra large devices, and column 4 on extra extra large devices. This is essentially producing a layout whereby the text input always starts half way through the grid, regardless of how many columns the grid has.
|
||||
In this example, the grid has 3 columns on small devices, 6 columns on extra large devices, and 8 columns on extra extra large devices. The text input will start at column 2 on small devices, column 3 on extra large devices, and column 4 on extra extra large devices. This is essentially producing a layout whereby the text input always starts halfway through the grid, regardless of how many columns the grid has.
|
||||
|
||||
@@ -62,7 +62,7 @@ Field::make('name')->alpha()
|
||||
|
||||
### Alpha Dash
|
||||
|
||||
The field may have alpha-numeric characters, as well as dashes and underscores. [See the Laravel documentation.](https://laravel.com/docs/validation#rule-alpha-dash)
|
||||
The field may have alphanumeric characters, as well as dashes and underscores. [See the Laravel documentation.](https://laravel.com/docs/validation#rule-alpha-dash)
|
||||
|
||||
```php
|
||||
Field::make('name')->alphaDash()
|
||||
@@ -70,7 +70,7 @@ Field::make('name')->alphaDash()
|
||||
|
||||
### Alpha Numeric
|
||||
|
||||
The field must be entirely alpha-numeric characters. [See the Laravel documentation.](https://laravel.com/docs/validation#rule-alpha-num)
|
||||
The field must be entirely alphanumeric characters. [See the Laravel documentation.](https://laravel.com/docs/validation#rule-alpha-num)
|
||||
|
||||
```php
|
||||
Field::make('name')->alphaNum()
|
||||
@@ -165,7 +165,7 @@ Field::make('status')->enum(MyStatus::class)
|
||||
|
||||
### Exists
|
||||
|
||||
The field value must exist in the database. [See the Laravel documentation.](https://laravel.com/docs/validation#rule-exists).
|
||||
The field value must exist in the database. [See the Laravel documentation.](https://laravel.com/docs/validation#rule-exists)
|
||||
|
||||
```php
|
||||
Field::make('invitation')->exists()
|
||||
@@ -343,7 +343,7 @@ Field::make('name')->requiredWith('field,another_field')
|
||||
|
||||
### Required With All
|
||||
|
||||
The field value must not be empty _only if_ all of the other specified fields are not empty. [See the Laravel documentation.](https://laravel.com/docs/validation#rule-required-with-all)
|
||||
The field value must not be empty _only if_ all the other specified fields are not empty. [See the Laravel documentation.](https://laravel.com/docs/validation#rule-required-with-all)
|
||||
|
||||
```php
|
||||
Field::make('name')->requiredWithAll('field,another_field')
|
||||
@@ -359,7 +359,7 @@ Field::make('name')->requiredWithout('field,another_field')
|
||||
|
||||
### Required Without All
|
||||
|
||||
The field value must not be empty _only when_ all of the other specified fields are empty. [See the Laravel documentation.](https://laravel.com/docs/validation#rule-required-without-all)
|
||||
The field value must not be empty _only when_ all the other specified fields are empty. [See the Laravel documentation.](https://laravel.com/docs/validation#rule-required-without-all)
|
||||
|
||||
```php
|
||||
Field::make('name')->requiredWithoutAll('field,another_field')
|
||||
@@ -424,7 +424,7 @@ Sometimes, you may wish to ignore a given model during unique validation. For ex
|
||||
Field::make('email')->unique(ignorable: $ignoredUser)
|
||||
```
|
||||
|
||||
If you're using the [panel builder](../panels), you can easily ignore the current record by using `ignoreRecord` instead:
|
||||
If you're using the [Panel Builder](../panels), you can easily ignore the current record by using `ignoreRecord` instead:
|
||||
|
||||
```php
|
||||
Field::make('email')->unique(ignoreRecord: true)
|
||||
@@ -508,7 +508,7 @@ protected function onValidationError(ValidationException $exception): void
|
||||
}
|
||||
```
|
||||
|
||||
Alternatively, if you are using the panel builder and want this behaviour on all the pages, add this inside the `boot()` method of your `AppServiceProvider`:
|
||||
Alternatively, if you are using the Panel Builder and want this behavior on all the pages, add this inside the `boot()` method of your `AppServiceProvider`:
|
||||
|
||||
```php
|
||||
use Filament\Notifications\Notification;
|
||||
|
||||
@@ -5,7 +5,7 @@ import AutoScreenshot from "@components/AutoScreenshot.astro"
|
||||
|
||||
## Overview
|
||||
|
||||
Filament's forms can use [actions](../actions). They are buttons that can be added to any form component. For instance, you may want an action to call an API endpoint to generate content with AI, or to create a new option for a select dropdown. Also, you can [render anonymous sets of actions](#adding-anonymous-actions-to-a-form-without-attaching-them-to-a-component) on their own, that are not attached to a particular form component.
|
||||
Filament's forms can use [Actions](../actions). They are buttons that can be added to any form component. For instance, you may want an action to call an API endpoint to generate content with AI, or to create a new option for a select dropdown. Also, you can [render anonymous sets of actions](#adding-anonymous-actions-to-a-form-without-attaching-them-to-a-component) on their own which are not attached to a particular form component.
|
||||
|
||||
## Defining a form component action
|
||||
|
||||
|
||||
@@ -4,13 +4,13 @@ title: Advanced forms
|
||||
|
||||
## Overview
|
||||
|
||||
Filament forms are designed to be flexible and customizable. Many existing form builders allow users to define a form schema, but don't provide a great interface for defining inter-field interactions, or custom logic. Since all Filament forms are built on top of [Livewire](https://livewire.laravel.com), the form can adapt dynamically to user input, even after it has been initially rendered. Developers can use [parameter injection](#form-component-utility-injection) to access many utilities in real time and build dynamic forms based on user input. The [lifecycle](#field-lifecycle) of fields is open to extension using hook functions to define custom functionality for each field. This allows developers to build complex forms with ease.
|
||||
Filament Form Builder are designed to be flexible and customizable. Many existing form builders allow users to define a form schema, but don't provide a great interface for defining inter-field interactions, or custom logic. Since all Filament forms are built on top of [Livewire](https://livewire.laravel.com), the form can adapt dynamically to user input, even after it has been initially rendered. Developers can use [parameter injection](#form-component-utility-injection) to access many utilities in real time and build dynamic forms based on user input. The [lifecycle](#field-lifecycle) of fields is open to extension using hook functions to define custom functionality for each field. This allows developers to build complex forms with ease.
|
||||
|
||||
## The basics of reactivity
|
||||
|
||||
[Livewire](https://livewire.laravel.com) is a tool that allows Blade-rendered HTML to dynamically re-render without requiring a full page reload. Filament forms are built on top of Livewire, so they are able to re-render dynamically, allowing their layout to adapt after they are initially rendered.
|
||||
|
||||
By default, when a user uses a field, the form will not re-render. Since rendering requires a round-trip to the server, this is a performance optimization. However, if you wish to re-render the form after a field is interacted with by the user, you can use the `live()` method:
|
||||
By default, when a user uses a field, the form will not re-render. Since rendering requires a round-trip to the server, this is a performance optimization. However, if you wish to re-render the form after the user has interacted with a field, you can use the `live()` method:
|
||||
|
||||
```php
|
||||
use Filament\Forms\Components\Select;
|
||||
@@ -168,7 +168,7 @@ function (string $operation) {
|
||||
}
|
||||
```
|
||||
|
||||
> Outside of the panel, you can set a form's operation by using the `operation()` method on the form definition.
|
||||
> Outside the panel, you can set a form's operation by using the `operation()` method on the form definition.
|
||||
|
||||
### Injecting multiple utilities
|
||||
|
||||
@@ -203,7 +203,7 @@ Each field in a form has a lifecycle, which is the process it goes through when
|
||||
|
||||
### Field hydration
|
||||
|
||||
Hydration is the process which fill fields with data. It runs when you call the form's `fill()` method. You may customize what happens after a field is hydrated using the `afterStateHydrated()` method.
|
||||
Hydration is the process that fills fields with data. It runs when you call the form's `fill()` method. You may customize what happens after a field is hydrated using the `afterStateHydrated()` method.
|
||||
|
||||
In this example, the `name` field will always be hydrated with the correctly capitalized name:
|
||||
|
||||
@@ -247,7 +247,7 @@ For an example of how to use this method, learn how to [automatically generate a
|
||||
|
||||
### Field dehydration
|
||||
|
||||
Dehydration is the process which gets data from the fields in your forms, and transforms it. It runs when you call the form's `getState()` method.
|
||||
Dehydration is the process that gets data from the fields in your forms, and transforms it. It runs when you call the form's `getState()` method.
|
||||
|
||||
You may customize how the state is transformed when it is dehydrated using the `dehydrateStateUsing()` function. In this example, the `name` field will always be dehydrated with the correctly capitalized name:
|
||||
|
||||
|
||||
@@ -100,7 +100,7 @@ Finally, in your Livewire component's view, render the form:
|
||||
</div>
|
||||
```
|
||||
|
||||
> `<x-filament-actions::modals />` is used to render form component [action modals](actions). The code can be put anywhere outside of the `<form>` element, as long as it's within the Livewire component.
|
||||
> `<x-filament-actions::modals />` is used to render form component [action modals](actions). The code can be put anywhere outside the `<form>` element, as long as it's within the Livewire component.
|
||||
|
||||
Visit your Livewire component in the browser, and you should see the form components from `schema()`:
|
||||
|
||||
@@ -138,7 +138,7 @@ Giving the `$form` access to a model is useful for a few reasons:
|
||||
- The form can load and save the model's relationship data automatically. For example, you have an Edit Post form, with a [Repeater](fields/repeater#integrating-with-an-eloquent-relationship) which manages comments associated with that post. Filament will automatically load the comments for that post when you call `$this->form->fill([...])`, and save them back to the relationship when you call `$this->form->getState()`.
|
||||
- Validation rules like `exists()` and `unique()` can automatically retrieve the database table name from the model.
|
||||
|
||||
It is advised to always pass the model to the form when there is one. As explained, it unlocks many new powers of the Filament form builder.
|
||||
It is advised to always pass the model to the form when there is one. As explained, it unlocks many new powers of the Filament Form Builder.
|
||||
|
||||
To pass the model to the form, use the `$form->model()` method:
|
||||
|
||||
@@ -271,7 +271,7 @@ public function createCommentForm(Form $form): Form
|
||||
|
||||
Now, each form is addressable by its name instead of `form`. For example, to fill the post form, you can use `$this->editPostForm->fill([...])`, or to get the data from the comment form you can use `$this->createCommentForm->getState()`.
|
||||
|
||||
You'll notice that each form has its own unique `statePath()`. Each form will write it's state to a different array on your Livewire component, so it's important to define these:
|
||||
You'll notice that each form has its own unique `statePath()`. Each form will write its state to a different array on your Livewire component, so it's important to define these:
|
||||
|
||||
```php
|
||||
public ?array $postData = [];
|
||||
@@ -296,7 +296,7 @@ public function createComment(): void
|
||||
|
||||
## Generating form Livewire components with the CLI
|
||||
|
||||
It's advised that you learn how to set up a Livewire component with the form builder manually, but once you are confident, you can use the CLI to generate a form for you.
|
||||
It's advised that you learn how to set up a Livewire component with the Form Builder manually, but once you are confident, you can use the CLI to generate a form for you.
|
||||
|
||||
```bash
|
||||
php artisan make:livewire-form RegistrationForm
|
||||
@@ -330,4 +330,4 @@ Filament is also able to guess which form fields you want in the schema, based o
|
||||
php artisan make:livewire-form Products/CreateProduct --generate
|
||||
```
|
||||
|
||||
> If your table contains ENUM columns, the `doctrine/dbal` package we use is unable to scan your table and will crash. Hence Filament is unable to generate the schema for your table if it contains an ENUM column. Read more about this issue [here](https://github.com/doctrine/dbal/issues/3819#issuecomment-573419808).
|
||||
> If your table contains ENUM columns, the `doctrine/dbal` package we use is unable to scan your table and will crash. Hence, Filament is unable to generate the schema for your table if it contains an ENUM column. Read more about this issue [here](https://github.com/doctrine/dbal/issues/3819#issuecomment-573419808).
|
||||
|
||||
@@ -6,7 +6,7 @@ title: Testing
|
||||
|
||||
All examples in this guide will be written using [Pest](https://pestphp.com). However, you can easily adapt this to PHPUnit.
|
||||
|
||||
Since the form builder works on Livewire components, you can use the [Livewire testing helpers](https://livewire.laravel.com/docs/testing). However, we have custom testing helpers that you can use with forms:
|
||||
Since the Form Builder works on Livewire components, you can use the [Livewire testing helpers](https://livewire.laravel.com/docs/testing). However, we have custom testing helpers that you can use with forms:
|
||||
|
||||
## Filling a form
|
||||
|
||||
@@ -94,7 +94,7 @@ it('has a form', function () {
|
||||
|
||||
## Fields
|
||||
|
||||
To ensure that a form has a given field pass the field name to `assertFormFieldExists()`:
|
||||
To ensure that a form has a given field, pass the field name to `assertFormFieldExists()`:
|
||||
|
||||
```php
|
||||
use function Pest\Livewire\livewire;
|
||||
@@ -122,7 +122,7 @@ it('has a title field', function () {
|
||||
|
||||
### Hidden fields
|
||||
|
||||
To ensure that a field is visible pass the name to `assertFormFieldIsVisible()`:
|
||||
To ensure that a field is visible, pass the name to `assertFormFieldIsVisible()`:
|
||||
|
||||
```php
|
||||
use function Pest\Livewire\livewire;
|
||||
@@ -148,7 +148,7 @@ test('title is hidden', function () {
|
||||
|
||||
### Disabled fields
|
||||
|
||||
To ensure that a field is enabled pass the name to `assertFormFieldIsEnabled()`:
|
||||
To ensure that a field is enabled, pass the name to `assertFormFieldIsEnabled()`:
|
||||
|
||||
```php
|
||||
use function Pest\Livewire\livewire;
|
||||
|
||||
@@ -33,7 +33,7 @@ Make sure to carefully follow the instructions, and review the changes made by t
|
||||
|
||||
Finally, you must run `php artisan filament:install` to finalize the Filament v3 installation. This command must be run for all new Filament projects.
|
||||
|
||||
You can now `composer remove filament/upgrade` as you don't need it any more.
|
||||
You can now `composer remove filament/upgrade` as you don't need it anymore.
|
||||
|
||||
> Some plugins you're using may not be available in v3 just yet. You could temporarily remove them from your `composer.json` file until they've been upgraded, replace them with a similar plugins that are v3-compatible, wait for the plugins to be upgraded before upgrading your app, or even write PRs to help the authors upgrade them.
|
||||
|
||||
@@ -45,7 +45,7 @@ Since Livewire v3 is still in beta, set the `minimum-stability` in your `compose
|
||||
"minimum-stability": "dev",
|
||||
```
|
||||
|
||||
### High impact changes
|
||||
### High-impact changes
|
||||
|
||||
#### Config file renamed and combined with other Filament packages
|
||||
|
||||
@@ -95,7 +95,7 @@ Filament v2 had a `secondary` color for many components which was gray. All refe
|
||||
|
||||
#### `$get` and `$set` closure parameters
|
||||
|
||||
`$get` and `$set` parameters now use a type of either `\Filament\Forms\Get` or `\Filament\Forms\Set` instead of `\Closure`. This allows for better IDE autocomplete support of the parameters of each function.
|
||||
`$get` and `$set` parameters now use a type of either `\Filament\Forms\Get` or `\Filament\Forms\Set` instead of `\Closure`. This allows for better IDE autocomplete support of each function's parameters.
|
||||
|
||||
An easy way to upgrade your code quickly is to find and replace:
|
||||
|
||||
@@ -104,9 +104,9 @@ An easy way to upgrade your code quickly is to find and replace:
|
||||
|
||||
#### `TextInput` masks now use Alpine.js' masking package
|
||||
|
||||
Filament v2 had a fluent mask object syntax for managing input masks. In v3 you can use Alpine.js' masking syntax instead. Please see the [input masking documentation](fields/text-input#input-masking) for more information.
|
||||
Filament v2 had a fluent mask object syntax for managing input masks. In v3, you can use Alpine.js's masking syntax instead. Please see the [input masking documentation](fields/text-input#input-masking) for more information.
|
||||
|
||||
### Low impact changes
|
||||
### Low-impact changes
|
||||
|
||||
#### Rule modification callback parameter renamed
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ title: Getting started
|
||||
|
||||
## Overview
|
||||
|
||||
Filament's infolist package allows you to [render a read-only list of data about a particular entity](adding-an-infolist-to-a-livewire-component). It's also used within other Filament packages, such as the [panel builder](../panels) for displaying [app resources](../panels/resources/getting-started) and [relation managers](../panels/resources/relation-managers), as well as for [action modals](../actions). Learning the features of the infolist builder will be incredibly time-saving when both building your own custom Livewire applications and using Filament's other packages.
|
||||
Filament's infolist package allows you to [render a read-only list of data about a particular entity](adding-an-infolist-to-a-livewire-component). It's also used within other Filament packages, such as the [Panel Builder](../panels) for displaying [app resources](../panels/resources/getting-started) and [relation managers](../panels/resources/relation-managers), as well as for [action modals](../actions). Learning the features of the Infolist Builder will be incredibly time-saving when both building your own custom Livewire applications and using Filament's other packages.
|
||||
|
||||
This guide will walk you through the basics of building infolists with Filament's infolist package. If you're planning to add a new infolist to your own Livewire component, you should [do that first](adding-an-infolist-to-a-livewire-component) and then come back. If you're adding an infolist to an [app resource](../panels/resources/getting-started), or another Filament package, you're ready to go!
|
||||
|
||||
@@ -25,7 +25,7 @@ $infolist
|
||||
|
||||
Each entry is a piece of information that should be displayed in the infolist. The `TextEntry` is used for displaying text, but there are [other entry types available](entries/getting-started#available-entries).
|
||||
|
||||
Infolists within the panel builder and other packages usually have 2 columns by default. For custom infolists, you can use the `columns()` method to achieve the same effect:
|
||||
Infolists within the Panel Builder and other packages usually have 2 columns by default. For custom infolists, you can use the `columns()` method to achieve the same effect:
|
||||
|
||||
```php
|
||||
$infolist
|
||||
@@ -52,7 +52,7 @@ You can learn more about columns and spans in the [layout documentation](layout/
|
||||
|
||||
## Using layout components
|
||||
|
||||
The infolist builder allows you to use [layout components](layout/getting-started#available-layout-components) inside the schema array to control how entries are displayed. `Section` is a layout component, and it allows you to add a heading and description to a set of entries. It can also allow entries inside it to collapse, which saves space in long infolists.
|
||||
The Infolist Builder allows you to use [layout components](layout/getting-started#available-layout-components) inside the schema array to control how entries are displayed. `Section` is a layout component, and it allows you to add a heading and description to a set of entries. It can also allow entries inside it to collapse, which saves space in long infolists.
|
||||
|
||||
```php
|
||||
use Filament\Infolists\Components\Section;
|
||||
|
||||
@@ -271,7 +271,7 @@ TextEntry::make('title')
|
||||
|
||||
## Customizing the font weight
|
||||
|
||||
Text entries have regular font weight by default but you may change this to any of the following options: `FontWeight::Thin`, `FontWeight::ExtraLight`, `FontWeight::Light`, `FontWeight::Medium`, `FontWeight::SemiBold`, `FontWeight::Bold`, `FontWeight::ExtraBold` or `FontWeight::Black`.
|
||||
Text entries have regular font weight by default, but you may change this to any of the following options: `FontWeight::Thin`, `FontWeight::ExtraLight`, `FontWeight::Light`, `FontWeight::Medium`, `FontWeight::SemiBold`, `FontWeight::Bold`, `FontWeight::ExtraBold` or `FontWeight::Black`.
|
||||
|
||||
For instance, you may make the font bold using `weight(FontWeight::Bold)`:
|
||||
|
||||
|
||||
@@ -140,7 +140,7 @@ ImageEntry::make('colleagues.avatar')
|
||||
|
||||
## Setting a limit
|
||||
|
||||
You may set a limit of the maximum number of images you want to display by passing `limit()`:
|
||||
You may limit the maximum number of images you want to display by passing `limit()`:
|
||||
|
||||
```php
|
||||
use Filament\Infolists\Components\ImageEntry;
|
||||
@@ -173,7 +173,7 @@ ImageEntry::make('colleagues.avatar')
|
||||
|
||||
#### Showing the limited remaining text separately
|
||||
|
||||
By default, `limitedRemainingText()` will display the count of remaining images as a number stacked on the other images. If you prefer to show the count as a number after the images you may use the `isSeparate: true` parameter:
|
||||
By default, `limitedRemainingText()` will display the count of remaining images as a number stacked on the other images. If you prefer to show the count as a number after the images, you may use the `isSeparate: true` parameter:
|
||||
|
||||
```php
|
||||
use Filament\Infolists\Components\ImageEntry;
|
||||
|
||||
@@ -29,7 +29,7 @@ Filament ships with some layout components, suitable for arranging your form fie
|
||||
- [Section](section)
|
||||
- [Split](split)
|
||||
|
||||
You may also [create your own custom layout components](custom) to organize fields however you wish.
|
||||
You may also [create your own custom layout components](custom) to organize fields in whatever way you wish.
|
||||
|
||||
## Setting an ID
|
||||
|
||||
|
||||
@@ -17,7 +17,7 @@ Breakpoints (`sm`, `md`, `lg`, `xl`, `2xl`) are defined by Tailwind, and can be
|
||||
|
||||
## Controlling how many columns a component should span
|
||||
|
||||
In addition to specifying how many columns a layout component should have, you may also specify how many columns a component should fill within the parent grid, using the `columnSpan()` method. This method accepts an integer, or an array of breakpoints and column spans:
|
||||
In addition to specifying how many columns a layout component should have, you may also specify how many columns a component should fill within the parent grid, using the `columnSpan()` method. This method accepts an integer or an array of breakpoints and column spans:
|
||||
|
||||
- `columnSpan(2)` will make the component fill up to 2 columns on all breakpoints.
|
||||
- `columnSpan(['md' => 2, 'xl' => 4])` will make the component fill up to 2 columns on medium devices, and up to 4 columns on extra large devices. The default breakpoint for smaller devices uses 1 column, unless you use a `default` array key.
|
||||
@@ -54,7 +54,7 @@ Section::make()
|
||||
|
||||
## Grid component
|
||||
|
||||
All layout components support the `columns()` method, but you also have access to an additional `Grid` component. If you feel that your form schema would benefit from an explicit grid syntax with no extra styling, it may be useful to you. Instead of using the `columns()` method, you can pass your columns configuration directly to `Grid::make()`:
|
||||
All layout components support the `columns()` method, but you also have access to an additional `Grid` component. If you feel that your form schema would benefit from an explicit grid syntax with no extra styling, it may be useful to you. Instead of using the `columns()` method, you can pass your column configuration directly to `Grid::make()`:
|
||||
|
||||
```php
|
||||
use Filament\Infolists\Components\Grid;
|
||||
|
||||
@@ -5,11 +5,11 @@ import AutoScreenshot from "@components/AutoScreenshot.astro"
|
||||
|
||||
## Overview
|
||||
|
||||
Filament's infolists can use [actions](../actions). They are buttons that can be added to any infolist component. Also, you can [render anonymous sets of actions](#adding-anonymous-actions-to-an-infolist-without-attaching-them-to-a-component) on their own, that are not attached to a particular infolist component.
|
||||
Filament's infolists can use [Actions](../actions). They are buttons that can be added to any infolist component. Also, you can [render anonymous sets of actions](#adding-anonymous-actions-to-an-infolist-without-attaching-them-to-a-component) on their own, that are not attached to a particular infolist component.
|
||||
|
||||
## Defining a infolist component action
|
||||
|
||||
Action objects inside a infolist component are instances of `Filament/Infolists/Components/Actions/Action`. You must pass a unique name to the action's `make()` method, which is used to identify it amongst others internally within Filament. You can [customize the trigger button](../actions/trigger-button) of an action, and even [open a modal](../actions/modals) with little effort:
|
||||
Action objects inside an infolist component are instances of `Filament/Infolists/Components/Actions/Action`. You must pass a unique name to the action's `make()` method, which is used to identify it amongst others internally within Filament. You can [customize the trigger button](../actions/trigger-button) of an action, and even [open a modal](../actions/modals) with little effort:
|
||||
|
||||
```php
|
||||
use App\Actions\ResetStars;
|
||||
@@ -54,7 +54,7 @@ TextEntry::make('cost')
|
||||
|
||||
#### Passing multiple affix actions to a entry
|
||||
|
||||
You may pass multiple affix actions to a entry by passing them in an array to either `prefixActions()` or `suffixActions()`. Either method can be used, or both at once, Filament will render all the registered actions in order:
|
||||
You may pass multiple affix actions to an entry by passing them in an array to either `prefixActions()` or `suffixActions()`. Either method can be used, or both at once, Filament will render all the registered actions in order:
|
||||
|
||||
```php
|
||||
use Filament\Infolists\Components\Actions\Action;
|
||||
@@ -73,7 +73,7 @@ TextEntry::make('cost')
|
||||
])
|
||||
```
|
||||
|
||||
### Adding a hint action to a entry
|
||||
### Adding a hint action to an entry
|
||||
|
||||
All entries support "hint actions", which are rendered aside the entry's [hint](entries/getting-started#adding-a-hint-next-to-the-label). To add a hint action to a entry, you may pass it to `hintAction()`:
|
||||
|
||||
|
||||
@@ -221,7 +221,7 @@ new FilamentNotification()
|
||||
|
||||
## Adding actions to notifications
|
||||
|
||||
Notifications support [actions](../actions/trigger-button), which are buttons that render below the content of the notification. They can open a URL or dispatch a Livewire event. Actions can be defined as follows:
|
||||
Notifications support [Actions](../actions/trigger-button), which are buttons that render below the content of the notification. They can open a URL or dispatch a Livewire event. Actions can be defined as follows:
|
||||
|
||||
```php
|
||||
use Filament\Notifications\Actions\Action;
|
||||
@@ -302,7 +302,7 @@ new FilamentNotification()
|
||||
|
||||
### Dispatching Livewire events from notification actions
|
||||
|
||||
Sometimes you want to execute additional code when a notification action is clicked. This can be achieved by setting a Livewire event which should be dispatchted on clicking the action. You may optionally pass an array of data, which will be available as parameters in the event listener on your Livewire component:
|
||||
Sometimes you want to execute additional code when a notification action is clicked. This can be achieved by setting a Livewire event which should be dispatched on clicking the action. You may optionally pass an array of data, which will be available as parameters in the event listener on your Livewire component:
|
||||
|
||||
```php
|
||||
use Filament\Notifications\Actions\Action;
|
||||
|
||||
@@ -31,7 +31,7 @@ Database notifications will be rendered within a modal. To open this modal, you
|
||||
</button>
|
||||
```
|
||||
|
||||
`$unreadNotificationsCount` is a variable automatically passed to this view, which provides it with a real-time count of the number of unread notifications the user has.
|
||||
`$unreadNotificationsCount` is a variable automatically passed to this view, which provides it with a real-time count of unread notifications the user has.
|
||||
|
||||
In the service provider, point to this new trigger view:
|
||||
|
||||
@@ -134,7 +134,7 @@ event(new DatabaseNotificationsSent($recipient));
|
||||
|
||||
## Marking database notifications as read
|
||||
|
||||
There is a button at the top of the modal to mark all notifications as read at once. You may also add [actions](sending-notifications#adding-actions-to-notifications) to notifications, which you can use to mark individual notifications as read. To do this, use the `markAsRead()` method on the action:
|
||||
There is a button at the top of the modal to mark all notifications as read at once. You may also add [Actions](sending-notifications#adding-actions-to-notifications) to notifications, which you can use to mark individual notifications as read. To do this, use the `markAsRead()` method on the action:
|
||||
|
||||
```php
|
||||
use Filament\Notifications\Actions\Action;
|
||||
|
||||
@@ -4,7 +4,7 @@ title: Customizing notifications
|
||||
|
||||
## Overview
|
||||
|
||||
Notifications come fully styled out of the box. However, if you want to apply your own styling or use a custom view to render notifications, there's multiple options.
|
||||
Notifications come fully styled out of the box. However, if you want to apply your own styling or use a custom view to render notifications, there are multiple options.
|
||||
|
||||
## Styling notifications
|
||||
|
||||
|
||||
@@ -33,7 +33,7 @@ Make sure to carefully follow the instructions, and review the changes made by t
|
||||
|
||||
Finally, you must run `php artisan filament:install` to finalize the Filament v3 installation. This command must be run for all new Filament projects.
|
||||
|
||||
You can now `composer remove filament/upgrade` as you don't need it any more.
|
||||
You can now `composer remove filament/upgrade` as you don't need it anymore.
|
||||
|
||||
> Some plugins you're using may not be available in v3 just yet. You could temporarily remove them from your `composer.json` file until they've been upgraded, replace them with a similar plugins that are v3-compatible, wait for the plugins to be upgraded before upgrading your app, or even write PRs to help the authors upgrade them.
|
||||
|
||||
@@ -45,7 +45,7 @@ Since Livewire v3 is still in beta, set the `minimum-stability` in your `compose
|
||||
"minimum-stability": "dev",
|
||||
```
|
||||
|
||||
### High impact changes
|
||||
### High-impact changes
|
||||
|
||||
#### Config file renamed and combined with other Filament packages
|
||||
|
||||
|
||||
@@ -47,7 +47,7 @@ Open `/admin` in your web browser, sign in, and start building your app!
|
||||
Not sure where to start? Review the [Getting Started guide](getting-started) to learn how to build a complete Filament admin panel.
|
||||
|
||||
## Using other Filament packages
|
||||
The Filament Panel Builder pre-installs the [form builder](/docs/forms), [table builder](/docs/tables), [notifications](/docs/notifications), [actions](/docs/actions), [infolists](/docs/infolists), and [widgets](/docs/widgets) packages. No other installation steps are required to use these packages within a panel.
|
||||
The Filament Panel Builder pre-installs the [Form Builder](/docs/forms), [Table Builder](/docs/tables), [Notifications](/docs/notifications), [Actions](/docs/actions), [Infolists](/docs/infolists), and [Widgets](/docs/widgets) packages. No other installation steps are required to use these packages within a panel.
|
||||
|
||||
## Deploying to production
|
||||
|
||||
|
||||
@@ -162,7 +162,7 @@ public static function form(Form $form): Form
|
||||
|
||||
Visit `/admin/patients/create` (or click the "New Patient" button) and observe that a form field for the patient's name was added.
|
||||
|
||||
Since this field is required in the database and has a maximum length of 255 characters, let's add two [validation rules](../forms/validation) to the name field:
|
||||
Since this field is required in the database and has a maximum length of 255 characters, let's add two [validation rules](../forms/validation) to the name field:
|
||||
|
||||
```php
|
||||
use Filament\Forms;
|
||||
@@ -327,13 +327,13 @@ The form should be working now! Try creating a new patient and their owner. Once
|
||||
|
||||
### Setting up the patients table
|
||||
|
||||
Visit the `/admin/patients` page again. If you created a patient, there should be one empty row in the table — with an edit button. Let's add some columns to the table so we can view the actual patient data.
|
||||
Visit the `/admin/patients` page again. If you have created a patient, there should be one empty row in the table — with an edit button. Let's add some columns to the table, so we can view the actual patient data.
|
||||
|
||||
Open the `PatientResource.php` file. You should see a `table()` method with an empty `columns([...])` array. You can use this array to add columns to the `patients` table.
|
||||
|
||||
#### Adding text columns
|
||||
|
||||
Filament bundles a large selection of [table columns](../tables/columns). Let's use a simple [text column](../tables/columns/text) for all of the fields in the `patients` table:
|
||||
Filament bundles a large selection of [table columns](../tables/columns). Let's use a simple [text column](../tables/columns/text) for all the fields in the `patients` table:
|
||||
|
||||
```php
|
||||
use Filament\Tables;
|
||||
@@ -431,7 +431,7 @@ public static function table(Table $table): Table
|
||||
}
|
||||
```
|
||||
|
||||
Reload the page and you should see a new filter icon in the top right corner (next to the search form). The filter opens a select menu with a list of patient types. Try filtering your patients by type.
|
||||
Reload the page, and you should see a new filter icon in the top right corner (next to the search form). The filter opens a select menu with a list of patient types. Try filtering your patients by type.
|
||||
|
||||
## Introducing relation managers
|
||||
|
||||
@@ -640,7 +640,7 @@ public function table(Table $table): Table
|
||||
|
||||
## Introducing widgets
|
||||
|
||||
Filament widgets are components that display information on your dashboard, especially statistics. Widgets are typically added to the default [Dashboard](../panels/dashboard) of the panel, but you can add them to any page, including resource pages. Filament includes built-in widgets like the [stats widget](../widgets/stats-overview), to render important statistics in a simple overview; [chart widget](../widgets/charts), which can render an interactive chart; and [table widget](../panels/dashboard#table-widgets), which allows you to easily embed the table builder.
|
||||
Filament widgets are components that display information on your dashboard, especially statistics. Widgets are typically added to the default [Dashboard](../panels/dashboard) of the panel, but you can add them to any page, including resource pages. Filament includes built-in widgets like the [stats widget](../widgets/stats-overview), to render important statistics in a simple overview; [chart widget](../widgets/charts), which can render an interactive chart; and [table widget](../panels/dashboard#table-widgets), which allows you to easily embed the Table Builder.
|
||||
|
||||
Let's add a stats widget to our default dashboard page that includes a stat for each type of patient and a chart to visualize treatments administered over time.
|
||||
|
||||
@@ -733,7 +733,7 @@ Now, check out your new chart widget in the dashboard!
|
||||
|
||||
> You can [customize your dashboard page](../panels/dashboard#customizing-the-dashboard-page) to change the grid and how many widgets are displayed.
|
||||
|
||||
## Next steps with the panel builder
|
||||
## Next steps with the Panel Builder
|
||||
|
||||
Congratulations! Now that you know how to build a basic Filament application, here are some suggestions for further learning:
|
||||
|
||||
|
||||
@@ -52,7 +52,7 @@ If you'd like to save time, Filament can automatically generate the [form](#reso
|
||||
php artisan make:filament-resource Customer --generate
|
||||
```
|
||||
|
||||
> If your table contains ENUM columns, the `doctrine/dbal` package we use is unable to scan your table and will crash. Hence Filament is unable to generate the schema for your resource if it contains an ENUM column. Read more about this issue [here](https://github.com/doctrine/dbal/issues/3819#issuecomment-573419808).
|
||||
> If your table contains ENUM columns, the `doctrine/dbal` package we use is unable to scan your table and will crash. Hence, Filament is unable to generate the schema for your resource if it contains an ENUM column. Read more about this issue [here](https://github.com/doctrine/dbal/issues/3819#issuecomment-573419808).
|
||||
|
||||
### Handling soft deletes
|
||||
|
||||
|
||||
@@ -109,7 +109,7 @@ protected static string $view = 'filament.resources.users.pages.list-users';
|
||||
|
||||
This assumes that you have created a view at `resources/views/filament/resources/users/pages/list-users.blade.php`.
|
||||
|
||||
Here's a very simple example of what that view might contain:
|
||||
Here's a basic example of what that view might contain:
|
||||
|
||||
```blade
|
||||
<x-filament-panels::page>
|
||||
|
||||
@@ -15,7 +15,7 @@ protected function mutateFormDataBeforeCreate(array $data): array
|
||||
}
|
||||
```
|
||||
|
||||
Alternatively, if you're creating records in a modal action, check out the [actions documentation](../../actions/prebuilt-actions/create#customizing-data-before-saving).
|
||||
Alternatively, if you're creating records in a modal action, check out the [Actions documentation](../../actions/prebuilt-actions/create#customizing-data-before-saving).
|
||||
|
||||
## Customizing the creation process
|
||||
|
||||
@@ -30,7 +30,7 @@ protected function handleRecordCreation(array $data): Model
|
||||
}
|
||||
```
|
||||
|
||||
Alternatively, if you're creating records in a modal action, check out the [actions documentation](../../actions/prebuilt-actions/create#customizing-the-creation-process).
|
||||
Alternatively, if you're creating records in a modal action, check out the [Actions documentation](../../actions/prebuilt-actions/create#customizing-the-creation-process).
|
||||
|
||||
## Customizing redirects
|
||||
|
||||
@@ -69,7 +69,7 @@ protected function getCreatedNotificationTitle(): ?string
|
||||
}
|
||||
```
|
||||
|
||||
Alternatively, if you're creating records in a modal action, check out the [actions documentation](../../actions/prebuilt-actions/create#customizing-the-save-notification).
|
||||
Alternatively, if you're creating records in a modal action, check out the [Actions documentation](../../actions/prebuilt-actions/create#customizing-the-save-notification).
|
||||
|
||||
You may customize the entire notification by overriding the `getCreatedNotification()` method on the create page class:
|
||||
|
||||
@@ -150,7 +150,7 @@ class CreateUser extends CreateRecord
|
||||
}
|
||||
```
|
||||
|
||||
Alternatively, if you're creating records in a modal action, check out the [actions documentation](../../actions/prebuilt-actions/create#lifecycle-hooks).
|
||||
Alternatively, if you're creating records in a modal action, check out the [Actions documentation](../../actions/prebuilt-actions/create#lifecycle-hooks).
|
||||
|
||||
## Halting the creation process
|
||||
|
||||
@@ -180,7 +180,7 @@ protected function beforeCreate(): void
|
||||
}
|
||||
```
|
||||
|
||||
Alternatively, if you're creating records in a modal action, check out the [actions documentation](../../actions/prebuilt-actions/create#halting-the-creation-process).
|
||||
Alternatively, if you're creating records in a modal action, check out the [Actions documentation](../../actions/prebuilt-actions/create#halting-the-creation-process).
|
||||
|
||||
## Authorization
|
||||
|
||||
@@ -253,7 +253,7 @@ protected function getSteps(): array
|
||||
}
|
||||
```
|
||||
|
||||
Alternatively, if you're creating records in a modal action, check out the [actions documentation](../../actions/prebuilt-actions/create#using-a-wizard).
|
||||
Alternatively, if you're creating records in a modal action, check out the [Actions documentation](../../actions/prebuilt-actions/create#using-a-wizard).
|
||||
|
||||
Now, create a new record to see your wizard in action! Edit will still use the form defined within the resource class.
|
||||
|
||||
@@ -340,7 +340,7 @@ protected static string $view = 'filament.resources.users.pages.create-user';
|
||||
|
||||
This assumes that you have created a view at `resources/views/filament/resources/users/pages/create-user.blade.php`.
|
||||
|
||||
Here's a very simple example of what that view might contain:
|
||||
Here's a basic example of what that view might contain:
|
||||
|
||||
```blade
|
||||
<x-filament-panels::page>
|
||||
|
||||
@@ -15,7 +15,7 @@ protected function mutateFormDataBeforeFill(array $data): array
|
||||
}
|
||||
```
|
||||
|
||||
Alternatively, if you're editing records in a modal action, check out the [actions documentation](../../actions/prebuilt-actions/edit#customizing-data-before-filling-the-form).
|
||||
Alternatively, if you're editing records in a modal action, check out the [Actions documentation](../../actions/prebuilt-actions/edit#customizing-data-before-filling-the-form).
|
||||
|
||||
## Customizing data before saving
|
||||
|
||||
@@ -30,7 +30,7 @@ protected function mutateFormDataBeforeSave(array $data): array
|
||||
}
|
||||
```
|
||||
|
||||
Alternatively, if you're editing records in a modal action, check out the [actions documentation](../../actions/prebuilt-actions/edit#customizing-data-before-saving).
|
||||
Alternatively, if you're editing records in a modal action, check out the [Actions documentation](../../actions/prebuilt-actions/edit#customizing-data-before-saving).
|
||||
|
||||
## Customizing the saving process
|
||||
|
||||
@@ -47,7 +47,7 @@ protected function handleRecordUpdate(Model $record, array $data): Model
|
||||
}
|
||||
```
|
||||
|
||||
Alternatively, if you're editing records in a modal action, check out the [actions documentation](../../actions/prebuilt-actions/edit#customizing-the-saving-process).
|
||||
Alternatively, if you're editing records in a modal action, check out the [Actions documentation](../../actions/prebuilt-actions/edit#customizing-the-saving-process).
|
||||
|
||||
## Customizing redirects
|
||||
|
||||
@@ -95,7 +95,7 @@ protected function getSavedNotificationTitle(): ?string
|
||||
}
|
||||
```
|
||||
|
||||
Alternatively, if you're editing records in a modal action, check out the [actions documentation](../../actions/prebuilt-actions/edit#customizing-the-save-notification).
|
||||
Alternatively, if you're editing records in a modal action, check out the [Actions documentation](../../actions/prebuilt-actions/edit#customizing-the-save-notification).
|
||||
|
||||
You may customize the entire notification by overriding the `getSavedNotification()` method on the edit page class:
|
||||
|
||||
@@ -176,7 +176,7 @@ class EditUser extends EditRecord
|
||||
}
|
||||
```
|
||||
|
||||
Alternatively, if you're editing records in a modal action, check out the [actions documentation](../../actions/prebuilt-actions/edit#lifecycle-hooks).
|
||||
Alternatively, if you're editing records in a modal action, check out the [Actions documentation](../../actions/prebuilt-actions/edit#lifecycle-hooks).
|
||||
|
||||
## Halting the saving process
|
||||
|
||||
@@ -206,7 +206,7 @@ protected function beforeSave(): void
|
||||
}
|
||||
```
|
||||
|
||||
Alternatively, if you're editing records in a modal action, check out the [actions documentation](../../actions/prebuilt-actions/edit#halting-the-saving-process).
|
||||
Alternatively, if you're editing records in a modal action, check out the [Actions documentation](../../actions/prebuilt-actions/edit#halting-the-saving-process).
|
||||
|
||||
## Authorization
|
||||
|
||||
@@ -282,7 +282,7 @@ protected static string $view = 'filament.resources.users.pages.edit-user';
|
||||
|
||||
This assumes that you have created a view at `resources/views/filament/resources/users/pages/edit-user.blade.php`.
|
||||
|
||||
Here's a very simple example of what that view might contain:
|
||||
Here's a basic example of what that view might contain:
|
||||
|
||||
```blade
|
||||
<x-filament-panels::page>
|
||||
|
||||
@@ -12,7 +12,7 @@ php artisan make:filament-resource User --view
|
||||
|
||||
## Using an infolist instead of a disabled form
|
||||
|
||||
By default, the View page will display a disabled form with the record's data. If you would prefer to display the record's data in an "infolist", you can use define an `infolist()` method on the resource class:
|
||||
By default, the View page will display a disabled form with the record's data. If you preferred to display the record's data in an "infolist", you can use define an `infolist()` method on the resource class:
|
||||
|
||||
```php
|
||||
use Filament\Infolists;
|
||||
@@ -92,7 +92,7 @@ protected function mutateFormDataBeforeFill(array $data): array
|
||||
}
|
||||
```
|
||||
|
||||
Alternatively, if you're viewing records in a modal action, check out the [actions documentation](../../actions/prebuilt-actions/view#customizing-data-before-filling-the-form).
|
||||
Alternatively, if you're viewing records in a modal action, check out the [Actions documentation](../../actions/prebuilt-actions/view#customizing-data-before-filling-the-form).
|
||||
|
||||
## Authorization
|
||||
|
||||
@@ -110,7 +110,7 @@ protected static string $view = 'filament.resources.users.pages.view-user';
|
||||
|
||||
This assumes that you have created a view at `resources/views/filament/resources/users/pages/view-user.blade.php`.
|
||||
|
||||
Here's a very simple example of what that view might contain:
|
||||
Here's a basic example of what that view might contain:
|
||||
|
||||
```blade
|
||||
<x-filament-panels::page>
|
||||
|
||||
@@ -4,7 +4,7 @@ title: Deleting records
|
||||
|
||||
## Handling soft deletes
|
||||
|
||||
## Creating a resource with soft deletes
|
||||
## Creating a resource with soft delete
|
||||
|
||||
By default, you will not be able to interact with deleted records in the app. If you'd like to add functionality to restore, force delete and filter trashed records in your resource, use the `--soft-deletes` flag when generating the resource:
|
||||
|
||||
@@ -62,7 +62,7 @@ public static function getEloquentQuery(): Builder
|
||||
}
|
||||
```
|
||||
|
||||
Now, update the Edit page class, if you have one:
|
||||
Now, update the Edit page class if you have one:
|
||||
|
||||
```php
|
||||
use Filament\Actions;
|
||||
|
||||
@@ -32,7 +32,7 @@ From a UX perspective, this solution is only suitable if your related model only
|
||||
|
||||
> These are compatible with `BelongsTo`, `HasOne` and `MorphOne` relationships.
|
||||
|
||||
All layout form components ([Grid](../../forms/layout/grid#grid-component), [Section](../../forms/layout/section), [Fieldset](../../forms/layout/fieldset), [Section](../../forms/layout/section), etc) have a `relationship()` method. When you use this, all fields within that layout are saved to the related model instead of the owner's model:
|
||||
All layout form components ([Grid](../../forms/layout/grid#grid-component), [Section](../../forms/layout/section), [Fieldset](../../forms/layout/fieldset), [Section](../../forms/layout/section), etc.) have a `relationship()` method. When you use this, all fields within that layout are saved to the related model instead of the owner's model:
|
||||
|
||||
```php
|
||||
use Filament\Forms\Components\Fieldset;
|
||||
@@ -136,7 +136,7 @@ You can find out more about soft deleting [here](#deleting-records).
|
||||
|
||||
Related records will be listed in a table. The entire relation manager is based around this table, which contains actions to [create](#creating-records), [edit](#editing-records), [attach / detach](#attaching-and-detaching-records), [associate / dissociate](#associating-and-dissociating-records), and delete records.
|
||||
|
||||
You may may use any of the features of the [table builder](../../tables) to customize relation managers.
|
||||
You may use any features of the [Table Builder](../../tables) to customize relation managers.
|
||||
|
||||
### Listing with pivot attributes
|
||||
|
||||
@@ -182,7 +182,7 @@ Please ensure that any pivot attributes are listed in the `withPivot()` method o
|
||||
|
||||
### Customizing the `CreateAction`
|
||||
|
||||
To learn how to customize the `CreateAction`, including mutating the form data, changing the notification, and adding lifecycle hooks, please see the [actions documentation](../../actions/prebuilt-actions/create).
|
||||
To learn how to customize the `CreateAction`, including mutating the form data, changing the notification, and adding lifecycle hooks, please see the [Actions documentation](../../actions/prebuilt-actions/create).
|
||||
|
||||
## Editing related records
|
||||
|
||||
@@ -209,7 +209,7 @@ Please ensure that any pivot attributes are listed in the `withPivot()` method o
|
||||
|
||||
### Customizing the `EditAction`
|
||||
|
||||
To learn how to customize the `EditAction`, including mutating the form data, changing the notification, and adding lifecycle hooks, please see the [actions documentation](../../actions/prebuilt-actions/edit).
|
||||
To learn how to customize the `EditAction`, including mutating the form data, changing the notification, and adding lifecycle hooks, please see the [Actions documentation](../../actions/prebuilt-actions/edit).
|
||||
|
||||
## Attaching and detaching records
|
||||
|
||||
@@ -303,7 +303,7 @@ AttachAction::make()
|
||||
->recordSelectSearchColumns(['title', 'description'])
|
||||
```
|
||||
|
||||
### Customizing the select field in the attach modal
|
||||
### Customizing the select field in the attached modal
|
||||
|
||||
You may customize the select field object that is used during attachment by passing a function to the `recordSelect()` method:
|
||||
|
||||
@@ -491,7 +491,7 @@ public function table(Table $table): Table
|
||||
|
||||
### Customizing the `DeleteAction`
|
||||
|
||||
To learn how to customize the `DeleteAction`, including changing the notification and adding lifecycle hooks, please see the [actions documentation](../../actions/prebuilt-actions/delete).
|
||||
To learn how to customize the `DeleteAction`, including changing the notification and adding lifecycle hooks, please see the [Actions documentation](../../actions/prebuilt-actions/delete).
|
||||
|
||||
## Accessing the relationship's owner record
|
||||
|
||||
@@ -722,7 +722,7 @@ AttachAction::make()
|
||||
|
||||
## Read-only mode
|
||||
|
||||
Relation managers are usually displayed on either the Edit or View page of a resource. On the View page, Filament will automatically hide all actions that modify the relationship, such as create, edit and delete. However, you can disable this behaviour, by overriding the `isReadOnly()` method on the relation manager class to return `false` all the time:
|
||||
Relation managers are usually displayed on either the Edit or View page of a resource. On the View page, Filament will automatically hide all actions that modify the relationship, such as create, edit, and delete. However, you can disable this behaviour, by overriding the `isReadOnly()` method on the relation manager class to return `false` all the time:
|
||||
|
||||
```php
|
||||
public function isReadOnly(): bool
|
||||
|
||||
@@ -29,7 +29,7 @@ public static function getGlobalSearchResultTitle(Model $record): string
|
||||
|
||||
## Globally searching across multiple columns
|
||||
|
||||
If you would like to search across multiple columns of your resource, you may override the `getGloballySearchableAttributes()` method. "Dot notation" allows you to search inside of relationships:
|
||||
If you would like to search across multiple columns of your resource, you may override the `getGloballySearchableAttributes()` method. "Dot notation" allows you to search inside relationships:
|
||||
|
||||
```php
|
||||
public static function getGloballySearchableAttributes(): array
|
||||
@@ -105,7 +105,7 @@ Action::make('view')
|
||||
|
||||
### Dispatching Livewire events from global search actions
|
||||
|
||||
Sometimes you want to execute additional code when a global search result action is clicked. This can be achieved by setting a Livewire event which should be dispatchted on clicking the action. You may optionally pass an array of data, which will be available as parameters in the event listener on your Livewire component:
|
||||
Sometimes you want to execute additional code when a global search result action is clicked. This can be achieved by setting a Livewire event which should be dispatched on clicking the action. You may optionally pass an array of data, which will be available as parameters in the event listener on your Livewire component:
|
||||
|
||||
```php
|
||||
use Filament\GlobalSearch\Actions\Action;
|
||||
|
||||
@@ -29,7 +29,7 @@ public static function shouldRegisterNavigation(): bool
|
||||
}
|
||||
```
|
||||
|
||||
Please be aware that all users will still be able to visit this page through its direct URL, so to fully limit access you must also also check in the `mount()` method of the page:
|
||||
Please be aware that all users will still be able to visit this page through its direct URL, so to fully limit access, you must also check in the `mount()` method of the page:
|
||||
|
||||
```php
|
||||
public function mount(): void
|
||||
@@ -103,7 +103,7 @@ protected function getHeaderWidgets(): array
|
||||
|
||||
If you'd like to learn how to build and customize widgets, check out the [Dashboard](dashboard) documentation section.
|
||||
|
||||
### Customizing the widgets grid
|
||||
### Customizing the widgets' grid
|
||||
|
||||
You may change how many grid columns are used to display widgets.
|
||||
|
||||
@@ -295,7 +295,7 @@ This example assumes you have a Blade view at `resources/views/filament/settings
|
||||
|
||||
## Customizing the maximum content width
|
||||
|
||||
By default, Filament will restrict the width of the content on the page so it doesn't become too wide on large screens. To change this, you may override the `getMaxContentWidth()` method. Options correspond to [Tailwind's max-width scale](https://tailwindcss.com/docs/max-width). The options are `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`, `5xl`, `6xl`, `7xl`, and `full`. The default is `7xl`:
|
||||
By default, Filament will restrict the width of the content on the page, so it doesn't become too wide on large screens. To change this, you may override the `getMaxContentWidth()` method. Options correspond to [Tailwind's max-width scale](https://tailwindcss.com/docs/max-width). The options are `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`, `5xl`, `6xl`, `7xl`, and `full`. The default is `7xl`:
|
||||
|
||||
```php
|
||||
public function getMaxContentWidth(): ?string
|
||||
|
||||
@@ -47,7 +47,7 @@ protected int | string | array $columnSpan = [
|
||||
|
||||
This is especially useful when using a [responsive widgets grid](#responsive-widgets-grid).
|
||||
|
||||
## Customizing the widgets grid
|
||||
## Customizing the widgets' grid
|
||||
|
||||
You may change how many grid columns are used to display widgets.
|
||||
|
||||
@@ -126,7 +126,7 @@ public function panel(Panel $panel): Panel
|
||||
|
||||
## Customizing the dashboard page
|
||||
|
||||
If you want to customize the dashboard class, for example to [change the number of widget columns](#customizing-widget-width), create a new file at `app/Filament/Pages/Dashboard.php`:
|
||||
If you want to customize the dashboard class, for example, to [change the number of widget columns](#customizing-widget-width), create a new file at `app/Filament/Pages/Dashboard.php`:
|
||||
|
||||
```php
|
||||
<?php
|
||||
|
||||
@@ -4,7 +4,7 @@ title: Notifications
|
||||
|
||||
## Overview
|
||||
|
||||
The panel builder uses the [Notifications](../notifications/sending-notifications) package to send messages to users. Please read the [documentation](../notifications/sending-notifications) to discover how to send notifications easily.
|
||||
The Panel Builder uses the [Notifications](../notifications/sending-notifications) package to send messages to users. Please read the [documentation](../notifications/sending-notifications) to discover how to send notifications easily.
|
||||
|
||||
If you'd like to receive [database notifications](../notifications/database-notifications), you can enable them in the [configuration](configuration):
|
||||
|
||||
|
||||
@@ -102,7 +102,7 @@ public function panel(Panel $panel): Panel
|
||||
}
|
||||
```
|
||||
|
||||
## Configuring the user name attribute
|
||||
## Configuring the user's name attribute
|
||||
|
||||
By default, Filament will use the `name` attribute of the user to display their name in the app. To change this, you can implement the `HasName` contract:
|
||||
|
||||
|
||||
@@ -100,7 +100,7 @@ public function panel(Panel $panel): Panel
|
||||
|
||||
## Customizing the maximum content width
|
||||
|
||||
By default, Filament will restrict the width of the content on a page so it doesn't become too wide on large screens. To change this, you may use the `maxContentWidth()` method. Options correspond to [Tailwind's max-width scale](https://tailwindcss.com/docs/max-width). The options are `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`, `5xl`, `6xl`, `7xl`, and `full`. The default is `7xl`:
|
||||
By default, Filament will restrict the width of the content on a page, so it doesn't become too wide on large screens. To change this, you may use the `maxContentWidth()` method. Options correspond to [Tailwind's max-width scale](https://tailwindcss.com/docs/max-width). The options are `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`, `5xl`, `6xl`, `7xl`, and `full`. The default is `7xl`:
|
||||
|
||||
```php
|
||||
use Filament\Panel;
|
||||
|
||||
@@ -573,9 +573,9 @@ Below is a list of features that Filament provides to help you implement multi-t
|
||||
|
||||
And here are the things that Filament does not currently provide:
|
||||
|
||||
- Scoping of relation manager records to the current tenant. When using the relation manager, in the vast majority of cases the query will not need to be scoped to the current tenant, since it is already scoped to the parent record, which is itself scoped to the current tenant. For example, if a `Team` tenant model had an `Author` resource, and that resource had a `posts` relationship and relation manager set up, and posts only belong to one author, there is no need to scope the query. This is because the user will only be able to see authors that belong to the current team anyway, and thus will only be able to see posts that belong to those authors. You can [scope the Eloquent query](resources/relation-managers#customizing-the-relation-manager-eloquent-query) if you wish.
|
||||
- Scoping of relation manager records to the current tenant. When using the relation manager, in the vast majority of cases, the query will not need to be scoped to the current tenant, since it is already scoped to the parent record, which is itself scoped to the current tenant. For example, if a `Team` tenant model had an `Author` resource, and that resource had a `posts` relationship and relation manager set up, and posts only belong to one author, there is no need to scope the query. This is because the user will only be able to see authors that belong to the current team anyway, and thus will only be able to see posts that belong to those authors. You can [scope the Eloquent query](resources/relation-managers#customizing-the-relation-manager-eloquent-query) if you wish.
|
||||
|
||||
- Form component and filter scoping. When using the `Select`, `CheckboxList` or `Repeater` form components, the `SelectFilter`, or any other similar Filament component which is able to automatically fetch "options" or other data from the database (usually using a `relationship()` method), this data is not scoped. The main reason for this is that these features often don't belong to the Filament panel builder package, and have no knowledge that they are being used within that context, and that a tenant even exists. And even if they did have access to the tenant, there is nowhere for the tenant relationship configuration to live. To scope these components, you need to pass in a query function that scopes the query to the current tenant. For example, if you were using the `Select` form component to select an `author` from a relationship, you could do this:
|
||||
- Form component and filter scoping. When using the `Select`, `CheckboxList` or `Repeater` form components, the `SelectFilter`, or any other similar Filament component which is able to automatically fetch "options" or other data from the database (usually using a `relationship()` method), this data is not scoped. The main reason for this is that these features often don't belong to the Filament Panel Builder package, and have no knowledge that they are being used within that context, and that a tenant even exists. And even if they did have access to the tenant, there is nowhere for the tenant relationship configuration to live. To scope these components, you need to pass in a query function that scopes the query to the current tenant. For example, if you were using the `Select` form component to select an `author` from a relationship, you could do this:
|
||||
|
||||
```php
|
||||
use Filament\Facades\Filament;
|
||||
|
||||
@@ -105,7 +105,7 @@ $panel->font(
|
||||
|
||||
## Creating a custom theme
|
||||
|
||||
Filament allows you to change the CSS used to render the UI, by compiling a custom stylesheet to replace the default one. This custom stylesheet is called a "theme".
|
||||
Filament allows you to change the CSS used to render the UI by compiling a custom stylesheet to replace the default one. This custom stylesheet is called a "theme".
|
||||
|
||||
Themes use [Tailwind CSS](https://tailwindcss.com), the Tailwind Forms plugin, the Tailwind Typography plugin, and [Autoprefixer](https://github.com/postcss/autoprefixer).
|
||||
|
||||
|
||||
@@ -22,7 +22,7 @@ Since Livewire v3 is still in beta, set the `minimum-stability` in your `compose
|
||||
"minimum-stability": "dev",
|
||||
```
|
||||
|
||||
The easiest way to upgrade your app is to run the automated upgrade script. This script will automatically upgrade your application to the latest version of Filament and make changes to your code which handle most breaking changes.
|
||||
The easiest way to upgrade your app is to run the automated upgrade script. This script will automatically upgrade your application to the latest version of Filament and make changes to your code, which handles most breaking changes.
|
||||
|
||||
```bash
|
||||
composer require filament/upgrade:"^3.0-stable" -W --dev
|
||||
@@ -32,11 +32,11 @@ vendor/bin/filament-v3
|
||||
|
||||
Make sure to carefully follow the instructions, and review the changes made by the script. You may need to make some manual changes to your code afterwards, but the script should handle most of the repetitive work for you.
|
||||
|
||||
A new `app/Providers/Filament/*PanelProvider.php` file will be created, and the configuration from your old `config/filament.php` file should be copied. Since this is a [Laravel service provider](https://laravel.com/docs/providers), it needs to be registered in `config/app.php`. Filament will attempt to do this for you, but if you get an error while trying to access your panel then this process has probably failed. You can manually register the service provider by adding it to the `providers` array.
|
||||
A new `app/Providers/Filament/*PanelProvider.php` file will be created, and the configuration from your old `config/filament.php` file should be copied. Since this is a [Laravel service provider](https://laravel.com/docs/providers), it needs to be registered in `config/app.php`. Filament will attempt to do this for you, but if you get an error while trying to access your panel, then this process has probably failed. You can manually register the service provider by adding it to the `providers` array.
|
||||
|
||||
Finally, you must run `php artisan filament:install` to finalize the Filament v3 installation. This command must be run for all new Filament projects.
|
||||
|
||||
You can now `composer remove filament/upgrade` as you don't need it any more.
|
||||
You can now `composer remove filament/upgrade` as you don't need it anymore.
|
||||
|
||||
> Some plugins you're using may not be available in v3 just yet. You could temporarily remove them from your `composer.json` file until they've been upgraded, replace them with a similar plugins that are v3-compatible, wait for the plugins to be upgraded before upgrading your app, or even write PRs to help the authors upgrade them.
|
||||
|
||||
@@ -48,7 +48,7 @@ Since Livewire v3 is still in beta, set the `minimum-stability` in your `compose
|
||||
"minimum-stability": "dev",
|
||||
```
|
||||
|
||||
### High impact changes
|
||||
### High-impact changes
|
||||
|
||||
#### Panel provider instead of the config file
|
||||
|
||||
@@ -60,9 +60,9 @@ Before you can create the new panel provider, make sure that you've got Filament
|
||||
php artisan filament:install --panels
|
||||
```
|
||||
|
||||
A new `app/Providers/Filament/AdminPanelProvider.php` file will be created, ready for you to transfer over your old configuration from the `config/filament.php` file. Since this is a [Laravel service provider](https://laravel.com/docs/providers), it needs to be registered in `config/app.php`. Filament will attempt to do this for you, but if you get an error while trying to access your panel then this process has probably failed. You can manually register the service provider by adding it to the `providers` array.
|
||||
A new `app/Providers/Filament/AdminPanelProvider.php` file will be created, ready for you to transfer over your old configuration from the `config/filament.php` file. Since this is a [Laravel service provider](https://laravel.com/docs/providers), it needs to be registered in `config/app.php`. Filament will attempt to do this for you, but if you get an error while trying to access your panel, then this process has probably failed. You can manually register the service provider by adding it to the `providers` array.
|
||||
|
||||
Most configuration transfer is very self-explanatory, but if you get stuck please refer to the [configuration documentation](configuration).
|
||||
Most configuration transfer is very self-explanatory, but if you get stuck, please refer to the [configuration documentation](configuration).
|
||||
|
||||
This will especially affect configuration done via the `Filament::serving()` method, which was used for theme customization, navigation and menu registration. Consult the [configuration](configuration), [navigation](navigation) and [themes](themes) documentation sections.
|
||||
|
||||
@@ -173,7 +173,7 @@ Filament v2 had a `secondary` color for many components which was gray. All refe
|
||||
|
||||
#### `$get` and `$set` closure parameters
|
||||
|
||||
In the forms package, `$get` and `$set` parameters now use a type of either `\Filament\Forms\Get` or `\Filament\Forms\Set` instead of `\Closure`. This allows for better IDE autocomplete support of the parameters of each function.
|
||||
In the Form Builder package, `$get` and `$set` parameters now use a type of either `\Filament\Forms\Get` or `\Filament\Forms\Set` instead of `\Closure`. This allows for better IDE autocomplete support of each function's parameters.
|
||||
|
||||
An easy way to upgrade your code quickly is to find and replace:
|
||||
|
||||
@@ -194,7 +194,7 @@ In v2, you can customize the logo of the admin panel using a `/resources/views/v
|
||||
|
||||
Filament v3 has a new universal plugin system that breaches the constraints of the admin panel. Learn how to build v3 plugins [here](plugins).
|
||||
|
||||
### Low impact changes
|
||||
### Low-impact changes
|
||||
|
||||
#### Default actions and type-specific relation manager classes
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@ Please [follow Spatie's documentation about how to set up their package](https:/
|
||||
|
||||
## Using the font provider
|
||||
|
||||
In your [panel builder configuration](https://filamentphp.com/docs/panels/configuration), you can use the `font()` method, passing a `provider`:
|
||||
In your [Panel Builder configuration](https://filamentphp.com/docs/panels/configuration), you can use the `font()` method, passing a `provider`:
|
||||
|
||||
```php
|
||||
use Filament\FontProviders\SpatieGoogleFontProvider;
|
||||
|
||||
@@ -34,7 +34,7 @@ protected static string $settings = FooterSettings::class;
|
||||
|
||||
You must define a form schema to interact with your settings class inside the `form()` method.
|
||||
|
||||
Since the [form builder](https://filamentphp.com/docs/forms) is installed in the panel builder by default, you may use any form [fields](https://filamentphp.com/docs/forms/fields) or [layout components](https://filamentphp.com/docs/forms/layout) you like:
|
||||
Since the [Form Builder](https://filamentphp.com/docs/forms) is installed in the Panel Builder by default, you may use any form [fields](https://filamentphp.com/docs/forms/fields) or [layout components](https://filamentphp.com/docs/forms/layout) you like:
|
||||
|
||||
```php
|
||||
use Filament\Forms\Components\Repeater;
|
||||
|
||||
@@ -36,7 +36,7 @@ use Filament\Forms\Components\SpatieTagsInput;
|
||||
SpatieTagsInput::make('tags')
|
||||
```
|
||||
|
||||
> The field will automatically load and save its tags to your model. To set this functionality up, **you must also follow the instructions set out in the [field relationships](https://filamentphp.com/docs/forms/getting-started#field-relationships) section**. If you're using the [panel builder](../panels), you can skip this step.
|
||||
> The field will automatically load and save its tags to your model. To set this functionality up, **you must also follow the instructions set out in the [field relationships](https://filamentphp.com/docs/forms/getting-started#field-relationships) section**. If you're using the [Panel Builder](../panels), you can skip this step.
|
||||
|
||||
Optionally, you may pass a [`type()`](https://spatie.be/docs/laravel-tags/advanced-usage/using-types) allows you to group tags into collections:
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@ All packages in the Filament ecosystem share an asset management system. This al
|
||||
|
||||
The `FilamentAsset` facade is used to register files into the asset system. These files may be sourced from anywhere in the filesystem, but are then copied into the `/public` directory of the application when the `php artisan filament:assets` command is run. By copying them into the `/public` directory for you, we can predictably load them in Blade views, and also ensure that third party packages are able to load their assets without having to worry about where they are located.
|
||||
|
||||
Assets always have a unique ID chosen by you, which is used as the file name when the asset is copied into the `/public` directory. This ID is also used to reference the asset in Blade views. While the ID is unique, if you are registering assets for a plugin then you do not need to worry about IDs clashing with other plugins, since the asset will be copied into a directory named after your plugin.
|
||||
Assets always have a unique ID chosen by you, which is used as the file name when the asset is copied into the `/public` directory. This ID is also used to reference the asset in Blade views. While the ID is unique, if you are registering assets for a plugin, then you do not need to worry about IDs clashing with other plugins, since the asset will be copied into a directory named after your plugin.
|
||||
|
||||
The `FilamentAsset` facade should be used in the `boot()` method of a service provider. It can be used inside an application service provider such as `AppServiceProvider`, or inside a plugin service provider.
|
||||
|
||||
@@ -47,7 +47,7 @@ Now, all the assets for this plugin will be copied into their own directory insi
|
||||
|
||||
## Registering CSS files
|
||||
|
||||
To register a CSS file with the asset system, use the `FilamentAsset::register()` method in the `boot()` method of a service provider. You must pass in an array of `Css` objects, which each represent a CSS file that should be registered in the asset system.
|
||||
To register a CSS file with the asset system, use the `FilamentAsset::register()` method in the `boot()` method of a service provider. You must pass in an array of `Css` objects, which each represents a CSS file that should be registered in the asset system.
|
||||
|
||||
Each `Css` object has a unique ID and a path to the CSS file:
|
||||
|
||||
@@ -68,7 +68,7 @@ Now, when the `php artisan filament:assets` command is run, this CSS file is cop
|
||||
|
||||
Typically, registering CSS files is used to register custom stylesheets for your application. If you want to process these files using Tailwind CSS, you need to consider the implications of that, especially if you are a plugin developer.
|
||||
|
||||
Tailwind builds are unique to every application - they contain a minimal set of utility classes, only the ones that you are actually using in your application. This means that if you are a plugin developer, you probably should not be building your Tailwind CSS files into your plugin. Instead, you should provide the raw CSS files, and instruct the user that they should build the Tailwind CSS file themselves. To do this, they probably just need to add your vendor directory into the `content` array of their `tailwind.config.js` file:
|
||||
Tailwind builds are unique to every application - they contain a minimal set of utility classes, only the ones that you are actually using in your application. This means that if you are a plugin developer, you probably should not be building your Tailwind CSS files into your plugin. Instead, you should provide the raw CSS files and instruct the user that they should build the Tailwind CSS file themselves. To do this, they probably just need to add your vendor directory into the `content` array of their `tailwind.config.js` file:
|
||||
|
||||
```js
|
||||
export default {
|
||||
@@ -83,7 +83,7 @@ export default {
|
||||
|
||||
This means that when they build their Tailwind CSS file, it will include all the utility classes that are used in your plugin's views, as well as the utility classes that are used in their application and the Filament core.
|
||||
|
||||
However, with this technique, there might be extra complications for users who use your plugin with the [Panel Builder](../panels). If they have a [custom theme](../panels/theming), they will be fine, since they are building their own CSS file anyway using Tailwind CSS. However, if they are using the default stylesheet which is shipped with the panel builder, you might have to be careful about the utility classes that you use in your plugin's views. For instance, if you use a utility class that is not included in the default stylesheet, the user is not compiling it themselves, and it will not be included in the final CSS file. This means that your plugin's views might not look as expected. This is one of the few situations where I would recommend compiling and [registering](#registering-css-files) a Tailwind CSS-compiled stylesheet in your plugin.
|
||||
However, with this technique, there might be extra complications for users who use your plugin with the [Panel Builder](../panels). If they have a [custom theme](../panels/theming), they will be fine, since they are building their own CSS file anyway using Tailwind CSS. However, if they are using the default stylesheet which is shipped with the Panel Builder, you might have to be careful about the utility classes that you use in your plugin's views. For instance, if you use a utility class that is not included in the default stylesheet, the user is not compiling it themselves, and it will not be included in the final CSS file. This means that your plugin's views might not look as expected. This is one of the few situations where I would recommend compiling and [registering](#registering-css-files) a Tailwind CSS-compiled stylesheet in your plugin.
|
||||
|
||||
### Lazy loading CSS
|
||||
|
||||
@@ -136,7 +136,7 @@ FilamentAsset::register([
|
||||
|
||||
## Registering JavaScript files
|
||||
|
||||
To register a JavaScript file with the asset system, use the `FilamentAsset::register()` method in the `boot()` method of a service provider. You must pass in an array of `Js` objects, which each represent a JavaScript file that should be registered in the asset system.
|
||||
To register a JavaScript file with the asset system, use the `FilamentAsset::register()` method in the `boot()` method of a service provider. You must pass in an array of `Js` objects, which each represents a JavaScript file that should be registered in the asset system.
|
||||
|
||||
Each `Js` object has a unique ID and a path to the JavaScript file:
|
||||
|
||||
|
||||
@@ -103,7 +103,7 @@ FilamentView::registerRenderHook(
|
||||
);
|
||||
```
|
||||
|
||||
Some render hooks for the [panel builder](#panel-builder-render-hooks) allow you to scope hooks to all pages in a resource:
|
||||
Some render hooks for the [Panel Builder](#panel-builder-render-hooks) allow you to scope hooks to all pages in a resource:
|
||||
|
||||
```php
|
||||
use Filament\Support\Facades\FilamentView;
|
||||
|
||||
@@ -42,7 +42,7 @@ enum Status: string implements HasLabel
|
||||
|
||||
### Using the enum label with form field options
|
||||
|
||||
The `HasLabel` interface can be used to generate an array of options from an enum, where the enum's value is the key and the enum's label is the value. This applies to form builder fields like [`Select`](../forms/fields/select) and [`CheckboxList`](../forms/fields/checkbox-list), as well as the table builder's [`SelectColumn`](../tables/columns/select) and [`SelectFilter`](../tables/filters#select-filters):
|
||||
The `HasLabel` interface can be used to generate an array of options from an enum, where the enum's value is the key and the enum's label is the value. This applies to Form Builder fields like [`Select`](../forms/fields/select) and [`CheckboxList`](../forms/fields/checkbox-list), as well as the Table Builder's [`SelectColumn`](../tables/columns/select) and [`SelectFilter`](../tables/filters#select-filters):
|
||||
|
||||
```php
|
||||
use Filament\Forms\Components\CheckboxList;
|
||||
@@ -76,15 +76,15 @@ In these examples, `Status::class` is the enum class which implements `HasLabel`
|
||||
|
||||
### Using the enum label with a text column in your table
|
||||
|
||||
If you use a [`TextColumn`](../tables/columns/text) with the table builder, and it is cast to an enum in your Eloquent model, Filament will automatically use the `HasLabel` interface to display the enum's label instead of its raw value.
|
||||
If you use a [`TextColumn`](../tables/columns/text) with the Table Builder, and it is cast to an enum in your Eloquent model, Filament will automatically use the `HasLabel` interface to display the enum's label instead of its raw value.
|
||||
|
||||
### Using the enum label as a group title in your table
|
||||
|
||||
If you use a [grouping](../tables/grouping) with the table builder, and it is cast to an enum in your Eloquent model, Filament will automatically use the `HasLabel` interface to display the enum's label instead of its raw value. The label will be displayed as the [title of each group](../tables/grouping#setting-a-group-title).
|
||||
If you use a [grouping](../tables/grouping) with the Table Builder, and it is cast to an enum in your Eloquent model, Filament will automatically use the `HasLabel` interface to display the enum's label instead of its raw value. The label will be displayed as the [title of each group](../tables/grouping#setting-a-group-title).
|
||||
|
||||
### Using the enum label with a text entry in your infolist
|
||||
|
||||
If you use a [`TextColumn`](../infolists/entries/text) with the infolist builder, and it is cast to an enum in your Eloquent model, Filament will automatically use the `HasLabel` interface to display the enum's label instead of its raw value.
|
||||
If you use a [`TextColumn`](../infolists/entries/text) with the Infolist Builder, and it is cast to an enum in your Eloquent model, Filament will automatically use the `HasLabel` interface to display the enum's label instead of its raw value.
|
||||
|
||||
## Enum colors
|
||||
|
||||
@@ -114,11 +114,11 @@ enum Status: string implements HasColor
|
||||
|
||||
### Using the enum color with a text column in your table
|
||||
|
||||
If you use a [`TextColumn`](../tables/columns/text) with the table builder, and it is cast to an enum in your Eloquent model, Filament will automatically use the `HasColor` interface to display the enum label in its color. This works best if you use the [`badge()`](../tables/columns/text#displaying-as-a-badge) method on the column.
|
||||
If you use a [`TextColumn`](../tables/columns/text) with the Table Builder, and it is cast to an enum in your Eloquent model, Filament will automatically use the `HasColor` interface to display the enum label in its color. This works best if you use the [`badge()`](../tables/columns/text#displaying-as-a-badge) method on the column.
|
||||
|
||||
### Using the enum color with a text column in your infolist
|
||||
|
||||
If you use a [`TextEntry`](../infolists/entries/text) with the infolist builder, and it is cast to an enum in your Eloquent model, Filament will automatically use the `HasColor` interface to display the enum label in its color. This works best if you use the [`badge()`](../infolists/entries/text#displaying-as-a-badge) method on the entry.
|
||||
If you use a [`TextEntry`](../infolists/entries/text) with the Infolist Builder, and it is cast to an enum in your Eloquent model, Filament will automatically use the `HasColor` interface to display the enum label in its color. This works best if you use the [`badge()`](../infolists/entries/text#displaying-as-a-badge) method on the entry.
|
||||
|
||||
## Enum icons
|
||||
|
||||
@@ -148,8 +148,8 @@ enum Status: string implements HasIcon
|
||||
|
||||
### Using the enum icon with a text column in your table
|
||||
|
||||
If you use a [`TextColumn`](../tables/columns/text) with the table builder, and it is cast to an enum in your Eloquent model, Filament will automatically use the `HasIcon` interface to display the enum's icon aside its label. This works best if you use the [`badge()`](../tables/columns/text#displaying-as-a-badge) method on the column.
|
||||
If you use a [`TextColumn`](../tables/columns/text) with the Table Builder, and it is cast to an enum in your Eloquent model, Filament will automatically use the `HasIcon` interface to display the enum's icon aside its label. This works best if you use the [`badge()`](../tables/columns/text#displaying-as-a-badge) method on the column.
|
||||
|
||||
### Using the enum icon with a text entry in your infolist
|
||||
|
||||
If you use a [`TextEntry`](../infolists/entries/text) with the infolist builder, and it is cast to an enum in your Eloquent model, Filament will automatically use the `HasIcon` interface to display the enum's icon aside its label. This works best if you use the [`badge()`](../infolists/entries/text#displaying-as-a-badge) method on the entry.
|
||||
If you use a [`TextEntry`](../infolists/entries/text) with the Infolist Builder, and it is cast to an enum in your Eloquent model, Filament will automatically use the `HasIcon` interface to display the enum's icon aside its label. This works best if you use the [`badge()`](../infolists/entries/text#displaying-as-a-badge) method on the entry.
|
||||
|
||||
@@ -15,7 +15,7 @@ Before we dive in, it's important to understand the different contexts in which
|
||||
1. A plugin that adds custom fields to be used with the [Form Builders](/docs/3.x/forms/installation/).
|
||||
2. A plugin that adds custom columns or filters to the [Table Builders](/docs/3.x/tables/installation/).
|
||||
|
||||
Although these are two different mental contexts to keep in mind when building plugins they can be used together inside the same plugin. They do not have to be mutually exclusive.
|
||||
Although these are two different mental contexts to keep in mind when building plugins, they can be used together inside the same plugin. They do not have to be mutually exclusive.
|
||||
|
||||
## Important Concepts
|
||||
|
||||
@@ -44,19 +44,19 @@ While you can certainly build plugins from scratch, we recommend using the [Fila
|
||||
|
||||
### Usage
|
||||
|
||||
To use the skeleton, simply go to the GitHub repo and click the "Use this template" button. This will create a new repo in your account with the skeleton code. After that you can clone the repo to your machine. Once you have the code on your machine, navigate to the root of the project and run the following command:
|
||||
To use the skeleton, simply go to the GitHub repo and click the "Use this template" button. This will create a new repo in your account with the skeleton code. After that, you can clone the repo to your machine. Once you have the code on your machine, navigate to the root of the project and run the following command:
|
||||
|
||||
```bash
|
||||
php ./configure.php
|
||||
```
|
||||
|
||||
This will ask you a series of questions to configure the plugin. Once you've answered all the questions the script will stub out a new plugin for you and you can begin to build your amazing new extension for Filament.
|
||||
This will ask you a series of questions to configure the plugin. Once you've answered all the questions, the script will stub out a new plugin for you, and you can begin to build your amazing new extension for Filament.
|
||||
|
||||
## Upgrading existing plugins
|
||||
|
||||
Since every plugin varies greatly in its scope of use and functionality, there is no one size fits all approach to upgrading existing plugins. However, one thing to note, that is consistent to all plugins is the deprecation of the `PluginServiceProvider`.
|
||||
Since every plugin varies greatly in its scope of use and functionality, there is no one size fits all approaches to upgrading existing plugins. However, one thing to note, that is consistent to all plugins is the deprecation of the `PluginServiceProvider`.
|
||||
|
||||
In your plugin service provider you will need to change it to extend the PackageServiceProvider instead. You will also need to add a static `$name` property to the service provider. This property is used to register the plugin with Filament. Here is an example of what your service provider might look like:
|
||||
In your plugin service provider, you will need to change it to extend the PackageServiceProvider instead. You will also need to add a static `$name` property to the service provider. This property is used to register the plugin with Filament. Here is an example of what your service provider might look like:
|
||||
|
||||
```php
|
||||
class MyPluginServiceProvider extends PackageServiceProvider
|
||||
|
||||
@@ -8,17 +8,17 @@ Please read the docs on [panel plugin development](/docs/3.x/panels/plugins) and
|
||||
|
||||
## Overview
|
||||
|
||||
In this walkthrough we'll build a simple plugin that adds a new form field that can be used in forms. This also means it will be available to users in their panels.
|
||||
In this walkthrough, we'll build a simple plugin that adds a new form field that can be used in forms. This also means it will be available to users in their panels.
|
||||
|
||||
You can find the final code for this plugin at [https://github.com/awcodes/clock-widget](https://github.com/awcodes/clock-widget).
|
||||
|
||||
## Step 1: Create the plugin
|
||||
|
||||
First we'll create the plugin using the steps outlined in the [getting started guide](/docs/3.x/support/plugins/getting-started#creating-a-plugin).
|
||||
First, we'll create the plugin using the steps outlined in the [getting started guide](/docs/3.x/support/plugins/getting-started#creating-a-plugin).
|
||||
|
||||
## Step 2: Clean Up
|
||||
|
||||
Next we'll clean up the plugin to remove the boilerplate code we don't need. This will seem like a lot, but since this is a simple plugin we can remove a lot of the boilerplate code.
|
||||
Next, we'll clean up the plugin to remove the boilerplate code we don't need. This will seem like a lot, but since this is a simple plugin, we can remove a lot of the boilerplate code.
|
||||
|
||||
Remove the following directories and files:
|
||||
1. `config`
|
||||
@@ -27,11 +27,11 @@ Remove the following directories and files:
|
||||
1. `src/Facades`
|
||||
1. `stubs`
|
||||
|
||||
Since our plugin doesn't have any settings or additional methods needed for functionality we can also remove the `ClockWidgetPlugin.php` file.
|
||||
Since our plugin doesn't have any settings or additional methods needed for functionality, we can also remove the `ClockWidgetPlugin.php` file.
|
||||
|
||||
1. `ClockWidgetPlugin.php`
|
||||
|
||||
Since Filament v3 recommends that users style their plugins with a custom filament theme we'll remove the files needed for using css in the plugin. This is optional, and you can still use css if you want, but it is not recommended.
|
||||
Since Filament v3 recommends that users style their plugins with a custom filament theme, we'll remove the files needed for using css in the plugin. This is optional, and you can still use css if you want, but it is not recommended.
|
||||
|
||||
1. `resources/css`
|
||||
1. `postcss.config.js`
|
||||
@@ -56,7 +56,7 @@ Now we can clean up our `composer.json` file to remove unneeded options.
|
||||
},
|
||||
```
|
||||
|
||||
Last step is to update the `package.json` file to remove unneeded options. Replace the contents of `package.json` with the following.
|
||||
The last step is to update the `package.json` file to remove unneeded options. Replace the contents of `package.json` with the following.
|
||||
|
||||
```json
|
||||
{
|
||||
@@ -82,9 +82,9 @@ You may also remove the Testing directories and files, but we'll leave them in f
|
||||
|
||||
## Step 3: Setting up the Provider
|
||||
|
||||
Now that we have our plugin cleaned up we can start adding our code. The boilerplate in the `src/ClockWidgetServiceProvider.php` file has a lot going on so, let's delete everything and start from scratch.
|
||||
Now that we have our plugin cleaned up, we can start adding our code. The boilerplate in the `src/ClockWidgetServiceProvider.php` file has a lot going on so, let's delete everything and start from scratch.
|
||||
|
||||
We need to be able to register our Widget with the panel and load our Alpine component when the widget is used. To do this we'll need to add the following to the `packageBooted` method in our service provider. This will register our widget component with Livewire and our Alpine component with the Filament Asset Manager.
|
||||
We need to be able to register our Widget with the panel and load our Alpine component when the widget is used. To do this, we'll need to add the following to the `packageBooted` method in our service provider. This will register our widget component with Livewire and our Alpine component with the Filament Asset Manager.
|
||||
|
||||
```php
|
||||
use Filament\Support\Assets\AlpineComponent;
|
||||
@@ -121,7 +121,7 @@ class ClockWidgetServiceProvider extends PackageServiceProvider
|
||||
|
||||
## Step 4: Create the Widget
|
||||
|
||||
Now we can create our widget. We'll first need to extend Filament's `Widget` class in our `ClockWidget.php` file and tell it where to find the view for the widget. Since we are using the PackageServiceProvider to register our views we can use the `::` syntax to tell Filament where to find the view.
|
||||
Now we can create our widget. We'll first need to extend Filament's `Widget` class in our `ClockWidget.php` file and tell it where to find the view for the widget. Since we are using the PackageServiceProvider to register our views, we can use the `::` syntax to tell Filament where to find the view.
|
||||
|
||||
```php
|
||||
use Filament\Widgets\Widget;
|
||||
@@ -132,7 +132,7 @@ class ClockWidget extends Widget
|
||||
}
|
||||
```
|
||||
|
||||
Next we'll need to create the view for our widget. Create a new file at `resources/views/widget.blade.php` and add the following code. We'll make use of Filament's blade components to save time on writing the html for the widget.
|
||||
Next, we'll need to create the view for our widget. Create a new file at `resources/views/widget.blade.php` and add the following code. We'll make use of Filament's blade components to save time on writing the html for the widget.
|
||||
|
||||
We are using async Alpine to load our Alpine component, so we'll need to add the `x-ignore` attribute to the div that will load our component. We'll also need to add the `ax-load` attribute to the div to tell Alpine to load our component. You can learn more about this in the [Core Concepts](/docs/3.x/support/plugins/core-concepts#alpine-components) section of the docs.
|
||||
|
||||
|
||||
@@ -8,17 +8,17 @@ Please read the docs on [panel plugin development](/docs/3.x/panels/plugins/) an
|
||||
|
||||
## Overview
|
||||
|
||||
In this walkthrough we'll build a simple plugin that adds a new form component that can be used in forms. This also means it will be available to users in their panels.
|
||||
In this walkthrough, we'll build a simple plugin that adds a new form component that can be used in forms. This also means it will be available to users in their panels.
|
||||
|
||||
You can find the final code for this plugin at [https://github.com/awcodes/headings](https://github.com/awcodes/headings).
|
||||
|
||||
## Step 1: Create the plugin
|
||||
|
||||
First we'll create the plugin using the steps outlined in the [getting started guide](/docs/3.x/support/plugins/getting-started#creating-a-plugin).
|
||||
First, we'll create the plugin using the steps outlined in the [getting started guide](/docs/3.x/support/plugins/getting-started#creating-a-plugin).
|
||||
|
||||
## Step 2: Clean Up
|
||||
|
||||
Next we'll clean up the plugin to remove the boilerplate code we don't need. This will seem like a lot, but since this is a simple plugin we can remove a lot of the boilerplate code.
|
||||
Next, we'll clean up the plugin to remove the boilerplate code we don't need. This will seem like a lot, but since this is a simple plugin, we can remove a lot of the boilerplate code.
|
||||
|
||||
Remove the following directories and files:
|
||||
1. `bin`
|
||||
@@ -88,9 +88,9 @@ You may also remove the testing directories and files, but we'll leave them in f
|
||||
|
||||
## Step 3: Setting up the Provider
|
||||
|
||||
Now that we have our plugin cleaned up we can start adding our code. The boilerplate in the `src/HeadingsServiceProvider.php` file has a lot going on so, let's delete everything and start from scratch.
|
||||
Now that we have our plugin cleaned up, we can start adding our code. The boilerplate in the `src/HeadingsServiceProvider.php` file has a lot going on so, let's delete everything and start from scratch.
|
||||
|
||||
We need to be able to register our stylesheet with the Filament Asset Manager so that we can load it on demand in our blade view. To do this we'll need to add the following to the `packageBooted` method in our service provider.
|
||||
We need to be able to register our stylesheet with the Filament Asset Manager so that we can load it on demand in our blade view. To do this, we'll need to add the following to the `packageBooted` method in our service provider.
|
||||
|
||||
***Note the `loadedOnRequest()` method. This is important, because it tells Filament to only load the stylesheet when it's needed.***
|
||||
|
||||
@@ -123,7 +123,7 @@ class HeadingsServiceProvider extends PackageServiceProvider
|
||||
|
||||
## Step 4: Creating our component
|
||||
|
||||
Next we'll need to create our component. Create a new file at `src/Heading.php` and add the following code.
|
||||
Next, we'll need to create our component. Create a new file at `src/Heading.php` and add the following code.
|
||||
|
||||
```php
|
||||
namespace Awcodes\Headings;
|
||||
@@ -193,9 +193,9 @@ class Heading extends Component
|
||||
|
||||
## Step 5: Rendering our component
|
||||
|
||||
Next we'll need to create the view for our component. Create a new file at `resources/views/heading.blade.php` and add the following code.
|
||||
Next, we'll need to create the view for our component. Create a new file at `resources/views/heading.blade.php` and add the following code.
|
||||
|
||||
We are using x-load to asynchronously load or stylesheet, so it's only loaded when necessary. You can learn more about this in the [Core Concepts](docs/3.x/support/assets#lazy-loading-css) section of the docs.
|
||||
We are using x-load to asynchronously load stylesheet, so it's only loaded when necessary. You can learn more about this in the [Core Concepts](docs/3.x/support/assets#lazy-loading-css) section of the docs.
|
||||
|
||||
```blade
|
||||
@php
|
||||
|
||||
@@ -53,7 +53,7 @@ Alternatively, you can use an Alpine.js expression to trigger the error state, b
|
||||
|
||||
## Disabling the input
|
||||
|
||||
To disable the input, you must also pass the `disabled` attribute to the affixes component:
|
||||
To disable the input, you must also pass the `disabled` attribute to the wrapper component:
|
||||
|
||||
```blade
|
||||
<x-filament::input.wrapper disabled>
|
||||
|
||||
@@ -86,7 +86,7 @@ You can add an [icon](https://blade-ui-kit.com/blade-icons?set=1#search) to a mo
|
||||
</x-filament::modal>
|
||||
```
|
||||
|
||||
By default, the color of a icon is "primary". You can change it to be `danger`, `gray`, `info`, `success` or `warning` by using the `icon-color` attribute:
|
||||
By default, the color of an icon is "primary". You can change it to be `danger`, `gray`, `info`, `success` or `warning` by using the `icon-color` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::modal
|
||||
|
||||
@@ -24,7 +24,7 @@ The tabs component allows you to render a set of tabs, which can be used to togg
|
||||
|
||||
## Triggering the active state of the tab
|
||||
|
||||
By default tabs do not appear "active". To make a tab appear active, you can use the `active` attribute:
|
||||
By default, tabs do not appear "active". To make a tab appear active, you can use the `active` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::tabs>
|
||||
|
||||
@@ -5,15 +5,15 @@ import AutoScreenshot from "@components/AutoScreenshot.astro"
|
||||
|
||||
## Overview
|
||||
|
||||
Filament's table package allows you to [add an interactive datatable to any Livewire component](adding-a-table-to-a-livewire-component). It's also used within other Filament packages, such as the [panel builder](../panels) for displaying [resources](../panels/resources/getting-started) and [relation managers](../panels/resources/relation-managers), as well as for the [table widget](../panels/dashboard#table-widgets). Learning the features of the table builder will be incredibly time-saving when both building your own custom Livewire tables and using Filament's other packages.
|
||||
Filament's Table Builder package allows you to [add an interactive datatable to any Livewire component](adding-a-table-to-a-livewire-component). It's also used within other Filament packages, such as the [Panel Builder](../panels) for displaying [resources](../panels/resources/getting-started) and [relation managers](../panels/resources/relation-managers), as well as for the [table widget](../panels/dashboard#table-widgets). Learning the features of the Table Builder will be incredibly time-saving when both building your own custom Livewire tables and using Filament's other packages.
|
||||
|
||||
This guide will walk you through the basics of building tables with Filament's table package. If you're planning to add a new table to your own Livewire component, you should [do that first](adding-a-table-to-a-livewire-component) and then come back. If you're adding a table to an [app resource](../panels/resources/getting-started), or another Filament package, you're ready to go!
|
||||
|
||||
## Defining table columns
|
||||
|
||||
The basis of any table are rows and columns. Filament uses Eloquent to get the data for rows in the table, and you are responsible for defining the columns that are used in that row.
|
||||
The basis of any table is rows and columns. Filament uses Eloquent to get the data for rows in the table, and you are responsible for defining the columns that are used in that row.
|
||||
|
||||
Filament includes many column types prebuilt for you, and you can [view a full list here](columns/getting-started#available-columns). You can even [create your own custom column types](columns/custom) to display data however you need.
|
||||
Filament includes many column types prebuilt for you, and you can [view a full list here](columns/getting-started#available-columns). You can even [create your own custom column types](columns/custom) to display data in whatever way you need.
|
||||
|
||||
Columns are stored in an array, as objects within the `$table->columns()` method:
|
||||
|
||||
@@ -76,7 +76,7 @@ TextColumn::make('author.name')
|
||||
|
||||
<AutoScreenshot name="tables/getting-started/relationship-columns" alt="Table with relationship column" version="3.x" />
|
||||
|
||||
In this case, Filament will search for an `author` relationship on the `Post` model, and then display the `name` attribute of that relationship. We call this "dot notation" - you can use it to display any attribute of any relationship, even nested distant relationships. This dot notation is used by Filament to eager-load the results of that relationship for you.
|
||||
In this case, Filament will search for an `author` relationship on the `Post` model, and then display the `name` attribute of that relationship. We call this "dot notation" - you can use it to display any attribute of any relationship, even nested distant relationships. Filament uses this dot notation to eager-load the results of that relationship for you.
|
||||
|
||||
## Defining table filters
|
||||
|
||||
@@ -115,11 +115,11 @@ The first filter is rendered as a checkbox. When it's checked, only featured row
|
||||
|
||||
The second filter is rendered as a select dropdown. When a user selects an option, only rows with that status will be displayed. When no option is selected, all rows will be displayed.
|
||||
|
||||
It's possible to define as many filters as you need, and use any component from the [forms package](../forms) to create a UI. For example, you could create [a custom date range filter](../filters#custom-filter-forms).
|
||||
It's possible to define as many filters as you need, and use any component from the [Form Builder package](../forms) to create a UI. For example, you could create [a custom date range filter](../filters#custom-filter-forms).
|
||||
|
||||
## Defining table actions
|
||||
|
||||
Filament's tables can use [actions](../actions/overview). They are buttons that can be added to the [end of any table row](actions#row-actions), or even in the [header](actions#header-actions) of a table. For instance, you may want an action to "create" a new record in the header, and then "edit" and "delete" actions on each row. [Bulk actions](actions#bulk-actions) can be used to execute code when records in the table are selected.
|
||||
Filament's tables can use [Actions](../actions/overview). They are buttons that can be added to the [end of any table row](actions#row-actions), or even in the [header](actions#header-actions) of a table. For instance, you may want an action to "create" a new record in the header, and then "edit" and "delete" actions on each row. [Bulk actions](actions#bulk-actions) can be used to execute code when records in the table are selected.
|
||||
|
||||
```php
|
||||
use App\Models\Post;
|
||||
@@ -163,15 +163,15 @@ We also define a bulk action. When bulk actions are defined, each row in the tab
|
||||
|
||||
<AutoScreenshot name="tables/getting-started/actions-modal" alt="Table with action modal open" version="3.x" />
|
||||
|
||||
Actions can also open modals to request confirmation from the user, as well as render forms inside to collect extra data. It's a good idea to read the [actions documentation](../actions/overview) to learn more about their extensive capabilities throughout Filament.
|
||||
Actions can also open modals to request confirmation from the user, as well as render forms inside to collect extra data. It's a good idea to read the [Actions documentation](../actions/overview) to learn more about their extensive capabilities throughout Filament.
|
||||
|
||||
## Next steps with the tables package
|
||||
## Next steps with the Table Builder package
|
||||
|
||||
Now you've finished reading this guide, where to next? Here are some suggestions:
|
||||
|
||||
- [Explore the available columns to display data in your table.](columns/getting-started#available-columns)
|
||||
- [Deep dive into table actions and start using modals.](actions)
|
||||
- [Discover how to build complex, responsive table layouts without touching CSS.](layout)
|
||||
- [Add summaries to your tables, which give an overview of the data inside of them.](summaries)
|
||||
- [Add summaries to your tables, which give an overview of the data inside them.](summaries)
|
||||
- [Find out about all advanced techniques that you can customize tables to your needs.](advanced)
|
||||
- [Write automated tests for your tables using our suite of helper methods.](testing)
|
||||
|
||||
@@ -141,7 +141,7 @@ public function table(Table $table): Table
|
||||
|
||||
## Searching
|
||||
|
||||
Columns may be searchable, by using the text input field in the top right of the table. To make a column searchable, you must use the `searchable()` method:
|
||||
Columns may be searchable by using the text input field in the top right of the table. To make a column searchable, you must use the `searchable()` method:
|
||||
|
||||
```php
|
||||
use Filament\Tables\Columns\TextColumn;
|
||||
|
||||
@@ -133,7 +133,7 @@ TextColumn::make('description')
|
||||
return null;
|
||||
}
|
||||
|
||||
// Only render the tooltip if the column contents exceeds the length limit.
|
||||
// Only render the tooltip if the column content exceeds the length limit.
|
||||
return $state;
|
||||
})
|
||||
```
|
||||
@@ -305,7 +305,7 @@ TextColumn::make('title')
|
||||
|
||||
## Customizing the font weight
|
||||
|
||||
Text columns have regular font weight by default but you may change this to any of the the following options: `FontWeight::Thin`, `FontWeight::ExtraLight`, `FontWeight::Light`, `FontWeight::Medium`, `FontWeight::SemiBold`, `FontWeight::Bold`, `FontWeight::ExtraBold` or `FontWeight::Black`.
|
||||
Text columns have regular font weight by default, but you may change this to any of the following options: `FontWeight::Thin`, `FontWeight::ExtraLight`, `FontWeight::Light`, `FontWeight::Medium`, `FontWeight::SemiBold`, `FontWeight::Bold`, `FontWeight::ExtraBold` or `FontWeight::Black`.
|
||||
|
||||
For instance, you may make the font bold using `weight(FontWeight::Bold)`:
|
||||
|
||||
|
||||
@@ -131,7 +131,7 @@ ImageColumn::make('colleagues.avatar')
|
||||
|
||||
## Setting a limit
|
||||
|
||||
You may set a limit of the maximum number of images you want to display by passing `limit()`:
|
||||
You may limit the maximum number of images you want to display by passing `limit()`:
|
||||
|
||||
```php
|
||||
use Filament\Tables\Columns\ImageColumn;
|
||||
@@ -162,7 +162,7 @@ ImageColumn::make('colleagues.avatar')
|
||||
|
||||
#### Showing the limited remaining text separately
|
||||
|
||||
By default, `limitedRemainingText()` will display the count of remaining images as a number stacked on the other images. If you prefer to show the count as a number after the images you may use the `isSeparate: true` parameter:
|
||||
By default, `limitedRemainingText()` will display the count of remaining images as a number stacked on the other images. If you prefer to show the count as a number after the images, you may use the `isSeparate: true` parameter:
|
||||
|
||||
```php
|
||||
use Filament\Tables\Columns\ImageColumn;
|
||||
|
||||
@@ -248,7 +248,7 @@ TernaryFilter::make('trashed')
|
||||
|
||||
### Custom filter forms
|
||||
|
||||
You may use components from the [form builder](../forms/fields/getting-started) to create custom filter forms. The data from the custom filter form is available in the `$data` array of the `query()` callback:
|
||||
You may use components from the [Form Builder](../forms/fields/getting-started) to create custom filter forms. The data from the custom filter form is available in the `$data` array of the `query()` callback:
|
||||
|
||||
```php
|
||||
use Filament\Forms\Components\DatePicker;
|
||||
@@ -394,7 +394,7 @@ public function table(Table $table): Table
|
||||
|
||||
## Controlling the maximum height of the filters dropdown
|
||||
|
||||
To add a maximum height to the filters dropdown content, so that they scroll, you may use the `filtersFormMaxHeight()` method, passing a [CSS length](https://developer.mozilla.org/en-US/docs/Web/CSS/length):
|
||||
To add a maximum height to the filters' dropdown content, so that they scroll, you may use the `filtersFormMaxHeight()` method, passing a [CSS length](https://developer.mozilla.org/en-US/docs/Web/CSS/length):
|
||||
|
||||
```php
|
||||
use Filament\Tables\Table;
|
||||
@@ -519,7 +519,7 @@ TernaryFilter::make('trashed')
|
||||
|
||||
## Customizing the filters dropdown trigger action
|
||||
|
||||
To customize the filters dropdown trigger button, you may use the `filtersTriggerAction()` method, passing a closure that returns an action. All methods that are available to [customize action trigger buttons](../actions/trigger-button) can be used:
|
||||
To customize the filters' dropdown trigger buttons, you may use the `filtersTriggerAction()` method, passing a closure that returns an action. All methods that are available to [customize action trigger buttons](../actions/trigger-button) can be used:
|
||||
|
||||
```php
|
||||
use Filament\Tables\Actions\Action;
|
||||
|
||||
@@ -5,7 +5,7 @@ import AutoScreenshot from "@components/AutoScreenshot.astro"
|
||||
|
||||
## Overview
|
||||
|
||||
Filament's tables can use [actions](../actions). They are buttons that can be added to the [end of any table row](#row-actions), or even in the [header](#header-actions) of a table. For instance, you may want an action to "create" a new record in the header, and then "edit" and "delete" actions on each row. [Bulk actions](#bulk-actions) can be used to execute code when records in the table are selected. Additionally, actions can be added to any [table column](#column-actions), such that each cell in that column is a trigger for your action.
|
||||
Filament's tables can use [Actions](../actions). They are buttons that can be added to the [end of any table row](#row-actions), or even in the [header](#header-actions) of a table. For instance, you may want an action to "create" a new record in the header, and then "edit" and "delete" actions on each row. [Bulk actions](#bulk-actions) can be used to execute code when records in the table are selected. Additionally, actions can be added to any [table column](#column-actions), such that each cell in that column is a trigger for your action.
|
||||
|
||||
It's highly advised that you read the documentation about [customizing action trigger buttons](../actions/trigger-button) and [action modals](../actions/modals) to that you are aware of the full capabilities of actions.
|
||||
|
||||
@@ -86,7 +86,7 @@ public function table(Table $table): Table
|
||||
|
||||
## Bulk actions
|
||||
|
||||
Tables also support "bulk actions". These can be used when the user selects rows int the table. Traditionally, when rows are selected, a "bulk actions" button appears in the top left corner of the table. When the user clicks this button, they are presented with a dropdown menu of actions to choose from. You can put them in the `$table->bulkActions()` method:
|
||||
Tables also support "bulk actions". These can be used when the user selects rows in the table. Traditionally, when rows are selected, a "bulk actions" button appears in the top left corner of the table. When the user clicks this button, they are presented with a dropdown menu of actions to choose from. You can put them in the `$table->bulkActions()` method:
|
||||
|
||||
```php
|
||||
use Filament\Tables\Table;
|
||||
@@ -117,7 +117,7 @@ The function allows you to access the current table `$records` that are selected
|
||||
|
||||
### Grouping bulk actions
|
||||
|
||||
You may use a `BulkActionGroup` object to [group multiple bulk actions together](../actions/grouping-actions) in a dropdown. Any bulk actions that remain outside of the `BulkActionGroup` will be rendered next to the dropdown's trigger button:
|
||||
You may use a `BulkActionGroup` object to [group multiple bulk actions together](../actions/grouping-actions) in a dropdown. Any bulk actions that remain outside the `BulkActionGroup` will be rendered next to the dropdown's trigger button:
|
||||
|
||||
```php
|
||||
use Filament\Tables\Actions\BulkAction;
|
||||
@@ -258,7 +258,7 @@ public function table(Table $table): Table
|
||||
|
||||
<AutoScreenshot name="tables/actions/group" alt="Table with action group" version="3.x" />
|
||||
|
||||
### Choosing a action group button style
|
||||
### Choosing an action group button style
|
||||
|
||||
Out of the box, action group triggers have 3 styles - "button", "link", and "icon button".
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ import AutoScreenshot from "@components/AutoScreenshot.astro"
|
||||
|
||||
## The problem with traditional table layouts
|
||||
|
||||
Traditional tables are notorious for having bad responsivity. On mobile, there is only so much flexibility you have when rending content that is horizontally long:
|
||||
Traditional tables are notorious for having bad responsiveness. On mobile, there is only so much flexibility you have when rending content that is horizontally long:
|
||||
|
||||
- Allow the user to scroll horizontally to see more table content
|
||||
- Hide non-important columns on smaller devices
|
||||
|
||||
@@ -47,7 +47,7 @@ Filament ships with four types of summarizer:
|
||||
- [Range](#range)
|
||||
- [Sum](#sum)
|
||||
|
||||
You may also [create your own custom summarizers](#custom-summaries) to display data however you wish.
|
||||
You may also [create your own custom summarizers](#custom-summaries) to display data in whatever way you wish.
|
||||
|
||||
## Average
|
||||
|
||||
|
||||
@@ -59,7 +59,7 @@ public function table(Table $table): Table
|
||||
|
||||
## Adding empty state actions
|
||||
|
||||
You can add [actions](actions) to the empty state to prompt users to take action. Pass these to the `emptyStateActions()` method:
|
||||
You can add [Actions](actions) to the empty state to prompt users to take action. Pass these to the `emptyStateActions()` method:
|
||||
|
||||
```php
|
||||
use Filament\Tables\Actions\Action;
|
||||
|
||||
@@ -53,7 +53,7 @@ public function table(Table $table): Table
|
||||
|
||||
You may use simple pagination by overriding `paginateTableQuery()` method.
|
||||
|
||||
First, locate your Livewire component. If you're using a resource from the panel builder and you want to add simple pagination to the List page, you'll want to open the `Pages/List.php` file in the resource, not the resource class itself.
|
||||
First, locate your Livewire component. If you're using a resource from the Panel Builder and you want to add simple pagination to the List page, you'll want to open the `Pages/List.php` file in the resource, not the resource class itself.
|
||||
|
||||
```php
|
||||
use Illuminate\Contracts\Pagination\Paginator;
|
||||
|
||||
@@ -117,11 +117,11 @@ Now that the table is using a relationship instead of a plain Eloquent query, al
|
||||
|
||||
If your relationship uses a pivot table, you can use all pivot columns as if they were normal columns on your table, as long as they are listed in the `withPivot()` method of the relationship *and* inverse relationship definition.
|
||||
|
||||
Relationship tables are used in the panel builder as ["relation managers"](../panels/resources/relation-managers#creating-a-relation-manager). Most of the documented features for relation managers are also available for relationship tables. For instance, the [attach and detach](../panels/resources/relation-managers#attaching-and-detaching-records) and [associate and dissociate](../panels/resources/relation-managers#associating-and-dissociating-records) actions.
|
||||
Relationship tables are used in the Panel Builder as ["relation managers"](../panels/resources/relation-managers#creating-a-relation-manager). Most of the documented features for relation managers are also available for relationship tables. For instance, [attaching and detaching](../panels/resources/relation-managers#attaching-and-detaching-records) and [associating and dissociating](../panels/resources/relation-managers#associating-and-dissociating-records) actions.
|
||||
|
||||
## Generating table Livewire components with the CLI
|
||||
|
||||
It's advised that you learn how to set up a Livewire component with the table builder manually, but once you are confident, you can use the CLI to generate a table for you.
|
||||
It's advised that you learn how to set up a Livewire component with the Table Builder manually, but once you are confident, you can use the CLI to generate a table for you.
|
||||
|
||||
```bash
|
||||
php artisan make:livewire-table Products/ListProducts
|
||||
@@ -137,4 +137,4 @@ Filament is also able to guess which table columns you want in the table, based
|
||||
php artisan make:livewire-table Products/ListProducts --generate
|
||||
```
|
||||
|
||||
> If your table contains ENUM columns, the `doctrine/dbal` package we use is unable to scan your table and will crash. Hence Filament is unable to generate the schema for your table if it contains an ENUM column. Read more about this issue [here](https://github.com/doctrine/dbal/issues/3819#issuecomment-573419808).
|
||||
> If your table contains ENUM columns, the `doctrine/dbal` package we use is unable to scan your table and will crash. Hence, Filament is unable to generate the schema for your table if it contains an ENUM column. Read more about this issue [here](https://github.com/doctrine/dbal/issues/3819#issuecomment-573419808).
|
||||
|
||||
@@ -6,7 +6,7 @@ title: Testing
|
||||
|
||||
All examples in this guide will be written using [Pest](https://pestphp.com). However, you can easily adapt this to PHPUnit.
|
||||
|
||||
Since the table builder works on Livewire components, you can use the [Livewire testing helpers](https://livewire.laravel.com/docs/testing). However, we have many custom testing helpers that you can use for tables:
|
||||
Since the Table Builder works on Livewire components, you can use the [Livewire testing helpers](https://livewire.laravel.com/docs/testing). However, we have many custom testing helpers that you can use for tables:
|
||||
|
||||
## Render
|
||||
|
||||
@@ -20,7 +20,7 @@ it('can render page', function () {
|
||||
});
|
||||
```
|
||||
|
||||
To to test which records are shown, you can use `assertCanSeeTableRecords()`, `assertCanNotSeeTableRecords()` and `assertCountTableRecords()`:
|
||||
To test which records are shown, you can use `assertCanSeeTableRecords()`, `assertCanNotSeeTableRecords()` and `assertCountTableRecords()`:
|
||||
|
||||
```php
|
||||
use function Pest\Livewire\livewire;
|
||||
@@ -70,7 +70,7 @@ it('can not render post comments', function () {
|
||||
});
|
||||
```
|
||||
|
||||
This helper will assert that the HTML for this column, is not shown by default in the present table.
|
||||
This helper will assert that the HTML for this column is not shown by default in the present table.
|
||||
|
||||
### Sorting
|
||||
|
||||
@@ -209,7 +209,7 @@ it('has the correct descriptions above and below author', function () {
|
||||
|
||||
### Extra Attributes
|
||||
|
||||
To ensure that a column has the correct extra attributes you can use the `assertTableColumnHasExtraAttributes()` and `assertTableColumnDoesNotHaveExtraAttributes()` methods:
|
||||
To ensure that a column has the correct extra attributes, you can use the `assertTableColumnHasExtraAttributes()` and `assertTableColumnDoesNotHaveExtraAttributes()` methods:
|
||||
|
||||
```php
|
||||
use function Pest\Livewire\livewire;
|
||||
@@ -570,7 +570,7 @@ it('delete actions have correct icons', function () {
|
||||
});
|
||||
```
|
||||
|
||||
To ensure an action or bulk action's button is displaying the right color, you can use `assertTableActionHasColor()` / `assertTableBulkActionHasColor()` or `assertTableActionDoesNotHaveColor()` / `assertTableBulkActionDoesNotHaveColor()`:
|
||||
To ensure that an action or bulk action's button is displaying the right color, you can use `assertTableActionHasColor()` / `assertTableBulkActionHasColor()` or `assertTableActionDoesNotHaveColor()` / `assertTableBulkActionDoesNotHaveColor()`:
|
||||
|
||||
```php
|
||||
use function Pest\Livewire\livewire;
|
||||
@@ -619,7 +619,7 @@ it('can average values in a column', function () {
|
||||
});
|
||||
```
|
||||
|
||||
The first argument is the column name, the second is the summarizer ID and the third is the expected value.
|
||||
The first argument is the column name, the second is the summarizer ID, and the third is the expected value.
|
||||
|
||||
You may set a summarizer ID by passing it to the `make()` method:
|
||||
|
||||
|
||||
@@ -33,7 +33,7 @@ Make sure to carefully follow the instructions, and review the changes made by t
|
||||
|
||||
Finally, you must run `php artisan filament:install` to finalize the Filament v3 installation. This command must be run for all new Filament projects.
|
||||
|
||||
You can now `composer remove filament/upgrade` as you don't need it any more.
|
||||
You can now `composer remove filament/upgrade` as you don't need it anymore.
|
||||
|
||||
> Some plugins you're using may not be available in v3 just yet. You could temporarily remove them from your `composer.json` file until they've been upgraded, replace them with a similar plugins that are v3-compatible, wait for the plugins to be upgraded before upgrading your app, or even write PRs to help the authors upgrade them.
|
||||
|
||||
@@ -45,7 +45,7 @@ Since Livewire v3 is still in beta, set the `minimum-stability` in your `compose
|
||||
"minimum-stability": "dev",
|
||||
```
|
||||
|
||||
### High impact changes
|
||||
### High-impact changes
|
||||
|
||||
#### Config file renamed and combined with other Filament packages
|
||||
|
||||
|
||||
@@ -137,9 +137,9 @@ protected static ?string $pollingInterval = null;
|
||||
|
||||
## Disabling lazy loading
|
||||
|
||||
By default, widgets are lazy loaded. This means that they will only be loaded when they are visible on the page.
|
||||
By default, widgets are lazy-loaded. This means that they will only be loaded when they are visible on the page.
|
||||
|
||||
To disable this behaviour, you may override the `$isLazy` property on the widget class:
|
||||
To disable this behavior, you may override the `$isLazy` property on the widget class:
|
||||
|
||||
```php
|
||||
protected static bool $isLazy = true;
|
||||
|
||||
@@ -245,9 +245,9 @@ public function getDescription(): ?string
|
||||
|
||||
## Disabling lazy loading
|
||||
|
||||
By default, widgets are lazy loaded. This means that they will only be loaded when they are visible on the page.
|
||||
By default, widgets are lazy-loaded. This means that they will only be loaded when they are visible on the page.
|
||||
|
||||
To disable this behaviour, you may override the `$isLazy` property on the widget class:
|
||||
To disable this behavior, you may override the `$isLazy` property on the widget class:
|
||||
|
||||
```php
|
||||
protected static bool $isLazy = true;
|
||||
|
||||
Reference in New Issue
Block a user