Skip to content

Html

The Html widget renders arbitrary HTML content within the form.

XML Fields

  • Content contains the HTML fragment. Put markup in a CDATA section so XML parsing does not treat the fragment itself as form-definition markup. Data-template expressions in this content are evaluated in the current form context.
  • HtmlClass supplies an optional presentation identifier for this Html instance.
  • AllowCopy adds the command for copying the rendered content when set to true; it does not change the source data.
  • ResetStyle controls whether the widget applies its reset-style presentation mode (true, the default). Set it to false to leave that mode disabled.

Html is display content: it has no XPath and does not write a value to the form data.

Clipboard Support

Copying content from the widget is disabled by default. Enable copying by setting the AllowCopy property to true. This adds a button to copy the rendered HTML content.

Style Reset

The ResetStyle property controls whether Emakin's default CSS styles are applied to the rendered HTML. The default ( ResetStyle = true) resets styles to browser defaults. Set ResetStyle to false to preserve existing styles.

Script Support

Embedded scripts within the HTML content can access form data using the $Xml client-side scripting object.

Security Considerations

Unlike the HtmlBox widget, the Html widget renders HTML content without sanitization. This allows for embedding scripts and styles but introduces security risks. Use caution and ensure that the HTML content is trusted.

Data Templating and Sanitization

The Html widget supports data templates. Template expressions are automatically sanitized to prevent Cross-Site Scripting (XSS) attacks.

To render data without sanitization (use with extreme caution!), use the format(Field, 'string') function within the data template.

Examples

Example: Basic HTML Rendering

1
2
3
4
5
<Html HtmlClass="" AllowCopy="false" ResetStyle="true">
    <Content><![CDATA[
    <div id="myId">Hello there!</div>
    ]]></Content>
</Html>

This renders a simple div element.

Example: Scripting and Data Access

1
2
3
4
5
6
7
8
<Html HtmlClass="" AllowCopy="false" ResetStyle="true">
    <Content><![CDATA[
<div id="myDiv"></div>
<script>
document.getElementById("myDiv").innerHTML = $Xml.Get("Field");
</script>
]]></Content>
</Html>

This example uses a script to populate a div's content with the value of the Field data model element.

Example: Disabling Sanitization (Use with extreme caution!)

1
2
3
<Html HtmlClass="" AllowCopy="false" ResetStyle="true">
    <Content><![CDATA[{{format(Field,'string')}}]]></Content>
</Html>

This example renders the content of the Field data model element without any sanitization. This is highly discouraged unless you are absolutely certain the content is safe and trustworthy.