QR-Codes mit der X4 BPMS generieren

In diesem Tutorial lernen Sie den Adapter QR Code Generator kennen und wie Sie damit QR-Codes erzeugen und auslesen.

QR-Codes sind zweidimensionale Codes, die aus einer quadratischen Matrix bestehen. In der Matrix werden kodierte Daten mit schwarzen und weißen Quadraten dargestellt. QR-Codes sind sehr fehlertolerant, sie können auch dann noch ausgelesen werden, wenn bis zu einem Drittel des QR-Codes nicht mehr zu sehen ist.

QR-Codes werden mittlerweile in vielen Bereichen eingesetzt, z. B. auf Werbeplakaten, für einen schnelleren Zugriff auf Web-Adressen oder zur Identifikation von Produkten in einer Fertigung.

In diesem Tutorial lernen Sie, wie Sie mit dem QR Code Generator in der X4 BPMS ohne Programmieren einen QR-Code aus einem Text erzeugen und einen QR-Code auslesen können.

Case

Arbeiten mit Adaptern

X4 BPMS-Komponenten

X4 BPMS-Adapter

Branchen

Branchenübergreifend

Sie können ein Template zu diesem Tutorial über den Button herunterladen. Entpacken Sie einfach die .zip-Datei und ziehen Sie das Template mit der Dateiendung .x4projecttemplate per Drag & Drop in den Repository Navigator des X4 Designers.

Template herunterladen

Projekt erstellen

Damit wir die Funktion unseres QR-Codes direkt ausprobieren können, erstellen wir in diesem Beispiel eine X4 Activities Web App. Dafür erstellen wir ein neues Web-App-Projekt. Um ein neues Web-App-Projekt zu erstellen, klicken Sie im X4 Designer auf File > New > Web App Project

Der Project Creation Wizard öffnet sich.

Geben Sie für Project name QRCode_Example ein.

Ein neues Web-App-Projekt wird angelegt.

Ein Projektname (Project name) darf kein Leerzeichen enthalten!

Um einen Text in einen QR-Code umwandeln zu können, müssen wir ein paar Zwischenschritte machen. Für unseren Prozess, mit dem wir einen Text in einen QR-Code umwandeln, benötigen wir mehrere Elemente:

Adapter
- QR Code Generator
  Mit diesem Adapter wandeln wir eine Zeichenfolge in einen QR-Code um.
- Adapter Base64_Encoder.fa
  Mit diesem Adapter wandeln wir die Grafikdatei (*.png) in eine Base64-kodierte Zeichenfolge um.
- Adapter XML Element Wrapper
  Mit diesem Adapter verpacken wir den Base64-kodierten QR-Code in ein XML-Element, damit wir den QR-Code in der Web App anzeigen können.
Dateien
- vCard.txt
  Den Inhalt dieser Textdatei wandeln wir in einen QR-Code um.
- url.txt
  Diese Textdatei enthält eine URL, die wir in einen QR-Code umwandeln.
- wrapQRCode.xsl
  Dieses Mapping wandelt den QR-Code so um, dass wir ihn in unserer Web App anzeigen können.

Adapter hinzufügen

Adapter QR Code Generator hinzufügen

Jetzt erstellen wir unseren Adapter.

Klicken Sie im X4 Repository mit der rechten Maustaste im Web-App-Projekt QRCode_Example im Ordner Services auf den Ordner Adapters, um das Kontextmenü zu öffnen.

Das Kontextmenü öffnet sich.

Klicken Sie auf New > Adapter.

Der File Creation Wizard öffnet sich.

Wählen Sie den Adapter QR Code Generator aus.

Geben Sie als File name QRCodeGenerator.fa ein.

Um den Adapter anzulegen, klicken Sie auf Finish.

Der Adapter wird angelegt und geöffnet.

Sie können den Adapter über das Suchfeld im oberen Bereich des File Creation Wizard suchen.

Wir behalten die Standardeinstellungen des Adapters bei.

