Mit Web App Control Projects arbeiten

So legen Sie ein neues Web App Control Project an

Klicken Sie im X4 Designer in der Sicht Projects mit der rechten Maustaste, und wählen Sie im Kontextmenü den Eintrag New aus.
Wählen Sie Web App Control Project.

Alternativ können Sie im Menü File auf New klicken und Web App Control Project... auswählen.

Geben Sie im Dialogfenster Project Creation Wizard einen Namen für Ihr Projekt ein.
Wählen Sie Finish aus.

Web App Control Projects haben eine vordefinierte und nicht veränderbare Ordnerstruktur, die beim Anlegen eines neuen Web App Control Projects automatisch angelegt wird.

Sources

Dieser Ordner enthält nach dem Anlegen eines Projekts drei Dateien:

index.html: Diese Datei enthält eine grundlegende HTML-Struktur, die Sie um die gewünschten Elemente erweitern können.
x4-webapp-api.d.ts: Diese Datei enthält die aktuellen API-Deklarationen (diese werden von TypeScript-Entwicklern benötigt).
x4-webapp-api.js: Diese Datei enthält die aktuelle JavaScript API.
Eine Auflistung der verfügbaren API-Funktionen mit ihrer Beschreibung finden Sie unter Verfügbare API-Funktionen.

Hinweis:

Der automatisch angelegte Ordner Sources kann nicht gelöscht, verschoben oder umbenannt werden.

Im Ordner Sources können Sie z. B. auch eine .css-Datei anlegen.

<Projekt>.webcontrol

Projektbezogene Datei, die automatisch beim Anlegen des Projekts angelegt und nach dem Projekt benannt wird.

Über diese Datei können Sie bei Bedarf eine Definition zur Cookie-Einwilligung hinzufügen. Sie können beliebigen Text in die Felder eingeben oder Angaben zu einem Drittanbieter-Service machen.

Jedes Web App Control Project enthält genau eine .webcontrol-Datei. Wenn Sie in einem Web App Project mehr als ein Web App Control Project referenzieren möchten, legen Sie im Web App Project im Ordner Components eine neue .detail-Component für jedes weitere Web App Control Project an.

Hinweis:

Sie können alle Dateien aus einem Web App Control Project über die Entwicklertools im Browser ohne Authentifizierung anzeigen.

Benutzerdefiniertes Control in eine Web App einbinden

Voraussetzung

Sie verfügen über ein Web App Project, das mindestens einen Technical Process enthält. Informationen zum Anlegen von Web App Projects finden Sie unter Neues Web App-Projekt anlegen.

In den folgenden Abschnitten wird erläutert, wie Sie ein Web App Control Project mit einem Web App Project verbinden, um ein oder mehrere benutzerdefinierte Controls in der Web App zu verwenden.

So binden Sie ein benutzerdefiniertes Control ein

Öffnen Sie das Web App Project, und doppelklicken Sie auf die Datei <Projekt>.wac. Wählen Sie im Abschnitt HTTP Security Header in der Dropdown-Liste X-Frame-Options den Wert SAMEORIGIN aus.
Fügen Sie in der Datei Dashboard.detail im Ordner Components die gewünschten Properties ein.
An dieser Stelle fügen Sie die gewünschten Custom Controls über das Element <CustomControl> ein und referenzieren das zuvor angelegte Web App Control Project über das obligatorische Attribut project.

Sie können im Ordner Components weitere Detail Components anlegen, in denen Sie z. B. Layouteigenschaften festlegen.

Passen Sie im Web App Control Project die Datei index.html im Ordner Sources an, und fügen Sie die gewünschten Elemente hinzu.
Öffnen Sie die Web App im Browser. Informationen zu den unterstützten Browsern finden Sie hier.

Außerdem können Sie folgende Attribute für das Element <CustomControl> definieren:

Attribut	Beschreibung
`horizontalAlign`	Richtung, in die die Elemente fließen. Die Reihenfolge der Elemente entspricht ihrer Deklaration. Mögliche Werte: `left`(Standard) `center` `right`
`textOverflow`	Gibt an, was passieren soll, wenn das Control voll ist. Mögliche Werte: `ellipsis` (Standard): Zeigt mit `...`, dass der Text nicht zu Ende ist. `hidden`: Bricht den Text ab, ganze Wörter werden beachtet. `wordBreak`: Bricht den Text innerhalb des Wortes ab. `allow`: Bricht den Text zwischen den Wörtern um.
`visible`	Legt fest, ob das Control sichtbar ist. Data Binding (Boolean) möglich Mögliche Werte: `true`/`false` oder Zeichenkette für Data Binding
Attribute mit Beschreibung für iFrame-Einstellungen im Sandbox-Modus
`allowForms`	Erlaubt der Seite, Formulare zu übermitteln. Mögliche Werte: `true` (Standard): Formulare können übermittelt werden. `false`: Formulare können nicht übermittelt werden.
`allowModals`	Erlaubt der Seite, modale Dialoge zu öffnen. Mögliche Werte: `true` (Standard): Modale Dialoge können geöffnet werden. `false`: Modale Ddialoge können nicht geöffnet werden.
`allowPointerLock`	Erlaubt der Seite die Verwendung der Pointer Lock API, einer API, die Eingabemethoden auf der Grundlage der Mausbewegung über die Zeit bereitstellt. Mögliche Werte: `true`: Die Pointer Lock API wird verwendet. `false` (Standard): Die Pointer Lock API wird nicht verwendet.
`allowPopups`	Erlaubt der Seite, Popups zu öffnen. Mögliche Werte: `true`: Popups können geöffnet werden. `false` (Standard): Popups können nicht geöffnet werden.
`allowTopNavigation`	Erlaubt die Navigation im top-level Browsing-Kontext (bezeichnet mit `_top`). Mögliche Werte: `true`: Navigation im top-level Browsing-Kontext ist möglich. `false` (Standard): Navigation im top-level Browsing-Kontext ist nicht möglich.

Innerhalb des Elements <CustomControl> legen Sie über das Element <APIAction> die API-Funktionen fest, die in die Web App übernommen werden sollen. Über das obligatorische Attribut name geben Sie den Namen der aufzurufenden Aktion an.

Außerdem können Sie folgende Attribute für das Element <APIAction> definieren:

Attribut	Beschreibung
`componentName`	Name der Component, zu der am Ende der Action navigiert werden soll. Mögliche Werte: Beliebige Zeichenkette
`externalLink`	Eingabe einer URL. Mögliche Werte: Beliebige URL
`externalLinkTarget`	Gibt einen externen Link an. Mögliche Werte: `new` (Standard): Die Seite wird auf einer neuen Registerkarte geöffnet. `same`: Die Seite wird auf derselben Registerkarte geöffnet.
`process`	Pfad zur `.wrf`-Datei. Der Technical Process muss im Ordner `Services/Processes` enthalten sein. Pfadangabe relativ zum Ordner `Services/Processes`. Mögliche Werte: Zeichenkette (URI)