Sie können mithilfe der One Identity Visual Studio Code-Erweiterung Ihre eigene HTML-Anwendung erstellen und in die bestehende Umgebung einbinden.

Das Erstellen einer neuen HTML-Anwendung führen Sie in drei Schritten durch:

  1. Erstellen Sie die neue HTML-Anwendung.

  2. Importieren Sie die Quelldateien in die Datenbank.

  3. Legen Sie die HTML-Anwendung in der Datenbank an.

Um eine neue HTML-Anwendung zu erstellen

  1. Installieren Sie die One Identity Visual Studio Code-Erweiterung (siehe One Identity Visual Studio Code-Erweiterung installieren).

  2. Richten Sie mithilfe der One Identity Visual Studio Code-Erweiterung die Arbeitsumgebung ein (siehe Arbeitsumgebung einrichten).

  3. In Ihrer Arbeitsumgebung legen Sie einen neuen Ordner CCC an.

  4. Stellen Sie sicher, dass Sie die korrekte Angular-Version verwenden (6.2.9):

    1. Öffnen Sie ein Kommandozeilenprogramm.

    2. Im Ordner CCC führen Sie den Befehl ng version aus.

    3. Überprüfen Sie die ausgegebene Versionsnummer. Die verwendete Version muss 6.2.9 sein.

      TIPP: Wenn keine Versionsnummer ausgegeben wird, dann ist Angular weder lokal noch global installiert.

      Um Angular global zu installieren, führen Sie den Befehl npm install -g @angular/cli@6.2.9 aus.

      Um Angular lokal zu installieren, führen Sie den Befehl npm install @angular/cli@6.2.9 aus.

  5. Im Ordner CCC führen Sie den Befehl ng new <Name Ihrer HTML-Anwendung> aus.

  6. Im Ordner QBM/OpsWeb kopieren Sie die Datei imx-plugin-config.json und fügen Sie sie in den Ordner CCC/<Name Ihrer HTML-Anwendung> ein.

  7. Im Ordner CCC/<Name Ihrer HTML-Anwendung> bearbeiten Sie die (gerade kopierte) Datei imx-plugin-config.json:

    • Entfernen Sie alle Kategorien außer common und shared.

  8. Im Ordner CCC/<Name Ihrer HTML-Anwendung> bearbeiten Sie die Datei package.json:

    1. Unter scripts fügen Sie "build:debug": "ng build --prod --source-map" hinzu.

    2. Unter dependencies fügen Sie die Abhängigkeiten zu imx-api, imx-qbm-components und imx-qbm-dbts hinzu.

    3. Unter dependencies | rxjs ändern Sie die Version auf ^6.3.3.

  9. Im Ordner CCC/<Name Ihrer HTML-Anwendung> bearbeiten Sie die Datei angular.json:

    • Im Bereich projects | <Name Ihrer HTML-Anwendung> | architect | build | options fügen Sie "outputPath": "dist" hinzu.

    • Im Bereich projects | <Name Ihrer HTML-Anwendung> | architect | build | options fügen Sie "preserveSymlinks": true hinzu.

  10. Im Ordner CCC/<Name Ihrer HTML-Anwendung>/src bearbeiten Sie die Datei index.html:

    • Im Bereich head fügen Sie <base href="."> hinzu.

  11. Im Ordner CCC/<Name Ihrer HTML-Anwendung>/src/environments bearbeiten Sie die Dateien environment.<Name Ihrer Domäne>.ts und environment.ts:

    • Fügen Sie jeweils einen Eintrag für die Client-URL hinzu:

      Für environment.<Name Ihrer Domäne>.ts: clientUrl: ''

      Für environment.ts: clientUrl: 'http://localhost:8182'

  12. Im Ordner CCC/<Name Ihrer HTML-Anwendung> bearbeiten Sie die Datei tsconfig.json:

    • Im Bereich compilerOptions | paths fügen Sie "@shared/*": [ "src/imx-plugins/QBM/shared/*"] hinzu.

  13. Stellen Sie mithilfe der One Identity Visual Studio Code-Erweiterung sicher, dass Sie keinen Kompilierungszweig verwenden (siehe Kompilierungszweige auswählen).

  14. Kompilieren Sie die HTML-Anwendung mithilfe der One Identity Visual Studio Code-Erweiterung (siehe HTML-Anwendungen kompilieren und in Datenbank speichern).

  15. Rufen Sie die fertig kompilierte HTML-Anwendung über die URL: $<URL des App-Servers>/html/<Name Ihrer HTML-Anwendung>/ auf.

    HINWEIS: Verwenden Sie hier den Namen der HTML-Anwendung, so wie er in der Datei package.json hinterlegt ist.

Um die Quelldateien in die Datenbank zu importieren

  1. Wechseln Sie in Ihre Arbeitsumgebung.

  2. Starten Sie das Programm Software Loader.

  3. Klicken Sie auf In Datenbank importieren.

  4. Klicken Sie Weiter.

  5. Auf der Seite Verbindung zur Datenbank herstellen wählen Sie die gewünschte Datenbank aus und geben Sie die Benutzerdaten an.

  6. Klicken Sie Weiter.

  7. Wählen Sie Ihre Arbeitsumgebung aus.

  8. Markieren Sie alle Dateien unterhalb des Ordners CCC/<Name Ihrer HTML-Anwendung>. Schließen Sie dabei die Dateien der folgenden Ordner aus:

    • node_modules

    • dist

    • .git

    • src/assets

    • src/imx-modules

  9. Klicken Sie Weiter.

  10. Bestätigen Sie die Abfrage mit Ja.

  11. Auf der Seite Maschinenrollen zuordnen markieren Sie alle Dateien und aktivieren Sie die Maschinenrolle HTML Development.

  12. Klicken Sie Weiter

  13. Auf der Seite Änderungskennzeichen wählen führen Sie eine der folgenden Aktionen aus:

    • Um kein Änderungskennzeichen zu verwenden, klicken Sie Die Dateien werden keinem Änderungskennzeichen zugeordnet.

    • Um ein Änderungskennzeichen zu verwenden, klicken Sie Die Dateien sollen folgendem Änderungskennzeichen zugeordnet werden. Klicken Sie anschließend ... und wählen Sie das gewünschte Änderungskennzeichen.

  14. Klicken Sie Weiter.

  15. Nachdem die Dateien auf der Seite Übertragen der Dateien erfolgreich in die Datenbank übertragen wurden, klicken Sie Weiter.

  16. Auf der Seite Beenden des Assistenten klicken Sie Fertig.

Um die HTML-Anwendung in der Datenbank anzulegen

  1. Starten Sie das Programm Designer.

  2. Navigieren Sie zu Basisdaten | Sicherheitseinstellungen | HTML Anwendungen.

  3. Legen Sie einen neuen Eintrag an, indem Sie in der Menüleiste Objekt | Neu klicken.

  4. Vergeben Sie einen Anzeigennamen und geben Sie den Pfad CCC/<Name Ihrer HTML-Anwendung> an.

Verwandte Themen