Mit den Standardeinstellungen wird der QR-Code als PNG-Datei ausgegeben und hat eine Größe von 350 x 350 Pixel.

Speichern Sie die Datei, indem Sie in der Werkzeugleiste auf Speichern bzw. Alle Speichern klicken:

Sie können Ihre Änderungen auch mit Strg+S speichern.

Adapter Base64 Converter hinzufügen

Nun fügen wir einen weiteren Adapter in unserem Projekt hinzu.

Klicken Sie im X4 Repository mit der rechten Maustaste im Web-App-Projekt QRCode_Example im Ordner Services auf den Ordner Adapters, um das Kontextmenü zu öffnen.

Das Kontextmenü öffnet sich.

Klicken Sie auf New > Adapter.

Der File Creation Wizard öffnet sich.

Wählen Sie den Adapter Base64 Converter aus.

Sie können den Adapter über das Suchfeld im oberen Bereich des File Creation Wizard suchen.

Geben Sie als File name Base64Converter.fa ein.

Um den Adapter anzulegen, klicken Sie auf Finish.

Der Adapter wird angelegt und geöffnet.

Wir behalten die Standardeinstellungen des Adapters bei.

Speichern Sie die Datei, indem Sie in der Werkzeugleiste auf Speichern bzw. Alle Speichern klicken:

Sie können Ihre Änderungen auch mit Strg+S speichern.

Adapter XML Element Wrapper hinzufügen

Nun fügen wir einen weiteren Adapter in unserem Projekt hinzu.

Klicken Sie im X4 Repository mit der rechten Maustaste im Web-App-Projekt QRCode_Example im Ordner Services auf den Ordner Adapters, um das Kontextmenü zu öffnen.

Das Kontextmenü öffnet sich.

Klicken Sie auf New > Adapter.

Der File Creation Wizard öffnet sich.

Wählen Sie den Adapter XML Element Wrapper aus.

Sie können den Adapter über das Suchfeld im oberen Bereich des File Creation Wizard suchen.

Geben Sie als File name XmlElementWrapper.fa ein.

Um den Adapter anzulegen, klicken Sie auf Finish.

Der Adapter wird angelegt und geöffnet.

Wir behalten die Standardeinstellungen des Adapters bei.

Speichern Sie die Datei, indem Sie in der Werkzeugleiste auf Speichern bzw. Alle Speichern klicken:

Sie können Ihre Änderungen auch mit Strg+S speichern.

Weitere Dateien hinzufügen

Textdatei vCard für den Input erstellen

Um einen QR-Code aus einem Text zu erzeugen, benötigen wir eine Textdatei, die wir als Input für den QR Code Generator verwenden können. Diese Textdatei erzeugen wir jetzt.

Klicken Sie im X4 Repository mit der rechten Maustaste im Web-App-Projekt QRCode_Example im Ordner Services auf den Ordner Resources, um das Kontextmenü zu öffnen.

Das Kontextmenü öffnet sich.

Klicken Sie auf New > Text Document.

Der File Creation Wizard öffnet sich.

Geben Sie für File name vCard.txt ein.

Um die Datei zu erzeugen, klicken Sie auf Finish.

Die TXT-Datei wird erzeugt, im X4 Repository angezeigt und im X4 Designer geöffnet.

Nun füllen wir die Datei mit Inhalt.

Der Inhalt der Datei muss sein wie folgt:

BEGIN:VCARD
VERSION:3.0
N:Owen;Patrick;;;
FN:Patrick Owen
TITLE:Software Engineer
EMAIL;TYPE=INTERNET;TYPE=WORK;TYPE=PREF:cngevpx.bjra@fbsgcebwrpg.qr
URL;TYPE=Homepage:https://www.softproject.de/de/
END:VCARD

Wenn Sie den Inhalt der Textdatei kopieren, dann achten Sie darauf, die Leerzeichen am Zeilenende zu löschen. Diese können durch den Kopiervorgang entstehen und verursachen einen Fehler.

