Create FieldInfo for a number of basic fields. Their result will be handled as a list of values. Use for lists of BaseForm fields like Int, String, Double. The length of the list is equal to the amount of labels provided.

Example

>>> let labels = ["Input 1", "Input 2", "Input 3"]
>>> printWidget "en" $ formify (Nothing @[Double]) [[list Horizontal labels]]
<div class="flex-form-div">
...
    <label for="flexident1">
      Input 1
    </label>
    <input id="flexident1" ... type="number" step="any" ...>
...
    <label for="flexident2">
      Input 2
    </label>
    <input id="flexident2" ... type="number" step="any" ...>
...
    <label for="flexident3">
      Input 3
    </label>
    <input id="flexident3" ... type="number" step="any" ...>
...
</div>

Inner alignment of input field elements.

Data type representing a prebuilt input field. This type is used to determine the structure of a generated form. The form is represented by a [[FieldInfo]] type value. Each FieldInfo value is an individual form element. Inner lists represent the rows of the form. All FieldInfo values in an inner list are rendered besides each other. Inner lists are rendered below each other.

Examples

Input

[[single "field1", single "field2"]]

Renders as:

field1     field2

Input

[[single "field1"], [single "field2"]]

Renders as:

field1

field2

Caution: Not all horizontal alignments work as one would expect. If an element uses inner Alignment parameters, then the next form will only be rendered besides the last form component of the former.

Input

[[listWithoutLabels Vertical 2 []],[listWithoutLabels Vertical 2 []]]

will not result in

list11      list21

list12      list22

but instead in

list11

list12     list21

list22

Generic single choice answer type. Use if both of the following is true: - You want an input that presents multiple answer choices, but only allows a single selection. - There's no specific data type associated with this selection. === Example >>> let labels = ["First Option", "Second Option", "Third Option"] >>> printWidget "en" $ formify (Just $ singleChoiceAnswer 3) [[dropdown "Choose one" labels]] class="flex-form-div" ... for="flexident1" Choose one /label id="flexident1" ... value="1" First Option /option value="2" Second Option /option value="3" selected Third Option /option /select ... /div

Same as SingleChoiceSelection, but for multiple choice input. Use if both of the following is true: - You want an input that presents multiple answer choices and allows selecting any number of them. - There's no specific data type associated with this selection. === Example >>> let labels = ["First Option", "Second Option", "Third Option"] >>> printWidget "en" $ formify (Just $ multipleChoiceAnswer [1,2]) [[dropdown "Choose one" labels]] class="flex-form-div" ... for="flexident1" Choose one /label id="flexident1" ... multiple value="1" selected First Option /option value="2" selected Second Option /option value="3" Third Option /option /select ... /div

Wrapper type for generating hidden fields. This can be used to transfer static information through the form to parsing. Note that the generated field still has a label. If the label is not left blank, then it will be displayed as normal. === Example >>> printWidget "en" $ formify (Just $ Hidden 3) [[single ""]] class="flex-form-div" ... for="flexident1" /label type="hidden" id="flexident1" ... value="3" ... /div

Wrapper type for lists. Use for a single field list input. Normally, lists are interpreted as multiple fields instead. === Example >>> printWidget "en" $ formify (Nothing @(SingleInputList String)) [[single "Input comma separated sentences"]] class="flex-form-div" ... for="flexident1" Input comma separated sentences /label id="flexident1" ... type="text" ... ... /div

Note that this does not actually enforce any kind of input syntax. The generated input itself is a simple text field. The comma separation is checked only when parsing with the matching formParser.

Members have a basic Yesod field representing Html input fields. A BaseForm instance of type a is needed for generically producing forms for [a] and Maybe a types. An instance can be given manually with the Field constructor or using the convertField function on an existing Field.

Example

>>> instance BaseForm MyCoolType where baseForm = convertField toCool fromCool basisField

Class for generic generation of Html input forms for a given type. Bodyless instances can be declared for any type instancing Generic. Exception: Types with multiple constructors. Use utility functions for those or provide your own instance.

This is the main way to build generic forms. Use in conjunction with FieldInfo builders to generate a form.

Will fail if remaining FieldInfo structure is not empty, indicating the form is faulty.

Examples

>>> printWidget "en" $ formify (Nothing @Int) [[single "Age"]]
<div class="flex-form-div">
...
    <label for="flexident1">
      Age
    </label>
    <input id="flexident1" name="flex1" type="number" step="1" required="" value="">
...
</div>

>>> let defaults = ["Hallo", "Hello", "Hola", "Ciao"]
>>> printWidget "en" $ formify (Just defaults) [[listWithoutLabels Vertical 4 [("class","helloInput")]]]
<div class="flex-form-div">
...
    <input id="flexident1" ... type="text" ... value="Hallo" class="helloInput">
...
</div>
<div class="flex-form-div">
...
    <input id="flexident2" ... type="text" ... value="Hello" class="helloInput">
...
</div>
<div class="flex-form-div">
...
    <input id="flexident3" ... type="text" ... value="Hola" class="helloInput">
...
</div>
<div class="flex-form-div">
...
    <input id="flexident4" ... type="text" ... value="Ciao" class="helloInput">
...
</div>

>>> let labels = ["this one", "or rather that one", "I just cannot decide"]
>>> printWidget "en" $ formify (Nothing @SingleChoiceSelection) [[buttons Vertical "Make your choice" labels]]
<div class="flex-form-div">
...
    <label for="flexident1">
      Make your choice
    </label>
...
        <label for="flexident1-1">
          <div>
            <input id="flexident1-1" type="radio" ... value="1" ...>
            this one
          </div>
        </label>
