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

@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.

@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

@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.

@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...

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

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

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

@dgt41 any tips are welcome

@Fedik some thoughts:
The initialization script should be generic and get the data from data attributes like: data-width="200"
also the inline script:

    jQuery(document).ready(function(){
        var path = "' . JUri::root() . '",
            empty = "' . JText::_('JLIB_FORM_MEDIA_PREVIEW_EMPTY') . '",
            previewWidth = ' . $previewWidth . ',
            previewHeight = ' .$previewHeight . ',
            source = "' . $src . '",
            fieldId = "' . $id . '";
        initializeMedia(path, empty, previewWidth, previewHeight, source, fieldId);
        });

could then be part of the mediafield.js. Also that script should take care of the buttons of the modal (for inserting the image to the input). The clear button with the usage of a data attribute for the field id could also be more generic. Doing something like this the repeatable code should only care for replacing the data- attributes, which should be fairly easy. Bottom line instead of trying to make the repeatable script compatible with the media field we should work the other way around…
If I get some free time this week I will try to patch the media field script

@Fedik Been testing this and one thing that isn't so smooth is the drag and drop. The background of the block is transparent, may be nicer to have a more solid background colour.

Using the drag and drop I get a horizontal scrollbar and the screen scrolls to the right when I hit the border there. This goes on to infinity.

All in all looking good.

@Fedik I spent some time with this one and the #5871. I already made some changes in the other PR but still couldn’t get a nice solution here. My approach is the same as #7819, in short here is what I am trying to do:
Bootstrap modals html is not generated by javascript but is hardcoded from the layouts.
Therefore we need to:

• drop the standard way of togging the modal and assign a meaningful id with something like:

$btnSel.removeAttr('data-toggle').attr('id', inputId + '_btn');

• Replicate the script for initializing the modal https://github.com/joomla/joomla-cms/blob/staging/layouts/joomla/modal/main.php#L62-L79 with a twist so that the iframe url has the right fieldId: https://github.com/joomla/joomla-cms/blob/staging/layouts/joomla/modal/iframe.php#L35

• and finally get a listener for each button

$('#butonId').click(function(){
    $('#modalId').on('show', function () {

        $('iframe').attr("src",'url with the right id');

    });
    $('#modalId').modal({show:true})
});

@Fedik Forgot to post the code so here it is:

        // fix media field
        $row.find('div[id^="media_field_"]').each(function(){

            // Remove the default toggle option for BS modals
            var $inpWrapp = $(this),
                $modal  = $inpWrapp.siblings('div[id^="imageModal_"]'),
                inputId = $inpWrapp.children('input[type="text"]').prop('id'),
                $btnSel = $inpWrapp.children('a[data-toggle="modal"]'),
                $preview = $inpWrapp.children('span[id^="media_preview_"]'),
                $newIframeUrl = $btnSel.attr('data-url');

            // Set path and empty vars
            var empty = $btnSel.attr('data-emptystring'),
                path = $btnSel.attr('data-pasepath');

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

            // Set the new id for the button
            $btnSel.removeAttr('id').attr('data-target', inputId).attr('id', 'btn_' +inputId);

            // Set the new URL for the iframe
            $newIframeUrl = $newIframeUrl.replace(/&fieldid=(.+)&/, '&fieldid=' + inputId + '&');

            // The iframe tag
            var $tagIframe = '<iframe class="iframe" src="' + $newIframeUrl + '" name="Change Image" height="300px" width="800px">';

            // The new listener for modal open/close
            $('#btn_' + inputId ).attr('onclick',
                "jQuery('#imageModal_" + inputId + "').on('show', function () {" +
                    "jQuery(this).parent().find('.modal-body').html('" + $tagIframe + "'); " +
                "}); " +
                "jQuery('#imageModal_" + inputId + "').modal({show:true}); "
                );
        });

Replaces the code for // fix media field // section. This needs the #5871 and it works for the most parts.. ????

