WebContent

Purpose

The WebContent ViewTemplate embeds external web content or generated HTML into a View by rendering it inside an IFrame. The content is supplied through an EntityField whose value is typically generated by a valueProcess.

Behavior

The rendering depends on the contentType of the referenced EntityField:

`contentType`	Behavior
`LINK`	Loads the provided URL in the IFrame.
`HTML`	Renders the provided HTML content in the IFrame.

The component is always read-only and enabled. Visibility can still be controlled through the state logic of the underlying Entity.

Configuration

The following ViewTemplate properties control the rendering:

Property	Description
`entityField`	Provides the content to be rendered.
`height`	Defines the height of the IFrame.
`width`	Defines the width of the IFrame.
`unit`	Defines whether the size values use `px` or `%`.

Example usage

One example is the ViewTemplate Timeline of FacebookTimeline_view in Context Social. It uses the EntityField FACEBOOK_TIMELINE, whose valueProcess returns the content to be rendered.

This ViewTemplate is exposed in the client through the Dashlet ADITO Facebook Feed in the Dashlet group Social Media.

Implementation hints

The following state handling applies:

State	Effect
`READONLY`	No effect, because the component is always read-only.
`EDITABLE`	No effect, because editing is not supported.
`DISABLED`	Ignored, because the component is always enabled.
`AUTO`	Default visible state.
`INVISIBLE`	Hides the IFrame.

Common misconfigurations include nested IFrames in HTML mode and normal links that open inside the same IFrame instead of in a new tab. For links embedded in HTML content, use target="_blank" and rel="noopener noreferrer" if the linked page should open externally.

Example implementation

The following example shows a valueProcess that returns HTML content:

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>
`);

Notes

WebContent should be configured carefully because display issues are often caused by the content provided by the underlying EntityField, not by the ViewTemplate itself.

Purpose​

Behavior​

Configuration​

Example usage​

Implementation hints​

Example implementation​

Notes​