{"id":61500,"date":"2016-10-08T15:30:39","date_gmt":"2016-10-08T15:30:39","guid":{"rendered":"http:\/\/webkul.com\/blog\/?p=61500"},"modified":"2024-02-21T09:34:49","modified_gmt":"2024-02-21T09:34:49","slug":"create-ui-form-magento2-part-1","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/create-ui-form-magento2-part-1\/","title":{"rendered":"Create UI Form in Magento 2 – Part 1"},"content":{"rendered":"\n

Magento 2 UI component <\/strong>– In this blog, we will see how to create UI form in Magento 2<\/a>.
Yes, like the admin grid, we can also create forms using the UI component in Magento 2.<\/p>\n\n\n\n

Suppose we want to create an employee form in the admin. This employee form will have fields Employee Name, Employee Id, Employee Salary, and Employee Address. Suppose the table name is employee_details.<\/p>\n\n\n\n

First of all, create a Model and Resource Model<\/a> for this table ’employee_details’. Here i am assuming that you already know how to create a model and resource model for the table.<\/p>\n\n\n\n

Now follow the steps to create ui form.<\/p>\n\n\n\n

Step 1<\/strong>: First you have to create a router for the controller. Create ‘routes.xml’ in folder ‘Webkul\/UiForm\/etc\/adminhtml’<\/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="uiform" frontName="uiform">\n            <module name="Webkul_UiForm"\/>\n        <\/route>\n    <\/router>\n<\/config><\/pre>\n\n\n\n

Step 2<\/strong>: Now create a controller. Create an ‘Edit.php’  in the folder ‘Webkul\/UiForm\/Controller\/Adminhtml\/Employee’.<\/p>\n\n\n\n
<?php\nnamespace Webkul\\UiForm\\Controller\\Adminhtml\\Employee;\n\nuse Magento\\Framework\\Controller\\ResultFactory;\n\nclass Edit extends \\Magento\\Backend\\App\\Action\n{\n    \/**\n     * @return \\Magento\\Backend\\Model\\View\\Result\\Page\n     *\/\n    public function execute()\n    {\n        $resultPage = $this->resultFactory->create(ResultFactory::TYPE_PAGE);\n        return $resultPage;\n    }\n}<\/pre>\n\n\n\n
Step 3<\/strong> : Create ‘uiform_employee_edit.xml’ layout file in folder ‘Webkul\/UiForm\/view\/adminhtml\/layout’<\/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="styles"\/>\n    <body>\n        <referenceContainer name="content">\n            <uiComponent name="employee_form"\/>\n        <\/referenceContainer>\n    <\/body>\n<\/page><\/pre>\n\n\n\n
Step 4<\/strong> : Create ’employee_form.xml’ in folder ‘Webkul\/UiForm\/view\/adminhtml\/ui_component’.<\/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">employee_form.employee_form_data_source<\/item>\n            <item name="deps" xsi:type="string">employee_form.employee_form_data_source<\/item>\n        <\/item>\n        <item name="label" xsi:type="string" translate="true">Employee Information<\/item>\n        <item name="config" xsi:type="array">\n            <item name="dataScope" xsi:type="string">data<\/item>\n            <item name="namespace" xsi:type="string">employee_form<\/item>\n        <\/item>\n        <item name="template" xsi:type="string">templates\/form\/collapsible<\/item>\n    <\/argument>\n    <settings>\n        <buttons>\n            <button name="save" class="Webkul\\UiForm\\Block\\Adminhtml\\Employee\\SaveButton"\/>\n        <\/buttons>\n        <dataScope>data<\/dataScope>\n        <deps>\n            <dep>employee_form.employee_form_data_source<\/dep>\n        <\/deps>\n    <\/settings>\n    <dataSource name="employee_form_data_source">\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        <settings>\n            <submitUrl path="*\/*\/save"\/>\n        <\/settings>\n        <dataProvider class="Webkul\\UiForm\\Model\\DataProvider" name="employee_form_data_source">\n            <settings>\n                <requestFieldName>id<\/requestFieldName>\n                <primaryFieldName>entity_id<\/primaryFieldName>\n            <\/settings>\n        <\/dataProvider>\n    <\/dataSource>\n    <fieldset name="employee_details">\n        <argument name="data" xsi:type="array">\n            <item name="config" xsi:type="array">\n                <item name="collapsible" xsi:type="boolean">true<\/item>\n                <item name="label" xsi:type="string" translate="true">Employee Details<\/item>\n                <item name="sortOrder" xsi:type="number">20<\/item>\n            <\/item>\n        <\/argument>\n        <field name="employee_id">\n            <argument name="data" xsi:type="array">\n                <item name="config" xsi:type="array">\n                    <item name="dataType" xsi:type="string">text<\/item>\n                    <item name="label" xsi:type="string" translate="true">Employee Id<\/item>\n                    <item name="formElement" xsi:type="string">input<\/item>\n                    <item name="source" xsi:type="string">employee<\/item>\n                    <item name="dataScope" xsi:type="string">employee_id<\/item>\n                <\/item>\n            <\/argument>\n        <\/field>\n        <field name="name">\n            <argument name="data" xsi:type="array">\n                <item name="config" xsi:type="array">\n                    <item name="dataType" xsi:type="string">text<\/item>\n                    <item name="label" xsi:type="string" translate="true">Employee Name<\/item>\n                    <item name="formElement" xsi:type="string">input<\/item>\n                    <item name="source" xsi:type="string">employee<\/item>\n                    <item name="dataScope" xsi:type="string">name<\/item>\n                <\/item>\n            <\/argument>\n        <\/field>\n        <field name="salary">\n            <argument name="data" xsi:type="array">\n                <item name="config" xsi:type="array">\n                    <item name="dataType" xsi:type="string">text<\/item>\n                    <item name="label" xsi:type="string" translate="true">Employee Salary<\/item>\n                    <item name="formElement" xsi:type="string">input<\/item>\n                    <item name="source" xsi:type="string">employee<\/item>\n                    <item name="dataScope" xsi:type="string">salary<\/item>\n                <\/item>\n            <\/argument>\n        <\/field>\n        <field name="address">\n            <argument name="data" xsi:type="array">\n                <item name="config" xsi:type="array">\n                    <item name="dataType" xsi:type="string">text<\/item>\n                    <item name="label" xsi:type="string" translate="true">Employee Address<\/item>\n                    <item name="formElement" xsi:type="string">textarea<\/item>\n                    <item name="source" xsi:type="string">employee<\/item>\n                    <item name="dataScope" xsi:type="string">address<\/item>\n                <\/item>\n            <\/argument>\n        <\/field>\n    <\/fieldset>\n<\/form><\/pre>\n\n\n\n
Step 5<\/strong> : Create DataProvider.php in folder ‘Webkul\/UiForm\/Model’<\/p>\n\n\n\n
<?php\nnamespace Webkul\\UiForm\\Model;\n\nuse Webkul\\UiForm\\Model\\ResourceModel\\Employee\\CollectionFactory;\n\nclass DataProvider extends \\Magento\\Ui\\DataProvider\\AbstractDataProvider\n{\n    \/**\n     * @param string $name\n     * @param string $primaryFieldName\n     * @param string $requestFieldName\n     * @param CollectionFactory $employeeCollectionFactory\n     * @param array $meta\n     * @param array $data\n     *\/\n    public function __construct(\n        $name,\n        $primaryFieldName,\n        $requestFieldName,\n        CollectionFactory $employeeCollectionFactory,\n        array $meta = [],\n        array $data = []\n    ) {\n        $this->collection = $employeeCollectionFactory->create();\n        parent::__construct($name, $primaryFieldName, $requestFieldName, $meta, $data);\n    }\n\n    \/**\n     * Get data\n     *\n     * @return array\n     *\/\n    public function getData()\n    {\n        return [];\n    }\n}<\/pre>\n\n\n\n
After all these steps your ui form is ready.
\"Create<\/p>\n\n\n\n
if you want to display values from database in form fields then refer to this link Create UI Form In Magento2 \u2013 Part 2<\/a><\/p>\n\n\n\n
If you have any query please comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
Magento 2 UI component – In this blog, we will see how to create UI form in Magento 2.Yes, like the admin grid, we can also create forms using the UI component in Magento 2. Suppose we want to create an employee form in the admin. This employee form will have fields Employee Name, Employee […]<\/a><\/p>\n","protected":false},"author":21,"featured_media":61510,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[302],"tags":[2070,3753,3754],"class_list":["post-61500","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-magento2","tag-magento2","tag-ui-component","tag-ui-form"],"yoast_head":"\nCreate Ui Form Using Ui Component in Magento2 - Part 1<\/title>\n<meta name=\"description\" content=\"Use Ui Component in Magento2, Create Ui Form in Magento 2, Ui Component Form in Magento 2, Create Ui Form Using Ui Component in Magento2\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/create-ui-form-magento2-part-1\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create Ui Form Using Ui Component in Magento2 - Part 1\" \/>\n<meta property=\"og:description\" content=\"Use Ui Component in Magento2, Create Ui Form in Magento 2, Ui Component Form in Magento 2, Create Ui Form Using Ui Component in Magento2\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/create-ui-form-magento2-part-1\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/rahul0989\" \/>\n<meta property=\"article:published_time\" content=\"2016-10-08T15:30:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-21T09:34:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/10\/Magneto-Code-Snippet-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"825\" \/>\n\t<meta property=\"og:image:height\" content=\"260\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Rahul Mahto\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rahul Mahto\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/create-ui-form-magento2-part-1\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-ui-form-magento2-part-1\/\"},\"author\":{\"name\":\"Rahul Mahto\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/3002e6bca8362f6cf1c61b2663496c4f\"},\"headline\":\"Create UI Form in Magento 2 – Part 1\",\"datePublished\":\"2016-10-08T15:30:39+00:00\",\"dateModified\":\"2024-02-21T09:34:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-ui-form-magento2-part-1\/\"},\"wordCount\":228,\"commentCount\":14,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-ui-form-magento2-part-1\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/10\/Magneto-Code-Snippet-1.png\",\"keywords\":[\"Magento2\",\"Ui Component\",\"Ui Form\"],\"articleSection\":[\"Magento2\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/create-ui-form-magento2-part-1\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/create-ui-form-magento2-part-1\/\",\"url\":\"https:\/\/webkul.com\/blog\/create-ui-form-magento2-part-1\/\",\"name\":\"Create Ui Form Using Ui Component in Magento2 - Part 1\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-ui-form-magento2-part-1\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-ui-form-magento2-part-1\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/10\/Magneto-Code-Snippet-1.png\",\"datePublished\":\"2016-10-08T15:30:39+00:00\",\"dateModified\":\"2024-02-21T09:34:49+00:00\",\"description\":\"Use Ui Component in Magento2, Create Ui Form in Magento 2, Ui Component Form in Magento 2, Create Ui Form Using Ui Component in Magento2\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-ui-form-magento2-part-1\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/create-ui-form-magento2-part-1\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/create-ui-form-magento2-part-1\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/10\/Magneto-Code-Snippet-1.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/10\/Magneto-Code-Snippet-1.png\",\"width\":825,\"height\":260,\"caption\":\"Ui Component Form\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/create-ui-form-magento2-part-1\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create UI Form in Magento 2 – Part 1\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/3002e6bca8362f6cf1c61b2663496c4f\",\"name\":\"Rahul Mahto\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b0def172ef24ea3f7319500afbb65af8012023ba5c143982a4c958b2fb58ee0d?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b0def172ef24ea3f7319500afbb65af8012023ba5c143982a4c958b2fb58ee0d?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Rahul Mahto\"},\"sameAs\":[\"http:\/\/webkul.com\",\"https:\/\/www.facebook.com\/rahul0989\"],\"url\":\"https:\/\/webkul.com\/blog\/author\/rahul\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create Ui Form Using Ui Component in Magento2 - Part 1","description":"Use Ui Component in Magento2, Create Ui Form in Magento 2, Ui Component Form in Magento 2, Create Ui Form Using Ui Component in Magento2","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:\/\/webkul.com\/blog\/create-ui-form-magento2-part-1\/","og_locale":"en_US","og_type":"article","og_title":"Create Ui Form Using Ui Component in Magento2 - Part 1","og_description":"Use Ui Component in Magento2, Create Ui Form in Magento 2, Ui Component Form in Magento 2, Create Ui Form Using Ui Component in Magento2","og_url":"https:\/\/webkul.com\/blog\/create-ui-form-magento2-part-1\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_author":"https:\/\/www.facebook.com\/rahul0989","article_published_time":"2016-10-08T15:30:39+00:00","article_modified_time":"2024-02-21T09:34:49+00:00","og_image":[{"width":825,"height":260,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/10\/Magneto-Code-Snippet-1.png","type":"image\/png"}],"author":"Rahul Mahto","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Rahul Mahto","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/create-ui-form-magento2-part-1\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/create-ui-form-magento2-part-1\/"},"author":{"name":"Rahul Mahto","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/3002e6bca8362f6cf1c61b2663496c4f"},"headline":"Create UI Form in Magento 2 – Part 1","datePublished":"2016-10-08T15:30:39+00:00","dateModified":"2024-02-21T09:34:49+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/create-ui-form-magento2-part-1\/"},"wordCount":228,"commentCount":14,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/create-ui-form-magento2-part-1\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/10\/Magneto-Code-Snippet-1.png","keywords":["Magento2","Ui Component","Ui Form"],"articleSection":["Magento2"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/create-ui-form-magento2-part-1\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/create-ui-form-magento2-part-1\/","url":"https:\/\/webkul.com\/blog\/create-ui-form-magento2-part-1\/","name":"Create Ui Form Using Ui Component in Magento2 - Part 1","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/create-ui-form-magento2-part-1\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/create-ui-form-magento2-part-1\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/10\/Magneto-Code-Snippet-1.png","datePublished":"2016-10-08T15:30:39+00:00","dateModified":"2024-02-21T09:34:49+00:00","description":"Use Ui Component in Magento2, Create Ui Form in Magento 2, Ui Component Form in Magento 2, Create Ui Form Using Ui Component in Magento2","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/create-ui-form-magento2-part-1\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/create-ui-form-magento2-part-1\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/create-ui-form-magento2-part-1\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/10\/Magneto-Code-Snippet-1.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/10\/Magneto-Code-Snippet-1.png","width":825,"height":260,"caption":"Ui Component Form"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/create-ui-form-magento2-part-1\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create UI Form in Magento 2 – Part 1"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/3002e6bca8362f6cf1c61b2663496c4f","name":"Rahul Mahto","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b0def172ef24ea3f7319500afbb65af8012023ba5c143982a4c958b2fb58ee0d?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b0def172ef24ea3f7319500afbb65af8012023ba5c143982a4c958b2fb58ee0d?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Rahul Mahto"},"sameAs":["http:\/\/webkul.com","https:\/\/www.facebook.com\/rahul0989"],"url":"https:\/\/webkul.com\/blog\/author\/rahul\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/61500","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=61500"}],"version-history":[{"count":35,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/61500\/revisions"}],"predecessor-version":[{"id":423373,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/61500\/revisions\/423373"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media\/61510"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=61500"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=61500"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=61500"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}