Adding Fieldset

[mehdisabbagh]

I am thinking a way to add FIELDSET to JCB.
I think a simple way to add FIELDSET would be just like "Admin Tabs" in Admin Fields.
We can set the label of the FIELDSET and the width of it by assigning classes sush as "col-12 col-lg-6" or other classes.
Then we can assign the fieldset to any TAB we want.
This can prettify the admin view of the component.
It would be wonderful if the JCB development team adds this option to JCB.
@TLWebdesign

[lemuelvdm]

Hi @mehdisabbagh, Thank you for the suggestion.

Yes, as I understand it, the proposed FIELDSET option is intended to provide more control over the appearance and grouping of fields within an administrator edit view. The idea would be to define a fieldset label, assign Bootstrap grid classes such as col-12 or col-lg-6, and then place that fieldset within a selected administrator tab.

This would certainly provide a convenient interface for creating more structured and visually appealing administrator forms.

However, JCB already includes a more flexible mechanism for achieving this through administrator layout overrides.

As has been explained in this issue directly related to overriding the Admin Tab layouts, JCB allows you to create a custom layout and override an existing administrator view layout by following a specific naming convention:

• layoutname - overrides that layout in all views and components.
• viewname_layoutname - overrides that layout for a specific view across components.
• componentname_viewname_layoutname - overrides the layout for one specific component and view.

This means that layouts such as publishing, details_left, details_right, or other generated administrator layouts can be replaced with custom markup directly from within JCB.

Using this approach, you are not limited to predefined fieldset options. You can create any structure required, including:

• <fieldset> elements with custom legends.
• Bootstrap grid layouts such as row, col-12, col-md-6, and col-lg-4.
• Multiple groups of fields inside the same tab.
• Conditional field rendering.
• Custom HTML surrounding individual fields or groups of fields.
• Component-wide, view-specific, or layout-specific overrides.
• Custom rendering logic based on permissions, field values, or application state.

The layout override system therefore already supports the requested result while also providing considerably more control than a dedicated FIELDSET configuration interface would provide.

For that reason, adding a separate FIELDSET feature similar to Admin Tabs is unlikely to be prioritised in the near future. It would introduce another configuration layer for functionality that can already be implemented more comprehensively through layouts.

The recommended approach is therefore to use JCB's custom layout functionality and override the relevant administrator layout at the appropriate scope.

So here is the basic introduction to this idea:

• Overriding administrator layouts in JCB

Please keep in mind that layout overrides are very powerful. A broadly named layout can affect multiple views or components, so it is generally safer to use the most specific naming convention required for the intended override.

Please read more on this in the related issue #880 to be sure you get a full understanding of exactly how to use this feature.

[mehdisabbagh]

Hi @lemuelvdm,
Thanks for reply.

I am using the latest JCB version on Joomla 6. But all the tutorials are with sooner versions. therefore I am a little confused.

I did as you said. And it was a wonerful solution. very easy.
But one problem still remains, the LEFT and RIGHT sizes is compiled some other place. therefor it can not be changed in the Layouts.

for example in com_content:

• the "Content" tab has left(col-lg-9) and right(col-lg-3) classes,
• the "Publishing" tab has left(col-lg-6) and right(col-lg-6) classes

Can this be changed in JCB?
Because as I see, the left and right is only col-lg-6.

[lemuelvdm]

@mehdisabbagh
Thank you for the feedback. I would like to clarify what is meant by overriding a layout in Joomla Component Builder.

Using the Demo Component itself as an example, the compiled administrator component contains a layouts directory similar to the following:

administrator
└── components
    └── com_demo
        └── layouts

Inside this directory, you will find:

• Layout files used by different areas of the component.
• Subdirectories containing layouts associated with specific administrator views.

For example, the look admin view contain layouts such as:

layouts
└── look
    ├── details_fullwidth.php
    ├── details_left.php
    └── details_right.php
    └── details_above.php

In this example:

• details is the name of the tab.
• fullwidth, left, or right identifies the layout position being targeted.
• Therefore, details_fullwidth.php controls the full-width layout area of the Details tab.

Creating the Override in JCB

To override this layout, create a new layout inside JCB and use the appropriate layout code name.

For a general override, the layout code name would be:

detailsfullwidth

You must then reference this layout from a PHP area in the relevant administrator view that is processed during compilation.

When the component is compiled and installed, JCB will detect the custom layout, compile it, and place the generated layout in the corresponding location, such as:

layouts/look/details_fullwidth.php

The custom layout will then replace the generated content of that layout area.

Layout Targeting Levels

The name assigned to the JCB layout determines how specifically the override is applied.

