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.


tableViewWhen true and the component is part of an EditGrid, the component's value is shown (simplified) in the collapsed row of the EditGrid.BooleanFalse
sanitizeOptionsCustom 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.

ALLOWED_TAGSAllow only the specified tags.List of strings
ALLOWED_ATTRAllow only the specified attributes.List of strings
USE_PROFILESSelect 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_TAGSForbid the use of the specified tags.List of strings
FORBID_ATTRForbid the use of the specified attributes.List of strings
ADD_TAGSExtend the existing array of allowed tags, e.g. on top of a profile.List of strings
ADD_ATTRExtend the existing array of allowed attributes, e.g. on top of a profile.List of strings
ALLOW_ARIA_ATTRAllow the use of aria attributes (default is true)Boolean
ALLOW_DATA_ATTRAllow 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.