Vom Touch-Display zum HR-Terminal

SiteKiosk Online How-To’s

Vom Touch-Display zum HR-Terminal

20. Februar 2024

1. Einleitung

Die folgende Anleitung wird anhand eines fiktiven Beispiels verbildlicht. Gerne unterstützen wir Sie in diesem Prozess, oder erstellen eine individuelle Lösung für Ihren Bedarf. Kontaktieren Sie uns einfach!

Richten Sie zu Beginn alles soweit ein, dass auf Ihrem Touchdisplay SiteKiosk Online installiert und aktiviert ist. Zudem müssen Sie in einem externen Browser in Ihrem SiteKiosk Online-Account eingeloggt sein und den Expert-Modus aktiviert haben. Gehen Sie in der SiteKiosk Online Anwendung im Browser zum Projekteditor und öffnen Sie das gewünschte Projekt für Ihren HR-Terminal.

Mit SiteKiosk Online besteht die Möglichkeit Scanner und personalisierte Chips zur schnelleren Anmeldung zu verwenden. Hierzu können entsprechende Skripte mit wenig Aufwand eingebunden werden.

Für dieses Beispiel wurde Windows 10 verwendet, falls Sie beabsichtigen ein Android-GHerät zu verwenden, kontaktieren Sie uns gerne für eine entsprechende Anleitung.

Damit externe Geräte eingebunden werden können, ist es notwendig den Expert-Mode von SiteKiosk Online zu aktivieren

In den Expert-Mode gelangen Sie, indem die URL im Browser ganz am Ende mit „&expert“ ergänzt wird. Bestätigen Sie die Eingabe mit der ENTER-Taste.

Expert-Mode
Abb.1 – Expert-Mode

Weitere Informationen zum Expert-Mode erhalten Sie auf der verlinkten Seite:

https://sitekiosk.online/help/de/Experten-Modus.html

Nun haben Sie die Möglichkeit unter „Einstellungen“ den Expert-Mode zu nutzen und Skripte einzufügen.

2. Externe Geräte über die UI hinzufügen

Die folgenden Schritte müssen auf dem Client durchgeführt werden!

Starten Sie SiteKiosk Online auf Ihrem Terminal. Klicken Sie im Startfenster im Bereich „Lokale Client-Maschine konfigurieren“ auf „Einstellung“.

Lokale Client-Maschine konfigurieren
Abb.2 – Lokale Client-Maschine konfigurieren

Als nächstes betätigen Sie im Bereich „Eingabegeräte“ die Schaltfläche „Einstellungen“.

Settings
Abb.3 – Einstellungen

Klicken Sie nun auf „+ Hinzufügen“ und tippen Sie in der Kategorie „Name“ das Wort „scanner“ in die Textzeile.

Eingabegeräte Einstellungen
Abb.4 – Eingabegeräte Einstellungen

Abschließend klicken Sie auf die grüne Fläche „Hinzufügen“.

Eingabegeräte hinzufügen
Abb.5 – Eingabegeräte hinzufügen

Ihr externer Scanner ist jetzt an SiteKiosk Online angebunden und wird von der Software erkannt.

Nachdem das Gerät mittels der UI eingerichtet wurde, kann nun das Skript eingepflegt werden.

3. Skripte hinzufügen

Wechseln Sie für die folgenden Schritte in den Browser und in die SiteKiosk Online Anwendung.

3.1 Skriptbestandteile

Zunächst werden hier die Bestandteile des Skriptes erläutert.

Bitte nehmen Sie zum besseren Verständnis auch unsere API-Dokumentation zu Hilfe, die Sie an dieser Stelle finden können:

https://sitekiosk.online/projects/external/apidocs/generated/index.html

Um später Elemente (z.B. ein Textelement) über das Skript anzusprechen, muss auf das Event, das alle Elemente verfügbar sind, gewartet werden.

Innerhalb der Callback Funktion dieses Event-Listeners wird dann der Logikteil ausgeführt:

