{"id":515,"date":"2023-02-17T19:18:26","date_gmt":"2023-02-17T12:18:26","guid":{"rendered":"https:\/\/magerubik.com\/blog\/?p=515"},"modified":"2023-04-24T09:43:26","modified_gmt":"2023-04-24T02:43:26","slug":"create-ui-form-in-magento-2","status":"publish","type":"post","link":"https:\/\/magerubik.com\/blog\/create-ui-form-in-magento-2\/","title":{"rendered":"Create UI Form in Magento 2"},"content":{"rendered":"\n
\n\t

As we know starting from Magento 2, most of the new admin console is built on top of UI component. This is intended to combine HTML and JavaScript content, allowing the creation of new components with any form and function possible. In the previous post we created a simple grid with UI component<\/a> and in this article we will continue to use it to create UI Form in Magento backend.<\/p>\n<\/div>\n

\n\t

Here, we continue to use the simple module built in the previous post and build the create\/edit message form in the backend.<\/p>\n<\/div>\n

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

Create NewAction<\/strong><\/p>\n

Create file app\\code\\Magerubik\\Simple\\Controller\\Adminhtml\\Message\\NewAction.php<\/span> with below content.<\/p>\n\n\n\n

<?php\nnamespace Magerubik\\Simple\\Controller\\Adminhtml\\Message;\nclass NewAction extends \\Magento\\Backend\\App\\Action\n{\n    public function execute()\n    {\n        $this->_forward('edit');\n    }\n}<\/pre>\n\n\n\n
This controller will redirect to edit page.<\/p>\n
Create Edit controller<\/strong><\/p>\n
Create file app\\code\\Magerubik\\Simple\\Controller\\Adminhtml\\Message\\Edit.php<\/span> with below content.<\/p>\n\n\n\n
<?php\nnamespace Magerubik\\Simple\\Controller\\Adminhtml\\Message;\nclass Edit extends \\Magento\\Backend\\App\\Action\n{\n  protected $resultPageFactory;\n\n  public function __construct(\n    \\Magento\\Backend\\App\\Action\\Context $context,\n    \\Magento\\Framework\\View\\Result\\PageFactory $resultPageFactory\n  )\n  {\n    parent::__construct($context);\n    $this->resultPageFactory = $resultPageFactory;\n  }\n\n  public function execute()\n  {\n    $resultPage = $this->resultPageFactory->create();\n    $resultPage->getConfig()->getTitle()->prepend(__('Message'));\n    return $resultPage;\n  }\t\n}<\/pre>\n\n\n\n
2. Create Edit page Layout<\/strong><\/h2>\n
Create file app\\code\\Magerubik\\Simple\\view\\adminhtml\\layout\\simple_message_edit.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    <update handle=\"editor\"\/>\n    <body>\n        <referenceContainer name=\"content\">\n            <uiComponent name=\"message_send_form\"\/>\n        <\/referenceContainer>\n    <\/body>\n<\/page><\/pre>\n\n\n\n
3. Create Ui form<\/strong><\/h2>\n
Create file app\\code\\Magerubik\\Simple\\view\\adminhtml\\ui_component\\message_send_form.xml<\/span> with below content.<\/p>\n\n\n\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<form 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_send_form.message_send_form_data_source<\/item>\n            <item name=\"deps\" xsi:type=\"string\">message_send_form.message_send_form_data_source<\/item>\n        <\/item>\n        <item name=\"label\" xsi:type=\"string\" translate=\"true\">Send Message<\/item>\n        <item name=\"config\" xsi:type=\"array\">\n            <item name=\"dataScope\" xsi:type=\"string\">data<\/item>\n            <item name=\"namespace\" xsi:type=\"string\">message_send_form<\/item>\n        <\/item>\n        <item name=\"template\" xsi:type=\"string\">templates\/form\/collapsible<\/item>\n        <item name=\"buttons\" xsi:type=\"array\">\n            <item name=\"back\" xsi:type=\"array\">\n                <item name=\"name\" xsi:type=\"string\">back<\/item>\n                <item name=\"label\" xsi:type=\"string\" translate=\"true\">Back<\/item>\n                <item name=\"class\" xsi:type=\"string\">back<\/item>\n                <item name=\"url\" xsi:type=\"string\">*\/*\/<\/item>\n            <\/item>\n            <item name=\"save\" xsi:type=\"string\">Magerubik\\Simple\\Block\\Adminhtml\\Button\\Save<\/item>\n        <\/item>\n    <\/argument>\n    <dataSource name=\"message_send_form_data_source\">\n        <argument name=\"dataProvider\" xsi:type=\"configurableObject\">\n            <argument name=\"class\" xsi:type=\"string\">Magerubik\\Simple\\Model\\DataProvider\\MessageDataProvider<\/argument>\n            <argument name=\"name\" xsi:type=\"string\">message_send_form_data_source<\/argument>\n            <argument name=\"primaryFieldName\" xsi:type=\"string\">messages_id<\/argument>\n            <argument name=\"requestFieldName\" xsi:type=\"string\">id<\/argument>\n            <argument name=\"data\" xsi:type=\"array\">\n                <item name=\"config\" xsi:type=\"array\">\n                    <item name=\"submit_url\" xsi:type=\"url\" path=\"*\/message\/save\"\/>\n                <\/item>\n            <\/argument>\n        <\/argument>\n        <argument name=\"data\" xsi:type=\"array\">\n            <item name=\"js_config\" xsi:type=\"array\">\n                <item name=\"component\" xsi:type=\"string\">Magento_Ui\/js\/form\/provider<\/item>\n            <\/item>\n        <\/argument>\n    <\/dataSource>\n\t<fieldset name=\"general\">\n        <argument name=\"data\" xsi:type=\"array\">\n            <item name=\"config\" xsi:type=\"array\">\n\t\t\t\t<item name=\"label\" xsi:type=\"string\" translate=\"true\"><\/item>\n\t\t\t\t<item name=\"collapsible\" xsi:type=\"boolean\">false<\/item>\n                <item name=\"sortOrder\" xsi:type=\"number\">10<\/item>\n            <\/item>\n        <\/argument>\n        <field name=\"messages_id\">\n                <argument name=\"data\" xsi:type=\"array\">\n                    <item name=\"config\" xsi:type=\"array\">\n                        <item name=\"visible\" xsi:type=\"boolean\">false<\/item>\n                        <item name=\"dataType\" xsi:type=\"string\">text<\/item>\n                        <item name=\"formElement\" xsi:type=\"string\">input<\/item>\n\t\t\t\t\t\t<item name=\"dataScope\" xsi:type=\"string\">messages_id<\/item>\n                    <\/item>\n                <\/argument>\n            <\/field>\n\t\t\t<field name=\"user_id\">\n                <argument name=\"data\" xsi:type=\"array\">\n                    <item name=\"config\" xsi:type=\"array\">\n\t\t\t\t\t\t<item name=\"label\" xsi:type=\"string\" translate=\"true\">user id<\/item>\n                        <item name=\"visible\" xsi:type=\"boolean\">true<\/item>\n                        <item name=\"dataType\" xsi:type=\"string\">text<\/item>\n                        <item name=\"formElement\" xsi:type=\"string\">input<\/item>\n\t\t\t\t\t\t<item name=\"dataScope\" xsi:type=\"string\">user_id<\/item>\n                    <\/item>\n                <\/argument>\n            <\/field>\n            <field name=\"title\">\n\t\t\t\t<argument name=\"data\" xsi:type=\"array\">\n\t\t\t\t\t<item name=\"config\" xsi:type=\"array\">\n\t\t\t\t\t\t<item name=\"label\" xsi:type=\"string\" translate=\"true\">Title<\/item>\n\t\t\t\t\t\t<item name=\"visible\" xsi:type=\"boolean\">true<\/item>\n\t\t\t\t\t\t<item name=\"dataType\" xsi:type=\"string\">text<\/item>\n\t\t\t\t\t\t<item name=\"formElement\" xsi:type=\"string\">input<\/item>\n\t\t\t\t\t\t<item name=\"dataScope\" xsi:type=\"string\">title<\/item>\n\t\t\t\t\t\t<item name=\"validation\" xsi:type=\"array\">\n\t\t\t\t\t\t\t<item name=\"required-entry\" xsi:type=\"boolean\">true<\/item>\n\t\t\t\t\t\t<\/item>\n\t\t\t\t\t<\/item>\n\t\t\t\t<\/argument>\n\t\t\t<\/field>\n\t\t\t<field name=\"description\">\n\t\t\t\t<argument name=\"data\" xsi:type=\"array\">\n\t\t\t\t\t<item name=\"config\" xsi:type=\"array\">\n\t\t\t\t\t\t<item name=\"label\" xsi:type=\"string\" translate=\"true\">Message<\/item>\n\t\t\t\t\t\t<item name=\"visible\" xsi:type=\"boolean\">true<\/item>\n\t\t\t\t\t\t<item name=\"dataType\" xsi:type=\"string\">text<\/item>\n\t\t\t\t\t\t<item name=\"formElement\" xsi:type=\"string\">textarea<\/item>\n\t\t\t\t\t\t<item name=\"dataScope\" xsi:type=\"string\">description<\/item>\n\t\t\t\t\t\t<item name=\"validation\" xsi:type=\"array\">\n\t\t\t\t\t\t\t<item name=\"required-entry\" xsi:type=\"boolean\">true<\/item>\n\t\t\t\t\t\t<\/item>\n\t\t\t\t\t<\/item>\n\t\t\t\t<\/argument>\n\t\t\t<\/field>\n    <\/fieldset>\n<\/form><\/pre>\n\n\n\n
Create Save button<\/strong><\/p>\n
Create two files file Save.php<\/span> and Generic.php<\/span> with below content then put its in same folder app\\code\\Magerubik\\Simple\\Block\\Adminhtml\\Button<\/span><\/p>\n\n\n\n
<?php\nnamespace Magerubik\\Simple\\Block\\Adminhtml\\Button;\nuse Magento\\Backend\\Block\\Widget\\Context;\nuse Magento\\Cms\\Api\\PageRepositoryInterface;\nclass Generic\n{\n    protected $context;\n    protected $pageRepository;\n    public function __construct(\n        Context $context,\n        PageRepositoryInterface $pageRepository\n    ) {\n        $this->context = $context;\n        $this->pageRepository = $pageRepository;\n    }\n    public function getUrl($route = '', $params = [])\n    {\n        return $this->context->getUrlBuilder()->getUrl($route, $params);\n    }\n}<\/pre>\n\n\n\n
<?php\nnamespace Magerubik\\Simple\\Block\\Adminhtml\\Button;\nuse Magento\\Framework\\View\\Element\\UiComponent\\Control\\ButtonProviderInterface;\nuse Magento\\Ui\\Component\\Control\\Container;\nclass Save extends Generic implements ButtonProviderInterface\n{\n    public function getButtonData()\n    {\n        return [\n            'label' => __('Save'),\n            'class' => 'save primary',\n            'data_attribute' => [\n                'mage-init' => [\n                    'buttonAdapter' => [\n                        'actions' => [\n                            [\n                                'targetName' => 'message_send_form.message_send_form',\n                                'actionName' => 'save',\n                                'params' => [\n                                    false,\n                                ],\n                            ],\n                        ],\n                    ],\n                ],\n            ],\n        ];\n    }\n\n}<\/pre>\n\n\n\n
4. Create model Data Provider<\/strong><\/h2>\n
Create file app\\code\\Magerubik\\Simple\\Model\\DataProvider\\MessageDataProvider.php<\/span> with below content.<\/p>\n\n\n\n
<?php\nnamespace Magerubik\\Simple\\Model\\DataProvider;\nuse Magerubik\\Simple\\Model\\ResourceModel\\Message\\CollectionFactory;\nuse Magerubik\\Simple\\Model\\ImageProcessor;\nuse Magento\\Ui\\DataProvider\\AbstractDataProvider;\nuse Magento\\Framework\\App\\Request\\DataPersistorInterface;\nclass MessageDataProvider extends AbstractDataProvider\n{\n    protected $loadedData;\n\tprivate $imageProcessor;\n    public function __construct(\n        $name,\n        $primaryFieldName,\n        $requestFieldName,\n        CollectionFactory $collectionFactory,\n\t\tImageProcessor $imageProcessor,\n\t\tDataPersistorInterface $dataPersistor,\n        array $meta = [],\n        array $data = []\n    ) {\n        $this->collection = $collectionFactory->create();\n\t\t$this->imageProcessor = $imageProcessor;\n\t\t$this->dataPersistor = $dataPersistor;\n        parent::__construct($name, $primaryFieldName, $requestFieldName, $meta, $data);\n    }\n    public function getData()\n    {\n        $items = $this->collection->getItems();\n        foreach ($items as $model) {\n            $this->loadedData[$model->getId()] = $model->getData();\n        }\n\t\t$data = $this->dataPersistor->get('mrsimple_message');\n        if (!empty($data)) {\n            $model = $this->collection->getNewEmptyItem();\n            $model->setData($data);\n            $this->loadedData[$model->getId()] = $model->getData();\n            $this->dataPersistor->clear('mrsimple_message');\n        }\n        return $this->loadedData;\n    }\n}<\/pre>\n\n\n\n
Now, go to backend flush cache then check result. If you can see like below screenshot everything is ok.<\/p>\n
\"\"<\/figure>\t\n
5. Create controller save data<\/strong><\/h2>\n
Create file app\\code\\Magerubik\\Simple\\Controller\\Adminhtml\\Message\\save.php<\/span> with below content.<\/p>\n\n\n\n
<?php\nnamespace Magerubik\\Simple\\Controller\\Adminhtml\\Message;\nuse Magento\\Framework\\Exception\\LocalizedException;\nclass Save extends \\Magento\\Backend\\App\\Action\n{\n    protected $dataPersistor;\n    public function __construct(\n        \\Magento\\Backend\\App\\Action\\Context $context,\n        \\Magento\\Framework\\App\\Request\\DataPersistorInterface $dataPersistor\n    ) {\n        $this->dataPersistor = $dataPersistor;\n        parent::__construct($context);\n    }\n    public function execute()\n    {\n        $resultRedirect = $this->resultRedirectFactory->create();\n        $data = $this->getRequest()->getPostValue();\n        if ($data) {\n            $id = $this->getRequest()->getParam('messages_id');\n\t\t\tif($id){\n\t\t\t\t$model = $this->_objectManager->create(\\Magerubik\\Simple\\Model\\Message::class)->load($id);\n\t\t\t\tif (!$model->getMessagesId()) {\n\t\t\t\t\t$this->messageManager->addErrorMessage(__('This message no longer exists.'));\n\t\t\t\t\treturn $resultRedirect->setPath('*\/*\/');\n\t\t\t\t}\n\t\t\t\t$model->setData($data)->setId($id);\n\t\t\t}else{\n\t\t\t\t$model = $this->_objectManager->create(\\Magerubik\\Simple\\Model\\Message::class);\n\t\t\t\t$model->setData($data)->setId(NULL);\n\t\t\t}\n            try {\n                $model->save();\n                $this->messageManager->addSuccessMessage(__('You saved the message.'));\n                $this->dataPersistor->clear('mrsimple_message');\n                return $resultRedirect->setPath('*\/*\/edit', ['id' => $model->getMessagesId()]);\n            } catch (LocalizedException $e) {\n                $this->messageManager->addErrorMessage($e->getMessage());\n            } catch (\\Exception $e) {\n                $this->messageManager->addExceptionMessage($e, __('Something went wrong while saving the message.'));\n            }\n            $this->dataPersistor->set('mrsimple_message', $data);\n            return $resultRedirect->setPath('*\/*\/edit', ['id' => $this->getRequest()->getParam('messages_id')]);\n        }\n        return $resultRedirect->setPath('*\/*\/');\n    }\n}<\/pre>\n\n\n\n
Go to backend flush cache then check save function if see below the screenshot everything is ok.<\/p>\n
\"magento<\/figure>\t\n
Note: let’s get the user id from the customer table because we use it to get the user name in the grid.<\/p>\n
\n\t
OK, we’re done creating a simple UI from good luck with your practice. In the next post<\/a> we will come back to this problem to add an image upload field. 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":"
As we know starting from Magento 2, most of the new admin console is built on top of UI component.<\/p>\n","protected":false},"author":1,"featured_media":516,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-515","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-magento-2-extension-tutorials"],"yoast_head":"\nCreate UI Form in Magento 2 | MageRubik<\/title>\n<meta name=\"description\" content=\"Practice create UI Form in Magento - Experience the combination of HTML and JavaScript content in ui component technology.\" \/>\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\/create-ui-form-in-magento-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create UI Form in Magento 2 | MageRubik\" \/>\n<meta property=\"og:description\" content=\"Practice create UI Form in Magento - Experience the combination of HTML and JavaScript content in ui component technology.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/magerubik.com\/blog\/create-ui-form-in-magento-2\/\" \/>\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=\"2023-02-17T12:18:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-24T02:43:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/magerubik.com\/blog\/wp-content\/uploads\/2023\/02\/magento-2-create-ui-form.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=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/magerubik.com\/blog\/create-ui-form-in-magento-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/magerubik.com\/blog\/create-ui-form-in-magento-2\/\"},\"author\":{\"name\":\"Hilary howard\",\"@id\":\"https:\/\/magerubik.com\/blog\/#\/schema\/person\/dad797dc557c925c92436706db1359d8\"},\"headline\":\"Create UI Form in Magento 2\",\"datePublished\":\"2023-02-17T12:18:26+00:00\",\"dateModified\":\"2023-04-24T02:43:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/magerubik.com\/blog\/create-ui-form-in-magento-2\/\"},\"wordCount\":354,\"publisher\":{\"@id\":\"https:\/\/magerubik.com\/blog\/#\/schema\/person\/dad797dc557c925c92436706db1359d8\"},\"image\":{\"@id\":\"https:\/\/magerubik.com\/blog\/create-ui-form-in-magento-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/magerubik.com\/blog\/wp-content\/uploads\/2023\/02\/magento-2-create-ui-form.jpg\",\"articleSection\":[\"Magento 2 Extension Tutorials\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/magerubik.com\/blog\/create-ui-form-in-magento-2\/\",\"url\":\"https:\/\/magerubik.com\/blog\/create-ui-form-in-magento-2\/\",\"name\":\"Create UI Form in Magento 2 | MageRubik\",\"isPartOf\":{\"@id\":\"https:\/\/magerubik.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/magerubik.com\/blog\/create-ui-form-in-magento-2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/magerubik.com\/blog\/create-ui-form-in-magento-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/magerubik.com\/blog\/wp-content\/uploads\/2023\/02\/magento-2-create-ui-form.jpg\",\"datePublished\":\"2023-02-17T12:18:26+00:00\",\"dateModified\":\"2023-04-24T02:43:26+00:00\",\"description\":\"Practice create UI Form in Magento - Experience the combination of HTML and JavaScript content in ui component technology.\",\"breadcrumb\":{\"@id\":\"https:\/\/magerubik.com\/blog\/create-ui-form-in-magento-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/magerubik.com\/blog\/create-ui-form-in-magento-2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/magerubik.com\/blog\/create-ui-form-in-magento-2\/#primaryimage\",\"url\":\"https:\/\/magerubik.com\/blog\/wp-content\/uploads\/2023\/02\/magento-2-create-ui-form.jpg\",\"contentUrl\":\"https:\/\/magerubik.com\/blog\/wp-content\/uploads\/2023\/02\/magento-2-create-ui-form.jpg\",\"width\":800,\"height\":445,\"caption\":\"Magento 2 create ui Form\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/magerubik.com\/blog\/create-ui-form-in-magento-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Magerubik blog site\",\"item\":\"https:\/\/magerubik.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create UI Form in Magento 2\"}]},{\"@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":"Create UI Form in Magento 2 | MageRubik","description":"Practice create UI Form in Magento - Experience the combination of HTML and JavaScript content in ui component technology.","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\/create-ui-form-in-magento-2\/","og_locale":"en_US","og_type":"article","og_title":"Create UI Form in Magento 2 | MageRubik","og_description":"Practice create UI Form in Magento - Experience the combination of HTML and JavaScript content in ui component technology.","og_url":"https:\/\/magerubik.com\/blog\/create-ui-form-in-magento-2\/","og_site_name":"MageRubik","article_publisher":"https:\/\/www.facebook.com\/magerubik","article_author":"https:\/\/www.facebook.com\/magerubik","article_published_time":"2023-02-17T12:18:26+00:00","article_modified_time":"2023-04-24T02:43:26+00:00","og_image":[{"width":800,"height":445,"url":"https:\/\/magerubik.com\/blog\/wp-content\/uploads\/2023\/02\/magento-2-create-ui-form.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":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/magerubik.com\/blog\/create-ui-form-in-magento-2\/#article","isPartOf":{"@id":"https:\/\/magerubik.com\/blog\/create-ui-form-in-magento-2\/"},"author":{"name":"Hilary howard","@id":"https:\/\/magerubik.com\/blog\/#\/schema\/person\/dad797dc557c925c92436706db1359d8"},"headline":"Create UI Form in Magento 2","datePublished":"2023-02-17T12:18:26+00:00","dateModified":"2023-04-24T02:43:26+00:00","mainEntityOfPage":{"@id":"https:\/\/magerubik.com\/blog\/create-ui-form-in-magento-2\/"},"wordCount":354,"publisher":{"@id":"https:\/\/magerubik.com\/blog\/#\/schema\/person\/dad797dc557c925c92436706db1359d8"},"image":{"@id":"https:\/\/magerubik.com\/blog\/create-ui-form-in-magento-2\/#primaryimage"},"thumbnailUrl":"https:\/\/magerubik.com\/blog\/wp-content\/uploads\/2023\/02\/magento-2-create-ui-form.jpg","articleSection":["Magento 2 Extension Tutorials"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/magerubik.com\/blog\/create-ui-form-in-magento-2\/","url":"https:\/\/magerubik.com\/blog\/create-ui-form-in-magento-2\/","name":"Create UI Form in Magento 2 | MageRubik","isPartOf":{"@id":"https:\/\/magerubik.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/magerubik.com\/blog\/create-ui-form-in-magento-2\/#primaryimage"},"image":{"@id":"https:\/\/magerubik.com\/blog\/create-ui-form-in-magento-2\/#primaryimage"},"thumbnailUrl":"https:\/\/magerubik.com\/blog\/wp-content\/uploads\/2023\/02\/magento-2-create-ui-form.jpg","datePublished":"2023-02-17T12:18:26+00:00","dateModified":"2023-04-24T02:43:26+00:00","description":"Practice create UI Form in Magento - Experience the combination of HTML and JavaScript content in ui component technology.","breadcrumb":{"@id":"https:\/\/magerubik.com\/blog\/create-ui-form-in-magento-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/magerubik.com\/blog\/create-ui-form-in-magento-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/magerubik.com\/blog\/create-ui-form-in-magento-2\/#primaryimage","url":"https:\/\/magerubik.com\/blog\/wp-content\/uploads\/2023\/02\/magento-2-create-ui-form.jpg","contentUrl":"https:\/\/magerubik.com\/blog\/wp-content\/uploads\/2023\/02\/magento-2-create-ui-form.jpg","width":800,"height":445,"caption":"Magento 2 create ui Form"},{"@type":"BreadcrumbList","@id":"https:\/\/magerubik.com\/blog\/create-ui-form-in-magento-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Magerubik blog site","item":"https:\/\/magerubik.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create UI Form in Magento 2"}]},{"@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\/515","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=515"}],"version-history":[{"count":5,"href":"https:\/\/magerubik.com\/blog\/wp-json\/wp\/v2\/posts\/515\/revisions"}],"predecessor-version":[{"id":636,"href":"https:\/\/magerubik.com\/blog\/wp-json\/wp\/v2\/posts\/515\/revisions\/636"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/magerubik.com\/blog\/wp-json\/wp\/v2\/media\/516"}],"wp:attachment":[{"href":"https:\/\/magerubik.com\/blog\/wp-json\/wp\/v2\/media?parent=515"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/magerubik.com\/blog\/wp-json\/wp\/v2\/categories?post=515"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/magerubik.com\/blog\/wp-json\/wp\/v2\/tags?post=515"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}