HTML Element

type = "html"

The HTML Element is used to display any HTML you can think of. There is no additional processing done on the given HTML source.


Note that <script> tags are not processed.


Properties

Property
Type
Description
Example Value
id
string
The unique id assigned to the Element. This is defined by the user and used to refer to the Element in layouts.
"myElementId"
config.
html
string
The actual HTML source.
  <h1>Hello World!</h1>
config.
values
array
Used to specify data from a Datasource which should be displayed in the HTML Element.
  "values": [
          {
            "origin": "data" | "variables" 
            "name": "env",
            "column": "Categories"
            "row": 0
          }
        ],


Example

  "elements": [
    {
      "id": "myElementId",
      "type": "html",
      "config": {
        "html": "<h1>Hello World!</h1>"
      }
    }
    // .. more elements
  ]



Example with custom data in html

  // .. layouts above
  "datasources": [
    {
      "id": "raw_testSource",
      "origin": "raw",
      "config": {
        "schema": "table",
        "data": [
          {
            // The link has to be inserted below in one line for the example to work 
            // link = "https://www.onelogic.de/wp-content/themes/onelogic/assets
            //         /images/logo-onelogic.svg"
            "Categories": link
          }
        ]
      }
    }
  ],
  "elements": [
    {
      "id": "html-test",
      "type": "html",
      "source": "raw_testSource",
      "config": {
        "values": [
          {
            "origin": "data",
            "column": "Categories",
            "row": 0,
            "name": "Val1"
          }
        ],
        // The raw string has to be inserted below in for the example to work
        // htmlString =
        //"<div style='width: 100%; height: 100%; background-image:url({{Val1}})'>
        //  {{raw_Source[0]}}
        //</div>"
        "html": htmlString
      }
    }
  ]