New field Subform, and deprecate the Repeatable field by Fedik · Pull Request #7829 · joomla/joomla-cms

Fedik · 2015-09-06T11:31:37Z

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 · 2015-09-06T14:25:36Z

libraries/joomla/form/fields/subform.php

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

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

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

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

🍺 API Fail 🍺

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.

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 · 2015-09-06T15:58:56Z

~~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 · 2015-09-06T17:20:00Z

layouts/joomla/form/field/subform/repeatable/section.php

hmm not sure is this correct?

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 · 2015-09-07T07:24:37Z

@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 · 2015-09-07T08:48:14Z

@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 · 2015-09-16T02:58:57Z

@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 · 2015-09-21T14:53:14Z

@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 · 2015-09-22T08:34:50Z

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 😼

…ncedSelect

Fedik · 2015-09-26T14:02:19Z

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 · 2015-09-26T17:21:16Z

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

Fedik · 2015-09-26T18:42:16Z

@DGT41 any tips are welcome 😉

wilsonge · 2016-05-08T16:04:57Z

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

wilsonge · 2016-05-08T17:07:25Z

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 · 2016-05-08T17:10:22Z

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 · 2016-05-08T17:58:08Z

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

rdeutz · 2016-05-09T20:21:27Z

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

andrepereiradasilva · 2016-05-09T20:59:05Z

@rdeutz restart travis

wilsonge · 2016-05-09T21:04:23Z

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

Fedik · 2016-05-10T07:56:10Z

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

Werbschaft · 2016-06-03T09:03:27Z

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

Form Field Media: It's not possible to add preview="true" to get the Image permanent next to the Field
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 · 2016-06-03T09:14:02Z

@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 · 2016-06-03T09:30:38Z

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

zero-24 · 2016-06-03T09:31:30Z

Great. Thanks 😄

ufuk-avcu · 2016-06-09T13:45:30Z

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

brianteeman · 2016-06-09T14:05:17Z

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

ufuk-avcu · 2016-06-09T14:21:03Z

@brianteeman sorry. Done!

Fedik · 2016-06-09T14:31:13Z

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

Sieger66 · 2016-08-11T09:03:17Z

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

Fedik added 9 commits July 25, 2015 16:47

add subform field

1522d8e

Merge branch 'master' into field-subform-sync

59de7af

Fields Subform: Improve the layout markup

00310c4

Subform field: c.s.

66593c7

Subform Field: __get() __set() magic

29a34cd

Subform field: fix Radio reset on reorder, and add minified version

f9f8978

Subform Field: update the layouts descriptions

57b7ab7

Deprecate JFormFieldRepeatable

f83bdec

Subform Field: __get(), __set() for $buttons attribute

f8c3a82

joomla-cms-bot added the PR-staging label Sep 6, 2015

Fedik added 2 commits September 6, 2015 14:36

Subform Field: support JSON as default value

d8e665f

Subform Field: c.s.

a53ee93

Fedik mentioned this pull request Sep 6, 2015

[rfc] replace existing repeatable field #7749

Closed

Fedik added 2 commits September 6, 2015 14:53

Subform Field: One more c.s. 👽

8c411af

Subform Field: Another one c.s. ✌️

29959b3

mbabker reviewed Sep 6, 2015
View reviewed changes

zero-24 added the Feature label Sep 6, 2015

zero-24 added this to the Joomla! 3.5.0 milestone Sep 6, 2015

zero-24 reviewed Sep 6, 2015
View reviewed changes

Hack for Reinitialize chose.js, but only for <select> with class adva…

9366edd

…ncedSelect

joomla-cms-bot added the RTC This Pull Request is Ready To Commit label May 8, 2016

wilsonge merged commit a28b188 into joomla:staging May 9, 2016

joomla-cms-bot removed the RTC This Pull Request is Ready To Commit label May 9, 2016

Fedik deleted the field-subform branch May 10, 2016 07:13

Fedik mentioned this pull request May 10, 2016

Update copyright for #7829 #10375

Merged

brianteeman mentioned this pull request May 31, 2016

Contact field in repeatable field #10691

Closed

laoneo mentioned this pull request Jun 2, 2016

Feature Request: Repeatable Field / Group ? joomla-projects/custom-fields#96

Open

ufuk-avcu mentioned this pull request Jun 9, 2016

The new subform field is not responsive #7829 #10769

Closed

cyrez mentioned this pull request Jun 11, 2016

New formfield Modal_User : using BS modal with no B/C issue #10772

Closed

coolcat-creations mentioned this pull request Jun 29, 2016

[joomla.org] joomla/joomla-websites#396

Closed

ggppdk mentioned this pull request Jul 25, 2016

Styling only works for the first repeatable item in Sub Form Fields #11299

Closed

Harmageddon mentioned this pull request Feb 22, 2017

Subforms: Implementing per-field filters and validation. #14189

Closed

Fedik mentioned this pull request Feb 15, 2018

Fix subform repeat counter. #19693

Merged

Uh oh!

Conversation

Fedik commented Sep 6, 2015 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Example:

Attributes:

Testing

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Fedik commented Sep 6, 2015

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

shur commented Sep 7, 2015

Uh oh!

Fedik commented Sep 7, 2015

Uh oh!

ghost commented Sep 16, 2015

Uh oh!

dgrammatiko commented Sep 21, 2015

Uh oh!

Fedik commented Sep 22, 2015

Uh oh!

Fedik commented Sep 26, 2015

Uh oh!

dgrammatiko commented Sep 26, 2015

Uh oh!

Fedik commented Sep 26, 2015

Uh oh!

wilsonge commented May 8, 2016

Uh oh!

wilsonge commented May 8, 2016

Uh oh!

wilsonge commented May 8, 2016

Uh oh!

Fedik commented May 8, 2016

Uh oh!

rdeutz commented May 9, 2016

Uh oh!

andrepereiradasilva commented May 9, 2016

Uh oh!

wilsonge commented May 9, 2016

Uh oh!

Fedik commented May 10, 2016

Uh oh!

Werbschaft commented Jun 3, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

zero-24 commented Jun 3, 2016

Uh oh!

Werbschaft commented Jun 3, 2016

Uh oh!

zero-24 commented Jun 3, 2016

Uh oh!

ufuk-avcu commented Jun 9, 2016

Uh oh!

brianteeman commented Jun 9, 2016 via email

Uh oh!

ufuk-avcu commented Jun 9, 2016

Uh oh!

Fedik commented Jun 9, 2016

Uh oh!

Sieger66 commented Aug 11, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Fedik commented Sep 6, 2015 •

edited

Loading

Werbschaft commented Jun 3, 2016 •

edited

Loading

Sieger66 commented Aug 11, 2016 •

edited

Loading