TronDesigner - Integration Examples
Docs: Developer documentation  |  Open modes  |  Editor arguments

Back to examples

JSON - Exact (Advanced): adding and removing variants and printings

The basic JSON - Exact example opens the editor once with a fixed product and printing. This example continues from there: the same print job is reopened in Edit mode to grow and shrink its content.

  1. Create - Teak notebook 10601321 (red) with a single front / GPE01 printing. When the print job is created, its GUID is captured from the printJob.created event and the follow-up actions become available.
  2. Add - reopen with openMode: "Edit" plus addProducts / addPrintings for the white 10601301 and orange 10601331 variants and the back / GPE01 printing.
  3. Remove - the same Edit call with removeProducts / removePrintings takes them out again.

Key rule: in Edit mode you send only the delta. Variants and printings that are already part of the print job don't need to be repeated: a variant that is already there only gets its quantity, code and name updated, and a printing that is already there is skipped. New variants and printings are looked up for the print job's supplier, so no supplier is needed. The print job is identified by printJob.printJobGuid.

After every editor session the page calls tronDesigner.getPrintJob(guid) and shows what the print job really contains.

Variant previews appear here
once the print job exists
Step 1

Create print job

Supplier PFC
Variant 10601321 (red)
Printing front / GPE01

Print job GUID:
(not created yet)

Step 2

Product variants

Variant State Action

One openDesigner call can carry several variants at once - the buttons above send both codes in a single addProducts.variants / removeProducts.variants array.

Step 2 / 3

Printings

Printing State Action

A printing is addressed by its printPositionCode + printTechnologyCode pair, both when adding and when removing.

Last arguments sent to openDesigner()

(no request sent yet)

Print job read back with getPrintJob()

(no print job loaded yet)

State tracked by this page

{}

Print job previews (getPrintingImage)

Event log

Waiting for events...

Implementation

1. Create the print job and capture its GUID

const td = window.tronDesigner;
let printJobGuid = null;

td.subscribeDesignerEvent("printJob", "created", (event) => {
    printJobGuid = event.entityGuid;   // event.detail holds the whole print job
});

td.openDesigner({
    openMode: "Create",
    dataMode: "Exact",
    printJob: {
        addPrintings: [
            { printPositionCode: "front", printTechnologyCode: "GPE01" }
        ],
        addProducts: {
            supplierCode: "PFC",
            variants: [ { productCode: "10601321" } ]
        }
    }
}, {
    mode: "dialog",
    onClose: (reason) => console.log("editor closed:", reason)
});

2. Add variants and a printing - Edit mode, delta only

// Add the white and orange variants.
// The red variant already in the print job is NOT listed again.
td.openDesigner({
    openMode: "Edit",
    dataMode: "Exact",
    printJob: {
        printJobGuid: printJobGuid,
        addProducts: {
            supplierCode: "PFC",
            variants: [
                { productCode: "10601301" },
                { productCode: "10601331" }
            ]
        }
    }
}, { mode: "dialog" });

// Add the back printing. The existing front printing is NOT listed again.
td.openDesigner({
    openMode: "Edit",
    dataMode: "Exact",
    printJob: {
        printJobGuid: printJobGuid,
        addPrintings: [
            { printPositionCode: "back", printTechnologyCode: "GPE01" }
        ]
    }
}, { mode: "dialog" });

3. Remove variants and printings

// removeProducts takes variants only - the supplier is already known
td.openDesigner({
    openMode: "Edit",
    dataMode: "Exact",
    printJob: {
        printJobGuid: printJobGuid,
        removeProducts: {
            variants: [ { productCode: "10601331" } ]
        }
    }
}, { mode: "dialog" });

// removePrintings addresses the printing by position + technology
td.openDesigner({
    openMode: "Edit",
    dataMode: "Exact",
    printJob: {
        printJobGuid: printJobGuid,
        removePrintings: [
            { printPositionCode: "back", printTechnologyCode: "GPE01" }
        ]
    }
}, { mode: "dialog" });

Same operations with the JS builder

td.setPrintJob(printJobGuid, "Edit")             // openMode + printJobGuid
  .setDataMode("Exact");                         // setPrintJob() sets no data mode - Exact keeps the structure fixed
td.addProductVariantsToPrintJob({ productCode: "10601301" },
                                { productCode: "10601331" });
td.addPrintingToPrintJob("back", "GPE01");
td.open({ mode: "dialog" });

td.setPrintJob(printJobGuid, "Edit").setDataMode("Exact");
td.removeProductVariantsFromPrintJob(["10601301", "10601331"]);
td.removePrintingFromPrintJob("back", "GPE01");
td.open({ mode: "dialog" });

Reading the result back

const printJob = await td.getPrintJob(printJobGuid);

printJob.product.variants.forEach(v => console.log(v.codeSupplier, v.title));
printJob.printings.forEach(p => console.log(p.printingGuid, p.printData));

// Preview of one printing on one variant (product with the designed motive)
const blob = await td.getPrintingImage(printJobGuid, printJob.printings[0].printingGuid, '10601321');
document.getElementById('preview').src = URL.createObjectURL(blob);