Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[5.3] Add support for field groups when rendering custom fields in the frontend #36974

Open
wants to merge 22 commits into
base: 5.3-dev
Choose a base branch
from

Conversation

obuisard
Copy link
Contributor

@obuisard obuisard commented Feb 8, 2022

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.

Even though fields are grouped in the administrator console, the grouping of custom fields are not reflected in the frontend.
The code here groups fields according to the field group they are a member of. If not, the output is left unchanged.
The group title could be a translatable language key. The update takes care of it.
@richard67
Copy link
Member

Does this also solve #36967 ?

@obuisard
Copy link
Contributor Author

obuisard commented Feb 8, 2022

@richard67 yes it does.

@richard67
Copy link
Member

@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
Copy link
Member

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
Copy link
Contributor

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

@dgrammatiko
Copy link
Contributor

There is also #36265 for the grouping

- adds the field name as class 
- adds suffix/prefix
- adds the value render class
- removes empty space when there is no render class
Fields are grouped in their respective field groups in their own fields-container
The default layout render.php breaks the html markup when rendered inside a subform (missing <dl>).
This layout prevents such issue.
@joomla-bot
Copy link
Contributor

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

@obuisard obuisard changed the base branch from 4.2-dev to 4.3-dev October 5, 2022 19:35
@HLeithner HLeithner removed the psr12 label Oct 23, 2022
@Hackwar Hackwar added the Feature label Apr 6, 2023
@HLeithner HLeithner changed the base branch from 4.3-dev to 5.0-dev May 8, 2023 15:03
@HLeithner
Copy link
Member

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
Copy link
Contributor

ceford commented Sep 11, 2023

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:

screen shot 2023-09-11 at 08 27 41

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

screen shot 2023-09-11 at 08 20 44

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 HLeithner changed the base branch from 5.0-dev to 5.1-dev September 30, 2023 22:52
@HLeithner
Copy link
Member

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

@HLeithner HLeithner changed the base branch from 5.1-dev to 5.2-dev April 24, 2024 09:09
@HLeithner
Copy link
Member

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

@HLeithner HLeithner changed the title Add support for field groups when rendering custom fields in the frontend [5.2] Add support for field groups when rendering custom fields in the frontend Apr 24, 2024
@HLeithner HLeithner changed the base branch from 5.2-dev to 5.3-dev September 2, 2024 08:53
@HLeithner
Copy link
Member

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

@HLeithner HLeithner changed the title [5.2] Add support for field groups when rendering custom fields in the frontend [5.3] Add support for field groups when rendering custom fields in the frontend Sep 2, 2024
@Hackwar Hackwar removed the PR-5.2-dev label Sep 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.