WebContent

The WebContent ViewTemplate enables the integration of external web content or HTML markup into a View using an IFrame. The source of the embedded content is dynamically provided by an EntityField, whose value is determined via a valueProcess. This allows for flexible rendering of URLs or custom HTML inside the ADITO client.

Functional Overview

The ViewTemplate renders an IFrame with content loaded from the associated EntityField. The following configuration parameters control its behavior:

Property	Description
`entityField`	The EntityField providing the content to be rendered
`height`	Optional. Defines the height of the IFrame
`width`	Optional. Defines the width of the IFrame
`unit`	Defines whether `height` and `width` are interpreted as `px` or `%`

The component is always read-only and enabled. Visibility is controlled through the state configuration (see below).

Example

A practical implementation is the ViewTemplate "Timeline" of the View "FacebookTimeline_view" within the Context "Social". The ViewTemplate references the EntityField FACEBOOK_TIMELINE, which generates the required HTML content using a valueProcess.

This ViewTemplate is surfaced to the client via a Dashlet:
Dashlet name: ADITO Facebook Feed
Dashlet group: Social Media

Once added to the user's Dashboard, the rendered content appears as embedded web output.

Advanced Behavior and Configuration

Content Source: valueProcess

The embedded content is defined by the valueProcess of the EntityField specified in the ViewTemplate’s entityField property.

Example: Embedding a Twitter feed

import { vars } from "@aditosoftware/jdito-types";
import { result } from "@aditosoftware/jdito-types";

var account = vars.get("$param.Account_param");
result.string(`
  <html onmouseover=this.className='scroll' onmouseout=this.className='noscroll' class='noscroll'>
    <head>
      <style>
        .scroll { overflow: auto; }
        .noscroll { overflow: hidden; }
      </style>
    </head>
    <body>
      <a class="twitter-timeline" href="https://twitter.com/${account}?ref_src=twsrc%5Etfw">
        Tweets by ${account}
      </a>
      <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    </body>
  </html>
`);

This example dynamically embeds a Twitter timeline based on a user-defined account name.

Content Mode: LINK vs. HTML

The rendering behavior is influenced by the contentType property of the EntityField:

contentType	Behavior
`LINK`	The IFrame loads the provided URL as an external site
`HTML`	The IFrame renders the raw HTML provided

Sizing and Unit Configuration

Height and Width:
Values defined in the height and width properties directly control the IFrame's dimensions.
Unit:
Use the unit property to define the measurement unit. Available values:
- px (pixels) – default if not set
- % (percentage)

State Handling

The component supports a limited set of states, determined via the Entity's state or stateProcess:

State	Effect
`READONLY`	No effect – the component is always read-only
`EDITABLE`	No effect – editing is not supported
`DISABLED`	Ignored – the component is always enabled
`AUTO`	Default state – IFrame is visible
`INVISIBLE`	The IFrame is hidden

Common Pitfalls and Misconfigurations

The following examples illustrate frequent mistakes when configuring WebContent.

Incorrect Use of IFrame in HTML Content

If the contentType is mistakenly set to TEXT or HTML, and the valueProcess includes another IFrame tag, this results in nested IFrames:

<!-- BAD EXAMPLE -->
<html>
  <body>
    <iframe src="https://www.adito.de/"/>
  </body>
</html>

Since the WebContent ViewTemplate itself is rendered inside an IFrame, nesting another IFrame leads to poor display and wasted space.

Instead, you should set:

contentType = LINK
valueProcess = result.string("https://www.adito.de/");

Inline Links That Open in the Same IFrame

When embedding HTML with anchor links:

<!-- BAD EXAMPLE -->
<a href="https://www.adito.de/">ADITO Homepage</a>

Clicking the link will load the new page within the IFrame, replacing the intended content.

Use the following instead to open the link in a new browser tab:

<!-- GOOD EXAMPLE -->
<a href="https://www.adito.de/" target="_blank" rel="noopener noreferrer">ADITO Homepage</a>

WebContent​

Functional Overview​

Example​

Advanced Behavior and Configuration​

Content Source: valueProcess​

Content Mode: LINK vs. HTML​

Sizing and Unit Configuration​

State Handling​

Common Pitfalls and Misconfigurations​

Incorrect Use of IFrame in HTML Content​

Inline Links That Open in the Same IFrame​