Skip to content

Commit cba64b9

Browse files
mnoconmnocon
committed
Twig Components
1 parent a6897eb commit cba64b9

File tree

13 files changed

+312
-88
lines changed

13 files changed

+312
-88
lines changed

‎code_samples/back_office/content_type/config/custom_services.yaml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,4 @@ services:
44
arguments:
55
$template: '@@ibexadesign/content_type/edit/custom_tab.html.twig'
66
tags:
7-
- { name: ibexa.admin_ui.component, group: 'content-edit-sections' }
7+
- { name: ibexa.twig.component, group: 'content-edit-sections' }

‎code_samples/back_office/dashboard/article_tab/config/custom_services.yaml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,4 @@ services:
1010
arguments:
1111
$groupIdentifier: 'custom_group'
1212
tags:
13-
- { name: ibexa.admin_ui.component, group: 'dashboard-blocks' }
13+
- { name: ibexa.twig.component, group: 'dashboard-blocks' }

‎code_samples/back_office/search/config/append_to_services.yaml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ services:
2525
$template: '@@ibexadesign/ui/global_search_autocomplete_product_template.html.twig'
2626
$groupIdentifier: 'global-search-autocomplete-product'
2727
tags:
28-
- { name: ibexa.admin_ui.component, group: global-search-autocomplete-templates }
28+
- { name: ibexa.twig.component, group: global-search-autocomplete-templates }
2929

3030
App\Search\SortingDefinition\Provider\SectionNameSortingDefinitionProvider:
3131
tags:

‎code_samples/user_management/oauth_google/config/custom_services.yaml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,4 @@ services:
1010
arguments:
1111
$template: '@@ibexadesign/account/login/oauth2_login.html.twig'
1212
tags:
13-
- { name: ibexa.admin_ui.component, group: login-form-after }
13+
- { name: ibexa.twig.component, group: login-form-after }

‎docs/administration/back_office/back_office_elements/custom_components.md‎

Lines changed: 113 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -2,85 +2,116 @@
22
description: Back office components allow you to inject any custom widgets into selected places of the user interface.
33
---
44

