HTMLDocument | X4Documentation

<HtmlDocument> controls are used to display static HTML (mark-up text) e.g., emails. All common HTML5 elements that can be displayed by the browser are supported.

The display of HTML is implemented as an iFrame in sandbox mode. Therefore, JavaScript is not executed by default. If an embedded resource (for example, video, image, or audio), contains JavaScript, that resource is not displayed.

The elements <video> and <audio> are not supported by Safari.

The elements <video>, <picture> and <source> are not displayed on an iPad.

The display can be formatted with a <style> tag in the <head> element of the HTML document. Local CSS files are not supported.

The following attributes can be defined for the <HtmlDocument> element:

Attribute	Description
`process`	Required. Technical Process that provides the HTML document. Possible values: String (URI) The called Technical Process must return a complete HTML document!
`allowSameOrigin`	Allows embedded content to share memory if the origin of the embedded content is the same as the origin of the hosted web application. Possible values: `true` (default) `false` The default setting of `true` for the `allowSameOrigin` attribute cannot be changed. Therefore, this attribute cannot be selected when creating a `HTMLDocument` control.
`allowScript`	Allows the content to use JavaScript. Possible values: `true` (default) `false`
`allowForms`	Allows embedded content to submit forms. Possible values: `true` (default) `false`
`allowPointerLock`	Allows embedded content to interpret mouse movements directly as an input method. Possible values: `true` (default) `false`
`allowPopups`	Allows embedded content to open a web page in a new window or tab. Possible values: `true` (default) `false`
`allowTopNavigation`	Allows embedded content to open a web page in the same window or tab. Possible values: `true` (default) `false`
`allowModals`	Allows embedded content to display modal dialogs. Possible values: `true` (default) `false`
`disabled`	Defines whether the user can interact with the control. Data binding (Boolean) possible Possible values: `true`/`false` or data binding expression
`enabled`	Defines whether the user can interact with the control. Data binding (Boolean) possible Possible values: `true`/`false` or data binding expression
`horizontalAlign`	Direction in which the elements flow. The order of the elements corresponds to their declaration. Possible values: `left` (default) `center` `right`
`textOverflow`	Specifies what should happen when the control is full. Possible values: `ellipsis` : With `...` show that the text is not finished `hidden` : Break text, care for whole words `wordBreak` : Break within the word `allow`: Break text between words (default)
`visible`	Defines whether the control is visible. Data binding (Boolean) possible Possible values: `true`/`false` or data binding expression

Example for `<HtmlDocument>`

In the web app definition (.wad), the <HtmlDocument> control is associated with the Technical Process Sample.wrf.

XML

<WebApp xmlns="http://softproject.de/webapp/1.0"
        path="HtmlDocument">
   <Modules>
      <Module displayName="My Module" path="Module">
         <Components>
            <DetailComponent default="true"
                             displayName="Dashboard"
                             path="Dashboard"
                             process="load.wrf">
               <Properties>
                  <Property name="string" type="String"/>
               </Properties>
               <FlowLayout>
                  <HTMLDocument process="Sample.wrf" units="pixels"/>
               </FlowLayout>
            </DetailComponent>
         </Components>
      </Module>
   </Modules>
</WebApp>

The Technical Process Sample.wrf provides an HTML document:

The HTML document supplied by the Technical Process looks like this:

XML

<html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
		<head>
			<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
			<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
			<style>
				body{
					font-family: Arial, sans-serif;
					padding: 10px;
				}
				
				table, td, th{
					border: 1px solid grey;
					padding: 5px;
					border-collapse: collapse;
				}
				
				th{
					background-color: grey;
					color: white;
				}
			</style>
		</head> 
		<body>
			<h1>This is a sample for displaying HTML content in Web Apps</h1>
			<p>Most default elements of HTML5 are supported, like <i>lists</i> (ordered and unordered), <i>horizontal lines</i> and <i>tables</i>.</p>
			<hr/>
			<h1>Samples</h1>
			<h2>Example for an ordered list</h2>
			<p>This is an example for an ordered list with a few items:</p>
			<ol>
				<li>
					Item 1
				</li>
				<li>
					Item 2
				</li>
			</ol>
			<h2>Example for an unordered list</h2>
			<p>This is an example of an unordered list with a few items:</p>
			<ul>
				<li>
					Item 1
				</li>
				<li>
					Item 2
				</li>
			</ul>
			<h2>Tables</h2>
			<p>This is an example for a table with some columns:</p>
			<table>
				<thead>
					<th>Header 1</th>
					<th>Header 2</th>
					<th>Header 3</th>
					<th>Header 4</th>
				</thead>
				<tr>
					<td>A</td>
					<td>B</td>
					<td>C</td>
					<td>D</td>
				</tr>
			</table>
		</body>
	</html>

The HTML document is displayed in the Web App as follows:

Example for <HtmlDocument>

Example for `<HtmlDocument>`