Yesod.Form.MultiInput

A module providing a means of creating multiple input forms without the need to submit the form to generate a new input field unlike in MassInput.

Documentation

data MultiSettings site

By default delete buttons have a margin-left property of 0.75rem. You can override this by specifying an alternative value in a class which is then passed inside MultiSettings.

Since: 1.7.0

Constructors

MultiSettings

Fields

• msAddClass :: !Text

  Class to be applied to the "add another" button.

• msDelClass :: !Text

  Class to be applied to the "delete" button.

• msTooltipClass :: Text

  Only used in applicative forms. Class to be applied to the tooltip.

• msWrapperErrClass :: !Text

  Class to be applied to the wrapper if it's field has an error.

• msAddInner :: !(Maybe Html)

  Inner Html of add button, defaults to "Add Another". Useful for adding icons inside buttons.

• msDelInner :: !(Maybe Html)

  Inner Html of delete button, defaults to Delete. Useful for adding icons inside buttons.

• msErrWidget :: Maybe (Html -> WidgetFor site ())

  Only used in applicative forms. Create a widget for displaying errors.

data MultiView site

The general structure of each individually generated field is as follows. There is an external wrapper element containing both an inner wrapper and any error messages that apply to that specific field. The inner wrapper contains both the field and it's corresponding delete button.

The structure is illustrated by the following:

<div .#{wrapperClass}>
    <div .#{wrapperClass}-inner>
        ^{fieldWidget}
        ^{deleteButton}
    ^{maybeErrorMessages}

Each wrapper element has the same class which is automatically generated. This class is returned in the MultiView should you wish to change the styling. The inner wrapper uses the same class followed by -inner. By default the wrapper and inner wrapper has classes are as follows:

.#{wrapperClass} {
    margin-bottom: 1rem;
}

.#{wrapperClass}-inner {
    display: flex;
    flex-direction: row;
}

Since: 1.7.0

Constructors

MultiView

Fields

• mvCounter :: FieldView site

  Hidden counter field.

• mvFields :: [FieldView site]

  Input fields.

• mvAddBtn :: FieldView site

  Button to add another field.

• mvWrapperClass :: Text

  Class applied to a div wrapping each field with it's delete button.

mmulti :: (site ~ HandlerSite m, MonadHandler m, RenderMessage site FormMessage) => Field m a -> FieldSettings site -> [a] -> Int -> MultiSettings site -> MForm m (FormResult [a], MultiView site)

Converts a form field into a monadic form containing an arbitrary number of the given fields as specified by the user. Returns a list of results, failing if the length of the list is less than the minimum requested values.

Since: 1.6.0

amulti :: (site ~ HandlerSite m, MonadHandler m, RenderMessage site FormMessage) => Field m a -> FieldSettings site -> [a] -> Int -> MultiSettings site -> AForm m [a]

Applicative equivalent of mmulti.

Note about tooltips: Rather than displaying the tooltip alongside each field the tooltip is displayed once at the top of the multi-field set.

Since: 1.6.0

bs3Settings :: MultiSettings site

MultiSettings for Bootstrap 3.

Since: 1.6.0

bs3FASettings :: MultiSettings site

MultiSettings for Bootstrap 3 with Font Awesome 5 Icons. Uses fa-plus for the add button and fa-trash-alt for the delete button.

Since: 1.7.0

bs4Settings :: MultiSettings site

MultiSettings for Bootstrap 4.

Since: 1.6.0

bs4FASettings :: MultiSettings site

MultiSettings for Bootstrap 4 with Font Awesome 5 Icons. Uses fa-plus for the add button and fa-trash-alt for the delete button.

Since: 1.7.0