Step configuration form

Connect a custom step configuration form through Senler Bridge.

First create a step and select an embedded-page configuration mode.

Configure the embedded page if needed

If you selected Settings builder, a custom form is not needed. Continue to handling the webhook.

For Embedded page in the panel and Embedded page in a dialog, the cabinet opens the page URL with version 2 bootstrap parameters (senler_mode=automation_step_configurator, theme, and language) and connects Senler Bridge.

context.launch contains the automation_step_configurator type, application, project, installation, automation, and node IDs, step data (id, name, and continuation_mode), the saved configuration object, and the current branches. Register a save handler:

import { createSenlerBridgeClient } from "@senlerio/bridge";

const allowedParentOrigins = new Set(["https://senler.io", "https://aibot.local"]);
const parentOrigin = new URL(document.referrer).origin;
if (!allowedParentOrigins.has(parentOrigin)) {
  throw new Error("Unknown Senler parent origin");
}

const bridge = createSenlerBridgeClient({ parentOrigin });
const context = await bridge.connect();

if (context.launch.type !== "automation_step_configurator") {
  throw new Error("Expected automation step configurator launch");
}

const savedConfiguration = context.launch.configuration;

const currentBranchIds = new Map(
  context.launch.branches.map((branch) => [branch.key, branch.branch_id]),
);
const branchId = (key) => currentBranchIds.get(key) ?? crypto.randomUUID();

const unsubscribeSubmit = bridge.onAutomationStepConfiguratorSubmit(
  async () => ({
    kind: "automation_step_configurator",
    configuration: {
      ...savedConfiguration,
      pipeline_id: "sales",
    },
    branches: [
      { branch_id: branchId("created"), key: "created", title: "Deal created" },
      { branch_id: branchId("skipped"), key: "skipped", title: "Creation skipped" },
    ],
  }),
);

Height synchronization is enabled in createSenlerBridgeClient by default. The Cabinet uses it for Embedded page in the panel mode; a dialog manages its own height. Disable syncFrameSize only for a deliberately fixed-height form: createSenlerBridgeClient({ parentOrigin, syncFrameSize: false }).

Saving form data

configuration is stored in the node and sent to the webhook every time the step runs. When the form opens, it also contains four reserved fields: _senler_parameters and _senler_result_fields describe the declared contract, while _senler_parameter_values and _senler_result_bindings contain current parameter values and result-to-run-variable bindings. Render them in your form and return updated _senler_parameter_values and _senler_result_bindings with the rest of the configuration. Senler saves only values for declared fields and sends them to the webhook separately in parameters; reserved keys are not included in the webhook configuration.

For Branches after setup, return at least one branch with stable branch_id and key values. On subsequent opens, use context.launch.configuration and context.launch.branches so saved values and graph edges are retained.

If the handler throws or returns invalid data, the cabinet does not save the configuration. Call unsubscribeSubmit() and bridge.destroy() when the page unmounts.