HTML Element

Modified on Mon, 11 Apr 2022 at 03:48 PM

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

Let us know how can we improve this article!

Select atleast one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article