How to UI bookmark element in Magento 2?

UI Bookmark element is a Listing/Grid Secondary Component in Magento 2. It is used to accumulate active and modified states of data grids. It comprises the state of filters, columns position, applied sorting, pagination, and so on.

Develop a complex and scalable eCommerce solution with Magento today, consult us!!!

How to UI bookmark element in Magento 2?

How to UI bookmark element in Magento 2?

Furthermore, it exploits DB as continual storage for the grid’s state. You can get the table “ui_bookmark” to examine it:

  • You can hold a look at the file \vendor\magento\module-ui\view\base\ui_component\etc\definition.xml to see the Bookmarks JS Component Structure. It has component Magento_Ui/js/grid/controls/bookmarks/bookmarks which located at app\code\Magento\Ui\view\base\web\js\grid\controls\bookmarks\bookmarks.js. This element uses the template app\code\Magento\Ui\view\base\web\templates\grid\controls\bookmarks\bookmarks.html.
  • The UI Bookmark component has a child element which is situate for a separate view located at app\code\Magento\Ui\view\base\web\js\grid\controls\bookmarks\view.js and template for child element at app\code\Magento\Ui\view\base\web\templates\grid\controls\bookmarks\view.html
  • The UI Bookmark element utilizes app\code\Magento\Ui\view\base\web\js\grid\controls\bookmarks\storage.js to custom data storage which permits saving bookmark state externally.
  • The UI Bookmark element provides the template option, component option, and storage Config option.

The example to use UI Bookmark element in Magento:

<container name="listing_top">


   <bookmark name="bookmarks">

       <argument name="data" xsi:type="array">

           <item name="config" xsi:type="array">

               <item name="storageConfig" xsi:type="array">

                   <item name="namespace" xsi:type="string">product_listing</item>







These above steps help you to do UI bookmark elements in Magento 2

Last Update: February 23, 2021  

February 27, 2018   1839   Nandini Ramachandran    Magento, Magento 2 Tutorial, Magento2    
Total 2 Votes:

Tell us how can we improve this post?

+ = Verify Human or Spambot ?

Leave a Reply

Your email address will not be published. Required fields are marked *