JavaScript events 

Lifecycle 

Ajax / data transfer 

Application state 

Form element lifecycle 

Collection elements (validators / finishers) 

Insert element / page dialogs 

Header buttons 

Stage 

Inspector 

Structure tree 

Dialogs (modals) 

view/ready 

Published once all additional view-model modules registered via dynamicJavaScriptModules.additionalViewModelModules have bootstrapped. EXT:form uses this event to remove the loading indicator and finish editor initialisation. This is the earliest safe point to interact with the fully wired editor.

Arguments

none

export function bootstrap(formEditorApp) {
    formEditorApp.getPublisherSubscriber().subscribe('view/ready', () => {
        // Safe to call any formEditorApp API here.
    });
}

core/ajax/saveFormDefinition/success 

Published after the form definition was saved successfully. EXT:form shows a success flash message, updates the in-memory form definition and re-renders all components.

Arguments

 

core/ajax/saveFormDefinition/error 

Published when the save Ajax request returns a server-side error.

Arguments

 

core/ajax/renderFormDefinitionPage/success 

Published after the preview Ajax request returns successfully. EXT:form uses this to display the rendered form HTML in the preview stage.

Arguments

 

core/ajax/error 

Published when any Ajax request (save or preview render) fails at the HTTP level. EXT:form shows an error flash message and displays the raw error in the preview area.

Arguments

 

core/applicationState/add 

Published every time an action (add / remove / move element or collection element) is pushed onto the undo/redo stack. EXT:form uses this to enable or disable the undo/redo buttons.

Arguments

 

core/currentlySelectedFormElementChanged 

Published at the end of formEditorApp.setCurrentlySelectedFormElement(). All components that need to react to a selection change (inspector, stage, tree highlight) subscribe to this event.

Arguments

 

core/formElement/somePropertyChanged 

Published by the FormElement model whenever a property is written via set(). EXT:form uses this to keep the tree labels, stage and inspector in sync. It is also the mechanism behind FormElement.on().

Arguments

 

export function bootstrap(formEditorApp) {
    formEditorApp.getPublisherSubscriber().subscribe(
        'core/formElement/somePropertyChanged',
        (topic, args) => {
            const [propertyPath, newValue, oldValue, identifierPath] = args;
            if (propertyPath === 'label' && identifierPath?.startsWith('my-form/page-1/')) {
                console.log('Label changed from', oldValue, 'to', newValue);
            }
        },
    );
}

view/formElement/inserted 

Published after a new form element has been added to the form definition tree. EXT:form selects the new element and re-renders tree, stage and inspector.

Arguments

 

view/formElement/moved 

Published after a form element has been moved within the tree. EXT:form does not add additional behaviour here by default.

Arguments

 

view/formElement/removed 

Published after a form element has been removed. EXT:form selects the parent element and re-renders tree, stage and inspector.

Arguments

 

view/collectionElement/new/added 

Published after a new validator or finisher has been created and added to the form definition. EXT:form re-renders the inspector.

Arguments

 

view/collectionElement/moved 

Published after a validator or finisher has been reordered. EXT:form re-renders the inspector.

Arguments

 

view/collectionElement/removed 

Published after a validator or finisher has been removed from the form definition. EXT:form re-renders the inspector.

Arguments

 

view/insertElements/perform/before 

Published when the user selects an element type in the "New element" dialog after clicking the "Before" toolbar option. EXT:form creates the new element and moves it before the currently selected element.

Arguments

 

view/insertElements/perform/after 

Published when the user selects an element type after clicking the "After" toolbar option or the standard toolbar button for non-composite elements. EXT:form creates the element and moves it after the selected element (as a sibling).

Arguments

 

view/insertElements/perform/inside 

Published when the user selects an element type after clicking the "Inside" toolbar option on a composite element (e.g. Fieldset). EXT:form creates the element as a child of the currently selected composite.

Arguments

 

view/insertElements/perform/bottom 

Published when the user selects an element type after clicking the "Create new element" button at the very bottom of the stage in abstract view. EXT:form appends the element as the last child of the current page.

Arguments

 

view/insertPages/perform 

Published when the user selects a page type in the "New page" dialog. EXT:form creates the page after the currently selected page.

Arguments

 

view/header/button/save/clicked 

Published when the "Save" button is clicked. EXT:form either opens a validation-error dialog (if there are errors) or saves the form definition.

Arguments

none

view/header/button/close/clicked 

Published when the "Close" button is clicked and the form has unsaved changes. EXT:form opens a confirmation dialog.

Arguments

none

view/header/button/newPage/clicked 

Published when the "New page" icon in the header is clicked. EXT:form opens the "New page" dialog.

