Close [x]

Bookmark Component

Edit this page on GitHub

UI Bookmark component

Bookmark Component is responsible for storing active and changed states of data grids. It includes state of filters, columns position, applied sorting, pagination, and so on.

Bookmark Component use DB as persistence storage for grid`s state.

Field name Type Description
(PK) bookmark_id int(10) Bookmark identifier
(UX1) user_id int(10) User Id
(UX1) namespace varchar(255) Bookmark namespace
(UX1) identifier varchar(255) Bookmark identifier
current smallint(6) Mark current bookmark per user, namespace and identifier
title varchar(255) Bookmark title
config longtext Bookmark config (JSON config for Js Bookmark component)
created_at datetime Bookmark created at time
updated_at datetime Bookmark updated at time

PK - increment Id

UX1 - unique key

Bookmarks JS Component Structure

Bookmark component consists of

  • Collection of bookmarks located at app\code\Magento\Ui\view\base\web\js\grid\controls\bookmarks\bookmarks.js

    Template for collection at app\code\Magento\Ui\view\base\web\templates\grid\controls\bookmarks\bookmarks.html

  • Child elements which represent a separate view located at app\code\Magento\Ui\view\base\web\js\grid\controls\bookmarks\view.js

    Template for child element at app\code\Magento\Ui\view\base\web\templates\grid\controls\bookmarks\view.html

Bookmarks use app\code\Magento\Ui\view\base\web\js\grid\controls\bookmarks\storage.js custom data storage which allows saving bookmark state externally (saved bookmarks are available on any device and in any browser).

The Bookmark component provides the following options:

  • template option
  • component option
templates: {
    view: {
        component: 'Magento_Ui/js/grid/controls/bookmarks/view'
        template: 'path/to/template'
    },
    newView: {
        label: 'New View',
        index: '${ Date.now() }'
    }
}
  • storageConfig option
storageConfig: {
    saveUrl: 'path/to/save',
    deleteUrl: 'path/to/delete',
    namespace: 'namespace'
}