Front End Modules

Front end modules in Contao are used for more complex functionality, which are typically used on more than one page or even in page layouts. They are used to generate dynamic content, like news lists, displaying the detailed content of news or navigation items.

These modules are implemented as so called fragment controllers which Contao then renders into the main content, using their defined renderer. See the caching documentation for more information.

Creating a front end module is very similar to creating content elements.

Definition

To create a new front end module, the following things must be defined and implemented:

• Fragment Controller
  The actual implementation of the front end module is done via a class that extends from AbstractFrontendModuleController of the Contao core.

• Service Tag
  To identify the controller as a Contao front end module, the service must be tagged with service tag contao.frontend_module.

  • Type
    The type of a front end module is a specific string which is used to identify the front end module’s template and DCA palette. The type can be set in the service tag. If omitted the type will be automatically generated by converting the class name of the controller from pascal case to snake case and removing a possible Controller postfix.

  • Category
    All front end modules are categorised within the type dropdown of the front end module’s palette. A category must be defined in the service tag for each module.

• Template
  If not specified, the template name follows the naming convention mentioned for the type and prepends it with the prefix mod_ in case of legacy PHP templates. For Twig templates it will default to frontend_module/<type>.html.twig.

Example

Consider this fairly simple example of a front end module:

// src/Controller/FrontendModule/ExampleModuleController.php
namespace App\Controller\FrontendModule;

use Contao\CoreBundle\Controller\FrontendModule\AbstractFrontendModuleController;
use Contao\CoreBundle\Exception\RedirectResponseException;
use Contao\CoreBundle\DependencyInjection\Attribute\AsFrontendModule;
use Contao\ModuleModel;
use Contao\PageModel;
use Contao\Template;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;

#[AsFrontendModule(category: 'miscellaneous')]
class ExampleModuleController extends AbstractFrontendModuleController
{
    protected function getResponse(Template $template, ModuleModel $model, Request $request): Response
    {
        if ($request->isMethod(Request::METHOD_POST)) {
            if (null !== ($redirectPage = PageModel::findById($model->jumpTo))) {
                throw new RedirectResponseException($redirectPage->getAbsoluteUrl());
            }
        }

        $template->action = $request->getUri();

        return $template->getResponse();
    }
}

In this example the service tag was implemented via PHP attributes. The controller itself processes the request and checks, if it was a POST request. In that case, the redirect page is loaded via Contao’s model functionality and a RedirectResponseException is thrown to redirect to that page.

In order to be able to set the options for our front end module in the back end, we also need to define a palette in the tl_module DCA configuration. The palette key is based on the type of the front end module. Since we did not specify a type in our example it defaults to example_module as explained above.

// contao/dca/tl_module.php
$GLOBALS['TL_DCA']['tl_module']['palettes']['example_module'] = 
    '{title_legend},name,type;{redirect_legend},jumpTo'
;

This very simple palette enables us to select a redirect page using the pre-existing jumpTo field.

Using the naming convention for templates also mentioned above, the final template name for this front end module will be mod_example_module for PHP templates:

<!-- templates/mod_example_module.html5 -->
<div class="example-module">   
  <form action="<?= $this->action ?>" method="POST"> 
    <input type="hidden" name="REQUEST_TOKEN" value="{{request_token}}">
    <button type="submit">Submit</button>
  </form>
</div>

since 4.13 And frontend_module/example_module for Twig templates:

