Customizing Grids¶

Note

We assume that you are familiar with grids. If not check the documentation of the GridBundle first.

Tip

You can browse the full implementation of these examples on this GitHub Pull Request.

Why would you customize grids?¶

When you would like to change how the index view of an entity looks like in the administration panel, then you have to override its grid.

  • remove a field from a grid
  • change a field of a grid
  • reorder fields
  • override an entire grid

How to customize grids?¶

Tip

One way to change anything in any grid in Sylius is to modify a special file in the config/packages/ directory: config/packages/_sylius.yaml.

How to customize fields of a grid?¶

How to remove a field from a grid?¶

If you would like to remove a field from an existing Sylius grid, you will need to disable it in the config/packages/_sylius.yaml.

Let’s imagine that we would like to hide the title of product review field on the sylius_admin_product_review grid.

# config/packages/_sylius.yaml
sylius_grid:
    grids:
        sylius_admin_product_review:
            fields:
                title:
                    enabled: false

That’s all. Now the title field will be disabled (invisible).

How to modify a field of a grid?¶

If you would like to modify for instance a label of any field from a grid, that’s what you need to do:

# config/packages/_sylius.yaml
sylius_grid:
    grids:
        sylius_admin_product_review:
            fields:
                date:
                    label: "When was it added?"

Good practices is translate labels, look here. how to do that

How to customize filters of a grid?¶

How to remove a filter from a grid?¶

If you would like to remove a filter from an existing Sylius grid, you will need to disable it in the config/packages/_sylius.yaml.

Let’s imagine that we would like to hide the titles filter of product reviews on the sylius_admin_product_review grid.

# config/packages/_sylius.yaml
sylius_grid:
    grids:
        sylius_admin_product_review:
            filters:
                title:
                    enabled: false

That’s all. Now the title filter will be disabled.

How to customize actions of a grid?¶

How to remove an action from a grid?¶

If you would like to disable some actions in any grid, you just need to set its enabled option to false like below:

# config/packages/_sylius.yaml
sylius_grid:
    grids:
        sylius_admin_product_review:
            actions:
                item:
                    delete:
                        type: delete
                        enabled: false

How to modify an action of a grid?¶

If you would like to change the link to which an action button is redirecting, this is what you have to do:

Warning

The show button does not exist in the sylius_admin_product grid by default. It is assumed that you already have it customized, and your grid has the show action.

# config/packages/_sylius.yaml
sylius_grid:
    grids:
        sylius_admin_product:
            actions:
                item:
                    show:
                        type: show
                        label: Show in the shop
                        options:
                            link:
                                route: sylius_shop_product_show
                                parameters:
                                    slug: resource.slug

The above grid modification will change the redirect of the show action to redirect to the shop, instead of admin show. Also the label was changed here.

How to remove label of an action from a grid?¶

If you would like to remove label for some actions in any grid, you just need to set its labeled option to false like below:

# config/packages/_sylius.yaml
sylius_grid:
    grids:
        sylius_admin_product_review:
            actions:
                item:
                    delete:
                        type: delete
                        options:
                            labeled: false

How to modify positions of fields, filters and actions in a grid?¶

For fields, filters and actions it is possible to easily change the order in which they are displayed in the grid.

See an example of fields order modification on the sylius_admin_product_review grid below:

# config/packages/_sylius.yaml
sylius_grid:
    grids:
        sylius_admin_product_review:
            fields:
                date:
                    position: 5
                title:
                    position: 6
                rating:
                    position: 3
                status:
                    position: 1
                reviewSubject:
                    position: 2
                author:
                    position: 4

Customizing grids by events¶

There is also another way to customize grids: via events. Every grid configuration dispatches an event when its definition is being converted.

For example, sylius_admin_product grid dispatches such an event:

sylius.grid.admin_product # For the grid of products in admin

To show you an example of a grid customization using events, we will modify fields from a grid using that method. Here are the steps, that you need to take:

1. In order to modify fields from the product grid in Sylius you have to create a App\Grid\AdminProductsGridListener class.

In the example below we are removing the image field and adding the code field to the sylius_admin_product grid.

<?php

namespace App\Grid;

use Sylius\Component\Grid\Event\GridDefinitionConverterEvent;
use Sylius\Component\Grid\Definition\Field;

final class AdminProductsGridListener
{
    public function editFields(GridDefinitionConverterEvent $event): void
    {
        $grid = $event->getGrid();

        // Remove
        $grid->removeField('image');

        // Add
        $codeField = Field::fromNameAndType('code', 'string');
        $codeField->setLabel('Code');
        // ...
        $grid->addField($codeField);
    }
}

2. After creating your class with a proper method for the grid customizations you need, subscribe your listener to the sylius.grid.admin_product event in the config/services.yaml.

# config/services.yaml
services:
    App\Grid\AdminProductsGridListener:
        tags:
            - { name: kernel.event_listener, event: sylius.grid.admin_product, method: editFields }

3. Result:

After these two steps your admin product grid should not have the image field.

Good to know¶

See also

All the customizations can be done either in your application directly or in Plugins!