Open modes

The open mode (openMode) decides whether the editor creates a new print job, edits or shows an existing one, or only opens the logo dialog. Read this page when you let customers change a design from the cart or show a design in the order history.

TIP

Examples: Edit mode (source) · View mode (source) · Add and remove variants and printings (source)

Open mode	`printJobGuid`	What the editor does	`data-td-action`	Builder
`Create`	must not be set	Creates a new print job from the product data	`OpenCreate`	set by the product and printing setters
`Edit`	required	Loads a print job; the customer changes the design, you can add or remove variants and printings	`OpenEdit`	`setPrintJob(guid, 'Edit')`
`View`	required	Shows a print job read-only	`OpenView`	`setPrintJob(guid)` or `setPrintJob(guid, 'View')`
`OpenGallery`	—	Opens only the logo dialog on the customer's logos	—	`openLogoGallery(options)`
`OpenUpload`	—	Opens only the logo dialog on the upload tab	—	`openLogoUpload(options)`

In JSON the values are PascalCase and case-sensitive ("Edit", not "EDIT"). The HTML attribute data-td-action takes its own values OpenCreate, OpenEdit and OpenView, which the script translates. Any other value (such as Create or opencreate) isn't recognized: the element is ignored without a message.

If the open mode and printJobGuid don't fit together (a GUID in Create mode, no GUID in Edit or View mode), the editor shows an error and doesn't continue — see Editor arguments.

Create a new print job

Create is what you get from the product setters, from data-td-action="OpenCreate" and from JSON with "openMode": "Create". What you have to send depends on the data mode.

When the editor saves the new print job for the first time (for example when the customer confirms the design), it fires the printJob / created event; later saves fire created or updated (see Events and callbacks), always with the same GUID. Store the GUID with your cart item or order line — you need it to open the print job again:

window.tronDesigner.subscribeDesignerEvent('printJob', 'created', (event) => {
  saveToCartItem(event.entityGuid); // the print job GUID, also in event.detail.printJobGuid
});

More about events in Events and callbacks.

Open an existing print job

Pass the GUID and Edit to let the customer continue with the design:

HTMLJavaScriptJSON

html

<button data-td-action="OpenEdit" data-td-print-job-guid="6f0b1c9e-2f53-4a5b-9d0e-3c1f8a7b2d44">
  Edit your design
</button>

window.tronDesigner.setPrintJob(printJobGuid, 'Edit').open({ mode: 'dialog' });

window.tronDesigner.openDesigner(
  { openMode: 'Edit', printJob: { printJobGuid: printJobGuid } },
  { mode: 'dialog' }
);

The editor loads the print job with its product, variants, printings and design. No selection dialog is shown and editorOptions has no effect.
When the customer saves, the editor fires printJob / updated instead of created. Generating a proofreading fires no print job event in this mode.
setPrintJob() clears products and printings set on the builder before; call it first.

Change an existing print job

In Edit mode you can change the print job before the customer sees it. Send only the changes — the variants and printings already in the print job aren't repeated:

JavaScriptJSON

window.tronDesigner
  .setPrintJob(printJobGuid, 'Edit')
  .setDataMode('Exact')
  .addProductVariantsToPrintJob({ productCode: '10601301' }, { productCode: '10601331' })
  .addPrintingToPrintJob('back', 'GPE01')
  .removeProductVariantFromPrintJob('10601321')
  .open({ mode: 'dialog' });

window.tronDesigner.openDesigner(
  {
    openMode: 'Edit',
    dataMode: 'Exact',
    printJob: {
      printJobGuid: printJobGuid,
      addProducts: { variants: [{ productCode: '10601301' }, { productCode: '10601331' }] },
      addPrintings: [{ printPositionCode: 'back', printTechnologyCode: 'GPE01' }],
      removeProducts: { variants: [{ productCode: '10601321' }] },
    },
  },
  { mode: 'dialog' }
);

You send	The editor
a variant in `addProducts.variants` that isn't in the print job	adds it to the print job and to all its printings
a variant that is already in the print job	updates the quantity, displayed code and name you send (`quantity`, `overrides.productCode`, `overrides.productName`); values you leave out keep their saved values
`removeProducts.variants`	removes those variants
a printing in `addPrintings` that isn't in the print job	adds it with its own `logo`, or else `printJob.logo`; the customer then designs it (and sets up the background if TronCloud has no mockup)
a printing that is already in the print job	skips it
`removePrintings`	removes those printings
`title`, `customer`, `customProperties`	replaces the title, updates the customer and order fields you send, merges the custom properties

New variants and printings are looked up in TronCloud for the print job's supplier, so you don't send a supplier. If a code isn't found, the editor shows an error.
Removing all variants or all printings is an error (Cannot remove all printings or product variants).
Codes to remove that aren't in the print job are ignored with a warning in the console.
A print job created in Own data mode opens in Edit and View mode with its saved product and printings, but you can't add variants or printings to it: there's no TronCloud supplier to look them up, so the editor shows No products found.

NOTE

The print job doesn't store its data mode. In Edit mode the editor uses the dataMode you send, and Partial if you send none — then the customer can add and remove printings inside the editor. Send "dataMode": "Exact" to keep the printings fixed. setPrintJob() doesn't set a data mode, so Edit sessions opened with the builder use Partial unless you add setDataMode('Exact'), as in the example above.

Show a print job read-only

View mode shows the saved design without letting the customer change it — for order history, approvals or your back office:

HTMLJavaScriptJSON

html

<button data-td-action="OpenView" data-td-print-job-guid="6f0b1c9e-2f53-4a5b-9d0e-3c1f8a7b2d44">
  Show design
</button>

window.tronDesigner.setPrintJob(printJobGuid).open({ mode: 'dialog' }); // 'View' is the default

window.tronDesigner.openDesigner(
  { openMode: 'View', printJob: { printJobGuid: printJobGuid } },
  { mode: 'dialog' }
);

The editor loads the print job with its product, printings and design. The customer can switch between the printings but can't select, move, edit or delete design objects, and the print job can't be saved.
Changes aren't allowed: if addProducts.variants, removeProducts.variants, addPrintings or removePrintings contains an entry, the editor shows Invalid arguments - product variants and printings cannot be added or removed in View mode. Empty arrays are fine.

Open the logo gallery or upload

OpenGallery and OpenUpload don't open a print job; they show only the logo dialog, and the logo the customer picks or uploads becomes their selected logo. Use openLogoGallery and openLogoUpload, or openMode with an empty printJob: {}. See Logos.

Open modes ​

Create a new print job ​

Open an existing print job ​

Change an existing print job ​

Show a print job read-only ​

Open the logo gallery or upload ​