{# templates/frontend_module/example_module.html.twig #}
<div class="example-module">   
    <form action="{{ action }}" method="POST"> 
        <input type="hidden" name="REQUEST_TOKEN" value="{{ request_token }}">
        <button type="submit">Submit</button>
    </form>
</div>

A template instance of the respective template will automatically be generated and passed to the controller’s main method. The controller returns the parsed template as a response.

Registration

As mentioned previously a front end module is registered by registering a controller as a service and tagging it with the contao.frontend_module service tag. The service tag supports the following options:

Applying the service tag can either be done via PHP attributes, annotations or via the YAML configuration.

// src/Controller/FrontendModule/ExampleModuleController.php
namespace App\Controller\FrontendModule;

use Contao\CoreBundle\Controller\FrontendModule\AbstractFrontendModuleController;
use Contao\CoreBundle\DependencyInjection\Attribute\AsFrontendModule;
use Contao\ModuleModel;
use Contao\Template;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;

#[AsFrontendModule(category: 'miscellaneous')]
class ExampleModuleController extends AbstractFrontendModuleController
{
    protected function getResponse(Template $template, ModuleModel $model, Request $request): Response
    {
        return $template->getResponse();
    }
}

// src/Controller/FrontendModule/ExampleModuleController.php
namespace App\Controller\FrontendModule;

use Contao\CoreBundle\Controller\FrontendModule\AbstractFrontendModuleController;
use Contao\CoreBundle\DependencyInjection\Attribute\AsFrontendModule;
use Contao\ModuleModel;
use Contao\Template;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;

#[AsFrontendModule('example', category: 'miscellaneous', template: 'mod_example', renderer: 'forward', method: '__invoke')]
class ExampleModuleController extends AbstractFrontendModuleController
{
    protected function getResponse(Template $template, ModuleModel $model, Request $request): Response
    {
        return $template->getResponse();
    }
}

// src/Controller/FrontendModule/ExampleModuleController.php
namespace App\Controller\FrontendModule;

use Contao\CoreBundle\Controller\FrontendModule\AbstractFrontendModuleController;
use Contao\CoreBundle\ServiceAnnotation\FrontendModule;
use Contao\ModuleModel;
use Contao\Template;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;

/**
 * @FrontendModule(category="miscellaneous")
 */
class ExampleModuleController extends AbstractFrontendModuleController
{
    protected function getResponse(Template $template, ModuleModel $model, Request $request): Response
    {
        return $template->getResponse();
    }
}

// src/Controller/FrontendModule/ExampleModuleController.php
namespace App\Controller\FrontendModule;

use Contao\CoreBundle\Controller\FrontendModule\AbstractFrontendModuleController;
use Contao\CoreBundle\ServiceAnnotation\FrontendModule;
use Contao\ModuleModel;
use Contao\Template;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;

/**
 * @FrontendModule("example", category="miscellaneous", template="mod_example", renderer="forward", method="__invoke")
 */
class ExampleModuleController extends AbstractFrontendModuleController
{
    protected function getResponse(Template $template, ModuleModel $model, Request $request): Response
    {
        return $template->getResponse();
    }
}

# config/services.yaml
services:
    App\Controller\FrontendModule\ExampleModuleController:
        tags:
            -
                name: contao.frontend_module
                category: miscellaneous

// src/Controller/FrontendModule/ExampleModuleController.php
namespace App\Controller\FrontendModule;

use Contao\CoreBundle\Controller\FrontendModule\AbstractFrontendModuleController;
use Contao\ModuleModel;
use Contao\Template;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;

class ExampleModuleController extends AbstractFrontendModuleController
{
    protected function getResponse(Template $template, ModuleModel $model, Request $request): Response
    {
        return $template->getResponse();
    }
}

# config/services.yaml
services:
    App\Controller\FrontendModule\ExampleModuleController:
        tags:
            -
                name: contao.frontend_module
                category: miscellaneous
                template: mod_example
                renderer: forward
                method: __invoke

You can also use class constants within attributes and annotations. This can be helpful to make the module’s type a reusable reference:

#[AsFrontendModule(ExampleModuleController::TYPE, 'miscellaneous')]
class ExampleModuleController extends AbstractFrontendModuleController
{
    public const TYPE = 'my_module';
}

// contao/dca/tl_module.php
use App\Controller\FrontendModule\ExampleModuleController;

$GLOBALS['TL_DCA']['tl_module']['palettes'][ExampleModuleController::TYPE] = 
    '{title_legend},name,type;{redirect_legend},jumpTo'
;

// contao/languages/en/modules.php
use App\Controller\FrontendModule\ExampleModuleController;

$GLOBALS['TL_LANG']['FMD'][ExampleModuleController::TYPE] = [
    'My example module', 
    'A front end module for testing purposes.',
];

Translations

In order to have a nice label in the back end, we also need to add a translation for our front end module - otherwise it will only be named example_module. The translation needs to be set as follows:

// contao/languages/en/modules.php
$GLOBALS['TL_LANG']['FMD']['example_module'] = [
    'My front end module', 
    'A front end module for testing purposes.',
];

If you used a custom category for your front end module, its label can also be translated there.

Page Model

If your fragment extends from AbstractFrontendModuleController (or just AbstractFragmentController) you can use $this->getPageModel() in order to receive the \Contao\PageModel object of the currently rendered page of Contao’s site structure.

// src/Controller/FrontendModule/ExampleModuleController.php
namespace App\Controller\FrontendModule;

use Contao\CoreBundle\Controller\FrontendModule\AbstractFrontendModuleController;
use Contao\CoreBundle\Exception\RedirectResponseException;
use Contao\CoreBundle\DependencyInjection\Attribute\AsFrontendModule;
use Contao\ModuleModel;
use Contao\PageModel;
use Contao\Template;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;

#[AsFrontendModule(category: 'miscellaneous')]
class ExampleModuleController extends AbstractFrontendModuleController
{
    protected function getResponse(Template $template, ModuleModel $model, Request $request): Response
    {
        $page = $this->getPageModel();

        // Get some information about the current page
        $template->rootTitle = $page->rootPageTitle ?: $page->rootTitle;

        return $template->getResponse();
    }
}

Read More

• DCA Configuration reference
• Manipulate and create palettes
• Create and use templates
• Customize Caching