Label Creator

Beschreibung

Der Label Creator erzeugt Asset-Etiketten direkt in Matrix42. Die Etiketten werden als HTML mit CSS gestaltet, im Assistenten in einer Vorschau angezeigt und über den Druckdialog des Browsers ausgegeben – auf einem Etikettendrucker ebenso wie auf A4. Der QR-Code auf dem Etikett führt beim Scannen zur Vorschau des jeweiligen Assets.

Umfang der Erweiterung

Nach der Installation stehen zur Verfügung:

• die Aktion Etikett erstellen (Create Label) in der Applikation Assets
• die Assistenten MTX Label Wizard und MTX Label Wizard Workplace
• das Steuerelement MTX Label Creator in der Toolbox des Layout Designers

Etikett erstellen

Vorab sollte geprüft werden, ob die benötigten Daten am Asset gepflegt sind: Name (ersatzweise Computername), Seriennummer und Inventarnummer.

Ein oder mehrere Assets auswählen und die Aktion Etikett erstellen ausführen.

Der Assistent öffnet sich mit der Vorschau der Etiketten und der Schaltfläche Print Labels. Die Vorschau zeigt das Etikett so, wie es gedruckt wird. Ein Klick auf die Schaltfläche öffnet den Druckdialog des Browsers, weitere Eingaben sind nicht erforderlich.

Werden mehrere Assets ausgewählt, entsteht je Asset ein Etikett. Die Vorschau zeigt alle Etiketten untereinander, der Druckdialog eine Seite je Etikett.

Konfiguration

Die Konfiguration erfolgt im Layout Designer des Assistenten. Unter Administration > Benutzeroberfläche > Layout Vorlagen > Assistenten die Schnellansicht des Assistenten öffnen und mit Layout ändern den Layout Designer starten. Beide Assistenten werden auf dieselbe Weise konfiguriert.

Im Layout liegt das Steuerelement MTX Label Creator. Ist es ausgewählt, zeigt das Eigenschaften-Panel auf der rechten Seite fünf Eigenschaften:

• Label HTML (Pflichtfeld) – das HTML der Etiketten
• Labels CSS – Aussehen und Druckformat
• Show print button – blendet die Druckschaltfläche ein oder aus
• Print button text – Beschriftung der Schaltfläche, Standard Print Labels
• QR Options – Einstellungen für die QR-Code-Erzeugung

Nach jeder Änderung muss der Assistent gespeichert bzw. veröffentlicht werden, damit die Anpassungen übernommen werden.

Label HTML

Die Eigenschaft erwartet ein Array von Zeichenketten – ein Eintrag entspricht einem Etikett. Im Auslieferungszustand ist sie an die berechnete Eigenschaft Context > labelsHtml :: StringType[] gebunden, die im Advanced Mode bearbeitet wird.

Folgende Variablen stehen dort zur Verfügung, alle als Watchable markiert:

• assets – custom_Assets.SPSAssetClassBase
• name, computerName, serialNumber, inventoryNumber – die entsprechenden Felder des Assets
• expressionObjectID – die Objekt-ID, die im QR-Link verwendet wird
• type – Context.Object.Type

let labelsHtml = assets.$value.map(asset => {
    const eoid = asset["Expression-ObjectID"];

    const fullUrl = window.location.href;
    const match = fullUrl.match(/^(https?:\/\/[^\/]+\/wm\/app-Assets)/);
    let url = match[1];

    let assetName = asset.Name;

    if (!assetName) {
        assetName = asset.ComputerName;
    }

    const viewOptions = JSON.stringify({
        objectId: eoid,
        type: type.$value,
        viewType: "preview"
    });

    url = url + `?view-options=${encodeURIComponent(viewOptions)}`;

    return `
<div class="custom-label">
    <div class="qr-code" data-qr-content="${url}"></div>
    <div class="text-container">
        <p>MDL: ${assetName}</p>
        <p>S/N: ${asset.SerialNumber}</p>
        <p>I/N: ${asset.InventoryNumber}</p>
    </div>
</div>`
});

return labelsHtml;

Hinweise zum Ausdruck:

