MIGX.sortable resourcelist
This is a user-contributed Extra. If you find issues or would like more info or help, please contact the author.
Sortable Resourcelist with MIGX
In this Tutorial we will learn how we can use MIGX to select a set of Resources from a given parent and sort the ouput-order.
Requirements
First off we will need to install MIGX by Package Management and do some basic configurations.
Version required: 2.5.2 +
Create the Resourceoptions - chunk
- Create a new chunk
- name: migx_resourceoptions
- content:
[[migxLoopCollection? &classname=`modResource` &selectfields=`id,pagetitle` &where=`{"parent":"3"}` &toJsonPlaceholder=`json` ]] [[+json]]
Change the parent to the ID where you want to get the resourcelist from
Create the Configuration for the MIGX-TV
- Go to: Components->MIGX->Tab: MIGX
- Create a new Configuration with 'add item'
- name: migx_resourcelist
- Click 'Done' to save the new Configuration
- right-click on the new configuration and select 'import/export'
- copy/paste this code into the textarea:
{ "formtabs":[ { "MIGX_id":1, "caption":"main", "print_before_tabs":"0", "fields":[ { "MIGX_id":1, "field":"active", "caption":"Active", "description":"", "description_is_code":"0", "inputTV":"", "inputTVtype":"listbox", "configs":"", "sourceFrom":"config", "sources":"[]", "inputOptionValues":"yes==1||no==0", "default":"0" }, { "MIGX_id":2, "field":"comment", "caption":"Comment", "description":"", "description_is_code":"0", "inputTV":"", "inputTVtype":"textarea", "configs":"", "sourceFrom":"config", "sources":"[]", "inputOptionValues":"", "default":"" }, { "MIGX_id":3, "field":"pagetitle", "caption":"", "description":"", "description_is_code":"0", "inputTV":"", "inputTVtype":"hidden", "configs":"", "sourceFrom":"config", "sources":"[]", "inputOptionValues":"", "default":"" }, { "MIGX_id":4, "field":"id", "caption":"", "description":"", "description_is_code":"0", "inputTV":"", "inputTVtype":"hidden", "configs":"", "sourceFrom":"config", "sources":"[]", "inputOptionValues":"", "default":"" } ] } ], "contextmenus":"", "actionbuttons":"", "columnbuttons":"", "filters":"[]", "extended":{ "migx_add":"", "formcaption":"", "update_win_title":"", "win_id":"migx_input_options", "maxRecords":"", "multiple_formtabs":"", "extrahandlers":"this.handleColumnSwitch", "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":"", "winbuttons":"", "onsubmitsuccess":"", "submitparams":"" }, "columns":[ { "MIGX_id":1, "header":"Pagetitle", "dataIndex":"pagetitle", "width":"", "sortable":"false", "show_in_grid":1, "renderer":"", "clickaction":"", "selectorconfig":"", "renderoptions":"[]" }, { "MIGX_id":2, "header":"Active", "dataIndex":"active", "width":"", "sortable":"false", "show_in_grid":1, "renderer":"this.renderSwitchStatusOptions", "clickaction":"switchOption", "selectorconfig":"", "renderoptions":[ { "MIGX_id":1, "name":"published", "value":1, "clickaction":"", "handler":"", "image":"assets\/components\/migx\/style\/images\/tick.png" }, { "MIGX_id":2, "name":"unpublished", "value":"0", "clickaction":"", "handler":"", "image":"assets\/components\/migx\/style\/images\/cross.png" } ] }, { "MIGX_id":3, "header":"Comment", "dataIndex":"comment", "width":"", "sortable":"false", "show_in_grid":1, "renderer":"", "clickaction":"", "selectorconfig":"", "renderoptions":"[]" }, { "MIGX_id":4, "header":"", "dataIndex":"x", "width":"", "sortable":"false", "show_in_grid":"0", "renderer":"this.renderChunk", "clickaction":"", "selectorconfig":"", "renderoptions":"[]" }, { "MIGX_id":5, "header":"ID", "dataIndex":"id", "width":"", "sortable":"false", "show_in_grid":1, "renderer":"", "clickaction":"", "selectorconfig":"", "renderoptions":"[]" } ] }
Create the MIGX - TV
Create a new TV
- Tab: General Information
- name: migx_resourcelist
- Tab: Input Options
- Input Type: migx
- Input Option Values: @CHUNK migx_resourceoptions
- Configurations: migx_resourcelist
- Tab: Template Access
- select the Template where you want to add this TV
Select and sort Resources
Now you should be able to select Resources and sort them by drag/drop them to a new position. You can also add additional infos, like a comment.
Get the Sorted and filtered Resourcelist at frontend
Add this snippet-tag to your template/resource-content:
[[getImageList? &tvname=`migx_input_options` &outputSeparator=`,` &tpl=`@CODE:[[+id]]` &where=`{"active:=":"1"}` ]]
Suggest an edit to this page on GitHub (Requires GitHub account. Opens a new window/tab).