As an integrator, you will learn the basic concepts of EXT:form. Additionally, it will show you how to customize/ configure the most important things of this great TYPO3 v8 core extension ;)

1. +
TYPO3 EXT:form
for integrators
TRITUM GmbH / Björn Jacob / tritum

2. 2
+
TRITUM
• First official TYPO3 “Professional
Development Agency” in Germany
• www.tritum.de

3. 3
+
Björn Jacob
• CTO TRITUM GmbH
• Team lead EXT:form
• www.geocouch.de

4. +
Form Configuration

5. 5
+
3 Configuration files
• /typo3/sysext/form/Configuration/Yaml/BaseSetup.yaml
• /typo3/sysext/form/Configuration/Yaml/FormEditorSetup.yaml
• /typo3/sysext/form/Configuration/Yaml/FormEngineSetup.yaml

6. 6
+
4 aspects // 1
• form frontend
• basic settings, e.g. template paths, translation files
• definition of form elements, finishers, validators
• form manager
• basic settings, e.g. needed JS + CSS files, translation files
• selectable prototypes
• selectable start templates
https://docs.typo3.org/typo3cms/drafts/code.tritum.de/TYPO3.CMS/Form_Documentation/Concepts/Index.html#configuration-aspects

7. 7
+
4 aspects // 2
• form editor
• basic settings, e.g. template paths, needed JS + CSS, translation files
• allowed form elements, finishers, validators
• editable propterties of above mentioned objects
• form plugin (FormEngine)
• basic settings, e.g. translation files
• overridable finisher properties
https://docs.typo3.org/typo3cms/drafts/code.tritum.de/TYPO3.CMS/Form_Documentation/Concepts/Index.html#configuration-aspects

8. 8
+
Register own configuration // 1
Frontend
https://docs.typo3.org/typo3cms/drafts/code.tritum.de/TYPO3.CMS/Form_Documentation/Concepts/Index.html#yaml-registration
plugin.tx_form {
settings.yamlConfigurations {
# choose number higher 20, below reserved
100 = EXT:theme/Configuration/Yaml/CustomFormSetup.yaml
}
}

9. 9
+
Register own configuration // 2
Backend
• module.tx_form.settings via ext_typoscript_setup.txt
• module.tx_form.settings via ext_localconf.php
https://docs.typo3.org/typo3cms/drafts/code.tritum.de/TYPO3.CMS/Form_Documentation/Concepts/Index.html#yaml-registration

10. 10
+
Register own configuration // 3
Backend - ext_typoscript_setup.txt
https://docs.typo3.org/typo3cms/drafts/code.tritum.de/TYPO3.CMS/Form_Documentation/Concepts/Index.html#yaml-registration
module.tx_form {
settings.yamlConfigurations {
# choose number higher 30, below reserved
100 = EXT:theme/Configuration/Yaml/CustomFormSetup.yaml
}
}

