or send us a message

UI Component Grids – Magento2 UI Bookmarks and their effects

Written by: Tom Dollar, On: Thursday 18th July 2019

One of the many useful features of Magento 2 is when filtering the data in an admin grid and you apply filters or order by a particular column; the next time you visit that grid, even after a long period of time has elapsed, those same filters will still be applied.

How is this done? When you apply filters or order by a particular column, a record of your action is saved to a table in the database. The table is “ui_bookmark”. If you run a query as follows, you’ll see all the bookmarks for every user:


SELECT * FROM db.ui_bookmark;
  

Magento2 UI Component Bookmarks

As you can see from the above snippet, a record is saved for each applicable grid view (sales order grid shown as an example) and each user. Within the “config” field for each row, you’ll see data with filters that are currently active, active sorting options, user-defined column positioning plus more.

An example snippet as below – NB: as the name suggests, the corresponding “identifier”: “current” rows relate to currently active filters, etc.


{"current":{"search":{"value":""},"filters":{"applied":{"placeholder":true,"billing_name":"test name"}},"columns":{"increment_id":{"visible":true,"sorting":false},"store_id":{"visible":true,"sorting":false},"billing_name":{"visible":true,"sorting":false}…
 

In the example snippet above, a “Bill-to-name” filter with “test name” as the query had been applied.

It’s useful to know, because when working with UI components, it’s quite common to rearrange the columns into a default position using the sort item config node, as below:


<item name="sortOrder" xsi:type="number">10</item>



However, retrospectively adjusting the default sort order of these columns can sometimes have no visual effect on a grid whatsoever if you’ve visited that grid before using your admin account. This is because there is already an entry in the “ui_bookmark” table for your user ID on that particular grid view.

A classic example is adding a new column in the UI component XML file, assigning a low sort order – so it should be showing toward the beginning of the columns. Yet when you go to view the grid, the new column is showing last – to the very right of the grid.

The solution? Delete the row in the “ui_bookmark” table which corresponds to your user ID and the grid you’re viewing.

The safest way of doing this is of course using the corresponding UI Bookmark repository. An example section of a new class would be:


public function __construct(
    ........
    \Magento\Ui\Api\BookmarkRepositoryInterface $bookmarkRepository,
    ........
) {
    ......
    $this->_bookmarkRepository = $bookmarkRepository;
    ......
}
public function deleteBookmark($bookmarkId)
{
    $bookmark = $this->_bookmarkRepository->getById($bookmarkId);
    $this->_bookmarkRepository->delete($bookmarkId);
}




You’ll need to make a note of the “bookmark_id” that you need to delete. You could of course also retrieve bookmark ID’s via other methods – such as via a factory where you could apply the user ID and namespace filters, then iterate through the collection and parse in the ID dynamically to the above example method. You may also want to put in some additional checks to ensure the bookmark exists before attempting to delete it, etc.

Once the record(s) is/are deleted, you should revisit the grid in question. The columns should now be appearing in the order you’ve designated in the UI component XML file.

Happy coding!

Pixie Media

We are a Devon's first and only Magento Partner Agency. With over 18 years experience, we offer complete digital solutions to ecommerce clients across the globe.

Magento Business Partner
Pixie Media - Devon's first Magento Partner Agency
Certified Magento Developers
Our Key Partners