{"id":374870,"date":"2023-03-31T05:56:29","date_gmt":"2023-03-31T05:56:29","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=374870"},"modified":"2023-03-31T08:07:10","modified_gmt":"2023-03-31T08:07:10","slug":"how-to-add-custom-field-in-ui-component-using-htmlcontent-magento-2","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/how-to-add-custom-field-in-ui-component-using-htmlcontent-magento-2\/","title":{"rendered":"How to add Custom Field in UI Component using htmlContent Magento 2"},"content":{"rendered":"\n<p>In this blog, we will learn how to add a custom input using htmlContent inside a UI component form in Magento 2.<\/p>\n\n\n\n<p>we can create a form using the Magento UI component, but if you want to add some htmlContent to your form using the Magento UI component then the solution is here.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">HtmlContent component<\/h2>\n\n\n\n<p> The htmlContent is a UI component. We can render Block into UI components.<\/p>\n\n\n\n<p>Here We are following some steps-<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1. <strong>Create a custom module in Magento:<\/strong><\/h2>\n\n\n\n<p>     We are creating a <a href=\"https:\/\/experienceleague.adobe.com\/docs\/commerce-learn\/tutorials\/backend-development\/create-module.html?lang=en\" target=\"_blank\" rel=\"noreferrer noopener\">module<\/a> with the name Webkul_CustomField in Magento.<\/p>\n\n\n\n<p>    You can follow this blog to create a custom module in Magento 2<\/p>\n\n\n\n<p> <a href=\"https:\/\/webkul.com\/blog\/create-hello-module-in-magento2\/\">Create a custom module blog<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2. Create an etc\/module.xml file.<\/h2>\n\n\n\n<p>      It is a step to create a custom module. create module.xml file in the etc folder.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">app\/code\/Webkul\/CustomField\/etc\/module.xml<\/pre>\n\n\n\n<ol class=\"wp-block-list\"><\/ol>\n\n\n\n<p>code would be :<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;?xml version=&quot;1.0&quot;?&gt;\n&lt;config xmlns:xsi=&quot;http:\/\/www.w3.org\/2001\/XMLSchema-instance&quot; xsi:noNamespaceSchemaLocation=&quot;urn:magento:framework:Module\/etc\/module.xsd&quot;&gt;\n    &lt;module name=&quot;Webkul_CustomField&quot;&gt;\n    &lt;\/module&gt;\n&lt;\/config&gt;<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">3. Create a registration.php file in the module root<\/h2>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;?php\n\\Magento\\Framework\\Component\\ComponentRegistrar::register(\n    \\Magento\\Framework\\Component\\ComponentRegistrar::MODULE,\n    &#039;Webkul_CustomField&#039;,\n    __DIR__\n);<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">4. Create a UI component form <\/h2>\n\n\n\n<p>To create a UI component form follow these blogs <\/p>\n\n\n\n<p><a href=\"https:\/\/webkul.com\/blog\/create-ui-form-magento2-part-1\/\" target=\"_blank\" rel=\"noreferrer noopener\">Step 1 <\/a> Create UI Form in Magento2 \u2013 Part 1<\/p>\n\n\n\n<p><a href=\"https:\/\/webkul.com\/blog\/create-ui-form-magento2-part-2\/\" target=\"_blank\" rel=\"noreferrer noopener\">Step 2<\/a>  Create Ui Form In Magento2 \u2013 Part 2<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>UI component form<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1196\" height=\"413\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Task-edit-Magento-Admin.png\" alt=\"Task-edit-Magento-Admin\" class=\"wp-image-374876\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Task-edit-Magento-Admin.png 1196w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Task-edit-Magento-Admin-300x104.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Task-edit-Magento-Admin-250x86.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Task-edit-Magento-Admin-768x265.png 768w\" sizes=\"(max-width: 1196px) 100vw, 1196px\" loading=\"lazy\" \/><figcaption class=\"wp-element-caption\">UI component form<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">5. Add htmlContent code inside UI component form .xml file<\/h2>\n\n\n\n<p>and put htmlContent code inside UI component form &lt;fieldset&gt;. <\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;htmlContent name=&quot;custom_field&quot;&gt;\n   &lt;block name=&quot;html_content_input_field&quot; &gt;\n      &lt;arguments&gt;\n\t&lt;argument name=&quot;template&quot; xsi:type=&quot;string&quot;&gt;\n\t    Webkul_CustomField::input_field.phtml\n\t&lt;\/argument&gt;\n      &lt;\/arguments&gt;\n   &lt;\/block&gt;\n&lt;\/htmlContent&gt;<\/pre>\n\n\n\n<p>Note &#8211; You can add a Block class to create functions to use in input_field.phtml file.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">6. Now create input_field.phtml file<\/h2>\n\n\n\n<p>    Now create a template file for the input input_field.phtml in which we will write the HTML content.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">app\/code\/Webkul\/CustomField\/view\/adminhtml\/templates\/input_field.phtml<\/pre>\n\n\n\n<p>you can add your input field code inside input_field.phtml file<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;div class=&quot;admin__fieldset&quot;&gt;\n    &lt;div class=&quot;admin__field&quot;&gt;\n        &lt;div class=&quot;admin__field-label&quot;&gt;Custom Field&lt;\/div&gt;\n        &lt;div class=&quot;admin__field-control&quot;&gt;\n            &lt;input class=&quot;admin__control-text&quot; data-form-part=&quot;custom_form&quot; type=&quot;text&quot; name=&quot;custom&quot; value=&quot;&quot;&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;<\/pre>\n\n\n\n<p>Now you can see custom input in our UI component form<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">- data-form-part=&quot;your UI form name&quot; to post that field data with UI component form<\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1179\" height=\"328\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Magento-Admin.png\" alt=\"Magento-Admin\" class=\"wp-image-374879\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Magento-Admin.png 1179w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Magento-Admin-300x83.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Magento-Admin-250x70.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Magento-Admin-768x214.png 768w\" sizes=\"(max-width: 1179px) 100vw, 1179px\" loading=\"lazy\" \/><figcaption class=\"wp-element-caption\">ui component form<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>In this blog, we will learn how to add a custom input using htmlContent inside a UI component form in Magento 2. we can create a form using the Magento UI component, but if you want to add some htmlContent to your form using the Magento UI component then the solution is here. HtmlContent component <a href=\"https:\/\/webkul.com\/blog\/how-to-add-custom-field-in-ui-component-using-htmlcontent-magento-2\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":518,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-374870","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Add Custom Field in UI Component using htmlContent Magento 2<\/title>\n<meta name=\"description\" content=\"The article about how to use htmlContent in UI component form in Magento 2, create a custom input field inside UI component form.\" \/>\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\/how-to-add-custom-field-in-ui-component-using-htmlcontent-magento-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Add Custom Field in UI Component using htmlContent Magento 2\" \/>\n<meta property=\"og:description\" content=\"The article about how to use htmlContent in UI component form in Magento 2, create a custom input field inside UI component form.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/how-to-add-custom-field-in-ui-component-using-htmlcontent-magento-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-31T05:56:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-31T08:07:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Task-edit-Magento-Admin.png\" \/>\n<meta name=\"author\" content=\"Tarun Pundhir\" \/>\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=\"Tarun Pundhir\" \/>\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\/how-to-add-custom-field-in-ui-component-using-htmlcontent-magento-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-custom-field-in-ui-component-using-htmlcontent-magento-2\/\"},\"author\":{\"name\":\"Tarun Pundhir\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/da1ba586e53ff8058892b67831ef5f2f\"},\"headline\":\"How to add Custom Field in UI Component using htmlContent Magento 2\",\"datePublished\":\"2023-03-31T05:56:29+00:00\",\"dateModified\":\"2023-03-31T08:07:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-custom-field-in-ui-component-using-htmlcontent-magento-2\/\"},\"wordCount\":277,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-custom-field-in-ui-component-using-htmlcontent-magento-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Task-edit-Magento-Admin.png\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-add-custom-field-in-ui-component-using-htmlcontent-magento-2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-custom-field-in-ui-component-using-htmlcontent-magento-2\/\",\"url\":\"https:\/\/webkul.com\/blog\/how-to-add-custom-field-in-ui-component-using-htmlcontent-magento-2\/\",\"name\":\"Add Custom Field in UI Component using htmlContent Magento 2\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-custom-field-in-ui-component-using-htmlcontent-magento-2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-custom-field-in-ui-component-using-htmlcontent-magento-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Task-edit-Magento-Admin.png\",\"datePublished\":\"2023-03-31T05:56:29+00:00\",\"dateModified\":\"2023-03-31T08:07:10+00:00\",\"description\":\"The article about how to use htmlContent in UI component form in Magento 2, create a custom input field inside UI component form.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-custom-field-in-ui-component-using-htmlcontent-magento-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-add-custom-field-in-ui-component-using-htmlcontent-magento-2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-custom-field-in-ui-component-using-htmlcontent-magento-2\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Task-edit-Magento-Admin.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Task-edit-Magento-Admin.png\",\"width\":1196,\"height\":413,\"caption\":\"Task-edit-Magento-Admin\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-custom-field-in-ui-component-using-htmlcontent-magento-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to add Custom Field in UI Component using htmlContent Magento 2\"}]},{\"@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\/da1ba586e53ff8058892b67831ef5f2f\",\"name\":\"Tarun Pundhir\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1bdeedccbb3dcb6e0ac6654bd5ea530f8b4acbe03497c98e7544b62d889a7499?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\/1bdeedccbb3dcb6e0ac6654bd5ea530f8b4acbe03497c98e7544b62d889a7499?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Tarun Pundhir\"},\"description\":\"Tarun is a proficient Software Engineer specializing in the Magento platform. With expertise in Magento Marketplace Development and API Development services, he delivers robust, scalable solutions that enhance eCommerce functionality, driving seamless integration and empowering businesses to thrive in the digital landscape\",\"url\":\"https:\/\/webkul.com\/blog\/author\/tarun-pundhir408\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Add Custom Field in UI Component using htmlContent Magento 2","description":"The article about how to use htmlContent in UI component form in Magento 2, create a custom input field inside UI component form.","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\/how-to-add-custom-field-in-ui-component-using-htmlcontent-magento-2\/","og_locale":"en_US","og_type":"article","og_title":"Add Custom Field in UI Component using htmlContent Magento 2","og_description":"The article about how to use htmlContent in UI component form in Magento 2, create a custom input field inside UI component form.","og_url":"https:\/\/webkul.com\/blog\/how-to-add-custom-field-in-ui-component-using-htmlcontent-magento-2\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2023-03-31T05:56:29+00:00","article_modified_time":"2023-03-31T08:07:10+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Task-edit-Magento-Admin.png","type":"","width":"","height":""}],"author":"Tarun Pundhir","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Tarun Pundhir","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/how-to-add-custom-field-in-ui-component-using-htmlcontent-magento-2\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/how-to-add-custom-field-in-ui-component-using-htmlcontent-magento-2\/"},"author":{"name":"Tarun Pundhir","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/da1ba586e53ff8058892b67831ef5f2f"},"headline":"How to add Custom Field in UI Component using htmlContent Magento 2","datePublished":"2023-03-31T05:56:29+00:00","dateModified":"2023-03-31T08:07:10+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-add-custom-field-in-ui-component-using-htmlcontent-magento-2\/"},"wordCount":277,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-add-custom-field-in-ui-component-using-htmlcontent-magento-2\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Task-edit-Magento-Admin.png","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/how-to-add-custom-field-in-ui-component-using-htmlcontent-magento-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/how-to-add-custom-field-in-ui-component-using-htmlcontent-magento-2\/","url":"https:\/\/webkul.com\/blog\/how-to-add-custom-field-in-ui-component-using-htmlcontent-magento-2\/","name":"Add Custom Field in UI Component using htmlContent Magento 2","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-add-custom-field-in-ui-component-using-htmlcontent-magento-2\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-add-custom-field-in-ui-component-using-htmlcontent-magento-2\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Task-edit-Magento-Admin.png","datePublished":"2023-03-31T05:56:29+00:00","dateModified":"2023-03-31T08:07:10+00:00","description":"The article about how to use htmlContent in UI component form in Magento 2, create a custom input field inside UI component form.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/how-to-add-custom-field-in-ui-component-using-htmlcontent-magento-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/how-to-add-custom-field-in-ui-component-using-htmlcontent-magento-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/how-to-add-custom-field-in-ui-component-using-htmlcontent-magento-2\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Task-edit-Magento-Admin.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Task-edit-Magento-Admin.png","width":1196,"height":413,"caption":"Task-edit-Magento-Admin"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/how-to-add-custom-field-in-ui-component-using-htmlcontent-magento-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to add Custom Field in UI Component using htmlContent Magento 2"}]},{"@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\/da1ba586e53ff8058892b67831ef5f2f","name":"Tarun Pundhir","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1bdeedccbb3dcb6e0ac6654bd5ea530f8b4acbe03497c98e7544b62d889a7499?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\/1bdeedccbb3dcb6e0ac6654bd5ea530f8b4acbe03497c98e7544b62d889a7499?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Tarun Pundhir"},"description":"Tarun is a proficient Software Engineer specializing in the Magento platform. With expertise in Magento Marketplace Development and API Development services, he delivers robust, scalable solutions that enhance eCommerce functionality, driving seamless integration and empowering businesses to thrive in the digital landscape","url":"https:\/\/webkul.com\/blog\/author\/tarun-pundhir408\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/374870","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\/518"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=374870"}],"version-history":[{"count":21,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/374870\/revisions"}],"predecessor-version":[{"id":375052,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/374870\/revisions\/375052"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=374870"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=374870"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=374870"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}