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
}
}
]
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article