UI Bookmark Component in Magento 2

What is UI Bookmark Component?

UI Bookmark Component is one of the Listing/Grid Secondary Component when you are working with Magento 2. UI Bookmark Component Magento 2 is in charge of storing all active and changed states of data grids. The bookmark component will cover some of the data including state of filters, columns position, applied sorting, pagination, and so on.

Field name Type Description
bookmark_id int(10) Bookmark identifier
user_id int(10) User Id
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

What is UI Bookmark Component structure

In UI Bookmark Component, you will get the structure as the following:

  • 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

The bookmarks component activate app\code\Magento\Ui\view\base\web\js\grid\controls\bookmarks\storage.js custom data storage to save bookmark state externally. After that, you can get the bookmarks on any device and in any browser.

How to add a UI Bookmark Component

The UI Bookmark Component comes with options as the below:

  • 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'
}


Next tutorial:

Module Development Series



Enjoyed the tutorial? Spread it to your friends!

magento-2-tutorial
user-interface
UI
bookmark
component

Module Development

Comments for UI Bookmark Component in Magento 2

Please leave comments if you have any questions, feedbacks.

You also may like these Magento 2 Extensions

One Step Checkout

$199
10 reviews

Layered Navigation

$99
12 reviews

SEO

FREE
no review

Shop By Brand

$99
3 reviews

People also searched for:

  • magento 2 user-interface UI bookmark component
  • magento 2 mixins js
  • magento 2 ui components