...
        <label for="flexident1-2">
          <div>
            <input id="flexident1-2" type="radio" ... value="2" ...>
            or rather that one
          </div>
        </label>
...
        <label for="flexident1-3">
          <div>
            <input id="flexident1-3" type="radio" ... value="3" ...>
            I just cannot decide
          </div>
        </label>
...
</div>

like formify, but yields the individual sub-renders instead of a combined form. Retains the layout structure given by the FieldInfo list argument. This can be used in custom forms to incorporate generated inputs.

like formifyComponents, but takes a simple list of FieldInfo values. The sub-renders will also be returned as a flat list without any additional structure.

Value with given list of options selected. The order of list elements is inconsequential.

Value with no options selected.

Value with given number option selected.

Value with no option selected.

Create FieldInfo for a button field. Will turn into either radio buttons or checkboxes depending on the form type. Use with SingleChoiceSelection or MultipleChoiceSelection. Do not use with custom enum types. Use buttonsEnum instead.

See SingleChoiceSelection, MultipleChoiceSelection for example use.

Same as buttons, but using an explicit enum type. Use this with custom enum types to automatically create labels for all constructors according to the given showing scheme.

See formifyInstanceSingleChoice, formifyInstanceMultiChoice for example use.

Create FieldInfo for a dropdown menu field. Will turn into either single or multiple selection field depending on the form type. Use with SingleChoiceSelection or MultipleChoiceSelection. Do not use with custom enum types. Use dropdownEnum instead.

See SingleChoiceSelection, MultipleChoiceSelection for example use.

Same as dropdown, but using an explicit enum type. Use this with custom enum types to automatically create labels for all constructors according to the given showing scheme.

See formifyInstanceSingleChoice, formifyInstanceMultiChoice for example use.

Same as list, but without using any field labels. Attributes and CSS classes for each field cannot be set with this function. Instead, all fields share the given list of attributes. Use list if individual configuration is required.

See formify for example use.

Create FieldInfo for a list containing exact copies the specified field. The results of the copies will be handled as a list of values. Use to render lists of dropdown or button fields with identical labels.

Create FieldInfo for a number of arbitrary fields. Takes the builder to repeatedly use for each field and a list of values to use it on. Their result will be handled as a list of values. Use to render lists of dropdown or button fields with different labels.

Create FieldInfo for a standalone field. See formify for example use.

Premade formifyImplementation for types with BaseForm instances. Use within manual instances of Formify.

Example

>>> instance BaseForm MyCoolType where baseForm = convertField toCool fromCool basisField
>>> instance Formify MyCoolType where formifyImplementation = formifyInstanceBasicField

Same as formifyInstanceBasicField, but for optional fields with Maybe wrapping.

Example

>>> instance BaseForm MyCoolType where baseForm = convertField toCool fromCool basisField
>>> instance Formify (Maybe MyCoolType) where formifyImplementation = formifyInstanceOptionalField

Premade formifyImplementation for "single choice" forms of enum types. Use within manual instances of Formify.

Intended for use with types such as

data MyType = One | Two | Three deriving (Bounded, Enum, Eq, Show)

that cannot use a bodyless Formify instance.

Examples

>>> instance Formify MyType where formifyImplementation = formifyInstanceSingleChoice
>>> printWidget "en" $ formify (Just Two) [[buttonsEnum Horizontal "Choose one" (showToUniversalLabel @MyType)]]
...
<div class="flex-form-div">
...
    <label for="flexident1">
      Choose one
    </label>
...
        <label for="flexident1-1">
          <input id="flexident1-1" type="radio" ... value="1" ...>
          One
        </label>
        <label for="flexident1-2">
          <input id="flexident1-2" type="radio" ... value="2" checked ...>
          Two
        </label>
        <label for="flexident1-3">
          <input id="flexident1-3" type="radio" ... value="3" ...>
          Three
        </label>
...
</div>

>>> printWidget "en" $ formify (Just Two) [[dropdownEnum "Choose one" (showToUniversalLabel @MyType)]]
<div class="flex-form-div">
...
    <label for="flexident1">
      Choose one
    </label>
    <select id="flexident1" ...>
      <option value="1">
        One
      </option>
      <option value="2" selected>
        Two
      </option>
      <option value="3">
        Three
      </option>
    </select>
...
</div>

Same as formifyInstanceSingleChoice, but for multiple choice. This means the rendered input form will accept any number of inputs, resulting in a list of values. Possible builders to use with instances are buttonsEnum (checkboxes) and dropdownEnum (select list).

Examples

>>> instance Formify [MyType] where formifyImplementation = formifyInstanceMultiChoice
>>> printWidget "en" $ formify (Just [Two,Three]) [[buttonsEnum Horizontal "Choose" (showToUniversalLabel @MyType)]]
<div class="flex-form-div">
...
    <label for="flexident1">
      Choose
    </label>
...
...
      <label>
        <input type="checkbox" ... value="1">
        One
      </label>
      <label>
        <input type="checkbox" ... value="2" checked>
        Two
      </label>
      <label>
        <input type="checkbox" ... value="3" checked>
        Three
      </label>
...
</div>

>>> printWidget "en" $ formify (Just [Two,Three]) [[dropdownEnum "Choose some" (showToUniversalLabel @MyType)]]
<div class="flex-form-div">
...
    <label for="flexident1">
      Choose some
    </label>
    <select id="flexident1" ... multiple>
      <option value="1">
        One
      </option>
      <option value="2" selected>
        Two
      </option>
      <option value="3" selected>
        Three
      </option>
    </select>
...
</div>