Back to Questions
3.9k
views8
comments
Converting an ASP.NET form to formets
websharperformlets

I'm new to WebSharper. I'm trying to re-create an ASP.NET form using formlets and am having a bit of trouble with the design.

A screenshot is below. It's used to resolve a new venue by matching it to or adding it as an alias of an existing one, adding it as a new venue, or deleting it. Possible matches is populated using fuzzy search when the form loads, but also shows the user's search results.

Looking at samples, I had a hard time figuring out how one part of the form (e.g. the search box) could affect another part (the search results panel), especially if they're separate formets. Should this be one big formlet? Is there a way to sensibly break it into smaller ones? The form can be entirely redesigned if it makes sense, so long as the functionality is retained. Any formlet (or general UI) design advice is appreciated.

Some more explanation of the form, in case it helps:

Match, Add as alias, and Delete all make database calls then redirect to a parent listing page. Create Venue redirects to another form. View Events shows a grid just beneath the row of buttons.

.

In order to compose two formlets so that the second one depends on the first one, you can use the computation expression Formlet.Do. For example, if you have the following:

1
2
3
4
5

[<Rpc>]
val RpcGetMatches : string -> string list

[<JavaScript>]
val PossibleMatchesForm : string list -> Formlet<_>

then you can do something like this:

1
2
3
4
5
6
7
8

Formlet.Do {
  let! searchTerm =
    Controls.Input "yankee"
    |> Enhance.WithSubmitButton "Search"
    |> Formlet.Horizontal
  let matches = RpcGetMatches searchTerm
  return! PossibleMatchesForm matches
}
By on 3/8/2012 2:31 AM ()

Thank you. That helps. How could I go about displaying the second formlet when the page loads (if the fuzzy search produces any results) but retain the behavior of your code too?

By on 3/8/2012 11:06 AM ()

If I understand the question correctly, it's what my code does: originally, the second formlet is not displayed, and as soon as the user clicks "Search", then the RPC call is made and the second formlet is displayed.

The idea is that each formlet possesses an event with a value of type:

1

type Result<'T> = Success of 'T | Failure of list<string>

When a formlet is on the right-hand side of a let!, then:

  • Every time it triggers Failure, the following formlets in the computation expression are erased, and the CE triggers its own Failure;
  • Every time it triggers Success, the code that follows in the CE is evaluated.

In the case of a formlet with a submit button, Failure is triggered immediately after display, and Success is triggered every time the user clicks "Submit".

In this case, it means that the type second formlet is originally hidden, and then each time the user clicks "Submit", a new RPC call is made and the second formlet is redisplayed with the corresponding matches.a

By on 3/10/2012 2:56 AM ()

My question is how to display the second formlet when the page loads. There are two ways to populate the Possible matches box: a fuzzy search (done when the page loads), or through user search. I'm trying to understand how to decouple the formlet sequence in order to show the fuzzy search results on page load.

By on 3/12/2012 9:08 AM ()

Oh, I see. In this case I think the following should do the trick:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

let searchResultForm : Formlet<string list> =
  Formlet.Do {
    let! searchTerm =
      Controls.Input ""
      |> Enhance.WithSubmitButton "Search"
      |> Formlet.Horizontal
    return RpcGetMatches searchTerm
  }
  |> Formlet.InitWith fuzzyResult

Formlet.Do {
  let! matches = searchResultForm
  return! PossibleMatchesForm matches
}

The combinator Formlet.InitWith x overrides the initial Failure trigger and triggers Success x instead, which will allow the second formlet to be displayed immediately.

By on 3/12/2012 11:14 AM ()

Great! I look forward to trying it out. Thanks for your help. You provided some very useful insight into how formlets work.

By on 3/12/2012 2:45 PM ()

Is there a way to fix the misspelling in the title?

By on 3/7/2012 8:12 PM ()

Hum... Not yet :)

By on 3/8/2012 2:01 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