Mit Web App Control Projects arbeiten

Mit dem Projekttyp Web App Control Project können Sie X4 Web Apps um eigene JavaScript-Funktionen erweitern, sodass der Zugriff auf die Daten und Aktionen der Web App über JavaScript-API-Funktionen erfolgen kann. Mit <CustomControls>, also benutzerdefinierten Controls, können Sie eigenen JavaScript-Code in eine Web App einbinden und Aktionen aufrufen, um mit der Anwendung zu interagieren. Außerdem können Sie das Layout durch das Setzen von Eigenschaftsparametern beeinflussen. Um ein benutzerdefiniertes Control in einer Web App zu verwenden, müssen Sie lediglich das Web App Control Project in einem Web App Project referenzieren. In einem Web App Control Project werden die Inhalte hinterlegt, die in der Web App angezeigt werden.

Web App Control Project anlegen

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.
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.

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 das aktuelle JavaScript API.
Eine Auflistung der verfügbaren API-Funktionen mit ihrer Beschreibung finden Sie unter Verfügbare API-Funktionen.

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 Projektes 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.

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:` Mit `...` zeigen, dass der Text nicht zu Ende ist `hidden`: Text abbrechen, auf ganze Wörter achten `wordBreak`: innerhalb des Wortes abbrechen `allow` (Standard): Text zwischen den Wörtern umbrechen
`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, Modal Windows zu öffnen. Mögliche Werte: `true` (Standard): Modal Windows können geöffnet werden. `false`: Modal Windows 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)

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.