Back to Questions
854
views2
comments
Composing UI.Next Forms
websharperui.next forms

Is the code below ideomatic? What I find wired/not elegant:

  • Variables for the nested form (for Pet) is flattened in Form.Render (fun personName petName petKind submit ->. If I have complex hierarchy of forms, this function will have very long list of arguments like Var<string> Var<int> Var<string> and so on where it's hard to say what args represent what nested form.
  • I don't understand how compose Submits. If I uncomment |> Form.WithSubmit in Pet form, then it stops compiling. I've not found any examples showing nested forms, except list of children, but it uses Form.Many combinator which is not applicable here.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

    type PetKind = Cat | Dog

    type Pet = 
        { Name: string
          Kind: PetKind }
    
    let petForm pet =
        Form.Return (fun name kind -> { Name = name; Kind = kind })
        <*> Form.Yield pet.Name
        <*> Form.Yield pet.Kind
        //|> Form.WithSubmit

    let renderPet (name: Var<string>) (kind: Var<PetKind>) = 
        div [
            p [textView name.View]
            p [textView (kind.View |> View.Map (sprintf "%A"))]
        ]

    type Person =
        { Name: string
          Pet: Pet }

    let personForm person =
        Form.Return (fun name pet -> { Name = name; Pet = pet })
        <*> Form.Yield person.Name
        <*> petForm person.Pet
        |> Form.WithSubmit

    let form = 
        personForm { Name = "person1"; Pet = { Name = "cat1"; Kind = Cat }}
        |> Form.Render (fun personName petName petKind submit -> 
            div [
                p [textView personName.View]
                renderPet petName petKind
                Doc.ButtonValidate "OK" [] submit
            ])
.

Form.Render will indeed flatten and this is by design, however, I agree that it's not ideal. It all boils down to how the render function is composed with <*> and Form.Return, feel free to check in the sources.

As for submits, when you add Form.WithSubmit you effectively change the render function to take an additional submitter argument, hence it won't compile until you add this.

Have a read on ordinary piglets, which are the foundations for WebSharper.Forms and have substantially more documentation. The main difference is that instead of Streams WebSharper.Forms use UI.Next reactive variables and also aim to provide dependent piglets, but they are also a lot less feature complete (but not for long, hopefully) and fixed in stone.

By on 12/25/2015 9:17 AM ()

Thanks! I will read everything about Piglets.

I still have no idea how to compose Submits, look:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

type PetKind = Cat | Dog
type Pet = { Name: string; Kind: PetKind }
type Person = { Name: string; Pet: Pet }

let petForm (pet: Pet) =
    Form.Return (fun name kind -> { Name = name; Kind = kind })
    <*> Form.Yield pet.Name
    <*> Form.Yield pet.Kind
    |> Form.WithSubmit // is it needed here or I should use a single "root" Form Submitter? 

// If I don't add `Form.WithSubmit` above, then I have to pass the root Submitter here to show localized validation errors. Is it right?
let renderPet (name: Var<string>) (kind: Var<PetKind>) submit = 
    div [
        labelAttr [attr.``class`` "form-control"] [textView name.View]
        labelAttr [attr.``class`` "form-control"] [textView (kind.View |> View.Map (sprintf "%A"))]
    ]
        
let personForm person =
    Form.Return (fun name pet -> { Name = name; Pet = pet })
    <*> Form.Yield person.Name
    <*> petForm person.Pet
    |> Form.WithSubmit

let main() =
    personForm { Name = "person1"; Pet = { Name = "cat1"; Kind = Cat }}
    // so we have two Submitters at this point. Is it right?
    |> Form.Render (fun personName petName petKind submitPet submitPerson -> 
        divAttr [attr.``class`` "form"] [ 
            labelAttr [attr.``class`` "form-control"] [textView personName.View]
            renderPet petName petKind submitPet
            Doc.ButtonValidate "OK" [attr.``class`` "form-control"] submitPerson
        ])

About dependent Piglets (Forms), could you provide a simple example? I've found absolutely no one :(

By on 12/25/2015 11:05 AM ()

    Topic tags

    IntelliFactory Offices Copyright (c) 2011-2012 IntelliFactory. All rights reserved.
    Home | Products | Consulting | Trainings | Blogs | Jobs | Contact Us | Terms of Use | Privacy Policy | Cookie Policy     		Built with WebSharper