@dgt41 sorry for delay, and thanks for all your work!
this looks better but still hardly linked to id

I thinking about more 'dynamic way'. The idea is throw away the requirement of use the ID.
It can be done as jQuery plugin, something like:

// initialisation should looks like
$('.field-media-wrapper').fieldMedia();

And since the Modal markup is inside the field wrapper, we can simple show it by Javascript
without use of ID

// inside the jQuery plugin
this.$container.find('.modal-container').modal('show')

I remember that ID in URL need for set the value from the iframe, but this also can be solwed, at least I already use similar with another Modal library http://dimsemenov.com/plugins/magnific-popup/

$.magnificPopup.open({
    type:"iframe",
    items:{src: url},
    callbacks: {
        open: function() {
            $("iframe.mfp-iframe").load(function(){
                $(this).contents().on("change","input[name=\"cid[]\"]", function(){
                    setValue(button, this.value);
                    $.magnificPopup.close();
                    return false;
                });
            });
        }
    }
});

And I belive something like that we can do with Bootstrap modal also.

Unfortunately I have no time now, but I hope will try something in next 1-2 weeks.

@roland-d thanks for the review, I will check it also

@Fedik That should work as well but you have to take care also the Save and Close button on the modal. It should be a similar solution to the one you posted above. If you have some spare time to review the changes in the other PR so if there are things we should change to make both of them compatible I would like to hear them. And adjust the code accordingly…

Using the drag and drop I get a horizontal scrollbar and the screen scrolls to the right when I hit the border there. This goes on to infinity.

something very strange with jQuery UI

upd: even Demo http://jqueryui.com/sortable/ has same problem

I have tested this item successfully on 5bdf190

Tested also with the bootstrapped version of media and user fields, with success!

@Fedik I like the concept, but I would suggest changing the attribute "multiple" to something like "repeat"
multiple is used in other fields to indicate multiple selection, I don't think it's wise to muddy the meaning by using it for a repeat type field.

suggested change
repeat - The repeat state Boolean for the form field. Indicates whether the field is repeatable or not

I would also suggest lowering the "max" Default from 1000 to 100. Most repeatable fields tend to be under 100 for most cases (probably even under 20 repeats)

I think use multiple is correct as it indicate also the multiple inputs (actually array value), and we do not need to make thing more complicated/confused with another property repeat/repeatable.

about 1000 - I agree with you, but people should have some more freedom than they can use, then they feels more happy

That´s a really nice feature. Two things I encountered:

• In Chrome the column header shows a + symbol and in FF a - symbol, both are adding a new row when pressed
• in IE8 I was not able to add a row, but I could delete one

thanks for testing! I will check more

in IE8 I was not able to add a row, but I could delete one

this is good enough for IE

I agree!

This PR has received new commits.

CC: @dgt41

IE8 should be fine now,
the issue with Firefox I cannot reproduce

Tested successfully with a frontend plugin for contact form that loads a form XML with a subform field in it.

Staging 2015-12-08 (3.5.0 beta)
Protostar.
subform.repeatable
Firefox
IE 8 (some minor issues (sections not sortable, color picker not initialized in first section area) but not really related to this PR I think). Who cares? I could fill all fields.

All entered informations were submitted correctly.

I have tested this item successfully on c8638a0

Have tested with instructions (mod_custom and test1.xml)

I have tested this item successfully on c8638a0

Works okay! Nice addition and thanks for the PR @Fedik.

What is the status of this PR? I concluded today that the current Repeatable fields are quite useless... Barely possible to loop the field row for row

I have tested this item unsuccessfully on c8638a0

New subform field would not display in a custom module as per testing instructions in any module position I tried in the protostar template and Joomla 3.5 beta.

I have tested this item successfully on c8638a0

Tested by adding the subform field to a form rather then attempting to go through a custom HTML module. Where the custom HTML module failed to render the form and field, this functions perfect in an existing form and cover's the usability issue for a repeating form element as indicated in #6882

