HTMLDocument

<HTMLDocument> controls are used to display static HTML (markup text), such as emails. All common HTML5 elements that can be viewed 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 (such as video, graphics, or audio) contains JavaScript, that resource is not displayed.

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

The <video> , <picture> , and <source> elements do not appear 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.

You can define the following attributes for the <HTMLDocument> element:

Attribute	Description
`process`	Required. Technical Process that delivers the HTML document. Possible values: String (URI) The called Technical Process must return a complete HTML document!
`allowSameOrigin`	Allows embedded content to share space when the source of embedded content is the same as the source of the host web application. Possible values: `true` (default) `false` The default setting of `true` for the `allowSameOrigin` attribute cannot be changed. Therefore, this attribute is not offered for selection when creating an `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 a modal dialog. Possible values: `true` (default) `false`
`disabled`	Specifies whether the user can interact with the control. Data binding (Boolean) is possible Possible values: true/`false` or expression for data binding
`enabled`	Specifies whether the user can interact with the control. Data binding (Boolean) is possible Possible values: true/`false` or expression for data binding
`horizontalAlign`	The direction in which the elements flow. The order of the elements corresponds to their declaration. Possible values: `left` (default) `center` `right`
`restrictedMode`	Specifies whether sandbox mode is enabled or disabled. Note: To use the `restrictedMode` attribute, you must use an X4 Server and X4 Designer version 7.4.15 or later. Possible values: `true` (default): Sandbox mode is enabled. `false`: Sandbox mode is disabled.
`textOverflow`	Specifies what should happen when the control is full. Possible values: `ellipsis` : Use `...` to show that the text is not finished (default) `hidden` : Break off text, watch for whole words `wordBreak` : Break off text within word `allow`: break off text between words
`visible`	Defines if the control is visible. Data binding (Boolean) is possible Possible values: `true`/`false` or expression for data binding

Example of `<HTMLDocument>`

In the Web App definition (.wad), the <HTMLDocument> control is linked to 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 provided 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 for 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 of <HTMLDocument>

Example of `<HTMLDocument>`