• Aus der aktuellen Adresse wird der Teil bis /wm/app-Assets übernommen. Der QR-Link zeigt dadurch automatisch auf die Umgebung, in der gearbeitet wird – Test- und Produktivsystem benötigen keine unterschiedliche Konfiguration.
• Ist am Asset kein Name gepflegt, wird auf ComputerName ausgewichen.
• viewOptions sorgt dafür, dass beim Scannen die Vorschau des Assets geöffnet wird.
• Jedes Etikett muss ein Element mit der Klasse qr-code und dem Attribut data-qr-content enthalten. Das Steuerelement ersetzt dessen Inhalt durch die erzeugte QR-Grafik.
• Firmenname, Logo oder weitere Felder werden an dieser Stelle im Template ergänzt.

Labels CSS

Die Eigenschaft wird als statischer Wert gepflegt und bestimmt Aussehen und Druckformat der Etiketten.

.custom-label {
    width: 70mm;
    height: 35mm;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: #fff;
    color: #000;
}

.qr-code {
    flex: 0 0 25mm;
    height: 25mm;
    margin-left: 5mm;
    margin-right: 5mm;
}

.text-container {
    flex: 1;
    font-size: 8pt;
}

.text-container p {
    margin: 0;
}

@media print {
    @page {
        size: 70mm 35mm;
        margin: 0;
    }
    body {
        margin: 0;
        padding: 0;
    }
    .custom-label {
        width: 70mm;
        height: 35mm;
        page-break-after: always;
    }
}

Zu beachten:

• @page size bestimmt das Etikettenformat, margin: 0 verhindert zusätzliche Ränder. Für den Druck auf A4-Etikettenbögen wird stattdessen size: A4 gesetzt und die Etiketten werden über ein Raster angeordnet.
• page-break-after: always erzeugt eine Seite je Etikett – bei Etikettendruckern entspricht eine Seite einem Etikett.
• .qr-code benötigt eine feste Größe. Die erzeugte QR-Grafik füllt den Container aus.
• Der Abstand um den QR-Code (hier margin-left und margin-right) ist die Ruhezone des Codes und sollte nicht entfallen.
• Ohne Angabe einer font-family verwendet der Browser seine Standardschrift. Für ein einheitliches Druckbild sollte eine Schriftart gesetzt werden.
• Rahmen und Farbflächen werden nur gedruckt, wenn im Druckdialog Hintergrundgrafiken aktiviert ist. Unabhängig davon lässt sich das über print-color-adjust: exact erzwingen.

QR Options

Die Eigenschaft erwartet ein Objekt und wird als berechnete Eigenschaft gepflegt. Im Auslieferungszustand:

return {
    ecl: "L"
}

Alle angegebenen Werte überschreiben die Voreinstellungen des Steuerelements. Zur Verfügung stehen:

• ecl – Fehlerkorrekturstufe L, M, Q oder H (Voreinstellung H). Eine niedrigere Stufe benötigt weniger Module, die Punkte werden dadurch größer und auf kleinen Etiketten zuverlässiger lesbar. Eine höhere Stufe verkraftet mehr Verschmutzung und Kratzer.
• width und height – Kantenlänge der Zeichenfläche in Pixel (Voreinstellung 256). Da das Steuerelement container: "svg-viewbox" verwendet, skaliert die Grafik auf den CSS-Container; die Werte bestimmen nur das interne Koordinatensystem.
• padding – Ruhezone in Modulen (Voreinstellung 0, Standard der Bibliothek 4). Bei 0 muss der Abstand über CSS kommen.
• color und background – Vorder- und Hintergrundfarbe (#000000 und #ffffff).
• typeNumber – Mindestversion des QR-Codes (Standard 4). Reicht die Version für den Inhalt nicht aus, erhöht die Bibliothek sie automatisch.
• container – Ausgabeform: svg, svg-viewbox, g oder none (Voreinstellung svg-viewbox).
• join – fasst alle Module zu einem einzigen Pfad zusammen (Voreinstellung true). Das ergibt deutlich kleinere Grafiken und ein saubereres Druckbild.
• swap – vertauscht X- und Y-Achse (false).
• pretty – formatierte Ausgabe mit Einrückungen (true).
• xmlDeclaration – stellt der Ausgabe eine XML-Deklaration voran (true). Für die Einbettung in die Vorschau nicht erforderlich.
• predefined – definiert das Modul einmal und referenziert es über <use> (false). Nur in Kombination mit join: false sinnvoll.

Der Inhalt des QR-Codes wird nicht über diese Eigenschaft gesetzt, sondern stammt je Etikett aus dem Attribut data-qr-content im Label-HTML.

Die Erzeugung erfolgt über die Bibliothek qrcode-svg 1.1.0 (MIT).