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

New field Subform, and deprecate the Repeatable field #7829

Merged
merged 24 commits into from May 9, 2016

Conversation

Projects
None yet
@Fedik
Contributor

Fedik commented Sep 6, 2015

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. :neckbeard:

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.

foreach (array('formsource', 'min', 'max', 'layout', 'groupByFieldset', 'buttons') as $attributeName)
{
$this->__set($attributeName, $element[$attributeName]);

This comment has been minimized.

@mbabker

mbabker Sep 6, 2015

Member

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

This comment has been minimized.

@Fedik

Fedik Sep 6, 2015

Contributor

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

This comment has been minimized.

@mbabker

mbabker Sep 6, 2015

Member

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

This comment has been minimized.

@Fedik

Fedik Sep 6, 2015

Contributor

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

This comment has been minimized.

@mbabker

mbabker Sep 6, 2015

Member

🍺 API Fail 🍺

This comment has been minimized.

@roland-d

roland-d Sep 14, 2015

Contributor

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.

This comment has been minimized.

@Fedik

Fedik Sep 14, 2015

Contributor

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

This comment has been minimized.

Contributor

Fedik commented Sep 6, 2015

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 zero-24 added the New Feature label Sep 6, 2015

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

</div>
<?php endif; ?>
<?php foreach($form->getGroup('') as $field): ?>

This comment has been minimized.

@zero-24

zero-24 Sep 6, 2015

Contributor

hmm not sure is this correct?

This comment has been minimized.

@Fedik
<?php endif;?>
</div>
</div>
<!-- End render fields for repeatable subform "<?php echo $fieldname; ?>" -->

This comment has been minimized.

@zero-24

zero-24 Sep 6, 2015

Contributor

is it expected to have this comments in the final code?

This comment has been minimized.

@Fedik

Fedik Sep 6, 2015

Contributor

yes, at least I have used it already ... I noticed when have a big form (or even couple) it more simple to debug ...
But if need it can be simply removed

This comment has been minimized.

@zero-24

zero-24 Sep 6, 2015

Contributor

hmm i guess that it will not shown to the user? You can see this just in the HTML Code? Than in think it can be still there for debugging that makes sense.

This comment has been minimized.

@Fedik

Fedik Sep 6, 2015

Contributor

yes it will not be shown for User, it just the HTML comment 😉

This comment has been minimized.

@Bakual

Bakual Sep 6, 2015

Contributor

We usually don't output comments.
You could maybe do it if debug is enabled, but not sure if it's worth making all those checks.

This comment has been minimized.

@roland-d

roland-d Oct 3, 2015

Contributor

Agree that having this in there is easy for debugging but we should not be outputting comments with the code. User sites are not our test sites.

As @Bakual said, it could be linked to the debug mode but not sure it is worth it. We may need it now because we are testing the code but it isn't useful once the code goes into production.

This comment has been minimized.

@Fedik

Fedik Oct 16, 2015

Contributor

removed,
but I have warned 😏

@shur

This comment has been minimized.

Contributor

shur commented Sep 7, 2015

@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

This comment has been minimized.

Contributor

Fedik commented Sep 7, 2015

@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

This comment has been minimized.

ghost commented Sep 16, 2015

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

@dgrammatiko

This comment has been minimized.

Contributor

dgrammatiko commented Sep 21, 2015

@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

This comment has been minimized.

Contributor

Fedik commented Sep 22, 2015

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

This comment has been minimized.

Contributor

Fedik commented Sep 26, 2015

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

This comment has been minimized.

Contributor

dgrammatiko commented Sep 26, 2015

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

@Fedik

This comment has been minimized.

Contributor

Fedik commented Sep 26, 2015

@dgt41 any tips are welcome 😉

@wilsonge

This comment has been minimized.

Contributor

wilsonge commented May 8, 2016

screen shot 2016-05-08 at 18 04 39

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

This comment has been minimized.

Contributor

wilsonge commented May 8, 2016

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

This comment has been minimized.

Contributor

Fedik commented May 8, 2016

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

@joomla-cms-bot joomla-cms-bot added the RTC label May 8, 2016

@rdeutz

This comment has been minimized.

Contributor

rdeutz commented May 9, 2016

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

@andrepereiradasilva

This comment has been minimized.

Contributor

andrepereiradasilva commented May 9, 2016

@rdeutz restart travis

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

1 of 2 checks passed

continuous-integration/travis-ci/pr The Travis CI build failed
Details
JTracker/HumanTestResults Human Test Results: 2 Successful 0 Failed.
Details

@joomla-cms-bot joomla-cms-bot removed the RTC label May 9, 2016

@wilsonge

This comment has been minimized.

Contributor

wilsonge commented May 9, 2016

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

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

@Fedik Fedik referenced this pull request May 10, 2016

Merged

Update copyright for #7829 #10375

@Fedik

This comment has been minimized.

Contributor

Fedik commented May 10, 2016

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

@WS-Theme

This comment has been minimized.

Contributor

WS-Theme commented Jun 3, 2016

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

bildschirmfoto 2016-06-03 um 11 02 42

@zero-24

This comment has been minimized.

Contributor

zero-24 commented Jun 3, 2016

@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

@WS-Theme

This comment has been minimized.

Contributor

WS-Theme commented Jun 3, 2016

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

@zero-24

This comment has been minimized.

Contributor

zero-24 commented Jun 3, 2016

Great. Thanks 😄

@ufuk-avcu

This comment has been minimized.

ufuk-avcu commented Jun 9, 2016

Tested this on small devices and it's not responsive.
templates_ edit style -administrator_index php

@brianteeman

This comment has been minimized.

Contributor

brianteeman commented Jun 9, 2016

@ufuk-avcu

This comment has been minimized.

ufuk-avcu commented Jun 9, 2016

@brianteeman sorry. Done!

@Fedik

This comment has been minimized.

Contributor

Fedik commented Jun 9, 2016

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

@Sieger66

This comment has been minimized.

Sieger66 commented Aug 11, 2016

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment