Label Creator

Description

The Label Creator produces asset labels directly in Matrix42. Labels are designed as HTML with CSS, shown as a preview inside the wizard and sent to the printer through the browser's print dialog – to a label printer just as well as to A4. Scanning the QR code on the label opens the preview of the corresponding asset.

Scope of the extension

After installation the following is available:

• the Create Label action in the Assets application
• the MTX Label Wizard and MTX Label Wizard Workplace wizards
• the MTX Label Creator control in the Layout Designer toolbox

Creating a label

First check that the required data is maintained on the asset: name (or computer name as a fallback), serial number and inventory number.

Select one or more assets and run the Create Label action.

The wizard opens with a preview of the labels and a Print Labels button. The preview shows the label exactly as it will be printed. Clicking the button opens the browser's print dialog; no further input is required.

If several assets are selected, one label is created per asset. The preview shows all labels below one another, and the print dialog shows one page per label.

Configuration

Configuration is done in the wizard's Layout Designer. Under Administration > User Interface > Layouts > Wizards, open the quick view of the wizard and start the Layout Designer with Change Layout. Both wizards are configured in the same way.

The layout contains the MTX Label Creator control. When it is selected, the properties panel on the right shows five properties:

• Label HTML (required) – the HTML of the labels
• Labels CSS – appearance and print format
• Show print button – shows or hides the print button
• Print button text – the button caption, Print Labels by default
• QR Options – settings for QR code generation

After every change the wizard has to be saved or published for the changes to take effect.

Label HTML

The property expects an array of strings – one entry per label. Out of the box it is bound to the calculated property Context > labelsHtml :: StringType[], which is edited in Advanced Mode.

The following variables are available there, all marked as Watchable:

• assets – custom_Assets.SPSAssetClassBase
• name, computerName, serialNumber, inventoryNumber – the corresponding asset fields
• expressionObjectID – the object ID used in the QR link
• 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;

Notes on the expression:

• The part of the current address up to /wm/app-Assets is reused, so the QR link automatically points to the environment being worked in – test and production need no separate configuration.
• If no Name is maintained on the asset, ComputerName is used instead.
• viewOptions makes the scan open the preview of the asset.
• Every label must contain an element with the class qr-code and the attribute data-qr-content. The control replaces its content with the generated QR graphic.
• Company name, logo or additional fields are added to the template at this point.

Labels CSS

This property is maintained as a static value and defines the appearance and print format of the labels.

.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;
    }
}

Points to watch:

• @page size defines the label format and margin: 0 prevents additional margins. To print onto A4 label sheets, use size: A4 instead and arrange the labels in a grid.
• page-break-after: always produces one page per label – on a label printer one page equals one label.
• .qr-code needs a fixed size. The generated QR graphic fills the container.
• The spacing around the QR code (here margin-left and margin-right) is the code's quiet zone and should not be removed.
• Without a font-family the browser falls back to its default font. Set a typeface for a consistent print result.
• Borders and colour areas are only printed when Background graphics is enabled in the print dialog. This can also be enforced with print-color-adjust: exact.

QR Options

This property expects an object and is maintained as a calculated property. Out of the box:

return {
    ecl: "L"
}

Any value given here overrides the control's defaults. The following options are available:

• ecl – error correction level L, M, Q or H (default H). A lower level needs fewer modules, which makes the dots larger and more reliably readable on small labels. A higher level tolerates more dirt and scratches.
• width and height – edge length of the drawing area in pixels (default 256). Since the control uses container: "svg-viewbox", the graphic scales to its CSS container and these values only define the internal coordinate system.
• padding – quiet zone in modules (default 0, library default 4). At 0 the spacing has to come from CSS.
• color and background – foreground and background colour (#000000 and #ffffff).
• typeNumber – minimum QR version (default 4). If the version is not sufficient for the content, the library raises it automatically.
• container – output form: svg, svg-viewbox, g or none (default svg-viewbox).
• join – merges all modules into a single path (default true). This produces much smaller graphics and a cleaner print result.
• swap – swaps the X and Y axis (false).
• pretty – formatted output with indentation (true).
• xmlDeclaration – prefixes the output with an XML declaration (true). Not required for embedding into the preview.
• predefined – defines the module once and references it via <use> (false). Only useful together with join: false.

The QR code content is not set through this property; it comes from the data-qr-content attribute of each label in the label HTML.

Generation is handled by the qrcode-svg 1.1.0 library (MIT).