DEPRECATION WARNING

This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.

Fluid Form Elements

This is a TYPO3 extension which simplifies the usage of the Fluid form view helpers.

Installation

composer require spooner-web/fluid-form-elements

Why using these view helpers?

Are you tired of collecting the same records for your select again and again?
Do you manage your labels for BE and FE twice?
Do you copy/paste your template around the form elements?

Now these times are over. With Fluid Form Elements you:

  • can set your own template wrapping the form elements
  • can use the built-in Bootstrap templates (default and horizontal)
  • get all records by the repository for your select automatically (based on the given property)
  • get the label determined automatically on the general label tablename.fieldname
  • can set the Bootstrap grid classes to use in horizontal form (default is col-sm-3/col-sm-9)

Usage

After installation, the extension uses the namespace ffe globally.
You are able to set the wanted template (currently default and horizontal Bootstrap form) in the extension configuration.
Then you can start directly in your extension by using the new view helpers.

Examples of usage

  1. By using the textfield view helper <ffe:form.textfield property="name" /> you get the Bootstrap template

    div class="form-group">
    <label for="<!-- the property path, uses as ID -->"><!-- the determined label --></label>
    <!-- the rendered textfield by the original Fluid view helper -->
</div>

    or horizontal Bootstrap (v4)

    <ffe:form classLabelColumn="col-sm-4" classFieldColumn="col-sm-8">
    <div class="form-group row">
        <label class="col-form-label <!-- given column bootstrap label class, set in <ffe:form />, default "col-sm-3" -->" for="<!-- the property path, uses as ID -->"><!-- the determined label --></label>
        <div class="<!-- given column bootstrap field class, set in <ffe:form />, default "col-sm-9" -->">
            <!-- the rendered textfield by the original Fluid view helper -->
        </div>
    </div>
</ffe:form>

  2. By using the select view helper <ffe:form.select property="country" /> it determines what is given in your model behind the property country. If there is a relation to another model, it looks for the related repository and calls findAll() to get all records.

  3. You can override arguments by using them, e.g. <ffe:form.select property="country" objects="{countries}" /> and you can fill the select with your own data.

  4. By using the argument label you can use your own label, e.g. <ffe:form.textarea property="description" label="My description" />

Usable view helper

  • FormViewHelper
  • TextfieldViewHelper
  • TextareaViewHelper
  • SelectViewHelper
  • CheckboxViewHelper
  • RadioViewHelper

Feedback

Please write me via mail or create an issue in GitLab