Read and apply toggle sets

Read a toggle set that is configured in the current design, and apply its toggles to switch style, visibility, text, or font values from your own controls.

Prerequisites

• A toggle set configured in the design. See Creating toggle sets.
• A running Headless Editor with a design loaded. See Build a Headless Editor customization page.

Get the toggle set

Call getCurrentDesignToggleSet() to retrieve the toggle set of the current design.

import type { ToggleSet } from "@aurigma/workflow-elements/headless-editor";

const toggleSet: ToggleSet = await editor.getCurrentDesignToggleSet();

for (const toggle of toggleSet.toggles) {
  console.log(`Toggle: ${toggle.name} (${toggle.type})`);

  for (const param of toggle.params) {
    console.log(`  - ${param.label}`);
  }
}

Each returned toggle has a type — "text", "color", "font", or "visibility" — and a params array with the available values.

Apply a toggle

Apply a toggle by its ID and the label of the value to use. applyToggleToCurrentDesign() returns the updated ToggleSet.

const colorToggle = toggleSet.toggles.find(toggle => toggle.type === "color");

if (colorToggle) {
  await editor.applyToggleToCurrentDesign(
    colorToggle.id,
    colorToggle.params[0].label,
  );
}

For "color", "font", and "visibility" toggles, pass only the toggle ID and the value label.

Apply custom text to a text toggle

When a text toggle accepts an arbitrary value, pass the text as the third argument.

const textToggle = toggleSet.toggles.find(toggle => toggle.name === "Custom Greeting");

if (textToggle) {
  await editor.applyToggleToCurrentDesign(
    textToggle.id,
    textToggle.params[0].label,
    "Happy Birthday, Alex!",
  );
}

The third argument overrides the predefined text of the matched parameter.

Next steps

• ToggleSet — the toggle set model.
• Toggle — the toggle model.
• ToggleType — the toggle type values.
• ToggleParamsMap — the parameter shapes per toggle type.