Arguments

 

view/header/formSettings/clicked 

Published when the "Form settings" button is clicked. EXT:form selects the root form element and renders its settings in the inspector.

Arguments

none

view/undoButton/clicked 

Published when the undo button is clicked. EXT:form steps back one state in the undo/redo stack and re-renders all components.

Arguments

none

view/redoButton/clicked 

Published when the redo button is clicked. EXT:form steps forward one state in the undo/redo stack and re-renders all components.

Arguments

none

view/viewModeButton/abstract/clicked 

Published when the "Abstract view" toggle in the stage header is clicked. EXT:form switches to abstract view if not already active.

Arguments

none

view/viewModeButton/preview/clicked 

Published when the "Preview" toggle in the stage header is clicked. EXT:form switches to preview view if not already active.

Arguments

none

view/paginationNext/clicked 

Published when the "next page" arrow in the stage header is clicked. EXT:form advances to the next form page.

Arguments

none

view/paginationPrevious/clicked 

Published when the "previous page" arrow in the stage header is clicked. EXT:form goes back to the previous form page.

Arguments

none

view/stage/abstract/render/template/perform 

The primary extension point for custom stage rendering.

Published by the Stage component for each form element that has a formEditorPartials entry in the prototype configuration. Form elements without a formEditorPartials entry are rendered automatically by the <typo3-form-form-element-stage-item> web component — no subscriber is needed for those.

Arguments

 

Full example — custom element with a dedicated stage partial:

Fluid partial (EXT:my_extension/Resources/Private/Backend/Partials/FormEditor/Stage/MyCustomElement.html):

<div class="formeditor-element-body">
    <div data-identifier="elementLabel"></div>
    <div data-identifier="elementSummary"></div>
</div>

Prototype YAML configuration:

prototypes:
  standard:
    formEditor:
      dynamicJavaScriptModules:
        additionalViewModelModules:
          10: '@vendor/my-extension/backend/form-editor/view-model.js'
      formEditorPartials:
        FormElement-MyCustomElement: 'Stage/MyCustomElement'
      formEditorFluidConfiguration:
        partialRootPaths:
          100: 'EXT:my_extension/Resources/Private/Backend/Partials/FormEditor/'

JavaScript module:

export function bootstrap(formEditorApp) {
    formEditorApp.getPublisherSubscriber().subscribe(
        'view/stage/abstract/render/template/perform',
        (topic, args) => {
            const [formElement, template] = args;

            if (formElement.get('type') !== 'MyCustomElement') {
                return;
            }

            const labelEl = template.querySelector('[data-identifier="elementLabel"]');
            if (labelEl) {
                labelEl.textContent =
                    formElement.get('label') || formElement.get('identifier');
            }

            const summaryEl = template.querySelector('[data-identifier="elementSummary"]');
            if (summaryEl) {
                summaryEl.textContent =
                    formElement.get('properties.myCustomProperty') ?? '';
            }
        },
    );
}

view/stage/abstract/render/preProcess 

Published immediately before the abstract stage area is re-rendered.

Arguments

none

view/stage/abstract/render/postProcess 

Published immediately after the abstract stage area has been rendered. EXT:form uses this to re-render the undo/redo buttons and apply validation error highlights.

Arguments

none

view/stage/preview/render/postProcess 

Published after the preview stage area has been rendered. EXT:form uses this to re-render the undo/redo buttons.

Arguments

none

view/stage/element/clicked 

Published when a form element in the abstract stage is clicked. EXT:form selects the element, shows its toolbar and re-renders the inspector.

Arguments

 

view/stage/panel/clicked 

Published when the stage panel header or background area is clicked (not on a specific form element).

Arguments

none

view/stage/abstract/button/newElement/clicked 

Published when the "Create new element" button at the bottom of the stage (in abstract view) is clicked. EXT:form opens the "New element" dialog configured to insert at the bottom of the current page.

Arguments

 

view/stage/abstract/elementToolbar/button/newElement/clicked 

Published when the "Add element" button or split-button ("Before", "After", "Inside") in the per-element toolbar is clicked. EXT:form opens the "New element" dialog with the appropriate target event.

Arguments

 

view/stage/abstract/dnd/start 

Published when a drag operation begins in the abstract stage. EXT:form adds CSS classes to highlight the dragged element.

Arguments

 

view/stage/abstract/dnd/change 

Published on each positional change during a drag operation in the stage (SortableJS onChange). EXT:form applies hover CSS classes.

Arguments

 

view/stage/abstract/dnd/update 

Published at the end of a drag operation when the element was dropped in a new position (SortableJS onEnd). EXT:form calls moveFormElement() to persist the new order.

