[FEATURE] On detail page allow field to occupy full width of tab

doc/fields.rst

@@ -556,6 +556,12 @@ Design Options
         // (this is not used in the 'edit'/'new' pages because they use Symfony Forms themes)
         ->setTemplatePath('admin/fields/my_template.html.twig')
 
+        // if you need to access custom twig variables setted via call to CrudController::configureResponseParameters
+        ->setWithTwigContext(true)
+
+        // Display field as full-width, remove completly dt,dd tags and label
+        ->setFullWidth(true)
+
         // useful for example to right-align numbers/money values (this setting is ignored in 'detail' page)
         ->setTextAlign('right')
     ;

src/Dto/FieldDto.php

@@ -26,6 +26,8 @@ final class FieldDto
     private ?string $permission = null;
     private ?string $textAlign = null;
     private $help;
+    private bool $fullWidth = false;
+    private bool $withTwigContext = false;
     private string $cssClass = '';
     // how many columns the field takes when rendering
     // (defined as Bootstrap 5 grid classes; e.g. 'col-md-6 col-xxl-3')
@@ -262,6 +264,30 @@ public function setHelp(TranslatableInterface|string $help): void
         $this->help = $help;
     }
 
+    public function setFullWidth(bool $fullWidth = true): self
+    {
+        $this->fullWidth = $fullWidth;
+
+        return $this;
+    }
+
+    public function getFullWidth(): bool
+    {
+        return $this->fullWidth;
+    }
+
+    public function setWithTwigContext(bool $withTwigContext = true): self
+    {
+        $this->withTwigContext = $withTwigContext;
+
+        return $this;
+    }
+
+    public function getWithTwigContext(): bool
+    {
+        return $this->withTwigContext;
+    }
+
     public function getCssClass(): string
     {
         return $this->cssClass;

src/Field/FieldTrait.php

@@ -165,6 +165,20 @@ public function setHelp(TranslatableInterface|string $help): self
         return $this;
     }
 
+    public function setFullWidth(bool $fullWidth = true): self
+    {
+        $this->dto->setFullWidth($fullWidth);
+
+        return $this;
+    }
+
+    public function setWithTwigContext(bool $withTwigContext = true): self
+    {
+        $this->dto->setWithTwigContext($withTwigContext);
+
+        return $this;
+    }
+
     public function addCssClass(string $cssClass): self
     {
         $this->dto->setCssClass($this->dto->getCssClass().' '.$cssClass);

src/Resources/views/crud/detail.html.twig

@@ -54,9 +54,9 @@
     {% set field_layout = ea_create_field_layout(entity.fields) %}
     {% block detail_fields %}
         {% if field_layout.hasTabs %}
-            {{ _self.render_detail_fields_with_tabs(entity, field_layout) }}
+            {{ _self.render_detail_fields_with_tabs(entity, field_layout, _context) }}
         {% else %}
-            {{ _self.render_detail_fields(entity, field_layout.fields) }}
+            {{ _self.render_detail_fields(entity, field_layout.fields, _context) }}
         {% endif %}
     {% endblock detail_fields %}
 
@@ -65,7 +65,7 @@
     {% endblock delete_form %}
 {% endblock %}
 
-{% macro render_detail_fields_with_tabs(entity, field_layout) %}
+{% macro render_detail_fields_with_tabs(entity, field_layout, variables) %}
     <div class="col-12">
         <div class="nav-tabs-custom form-tabs">
             <ul class="nav nav-tabs">
@@ -89,7 +89,7 @@
                             </div>
                         {% endif %}
                         <div class="row">
-                            {{ _self.render_detail_fields(entity, field_layout.fieldsInTab(tab.uniqueId)) }}
+                            {{ _self.render_detail_fields(entity, field_layout.fieldsInTab(tab.uniqueId), variables) }}
                         </div>
                     </div>
                 {% endfor %}
@@ -98,7 +98,7 @@
     </div>
 {% endmacro %}
 
-{% macro render_detail_fields(entity, fields) %}
+{% macro render_detail_fields(entity, fields, variables) %}
     {% set form_panel_is_already_open = false %}
     {% for field in fields %}
         {% set is_form_field_panel = 'field-form_panel' in field.cssClass %}
@@ -115,7 +115,7 @@
 
         {% block detail_field %}
             {% if not is_form_field_panel %}
-                {{ _self.render_field(entity, field) }}
+                {{ _self.render_field(entity, field, variables) }}
             {% endif %}
         {% endblock %}
     {% endfor %}
@@ -176,8 +176,9 @@
 </div>
 {% endmacro %}
 
-{% macro render_field(entity, field) %}
-    <div class="data-row {{ field.cssClass }}">
+{% macro render_field(entity, field, variables) %}
+    <div class="data-{% if field.fullWidth %}full-width-{% endif %}row {{ field.cssClass }}">
+        {% if not field.fullWidth %}
         <dt>
             {{ field.label|trans|raw }}
 
@@ -188,7 +189,12 @@
             {% endif %}
         </dt>
         <dd>
-            {{ include(field.templatePath, { field: field, entity: entity }, with_context = false) }}
+        {% endif %}
+            {% set twigVars = { field: field, entity: entity } %}
+            {% if field.withTwigContext %}{% set twigVars = twigVars|merge({variables: variables}) %}{% endif %}
+            {{ include(field.templatePath, twigVars, with_context = false) }}
+        {% if not field.fullWidth %}
         </dd>
+        {% endif %}
     </div>
 {% endmacro %}