{"id":61512,"date":"2016-10-08T15:27:44","date_gmt":"2016-10-08T15:27:44","guid":{"rendered":"http:\/\/webkul.com\/blog\/?p=61512"},"modified":"2024-03-04T05:07:33","modified_gmt":"2024-03-04T05:07:33","slug":"add-html-content-using-uicomponent-form","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/add-html-content-using-uicomponent-form\/","title":{"rendered":"How to add html content using uicomponent form"},"content":{"rendered":"\n

How to add html content using uicomponent form – As we all know that in magento2 we can create a form using magento uicomponent, but if you want to add some html content in your form using magento uicomponent then the solution is here. Using this post you will know how can add a html content inside a fieldset in magento admin form.<\/p>\n\n\n\n

In this example I am creating a banner form “grid_banner_form” in module “Webkul_Grid” .<\/p>\n\n\n\n

Here I am following some steps-<\/p>\n\n\n\n

    \n
  1. Create a custom module:<\/strong><\/li>\n<\/ol>\n\n\n\n

    Name of the module is defined as VendorName_ModuleName<\/code>. First part is name of the vendor and last part is name of the module: For example: Magento_HelloWorld<\/code>, Webkul_Grid<\/code>. Focus on following guide to create the folders:<\/p>\n\n\n\n

     2: Create etc\/module.xml file.<\/h4>\n\n\n\n

    Then, it is necessary to create etc folder and add the\u00a0module.xml<\/code>\u00a0file app\/code\/Webkul\/Grid\/etc\/module.xml<\/p>\n\n\n\n

    Contents would be:<\/strong><\/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:Module\/etc\/module.xsd">\n    <module name="Webkul_Grid">\n    <\/module>\n<\/config><\/pre>\n\n\n\n
     3: Create etc\/registration.php file<\/h3>\n\n\n\n
    <?php\n\\Magento\\Framework\\Component\\ComponentRegistrar::register(\n    \\Magento\\Framework\\Component\\ComponentRegistrar::MODULE,\n    'Webkul_Grid',\n    __DIR__\n);<\/pre>\n\n\n\n
      \n
    1. Define your uicomponent form in your module xml path – \/app\/code\/Webkul\/Grid\/view\/adminhtml\/layout\/grid_banner_form.xml  –<\/li>\n<\/ol>\n\n\n\n
      In this layout file you will declare your  uiComponent using the <uiComponent> tag.<\/p>\n\n\n\n
      <?xml version="1.0"?>\n<page xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" layout="admin-2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd">\n    <head>\n        <link src="Webkul_Grid::js\/bootstrap\/banner-post-action.js"\/>\n    <\/head>\n    <body>\n        <referenceContainer name="content">\n            <uiComponent name="grid_banner_form"\/>\n        <\/referenceContainer>\n    <\/body>\n<\/page><\/pre>\n\n\n\n
      Now create uicomponent form xml path – \/app\/code\/Webkul\/Grid\/view\/adminhtml\/ui_component\/grid_banner_form.xml \u00a0–<\/p>\n\n\n\n
      Create your uiComponent in the grid_banner_form.xml with dataSource<\/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">grid_banner_form.grid_banner_form_data_source<\/item>\n            <item name="deps" xsi:type="string">grid_banner_form.grid_banner_form_data_source<\/item>\n        <\/item>\n        <item name="label" xsi:type="string" translate="true">Grid Banner Information<\/item>\n        <item name="layout" xsi:type="array">\n            <item name="type" xsi:type="string">tabs<\/item>\n            <item name="navContainerName" xsi:type="string">left<\/item>\n        <\/item>\n        <item name="buttons" xsi:type="array">\n            <item name="back" xsi:type="string">Webkul\\Grid\\Block\\Adminhtml\\Edit\\BackButton<\/item>\n            <item name="delete" xsi:type="string">Webkul\\Grid\\Block\\Adminhtml\\Edit\\Banner\\DeleteButton<\/item>\n            <item name="reset" xsi:type="string">Webkul\\Grid\\Block\\Adminhtml\\Edit\\ResetButton<\/item>\n            <item name="save" xsi:type="string">Webkul\\Grid\\Block\\Adminhtml\\Edit\\Banner\\SaveButton<\/item>\n            <item name="save_and_continue" xsi:type="string">Webkul\\Grid\\Block\\Adminhtml\\Edit\\SaveAndContinueButton<\/item>\n        <\/item>\n    <\/argument>\n    <dataSource name="grid_banner_form_data_source">\n        <argument name="dataProvider" xsi:type="configurableObject">\n            <argument name="class" xsi:type="string">Webkul\\Grid\\Model\\Banner\\DataProvider<\/argument>\n            <argument name="name" xsi:type="string">grid_banner_form_data_source<\/argument>\n            <argument name="primaryFieldName" xsi:type="string">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="grid\/banner\/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    <fieldset name="grid_banner">\n        <argument name="data" xsi:type="array">\n            <item name="config" xsi:type="array">\n                <item name="label" xsi:type="string" translate="true">Grid Banner Information<\/item>\n            <\/item>\n        <\/argument>\n        <container name="banner_container">\n            <argument name="data" xsi:type="array">\n                <item name="config" xsi:type="array">\n                    <item name="sortOrder" xsi:type="number">1<\/item>\n                <\/item>\n            <\/argument>\n            <htmlContent name="html_content">\n                <argument name="block" xsi:type="object">Webkul\\Grid\\Block\\Adminhtml\\Edit\\Banner\\CustomData<\/argument>\n            <\/htmlContent>\n        <\/container>\n    <\/fieldset>\n<\/form><\/pre>\n\n\n\n
      Note : Make sure to declare the data source in di.xml file of your module located at app\/code\/Webkul\/Grid\/etc\/adminhtml\/di.xml<\/p>\n\n\n\n
      Now create a custom Block “CustomData.php”  file in path :<\/p>\n\n\n\n
      \\app\\code\\Webkul\\Grid\\Block\\Adminhtml\\Edit\\Banner\\<\/p>\n\n\n\n
      <?php\n\nnamespace Webkul\\Grid\\Block\\Adminhtml\\Edit\\Banner;\n\nclass CustomData extends \\Magento\\Backend\\Block\\Template\n{\n    \/**\n     * Block template.\n     *\n     * @var string\n     *\/\n    protected $_template = 'banner\/customdata.phtml';\n\n    \/**\n     * AssignProducts constructor.\n     *\n     * @param \\Magento\\Backend\\Block\\Template\\Context  $context\n     * @param array                                    $data\n     *\/\n    public function __construct(\n        \\Magento\\Backend\\Block\\Template\\Context $context,\n        array $data = []\n    ) {\n        parent::__construct($context, $data);\n    }\n}<\/pre>\n\n\n\n
      Now create a template file for the above block customdata.phtml file in which we will write the html content which you want in path – \/app\/code\/Webkul\/Grid\/view\/adminhtml\/templates\/banner\/<\/p>\n\n\n\n
      <div><span><?php echo __("Webkul123");?><\/span> <\/div><\/pre>\n\n\n\n
      \"Screenshot-2\"<\/figure>\n\n\n\n
      So In this way you can add custom html data in your uiComponent form.<\/p>\n\n\n\n
      How to add html content using uicomponent form in magento2<\/p>\n\n\n\n
      You can also check below:<\/p>\n\n\n\n
      https:\/\/developer.adobe.com\/commerce\/frontend-core\/ui-components\/<\/a><\/p>\n\n\n\n
      \nhttps:\/\/webkul.com\/blog\/create-ui-form-magento2-part-1\/\n<\/div><\/figure>\n\n\n\n
      \nhttps:\/\/webkul.com\/blog\/create-ui-form-magento2-part-2\/\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"
      How to add html content using uicomponent form – As we all know that in magento2 we can create a form using magento uicomponent, but if you want to add some html content in your form using magento uicomponent then the solution is here. Using this post you will know how can add a html […]<\/a><\/p>\n","protected":false},"author":15,"featured_media":61510,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[302],"tags":[3752,3751],"class_list":["post-61512","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-magento2","tag-htmlcontent","tag-magento2-uicomponent-form"],"yoast_head":"\nHow to add custom html content using uicomponent form<\/title>\n<meta name=\"description\" content=\"How to add html content using uicomponent form - you want to add some html content in your form using magento uicomponent then the solution is here.\" \/>\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\/add-html-content-using-uicomponent-form\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to add custom html content using uicomponent form\" \/>\n<meta property=\"og:description\" content=\"How to add html content using uicomponent form - you want to add some html content in your form using magento uicomponent then the solution is here.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/add-html-content-using-uicomponent-form\/\" \/>\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=\"2016-10-08T15:27:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-04T05:07:33+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=\"Pooja Sahu\" \/>\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=\"Pooja Sahu\" \/>\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\/add-html-content-using-uicomponent-form\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/add-html-content-using-uicomponent-form\/\"},\"author\":{\"name\":\"Pooja Sahu\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/420601cccfd5bc83506bcdd12362504b\"},\"headline\":\"How to add html content using uicomponent form\",\"datePublished\":\"2016-10-08T15:27:44+00:00\",\"dateModified\":\"2024-03-04T05:07:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/add-html-content-using-uicomponent-form\/\"},\"wordCount\":362,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/add-html-content-using-uicomponent-form\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/10\/Magneto-Code-Snippet-1.png\",\"keywords\":[\"htmlcontent\",\"magento2 uicomponent form\"],\"articleSection\":[\"Magento2\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/add-html-content-using-uicomponent-form\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/add-html-content-using-uicomponent-form\/\",\"url\":\"https:\/\/webkul.com\/blog\/add-html-content-using-uicomponent-form\/\",\"name\":\"How to add custom html content using uicomponent form\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/add-html-content-using-uicomponent-form\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/add-html-content-using-uicomponent-form\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/10\/Magneto-Code-Snippet-1.png\",\"datePublished\":\"2016-10-08T15:27:44+00:00\",\"dateModified\":\"2024-03-04T05:07:33+00:00\",\"description\":\"How to add html content using uicomponent form - you want to add some html content in your form using magento uicomponent then the solution is here.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/add-html-content-using-uicomponent-form\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/add-html-content-using-uicomponent-form\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/add-html-content-using-uicomponent-form\/#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\/add-html-content-using-uicomponent-form\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to add html content using uicomponent form\"}]},{\"@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\/420601cccfd5bc83506bcdd12362504b\",\"name\":\"Pooja Sahu\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/87f400f19d2c602040b38dc2db6412c18f8c1ee7405e40a06bf4a21f24ea12c7?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/87f400f19d2c602040b38dc2db6412c18f8c1ee7405e40a06bf4a21f24ea12c7?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g\",\"caption\":\"Pooja Sahu\"},\"description\":\"Pooja Sahu is an Adobe Certified Professional – Developer in the Magento department, with expertise in HTML, CSS, JavaScript, MySQL, eCommerce platform development, and PWA. Her skills drive innovative solutions and enhance user experiences across various platforms.\",\"url\":\"https:\/\/webkul.com\/blog\/author\/pooja\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to add custom html content using uicomponent form","description":"How to add html content using uicomponent form - you want to add some html content in your form using magento uicomponent then the solution is here.","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\/add-html-content-using-uicomponent-form\/","og_locale":"en_US","og_type":"article","og_title":"How to add custom html content using uicomponent form","og_description":"How to add html content using uicomponent form - you want to add some html content in your form using magento uicomponent then the solution is here.","og_url":"https:\/\/webkul.com\/blog\/add-html-content-using-uicomponent-form\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2016-10-08T15:27:44+00:00","article_modified_time":"2024-03-04T05:07:33+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":"Pooja Sahu","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Pooja Sahu","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/add-html-content-using-uicomponent-form\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/add-html-content-using-uicomponent-form\/"},"author":{"name":"Pooja Sahu","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/420601cccfd5bc83506bcdd12362504b"},"headline":"How to add html content using uicomponent form","datePublished":"2016-10-08T15:27:44+00:00","dateModified":"2024-03-04T05:07:33+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/add-html-content-using-uicomponent-form\/"},"wordCount":362,"commentCount":2,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/add-html-content-using-uicomponent-form\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/10\/Magneto-Code-Snippet-1.png","keywords":["htmlcontent","magento2 uicomponent form"],"articleSection":["Magento2"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/add-html-content-using-uicomponent-form\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/add-html-content-using-uicomponent-form\/","url":"https:\/\/webkul.com\/blog\/add-html-content-using-uicomponent-form\/","name":"How to add custom html content using uicomponent form","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/add-html-content-using-uicomponent-form\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/add-html-content-using-uicomponent-form\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/10\/Magneto-Code-Snippet-1.png","datePublished":"2016-10-08T15:27:44+00:00","dateModified":"2024-03-04T05:07:33+00:00","description":"How to add html content using uicomponent form - you want to add some html content in your form using magento uicomponent then the solution is here.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/add-html-content-using-uicomponent-form\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/add-html-content-using-uicomponent-form\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/add-html-content-using-uicomponent-form\/#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\/add-html-content-using-uicomponent-form\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to add html content using uicomponent form"}]},{"@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\/420601cccfd5bc83506bcdd12362504b","name":"Pooja Sahu","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/87f400f19d2c602040b38dc2db6412c18f8c1ee7405e40a06bf4a21f24ea12c7?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/87f400f19d2c602040b38dc2db6412c18f8c1ee7405e40a06bf4a21f24ea12c7?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g","caption":"Pooja Sahu"},"description":"Pooja Sahu is an Adobe Certified Professional – Developer in the Magento department, with expertise in HTML, CSS, JavaScript, MySQL, eCommerce platform development, and PWA. Her skills drive innovative solutions and enhance user experiences across various platforms.","url":"https:\/\/webkul.com\/blog\/author\/pooja\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/61512","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\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=61512"}],"version-history":[{"count":13,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/61512\/revisions"}],"predecessor-version":[{"id":425734,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/61512\/revisions\/425734"}],"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=61512"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=61512"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=61512"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}