Arguments

 

view/stage/abstract/dnd/stop 

Published after the drag operation completes and all model updates are done. EXT:form re-renders tree, stage and inspector and selects the moved element.

Arguments

 

view/inspector/editor/insert/perform 

Extension point for custom inspector editors.

Published after each inspector editor has been rendered (both for form elements and for collection elements). Use args[0].templateName to identify which editor is being rendered and apply custom logic.

Arguments

 

Example — register a custom inspector editor:

Prototype YAML:

prototypes:
  standard:
    formEditor:
      dynamicJavaScriptModules:
        additionalViewModelModules:
          10: '@vendor/my-extension/backend/form-editor/view-model.js'
      formEditorPartials:
        Inspector-MyCustomEditor: 'Inspector/MyCustomEditor'
      formEditorFluidConfiguration:
        partialRootPaths:
          100: 'EXT:my_extension/Resources/Private/Backend/Partials/FormEditor/'
    formElementsDefinition:
      Text:
        formEditor:
          editors:
            600:
              templateName: 'Inspector-MyCustomEditor'
              myOption: 'example'

JavaScript module:

export function bootstrap(formEditorApp) {
    formEditorApp.getPublisherSubscriber().subscribe(
        'view/inspector/editor/insert/perform',
        (topic, args) => {
            const [editorConfiguration, editorHtml] = args;

            if (editorConfiguration.templateName !== 'Inspector-MyCustomEditor') {
                return;
            }

            // Wire up your custom editor UI inside editorHtml
            const input = editorHtml.querySelector('.my-custom-input');
            if (input) {
                input.addEventListener('change', (e) => {
                    formEditorApp
                        .getCurrentlySelectedFormElement()
                        .set(editorConfiguration.propertyPath, e.target.value);
                });
            }
        },
    );
}

view/inspector/collectionElement/new/selected 

Published when the user selects a new validator or finisher from the select box in the inspector. EXT:form adds the collection element to the form definition and re-renders the inspector.

Arguments

 

view/inspector/collectionElement/existing/selected 

Published when the user expands an existing validator or finisher row in the inspector. EXT:form renders that element's sub-editors.

Arguments

 

view/inspector/collectionElements/dnd/update 

Published when a validator or finisher is reordered via drag-and-drop inside the inspector (SortableJS onEnd). EXT:form moves the element in the form definition.

Arguments

 

view/inspector/removeCollectionElement/perform 

Published by the RequiredValidatorEditor when its checkbox is unchecked. EXT:form removes the NotEmpty validator from the form definition.

Arguments

 

view/modal/close/perform 

Published when the user confirms closing the editor in the "unsaved changes" dialog. EXT:form clears the unsaved-content flag and navigates back to the form manager.

Arguments

none

view/modal/removeFormElement/perform 

Published when the user confirms deleting a form element in the confirmation dialog. EXT:form removes the element from the form definition.

Arguments

 

view/modal/removeCollectionElement/perform 

Published when the user confirms removing a validator or finisher via its delete icon. EXT:form removes the collection element from the form definition.

Arguments

 

view/modal/validationErrors/element/clicked 

Published when the user clicks a form element link inside the validation error dialog. EXT:form selects the element and navigates to it.

Arguments

 

view/structure/root/selected 

Published when the root element in the structure tree is clicked. EXT:form selects the root form element and re-renders stage, tree and inspector.

Arguments

none

view/structure/button/newPage/clicked 

Published when the "Create new page" button inside the structure tree panel is clicked. EXT:form opens the "New page" dialog.

Arguments

 

view/structure/renew/postProcess 

Published after the structure tree has been fully re-rendered. EXT:form uses this to apply validation error markers to tree nodes.

Arguments

none

view/tree/node/clicked 

Published when a node in the structure tree is clicked. EXT:form selects the element and re-renders stage and inspector.

Arguments

 

view/tree/node/changed 

Published when a tree node label is edited inline (inline-rename). EXT:form writes the new label to the FormElement model and updates the inspector if the element is currently selected.

Arguments

 

view/tree/render/listItemAdded 

Published by the tree component for each form element as it is added to the rendered tree. Use this to augment individual tree nodes.

Arguments

 

view/tree/dnd/change 

Published on each positional change during a drag in the structure tree (SortableJS onChange). EXT:form applies hover CSS classes.

Arguments

 

view/tree/dnd/update 

Published when a drag in the structure tree ends and the element was dropped in a new position. EXT:form calls moveFormElement().

Arguments

 

view/tree/dnd/stop 

Published after the tree drag operation completes. EXT:form re-renders tree, stage and inspector and selects the moved element.

Arguments