Einbinden von JavaScript & CSS-Code über Scrip parts
Über die Funktion „Script parts“ stehen Ihnen flexible Konfigurationsmöglichkeiten zur Verfügung. Sie können darüber JavaScript & CSS-Code direkt in Ihre Anwendung integrieren. Das erlaubt zum Beispiel die Einbindung von Drittanbieter-Plugins (z.B. QR-Code oder Bar-Code-Scanner) oder das Erstellen von ausführbarem JavaScript-Code um Komponenten direkt anzusteuern.
So geht’s Schritt für Schritt:
- Lokal verfügbare (JavaScript-/CSS-) Dateien importieren
- Externe JavaScript-/CSS-Dateien einbinden
- JavaScript-Code direkt erstellen und GAPTEQ-Komponenten ansteuern
- Script parts ausführen
- Page mit Style-Elementen aufwerten
1. Lokal verfügbare (JavaScript-/CSS-) Dateien importieren
Um lokal verfügbare (JavaScript-) Dateien zu importieren, gehen Sie zu den „Script parts“, welche Sie in Ihrer GAPTEQ-Page unter den Menüpunkt „Page definition“ finden.
- Erstellen Sie sich zunächst einen Ordner in den Design objects und importieren Sie sich Ihre lokale CSS oder JavaScript-Datei mit Klick auf „Import“ (in der Menüleiste).
- Anschließend könne Sie mit Klick auf „Add internal file“ diese importierte Datei auswählen und als Include für die Page übernehmen.
2. Externe JavaScript- oder CSS-Dateien einbinden
Neben dem Import von lokal verfügbaren JavaScript- und CSS-Dateien können Sie auch externe Plugins von Drittanbietern in GAPTEQ einbinden. Dies könnten beispielsweise Bar-Code- oder QR-Code-Scanner sein.
- Unter dem Button „Add external include“ können Sie die URL zu einer externen JavaScript-Datei angeben.
- Mit „Move up“ und „Move down“ können Sie die Reihenfolge definieren, mit der die Scripte in den Quellcode eingebunden werden.
3. JavaScript-Code direkt erstellen und GAPTEQ-Komponenten ansteuern
- Bei „Add script part“ können Sie zunächst einen Namen (im Beispiel unten grün markiert) vergeben und anschließend Ihren Script part mit allen Anweisungen anlegen.
Tipp: Der Script part „pageLoaded“ ist vordefiniert und wird bei jedem Laden der Page ausgeführt.
4. Script part ausführen
Die GAPTEQ Action Scripts kann ausgelöst durch ein Event, ein von Ihnen erstelltes Script ausführen. Hier stehen alle Script parts der Page zur Auswahl aufgelistet.
5. Page mit Style-Elementen aufwerten (CSS-Code)
Mit CSS-Code (Cascading Style Sheets) können Sie Einfluss auf das Erscheinungsbild ihrer HTML-Komponenten nehmen.
- CSS embedded in page: CSS-Code den Sie hier angeben wird im HTML-Code eingebettet.
- Add internal file: Wählen Sie eine CSS-Datei, die Sie bereits importiert oder erstellt haben.
- Add external include: Externe CSS-Dateien können mit Angabe der URL zur Datei eingebunden werden.
- Mit „Move up / Move down“ legen sie die Reihenfolge fest, mit der die Files in den HTML-Code inkludiert werden.
