The Html component
This component can display an HTML element in the form, for example a header, a table or an image.
Contrary to the HtmlElement component, the Html component has a value and therefore it is part of the submission data. The HTML to display can be set by assigning the defaultValue property during initialization and by using the setSubmissionData function after initialization (while processing events).
This component inherits properties and methods from the superclass Component. For example, any Html component has a hidden and defaultValue property even though these are not explicitly listed here.
Properties
| Name | Description | Datatype | Default |
|---|---|---|---|
| tableView | When true and the component is part of an EditGrid, the component's value is shown (simplified) in the collapsed row of the EditGrid. | Boolean | False |
| sanitizeOptions | Custom configuration for the HTML sanitizer. | Dict/struct | {"USE_PROFILES": {"html": true}} |
Sanitize options
The HTML code rendered in this component is sanitized to remove possible malicious code from being rendered/executed in the browser. This is expecially important when user input may be rendered. However, in some cases it may be necessary to configure the sanitation settings when rendering HTML from a trusted source (e.g. generated in the back-end) and be able to use tags and attributes that would normally be deemed unsafe.
To change the sanitize options, set sanitizeOptions to a nested dict/struct using any of the following fields.
| Name | Description | Datatype |
|---|---|---|
| ALLOWED_TAGS | Allow only the specified tags. | List of strings |
| ALLOWED_ATTR | Allow only the specified attributes. | List of strings |
| USE_PROFILES | Select profiles by setting their value to true or false. Available profiles are: html, svg, svgFilters and mathMl. Note that the USE_PROFILES setting will override the ALLOWED_TAGS setting, so don't use them together. | Dict/struct with boolean values. |
| FORBID_TAGS | Forbid the use of the specified tags. | List of strings |
| FORBID_ATTR | Forbid the use of the specified attributes. | List of strings |
| ADD_TAGS | Extend the existing array of allowed tags, e.g. on top of a profile. | List of strings |
| ADD_ATTR | Extend the existing array of allowed attributes, e.g. on top of a profile. | List of strings |
| ALLOW_ARIA_ATTR | Allow the use of aria attributes (default is true) | Boolean |
| ALLOW_DATA_ATTR | Allow HTML5 data attributes (default is true) | Boolean |
For example, to allow rendering SVG, enable the svg profile:
html.sanitizeOptions = {"USE_PROFILES": {"svg": True}}
html.sanitizeOptions = struct("USE_PROFILES", struct("svg", true));
For more information, see Can I configure DOMPurify?.
See also
- The HtmlElement and Content components allow for setting the HTML content through a property instead of the submission data. However, these are more difficult to use than the Html component.
- The HtmlTable component subclasses this component.