Nested

☆ A M B ☆
24,524 Posts

sottwell Reply #1, 14 years, 2 months ago

Would it be possible to have a MIGx with nested "add more" fields?

For example, if I want to have an "Item" TV that has a button for adding more items, and each item has several fields, including an image field that would also have an "add more" button for adding multiple images for each item?

Or is this taking MIGx a bit beyond what it's intended to do, and resources and getResources would be a better fit?

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

5,888 Posts

Bruno17 Reply #2, 14 years, 2 months ago

you can have multiple MIGX-TVs in other MIGX-TVs.
One example where we have this is the MIGX-configurator itself.

There is a outer MIGX-TV as a CMP for the Custom-Table.
n it there is a MIGX-TV for the formtabs-field
In this, there is a MIGX-TV for the fields in each tab.

Its also possible to have nested MIGXdb-fields for db-Tables and joined sub-db-tables.

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

☆ A M B ☆
24,524 Posts

sottwell Reply #3, 14 years, 2 months ago

Great! Now I just need to learn how to do a simple one, like a text input that lets you add all the text inputs you want! I find lots of tutorials for complicated stuff, but I'm having a hard time figuring out something so simple.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

5,888 Posts

Bruno17 Reply #4, 14 years, 2 months ago

you would create one MIGX-tv
name for example: nestedmigx
configs: nestedmigxouter

then you would create two empty migx-configurations on the MIGX-configurator-CMP
names: nestedmigxouter and nestedmigxinner

import this configurations to them:

nestedmigxouter:

{"formtabs":"[{\"MIGX_id\":\"1\",\"caption\":\"Fields\",\"fields\":[{\"MIGX_id\":\"1\",\"field\":\"fielda\",\"caption\":\"Field A\",\"inputTV\":\"\",\"inputTVtype\":\"\",\"configs\":\"\",\"sourceFrom\":\"config\",\"sources\":\"\",\"inputOptionValues\":\"\",\"default\":\"\"},{\"MIGX_id\":\"2\",\"field\":\"fieldb\",\"caption\":\"Field B\",\"inputTV\":\"\",\"inputTVtype\":\"\",\"configs\":\"\",\"sourceFrom\":\"config\",\"sources\":\"\",\"inputOptionValues\":\"\",\"default\":\"\"}]},{\"MIGX_id\":\"2\",\"caption\":\"images\",\"fields\":[{\"MIGX_id\":\"1\",\"field\":\"images\",\"caption\":\"Images\",\"inputTV\":\"\",\"inputTVtype\":\"migx\",\"configs\":\"nestedmigxinner\",\"sourceFrom\":\"config\",\"sources\":\"\",\"inputOptionValues\":\"\",\"default\":\"\"}]}]","contextmenus":"","actionbuttons":"","columnbuttons":"","filters":"","extended":{"migx_add":"Add Item","formcaption":"Item","win_id":"nestedmigxouter","packageName":"","classname":"","task":"","getlistsort":"","getlistsortdir":"","use_custom_prefix":"0","prefix":"","grid":"","gridload_mode":"1","check_resid":"1","check_resid_TV":"","join_alias":"","getlistwhere":"","joins":"","cmpmaincaption":"","cmptabcaption":"","cmptabdescription":"","cmptabcontroller":""},"columns":"[{\"MIGX_id\":\"1\",\"header\":\"Field A\",\"dataIndex\":\"fielda\",\"width\":\"\",\"renderer\":\"\",\"sortable\":\"false\",\"show_in_grid\":\"1\"},{\"MIGX_id\":\"2\",\"header\":\"Field B\",\"dataIndex\":\"fieldb\",\"width\":\"\",\"renderer\":\"\",\"sortable\":\"false\",\"show_in_grid\":\"1\"}]"}

nestedmigxinner:

