custom_components.md

description
Back Office components allow you to inject any custom widgets into selected places of the user interface.

Custom components

The Back Office has designated places where you can use your own components.

Components enable you to inject widgets (for example, My dashboard blocks) and HTML code (for example, a tag for loading JS or CSS files). A component is any class that implements the Renderable interface. It must be tagged as a service in config/services.yaml:

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

group indicates where the widget is displayed. The available groups are:

• stylesheet-head
• script-head
• stylesheet-body
• script-body
• content-edit-form-before
• content-edit-form-after
• content-create-form-before
• content-create-form-after
• dashboard-blocks
• dashboard-all-tab-groups
• dashboard-my-tab-groups
• content-type-tab-groups
• calendar-widget-before
• login-form-before
• login-form-after
• global-search

Base component classes

If you only need to inject a short element (for example, a Twig template or a CSS link) without writing a class, you can make use of the following base classes:

• TwigComponent renders a Twig template.
• LinkComponent renders the HTML <link> tag.
• ScriptComponent renders the HTML <script> tag.

In this case, all you have to do is add a service definition (with proper parameters), for example:

appbundle.components.my_twig_component:
    parent: Ibexa\AdminUi\Component\TwigComponent
    autowire: true
    autoconfigure: false
    arguments:
        $template: path/to/file.html.twig
        $parameters:
            first_param: first_value
            second_param: second_value
    tags:
        - { name: ibexa.admin_ui.component, group: dashboard-blocks }

This renders the path/to/file.html.twig template with first_param and second_param as parameters.

With LinkComponent and ScriptComponent you provide $href and $src as arguments, respectively:

app.components.my_link_component:
    parent: Ibexa\AdminUi\Component\LinkComponent
    autowire: true
    autoconfigure: false
    arguments:
        $href: 'http://address.of/file.css'
    tags:
        - { name: ibexa.admin_ui.component, group: stylesheet-head }

app.components.my_script_component:
    parent: Ibexa\AdminUi\Component\ScriptComponent
    autowire: true
    autoconfigure: false
    arguments:
        $src: 'http://address.of/file.js'
    tags:
        - { name: ibexa.admin_ui.component, group: script-body }