1. Override Every Matching Layout

Use only the layout name:

detailsfullwidth

This is the broadest override.

Any component or view containing a matching details_fullwidth layout will receive this override.

This should only be used when the same override is intentionally required everywhere that layout name appears.

2. Override a Layout in a Specific View

Prefix the layout name with the administrator view code name:

lookdetailsfullwidth

The structure is:

view_layout

This targets the details_fullwidth layout associated with the look administrator view, rather than every occurrence of details_fullwidth.

3. Override a Layout in a Specific Component and View

Prefix the layout name with both the component code name and the administrator view code name:

demolookdetailsfullwidth

The structure is: component_view_layoutname

In this example:

• demo is the component code name.
• look is the administrator view code name.
• details_fullwidth is the layout being overridden.

This is the most specific form and ensures that the override applies only to the look view of the demo component.

Recommended Approach

I recommend using the demo component as a testing environment:

1. Create the custom layout inside JCB.
2. Give it the appropriate code name based on the required targeting level.
3. Add an reference to the layout in a PHP area of the relevant administrator view.
4. Compile and install the component.
5. Confirm that the expected layout file was generated and replaced.

For a targeted test, a name such as the following would be appropriate: demolookdetailsfullwidth

This avoids unintentionally replacing layouts with the same name in other components or administrator views.

The important point is that the override is controlled by the layout's code name:

layoutname
view_layoutname
component_view_layoutname

The more complete the name is, the more specific the override becomes.

[mehdisabbagh]

@lemuelvdm

Thanks for your detailed explanation. That means a lot to me. Its wonderful that you support fast and helpfully with all details you have.
But, I did all these steps that you explained on the first tip (Reply) that you gave me.

Let me explain this according to my project:

1. I made a Joomla Component called Puyaclassifieds.
2. Next I made a Admin View called Item.
3. Next I made a Field named fulltext and put it in the Tab called Content. Then I gave it an Alignment: Left in Tab.
4. Finally in the Layouts Menu (JCB), I built a new Layout called content-left and all the things that I changed in it (According to your explanation in How to properly modify an admin view tab layout) , worked excellent after compiling.

But the problem that I was talking about in my seccond Comment in this conversation is this:
After Compiling, everything that you explained in this tree works correct:

layouts
└── item
    ├── publishing.php
    └── content_right.php
    └── content_above.php

But Look at this tree and the default.php file in the Administrator Component Directory:

tmpl
└── item
    └── default.php

for example, it compiles the content tab as below:

	<?php echo Html::_('uitab.addTab', 'itemTab', 'content', Text::_('COM_PUYACLASSIFIEDS_ITEM_CONTENT', true)); ?>
		<div class="row">
			<div class="col-md-6">
				<?php echo LayoutHelper::render('item.content_left', $this); ?>
			</div>
			<div class="col-md-6">
				<?php echo LayoutHelper::render('item.content_right', $this); ?>
			</div>
		</div>
	<?php echo Html::_('uitab.endTab'); ?>

and gives a col-md-6 class to the DIV.
According to your documents and guides (As long as I understood), in JCB we can for example only override the codes in item.content_right which are rendered with this code:
<?php echo LayoutHelper::render('item.content_right', $this); ?>
And we cannot override the DIV and its CLASS that contains this code.

So my question is:

1. Were in JCB can we override the default.php file?
2. How can we change the col-md-6 that are given to the DIV in default.php?
3. Do I have to override it the traditional way in my template? or Does JCB have a way to change that too?

[Llewellynvdm]

At this point, there is no simple mechanism for overriding an entire generated template in JCB. These templates contain a significant amount of complexity, and we have never considered replacing a complete template to be the optimal approach.

In practical terms, if you intend to override most or all of the generated template, you are increasing your maintaining responsibility. One of JCB’s primary purposes is to help move your project forward as Joomla evolves. It provides long-term maintainability by keeping generated code aligned with changes in Joomla.

When large portions of the generated templates are replaced, much of that benefit is lost. You are effectively taking responsibility for maintaining that code yourself. In my opinion, modifying or replacing complete generated templates can have a significant long-term maintenance impact.

That does not mean overriding the output is impossible. You have several options.

Joomla Template Overrides

You can use Joomla’s normal template override system where applicable. This allows you to override layouts at the Joomla template level using Joomla’s standard mechanisms.

Persistent File Overrides in JCB

You can also use JCB’s Custom Code system, including persistent file overrides with hash automation:

https://github.com/joomengine/jcb-documentation/blob/master/english/JCB-Custom-Codes.md#2-persistent-file-overrides-with-hash-automation

