Form editor¶

prototypes:
  standard:
    formEditor:
      dynamicJavaScriptModules:
        additionalViewModelModules:
          10: '@my-vendor/my-site-package/backend/form-editor/view-model.js'

# Configuration/JavaScriptModules.php
<?php

return [
    'dependencies' => ['form'],
    'imports' => [
        '@myvendor/my-site-package/' => 'EXT:my_site_package/Resources/Public/JavaScript/',
    ],
];

/**
 * Module: @my-vendor/my-site-package/backend/form-editor/view-model.js
 */
import $ from 'jquery';
import * as Helper from '@typo3/form/backend/form-editor/helper.js'

/**
 * @private
 *
 * @var object
 */
let _formEditorApp = null;

/**
 * @private
 *
 * @return object
 */
function getFormEditorApp() {
    return _formEditorApp;
};

/**
 * @private
 *
 * @return object
 */
function getPublisherSubscriber() {
    return getFormEditorApp().getPublisherSubscriber();
};

/**
 * @private
 *
 * @return object
 */
function getUtility() {
    return getFormEditorApp().getUtility();
};

/**
 * @private
 *
 * @param object
 * @return object
 */
function getHelper() {
    return Helper;
};

/**
 * @private
 *
 * @return object
 */
function getCurrentlySelectedFormElement() {
    return getFormEditorApp().getCurrentlySelectedFormElement();
};

/**
 * @private
 *
 * @param mixed test
 * @param string message
 * @param int messageCode
 * @return void
 */
function assert(test, message, messageCode) {
    return getFormEditorApp().assert(test, message, messageCode);
};

/**
 * @private
 *
 * @return void
 * @throws 1491643380
 */
function _helperSetup() {
    assert('function' === $.type(Helper.bootstrap),
        'The view model helper does not implement the method "bootstrap"',
        1491643380
    );
    Helper.bootstrap(getFormEditorApp());
};

/**
 * @private
 *
 * @return void
 */
function _subscribeEvents() {
    getPublisherSubscriber().subscribe('some/eventName/you/want/to/handle', function(topic, args) {
        myCustomCode();
    });
};

/**
 * @private
 *
 * @return void
 */
function myCustomCode() {
};

/**
 * @public
 *
 * @param object formEditorApp
 * @return void
 */
export function bootstrap(formEditorApp) {
    _formEditorApp = formEditorApp;
    _helperSetup();
    _subscribeEvents();
};

identifier: javascript-form-element-model
label: 'JavaScript FormElement model'
type: Form
finishers:
  -
    identifier: EmailToReceiver
    options:
      subject: 'Your message: {subject}'
      recipients:
        your.company@example.com: 'Your Company name'
        ceo@example.com: 'CEO'
      senderAddress: '{email}'
      senderName: '{name}'
      replyToRecipients:
        replyTo.company@example.com: 'Your Company name'
      carbonCopyRecipients:
        cc.company@example.com: 'Your Company name'
      blindCarbonCopyRecipients:
        bcc.company@example.com: 'Your Company name'
      addHtmlPart: true
      attachUploads: 'true'
      translation:
        language: ''
      title: ''
renderables:
  -
    identifier: page-1
    label: 'Contact Form'
    type: Page
    renderables:
      -
        identifier: name
        label: Name
        type: Text
        properties:
          fluidAdditionalAttributes:
            placeholder: Name
        defaultValue: ''
        validators:
          -
            identifier: NotEmpty

{
  "identifier": "javascript-form-element-model",
  "label": "JavaScript FormElement model",
  "type": "Form",
  "prototypeName": "standard",
  "__parentRenderable": null,
  "__identifierPath": "example-form",
  "finishers": [
    {
      "identifier": "EmailToReceiver",
      "options": {
        "subject": "Your message: {subject}",
        "recipients": {
          "your.company@example.com": "Your Company name",
          "ceo@example.com": "CEO"
        },
        "senderAddress": "{email}",
        "senderName": "{name}",
        "replyToRecipients": {
          "replyTo.company@example.com": "Your Company name"
        },
        "carbonCopyRecipients": {
          "cc.company@example.com": "Your Company name"
        },
        "blindCarbonCopyRecipients": {
          "bcc.company@example.com": "Your Company name"
        },
        "addHtmlPart": true,
        "attachUploads": true,
        "translation": {
          "language": ""
        },
        "title": ""
      }
    }
  ],
  "renderables": [
    {
      "identifier": "page-1",
      "label": "Contact Form",
      "type": "Page",
      "__parentRenderable": "example-form (filtered)",
      "__identifierPath": "example-form/page-1",
      "renderables": [
        {
          "identifier": "name",
          "defaultValue": "",
          "label": "Name",
          "type": "Text",
          "properties": {
            "fluidAdditionalAttributes": {
              "placeholder": "Name"
            }
          },
          "__parentRenderable": "example-form/page-1 (filtered)",
          "__identifierPath": "example-form/page-1/name",
          "validators": [
            {
              "identifier": "NotEmpty"
            }
          ]
        }
      ]
    }
  ]
}