{"id":260937,"date":"2020-07-25T16:00:57","date_gmt":"2020-07-25T16:00:57","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=260937"},"modified":"2026-01-15T13:01:59","modified_gmt":"2026-01-15T13:01:59","slug":"add-custom-html-content-with-dynamic-rows-in-magento2","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/add-custom-html-content-with-dynamic-rows-in-magento2\/","title":{"rendered":"Add Custom html Content with Dynamic Rows in Magento 2"},"content":{"rendered":"\n<p>Today, we will learn how to add new fields or custom html content with dynamic rows.<\/p>\n\n\n\n<p>When we add dynamic rows in ui component form by default, Magento provides certain actions like delete to delete the added row. <\/p>\n\n\n\n<p>To know more on dynamic rows component within Magento 2 you can follow the <a href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/ui_comp_guide\/components\/ui-dynamicrows.html\">mentioned link <\/a><\/p>\n\n\n\n<p>Here I will show how we can add a new action like &#8220;View&#8221; or a custom button within dynamic rows. To create a form using ui component you can follow this <a href=\"https:\/\/webkul.com\/blog\/create-ui-form-magento2-part-1\/\">link <\/a><\/p>\n\n\n\n<p>Below is the code of how to add dynamic rows in ui component form.  Add the following code in your custom form.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;dynamicRows name=&quot;dynamic_rows&quot;&gt;\n        &lt;settings&gt;\n            &lt;addButtonLabel translate=&quot;true&quot;&gt;Add Rows&lt;\/addButtonLabel&gt;\n            &lt;additionalClasses&gt;\n                &lt;class name=&quot;admin__field-wide&quot;&gt;true&lt;\/class&gt;\n            &lt;\/additionalClasses&gt;\n            &lt;componentType&gt;dynamicRows&lt;\/componentType&gt;\n        &lt;\/settings&gt;\n        &lt;container name=&quot;record&quot; component=&quot;Magento_Ui\/js\/dynamic-rows\/record&quot;&gt;\n            &lt;argument name=&quot;data&quot; xsi:type=&quot;array&quot;&gt;\n                &lt;item name=&quot;config&quot; xsi:type=&quot;array&quot;&gt;\n                    &lt;item name=&quot;isTemplate&quot; xsi:type=&quot;boolean&quot;&gt;true&lt;\/item&gt;\n                    &lt;item name=&quot;is_collection&quot; xsi:type=&quot;boolean&quot;&gt;true&lt;\/item&gt;\n                    &lt;item name=&quot;componentType&quot; xsi:type=&quot;string&quot;&gt;container&lt;\/item&gt;\n                &lt;\/item&gt;\n            &lt;\/argument&gt;\n            &lt;field name=&quot;my_field_1&quot; formElement=&quot;input&quot;&gt;\n                &lt;argument name=&quot;data&quot; xsi:type=&quot;array&quot;&gt;\n                    &lt;item name=&quot;config&quot; xsi:type=&quot;array&quot;&gt;\n                        &lt;item name=&quot;fit&quot; xsi:type=&quot;boolean&quot;&gt;false&lt;\/item&gt;\n                    &lt;\/item&gt;\n                &lt;\/argument&gt;\n                &lt;settings&gt;\n                    &lt;validation&gt;\n                        &lt;rule name=&quot;required-entry&quot; xsi:type=&quot;boolean&quot;&gt;true&lt;\/rule&gt;\n                        &lt;rule name=&quot;validate-no-html-tags&quot; xsi:type=&quot;boolean&quot;&gt;true&lt;\/rule&gt;\n                    &lt;\/validation&gt;\n                    &lt;dataType&gt;text&lt;\/dataType&gt;\n                    &lt;label&gt;Field 1&lt;\/label&gt;\n                &lt;\/settings&gt;\n            &lt;\/field&gt;\n            &lt;field name=&quot;my_field_2&quot; formElement=&quot;input&quot;&gt;\n                &lt;argument name=&quot;data&quot; xsi:type=&quot;array&quot;&gt;\n                    &lt;item name=&quot;config&quot; xsi:type=&quot;array&quot;&gt;\n                        &lt;item name=&quot;fit&quot; xsi:type=&quot;boolean&quot;&gt;false&lt;\/item&gt;\n                    &lt;\/item&gt;\n                &lt;\/argument&gt;\n                &lt;settings&gt;\n                     &lt;validation&gt;\n                        &lt;rule name=&quot;validate-no-html-tags&quot; xsi:type=&quot;boolean&quot;&gt;true&lt;\/rule&gt;\n                    &lt;\/validation&gt;\n                    &lt;dataType&gt;text&lt;\/dataType&gt;\n                    &lt;label&gt;My Field 2&lt;\/label&gt;\n                &lt;\/settings&gt;\n            &lt;\/field&gt;\n                &lt;actionDelete template=&quot;Magento_Backend\/dynamic-rows\/cells\/action-delete&quot;&gt;\n                    &lt;argument name=&quot;data&quot; xsi:type=&quot;array&quot;&gt;\n                        &lt;item name=&quot;config&quot; xsi:type=&quot;array&quot;&gt;\n                            &lt;item name=&quot;fit&quot; xsi:type=&quot;boolean&quot;&gt;false&lt;\/item&gt;\n                        &lt;\/item&gt;\n                    &lt;\/argument&gt;\n                    &lt;settings&gt;\n                        &lt;additionalClasses&gt;\n                            &lt;class name=&quot;some-class&quot;&gt;true&lt;\/class&gt;\n                        &lt;\/additionalClasses&gt;\n                        &lt;dataType&gt;text&lt;\/dataType&gt;\n                        &lt;label&gt;Actions&lt;\/label&gt;\n                        &lt;componentType&gt;actionDelete&lt;\/componentType&gt;\n                    &lt;\/settings&gt;\n                &lt;\/actionDelete&gt;\n              \n        &lt;\/container&gt;\n    &lt;\/dynamicRows&gt;<\/pre>\n\n\n\n<p>The dynamic row section will appear like this.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"545\" data-id=\"260942\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/07\/dynamic-row-shot-1200x545.png\" alt=\"dynamic-row-shot\" class=\"wp-image-260942\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/07\/dynamic-row-shot-1200x545.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/07\/dynamic-row-shot-300x136.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/07\/dynamic-row-shot-250x113.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/07\/dynamic-row-shot-768x349.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/07\/dynamic-row-shot.png 1203w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n<\/figure>\n\n\n\n<p>Now let us add an action button just before the delete action button, we can do this by simply adding below code in our ui component form. <\/p>\n\n\n\n<p>You need to add this code right after &lt;field> tag gets closed. Add the block path that you want to get initialised in this section and create a phtml file to render the output .<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;htmlContent name=&quot;select_button&quot;&gt;\n                    &lt;argument name=&quot;data&quot; xsi:type=&quot;array&quot;&gt;\n                        &lt;item name=&quot;config&quot; xsi:type=&quot;array&quot;&gt;\n                            &lt;item name=&quot;component&quot; xsi:type=&quot;string&quot;&gt;Magento_Ui\/js\/form\/components\/html&lt;\/item&gt;\n                            &lt;item name=&quot;additionalClasses&quot; xsi:type=&quot;string&quot;&gt;wk-view-variant&lt;\/item&gt;\n                        &lt;\/item&gt;\n                    &lt;\/argument&gt;\n                    &lt;block name=&quot;html_content_block&quot; class=&quot;Webkul\\Test\\Block\\Adminhtml\\CustomButton\\Edit\\Form\\ViewCustom&quot;&gt;\n                        &lt;arguments&gt;\n                            &lt;argument name=&quot;template&quot; xsi:type=&quot;string&quot;&gt;Webkul_Test::test.phtml&lt;\/argument&gt;\n                        &lt;\/arguments&gt;\n                    &lt;\/block&gt;\n            &lt;\/htmlContent&gt;<\/pre>\n\n\n\n<p>Now create a block file within directory path Webkul\\Test\\Block\\Adminhtml\\CustomButton\\Edit\\Form as ViewCustom.php<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;?php\n\/**\n * Webkul Software\n *\n * @category Webkul\n * @package Webkul_Test\n * @author Webkul\n * @copyright Copyright (c) Webkul Software Private Limited (https:\/\/webkul.com)\n * @license https:\/\/store.webkul.com\/license.html\n *\/\nnamespace Webkul\\Test\\Block\\Adminhtml\\CustomButton\\Edit\\Form;\n\nclass ViewCustom extends \\Magento\\Backend\\Block\\Template\n{\n   \n    public function __construct(\n        \\Magento\\Backend\\Block\\Template\\Context $context,\n        \\Magento\\Framework\\View\\Model\\PageLayout\\Config\\BuilderInterface $pageLayoutBuilder,\n        \\Magento\\Framework\\ObjectManagerInterface $objectManager,\n        \\Magento\\Cms\\Api\\PageRepositoryInterface $pageRepositoryInterface,\n        \\Magento\\Framework\\Api\\SearchCriteriaBuilder $searchCriteriaBuilder,\n        array $data = &#091;]\n    ) {\n        $this-&gt;_objectManager = $objectManager;\n        $this-&gt;formKey = $context-&gt;getFormKey();\n        $this-&gt;pageRepositoryInterface = $pageRepositoryInterface;\n        $this-&gt;searchCriteriaBuilder = $searchCriteriaBuilder;\n        parent::__construct($context, $data);\n    }\n}<\/pre>\n\n\n\n<p>Next we need to create a phtml file where we will add our custom button like this.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;?php\n\/**\n * Webkul Software.\n *\n * @category  Webkul\n * @package   Webkul_Test\n * @author    Webkul\n * @copyright Copyright (c) Webkul Software Private Limited (https:\/\/webkul.com)\n * @license   https:\/\/store.webkul.com\/license.html\n *\/\n?&gt;\n&lt;button&gt;&lt;?php echo __(&#039;My Custom Action&#039;);?&gt;&lt;\/button&gt;<\/pre>\n\n\n\n<p>Now flush the cache and reload the form, it will appear like this. As we can see the html content will appear in position as per defined within your xml form. <\/p>\n\n\n\n<p>We can also include icons, fields in our phtml too.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"562\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/07\/add-custom-action-1200x562.png\" alt=\"add-custom-action\" class=\"wp-image-260945\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/07\/add-custom-action-1200x562.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/07\/add-custom-action-300x140.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/07\/add-custom-action-250x117.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/07\/add-custom-action-768x360.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/07\/add-custom-action.png 1209w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Similarly you can also create various custom actions like View and edit by including this in your form. <\/p>\n\n\n\n<p>To add other actions on button click we can also initialize js in the phtml and can customise the content according to our requirements.<\/p>\n\n\n\n<p>Hope this helps! If you have any queries please comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Today, we will learn how to add new fields or custom html content with dynamic rows. When we add dynamic rows in ui component form by default, Magento provides certain actions like delete to delete the added row. To know more on dynamic rows component within Magento 2 you can follow the mentioned link Here <a href=\"https:\/\/webkul.com\/blog\/add-custom-html-content-with-dynamic-rows-in-magento2\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":316,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9121],"tags":[],"class_list":["post-260937","post","type-post","status-publish","format-standard","hentry","category-magento-2"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Add Custom html Content with Dynamic Rows in Magento 2 - Webkul Blog<\/title>\n<meta name=\"description\" content=\"how to add custom content in dynamic rows within ui component form 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\/add-custom-html-content-with-dynamic-rows-in-magento2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Add Custom html Content with Dynamic Rows in Magento 2 - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"how to add custom content in dynamic rows within ui component form in magento2\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/add-custom-html-content-with-dynamic-rows-in-magento2\/\" \/>\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=\"2020-07-25T16:00:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-15T13:01:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2020\/07\/dynamic-row-shot-1200x545.png\" \/>\n<meta name=\"author\" content=\"Kritika Bhatt\" \/>\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=\"Kritika Bhatt\" \/>\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-custom-html-content-with-dynamic-rows-in-magento2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/add-custom-html-content-with-dynamic-rows-in-magento2\/\"},\"author\":{\"name\":\"Kritika Bhatt\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/efad286900f29890c16fa57f79e763a1\"},\"headline\":\"Add Custom html Content with Dynamic Rows in Magento 2\",\"datePublished\":\"2020-07-25T16:00:57+00:00\",\"dateModified\":\"2026-01-15T13:01:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/add-custom-html-content-with-dynamic-rows-in-magento2\/\"},\"wordCount\":315,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/add-custom-html-content-with-dynamic-rows-in-magento2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2020\/07\/dynamic-row-shot-1200x545.png\",\"articleSection\":[\"Magento 2\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/add-custom-html-content-with-dynamic-rows-in-magento2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/add-custom-html-content-with-dynamic-rows-in-magento2\/\",\"url\":\"https:\/\/webkul.com\/blog\/add-custom-html-content-with-dynamic-rows-in-magento2\/\",\"name\":\"Add Custom html Content with Dynamic Rows in Magento 2 - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/add-custom-html-content-with-dynamic-rows-in-magento2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/add-custom-html-content-with-dynamic-rows-in-magento2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2020\/07\/dynamic-row-shot-1200x545.png\",\"datePublished\":\"2020-07-25T16:00:57+00:00\",\"dateModified\":\"2026-01-15T13:01:59+00:00\",\"description\":\"how to add custom content in dynamic rows within ui component form in magento2\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/add-custom-html-content-with-dynamic-rows-in-magento2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/add-custom-html-content-with-dynamic-rows-in-magento2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/add-custom-html-content-with-dynamic-rows-in-magento2\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/07\/dynamic-row-shot.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/07\/dynamic-row-shot.png\",\"width\":1203,\"height\":546,\"caption\":\"dynamic-row-shot\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/add-custom-html-content-with-dynamic-rows-in-magento2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"dynamic rows\"}]},{\"@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\/efad286900f29890c16fa57f79e763a1\",\"name\":\"Kritika Bhatt\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/01938a8d81e38af7d0befb578ac580c2572d436ed747f1198638d56e5193a097?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\/01938a8d81e38af7d0befb578ac580c2572d436ed747f1198638d56e5193a097?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Kritika Bhatt\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/kritikabhatt-magento019\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Add Custom html Content with Dynamic Rows in Magento 2 - Webkul Blog","description":"how to add custom content in dynamic rows within ui component form 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\/add-custom-html-content-with-dynamic-rows-in-magento2\/","og_locale":"en_US","og_type":"article","og_title":"Add Custom html Content with Dynamic Rows in Magento 2 - Webkul Blog","og_description":"how to add custom content in dynamic rows within ui component form in magento2","og_url":"https:\/\/webkul.com\/blog\/add-custom-html-content-with-dynamic-rows-in-magento2\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2020-07-25T16:00:57+00:00","article_modified_time":"2026-01-15T13:01:59+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2020\/07\/dynamic-row-shot-1200x545.png","type":"","width":"","height":""}],"author":"Kritika Bhatt","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Kritika Bhatt","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/add-custom-html-content-with-dynamic-rows-in-magento2\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/add-custom-html-content-with-dynamic-rows-in-magento2\/"},"author":{"name":"Kritika Bhatt","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/efad286900f29890c16fa57f79e763a1"},"headline":"Add Custom html Content with Dynamic Rows in Magento 2","datePublished":"2020-07-25T16:00:57+00:00","dateModified":"2026-01-15T13:01:59+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/add-custom-html-content-with-dynamic-rows-in-magento2\/"},"wordCount":315,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/add-custom-html-content-with-dynamic-rows-in-magento2\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2020\/07\/dynamic-row-shot-1200x545.png","articleSection":["Magento 2"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/add-custom-html-content-with-dynamic-rows-in-magento2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/add-custom-html-content-with-dynamic-rows-in-magento2\/","url":"https:\/\/webkul.com\/blog\/add-custom-html-content-with-dynamic-rows-in-magento2\/","name":"Add Custom html Content with Dynamic Rows in Magento 2 - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/add-custom-html-content-with-dynamic-rows-in-magento2\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/add-custom-html-content-with-dynamic-rows-in-magento2\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2020\/07\/dynamic-row-shot-1200x545.png","datePublished":"2020-07-25T16:00:57+00:00","dateModified":"2026-01-15T13:01:59+00:00","description":"how to add custom content in dynamic rows within ui component form in magento2","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/add-custom-html-content-with-dynamic-rows-in-magento2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/add-custom-html-content-with-dynamic-rows-in-magento2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/add-custom-html-content-with-dynamic-rows-in-magento2\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/07\/dynamic-row-shot.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/07\/dynamic-row-shot.png","width":1203,"height":546,"caption":"dynamic-row-shot"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/add-custom-html-content-with-dynamic-rows-in-magento2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"dynamic rows"}]},{"@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\/efad286900f29890c16fa57f79e763a1","name":"Kritika Bhatt","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/01938a8d81e38af7d0befb578ac580c2572d436ed747f1198638d56e5193a097?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\/01938a8d81e38af7d0befb578ac580c2572d436ed747f1198638d56e5193a097?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Kritika Bhatt"},"url":"https:\/\/webkul.com\/blog\/author\/kritikabhatt-magento019\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/260937","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\/316"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=260937"}],"version-history":[{"count":12,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/260937\/revisions"}],"predecessor-version":[{"id":522007,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/260937\/revisions\/522007"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=260937"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=260937"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=260937"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}