Using Views for Section Layouts


Related Links

Introduction

Sections are a versatile way for you to define the layout for your form. Sometimes rows, columns, tabs, etc are not enough. This article will describe how to delegate a form section to a custom view.

The Section Definition

To get started simply define the view attribute in your section definition. The view should be defined as if you were passing it to the view() function:

protected $sections = [
    'general' => [
        'fields' => [
            'name'
        ],
    ],
    'custom' => [
        'view' => 'anomaly.module.example::form/section'
    ]
];

Notice you can mix in custom sections like this with any number of other sections.

The Section View

The view will not have any kind of wrapper at all - so you may want to start with the default section block using Bootstrap cards:

<div class="card">
    <div class="card-block">

        // Your content

    </div>
</div>

Rendering Fields

In order to render fields including any translations and make the form appear and behave normal then use the translations method on the form's field collection:

{% for field in form.fields.translations('description') %}
    {{ field.render({'form': form})|raw }}
{% endfor %}

You can also use input for example or render them as single fields for example:

{{ form.fields.description.input|raw }}

Creative Thinking

You don't have to render fields in form sections. You can also use custom sections like this to bring in additional information and content like:

  • Tables of related data
  • Stats or analytics of some kind
  • Display information about the entry
  • Help and tutorial information for the user