New field Subform, and deprecate the Repeatable field

[Fedik]

Joomla! Documentation https://docs.joomla.org/Subform_form_field_type

This is the field I have suggested in #7749

Description

The field allow to include any existing form into the current form. If attribute multiple set to true then the included form will be repeatable. The Field have a couple "predefined" layouts for display the subform as table or as div container, and of course it allow to use your own layout.
Field support Default values from the included form, and from json string in default attribute. Last have higher priority.

Example:

<field name="field-name" type="subform" 
    formsource="path/to/form.xml" min="1" max="3" multiple="true"
    layout="joomla.form.field.subform.repeatable-table" groupByFieldset="true"
    label="Subform Field" description="Subform Field Description" />

Attributes:

• formsource - (required) The form source to be included. Path to xml file or the form name to search by JForm::getInstance().
• multiple - The multiple state for the form field. Whether the field is repeatable or not.
• min - Count of minimum repeating in multiple mode. Default 0.
• max - Count of maximum repeating in multiple mode. Default 1000.
• groupByFieldset - Whether group the subform fields by it`s fieldset (true or false).
• buttons - Which buttons to show in multiple mode. Default add,remove,move.
• layout - The layout name for render the field inputs. Available:
  • joomla.form.field.subform.default - Render the subform in div container, without support of repeating.
  • joomla.form.field.subform.repeatable - Render the subform in div container, recommended for multiple mode. Support groupByFieldset.
  • joomla.form.field.subform.repeatable-table - Render the subform as table, recommended for multiple mode. Support groupByFieldset. By default render each field as the table column, but if groupByFieldset=true then render each fieldset as the table column.

Testing

Can use "Custom HTML" module. Add the field into the module xml:

<field name="field-name" type="subform" formsource="modules/mod_custom/test1.xml" 
   min="1" max="30" multiple="true"
    layout="joomla.form.field.subform.repeatable-table" groupByFieldset="true"
    label="Subform Field" description="Subform Field Description" />

Create the form xml in modules/mod_custom/test1.xml. Example:

<?xml version="1.0" encoding="UTF-8"?>
<form>
    <fieldset name="section1" label="Section1">

        <field name="test_text" type="text"
            label="test_text" description="test_text" />

        <field name="test_textarea" type="textarea"
            label="textarea"  width="100" />

        <field name="test_list" type="list" default="1" class="advancedSelect"
            label="test_list" description="test_list" >
            <option value="1">JYES</option>
            <option value="0">JNO</option>
        </field>

    </fieldset>
    <fieldset name="section2" label="Section2">
        <field name="test_radio" default="0" type="radio"
            label="test_radio" description="test_radio">
            <option value="1">JYES</option>
            <option value="0">JNO</option>
        </field>

        <field name="test_checkbox1" type="checkbox"
            label="checkbox1" description="test_checkbox1"  />

        <field name="test_checkboxes" type="checkboxes"
            label="checkboxes" description="test_checkboxes" >
            <option value="a">A</option>
            <option value="b">B</option>
            <option value="c">C</option>
            <option value="d">D</option>
        </field>
    </fieldset>
    <fieldset name="section3" label="Section3">
        <field name="test_color" type="color" default="#eee"
            label="color"  description="test_color" />

        <field name="test_tag" type="tag" class="advancedSelect"
            label="JTAG" description="test_tag" mode="nested"
            multiple="true" />

        <field name="test_media" type="media" directory=""
            label="media" description="test_media"/>

    </fieldset>
</form>

And of course you can use your own form.

Now go to edit the "Custom HTML" options and try add/remove the values for new field.
Try play with different field attributes multiple, min, max, buttons, layout, groupByFieldset and make sure that the field work.

p.s. The pull request does not provide the Validation and Filter. But such thing can be implemented in future, at least for Validation, for the Filter can be need some JForm changes.

[mbabker]

Why are you calling the magic method directly here instead of $this->$attributeName = $element[$attributeName];?

[Fedik]

some of the values need to "check" before "set" ... so I do all in one place (see __set method), same as in JFormField 😉

[mbabker]

Something screams majorly wrong if we are having to call magic methods ourselves in the code...

[Fedik]

and because calling $this->$attributeName will skip the magic __set ... in current scope

[mbabker]

🍺 API Fail 🍺

[roland-d]

I agree with @mbabker we shouldn't be calling magic methods ourselves. It doesn't sound right for sure, we should have a proper method handling this, maybe even getters/setters for private fields.

[Fedik]

it is out of scope for the current issue,
but as alternative solution, we can use magic __call instead of magic __get __set
then code will looks like $field->{'set' . $attributeName}($value) that will work same inside the class : $this->{'set' . $attributeName}($value) or $this->setSomeProperty($value).. same for get ...

but this is not b/c and I not sure that it is a better solution, because need to handle both Get and Set inside one method 😄

[Fedik]

Bonus 1 🍬
Less code duplication: The field allow to create single form for the Article options and include it in Configuration, Menu, Article Form 😋
ignore it 😄

[zero-24]

hmm not sure is this correct?

[Fedik]

yes it is,
it for take all available fields, see https://github.com/joomla/joomla-cms/blob/staging/libraries/joomla/form/form.php#L1680-L1684

[shur]

@Fedik This PR looks very promising.

Will it be helpful to load separate setting for different module layouts?
What I mean. Modules, e.g. latest news, can have several module layouts. They can differ a lot from each other. Let's say one layout to displays news in columns, another works as a slider. The task is to have individual settings for each of these templates - let's say number of columns and size of the columns for column layout, slider speed etc. for the second layout.

In your solution formsource="path/to/form.xml" is set strictly.
Is it possible to have several xml for each of module layouts, so that when a user select one of the module layouts in module parameters, it gets subform settings for this particular layout?

If the answers to both questions are positive, that would be really great.

[Fedik]

@shur answer is No, if I right understand your question
but
in theory, you can make your own field that extend current subform field, where you can change the formsource depend from the Form state ... but this will work only after form will be "saved" with new values.

or you can make a couple subform fields with different forms, and switch them using shwoon feature, depend from selected layout 😄
but I would chose the first way

[ghost]

@test
I tested with instructions above (mod_custom) and staging of yesterday.
Created second row with plus symbol. The second Tags selection has no chzn.

[dgrammatiko]

@Fedik This doesn’t work with the BS version of the field Media (the jlayout PR: #5871). Maybe it would be a good idea to not couple this mootools...

[Fedik]

I want to note: current pull request do not fix that issue #6882 (for repeatable mode).
Possible work around in the repeatable mode: you define min attribute, and do not add/move/remove the "sections", then all scripts should work as usual
In single mode all should work fine without any "hacks".

@dgt41 that will be hard 😨 ... but you are right, will be bad if it will be broken, again 👽 ... and thanks for link that issue. Main problem with that Media field is "hard" linking to the input "id".

About Chosen script, the problem that we do not use "special" class where we want to have the Chosen script, and just apply that script for all <select> in core layouts.
So in the Repeatable script I have no possibility to check is that <select> from 3d extension, or it something we need apply Chosen, so I have decided do not force Chosen for all select here.
But if people really want I can make it, not a big problem to force 😼

[Fedik]

chosen.js should work now, but only for <select class="advancedSelect">

@dgt41 sorry man, no chance with new media field, it even more hard than was with Mootools.
I tried:

$row.find('div[id^="media_field_"]').each(function(){
    var $inpWrapp = $(this),
        $modal  = $inpWrapp.siblings('div[id^="imageModal_"]'),
        inputId = $inpWrapp.children('input[type="text"]').prop('id'),
        $btnSel = $inpWrapp.children('a[href^="#imageModal_"]'),
        $btnClr = $inpWrapp.children('a[onclick^="clearMediaInput"]'),
        $preview = $inpWrapp.children('span[id^="media_preview_"]');

    $inpWrapp.attr('id', 'media_field_' + inputId); // fix wrapper ID
    $modal.attr('id', 'imageModal_' + inputId); // fix modal ID
    $preview.attr('id', 'media_preview_' + inputId); // fix preview ID
    $btnSel.attr('href', '#imageModal_' + inputId); // fix Select button

    // fix clear btn
    var onclic = $btnClr.attr('onclick').replace(/clearMediaInput\('[0-9a-zA-Z\_\-]+', /, "clearMediaInput('" + inputId + "', ");
    $btnClr.attr('onclick', onclic);

});

This fix already looks like trash, and it just a 10% of fix that need to do for new Media field from #5871.
Hope you see the reason 😉

[dgrammatiko]

There should be an easier way to utilize those two functions in the js file...

[Fedik]

@dgt41 any tips are welcome 😉

[wilsonge]

It was a problem in staging - I just fixed it - if you rebase/merge in staging should be ok

[wilsonge]

I accidentally put the form in the wrong place and got this. I'm not sure what the right behaviour is - but not sure this is it :/

[wilsonge]

I have tested this item ✅ successfully on 0e8f6f7

I think this is at a happy state now pretty much. Given this a play around with Hathor and with ISIS with and without repeatable and I'm happy. Maybe a slight improvement to be made when the XML file can't be found(?) but other than that successful.

RTC

---

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

[Fedik]

Any suggestion are welcome.
I did not get a better idea than just show Exception message.

[rdeutz]

@Fedik if you fix the Code Style issues we can merge this :-)

[andrepereiradasilva]

@rdeutz restart travis

[wilsonge]

Merged - travis failure was unrelated and was due to failures we had in staging in manchester.

[Fedik]

I just now noticed, I have missed the year, fix in #10375

[Werbschaft]

That's really awesome and working very well!! However I have noticed two things:

1. Form Field Media: It's not possible to add preview="true" to get the Image permanent next to the Field

2. Form Field Radio: It's not possible to add class="btn-group" to transform the Radio Buttons to the Styled Version of Radios. It works but only the first time! When adding a new Field it stops working

[zero-24]

@WS-Theme This is a closed / merged issue. Please open a new one at https://issues.joomla.org else i guess your findings get lost. Thanks

[Werbschaft]

@zero-24 sorry my error! Opened a Issue @ Joomla

[zero-24]

Great. Thanks 😄

[ufuk-avcu]

Tested this on small devices and it's not responsive.

[brianteeman]

Please create a new issue. No one will see a comment on a closed issue

[ufuk-avcu]

@brianteeman sorry. Done!

[Fedik]

no need new issue, just use correct layout layout="joomla.form.field.subform.repeatable, because table layout cannot be responsive

[Sieger66]

Notice:

level subform in multiple=true mode does not supported for now (due some limitation).

However in single ( multiple=false ) mode should work, in theory, but I not tried 😄

from Fedik at #11551 :
https://issues.joomla.org/tracker/joomla-cms/11551#event-190388