TronDesigner - Integration Examples
Docs: Developer documentation  |  Editor arguments

Back to examples

Editor options - the Missing selector behaviour

showSelectedVariants and showSelectedPrintOptions live in the editorOptions block at the root of the editor arguments. They decide whether the editor asks the user to pick variants / print options, or silently uses what the integration sent.

Value showSelectedVariants showSelectedPrintOptions
None (default) The variant selector is shown only when no variants are provided or a provided one is not found - and it then offers only the variants that were found. The print option selector is shown only when no print options are provided or a provided one is not found - and it then offers only the print options that were found.
Selected Only variants provided in arguments are shown; the user can remove them but cannot add new ones. Only print options provided in arguments are shown; the user can remove them but cannot add new ones.
Missing Shown in the same cases as None, but it offers all product variants with the found ones preselected, so the user can replace the missing one. Shown in the same cases as None, but it offers all print options with the found ones preselected.
All The variant selector is always shown with all product variants; the provided ones are preselected. The print option selector is always shown with all print options; the provided ones are preselected.

Missing is the safety net for catalogue drift: as long as every code your shop sends still exists, the user goes straight into the design. As soon as a code disappears - a discontinued colour, a renamed print position - the editor falls back to a selector instead of failing, and unlike None it lets the user pick a replacement from everything the product offers.

Note: the selectors only exist in the Partial data mode. In Exact mode the variant selector is never shown and a code that isn't found is a fatal error; only showSelectedPrintOptions: 'Selected' or 'All' shows a selector there. Edit and View mode ignore these options.

All five scenarios use the same Teak notebook (PFC) with 3 variants and 2 printings. Wrong codes are marked with an XX suffix so they cannot be found in the catalogue. Every button opens a new print job in Create mode.

Editor options applied to all scenarios: Switch the values to compare Missing with None, Selected and All on the same payload.

Last arguments sent to openDesigner()

(no request sent yet)

Print job created from the session

(no print job created yet)

Event log

Waiting for events...

Implementation

Editor arguments with Missing

window.tronDesigner.openDesigner({
    openMode: "Create",
    dataMode: "Partial",                      // selectors are only available in Partial mode
    editorOptions: {
        showSelectedVariants: "Missing",      // None | Selected | Missing | All
        showSelectedPrintOptions: "Missing"   // None | Selected | Missing | All
    },
    printJob: {
        addPrintings: [
            { printPositionCode: "front", printTechnologyCode: "GPE01" },
            { printPositionCode: "back",  printTechnologyCode: "GPE01" }
        ],
        addProducts: {
            supplierCode: "PFC",
            variants: [
                { productCode: "10601321" },   // red
                { productCode: "10601301" },   // white
                { productCode: "10601331" }    // orange
            ]
        }
    }
}, { mode: "dialog" });

Scenario 2 - variant codes that no longer exist

variants: [
    { productCode: "10601321" },     // found
    { productCode: "10601301XX" },   // not found -> triggers the variant selector
    { productCode: "10601331XX" }    // not found
]

Scenarios 3 and 4 - print positions that no longer exist

// one printing wrong -> selector opens, "front" stays preselected
addPrintings: [
    { printPositionCode: "front",  printTechnologyCode: "GPE01" },
    { printPositionCode: "backXX", printTechnologyCode: "GPE01" }
]

// both printings wrong -> selector opens with nothing preselected
addPrintings: [
    { printPositionCode: "frontXX", printTechnologyCode: "GPE01" },
    { printPositionCode: "backXX",  printTechnologyCode: "GPE01" }
]

Scenario 5 - one variant and one printing missing

// both options are evaluated independently -> both selectors open
addProducts: {
    supplierCode: "PFC",
    variants: [
        { productCode: "10601321" },     // found
        { productCode: "10601301" },     // found
        { productCode: "10601331XX" }    // not found -> variant selector
    ]
},
addPrintings: [
    { printPositionCode: "front",  printTechnologyCode: "GPE01" },   // found
    { printPositionCode: "backXX", printTechnologyCode: "GPE01" }    // not found -> print option selector
]

Same options with the JS builder

window.tronDesigner
    .setExactProduct("PFC", undefined, (b) => {
        b.addVariant("10601321");
        b.addVariant("10601301");
        b.addVariant("10601331");
    })
    .addExactPrinting("front", "GPE01")
    .addExactPrinting("back", "GPE01")
    .setDataMode("Partial")                   // after the product setter - it would set Exact
    .setEditorOptions({
        showSelectedVariants: "Missing",
        showSelectedPrintOptions: "Missing"
    })
    .open({ mode: "dialog" });

If editorOptions is omitted entirely, the SDK sends { showSelectedVariants: "None", showSelectedPrintOptions: "None" } - the same applies to each of the two keys individually.