6.4.1 Einleitung

Um einen einfachen Einstieg in die Programmierung eines modalen Dialogs für die enaio® Clients zu bekommen, stellen wir Ihnen auf Github eine Demo für einen modalen Dialog mit purem Javaskript, HTML und CSS zur Verfügung. Laden Sie sich die aktuellste Version der Demo herunter, rollen diese auf einen erreichbaren Host aus und integrieren Sie sie in die enaio® Clients. Damit steht es Ihnen zu Lernzwecken und einem ersten Informationsgewinn zur Verfügung - u. a. mittels Debugging und über die Entwicklertools im Browser.

Haftungsausschluss

Die Demo für einen modalen Dialog dient ausschließlich dem Zweck, die Technik zu illustrieren. Der Javascript-Code sollte nicht in produktive modale Dialoge übertragen werden. Die OPTIMAL SYSTEMS GmbH übernimmt keine Haftung für Schäden oder Sicherheitslücken, die durch die Demo des modalen Dialogs und den dazugehörigen Code verursacht werden.

1 6.4.1 Einleitung
2 6.4.2 Zweck des Projekts
3 6.4.3 Einfache Einbindung
4 6.4.4 Installation und lokale Ausführung
5 6.4.5 Verbindung des Projekts mit dem enaio® webclient
6 6.4.6 Verbindung des Projekts mit dem enaio® client

6.4.2 Zweck des Projekts

Dieses Projekt demonstriert die Implementierung von benutzerdefinierten modalen Dialogen im enaio® webclient und enaio® client, die über das ModalDialog-Addon mit der Version 11.10 eingeführt wurde. Diese Dialoge unterstützen eine Vielzahl von Geschäftsprozessen und Szenarien, was eine flexiblere und interaktivere Benutzererfahrung ermöglicht.

6.4.3 Einfache Einbindung

Sollten Sie den Demo modalen Dialog lediglich zum Ausprobieren ohne Änderungs- oder Anpassungsmöglichkeit in den enaio® Webclient oder enaio® client einbinden wollen, so können Sie ein einfaches Button-Klick-Skript schreiben mit der folgendem Inhalt:

webclient

formHelper.openModalDialog("https://optimalsystems.github.io/enaio-webclient-demo-modal-dialog-addon/index.html", "ModalDialog", 1000, 1000);

client (DMS)

Dim ret : ret = 0
 ' Eingabe der URL
OXHelp.WriteProfString "DATA", "EXTRA00" , "https://optimalsystems.github.io/enaio-webclient-demo-modal-dialog-addon/index.html", osFile
' Übergabe des Fenstertitels
OXHelp.WriteProfString "DATA", "EXTRA01" , "ModalDialog", osFile
ret = Application.OpenModalBrowserDialog(osFile)
resultcode = ret
writetofile

6.4.4 Installation und lokale Ausführung

Sollte die einfache Einbindung des modalen Dialoges nicht genug sein, so können Sie das Projekt von Github klonen

Um mit dem enaio® Webclient-Demo-Modal-Dialog-Addon zu beginnen, folgen Sie diesen Schritten:

1. Klonen Sie das Repository:

git clone https://github.com/OPTIMALSYSTEMS/enaio-webclient-demo-modal-dialog-addon.git

2. Wechseln Sie in das Projektverzeichnis:

cd enaio-webclient-demo-modal-dialog-addon

3. Installieren Sie die notwendigen Pakete:

npm install

4. Starten Sie das Projekt

npm start

Standardmäßig wird das Projekt auf Port 5500 ausgeführt. Diese Einstellung kann in der Datei package.json geändert werden.

Um die Portnummer zu ändern:

Gehen Sie in den Projektordner:
cd enaio-webclient-demo-modal-dialog-addon
Wechseln Sie zum Block "scripts" in der Datei package.json:
"scripts": { "start": "live-server ./src --port=5500 -o", }
Ändern Sie die Portnummer auf die gewünschte neue Nummer.
Speichern Sie die Änderungen.
Führen Sie npm start erneut aus, und das Projekt wird nun auf dem neuen Port ausgeführt.

6.4.5 Verbindung des Projekts mit dem enaio® webclient

Um eine Verbindung zwischen dem Projekt und dem enaio® Webclient herzustellen, folgen Sie diesen Schritten:

Bereiten Sie die Datenmaske vor: Öffnen Sie den enaio® editor und wählen Sie eine Datenmaske Ihrer Wahl aus.
Fügen Sie einen Button hinzu: Erstellen Sie innerhalb der Datenmaske einen neuen Button. Geben Sie ihm einen geeigneten Namen, der seine Funktion oder seinen Zweck widerspiegelt.
Konfigurieren Sie den Button im enaio® Rich Client: Starten Sie den enaio® Rich Client und navigieren Sie zu Ihrer ausgewählten Maske. Verknüpfen Sie ein enaio® webclient OnClick-Ereignis mit dem Button, den Sie hinzugefügt haben.
Richten Sie das Ereignisskript ein: Fügen Sie im Ereignisskript-Panel das Skript openModalDialog() wie folgt ein:

formHelper.openModalDialog("http://localhost:5500/", "Modal Addon Title", "400", "400");

Dieses Skript weist den Button an, einen modalen Dialog zu öffnen, der auf das unter http://localhost:5500/ laufende Projekt mit dem angegebenen Titel und den Maßen verweist.
Testen Sie die Integration: Greifen Sie im enaio® WebClient auf dieselbe Maske zu. Klicken Sie auf den konfigurierten Button.
Diese Aktion sollte das Öffnen des modalen Dialogs auslösen, der das laufende Projekt darin anzeigt.

6.4.6 Verbindung des Projekts mit dem enaio® client