Add support for field groups when rendering custom fields in the frontend

[obuisard]

Pull Request for Issues #36967 and #36973.

Summary of Changes

This PR addresses:

• layouts need to support the grouping of custom fields when rendered in the frontend,
• the contact field layout is missing handling of key parameters,
• the contact custom fields 'field' layout breaks the HTML markup when used inside subforms.

Testing Instructions

In the admin console:

• [ ] Create a few field groups for articles.
• [ ] Create custom fields for articles. Put some of the fields in the field groups you have created.
• [ ] Create an article. Set values for the fields that have been created.
• [ ] Create a menu item 'Articles' -> 'Single Article'.

In the frontend:

• [ ] Check the article page before and after the patch.

Repeat with the Contacts component.

In addition, create a subform custom field for the Contacts component. Include subform-only custom fields into the subform. Test the output in the frontend for the subform. The default layout will break the HTML markup. Go back to each subform-only custom field and set the layout to 'subform' (in the 'option' tab). The subform should be properly displayed (no more broken dl/dd/dt markup).

Actual result BEFORE applying this Pull Request

Fields render as:

<ul class="fields-container">
    <li class="field-entry"> … </li>
    <li class="field-entry"> … </li>
</ul>

For com_contact, fields render as:

<dl class="fields-container contact-fields dl-horizontal">
    <dt class="contact-field-entry "> ... </dt>
    <dd class="contact-field-entry "> ... </dd>
    <dt class="contact-field-entry "> ... </dt>
    <dd class="contact-field-entry "> ... </dd>
    <dt class="contact-field-entry "> ... </dt>
    <dd class="contact-field-entry "> ... </dd>
    <dt class="contact-field-entry "> ... </dt>
    <dd class="contact-field-entry "> ... </dd>
</dl>

Expected result AFTER applying this Pull Request

Fields render as:

<ul class="fields-container">
    <li class="field-entry"> … </li>
    <li class="field-entry"> … </li>
    <li class="field-group group-[group id]">
        <span id="group-[group id]">[group name]</span>
        <ul aria-labelledby="group-[group id]">
            <li class="field-entry"> … </li>
            <li class="field-entry"> … </li>
            <li class="field-entry"> … </li>
        </ul>
    </li>
</ul>

For com_contact, fields render as:

<dl class="fields-container contact-fields dl-horizontal">
    <dt class="contact-field-entry [field name]"> ... </dt>
    <dd class="contact-field-entry [field name]"> ... </dd>
    <dt class="contact-field-entry [field name]"> ... </dt>
    <dd class="contact-field-entry [field name]"> ... </dd>
    <dd class="contact-field-group group-[group id]">
        <span id="group-[group id]">[group name]</span>
        <dl class="fields-container" aria-labelledby="group-[group id]">
            <dt class="contact-field-entry [field name]"> ... </dt>
            <dd class="contact-field-entry [field name]"> ... </dd>
            <dt class="contact-field-entry [field name]"> ... </dt>
            <dd class="contact-field-entry [field name]"> ... </dd>
        </dl>
    </dd>
</dl>

For com_contact, an additional layouts/field/subform.php is present to address issues found when contact custom fields are included inside a subform (it fixes the broken markup where dl tags are missing).

Documentation Changes Required

Yes, if there is any place where the frontend output of custom fields has been explained.

It will be necessary for the user to select the proper layout when including a contact custom field into a subform. This implies the custom field is only used in the subform.

[richard67]

Does this also solve #36967 ?

[obuisard]

@richard67 yes it does.

[richard67]

@obuisard Could you fix the code style errors reported by Drone here? https://ci.joomla.org/joomla/joomla-cms/51568/1/6 Thanks in advance.

[richard67]

Does this also solve #36967 ?

Then please mention that at the top of your PR, too, and in future please try to avoid making duplicate issues if the existing issue can be found so easily. Thanks in advance.

[brianteeman]

Shouldnt we at least try and be consistent and not have a mix of short and long array

[dgrammatiko]

There is also https://github.com/joomla/joomla-cms/pull/36265 for the grouping

[HLeithner]

This pull request has automatically rebased to 4.2-dev.

[joomla-bot]

This pull requests has been automatically converted to the PSR-12 coding standard.

[HLeithner]

This pull request has been automatically rebased to 5.0-dev. No new features will be merged into Joomla! 4.3 series. Joomla! 4.4 series is a bridge release to make migration from Joomla! 4 to 5 as smooth as possible.

[ceford]

I know this is an old PR but it looked worth testing. I was rather expecting to have a custom field label look like a label - so a dt rather than a li. This is what it looks like:

Contacts - I see no html errors with/without the patch. With the patch I see this:

But the steps to get here are rather difficult to follow. I was expecting each item to be on a separate line but the source is this:

<dl class="fields-container contact-fields dl-horizontal">
<dt class="contact-field-entry subform-test">
            <span class="field-label ">Subform Test: </span>
    </dt>
<dd class="contact-field-entry subform-test">
        <span class="field-value ">    
    <ul class="fields-container">
        <li><span class="field-entry"><span class="field-label ">Nickname: </span>
<span class="field-value ">    Tommy</span></span>, <span class="field-entry"><span class="field-label ">Sport: </span>
<span class="field-value ">    Rugby</span></span></li>    </ul>
</span>
    </dd>
    </dl>

So it works but could be better!

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/36974.}

[HLeithner]

This pull request has been automatically rebased to 5.1-dev.

[HLeithner]

This pull request has been automatically rebased to 5.2-dev.