All page names need to be in English.
en da  de  fr  it  ja  km  nl  ru  zh

Backend Programming, using treeview

From TYPO3Wiki
Jump to: navigation, search

notice - This information is outdated

While some details may still apply in specific situations, this page was written for packages of TYPO3 that are no longer current.

Recently I needed a possibility to let the user select a target folder for importing a xml file in a web module. I wrote a browseable tree and would like to share it with you. Thank you!

browseable tree with HTML-Eventhandler onMouseover, onMouseout and onClick

1) include t3lib_browsetree in your class file:


2) extend t3lib_browsetree wrapIcon and wrapTitle to add the HTML-Eventhandler onMouseover, onMouseout and onClick to each tree element:

class localPageTree extends t3lib_browseTree {
 function wrapIcon($icon,$row)   {
  $cmd = ' onMouseover="rollover(\.$this->domIdPrefix.$row['uid'].'_'.$this->bank.'\')" onMouseout="rollout(\.$this->domIdPrefix.$row['uid'].'_'.$this->bank.'\')"';
  return '<a href="#"'.$cmd.'>'.$icon.'</a>';
 function wrapTitle($title,$row,$bank=0)	{		
  $cmd = ' onMouseover="rollover(\.$this->domIdPrefix.$row['uid'].'_'.$this->bank.'\')" onMouseout="rollout(\.$this->domIdPrefix.$row['uid'].'_'.$this->bank.'\')"';
  $aOnClick = 'mClick(\.$this->getId($row).'\',\.$this->domIdPrefix.$row['uid'].'_'.$this->bank.'\');';	   return '<a href="#"'.$cmd.' onclick="'.htmlspecialchars($aOnClick).'">'.$title.'</a>';

3) include the javascript function rollover()(HTML-Eventhandler onMouseover), function rollout()(HTML-Eventhandler onMouseout) and function click()(HTML-Eventhandler onclick) in the document header (the function click() select the current element and saves the id of the element and the id of the page in a hidden form field):

$this->doc->JScode = '
 <script language="javascript" type="text/javascript">					
  function mClick(t,id) {
   old = document.getElementsByName("tx_myext[targetID]")[0].value;
   if (old) {
   document.getElementsByName("tx_myext[targetFolder]")[0].value = t;
   document.getElementsByName("tx_myext[targetID]")[0].value = id;
  function rollover(x) {					
  function rollout(x) {
   if (x != document.getElementsByName("tx_myext[targetID]")[0].value) {
  function refresh() {
   refresh = document.getElementsByName("tx_myext[targetID]")[0].value;
   if (refresh) {

4) include the css-styles:

 .rolloverMain	{							
 .rolloutMain	{

5) run the javascript function refresh() from the body onload() event to refresh the current element after the form was submitted:


6) make an instance of the class localPageTree from the new class definition, add icons to the tree ($ext_IconMode), set the path ($thisScript) to the script file (in web module usually index.php) and run the function getBrowsableTree(). Save the incoming data in the variable $output and wrap the result with a css box:

$treeView = t3lib_div::makeInstance('localPageTree');
$treeView->ext_IconMode = true;
$treeView->thisScript = 'index.php';		
$output = $treeView->getBrowsableTree();
$output = '<div style="width:250px;height:350px;background-color:#f7f3ef;margin-right:14px">'.$output.'</div>';

DISCUSS: There has to be a call to $treeView->init() before calling $treeView->getBrowsableTree().

7) include 2 conditionals in the main function to check the incoming data. In the form include 2 hidden fields to save the cursor position ($targetID) and the id of the selected page ($targetFolder):

// get all GP data for extension
$inData = t3lib_div::_GP('tx_myext');			
if ($inData['targetFolder'] != "") {
 $targetFolder = $inData['targetFolder'];		
if ($inData['targetID'] != "") {
 $targetID = $inData['targetID'];

$row[] = '<input type="hidden" name="tx_myext[targetFolder]" value="'.$targetFolder.'" />';		
$row[] = '<input type="hidden" name="tx_myext[targetID]" value="'.$targetID.'" />';