RenderCategoryBrowser

Renders a hierarchical browser for categories

Documentation

Parameters

• THEWEB: where to search for categories, defaults to %BASEWEB%
• NAME: name of the formfield to store the selection (only used when MODE is set to select); defaults to Category
• VALUE: list of pre-selected categories
• TOP: node from where to start the category, defaults to TopCategory
• MODE: could be edit, select or browse, defaults to browse
  • edit: allows to modify the hierarchy
  • select: select one or more categories; specify the name of the formfield to be used in the NAME parameter
  • browse: navigate among categories
• BUTTONS: on, off - toggle the display of the buttons, defaults to on; you may also switch on individual buttons using a comma separated lists of ids filter, refresh, undo and/or clear
• CLASSES: css classes to be applied to the input element

Implementation

%STARTINCLUDE%<div class="jqHierarchy clsBrowser" data-web="%THEWEB{default="%BASEWEB%"}%" data-root="%TOP{default="TopCategory"}%" %IF{"'%MODE%'='select'" then="data-input-field-name='%NAME{default="Category"}%'"}% data-mode="%MODE{default="browse"}%" data-display-counts="true" data-container=".jqHierarchyContainer" data-sort="on">
    %IF{"'%MODE%'='select'"
      then="<input type='hidden' name='%NAME{default="Category"}%' value='%VALUE{default=""}%' class='%CLASSES{default=""}%' />"
    }%%IF{"'%BUTTONS{default="on"}%'!='off'"
      then="$percntDBCALL{\"%WEB%.%TOPIC%\" section=\"buttons\" buttons=\"%BUTTONS{default="on"}%\"}$percnt"
    }%<div class="jqHierarchyContainer jqUITooltip" data-theme='default' data-position="right" data-arrow="true"></div>
</div>
%DBCALL{"%WEB%.%TOPIC%" section="init"}%%STOPINCLUDE%

init

%STARTSECTION{"init"}%%JQREQUIRE{"jstree, pnotify, wikiword, ui::tooltip, blockui"}%<!-- -->
%ADDTOZONE{"script" 
  id="JQUERYPLUGIN::HIERARCHY"
  text="<script type='text/javascript' src='%PUBURLPATH%/System/ClassificationPlugin/jquery.hierarchy.js'></script>" 
  requires="JQUERYPLUGIN::JSTREE, JQUERYPLUGIN::PNOTIFY, JQUERYPLUGIN::WIKIWORD, JQUERYPLUGIN::UI::TOOLTIP, JQUERYPLUGIN::BLOCKUI"
}%<!-- -->%ENDSECTION{"init"}%

buttons

%STARTSECTION{"buttons"}%<div class="jqHierarchyButtons jqUITooltip" data-theme="info" data-position="top" data-arrow="true">
 <input type="text" size="28" class="foswikiInputField jqHierarchySearchField" style="display:none" /> 
 %IF{"'%buttons%'=~'\bfilter\b' or '%buttons%'='on'"
    then="%BUTTON{"%TRANSLATE{"Filter"}%" icon="find" class="simple jqHierarchySearchButton" title="%TRANSLATE{"Search for matching categories"}%"}%"
 }%<!-- -->
 %IF{"'%USERNAME%' ingroup 'AdminGroup' and ('%buttons%'=~'\brefresh\b' or '%buttons%'='on')" 
   then="%BUTTON{"%TRANSLATE{"Refresh"}%" icon="arrow_refresh" class="jqHierarchyRefreshButton simple" title="%TRANSLATE{"Refresh hierarchy cache on the backend"}%"}%"
 }%<!-- -->
 %IF{"'%buttons%'=~'\bclear\b' or '%buttons%'='on'"
    then="%BUTTON{"%TRANSLATE{"Clear"}%" icon="application" class="simple jqHierarchyClearButton" title="%TRANSLATE{"Empty the selection"}%""}%"
 }%<!-- -->
 %IF{"'%buttons%'=~'\bundo\b' or '%buttons%'='on'"
    then="%BUTTON{"%TRANSLATE{"Undo"}%" icon="arrow_refresh" class="simple jqHierarchyUndoButton" title="%TRANSLATE{"Reset the selection"}%""}%"
 }%<!-- -->
 %CLEAR% 
</div>%ENDSECTION{"buttons"}%

Test

select

browse

edit