HtmlContent component
Overview
The HtmlContent UI component provides the ability to process and render a layout structure or a Magento block directly inside a UI component configuration. Processing and rendering is executed on the server side.
The layout structure inside HtmlContent must contain only one top-level block. The top-level block may contain as many child blocks or containers as required. All blocks inside HtmlContent are integrated into the layout, so external blocks can refer to them and vice verse.
Structure
The HtmlContent UI component comprises the following files:
- JS component: app/code/Magento/Ui/view/base/web/js/form/components/html.js
- template: app/code/Magento/Ui/view/base/web/templates/content/content.html
Configuration options
Extends all uiComponent configuration.
HtmlContent-specific options:
| Option | Description | Type | Default |
|---|---|---|---|
additionalClasses |
Sets custom classes to the component's DOM block. | Object | {} |
component |
The path to the component’s JS constructor in terms of RequireJS. | String | Magento_Ui/js/form/components/html |
content |
HTML content to be displayed. | String | '' |
template |
The path to the component’s .html template. |
String | ui/content/content |
visible |
Initial component's visibility. When set to "false", the display: none CSS style is added to the component's DOM block. |
Boolean | true |
Example of the HtmlContent component configuration
How to render layout in scope of UI configuration
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<htmlContent name="customer_edit_tab_view">
<block class="Magento\Customer\Block\Adminhtml\Edit\Tab\View" name="customer_edit_tab_view" template="Magento_Customer::tab/view.phtml">
<arguments>
<argument name="sort_order" xsi:type="number">10</argument>
<argument name="tab_label" xsi:type="string" translate="true">Customer View</argument>
</arguments>
<block class="Magento\Customer\Block\Adminhtml\Edit\Tab\View\PersonalInfo" name="personal_info" template="Magento_Customer::tab/view/personal_info.phtml"/>
</block>
</htmlContent>
</form>How to render simple magento block in scope of UI configuration
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<htmlContent name="giftregistry">
<block class="Magento\GiftRegistry\Block\Adminhtml\Customer\Edit\Tab\Giftregistry" name="giftregistry"/>
</htmlContent>
</form>