Erweitern des Webclients

Sie können die Darstellung des Webclients mit eigenem HTML-, CSS- oder JavaScript-Code über den Browser aktualisieren, bearbeiten und anpassen.

Mit Erweiterungen können Sie optische Änderungen am Webclient vornehmen und die Anwendung anpassen. Der Webclient hostet den benutzerdefinierten HTML- oder CSS-Code, sodass er sich einfach ändern und pflegen lässt.

Weitere Informationen:

• Hinzufügen einer Erweiterung

• Erweiterungsbeispiel

Hinzufügen einer Erweiterung

Beachten Sie vor dem Fortfahren, dass Host Access for the Cloud zwar die Möglichkeit zum Planen und Verwenden von benutzerdefiniertem Code bietet, der Code selbst aber von den Entwicklern gepflegt werden muss, die ihn erstellt haben.

Wenn Sie Erweiterungen zum Webclient hinzufügen, sind die Änderungen für alle Benutzer sichtbar und werden auf alle Sitzungen angewendet.

So fügen Sie eine Erweiterung hinzu:

1. Öffnen Sie die Datei <Installationsverzeichnis>/sessionserver/microservices/sessionserver/service.yml.

2. Fügen Sie „extensions_enabled“ an den vorhandenen Wert der Eigenschaft SPRING_PROFILES_ACTIVE an. Trennen Sie Werte mit einem Komma.

   Beispiel:

   env:
     - name: SPRING_PROFILES_ACTIVE
       value: tls,extensions_enabled
   

3. Starten Sie den Sitzungsserver neu.

4. Erstellen Sie die Datei <Installationsverzeichnis>/sessionserver/microservices/sessionserver/extensions/client/index.html als Einstiegspunkt. Hier fügen Sie den HTML-, CSS- oder JavaScript-Code hinzu (einschließlich Verweise auf externe Skripte).

Bereitstellen von Erweiterungen ohne Clientauthentifizierung

Dateien im Verzeichnis /client sind mit der in MSS ausgewählten Authentifizierungsebene geschützt.

So geben Sie Dateien frei, ohne dass eine Authentifizierung erforderlich wird:

Erstellen Sie <Installationsverzeichnis>/sessionserver/microservices/sessionserver/extensions/public/. Platzieren Sie Ihren Code in dieses Verzeichnis und rufen Sie ihn mithilfe der URL /public/* auf.

Erweiterungsbeispiel

In diesem Beispiel wird nach dem Aktivieren der Erweiterungen (siehe Schritt 2 oben) benutzerdefinierter CSS- und JavaScript-Code hinzugefügt, um die Schriftfarbe der Menübeschriftung zu ändern und Text zur JavaScript-Konsole auszugeben.

Sie erstellen drei Dateien: custom.css, custom.js und index.html.

Schritt 1

Suchen Sie die in Schritt 4 oben erstellte Datei index.html. Hier legen Sie die Erweiterungsdateien ab und erstellen einen Einstiegspunkt:

<!-- Link zum externen Stylesheet definieren -->
<link href="client/custom.css" rel="stylesheet">
<!-- Externe JavaScript-Datei definieren -->
<script src="client/custom.js"></script>

Schritt 2

Ändern Sie die standardmäßig schwarze Menübeschriftung in orange:

Erstellen Sie „custom.css“, um die Farbe in orange zu ändern:

/* Linktext orange darstellen */
a span {
color: #ff5d28;
}

Schritt 3

Erstellen Sie „custom.js“, um Text zur JavaScript-Konsole zu senden:

//Nachricht zur JavaScript-Konsole drucken
console.log('Hello World!');

Schritt 4

Nachdem die Dateien eingerichtet wurden (<Installationsverzeichnis>/sessionserver/microservices/sessionserver/extensions/client/index.html), sollte das Ergebnis folgendermaßen aussehen:

Außerdem wird der Text „Hello World“ in der JavaScript-Konsole angezeigt:

Weitere Informationen:

HACloud-API-Dokumentation