{"formtabs":"[{\"MIGX_id\":\"1\",\"caption\":\"Image\",\"fields\":\"[{\\\"MIGX_id\\\":\\\"1\\\",\\\"field\\\":\\\"image\\\",\\\"caption\\\":\\\"Image\\\",\\\"inputTV\\\":\\\"\\\",\\\"inputTVtype\\\":\\\"image\\\",\\\"configs\\\":\\\"\\\",\\\"sourceFrom\\\":\\\"config\\\",\\\"sources\\\":\\\"\\\",\\\"inputOptionValues\\\":\\\"\\\",\\\"default\\\":\\\"\\\"}]\"}]","contextmenus":"","actionbuttons":"","columnbuttons":"","filters":"","extended":{"migx_add":"Add Image","formcaption":"Image","win_id":"nestedmigxinner","packageName":"","classname":"","task":"","getlistsort":"","getlistsortdir":"","use_custom_prefix":"0","prefix":"","grid":"","gridload_mode":"1","check_resid":"1","check_resid_TV":"","join_alias":"","getlistwhere":"","joins":"","cmpmaincaption":"","cmptabcaption":"","cmptabdescription":"","cmptabcontroller":""},"columns":"[{\"MIGX_id\":\"1\",\"header\":\"Image\",\"dataIndex\":\"image\",\"width\":\"\",\"renderer\":\"this.renderImage\",\"sortable\":\"false\",\"show_in_grid\":\"1\"}]"}

now you can play with this configurations. Add/move/remove tabs,columns,fields

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

☆ A M B ☆
24,524 Posts

sottwell Reply #5, 14 years, 1 month ago

Ok, I finally got around to giving this a try. How do I "import" the configurations? The CMP has all kinds of forms that I got lost in.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

5,888 Posts

Bruno17 Reply #6, 14 years, 1 month ago

create a new configuraton with given name nestedmigxinner and nestedmigxouter

Then right-click on that records in the grid and choose 'export/import'

fill the json-field with the jsons above.

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

☆ A M B ☆
24,524 Posts

sottwell Reply #7, 14 years, 1 month ago

Ah. I didn't even think of right-clicking.

Odd, when saving one of the json strings it ended up with all kinds of extra escape backslashes. I replaced it with the same thing and saved again and it was fine. magic_quotes is definitely turned off. Just one of those odd glitches, I guess.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

701 Posts

bennyb Reply #8, 13 years, 7 months ago

I didn't even realise you could do this, this is great.

Quick question whats the best way to display the inner values within getImageList

Using Brunos example would it be to add another getImageList call within &tpl and pass [[+images]] into &values. So for example the outer getImageList &tpl chunk would be something like:

<li><strong>[[+fielda]]</strong>

<ul>[[!getImageList? 
    &tvname=`nestedmigx`
    &tpl=`migxInner`
	&value=`[[+images]]`]]</ul>
</li>

☆ A M B ☆
350 Posts

Menno Pietersen Reply #9, 12 years ago

Very cool, I almost have it working now but I have this in my tpl:

[[!getImageList? 
    &tvname=`nestedmigx`
    &tpl=`@CODE:
    <div class="[[+idx]]">[[+fieldb]]
        <ul>
            [[!getImageList? 
                &tvname=`nestedmigx`
                &tpl=`[[+images]]`
            ]]
        </ul>
    </div>
`]]

I renders like this:

So all is working but how do I get every image of the nested MIGX to get rendered in a image tag one by one?
It is now just all JSON for the item...

MODX Ambassador (NL) | Responsive web design specialist, developer & speaker
DESIGNfromWITHIN, MPThemes and Any Screen Size
Follow me on Twitter | Read my blog | My code on GitHub

701 Posts

bennyb Reply #10, 12 years ago

I think you need to use the value parameter, so something like the below. Where MIGXNAME is the name of MIGX that has the nested values.

[[!getImageList? 
    &tvname=`nestedmigx`
    &tpl=`@CODE:
    <div class="[[+idx]]">[[+fieldb]]
        <ul>
            [[!getImageList? 
                &tvname=`nestedmigx`
                &tpl=`[[+images]]`
&value=`[[+MIGXNAME]]`
            ]]
        </ul>
    </div>
`]]

Also the on the tpl you might need:

&tpl=`@CODE:[[+images]]`

Nested "add more"?