11. 11
+
Register own configuration // 4
Backend - ext_localconf.php
https://docs.typo3.org/typo3cms/drafts/code.tritum.de/TYPO3.CMS/Form_Documentation/Concepts/Index.html#yaml-registration
<?php
...
call_user_func(function () {
if (TYPO3_MODE === 'BE') {
TYPO3CMSCoreUtilityExtensionManagementUtility::addTypoScriptSetup(
trim('
...
')
);
}
});
...

12. 12
+
Configuration inheritances
configuration is merged  only diff in own configuration needed
https://docs.typo3.org/typo3cms/drafts/code.tritum.de/TYPO3.CMS/Form_Documentation/Concepts/Index.html#inheritances
configuration 1
Form:
klaus01:
key01: value01
key02: value02
key03: value03
configuration 2
Form:
klaus01:
key01: new value
key04: additional key
result
Form:
klaus01:
key01: new value
key02: value02
key03: value03
key04: additional key

13. 13
+
__inheritances operator (like „<“ in TS)
https://docs.typo3.org/typo3cms/drafts/code.tritum.de/TYPO3.CMS/Form_Documentation/Concepts/Index.html#inheritances-operator
configuration 1
Form:
klaus01:
key01: value01
key02:
key03: value03
klaus02:
__inheritances:
10: Form.klaus01
key02:
key03: new value
result
Form:
klaus01:
key01: value01
key02:
key03: value03
klaus02:
key01: value01
key02:
key03: new value

14. +
Form definition

15. 15
+
Basics
• describes specific form including
• form elements
• properties of form elements (label, placeholder, data-foo, etc.)
• order
• validators
• finishers
https://docs.typo3.org/typo3cms/drafts/code.tritum.de/TYPO3.CMS/Form_Documentation/Concepts/Index.html#form-configuration-vs-form-definition

16. 16
+
Kickstart
• use form editor for kickstart
• manually add form definition which you cannot create with
form editor (e.g. save to database finisher)
https://docs.typo3.org/typo3cms/drafts/code.tritum.de/TYPO3.CMS/Form_Documentation/Concepts/Index.html#form-configuration-vs-form-definition

17. +
File mounts

18. 18
+
Basics
• default file mount: „fileadmin/user_uploads“
• define new file mount  available in form manager
• file mount can be extension folder
https://docs.typo3.org/typo3cms/drafts/code.tritum.de/TYPO3.CMS/Form_Documentation/Concepts/Index.html#form-file-storages

19. 19
+
Access rights
• if editor has no access to file mount  form definitions not listed
(form manager, plugin)
• form definitions stored in extension folder
• … are always available (form manager, plugin)
• … cannot be edited and deleted  can be configured
https://docs.typo3.org/typo3cms/drafts/code.tritum.de/TYPO3.CMS/Form_Documentation/Concepts/Index.html#form-file-storages

20. 20
+
Example
https://docs.typo3.org/typo3cms/drafts/code.tritum.de/TYPO3.CMS/Form_Documentation/Concepts/Index.html#form-file-storages
TYPO3:
CMS:
Form:
persistenceManager:
allowedFileMounts:
# format: [file storage uid]:/file/mount/path
100: 1:/forms/
110: 2:/cloudstorage/forms/
allowedExtensionPaths:
10: EXT:theme/Resources/Private/Forms/
allowSaveToExtensionPaths: true
allowDeleteFromExtensionPaths: false

21. +
Override templates
Burning question #1 ☺

22. 22
+
Basics
• fluid template path defined in form configuration (YAML TS )
• templates for form elements are stored in partialRootPaths
• name of form element  name of partial, e.g. Text  Text.html
https://docs.typo3.org/typo3cms/drafts/code.tritum.de/TYPO3.CMS/Form_Documentation/Concepts/Index.html#templates

23. 23
+
Example
https://docs.typo3.org/typo3cms/drafts/code.tritum.de/TYPO3.CMS/Form_Documentation/Concepts/Index.html#templates
TYPO3:
CMS:
Form:
prototypes:
standard:
formElementsDefinition:
Form:
renderingOptions:
templateRootPaths:
100: 'EXT:theme/Resources/Private/Frontend/Templates/'
partialRootPaths:
100: 'EXT:theme/Resources/Private/Frontend/Partials/'
layoutRootPaths:
100: 'EXT:theme/Resources/Private/Frontend/Layouts/'

24. +
Translation

25. 25
+
Basics (1)
• XLIFF, TypoScript
• XLIFF file defined within „form“ element
• possible to define additional files
https://docs.typo3.org/typo3cms/drafts/code.tritum.de/TYPO3.CMS/Form_Documentation/Concepts/Index.html#translate-form-definition

26. 26
+
Basics (2)
• form definition contains label for specific form element
• if a translation is found  label of form definition is overridden
• look-up based on identifiers
• look-up strategy searches in all given translation files based on
the following order:
• translation for specific form + form element
• translation for a specific form element
• translation for a form element type (e.g. „Page“)
https://docs.typo3.org/typo3cms/drafts/code.tritum.de/TYPO3.CMS/Form_Documentation/Concepts/Index.html#translate-form-definition

27. 27
+
Example
https://docs.typo3.org/typo3cms/drafts/code.tritum.de/TYPO3.CMS/Form_Documentation/Concepts/Index.html#translate-form-definition
TYPO3:
CMS:
Form:
prototypes:
standard:
formElementsDefinition:
Form:
renderingOptions:
translation:
translationFile:
# by default, no array (compatibility) > re-add core XLIFF
# search order is 20:, 10: (highest to lowest)
10: 'EXT:form/Resources/Private/Language/locallang.xlf'
20: 'EXT:theme/Resources/Private/Language/locallang.xlf'

28. +
Customize form editor

29. 29
+
Example 1: remove „Hidden“ element
https://docs.typo3.org/typo3cms/drafts/code.tritum.de/TYPO3.CMS/Form_Documentation/Concepts/Index.html#form-editor
TYPO3:
CMS:
Form:
prototypes:
standard:
formElementsDefinition:
Hidden:
formEditor: 'null'

30. 30
+
Example 2: add „class“ attribute (1)
TYPO3:
CMS:
Form:
prototypes:
standard:
formElementsDefinition:
Text:
formEditor:
# prefill when form element is created in editor
predefinedDefaults:
properties:
elementClassAttribute: 'input'

31. 31
+
Example 2: add „class“ attribute (2)
# TYPO3.CMS:Form.prototypes.standard.formElementsDefinition.Text.formEditor:
editors:
# add a new editable property within the inspector
600:
# unique identifier
identifier: 'class-attribute'
# define inspector editor, can read/ write values of
# 'properties.elementClassAttribute'
templateName: 'Inspector-TextEditor'
# label within inspector
label: 'Class'
# path within form definition
propertyPath: 'properties.elementClassAttribute'

32. +
What‘s next?

33. 33
+
2017
• finish documentation
• release examples/ snippet DB
• powermail migration

34. 34
+
TYPO3 v9 (tbd)
• translations via backend
• additional finishers in editor
• HTML5 elements and validators
• streamline configuration system

35. +
Thanks! Questions?
TRITUM GmbH / Björn Jacob / tritum