Speichern Sie die Datei, indem Sie in der Werkzeugleiste auf Speichern bzw. Alle Speichern klicken:

Sie können Ihre Änderungen auch mit Strg+S speichern.

Textdatei url für den Input erstellen

Der QR Code Generator kann QR-Codes nicht nur aus Textdateien erzeugen, sondern auch aus Daten, die über eine URL bereitgestellt werden. Wir erstellen jetzt eine Textdatei, mit der eine URL mit Input für den QR Code Generator.

Klicken Sie im X4 Repository mit der rechten Maustaste im Web-App-Projekt QRCode_Example im Ordner Services auf den Ordner Resources, um das Kontextmenü zu öffnen.

Das Kontextmenü öffnet sich.

Klicken Sie auf New > Text Document.

Der File Creation Wizard öffnet sich.

Geben Sie für File name url.txt ein.

Um die Datei zu erzeugen, klicken Sie auf Finish.

Die TXT-Datei wird erzeugt, im X4 Repository angezeigt und im X4 Designer geöffnet.

Nun füllen wir die Datei mit Inhalt.

Der Inhalt der Datei muss sein wie folgt:

https://www.softproject.de

Speichern Sie die Datei, indem Sie in der Werkzeugleiste auf Speichern bzw. Alle Speichern klicken:

Sie können Ihre Änderungen auch mit Strg+S speichern.

Mapping wrapQRCode erstellen

Wir wollen in unserer Web App ein Bild mit einem QR-Code anzeigen. Damit wir das Bild in der Web App anzeigen können, müssen wir das Bild Base64-kodiert und in einer XML-Datei verpackt bereitstellen.

Wir wollen jetzt ein Mapping erstellen, dass die Base64-kodierte PNG-Datei in eine XML-Datei verpackt.

Klicken Sie im X4 Repository mit der rechten Maustaste im Web-App-Projekt QRCode_Example im Ordner Services auf den Ordner Transformations, um das Kontextmenü zu öffnen.

Das Kontextmenü öffnet sich.

Klicken Sie auf New > XSL Stylesheet.

Der File Creation Wizard öffnet sich.

Geben Sie für File name wrapQRCode.xsl ein.

Um die Datei zu erzeugen, klicken Sie auf Finish.

Das Mapping wird erzeugt, im X4 Repository angezeigt und im X4 Designer geöffnet.

Nun füllen wir das Mapping mit Inhalt.

Der Inhalt des Mappings muss sein wie folgt:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="2.0">
  <xsl:output media-type="text/xml" method="xml"></xsl:output>
  <xsl:template match="/">
    <Ok>
      <image mediaType="image/png">
        <xsl:value-of select="Data"></xsl:value-of>
      </image>
    </Ok>
  </xsl:template>
</xsl:stylesheet>

Speichern Sie die Datei, indem Sie in der Werkzeugleiste auf Speichern bzw. Alle Speichern klicken:

Sie können Ihre Änderungen auch mit Strg+S speichern.

Prozesse erstellen

Für unsere Web App benötigen wir mehrere Prozesse:

GenerateQRCodeFromVCard.wrf
Dieser Prozess generiert einen QR-Code aus der Textdatei vCard.
GenerateQRCodeFromURL.wrf
Dieser Prozess generiert einen QR-Code aus der Textdatei url.
MapToWebAppResponse.wrf
Dieser Prozess wird als Subprozess benötigt, um die Daten für die Web App umzuwandeln.

Prozess MapToWebAppResponse erstellen

Da wir den Prozess MapToWebAppResponse als Subprozess für die beiden anderen Prozesse benötigen, erstellen wir diesen zuerst. Der Prozess MapToWebAppResponse wandelt unsere PNG-Datei mit dem QR-Code in eine Base64-Datei um und verpackt die Base64-kodierten Daten in eine XML-Datei.

Für den Prozess benötigen wir:

Adapter Base64Converter
Adapter XmlElementWrapper
Mapping wrapQRCode