This mechanism allows you to override generated files while enabling JCB to track and preserve those changes.

However, overriding an entire template is usually unnecessary. In most cases, what developers actually need is control over a specific tab or section of the template. You can with the Custom-Codes approach target only that section you want to change, minimizing your maintenance window. You can also take full control of a singe tab.

Taking Full Control of a Tab

JCB already provides a practical way to take control of an individual tab.

When adding fields to the tab, place all of the fields in the Full Width in Tab position. Do not assign any fields to the left or right positions.

When JCB builds the tab, it will then generate only one layout for that tab: the full-width layout.

You can open that layout and arrange the fields however you need. You can place fields on the left or right, create responsive columns, adjust the layout for different screen sizes, or implement any other presentation logic required for that tab.

The important point is this:

• Add all fields to Full Width in Tab.
• Do not add fields to the left position.
• Do not add fields to the right position.
• Override the generated full-width layout as explained by @lemuelvdm above.

Using this approach gives you control over the entire tab without requiring you to replace the complete template.

The way JCB adds these layouts through Joomla’s tabbing engine follows Joomla’s standard layout architecture. It is the default and recommended approach.

When the Standard JCB Layout Is Not Enough

If you do not want to use the standard generated layout override structure, then you can use JCB’s Custom Code systems to override any thing you like, as already mentioned. At that point, you are intentionally taking control of the generated output.

JCB’s persistent override system is designed to let you override virtually any generated file. The documentation explains the different override mechanisms available:

https://github.com/joomengine/jcb-documentation/blob/master/english/JCB-Custom-Codes.md

You should also review the documentation on insert and replace placeholders:

https://github.com/joomengine/jcb-documentation/blob/master/english/JCB-manual-custom-code-implementation.md#4-insert-and-replace-placeholders

These tools allow you to modify generated output in a controlled and persistent way.

It is important to understand that choosing this route increases your maintenance responsibility. Once you take control of generated code, you are also committing to maintaining that code as Joomla and JCB continue to change.

Round-Trip Development

The above insert and replace placeholders in JCB is often called round-trip development.

The general workflow is:

1. Compile the component.
2. Install it on the same Joomla site.
3. Open the generated files (in the site) in your IDE.
4. Modify the code as required.
5. Add the wrapping placeholders as explained in the documentation.
6. Compile the component again.
7. JCB will detect and capture those changes.
8. JCB will store the changes in JCB’s Custom Code system.
9. Maintain the customized output through JCB from that point forward, in the Custom Code area.

There is also a video demonstrating this workflow and how JCB brings modified generated code back into the database.

This approach is how JCB handles requirements that fall outside its normal generated-code path. It ensures that the code you take control of is stored and managed as Custom Code.

That distinction is intentional:

• Code managed by JCB can continue to evolve alongside Joomla.
• Code moved into Custom Code becomes your responsibility to maintain.

This allows JCB to preserve its primary benefit—keeping the generated component aligned with Joomla—while still giving you complete control where that control is genuinely required.

My recommendation would be to first use the Full Width in Tab approach when the requirement is limited to a particular tab. It is usually the cleanest solution and avoids unnecessary maintenance.

If the requirement truly cannot be implemented through the standard layout system, then use the persistent override or Custom Code mechanisms. Review the documentation, test the available override methods, and use the one that best matches the level of control you need.

If you follow the documentation and still cannot get the override working, let us know where you are getting stuck, and we can look at that specific implementation.

Just to help improve a little bit of the overriding power of JCB on the layout level, there is this powerful way to, since you're adding all these fields to the full width layout, there's this powerful way to have those fields added still dynamically with a placeholder that you place in the custom script tab, at PHP custom script tab, and it looks something like this.

// get the form
$form = $displayData->getForm();

// get the layout fields override method name (from layout path/ID)
$layout_path_array = explode('.', $this->getLayoutId());
// Since we cannot pass the layout and tab names as parameters to the model method
// this name combination of tab and layout in the method name is the only work around
// seeing that JCB uses those two values (tab_name & layout_name) as the layout file name.
// example of layout name: details_left.php
// example of method name: getFields_details_left()
$fields_tab_layout = 'fields_' . $layout_path_array[1];

// get the fields
$fields = $displayData->get($fields_tab_layout) ?: array(
	###LAYOUTITEMS###
);

$hiddenFields = $displayData->get('hidden_fields') ?: array();

Note the ###LAYOUTITEMS### JCB will then dynamically continue to add your fields to this layout as you add or remove those fields. Also note that you can for those fields in JCB add extra properties to control the placement of the fields :) first add the extra properties to your field type, and that in the field choose and set those properties... this is really smart.