{"id":305,"date":"2022-03-22T17:02:14","date_gmt":"2022-03-22T10:02:14","guid":{"rendered":"https:\/\/magerubik.com\/blog\/?p=305"},"modified":"2023-04-24T09:14:33","modified_gmt":"2023-04-24T02:14:33","slug":"how-to-use-magento-2-ui-component","status":"publish","type":"post","link":"https:\/\/magerubik.com\/blog\/how-to-use-magento-2-ui-component\/","title":{"rendered":"How to use Magento 2 UI component"},"content":{"rendered":"\n
\n\t

UI Components are an ambitious new approach to building user interface elements in Magento 2, and much of the new admin console is built on this functionality. The main purpose is to combine HTML and JavaScript content, allowing the creation of new components with any form and function possible. In the following article, we will learn how Magento 2 use UI component to create simple grid.<\/p>\n<\/div>\n

Assume that you have read through and practiced the articles create Magento 2 extension<\/a> and Magento 2 create model collection<\/a> or are knowledgeable about it.<\/p>\n

Now, we will use UI Components to create a grid for managing messages on the admin backend.<\/p>\n

1. Create admin route<\/strong><\/h2>\n

Create file app\\code\\Magerubik\\Simple\\etc\\adminhtml\\routes.xml<\/span> with below content.<\/p>\n\n\n\n

<?xml version=\"1.0\"?>\n<config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:App\/etc\/routes.xsd\">\n    <router id=\"admin\">\n        <route id=\"simple\" frontName=\"simple\">\n\t\t\t<module name=\"Magerubik_Simple\" before=\"Magento_Backend\" \/>\n        <\/route>\n    <\/router>\n<\/config><\/pre>\n\n\n\n
2. Create admin controller<\/strong><\/h2>\n
Create file app\\code\\Magerubik\\Simple\\Controller\\Adminhtml\\Message\\Index.php<\/span> with below content.<\/p>\n\n\n\n
<?php\nnamespace Magerubik\\Simple\\Controller\\Adminhtml\\Message;\nclass Index extends \\Magento\\Backend\\App\\Action\n{\n    protected $resultPageFactory;\n    public function __construct(\n        \\Magento\\Backend\\App\\Action\\Context $context,\n        \\Magento\\Framework\\View\\Result\\PageFactory $resultPageFactory\n    ) {\n        parent::__construct($context);\n        $this->resultPageFactory = $resultPageFactory;\n    }\n    public function execute()\n    {\n        return $this->resultPageFactory->create();\n    }\n}<\/pre>\n\n\n\n
3. Create Layout<\/strong><\/h2>\n
Create file app\\code\\Magerubik\\Simple\\view\\adminhtml\\layout\\simple_message_index.xml<\/span> with below content.<\/p>\n\n\n\n
<?xml version=\"1.0\"?>\n<page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\n    <body>\n\t\t<referenceBlock name=\"page.title\">\n\t\t\t<action method=\"setPageTitle\">\n\t\t\t\t<argument translate=\"true\" name=\"title\" xsi:type=\"string\">Manage Message<\/argument>\n\t\t\t<\/action>\n\t\t<\/referenceBlock>\n\t\t<referenceContainer name=\"content\">\n            <uiComponent name=\"message_listing\" \/>\n        <\/referenceContainer>\n    <\/body>\n<\/page><\/pre>\n\n\n\n
4. Create Data Provider<\/strong><\/h2>\n
Create file app\\code\\Magerubik\\Simple\\etc\\di.xml<\/span> with below content.<\/p>\n\n\n\n
<?xml version=\"1.0\"?>\n<config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:ObjectManager\/etc\/config.xsd\">\n    <type name=\"Magento\\Framework\\View\\Element\\UiComponent\\DataProvider\\CollectionFactory\">\n        <arguments>\n            <argument name=\"collections\" xsi:type=\"array\">\n                <item name=\"message_listing_data_source\" xsi:type=\"string\">message_collection<\/item>\n            <\/argument>\n        <\/arguments>\n    <\/type>\n    <virtualType name=\"message_collection\" type=\"Magento\\Framework\\View\\Element\\UiComponent\\DataProvider\\SearchResult\">\n        <arguments>\n            <argument name=\"mainTable\" xsi:type=\"string\">vendor_message<\/argument>\n            <argument name=\"resourceModel\" xsi:type=\"string\">Magerubik\\Simple\\Model\\ResourceModel\\Message<\/argument>\n        <\/arguments>\n    <\/virtualType>\n<\/config><\/pre>\n\n\n\n
5. Use Magento 2 UI component create simple grid<\/strong><\/h2>\n
Create file app\\code\\Magerubik\\Simple\\view\\adminhtml\\ui_component\\message_listing.xml<\/span> with below content.<\/p>\n\n\n\n
<listing xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:module:Magento_Ui:etc\/ui_configuration.xsd\">\n    <argument name=\"data\" xsi:type=\"array\">\n        <item name=\"js_config\" xsi:type=\"array\">\n            <item name=\"provider\" xsi:type=\"string\">message_listing.message_listing_data_source<\/item>\n        <\/item>\n    <\/argument>\n    <settings>\n        <spinner>message_columns<\/spinner>\n        <deps>\n            <dep>message_listing.message_listing_data_source<\/dep>\n        <\/deps>\n        <buttons>\n            <button name=\"new\">\n                <url path=\"*\/*\/new\"\/>\n                <class>primary<\/class>\n                <label translate=\"true\">Add new<\/label>\n            <\/button>\n        <\/buttons>\n    <\/settings>\n    <listingToolbar name=\"listing_top\">\n        <settings>\n            <sticky>true<\/sticky>\n        <\/settings>\n        <bookmark name=\"bookmarks\"\/>\n        <exportButton name=\"export_button\"\/>\n        <columnsControls name=\"columns_controls\"\/>\n        <filters name=\"listing_filters\" \/>\n        <paging name=\"listing_paging\"\/>\n        <massaction name=\"listing_massaction\">\n            <argument name=\"data\" xsi:type=\"array\">\n                <item name=\"config\" xsi:type=\"array\">\n                    <item name=\"component\" xsi:type=\"string\">Magento_Ui\/js\/grid\/tree-massactions<\/item>\n                <\/item>\n            <\/argument>\n            <action name=\"delete\">\n                <argument name=\"data\" xsi:type=\"array\">\n                    <item name=\"config\" xsi:type=\"array\">\n                        <item name=\"type\" xsi:type=\"string\">delete<\/item>\n                        <item name=\"label\" xsi:type=\"string\" translate=\"true\">Delete<\/item>\n                        <item name=\"url\" xsi:type=\"url\" path=\"*\/*\/delete\"\/>\n                        <item name=\"confirm\" xsi:type=\"array\">\n                            <item name=\"title\" xsi:type=\"string\" translate=\"true\">Delete Row<\/item>\n                            <item name=\"message\" xsi:type=\"string\" translate=\"true\">Are you sure you wan't to delete selected items?<\/item>\n                        <\/item>\n                    <\/item>\n                <\/argument>\n            <\/action>\n        <\/massaction>\n    <\/listingToolbar>\n    <dataSource name=\"message_listing_data_source\" component=\"Magento_Ui\/js\/grid\/provider\">\n        <settings>\n            <updateUrl path=\"mui\/index\/render\"\/>\n            <storageConfig>\n                <param name=\"indexField\" xsi:type=\"string\">messages_id<\/param>\n            <\/storageConfig>\n        <\/settings>\n        <aclResource>Magerubik_Simple::listing<\/aclResource>\n        <dataProvider class=\"Magento\\Framework\\View\\Element\\UiComponent\\DataProvider\\DataProvider\" name=\"message_listing_data_source\">\n            <settings>\n                <requestFieldName>id<\/requestFieldName>\n                <primaryFieldName>messages_id<\/primaryFieldName>\n            <\/settings>\n        <\/dataProvider>\n    <\/dataSource>\n    <!-- columns -->\n    <columns name=\"message_columns\">\n        <selectionsColumn name=\"ids\">\n            <settings>\n                <indexField>messages_id<\/indexField>\n            <\/settings>\n        <\/selectionsColumn>\n        <column name=\"messages_id\" sortOrder=\"2\">\n            <settings>\n                <filter>text<\/filter>\n                <label translate=\"true\">ID<\/label>\n            <\/settings>\n        <\/column>\n\t\t<column name=\"user_id\" class=\"Magerubik\\Simple\\Ui\\Component\\Listing\\Columns\\Customerlink\">\n            <argument name=\"data\" xsi:type=\"array\">\n                <item name=\"config\" xsi:type=\"array\">\n                    <item name=\"filter\" xsi:type=\"string\">text<\/item>\n                    <item name=\"sorting\" xsi:type=\"string\">asc<\/item>\n                    <item name=\"component\" xsi:type=\"string\">Magento_Ui\/js\/grid\/columns\/actions<\/item>\n\t\t\t\t\t<item name=\"bodyTmpl\" xsi:type=\"string\">ui\/grid\/cells\/html<\/item>\n\t\t\t\t\t<item name=\"resizeEnabled\" xsi:type=\"boolean\">false<\/item>\n                    <item name=\"resizeDefaultWidth\" xsi:type=\"string\">200<\/item>\n                    <item name=\"indexField\" xsi:type=\"string\">messages_id<\/item>\n                    <item name=\"label\" xsi:type=\"string\" translate=\"true\">User Name<\/item>\n                    <item name=\"sortOrder\" xsi:type=\"number\">3<\/item>\n                <\/item>\n            <\/argument>\n        <\/column>\n        <column name=\"title\" sortOrder=\"4\">\n            <settings>\n                <filter>text<\/filter>\n                <label translate=\"true\">Title<\/label>\n            <\/settings>\n        <\/column>\n\t\t<column name=\"description\" sortOrder=\"5\">\n            <settings>\n                <filter>text<\/filter>\n                <label translate=\"true\">Description<\/label>\n            <\/settings>\n        <\/column>\n\t\t<column name=\"status\" sortOrder=\"6\">\n            <settings>\n                <filter>text<\/filter>\n                <label translate=\"true\">Status<\/label>\n            <\/settings>\n        <\/column>\n\t\t<column name=\"created_at\" class=\"Magento\\Ui\\Component\\Listing\\Columns\\Date\">\n            <argument name=\"data\" xsi:type=\"array\">\n                <item name=\"config\" xsi:type=\"array\">\n                    <item name=\"filter\" xsi:type=\"string\">dateRange<\/item>\n                    <item name=\"component\" xsi:type=\"string\">Magento_Ui\/js\/grid\/columns\/date<\/item>\n                    <item name=\"dataType\" xsi:type=\"string\">date<\/item>\n                    <item name=\"label\" xsi:type=\"string\" translate=\"true\">Date<\/item>\n                    <item name=\"sortOrder\" xsi:type=\"number\">7<\/item>\n                <\/item>\n            <\/argument>\n        <\/column>\n    <\/columns>\n<\/listing><\/pre>\n\n\n\n
Then create file app\\code\\Magerubik\\Simple\\Ui\\Component\\Listing\\Columns\\Customerlink.php<\/span> with below content to make customer link col.<\/p>\n\n\n\n
<?php\nnamespace Magerubik\\Simple\\Ui\\Component\\Listing\\Columns;\nuse Magento\\Framework\\UrlInterface;\nuse Magento\\Framework\\View\\Element\\UiComponent\\ContextInterface;\nuse Magento\\Framework\\View\\Element\\UiComponentFactory;\nuse Magento\\Ui\\Component\\Listing\\Columns\\Column;\nclass Customerlink extends Column\n{\n    protected $urlBuilder;\n    public function __construct(\n        ContextInterface $context,\n        UiComponentFactory $uiComponentFactory,\n        UrlInterface $urlBuilder,\n        array $components = [],\n        array $data = []\n    ) {\n        $this->urlBuilder = $urlBuilder;\n        parent::__construct($context, $uiComponentFactory, $components, $data);\n    }\n    public function prepareDataSource(array $dataSource)\n    {\n        if (isset($dataSource['data']['items'])) {\n            $fieldName = $this->getData('name');\n            foreach ($dataSource['data']['items'] as &$item) {\n\t\t\t\t$customerId = $item['user_id'];\n\t\t\t\t$objectManager = \\Magento\\Framework\\App\\ObjectManager::getInstance();\n\t\t\t\t$customerData = $objectManager->create('Magento\\Customer\\Model\\Customer')->load($customerId);\n\t\t\t\t$userName = $customerData->getFirstname() . ' ' . $customerData->getLastname();\n\t\t\t\t$item[$fieldName] = \"<a href='\" . $this->urlBuilder->getUrl('customer\/index\/edit', ['id' => $item['user_id']]) . \"' target='blank' title='\".__('View Customer').\"'>\" . $userName . \"<\/a>\";\n            }\n        }\n\n        return $dataSource;\n    }\n}<\/pre>\n\n\n\n
6. Create admin menu<\/strong><\/h2>\n
Create file app\\code\\Magerubik\\Simple\\etc\\adminhtml\\menu.xml<\/span> with below content:<\/p>\n\n\n\n
<?xml version=\"1.0\"?>\n<config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:module:Magento_Backend:etc\/menu.xsd\">\n    <menu>\n        <add id=\"Magerubik_Simple::menu\" title=\"Magerubik\" module=\"Magerubik_Simple\" translate=\"title\" sortOrder=\"68\" resource=\"Magerubik_Simple::menu\"\/>\n        <add id=\"Magerubik_Simple::manager\" title=\"Manager Message\" module=\"Magerubik_Simple\" translate=\"title\" sortOrder=\"1068\" parent=\"Magerubik_Simple::menu\" resource=\"Magerubik_Simple::manager\" action=\"simple\/message\"\/>\n    <\/menu>\n<\/config><\/pre>\n\n\n\n
7. Go to backend check it working<\/strong><\/h2>\n
If you can see the below screenshot everything is ok.<\/p>\n
\"Magento<\/figure>\t\n
\"Magento<\/figure>\t\n
\n\t
Now you know how to use Magento 2 UI component create simple grid. In the next posts<\/a>, we will learn how to use it to create form import data. Also, you can read more about the Magento default component here<\/a>. Contact us<\/a> if you face any problems during the installation process.<\/p>\n<\/blockquote>\n
You can download the demo code for this entire series from GitHub<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
UI Components are an ambitious new approach to building user interface elements in Magento 2, and much of the new<\/p>\n","protected":false},"author":1,"featured_media":308,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-305","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-magento-2-extension-tutorials"],"yoast_head":"\nHow to use Magento 2 UI component | MageRubik<\/title>\n<meta name=\"description\" content=\"Magento 2 UI component-UI Components are an ambitious new approach to building user interface elements in Magento 2.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/magerubik.com\/blog\/how-to-use-magento-2-ui-component\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to use Magento 2 UI component | MageRubik\" \/>\n<meta property=\"og:description\" content=\"Magento 2 UI component-UI Components are an ambitious new approach to building user interface elements in Magento 2.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/magerubik.com\/blog\/how-to-use-magento-2-ui-component\/\" \/>\n<meta property=\"og:site_name\" content=\"MageRubik\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/magerubik\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/magerubik\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-22T10:02:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-24T02:14:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/magerubik.com\/blog\/wp-content\/uploads\/2022\/03\/magento-create-UI-component.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"445\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Hilary howard\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/www.twitter.com\/magerubik\" \/>\n<meta name=\"twitter:site\" content=\"@magerubik\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hilary howard\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/magerubik.com\/blog\/how-to-use-magento-2-ui-component\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/magerubik.com\/blog\/how-to-use-magento-2-ui-component\/\"},\"author\":{\"name\":\"Hilary howard\",\"@id\":\"https:\/\/magerubik.com\/blog\/#\/schema\/person\/dad797dc557c925c92436706db1359d8\"},\"headline\":\"How to use Magento 2 UI component\",\"datePublished\":\"2022-03-22T10:02:14+00:00\",\"dateModified\":\"2023-04-24T02:14:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/magerubik.com\/blog\/how-to-use-magento-2-ui-component\/\"},\"wordCount\":314,\"publisher\":{\"@id\":\"https:\/\/magerubik.com\/blog\/#\/schema\/person\/dad797dc557c925c92436706db1359d8\"},\"image\":{\"@id\":\"https:\/\/magerubik.com\/blog\/how-to-use-magento-2-ui-component\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/magerubik.com\/blog\/wp-content\/uploads\/2022\/03\/magento-create-UI-component.jpg\",\"articleSection\":[\"Magento 2 Extension Tutorials\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/magerubik.com\/blog\/how-to-use-magento-2-ui-component\/\",\"url\":\"https:\/\/magerubik.com\/blog\/how-to-use-magento-2-ui-component\/\",\"name\":\"How to use Magento 2 UI component | MageRubik\",\"isPartOf\":{\"@id\":\"https:\/\/magerubik.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/magerubik.com\/blog\/how-to-use-magento-2-ui-component\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/magerubik.com\/blog\/how-to-use-magento-2-ui-component\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/magerubik.com\/blog\/wp-content\/uploads\/2022\/03\/magento-create-UI-component.jpg\",\"datePublished\":\"2022-03-22T10:02:14+00:00\",\"dateModified\":\"2023-04-24T02:14:33+00:00\",\"description\":\"Magento 2 UI component-UI Components are an ambitious new approach to building user interface elements in Magento 2.\",\"breadcrumb\":{\"@id\":\"https:\/\/magerubik.com\/blog\/how-to-use-magento-2-ui-component\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/magerubik.com\/blog\/how-to-use-magento-2-ui-component\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/magerubik.com\/blog\/how-to-use-magento-2-ui-component\/#primaryimage\",\"url\":\"https:\/\/magerubik.com\/blog\/wp-content\/uploads\/2022\/03\/magento-create-UI-component.jpg\",\"contentUrl\":\"https:\/\/magerubik.com\/blog\/wp-content\/uploads\/2022\/03\/magento-create-UI-component.jpg\",\"width\":800,\"height\":445,\"caption\":\"Magento 2 create UI component\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/magerubik.com\/blog\/how-to-use-magento-2-ui-component\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Magerubik blog site\",\"item\":\"https:\/\/magerubik.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to use Magento 2 UI component\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/magerubik.com\/blog\/#website\",\"url\":\"https:\/\/magerubik.com\/blog\/\",\"name\":\"Magerubik\",\"description\":\"MageRubik blog site\",\"publisher\":{\"@id\":\"https:\/\/magerubik.com\/blog\/#\/schema\/person\/dad797dc557c925c92436706db1359d8\"},\"alternateName\":\"Magento 2 Extension\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/magerubik.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/magerubik.com\/blog\/#\/schema\/person\/dad797dc557c925c92436706db1359d8\",\"name\":\"Hilary howard\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/magerubik.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/magerubik.com\/blog\/wp-content\/uploads\/2022\/03\/magerubik-logo.png\",\"contentUrl\":\"https:\/\/magerubik.com\/blog\/wp-content\/uploads\/2022\/03\/magerubik-logo.png\",\"width\":265,\"height\":90,\"caption\":\"Hilary howard\"},\"logo\":{\"@id\":\"https:\/\/magerubik.com\/blog\/#\/schema\/person\/image\/\"},\"sameAs\":[\"http:\/\/localhost\/blog\",\"https:\/\/www.facebook.com\/magerubik\",\"https:\/\/www.instagram.com\/magerubik\",\"https:\/\/www.linkedin.com\/magerubik\",\"https:\/\/www.pinterest.com\/magerubik\",\"https:\/\/twitter.com\/https:\/\/www.twitter.com\/magerubik\",\"https:\/\/www.myspace.com\/magerubik\",\"https:\/\/www.youtube.com\/magerubik\",\"https:\/\/www.soundcloud.com\/magerubik\",\"https:\/\/www.tumblr.com\/magerubik\",\"https:\/\/www.wikipedia.com\/magerubik\"],\"url\":\"https:\/\/magerubik.com\/blog\/author\/hilary-howard\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to use Magento 2 UI component | MageRubik","description":"Magento 2 UI component-UI Components are an ambitious new approach to building user interface elements in Magento 2.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/magerubik.com\/blog\/how-to-use-magento-2-ui-component\/","og_locale":"en_US","og_type":"article","og_title":"How to use Magento 2 UI component | MageRubik","og_description":"Magento 2 UI component-UI Components are an ambitious new approach to building user interface elements in Magento 2.","og_url":"https:\/\/magerubik.com\/blog\/how-to-use-magento-2-ui-component\/","og_site_name":"MageRubik","article_publisher":"https:\/\/www.facebook.com\/magerubik","article_author":"https:\/\/www.facebook.com\/magerubik","article_published_time":"2022-03-22T10:02:14+00:00","article_modified_time":"2023-04-24T02:14:33+00:00","og_image":[{"width":800,"height":445,"url":"https:\/\/magerubik.com\/blog\/wp-content\/uploads\/2022\/03\/magento-create-UI-component.jpg","type":"image\/jpeg"}],"author":"Hilary howard","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/www.twitter.com\/magerubik","twitter_site":"@magerubik","twitter_misc":{"Written by":"Hilary howard","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/magerubik.com\/blog\/how-to-use-magento-2-ui-component\/#article","isPartOf":{"@id":"https:\/\/magerubik.com\/blog\/how-to-use-magento-2-ui-component\/"},"author":{"name":"Hilary howard","@id":"https:\/\/magerubik.com\/blog\/#\/schema\/person\/dad797dc557c925c92436706db1359d8"},"headline":"How to use Magento 2 UI component","datePublished":"2022-03-22T10:02:14+00:00","dateModified":"2023-04-24T02:14:33+00:00","mainEntityOfPage":{"@id":"https:\/\/magerubik.com\/blog\/how-to-use-magento-2-ui-component\/"},"wordCount":314,"publisher":{"@id":"https:\/\/magerubik.com\/blog\/#\/schema\/person\/dad797dc557c925c92436706db1359d8"},"image":{"@id":"https:\/\/magerubik.com\/blog\/how-to-use-magento-2-ui-component\/#primaryimage"},"thumbnailUrl":"https:\/\/magerubik.com\/blog\/wp-content\/uploads\/2022\/03\/magento-create-UI-component.jpg","articleSection":["Magento 2 Extension Tutorials"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/magerubik.com\/blog\/how-to-use-magento-2-ui-component\/","url":"https:\/\/magerubik.com\/blog\/how-to-use-magento-2-ui-component\/","name":"How to use Magento 2 UI component | MageRubik","isPartOf":{"@id":"https:\/\/magerubik.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/magerubik.com\/blog\/how-to-use-magento-2-ui-component\/#primaryimage"},"image":{"@id":"https:\/\/magerubik.com\/blog\/how-to-use-magento-2-ui-component\/#primaryimage"},"thumbnailUrl":"https:\/\/magerubik.com\/blog\/wp-content\/uploads\/2022\/03\/magento-create-UI-component.jpg","datePublished":"2022-03-22T10:02:14+00:00","dateModified":"2023-04-24T02:14:33+00:00","description":"Magento 2 UI component-UI Components are an ambitious new approach to building user interface elements in Magento 2.","breadcrumb":{"@id":"https:\/\/magerubik.com\/blog\/how-to-use-magento-2-ui-component\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/magerubik.com\/blog\/how-to-use-magento-2-ui-component\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/magerubik.com\/blog\/how-to-use-magento-2-ui-component\/#primaryimage","url":"https:\/\/magerubik.com\/blog\/wp-content\/uploads\/2022\/03\/magento-create-UI-component.jpg","contentUrl":"https:\/\/magerubik.com\/blog\/wp-content\/uploads\/2022\/03\/magento-create-UI-component.jpg","width":800,"height":445,"caption":"Magento 2 create UI component"},{"@type":"BreadcrumbList","@id":"https:\/\/magerubik.com\/blog\/how-to-use-magento-2-ui-component\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Magerubik blog site","item":"https:\/\/magerubik.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to use Magento 2 UI component"}]},{"@type":"WebSite","@id":"https:\/\/magerubik.com\/blog\/#website","url":"https:\/\/magerubik.com\/blog\/","name":"Magerubik","description":"MageRubik blog site","publisher":{"@id":"https:\/\/magerubik.com\/blog\/#\/schema\/person\/dad797dc557c925c92436706db1359d8"},"alternateName":"Magento 2 Extension","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/magerubik.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/magerubik.com\/blog\/#\/schema\/person\/dad797dc557c925c92436706db1359d8","name":"Hilary howard","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/magerubik.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/magerubik.com\/blog\/wp-content\/uploads\/2022\/03\/magerubik-logo.png","contentUrl":"https:\/\/magerubik.com\/blog\/wp-content\/uploads\/2022\/03\/magerubik-logo.png","width":265,"height":90,"caption":"Hilary howard"},"logo":{"@id":"https:\/\/magerubik.com\/blog\/#\/schema\/person\/image\/"},"sameAs":["http:\/\/localhost\/blog","https:\/\/www.facebook.com\/magerubik","https:\/\/www.instagram.com\/magerubik","https:\/\/www.linkedin.com\/magerubik","https:\/\/www.pinterest.com\/magerubik","https:\/\/twitter.com\/https:\/\/www.twitter.com\/magerubik","https:\/\/www.myspace.com\/magerubik","https:\/\/www.youtube.com\/magerubik","https:\/\/www.soundcloud.com\/magerubik","https:\/\/www.tumblr.com\/magerubik","https:\/\/www.wikipedia.com\/magerubik"],"url":"https:\/\/magerubik.com\/blog\/author\/hilary-howard\/"}]}},"_links":{"self":[{"href":"https:\/\/magerubik.com\/blog\/wp-json\/wp\/v2\/posts\/305","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/magerubik.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/magerubik.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/magerubik.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/magerubik.com\/blog\/wp-json\/wp\/v2\/comments?post=305"}],"version-history":[{"count":21,"href":"https:\/\/magerubik.com\/blog\/wp-json\/wp\/v2\/posts\/305\/revisions"}],"predecessor-version":[{"id":628,"href":"https:\/\/magerubik.com\/blog\/wp-json\/wp\/v2\/posts\/305\/revisions\/628"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/magerubik.com\/blog\/wp-json\/wp\/v2\/media\/308"}],"wp:attachment":[{"href":"https:\/\/magerubik.com\/blog\/wp-json\/wp\/v2\/media?parent=305"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/magerubik.com\/blog\/wp-json\/wp\/v2\/categories?post=305"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/magerubik.com\/blog\/wp-json\/wp\/v2\/tags?post=305"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}