Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Neos.Fusion.Form - NeosConference 2021 online

Sitegeist
May 08, 2021
88

Neos.Fusion.Form - NeosConference 2021 online

Sitegeist

May 08, 2021
Tweet

Transcript

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

    View full-size slide

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

    View full-size slide

  3. Real Values.
    It’s complicated!

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

  8. Real Values.
    Fluid vs. AFX






    View full-size 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 full-size slide

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



    View full-size slide

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




    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

  24. Real Values.
    Form Example

    View full-size slide

  25. Real Values.
    Example - ContactForm

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

  30. Real Values.
    Wrapping up!

    View full-size slide

  31. Real Values.
    Fusion.Form Runtime - Ideas for you

    ● ReCaptcha integration
    ● Newsletter subscription action
    ● Persistence action
    ● Node based forms
    ● Custom processes

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide