TrophyCustomer's Canvas is honored with a 2020 InterTech Technology Award! Learn more 

Interface: IHtmlConfig

Provides properties for the html widget.

You can use these properties in params of the AuWidgetHtml class.

{
  "widgets": [
    {
      "name": "data-based",
      "type": "html",
      "title": "HTML with data",
      "params": {
        "data": [
          {
            "title": "Color",
            "value": "Space Gray"
          },
          {
            "title": "Shape",
            "value": "Rounded Rect"
          }
        ],
        "template": {
          "<>": "div",
          "html": [
            {
              "<>": "span",
              "text": "${title}: ",
              "style": "font-weight: bold"
            },
            {
              "<>": "span",
              "text": "${value}"
            }
          ]
        }
      }
    }
  ]
}

This will result in:

<div>
    <span style="font-weight: bold">Color: </span>
    <span>Space Gray</span>
</div>
<div>
    <span style="font-weight: bold">Shape: </span>
    <span>Rounded Rect</span>
</div>

Hierarchy

  • IHtmlConfig

Index

Properties

Properties

Optional data

data? : Array‹any› | any

The content to display.


template

template: Array‹ITemplateConfig› | ITemplateConfig

A markup template to format the content.