Neos.Fusion.Form - NeosConference 2021 online

Transcript

1. Real Values.
   Neos.Fusion.Form
   Neos Conference 2021- online
   Martin Ficzel
   Photo by Kelly Sikkema on Unsplash
   

   View Slide

2. Real Values.
   Use AFX and a little
   Fusion!
   

   View Slide

3. Real Values.
   It’s complicated!
   

   View Slide

4. Real Values.
   We have to talk
   about forms!
   

   View Slide

5. Real Values.
   Form Rendering
   Neos.Fusion.Form 1.0
   

   View Slide

6. Real Values.
   Form: Basic ingredients
   ● Specify target
   ● Render controls
   ● And labels
   ● Configure Data to modify
   ● Map data to controls
   ● Hidden object identifiers
   ● Hidden CSRF Token
   ● Hidden Trusted Properties Token
   ● Hidden Referrer
   ● Rerender submitted values
   ● Render validation errors
   🍳
   

   View Slide

7. Real Values.
   Form: Basic ingredients
   ● Specify target
   ● Render controls
   ● And labels
   ● Configure Data to modify
   ● Map data to controls
   ● Hidden object identifiers
   ● Hidden CSRF Token
   ● Hidden Trusted Properties Token
   ● Hidden Referrer
   ● Rerender submitted values
   ● Render validation errors
   🍳
   Happens automagically
   

   View Slide

8. Real Values.
   Fluid vs. AFX
   
   
   
   
   
   
   

   View Slide

9. Real Values.
   Nested api, 3 main
   properties
   ● form * define the magic
   ● attributes * set attributes directly
   ● content form body - Fusion / AFX
   * nested properties
   

   View Slide

10. Real Values.
    Generic data binding!
    form.data.customer={customer} form.data.address={address}
    >
    
    
    
    

    View Slide

11. Real Values.
    Label and Message Containers
    field.name="customer[gender]"
    label="Gender"
    >
    
    
    
    
    

    View Slide

12. Real Values.
    Fusion.Form Rendering - New features
    ● Fusion Controller forms
    ● Fusion Flow projects
    ● Fusion Neos Backend Modules
    ● Neos Login Screen & History Module
    ● Forms as presentational Fusion
    
    

    View Slide

13. Real Values.
    Runtime Forms
    Neos.Fusion.Form 2.0
    

    View Slide

14. Real Values.
    Runtime.Form
    Validation
    Process Action
    Initial data
    Final data
    Submitted data
    

    View Slide

15. Real Values.
    1. renderer = Neos.Fusion.Form:Runtime.RuntimeForm {
    2. # the form argument namespace
    3. namespace = 'example'
    4.
    5. # initial form data to prefill the fields
    6. data = Neos.Fusion:DataStructure
    7.
    8. # the form process for rendering and validation
    9. process = Neos.Fusion.Form:Runtime.SingleStepProcess
    10.
    11. # action after the process is finished
    12. action = Neos.Fusion.Form:Runtime.Actions
    13. }
    Runtime.Form
    

    View Slide

16. Real Values.
    Runtime.Form - Process
    1. Take initial data
    2. handle submitted Data
    3. Is the process finished?
    a. Return final data to
    perform action
    b. Render form with
    validation results
    Action
    Final data
    Initial data
    Submitted data
    

    View Slide

17. Real Values.
    1. process = Neos.Fusion.Form:Runtime.SingleStepProcess {
    2. content = afx`
    3.
    Submit
    16. `
    17. }
    Runtime.Form - SingleStepProcess
    

    View Slide

18. Real Values.
    Validation
    Process Final data
    Redirect Log
    Runtime.Form - Action
    EMail Message
    

    View Slide