Die oben erwähnten Elemente führen wir nun in einem Prozess zusammen. Dafür müssen wir in unserem Web-App-Projekt einen Prozess anlegen. Klicken Sie im X4 Repository mit der rechten Maustaste im aktuellen Web-App-Projekt im Ordner Services auf den Ordner Processes, um das Kontextmenü zu öffnen.

Das Kontextmenü öffnet sich.

Klicken Sie auf New > Process.

Der File Creation Wizard öffnet sich.

Wählen Sie ein leeres Template und geben Sie als File name MapToWebAppResponse.wrf ein.

Um den Prozess zu erstellen, klicken Sie auf Finish.

Der Prozess wird erstellt und angezeigt.

Fügen Sie die benötigten Elemente per Drag & Drop aus dem X4 Repository zum Prozess hinzu:

Base64Converter.fa
XmlElementWrapper.fa
wrapQRCode.xsl

Der Prozess sieht nun so aus:

Nun müssen wir die einzelnen Bausteine noch konfigurieren. Wählen Sie den linken Adapter Base64Converter aus, indem Sie darauf klicken.

In der linken unteren Ecke werden Ihnen die Properties (Eigenschaften) dieses Bausteins angezeigt. Stellen Sie die Properties wie folgt ein. Bestätigen Sie die jeweilige Eingabe, indem Sie die Enter-Taste drücken.

Property	Wert	Beschreibung
Label	`Encode to Base64`	Beschriftung des Bausteins
Operation	`Encode`	Operation, die durch den Adapter ausgeführt wird.

Die anderen Elemente müssen wir nicht anpassen.

Nicht erwähnte Properties müssen Sie nicht anpassen.

Speichern Sie die Datei, indem Sie in der Werkzeugleiste auf Speichern bzw. Alle Speichern klicken:

Sie können Ihre Änderungen auch mit Strg+S speichern.

Prozess GenerateQRCodeFromVCard erstellen

Jetzt erstellen wir einen Prozess, mit dem wir einen QR-Code aus einer vCard erstellen und in unserer Web App anzeigen.

Für den Prozess benötigen wir:

TXT-Datei vCard.txt
Adapter QRCodeGenerator
Subprozess MapToWebAppResponse

Das Kontextmenü öffnet sich.

Klicken Sie auf New > Process.

Der File Creation Wizard öffnet sich.

Wählen Sie ein leeres Template und geben Sie als File name GenerateQRCodeFromVCard.wrf ein.

Um den Prozess zu erstellen, klicken Sie auf Finish.

Der Prozess wird erstellt und angezeigt.

Fügen Sie die benötigten Elemente per Drag & Drop aus dem X4 Repository zum Prozess hinzu:

vCard.txt
QRCodeGenerator
MapToWebAppResponse

Der Prozess sieht nun so aus:

Nun müssen wir die einzelnen Bausteine noch konfigurieren. Wählen Sie den linken Baustein vCard aus, indem Sie darauf klicken.

Property	Wert	Beschreibung
Label	`Read vCard`	Beschriftung des Bausteins

Wählen Sie den Adapter QRCodeGenerator aus, indem Sie darauf klicken.

Property	Wert	Beschreibung
Label	`Generate QR Code`	Beschriftung des Bausteins
Operation	`Generate`	Operation, die durch den Adapter ausgeführt wird.

Wählen Sie den Subprozess MapToWebAppResponse aus, indem Sie darauf klicken.

Property	Wert	Beschreibung
Label	`Map to Web App Response`	Beschriftung des Bausteins

Nicht erwähnte Properties müssen Sie nicht anpassen.

Speichern Sie die Datei, indem Sie in der Werkzeugleiste auf Speichern bzw. Alle Speichern klicken:

Sie können Ihre Änderungen auch mit Strg+S speichern.

Prozess GenerateQRCodeFromURL erstellen