5-
# Custom components
6-
7-
The back office has designated places where you can use your own components.
8-
9-
Components enable you to inject widgets (for example, **My dashboard** blocks) and HTML code (for example, a tag for loading JS or CSS files).
10-
A component is any class that implements the `Renderable` interface.
11-
It must be tagged as a service in `config/services.yaml`:
12-
13-
``` yaml
14-
App\Component\MyNewComponent:
15-
tags:
16-
- { name: ibexa.admin_ui.component, group: content-edit-form-before }
17-
```
18-
19-
`group` indicates where the widget is displayed. The available groups are:
20-
21-
- [`stylesheet-head`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/ui/layout.html.twig#L101)
22-
- [`script-head`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/ui/layout.html.twig#L102)
23-
- [`stylesheet-body`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/ui/layout.html.twig#L210)
24-
- [`script-body`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/ui/layout.html.twig#L211)
25-
- [`content-edit-form-before`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/user/edit.html.twig#L37)
26-
- [`content-edit-form-after`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/user/edit.html.twig#L47)
27-
- [`content-create-form-before`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/user/create.html.twig#L37)
28-
- [`content-create-form-after`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/user/create.html.twig#L45)
29-
- [`dashboard-blocks`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/ui/dashboard/dashboard.html.twig#L30)
30-
- [`dashboard-all-tab-groups`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/ui/dashboard/block/all.html.twig#L6)
31-
- [`dashboard-my-tab-groups`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/ui/dashboard/block/me.html.twig#L6)
32-
- [`content-type-tab-groups`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/content_type/index.html.twig#L37)
33-
- `calendar-widget-before`
34-
- [`login-form-before`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/account/login/index.html.twig#L7)
35-
- [`login-form-after`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/account/login/index.html.twig#L70)
36-
- [`global-search`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/ui/layout.html.twig#L129)
37-
38-
## Base component classes
39-
40-
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:
41-
42-
- `TwigComponent` renders a Twig template.
43-
- `LinkComponent` renders the HTML `<link>` tag.
44-
- `ScriptComponent` renders the HTML `<script>` tag.
45-
46-
In this case, all you have to do is add a service definition (with proper parameters), for example:
47-
48-
``` yaml
49-
appbundle.components.my_twig_component:
50-
parent: Ibexa\AdminUi\Component\TwigComponent
51-
autowire: true
52-
autoconfigure: false
53-
arguments:
54-
$template: path/to/file.html.twig
55-
$parameters:
56-
first_param: first_value
57-
second_param: second_value
58-
tags:
59-
- { name: ibexa.admin_ui.component, group: dashboard-blocks }
60-
```
61-
62-
This renders the `path/to/file.html.twig` template with `first_param` and `second_param` as parameters.
63-
64-
With `LinkComponent` and `ScriptComponent` you provide `$href` and `$src` as arguments:
65-
66-
``` yaml
67-
app.components.my_link_component:
68-
parent: Ibexa\AdminUi\Component\LinkComponent
69-
autowire: true
70-
autoconfigure: false
71-
arguments:
72-
$href: 'http://address.of/file.css'
73-
tags:
74-
- { name: ibexa.admin_ui.component, group: stylesheet-head }
75-
```
76-
77-
``` yaml
78-
app.components.my_script_component:
79-
parent: Ibexa\AdminUi\Component\ScriptComponent
80-
autowire: true
81-
autoconfigure: false
82-
arguments:
83-
$src: 'http://address.of/file.js'
84-
tags:
85-
- { name: ibexa.admin_ui.component, group: script-body }
86-
```
5+
# Customizing the back office
6+
7+
You can customize many of the back office views by using [Twig components](components.md).
8+
This allows you to inject your own custom logic and extend the templates.
9+
10+
The available groups for the back office are:
11+
12+
## Admin UI
13+
14+
| Group name | Template file |
15+
|---|---|
16+
| `login-form-after` | `vendor/ibexa/admin-ui/src/bundle/Resources/views/themes/admin/account/login/index.html.twig` |
17+
| `login-form-before` | `vendor/ibexa/admin-ui/src/bundle/Resources/views/themes/admin/account/login/index.html.twig` |
18+
|`content-create-form-before`| <ul><li>`vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/content/create/create.html.twig`</li><li> `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/on_the_fly/create_on_the_fly.html.twig`</li><li>`vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/user/create.html.twig` </li></ul>|
19+
|`content-create-form-after`| <ul><li>`vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/content/create/create.html.twig`</li><li>`vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/on_the_fly/create_on_the_fly.html.twig`</li><li> `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/user/create.html.twig`</li></ul> |
20+
|`content-edit-form-after`| <ul><li> `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/content/edit/edit.html.twig` </li><li> `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/on_the_fly/edit_on_the_fly.html.twig`</li><li> `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/user/edit.html.twig`</li></ul> |
21+
|`content-edit-form-before`| <ul><li>`vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/content/edit/edit.html.twig` `</li><li>`vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/on_the_fly/edit_on_the_fly.html.twig``</li><li> `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/user/edit.html.twig`</li></ul> |
22+
|`content-edit-sections`| <ul><li>`vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/content/edit/edit.html.twig`</li><li>`vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/on_the_fly/create_on_the_fly.html.twig`</li><li>`vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/on_the_fly/edit_on_the_fly.html.twig`</li></ul> |
23+
|`content-form-create-header-actions`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/content/create/create.html.twig` |
24+
|`content-form-edit-header-actions`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/content/edit/edit.html.twig` |
25+
|`content-tree-after`| `vendor/ibexa/admin-ui/src/bundle/Resources/views/themes/admin/content/location_view.html.twig` |
26+
|`content-tree-before`| `vendor/ibexaadmin-ui/src/bundle/Resources/views/themes/admin/content/location_view.html.twig` |
27+
|`content-type-edit-sections`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/content_type/edit.html.twig` |
28+
|`content-type-tab-groups`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/content_type/index.html.twig` |
29+
|`dashboard-all-tab-groups`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/dashboard/block/all.html.twig` |
30+
|`dashboard-blocks`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/dashboard/dashboard.html.twig` |
31+
|`dashboard-my-tab-groups`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/dashboard/block/me.html.twig` |
32+
|`distraction-free-mode-extras`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig` |
33+
|`form-content-add-translation-body`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/content/modal/add_translation.html.twig` |
34+
|`global-search-autocomplete-templates`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/global_search.html.twig` |
35+
|`global-search`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/layout.html.twig` |
36+
|`header-user-menu-middle`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/menu/user.html.twig` |
37+
|`image-edit-actions-after`| <ul><li>`vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/field_type/edit/ezimage.html.twig` </li><li>`vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/field_type/edit/ezimageasset.html.twig` </li></ul>|
38+
|`layout-content-after`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/layout.html.twig` |
39+
|`link-manager-block`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/url_management/url_management.html.twig` |
40+
|`location-view-content-alerts`| `vendor/ibexa/admin-ui/src/bundle/Resources/views/themes/admin/content/location_view.html.twig` |
41+
|`location-view-tab-groups`| `vendor/ibexa/admin-ui/src/bundle/Resources/views/themes/admin/content/location_view.html.twig` |
42+
|`location-view-tabs-after`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/tab/location_view.html.twig` |
43+
|`script-body`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/layout.html.twig` |
44+
|`script-head`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/layout.html.twig` |
45+
|`stylesheet-body`| <ul><li>`vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/layout_error.html.twig`</li><li>`vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/layout.html.twig`</li> |
46+
|`stylesheet-head`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/layout.html.twig` |
47+
|`systeminfo-tab-groups`| `vendor/ibexa/system-info/src/bundle/Resources/views/themes/admin/system_info/info.html.twig` |
48+
|`user-menu`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/layout.html.twig` |
49+
|`user-profile-blocks`| `vendor/ibexa/admin-ui/src/bundle/Resources/views/themes/admin/account/profile/view.html.twig` |
50+
51+
## Calendar
52+
53+
| Group name | Template file |
54+
|---|---|
55+
|`calendar-widget-before`| `vendor/ibexa/calendar/src/bundle/Resources/views/themes/admin/calendar/view.html.twig` |
56+
57+
## Site Context
58+
59+
| Group name | Template file |
60+
|---|---|
61+
|`content-tree-before`| `vendor/ibexa/site-context/src/bundle/Resources/views/themes/admin/content/fullscreen.html.twig` |
62+
|`content-tree-after`| `vendor/ibexa/site-context/src/bundle/Resources/views/themes/admin/content/fullscreen.html.twig` |
63+
64+
## Product Catalog
65+
66+
| Group name | Template file |
67+
|---|---|
68+
|`attribute-definition-block`| `vendor/ibexa/product-catalog/src/bundle/Resources/views/themes/admin/product_catalog/attribute_definition/view.html.twig` |
69+
|`attribute-definition-options-block`| `pvendor/ibexa/roduct-catalog/src/bundle/Resources/views/themes/admin/product_catalog/attribute_definition/tab/details.html.twig` |
70+
|`attribute-group-block`| `vendor/ibexa/product-catalog/src/bundle/Resources/views/themes/admin/product_catalog/attribute_group/view.html.twig` |
71+
|`catalog-block`| `vendor/ibexa/product-catalog/src/bundle/Resources/views/themes/admin/product_catalog/catalog/view.html.twig` |
72+
|`customer-group-block`| `vendor/ibexa/product-catalog/src/bundle/Resources/views/themes/admin/product_catalog/customer_group/view.html.twig` |
73+
|`product-create-form-header-actions`| `vendor/ibexa/product-catalog/src/bundle/Resources/views/themes/admin/product_catalog/product/create.html.twig` |
74+
|`product-create-form-after`| `vendor/ibexa/product-catalog/src/bundle/Resources/views/themes/admin/product_catalog/product/create.html.twig` |
75+
|`product-edit-form-header-actions`| `vendor/ibexa/product-catalog/src/bundle/Resources/views/themes/admin/product_catalog/product/edit.html.twig` |
76+
|`product-edit-form-after`| `vendor/ibexa/product-catalog/src/bundle/Resources/views/themes/admin/product_catalog/product/edit.html.twig` |
77+
|`product-block`| `vendor/ibexa/product-catalog/src/bundle/Resources/views/themes/admin/product_catalog/product/view.html.twig` |
78+
|`product-type-block`| `vendor/ibexa/product-catalog/src/bundle/Resources/views/themes/admin/product_catalog/product_type/view.html.twig` |
79+
80+
## Taxonomy
81+
82+
| Group name | Template file |
83+
|---|---|
84+
|`location-view-tab-groups`| `vendor/ibexa/taxonomy/src/bundle/Resources/views/themes/admin/ibexa/taxonomy/taxonomy_entry/show.html.twig` |
85+
86+
## Page Builder [[% include 'snippets/experience_badge.md' %]]
87+
88+
| Group name | Template file |
89+
|---|---|
90+
|`infobar-options-before`| `vendor/ibexa/page-builder/src/bundle/Resources/views/page_builder/infobar/base.html.twig` |
91+
92+
## Order Management [[% include 'snippets/commerce_badge.md' %]]
93+
94+
| Group name | Template file |
95+
|---|---|
96+
|`order-details-summary-stats`| `vendor/ibexa/order-management/src/bundle/Resources/views/themes/admin/order_management/order/details_summary.html.twig` |
97+
|`order-details-summary-grid`| `vendor/ibexa/order-management/src/bundle/Resources/views/themes/admin/order_management/order/details_summary.html.twig` |
98+
99+
## Payments [[% include 'snippets/commerce_badge.md' %]]
100+
101+
| Group name | Template file |
102+
|---|---|
103+
|`payment-method-tabs`| `vendor/ibexa/payment/src/bundle/Resources/views/themes/admin/payment_method/view.html.twig` |
104+
105+
## Shipping [[% include 'snippets/commerce_badge.md' %]]
106+
107+
| Group name | Template file |
108+
|---|---|
109+
|`shipment-summary-grid`| `vendor/ibexa/shipping/src/bundle/Resources/views/themes/admin/shipment/tab/summary.html.twig` |
110+
|`shipping-method-block`| `vendor/ibexa/shipping/src/bundle/Resources/views/themes/admin/shipping/shipping_method/view.html.twig` |
111+
112+
## AI Actions [[% include 'snippets/lts-update_badge.md' %]]
113+
114+
| Group name | Template file |
115+
|---|---|
116+
|`action-configuration-tabs`| `vendor/ibexa/connector-ai/src/bundle/Resources/views/themes/admin/connector_ai/action_configuration/view.html.twig` |
117+

‎docs/administration/back_office/back_office_tabs/back_office_tabs.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ To create a tab group, register it as a service:
7171
[[= include_file('code_samples/back_office/dashboard/article_tab/config/custom_services.yaml', 0, 1) =]][[= include_file('code_samples/back_office/dashboard/article_tab/config/custom_services.yaml', 7, 13) =]]
7272
```
7373

74-
Tag the group with `ibexa.admin_ui.component`.
74+
Tag the group with `ibexa.twig.component`.
7575
`group` indicates where the group is rendered.
7676

77-
For a list of possible rendering places, see [Injecting custom components](custom_components.md).
77+
To learn more about this mechanism and the available groups, see [Twig Components](components.md).

‎docs/api/event_reference/twig_component_events.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
description: Events that are triggered when rendering Twig Components.
3+
page_type: reference
4+
month_change: false
5+
---
6+
7+
# Twig Components events
8+
9+
Use the events to hook into the rendering process of [Twig Components](components.md).
10+
11+
## Twig Component rendering
12+
13+
| Event | Dispatched by | Description |
14+
|---|---|---|
15+
|`RenderGroupEvent`| `\Ibexa\TwigComponents\Component\Renderer\DefaultRenderer::renderGroup()` | Dispatched before a Component group is rendered
16+
|`RenderSingleEvent`| `\Ibexa\TwigComponents\Component\Renderer\DefaultRenderer::renderSingle()` |Dispatched before a single Component is rendered

0 commit comments

Comments
 (0)