Custom editor buttons

The editor footer normally shows two buttons: Get E-proof (only if your license includes proofreadings) and Continue, which starts the final verification. You can replace them with up to five buttons of your own — for example Save progress, Download preview or Save and back to shop — each with its own style, function and labels per language.

TIP

Example: Custom editor buttons · source

Define the buttons

Each button is an EditorButton:

Field	Type	Meaning
`style`	`'Primary'` \| `'Secondary'`	Primary buttons are filled with the primary button colour; secondary buttons have the secondary colour as background and a primary-coloured border and text (colours: Admin Portal → Settings → Print editor → Customization).
`function`	EditorButtonFunction	What the button does — see Button functions.
`labels`	`{ language, text }[]`	The button text per language. At least one entry.

The buttons appear in the footer in the order you list them.

JavaScriptJSON

window.tronDesigner
  .setExactProduct('PFC', undefined, (product) => product.addVariant('10086021'))
  .addExactPrinting('front', 'PAD03')
  .setEditorButtons([
    {
      style: 'Secondary',
      function: 'Save',
      labels: [
        { language: 'en', text: 'Save progress' },
        { language: 'de', text: 'Fortschritt speichern' },
      ],
    },
    {
      style: 'Primary',
      function: 'FinalConfirm',
      labels: [
        { language: 'en', text: 'Confirm design' },
        { language: 'de', text: 'Design bestätigen' },
      ],
    },
  ])
  .open({ mode: 'dialog' });

window.tronDesigner.openDesigner(
  {
    openMode: 'Create',
    dataMode: 'Exact',
    printJob: {
      addProducts: { supplierCode: 'PFC', variants: [{ productCode: '10086021' }] },
      addPrintings: [{ printPositionCode: 'front', printTechnologyCode: 'PAD03' }],
    },
    editor: {
      buttons: [
        { style: 'Secondary', function: 'Save', labels: [{ language: 'en', text: 'Save progress' }] },
        { style: 'Primary', function: 'FinalConfirm', labels: [{ language: 'en', text: 'Confirm design' }] },
      ],
    },
  },
  { mode: 'dialog' }
);

setEditorButtons(buttons) replaces the whole list; addEditorButton(button) appends one button. Both write editor.buttons, which you can also put in data-td-options. There are no individual data attributes for buttons.

Button functions

Function	What it does	Saves the print job	Closes the editor
`FinalConfirm`	Opens the Final Verification dialog — the same as the default Continue button. After Final Confirm the editor saves the print job and runs the result action.	yes, after the verification	depends on the result action
`SaveAndClose`	Saves the current design without the final verification, then closes the editor.	yes	yes — `'Confirmed'`, only if the print job was saved
`Save`	Saves the current design without the final verification; the editor stays open.	yes	no
`GenerateProofreading`	Saves the design, generates the proofreading PDF and shows it in a preview dialog — the same as the default Get E-proof button.	yes	no
`DownloadProofreadingAndClose`	Saves the design, generates the proofreading PDF, downloads it as `<printJobGuid>.pdf` and closes the editor.	yes	yes — `'Confirmed'`
`DownloadPreviewImage`	Downloads a JPG preview of the selected printing on the selected product variant.	no	no
`DownloadVisualization`	Downloads a JPG 2D visualization of the selected printing and variant. Disabled when none is available.	no	no
`DownloadAllPreviews`	Downloads a ZIP with a preview of every printing on every variant (one folder per printing).	no	no
`DownloadAllVisualizations`	Downloads a ZIP with every available 2D visualization. Disabled when none is available.	no	no

The downloads are generated in the browser from the current design; they don't create or change the print job. The visualization buttons need 2D visualizations to be enabled for your instance and to exist for the product and printing.

FinalConfirm is the only way to reach the final verification and the result action. If you leave it out, the customer can still save with Save / SaveAndClose, but never confirms the print job.

Labels and languages

The editor shows the label for its current language (the customer can switch languages in the editor header), falls back to the en label, and then to the first label. Use ISO 639-1 codes of languages TronDesigner supports, such as en, de, fr, cs (not cz); matching ignores case.

Limits and validation

The builder methods check the buttons and throw an Error synchronously when they're invalid:

Check	Error message
More than 5 buttons (`setEditorButtons`), or a sixth `addEditorButton` call	`Editor buttons cannot contain more than 5 buttons.`
`style` other than `Primary` / `Secondary`	`Invalid editor button style "…". Allowed values: Primary, Secondary.`
`function` not in the list above	`Invalid editor button function "…". Allowed values: …`
No `labels`, an empty list, or a label without `language` or `text`	`Editor button "…" needs at least one label, each with a language code and a text.`

Wrap the calls in try / catch if the button definitions come from configuration:

try {
  window.tronDesigner.setEditorButtons(buttonsFromCms);
} catch (error) {
  console.error('Invalid editor buttons, using the defaults', error);
}

The builder doesn't check language codes or duplicate functions, and nothing is checked when you pass editor.buttons in JSON (openDesigner, data-td-options, token links). Make sure that:

every button has at least one label with a supported language code — the editor skips labels with an unknown code or no text (with a console warning), and a button without a usable label shows a default caption (Continue, Get E-proof or the function name, e.g. Save And Close);
function is spelled exactly — an unknown function renders a button that does nothing;
the list isn't empty — buttons: [] removes all footer buttons, including Continue.

Buttons from the Admin Portal

You can also configure the buttons without code in the Admin Portal: Settings → Print editor → Customization → Editor Buttons, switch Use custom editor buttons on and add up to five buttons (each function once).

The editor uses the first of these that applies:

editor.buttons from the editor arguments — whenever it's present, even as an empty array;
the Admin Portal buttons, if Use custom editor buttons is on;
the default Get E-proof and Continue buttons.

Buttons, result actions and events

Redirects. SaveAndClose and DownloadProofreadingAndClose close with 'Confirmed' and pass the result action's redirectUrl (from editor.result or the Admin Portal), whatever the result action is. If a redirect URL is set, the script navigates there after your onClose — see Result actions.
Print job events. Save and SaveAndClose fire the print job updated event for a print job opened in Edit mode and created otherwise — also when the print job was already saved earlier in the session (every save is the same create-or-update call, with the same printJobGuid). GenerateProofreading and DownloadProofreadingAndClose save the design too, but fire created only when the print job doesn't exist yet — for an existing print job (Edit mode, or saved earlier in the session) they fire no print job event. See Events and callbacks. Both also fire the proofreading created event with the PDF as a Blob. See Events and callbacks.
Failed saves. SaveAndClose closes the editor (with 'Confirmed' and the redirect) only when the print job was saved. If saving fails, the editor stays open, so the customer doesn't lose the design; the error is only written to the browser console (Save and SaveAndClose show no error message yet). Still take the print job GUID from the event, not from the close.

Custom editor buttons ​

Define the buttons ​

Button functions ​

Labels and languages ​

Limits and validation ​

Buttons from the Admin Portal ​

Buttons, result actions and events ​

See also ​