History: PluginList - Graphical User Interface

            ! 	LIST - Graphical User Interface
''New in Tiki 17.0'' - Experimental Graphical User Interface for the list plugin in popup plugin edit forms.%%% %%% %%%LIST - Graphical User Interface allows you to use the plugin List graphically, you get the same results as when you manipulate the code of the plugin List in a Wiki page. Of course, with ListGUI, you can find yourself more easily and get the results faster even if you are a beginner.

Please note this is very experimental still (in 17.0) so expect some hiccups.

!! Parameters
{pluginmanager plugin="list"}

!!  Quick start
Quick start you'll need to go to Control Panels -> Editing and Plugins -> Plugins and enable the feature "GUI for the list plugin".

Then create a wiki page, at this level, you can either simply add -+~np~{list}~/np~+-, save it and click the edit plugin icon: {icon name="plugin"} or make another choice, In edit mode of the Wiki page, by clicking question icon: {icon name="question-circle"}  on the tab to display the plugin help, and filtering the list of plugins for the plugin List.
See ((Plugin Help)) for more information on using the plugin help.

You can see how ListGUI looks like in the images below:
__Parameters__
{img src="display1578" link="display1578" width="400" rel="box[g]" imalign="center" alt="Parameters" desc="Click to expand" align="center" styleimage="border"}

__(body of plugin)__
{img src="display1579" link="display1579" width="400" rel="box[g]" imalign="center" alt="Body of plugin" desc="Click to expand" align="center" styleimage="border"}

!! Overview
{DIV(class="row")}
{DIV(class="col-md-4")}
ListGUI is an easy to use tool with which you can get rich and interesting results. It allows you to control the results you want to have in a graphical way and also provides you with the generated code.

ListGUI offers you options according to your choices. For example, if you choose __forum post__ as an option for __Filter type__, the options for __Filter field__ will be adapted to your selection: post_content, forum_id, forum_title, etc.
{DIV}
{DIV(class="col-md-8")}
{img src="display1576" link="display1576" width="400" rel="box[g]" imalign="right" desc="Click to expand" align="right" alt="ListGUI-Overview" styleimage="border"}
{DIV}
{DIV}

!! How to add Control blocks
Add filter
Use a filter to perform a search and collect a set of results according to different parameters that you will pass to the __Filter__ control block. You can get more information about the Filter control block on the page  [PluginList-filter-control-block|PluginList filter control block]
It is simple and convenient to apply a filter to search results with ListGUI as you can see in the image below.
{img src="display1577" link="display1577" width="400" rel="box[g]" imalign="center" alt="Control-block-filter" desc="Click to expand" align="center" styleimage="border"}

Add sort
With the __Sort__ option of ListGUI to sort your search results with the mode you want. See how this is done with the [PluginList-sort-control-block|PluginList sort control block]
{img src="display1580" link="display1580" width="400" rel="box[g]" imalign="center" alt="Control-block-sort" desc="Click to expand" align="center" styleimage="border"}

Add pagination
Use the __Pagination__ to limit the number of results to be displayed on the Wiki page. Learn more about   [PluginList-pagination-or-list-control-block|PluginList - list or pagination control block]
{img src="display1581" link="display1581" width="400" rel="box[g]" imalign="center" alt="Control-block-pagination" desc="Click to expand" align="center" styleimage="border"}

Add Output
Use this part of ListGUI to define the model for displaying results.
The elements are added to OUTPUT according to parameter values passed to OUTPUT.
For example, if you choose the value __table__ of the parameter __template__, ListGUI proposes you __column__ and __tablesorter__
{img src="display1582" link="display1582" width="400" rel="box[g]" imalign="center" alt="ListGUI-Output" desc="Click to expand" align="center" styleimage="border"}

Add Format
You can apply the object format with the ListGUI interface with the __FORMAT__ option.
See how  [PluginList-format-control-block|PluginList format control block] is used
{img src="display1583" link="display1583" width="400" rel="box[g]" imalign="center" alt="ListGUI-format" desc="Click to expand" align="center" styleimage="border"}

