• Documentation >
• Templating >
• Twig Components

Twig Components

Twig Components are widgets (for example, My dashboard blocks from Headless edition) and HTML code (for example, a tag for loading JS or CSS files) that you can inject into the existing templates to customize and extend the user interface. They are combined into groups that are rendered in designated templates.

Built-in Twig Component groups are available for the back office, but you can create your own for use anywhere.

To learn which groups are available in a given view, use the integration with Symfony Profiler.

Create Twig Component

You can create Twig Components in one of two ways:

PHP code

Create a class implementing the \Ibexa\Contracts\TwigComponents\ComponentInterface interface and register it as a service by using the ibexa.twig.component service tag, for example:

App\Component\MyNewComponent:
    tags:
        - { name: ibexa.twig.component, group: content-edit-form-before, priority: 0 }

The available attributes are:

• group - indicates the group to which the component belongs
• priority - indicates the priority of rendering this component when rendering the whole component group. The higher the value the earlier the component is rendered

This way requires writing custom code, but it allows you to fully control the rendering of the component.

YAML configuration

You can create a Twig Component and add it to a group using YAML configuration, as in the example below:

ibexa_twig_components:
    # Component group
    storefront-before-head:
        # Component name
        google_tag_manager:
            type: script
            arguments:
                src: 'https://...'

The Component priority cannot be specified when using the YAML configuration, but it allows you to use the built-in components to quickly achieve common goals.

You can use an unique group name when creating a Twig Component to create your own group.

Built-in components

Name	Description	YAML type
Script	Renders a <script> tag	script
Stylesheet	Renders a <link> tag	stylesheet
Template	Renders a Twig template	template
Controller	Renders a Symfony controller	controller
HTML	Renders static HTML	html

Example

The following example shows how you can use each of the built-in components to customize the back office:

ibexa_twig_components:
    admin-ui-user-menu:
        custom-html-component:
            type: html
            arguments:
                content: '<b>Hello world!</b>'
        custom-template-component:
            type: template
            arguments:
                template: '@ibexadesign/ui/component/user_thumbnail/user_thumbnail.html.twig'
                parameters:
                    user_content:
                        name: "Thumbnail"
                        thumbnail:
                            resource: https://placecats.com/100/100
        custom-controller-component:
            type: controller
            arguments:
                controller: '\App\Controller\MyController::requestAction'
                parameters:
                    parameter1: 'custom'
                    parameter2: true
    admin-ui-stylesheet-head:
        custom-link-component:
            type: stylesheet
            arguments:
                href: 'https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&amp;display=fallback'
                rel: stylesheet
                crossorigin: anonymous
                integrity: sha384-LN/mLhO/GN6Ge8ZPvI7uRsZpiXmtSkep+aFlJcHa8by4TvA34o1am9sa88eUzKTD
                type: text/css
    admin-ui-script-head:
        custom-script-component:
            type: script
            arguments:
                src: 'https://doc.ibexa.co/en/latest/js/custom.js'
                crossorigin: anonymous
                defer: false
                async: true
                integrity: sha384-Ewi2bBDtPbbu4/+fs8sIbBJ3zVl0LDOSznfhFR/JBK+SzggdRdX8XQKauWmI9HH2
                type: text/javascript

Render Twig Components

Render both single Twig Components and whole groups using the dedicated Twig functions. You can modify the Component rendering process by:

• listening to one of the related events
• decorating the \Ibexa\Contracts\TwigComponents\Renderer\RendererInterface service

Symfony Profiler integration

Use the built-in integration with Symfony Profiler to see which Twig Components have been rendered in a given view. In the Ibexa DXP tab you can find:

• the list of all rendered Twig Component groups by the given view, including empty groups
• the list of rendered Twig Components with information about the group they belong to