This article is outdated, you can access the most current version here: https://doc.onedata.de/apps/apps-docs/odml-documentation/AppBuilder/elements/HtmlElement.html#type-html
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
// /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
}
}
]