Jetzt erstellen wir einen Prozess, mit dem wir einen QR-Code mit Daten von einer URL erstellen und in unserer Web App anzeigen.

Für den Prozess benötigen wir:

TXT-Datei url
Adapter QR Code Generator
Subprozess MapToWebAppResponse

Das Kontextmenü öffnet sich.

Klicken Sie auf New > Process.

Der File Creation Wizard öffnet sich.

Wählen Sie ein leeres Template und geben Sie als File name GenerateQRCodeFromURL.wrf ein.

Um den Prozess zu erstellen, klicken Sie auf Finish.

Der Prozess wird erstellt und angezeigt.

Fügen Sie die benötigten Elemente per Drag & Drop aus dem X4 Repository zum Prozess hinzu:

url.txt
QRCodeGenerator
MapToWebAppResponse

Der Prozess sieht nun so aus:

Nun müssen wir die einzelnen Bausteine noch konfigurieren. Wählen Sie den linken Baustein url aus, indem Sie darauf klicken.

Property	Wert	Beschreibung
Label	`Read URL`	Beschriftung des Bausteins

Wählen Sie den Adapter QRCodeGenerator aus, indem Sie darauf klicken.

Property	Wert	Beschreibung
Label	`Generate QR Code`	Beschriftung des Bausteins
Operation	`Generate`	Operation, die durch den Adapter ausgeführt wird.

Wählen Sie den Subprozess MapToWebAppResponse aus, indem Sie darauf klicken.

Property	Wert	Beschreibung
Label	`Map to Web App Response`	Beschriftung des Bausteins

Nicht erwähnte Properties müssen Sie nicht anpassen.

Speichern Sie die Datei, indem Sie in der Werkzeugleiste auf Speichern bzw. Alle Speichern klicken:

Sie können Ihre Änderungen auch mit Strg+S speichern.

Web-App-Definition anpassen

Damit wir unsere QR-Codes auch in der Web App anzeigen können, müssen wir die WAD-Datei anpassen, mit der wir unsere Web App beschreiben.

Öffnen Sie die Datei wad, indem Sie im Repository doppelt darauf klicken.

Der Inhalt der Datei muss sein wie folgt:

<?xml version="1.0" encoding="UTF-8"?>
<WebApp xmlns="https://www.softproject.de/webapp/1.0" displayName="QR Code Example"
        logoUrl="logo.png"
        path="QRCode_Example">
    <Modules>
        <Module displayName="My Module" path="Module">
            <Components>
                <DetailComponent default="true" displayName="vCard" path="vCard"
                             process="GenerateQRCodeFromVCard.wrf"
                             title="vCard QR Code">
                    <Properties>					
                        <Property displayName="vCard" name="image" type="Base64"/>
                    </Properties>
                    <FlowLayout>
                        <Image border="true" horizontalAlign="left" value="#image"/>						
                    </FlowLayout>									
                </DetailComponent>
                <DetailComponent default="false" displayName="URL" path="URL"
                             process="GenerateQRCodeFromURL.wrf"
                             title="URL QR Code">
                    <Properties>					
                        <Property displayName="URL" name="image" type="Base64"/>
                    </Properties>
                    <FlowLayout>
                        <Image border="true" horizontalAlign="left" value="#image"/>						
                    </FlowLayout>									
                </DetailComponent>
            </Components>
        </Module>
    </Modules>
</WebApp>

Speichern Sie die Datei, indem Sie in der Werkzeugleiste auf Speichern bzw. Alle Speichern klicken:

Sie können Ihre Änderungen auch mit Strg+S speichern.

Web App ansehen

Wenn alle Dateien gespeichert sind, können wir uns das Ergebnis im Browser ansehen. Klicken Sie dazu mit der rechten Maustaste auf das Web App-Projekt QRCode_Example.

Das Kontextmenü öffnet sich.

Klicken Sie im Kontextmenü auf Open Web App in browser.

Melden Sie sich in der Web App mit den Zugangsdaten an.

Unsere QR-Codes werden angezeigt.