Tutorial: Displaying the Tag and Engraving Lines

After a tag view is created, you can use its setTag, setFont and setLines methods to customize the tag and engraving lines displayed in it.

Each of these functions finishes its operation asynchronously; thus they return a Promise with no data, so use then to execute an action immediately after the operation completes.

The setTag function accepts a special object.

The setFont function accepts one of two values. TagPreview.Font.ENGRAVE for the original engrave font (with limited glyph coverage), and is used by default if setFont is not called. TagPreview.Font.UNICODE for the font with a wide selection of Unicode glyphs.

The parameters of the setLines function are different for single-side and two-side views, as a two-side view allows setting tag data for both sides. The single-side version simply accepts an array of strings, while the two-side version accepts a special object.

// If using a single-side view
sideView.setTag({ tagSku : "02-BN-ZZ-LG" }).then(function() {
    sideView.setFont(TagPreview.Font.UNICODE);
}).then(function() {
    sideView.setLines([ "LINE 1", "LINE 2", "LINE 3" ]);
});

// If using a two-side view
var twoSideTagOptions = {
    tagSku : "02-BN-ZZ-LG",
    doubleSided : true
};

twoSideView.setTag(twoSideTagOptions).then(function() {
    twoSideView.setFont(TagPreview.Font.UNICODE);
}).then(function() {
    twoSideView.setLines({
        side1 : [ "LINE 1", "LINE 2", "LINE 3" ],
        side2 : [ "SIDE 2 LINE 1", "SIDE 2 LINE 2" ],
    });
});

If a tag SKU is set as single-side (the doubleSided flag is not set, or set to false), side 2 text cannot be set, and in this case side 2 shows the tag image instead of engraving lines.

All in one: the setData method

Instead of calling three separate methods, you can use a single method to set all tag data in one go: setData. It accepts an object of different format for single-side and two-side cases.

// If using a single-side view
sideView.setData({
    tag: {
        tagSku : "02-BN-ZZ-LG",
        doubleSided : false
    },

    font: TagPreview.Font.UNICODE,
    lines: [ "LINE 1", "LINE 2", "LINE 3" ]
}).then(function() { ... });

// If using a two-side view
twoSideView.setData({
    tag: {
        tagSku : "02-BN-ZZ-LG",
        doubleSided : true
    },

    font: TagPreview.Font.UNICODE,

    side1: {
        lines: [ "LINE 1", "LINE 2", "LINE 3" ]
    },

    side2: {
        lines: [ "SIDE 2 LINE 1", "SIDE 2 LINE 2" ]
    }
}).then(function() { ... });