Working with Web App Control Projects

How to create a new Web App Control Project

In the X4 Designer, right-click in the Projects view and select the entry New from the context menu.
Select Web App Control Project.

Alternatively, in the File menu, click New and select Web App Control Project.

In the File Creation Wizard dialog, enter a name for the entity.
Select Finish.

Web App Control Projects have a predefined and unalterable folder structure that is created automatically when a new Web App Control Project is created.

Sources

After creating a project, this folder contains three files:

index.html: This file contains a basic HTML structure that you can expand to include the desired elements.
x4 webapp api.d.ts: This file contains the current API declarations (these are required by TypeScript developers).
x4 webapp api.js: This file contains the current JavaScript API.
For a list of available API functions and their description, see Available API Functions.

Note:

The automatically created Sources folder cannot be deleted, moved, or renamed.

For example, you can also create a .css file in the Sources folder.

<Project>.webcontrol

Project-related file that is automatically created when the project is created and named after the project.

This file allows you to add a definition of cookie consent if necessary. You can enter any text in the fields or provide information about a third-party service.

Each Web App Control Project contains exactly one .webcontrol file. If you want to reference more than one Web App Control Project in a Web App Project, create a new .detail component for each additional Web App Control Project in the Components folder of the Web App Project.

Note:

You can view all files from a Web App Control Project using the developer tools in the browser without authentication.

Integrating a custom control into a Web App

Prerequisite

You have a Web App Project with at least one Technical Process. For information on creating Web App Projects, see Creating a New Web App Project .

The following sections explain how to connect a Web App Control Project to a Web App Project to use one or more custom controls in the Web App.

How to include a custom control

Open the Web App Project and double-click the <Project>.wac file. In the HTTP Security Header section, select SAMEORIGIN from the X-Frame Options drop-down list.
In the Components folder of the Dashboard.detail file, insert the desired properties.
At this point, insert the desired custom controls via the <CustomControl> element and reference the previously created Web App Control Project via the mandatory attribute project.

You can create additional Detail Components in the Components folder, in which you specify layout properties, for example.

In the Web App Control Project, customize the index.html file in the Sources folder and add the desired items.
Open the Web App in the browser. For information on supported browsers, click here.

In addition, you can define the following attributes for the <CustomControl> element:

Attribute	Description
`horizontalAlign`	The 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` (default): Use `...` to show that the text is not finished `hidden` : Cancels the text, whole words are observed. `wordBreak`: Cancels the text within the word. `allow`: Wraps the text between the words.
`visible`	Defines if the control is visible. Data binding (Boolean) is possible Possible values: `true`/`false` or string for data binding
Attributes that describe iFrame settings in sandbox mode
`allowForms`	Allows the page to submit forms. Possible values: `true` (default): Forms can be submitted. `false`: Forms cannot be submitted.
`allowModals`	Allows the page to open modal dialogs. Possible values: `true` (default): Modal dialogs can be opened. `false`: Modal dialogs cannot be opened.
`allowPointerLock`	Allows the page to use the Pointer Lock API, an API that provides input methods based on mouse movement over time. Possible values: `true`: The Pointer Lock API is used. `false` (default) The Pointer Lock API is not used.
`allowPopups`	Allows the page to open pop-ups. Possible values: `true`: Pop-ups can be opened. `false` (default) Pop-ups cannot be opened.
`allowTopNavigation`	Allows navigation in the top-level browsing context (referred to as `_top`). Possible values: `true`: Navigation in the top-level browsing context is possible. `false` (default) Navigation in the top-level browsing context is not possible.

Within the <CustomControl> element, you use the <APIAction> element to define the API functions that are to be transferred to the Web App. The mandatory name attribute specifies the name of the action to be called.

You can also define the following attributes for the <APIAction> element:

Attribute	Description
`componentName`	Name of the component to navigate to at the end of the action. Possible values: Any string
`externalLink`	Entering a URL Possible values: Any webservice URL
`externalLinkTarget`	Specifies an external link. Possible values: `new` (default): The page opens in a new tab. `same`: The page opens on the same tab.
`process`	Path to the `.wrf` file. The Technical Process must be in the `Services/Processes` folder. The path is specified relative to the `Services/Processes` folder. Possible values: String (URI)