Interesting similarities to a pull request in the Framework that also adds a subform functionality. joomla-framework/form#22
Of course the Framework PR doesn't address the repeatable field issues.

This PR has received new commits.

CC: @dgt41, @FeikeMulder, @photodude, @RickR2H

PLEASE create extended documentation including textual and graphical examples for this. It's obviously very intricate so will need highly detailed documentation to be truly useful imo.

I have tested this item successfully on 576c15d

Several tests with custom extensions (modules, plugins).

I have tested this item successfully on 576c15d

All fields work

@chrisdavenport can this make it into 3.6?

@photodude Thanks for bringing this PR to my attention. I really like it and I'd love to include it in 3.6. I'll add it to the alpha release manifest so it gets more attention and testing. As Bear has said, it will need to be thoroughly documented. Also needs testing with Hathor.

Thanks @chrisdavenport

I'll keep this in mind when I get around to testing in a couple of weeks

• Needs testing with Hathor (and probably the included frontend templates: beez3, and protostar)
• Needs to be thoroughly documented

@chrisdavenport I have added the 3.6 milestone to this PR, so it won't fall off the radar, at least for 3.6 ;) Whether it gets included we will have to see of course how things progress.

one thing to test for is with the current field if the default fields
are empty, OR if they were changed after the extension was installed (
like during developement ) you will get errors when your trying to read
the values because they will return null. So this would definetly be
something to test against.. It's extremely annoying to have to
completely reset the template params DB field when some kind of change
is made in the .xml
Bear

On 4/16/2016 10:12, Walt Sorensen wrote:

Thanks @chrisdavenport https://github.com/chrisdavenport

I'll keep this in mind when I get around to testing in a couple of weeks

• Needs testing with Hathor (and probably included frontend templates)
• Needs to be thoroughly documented

—
You are receiving this because you commented.
Reply to this email directly or view it on GitHub
#7829 (comment)

OK so this is totally broken in Hathor (the width in the custom module in the given example just makes the hathor layout fall apart):

I have however otherwise successfully tested this PR. Would be good if you could put in some Hathor overrides @Fedik :) - this looks really really awesome!

thanks, I will check more, but cannot promise much about the table layout.

There a couple available layouts for this field:
joomla.form.field.subform.repeatable and joomla.form.field.subform.repeatable-table

For the table layout it is expected, because it is not possible to fit wide table in smaller width.
For Hathor in the module options section the layout joomla.form.field.subform.repeatable works better.

Ah ok if that layout works thats ok. By the way I think that we should have a default layout for this. If people want to override it with the layout param that's ok. But I think that we should have a default renderer

I have made 3 different layout:
joomla.form.field.subform.default is default, but it do not support repeating

if some one want to make repeatable, then there a chose between:
joomla.form.field.subform.repeatable
joomla.form.field.subform.repeatable-table

hm, but you are right, maybe good idea to set joomla.form.field.subform.repeatable as default, when multiple="true"

That makes sense. Because otherwise you don't have anything rendered without a layout specified which is kinda annoying

@fedik will you be updating this PR with the layout changes above?

@brianteeman yes, of course
maybe even in this evening

This PR has received new commits.

CC: @bertmert, @dgt41, @FeikeMulder, @photodude, @RickR2H

Ok, I have updated the field behavior when layout="" not specified.
joomla.form.field.subform.default is default
joomla.form.field.subform.repeatable is default when multiple="true"

I have tested this item successfully on 0e8f6f7

Great feature, should go into 3.6. Thank you @Fedik!

hm, Travis says I have made mistake in FILE: ...s/administrator/components/com_installer/views/install/tmpl/default.php ... but I made nothing there, what is wrong?

@Fedik Travis is overworked at the moment due to our sprint. It may have failed on that file when you created your branch. Nothing to worry about. @wilsonge is keeping an eye on things.

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

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 :/

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

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

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

@rdeutz restart travis

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

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

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

@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

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

Great. Thanks ????

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

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

@brianteeman sorry. Done!

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

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