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



, ,



Leave a Reply

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