How to create a repeatable xml form field feature?

Question

I am building a custom component and all is good. I thought I would have a go at the new 3.2 repeatable xml form field feature. Although I have it working I don't quite know how to save the data.

It allows me to launch a modal and within that modal create up to 999 custom fields that I specify. But the green save button in the modal closes the modal and doesn't actually apply the save?

Am I missing something?

--

<field name="list_templates"
    type="Repeatable"
    icon="list"
    description="Main description"
    label="Main Label"
    default="">
    <fields name="params">
    <fieldset hidden="true" name="list_templates_modal" repeat="true">
            <field name="template"
                    label="Template Label"
                    size="30"
                    type="text" />
            <field name="location"
                    label="Location Label"
                    description="desc"
                    size="30"
                    type="filelist"
                    directory="media/editors/tinymce/templates"
                    exclude="index.html"
                    hide_default="true"
                    hide_none="true" />
            <field name="description"
                    label="Description Label"
                    size="30"
                    type="textarea" />
    </fieldset>
    </fields>

Cheers in advance

Jonny

Answer 1

Ok here is the answer to my own question and a couple of observations and fixes.

Firstly when using the sample block of code within my custom xml component file I neglected to add the field name within my custom database table.

So for example: list_templates from the xml example

Needs to go into the MYSQL database within my component table like so:

column name: list_templates column type: TEXT

Basically because its JSON data and it fits best inside a TEXT type column.

Next...

There was the bug where when closing teh Modal and then re-opening it would duplicate the content you add.

To fix this I found the repeatable.js file located within media/system/js and made a backup copy of it. I then pasted the uncomplressed version into repeatable js and found that by changing this line:

30 // Set original content for cancel            
31 origContent = getTrs().clone();

to this

30 // Set original content for cancel            
31 origContent = getTrs();

That it actually fixes the duplication bug. I have done several tests to see if its doing the right thing and it actually is. No data loss is occurring and no data is being duplicated anymore. You can open and close the modal box as many times as you like and it will only ever show you the selections you saved.

I have tried this by closing the view file and reopening the data as well and several other methods all of which are working.

And lastly!

Because I wanted to echo the contents of the JSON within my view as a table below the select button I also added a couple of things to repetable/js to allow me to be able to save and apply after clicking the save button within the modal.

This means that when I click save on trghe repeatable fields modal the page saves and applies allowing me to collect the data directly from teh table column field to display on the page.

I achieved this by adding the following couple of things.

A function to get the view=componentnameview from the url

 // get the url values function

 function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,    
    function(m,key,value) {
      vars[key] = value;
    });
    return vars;
  }

and then setting a varibale for view like so

var componentName = getUrlVars()["view"]; 

and then after line 341

I added this

Joomla.submitbutton(''+componentName+'.apply'); 

Now the modal Save button does its thing and then joomla saves the item and knows which component view its saving it to and stays on the page. This allows me to collect the table data but also saves the content within the repeatable fields modal in-case the user thought they were saving it and accidentally clicked close on the default button group of the item.

I hope I can help someone out with my answer/post. If its not appropriate to put all this in just let me know and i'll move it elsewhere.

--