19. Real Values.
    1.action {
    2. redirect {
    3. type = 'Neos.Fusion.Form.Runtime:Redirect'
    4. options.uri = Neos.Neos:NodeUri {
    5.
    node = ${q(node).property('redirectTarget')}
    6. }
    7. }
    8.
    9. email {
    10.
    @if.has = ${q(node).property('mailTo')}
    11. type = 'Neos.Fusion.Form.Runtime:Email'
    12. options {
    13.
    senderAddress = ${q(node).property('mailFrom')}
    14.
    recipientAddress = ${q(node).property('mailTo')}
    15.
    subject = ${q(node).property('mailSubject')}
    html = afx`Thank you {data.firstName}
    >from {data.city}, {data.street}`
    Runtime.Form - Action
    

    View Slide

20. Real Values.
    Action
    Final data
    a
    Step 1 Step 2 Confirm
    Runtime.Form - MultiStepProcess
    

    View Slide

21. Real Values.
    1.renderer = Neos.Fusion.Form:Runtime.RuntimeForm {
    2.
    3. process = Neos.Fusion.Form:Runtime.MultiStepProcess {
    4. steps {
    5.
    first {
    6.
    content = ...
    7.
    schema = ...
    8.
    }
    9.
    second {
    10.
    content = ...
    11.
    schema = ...
    12.
    }
    13.
    confirm {
    14.
    content = ...
    15.
    }
    16. }
    17. }
    Runtime.Form - Multi Step Process
    

    View Slide

22. Real Values.
    Fusion.Form Runtime - New features
    
    ● AFX for content
    ● Access node properties
    ● Access settings
    ● Use @if conditions
    ● Fusion reusability
    ● Migrate Runtime Forms -> Controller Forms
    ● Presentational Fusion / Styleguide support
    

    View Slide

23. Real Values.
    Fusion.Form - Extensibility
    
    ● Custom Rendering
    ○ FieldTypes -> Fusion
    ○ Label and ErrorRenderer -> Fusion
    ○ FieldContainers -> Fusion
    ● Runtime Interfaces
    ○ ActionInterface (formerly known as Finisher)
    ○ Process- & SchemaInterface
    ○ ProcessCollectionInterface
    ● Flow ValidatorInterface
    

    View Slide

24. Real Values.
    Form Example
    

    View Slide

25. Real Values.
    Example - ContactForm
    

    View Slide

26. Real Values.
    ##
    # "ContactForm" element
    #
    prototype(Neos.Demo:Content.ContactForm) < prototype(Neos.Neos:ContentComponent) {
    renderer = Neos.Fusion.Form:Runtime.RuntimeForm {
    namespace = 'contact'
    process {
    content = afx`
    
    Contact
    
    
    
    
    
    
    
    
    
    
    .Form:FieldContainer label="Message" field.name="message">
    class="form-control" />
    Example - ContactForm
    

    View Slide

27. Real Values.
    Example - ContactForm
    ##
    # "ContactForm" ele
    #
    prototype(Neos.Demo:Content.ContactForm) < prototype
    renderer = Neos.Fusion.Form:Runtime.RuntimeForm {
    namespace = 'contact'
    process {
    content = afx`
    
    Contact
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    `
    footer = afx`
    Submit
    ')}
    

    View Slide

28. Real Values.
    Example - ContactForm
    
    
    
    
    `
    footer = afx`
    Submit
    `
    schema {
    name = ${Form.Schema.string().isRequired()}
    email = ${Form.Schema.string().isRequired().validator('EmailAddress')}
    message = ${Form.Schema.string().isRequired()}
    }
    }
    action {
    message {
    type = 'Neos.Fusion.Form.Runtime:Message'
    options.message = ${q(node).property('message')}
    }
    email {
    @if.has = ${q(node).property('subject') && q(node).property('recipientAddress')
    type = 'Neos.Fusion.Form.Runtime:Email'
    options {
    recipientName = ${q(node).property('recipientName')}
    ss = ${q(node).property('recipientAddress')}
    y('senderName')}
    ss')}
    

    View Slide

29. Real Values.
    Example - ContactForm
    }
    action {
    message {
    type = 'Neos.Fusion.Form.Runtime:Message'
    options.message = ${q(node).property('message')}
    }
    email {
    @if.has = ${q(node).property('subject') && q(node).property('recipientAddress') && q(
    type = 'Neos.Fusion.Form.Runtime:Email'
    options {
    recipientName = ${q(node).property('recipientName')}
    recipientAddress = ${q(node).property('recipientAddress')}
    senderName = ${q(node).property('senderName')}
    senderAddress = ${q(node).property('senderAddress')}
    subject = ${q(node).property('subject')}
    replyToAddress = ${data.email}
    html = afx`
    Message from {data.name}
    {data.message}
    `
    }
    }
    redirect {
    @if.has = ${q(node).property('redirect')}
    type = 'Neos.Fusion.Form.Runtime:Redirect'
    options.uri = Neos.Neos:NodeUri {
    node = ${q(node).property('redirect')}
    

    View Slide

30. Real Values.
    Wrapping up!
    

    View Slide

31. Real Values.
    Fusion.Form Runtime - Ideas for you
    
    ● ReCaptcha integration
    ● Newsletter subscription action
    ● Persistence action
    ● Node based forms
    ● Custom processes
    

    View Slide

32. Real Values.
    Requirements
    ● Form Rendering
    ○ Neos.Fusion.Form > 1.0
    ○ Neos > 4.3
    ● Form Runtime
    ○ Neos.Fusion.Form > 2.0
    ○ Neos > 5.0
    
    

    View Slide

33. Real Values.
    Fusion.Form Runtime - Docs & Help
    ● Package Readme
    https://github.com/neos/fusion-form
    ● Neos Demo
    https://github.com/neos/Neos.Demo
    ● Neos Slack
    #project-fusion-form / #neos-general
    
    

    View Slide

34. Real Values.
    Fusion.Form Runtime - Pitfalls
    ● Brand new … bugs included
    ○ less code, less places to hide
    ○ minimalistic core
    ● Testing Fusion is hard
    ○ Unit & Functional Tests
    ○ Static Analysis
    ○ No end to end tests -YET
    
    

    View Slide

35. Real Values.
    Fusion.Form Runtime - Future
    ● New versions of Fusion Form
    ● Public Packages with Actions and FieldTypes
    ● Node based Fusion.Form.Builder
    ● Move into neos-development-collection
    ● Neos CMS usable without Fluid
    ● Fluid will stay - as an option
    ● Yaml Forms will stay aswell
    

    View Slide

36. Real Values.
    Thank you!
    Twitter / Slack: @kopfaufholz
    

    View Slide