Toggle source mode
When you choose different options with ListGUI, it also generates the code that will appear in the Wiki page after clicking on the __Save__ button. You have the possibility to see the code, modify it and even delete everything. See how this is possible in the image below
{img src="display1584" link="display1584" width="400" rel="box[g]" imalign="center" alt="Toggle source mode" desc="Click to expand" align="center" styleimage="border"}

You can now use ListGUI to get a successful result and according to what you want.

!! Examples
For this example, we needed a Tracker that we called __Months__, you can see it as a profile here [https://profiles.tiki.org/Example_Tracker_Months|Example_Tracker_Months].
Otherwise, have more information on  [Trackers].
With ListGUI, in this example, we implement a List to display the different items (months, number of days) recorded in the Tracker.

{DIV(class="row")}
{DIV(class="col-md-4")}
{img src="display1593" link="display1593" width="400" rel="box[g]" imalign="center" alt="ListGUI-example-tracker-1" desc="Click to expand" align="center" styleimage="border"}
{DIV}
{DIV(class="col-md-4")}
{img src="display1594" link="display1594" width="400" rel="box[g]" imalign="center" alt="ListGUI-example-tracker-2" desc="Click to expand" align="center" styleimage="border"}
{DIV}
{DIV(class="col-md-4")}
{img src="display1595" link="display1595" width="400" rel="box[g]" imalign="center" alt="ListGUI-example-tracker-3" desc="Click to expand" align="center" styleimage="border"}
{DIV}
{DIV}

After the List is built with ListGUI, the following code will be in the page 
{CODE()}
{LIST(gui="1" cache="y")}  
  {filter type="trackeritem"}
  {filter field="tracker_id" exact="3"}
  {OUTPUT( template="table")}
    {column field="tracker_field_monthName" label="Month" mode="raw"}
    {column field="tracker_field_monthDays" label="Days" mode="raw"}
{OUTPUT}
  {FORMAT( name="Name")}
    {display name="tracker_field_monthName" default="" format="plain"}
{FORMAT}
  {FORMAT( name="Days")}
    {display name="tracker_field_monthDays" format="plain" default=""}
{FORMAT}
{LIST}
{CODE}

This second example shows how from ListGUI you can build a simple List that searches and displays in a Wiki page the title and content of comments added to Tiki, for example with the Blog feature.
{DIV(class="row")}
{DIV(class="col-md-6")}
{img src="display1591" link="display1591" width="400" rel="box[g]" imalign="center" alt="ListGUI-example-comment-1" desc="Click to expand" align="center" styleimage="border"}
{DIV}
{DIV(class="col-md-6")}
{img src="display1592" link="display1592" width="400" rel="box[g]" imalign="center" alt="ListGUI-example-comment-2" desc="Click to expand" align="center" styleimage="border"}
{DIV}
{DIV}

The result looks like this:
{img src="display1590" link="display1590" width="400" rel="box[g]" imalign="center" alt="ListGUI-example-result" desc="Click to expand" align="center" styleimage="border"}


This other example shows you how, in a few seconds and through a simple manipulation, you can display a Blog Post List in a Wiki page.
{img src="display1588" link="display1588" width="400" rel="box[g]" imalign="center" alt="ListGUI-example-blogpost-1" desc="Click to expand" align="center" styleimage="border"}

When saving the page, the result is like this:
{img src="display1589" link="display1589" width="400" rel="box[g]" imalign="center" alt="ListGUI-example-blogpost-2" desc="Click to expand" align="center" styleimage="border"}

!!Related pages
* ((Plugin Help))
* ((PluginList))

Alias names for this page:
(alias(listgui)) | (alias(list gui)) | (alias(Plugin List GUI))  | (alias(PluginList GUI))  | (alias(PluginListGUI)) | (alias(LIST---Graphical-User-Interface))
~tc~ (alias(LIST - Graphical User Interface)) ~/tc~