siteKiosk.content.onContentInserted(async () => {
// Hardware access is not available in preview mode
if (!siteKiosk.env.isPreview) {
// Get the scanner device
const scanner = siteKiosk.devices.getByName("scanner");
if (!scanner) {
console.error("Scanner device not found!");
return;
}
scanner.onData((e) => handleEmulatedKeyboardData(e));
} else {
console.info("Note: No keyboard data accessable, preview only");
}
});

Jetzt kann der Scanner anhand des Namens angesprochen werden und registriert ein „Data“ Event-Listener.

Sobald Daten des Scanners empfangen wurden, werden diese an die „handleEmulatedKeyboardData“ Funktion weiter gereicht:

async function handleEmulatedKeyboardData(e) {
const data = e.data;
if (data && data.text) {
const userData = await offlineDummyFetch(data.text);
const isSuccess = applyUserData(userData.json());
if (isSuccess) {
console.info("User data applied");
siteKiosk.content.navigation.navigateToElementByTag("restrictedArea");
} else {
console.error("User data could not be applied");
}
}
}

Die Funktion „offlineDummyFetch“ simuliert in diesem Fall eine Serveranfrage, welche die individuellen Daten zu einem Nutzer, der anhand der gescannten ID gefunden werden kann, zurück liefert.

Anschließend werden die Elemente über die Funktion „applyUserData“ in dem Projekt mit den Inhalten gefüllt:

function applyUserData(userData) {
if (!userData || !userData.data) {
console.error("No user data found!");
return false;
}
const headlineElement = siteKiosk.content.getElementByTag("headline");
const pdfButton = siteKiosk.content.getElementByTag("pdfButton");
headlineElement.replacePropertyPlaceholders("text", { name: userData.data.name });
pdfButton.setPropertyValue("additionalLink.src", {
fileName: `${userData.data.pdf}`,
});
return true;
}

Für dieses Beispiel wird ein Platzhalter ({$name}) in einem Textelement und die URL zu einer PDF-Datei für ein Popup gesetzt.

3.2 Tags setzten

Damit Elemente über das Skript angesprochen werden können, müssen diese mit einem Tag versehen werden:

Tags setzten
Abb.6 – Tags setzten

In diesem Beispiel verwenden Sie „headline“ als Tag für das Textelement „pdfButton“. Dieses bezieht sich auch auf den Button der das Popup öffnet.

Der Tag „restrictedArea“ bezieht sich auf die Seite, zu der nach erfolgreichem Login navigiert werden soll.

3.3 Skripte hinzufügen

Jetzt kann das gesamte Skript in das Projekt eingefügt werden.

Öffnen Sie die „Einstellungen“→ „Expert“ → „Skripte“ → „Hinzufügen“ und fügen Sie das Skript in das Textfeld ein und klicken Sie auf „Speichern“.

Neue Scripte hinzufügen
Abb.7 – Neue Scripte hinzufügen

Wechseln Sie jetzt wieder in den Editormodus und veröffentlichen Sie das Projekt.

4. Veröffentlichung

Scannen Sie nun einen NFC-Tag oder QR-Code (je nach verbundenem Scanner), dann wechselt die Anwendung auf die „Restricted Area“ Seite, welche mit den Nutzerdaten im Vorfeld gefüllt wurde. Der Nutzer erhält Zugriff auf das hinterlegte Dokument.

Sie finden das Skript und die erweiterten Einstellungen zusammengefasst und als downloadbares Dokument am Ende dieses Artikels. Die enthaltene ZIP-Datei können Sie einfach in Ihren SiteKiosk Online Account importieren und für ein bereits lauffähiges Projekt als Basis für den Einsatz von Code-Scannern verwenden.

Für weitere Infos zur Anbindung von Hardware in SiteKiosk Online, kontaktieren Sie uns gerne per Mail support-europe@sitekiosk.com.