What is UI Bookmark Component in Magento 2? | Mageplaza
In this post, we will talk about UI Bookmark Component in Magento 2. UI components are the latest Magento 2 functionality that provides nymerous opportunities for creating user-friendly UI for 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.
Now let’s see how to add a UI bookmark component.
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'
}
Conclusion
And you get everything to understand UI bookmark component in Magento 2. If you find this article helpful, don’t forget to share it with Magento friends.
Thanks for reading!
- How to create a simple Hello World module for Magento 2
- Magento 2 Block Template Ultimate Guides
- How to Create Module in Magento 2
- How to Create Controller in Magento 2
- How to create CRUD Models in Magento 2
- How to Create Magento 2 Block, Layout and Templates
- Configuration - System.xml
- How To Create Admin Menu In Magento 2
- Admin ACL
- Admin Grid
People also searched for
- magento 2 user-interface UI bookmark component
- magento 2 mixins js
- magento 2 ui components
- 2.3.x, 2.4.x