Skip to main content

IBuilderEditEvent interface

📖 Description​

Event interface for the OnEdit hook, fired when the builder starts or stops editing a certain element.

tip

This event is used when implementing a live form preview.

📃 Type declaration​

interface IBuilderEditEvent {
  builder: Builder;Readonly
  data: {
    action: "start" | "end";
    type: "properties" | "prologue" | "branch" | "section" | "node" | "condition" | "epilogue";
    ref: IPrologue | Branch | Section | Node | Condition | IEpilogue;
    subscribe?: (onChange: (ref: IPrologue | Branch | Section | Node | Condition | IEpilogue) => void) => void;
  }Readonly
}
🖱ī¸ Hover with the mouse over a property name for a tooltip with the description of that property. Click it for more information.

🗃ī¸ Properties​

🏷ī¸ builder​

Contains a reference to the Builder instance that generated the event.

Type​

Builder

🏷ī¸ data​

Contains the data object with information about the edit event. Contains the following properties:

  • action: Contains the type of action. It can be one of the following values:
    • start: Editing begins;
    • end: Editing has ended.
  • type: Contains the type of element being edited. It can be one of the following values:
    • properties: Form properties editor panel;
    • prologue: Prologue editor panel (welcome message);
    • branch: Branch editor panel;
    • section: Section editor panel;
    • node: Node editor panel;
    • condition: Condition editor panel;
    • epilogue: Epilogue editor panel (closing message);
  • ref: Contains a reference to the object being edited;
  • subscribe: Function that can be used to subscribe to changes in the item being edited: 
    event.data.subscribe((ref) => {
        console.log("A property of ref has changed!");
    });

Type​

{
  action: "start" | "end";
  type: "properties" | "prologue" | "branch" | "section" | "node" | "condition" | "epilogue";
  ref: IPrologue | Branch | Section | Node | Condition | IEpilogue;
  subscribe?: (onChange: (ref: IPrologue | Branch | Section | Node | Condition | IEpilogue) => void) => void;
}