TYPO3 FormZ

137 vues

Publié le

A TYPO3 extension that allows easy yet powerful form management.

Publié dans : Internet
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
137
Sur SlideShare
0
Issues des intégrations
0
Intégrations
11
Actions
Partages
0
Téléchargements
2
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

TYPO3 FormZ

  1. 1. FormZ • typo3-formz.com 1github.com/romm/formz → go and ★ it! TYPO3 FormZ A modern form handler for extensions
  2. 2. FormZ • typo3-formz.com 2github.com/romm/formz → go and ★ it! Romain Canon PHP developer on TYPO3 since 2012 Currently living in Paris @Rommsteinz romain.hydrocanon@gmail.com @romm
  3. 3. FormZ • typo3-formz.com 3github.com/romm/formz → go and ★ it! Summary • What and why? • How? • Demo • Next?
  4. 4. FormZ • typo3-formz.com 4github.com/romm/formz → go and ★ it! What is FormZ? • A TYPO3 extension (TER, Packagist, GitHub) • A strong API for building web-forms with Extbase & Fluid • Time saving tool for developers and integrators
  5. 5. FormZ • typo3-formz.com 5github.com/romm/formz → go and ★ it! Why FormZ? • My customer needed a powerful and modern form manager for dozens of forms (simulations, registration, “business”, contact) • EXT:formhandler? • Old and not maintained a lot (not maintained anymore, since september 2016) • PI-based with no Fluid support • No frontend JavaScript validation • EXT:powermail? • Too “specific”
  6. 6. FormZ • typo3-formz.com 6github.com/romm/formz → go and ★ it! “Eh dude, TYPO3 v8 provides a brand new form builder!” • Development of both extensions probably began at the same time No communication led to two separate projects • The new form builder is for TYPO3 8.7; we needed something for TYPO3 6.2
  7. 7. FormZ • typo3-formz.com 7github.com/romm/formz → go and ★ it! “Eh dude, TYPO3 v8 provides a brand new form builder!” • Main target audience: • EXT:form → For editors/integrators → Simple forms with no complex business rules → Powerful UI to manage the basic rules of the forms • EXT:formz → For developers/integrators → Can handle huge forms with lots of business rules → Built by a developer for developers: easy to understand, maintain, evolve
  8. 8. FormZ • typo3-formz.com 8github.com/romm/formz → go and ★ it! What does FormZ provide?
  9. 9. FormZ • typo3-formz.com 9github.com/romm/formz → go and ★ it! TypoScript based configuration • Easy inheritance config.tx_formz { forms { RommFormzExampleFormExampleForm { fields { name { validation { required < config.tx_formz.validators.required } } email { validation { required < config.tx_formz.validators.required isEmail < config.tx_formz.validators.email } } } } } }
  10. 10. FormZ • typo3-formz.com 10github.com/romm/formz → go and ★ it! TypoScript based configuration • Easy overriding config.tx_formz { forms { RommFormzExampleFormExampleForm { fields { gender { validation { required < config.tx_formz.validators.required isValid < config.tx_formz.validators.containsValues isValid { messages { default.value = Please select a correct value! } options { values { 10 = male 20 = female } } } } } } } } }
  11. 11. FormZ • typo3-formz.com 11github.com/romm/formz → go and ★ it! TypoScript based configuration • Could be YAML or plain PHP (incoming!)
  12. 12. FormZ • typo3-formz.com 12github.com/romm/formz → go and ★ it! Fluid templating • Build you form however you want/need, by using the full power of Fluid: partials, view helpers, conditions, etc.
  13. 13. FormZ • typo3-formz.com 13github.com/romm/formz → go and ★ it! Fluid templating • Benefit from built-in view helpers: • Field layouts (native support for Twitter Bootstrap and Foundation) • Automatic CSS classes (for valid/invalid status) • More incoming!
  14. 14. FormZ • typo3-formz.com 14github.com/romm/formz → go and ★ it! JavaScript frontend framework • Instant custom validation for the user (not the ugly default HTML5 browser validation)
  15. 15. FormZ • typo3-formz.com 15github.com/romm/formz → go and ★ it! JavaScript frontend framework • All frontend validators have a PHP version • JavaScript is not needed for FormZ to work well! Server side validation will always run to ensure data security
  16. 16. FormZ • typo3-formz.com 16github.com/romm/formz → go and ★ it! JavaScript frontend framework • You can add your own custom JavaScript validators
  17. 17. FormZ • typo3-formz.com 17github.com/romm/formz → go and ★ it! Multi language • Easy translation handling Customize validation messages with TypoScript configuration name { validation { required < config.tx_formz.validators.required required.messages { default { key = example_form.error.name_required extension = formz_example } } } } firstName { validation { required < config.tx_formz.validators.required required.messages { default { key = example_form.error.first_name_required extension = formz_example } } } }
  18. 18. FormZ • typo3-formz.com 18github.com/romm/formz → go and ★ it! Multi language • Available in frontend JavaScript automatically handles translated messages
  19. 19. FormZ • typo3-formz.com 19github.com/romm/formz → go and ★ it! Robust condition system • Choose specific situations where fields should be activated conditionList { doesLikeIceCream { type = fieldHasValue fieldName = likeIceCream fieldValue = 1 } } fields { iceCreamFlavors { activation.expression = doesLikeIceCream } }
  20. 20. FormZ • typo3-formz.com 20github.com/romm/formz → go and ★ it! Robust condition system • Choose specific situations where validation should be activated conditionList { countryIsFrance { type = fieldHasValue fieldName = country fieldValue = FR } countryIsGermany { type = fieldHasValue fieldName = country fieldValue = DE } } fields { phoneNumber { validation { frenchPhone { className = MyValidatorFrenchPhoneValidator activation.expression = countryIsFrance } germanPhone { className = MyValidatorGermanPhoneValidator activation.expression = countryIsGermany } } } }
  21. 21. FormZ • typo3-formz.com 21github.com/romm/formz → go and ★ it! Robust condition system • Understands logical operations deliveryChoice { activation.expression = zipCodeValid && addressValid && (countryIsFrance || countryIsGermany) }
  22. 22. FormZ • typo3-formz.com 22github.com/romm/formz → go and ★ it! Dynamic CSS data-attributes • Automatically added to the <form> HTML tag • Allows powerful CSS targeting using data-attributes • fz-value-{field-name} / fz-valid-{field-name} / fz-error-{field-name} • fz-loading • More... • Fully provided by FormZ core • Works on frontend side (JavaScript) and server side (PHP/Fluid)
  23. 23. FormZ • typo3-formz.com 23github.com/romm/formz → go and ★ it! Dynamic CSS classes form[name="exForm"]:not([fz-value-email$="@typo3.org"]) .typo3-user { display: none; } Basic example: On a registration form: I want to display additional information for “official” TYPO3 users.
  24. 24. FormZ • typo3-formz.com 24github.com/romm/formz → go and ★ it! Demo
  25. 25. FormZ • typo3-formz.com 25github.com/romm/formz → go and ★ it! What is coming next?
  26. 26. FormZ • typo3-formz.com 26github.com/romm/formz → go and ★ it! Middlewares • Between the request and the controller • A specific and powerful FormZ context • Example: pre-fill form values, add complex validation processes, save to database, send an email, etc.
  27. 27. FormZ • typo3-formz.com 27github.com/romm/formz → go and ★ it! Multi-steps form • Supports separate pages • Conditional steps • Database/Session/Other persistence
  28. 28. FormZ • typo3-formz.com 28github.com/romm/formz → go and ★ it! Substeps • A new concept that allows pure JavaScript/CSS step control, for an instant navigation • Check: https://goo.gl/H6TT69 (https://www.direct-energie.com/particuliers/electricite/simulateur-de-consommation)
  29. 29. FormZ • typo3-formz.com 29github.com/romm/formz → go and ★ it! More information/support • Join #ext-formz on Slack! You don’t have an account? Go on forger.typo3.org/slack • typo3-formz.com Official website • typo3-formz.com/doc Documentation FR/EN PDF versions available!
  30. 30. FormZ • typo3-formz.com 30github.com/romm/formz → go and ★ it! Thanks!

×