TYPO3 v15 dev-main snapshot ()

Documentation/D/FormEditor/JavaScriptEvents/_codesnippets/_inspector-editor-insert.js

@@ -0,0 +1,22 @@
+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);
+                });
+            }
+        },
+    );
+}

Documentation/D/FormEditor/JavaScriptEvents/_codesnippets/_inspector-editor-insert.yaml

@@ -0,0 +1,18 @@
+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'

Documentation/D/FormEditor/JavaScriptEvents/_codesnippets/_publish.js

@@ -0,0 +1,3 @@
+export function bootstrap(formEditorApp) {
+    formEditorApp.getPublisherSubscriber().publish('my/custom/event', ['arg1', 'arg2']);
+}

Documentation/D/FormEditor/JavaScriptEvents/_codesnippets/_some-property-changed.js

@@ -0,0 +1,11 @@
+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);
+            }
+        },
+    );
+}

Documentation/D/FormEditor/JavaScriptEvents/_codesnippets/_stage-template-perform.html

@@ -0,0 +1,4 @@
+<div class="formeditor-element-body">
+    <div data-identifier="elementLabel"></div>
+    <div data-identifier="elementSummary"></div>
+</div>

Documentation/D/FormEditor/JavaScriptEvents/_codesnippets/_stage-template-perform.js

@@ -0,0 +1,24 @@
+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') ?? '';
+            }
+        },
+    );
+}

Documentation/D/FormEditor/JavaScriptEvents/_codesnippets/_stage-template-perform.yaml

@@ -0,0 +1,11 @@
+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/'

Documentation/D/FormEditor/JavaScriptEvents/_codesnippets/_subscribe.js

@@ -0,0 +1,11 @@
+export function bootstrap(formEditorApp) {
+    const ps = formEditorApp.getPublisherSubscriber();
+
+    // Subscribe – returns a token for later unsubscription
+    const token = ps.subscribe('view/ready', (topic, args) => {
+        // args is a typed tuple matching the event signature
+    });
+
+    // Unsubscribe
+    ps.unsubscribe(token);
+}

Documentation/D/FormEditor/JavaScriptEvents/_codesnippets/_view-ready.js

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