TronDesigner – Integration Examples
Docs: Developer documentation  |  Design instructions

Back to examples

Design Instructions

Pass the special custom property EDITOR:DESIGN_INSTRUCTION to show your customer instructions while they design. The editor displays the value as an informational notification labeled Design instructions: at the bottom of the design canvas, before any other informational messages. The instructions apply to the whole print job (all printings).

Create a print job with instructions

Oregon 400 ml - Red
HTML Attribute

data-td-custom-properties

Oregon 400 ml - Red
JS Builder

addCustomProperty()

Oregon 400 ml - Red
JSON

printJob.customProperties

Oregon 400 ml - Red
JSON

Two printings

Instructions apply to the whole print job — the notification stays visible when switching between front and wrap.

Edge cases

Long text
Several sentences — check wrapping and that the canvas stays usable.
Markup in value
HTML / script in the value must never execute. Check how tags and quotes are displayed.
Empty string
Expected: no design instructions notification.
Whitespace only
Value "   ". Docs say only non-empty strings show a notification — check whether an empty notification appears.
Wrong key casing
Key editor:design_instruction. Expected: no notification (key is case-sensitive), stored as a normal custom property.

Edit / View an existing print job

Last created print job:
(none — create one above first)

Edit

Key omitted

Expected: saved instructions are shown again.
Edit

Update instructions

Expected: text from the input above replaces the saved value.
Edit

Empty string

Expected: notification is hidden (and stays hidden on the next "Key omitted" edit).
View

Read-only

Check whether the instructions are shown in View mode.

Event Log

Waiting for events...

Implementation Code

1 — HTML data attribute

<button
    data-td-action="OpenCreate"
    data-td-supplier-code="PFC"
    data-td-product-code="10086021"
    data-td-print-position-code="front"
    data-td-print-technology-code="PAD03"
    data-td-custom-properties='{"EDITOR:DESIGN_INSTRUCTION":"Place your logo in the center of the print area."}'>
    Design your print
</button>

2 — JS builder

window.tronDesigner
    .addCustomProperty('EDITOR:DESIGN_INSTRUCTION', 'Place your logo in the center of the print area.')
    .setExactProduct('PFC', undefined, (p) => p.addVariant('10086021'))
    .addExactPrinting('front', 'PAD03')
    .open({ mode: 'dialog' });

3 — JSON editor arguments

window.tronDesigner.openDesigner({
    openMode: 'Create',
    dataMode: 'Exact',
    printJob: {
        customProperties: {
            'EDITOR:DESIGN_INSTRUCTION': 'Place your logo in the center of the print area.'
        },
        addProducts: { supplierCode: 'PFC', variants: [{ productCode: '10086021' }] },
        addPrintings: [{ printPositionCode: 'front', printTechnologyCode: 'PAD03' }]
    }
}, { mode: 'dialog' });

4 — Update or hide in Edit mode

// Custom properties are merged in Edit mode:
// pass a new value to update, '' to hide, or omit the key to keep the saved value.
window.tronDesigner.openDesigner({
    openMode: 'Edit',
    printJob: {
        printJobGuid: printJobGuid,
        customProperties: { 'EDITOR:DESIGN_INSTRUCTION': '' }
    }
}, { mode: 'dialog' });