Compose two forms sequentially. The result contains all fields from both input forms. This is used to compose formify generated forms with custom ones.

Note that forms generated by formify will always be wrapped in an outer <div> tag. This means composing such a form with something else results in a line break. You may circumvent this via CSS rules on the 'flex-form-div' class.

Example

>>> printWidget "de" $ myForm $$> myOtherForm
<div class="flex-form-div">
...
    <label for="flexident1">
      ...
    </label>
...
</div>
<div class="flex-form-div">
...
    <label for="flexident2">
      ...
    </label>
...
</div>

Add CSS to a form. Use with Yesod Cassius or Lucius Shakespeare quasi quoters. The content will be inserted in a <style> tag at the top of the document.

Example

>>> printWidget "en" $ addCss [lucius| myClass {margin: 2px}|] myForm
<style>
  myClass{margin:2px}
</style>
<div class="flex-form-div">
...
</div>

Add JavaScript to a form. Use with Yesod Julius Shakespeare quasi quoters. The content will be inserted in a <script> tag at the bottom of the document.

Example

>>> printWidget "de" $ addJs [julius|myFunc(){ console.log("Hi"); }|] myForm
<div class="flex-form-div">
...
</div>
<script>
  myFunc(){ console.log("Hi"); }
</script>

Like addCss and addJs, but for including CSS and JavaScript in one step.

Apply some function to the embedded Widget of a Rendered value. This can be used to alter the form HTML after using formify, e.g. if some custom text is to be included with the element.

Example

>>> printWidget "de" $ applyToWidget ([whamlet| <h1>Insert me at once!|] >>) myForm
<h1>
  Insert me at once!
</h1>
<div class="flex-form-div">
...
</div>

Extract a form from the environment. The result is an IO embedded tuple of field IDs and a map of language and internationalized html pairs.

Add an attribute-value pair to the given FieldSettings.

Example

>>> addAttribute ("type","hidden") "testSettings" :: FieldSettings FlexForm
FieldSettings {fsLabel = (German: "testSettings", English: "testSettings"), ..., fsAttrs = [("type","hidden")]}

Add a list of attribute-value pairs to the given FieldSettings.

Add a CSS class to the given FieldSettings.

Example

>>> addCssClass "nav" "testSettings" :: FieldSettings FlexForm
FieldSettings {fsLabel = (German: "testSettings", English: "testSettings"), ..., fsAttrs = [("class","nav")]}

Directly create a Yesod FieldSettings with this name and CSS Class.

Using the IsString instance of `FieldSettings a` only sets the label. The name is then auto generated. Useful when writing a custom form to group multiple inputs.

Example

>>> addNameAndCssClass "testSettings" "nav" :: FieldSettings FlexForm
FieldSettings {..., fsName = Just "testSettings", fsAttrs = [("class","nav")]}

Turn FieldSettings into a read-only input field.

Turn a String into a label for all languages.

Example

>>> universalLabel "index"
(German: "index", English: "index")

Turn the Show instance of a value into a label for all languages.

Example

>>> showToUniversalLabel (1 :: Int)
(German: "1", English: "1")

Get a unique identifier for an html element. The format is "flexident[number]"

Get a unique name for an html element. The format is "flex[number]"

repeat the last received name.

Pretty prints the given embedded Widget's HTML code in the console. Applies the specified language for internationalization. Used for debugging.

Example

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