• 7.1

2013-01-30

Creating a hierarchical tree

This example explains how to replace the default thumbnail view of the store front with a hierachical tree view. The example combines PHP, CSS and makes use of the Treeview plugin for jQuery to hide and show branches of a tree.

To install the example copy the template-storefront_overview.php from the storefront_tree_template folder to the root of the default skin.

The store front using a hierarchical view (tree view).

The sample file contains links to external Javascript files and some custom code to generate the actual tree.

The Javascript file

This is the Javascript code stored in the feil "tree.js":

$(document).ready( function(){
  $("ul.filetree").treeview({
    collapsed: true
});

The code invokes the Treeview plugin once the browser has finished loading the page. The Treeview pluging uses a standard HTML <ul> element (unordered list) to render the tree.

The template file

The actual code that retrieves the publication type and document list is placed in the contect block of the template file (template-storefront_overview.php). The first section instantiates the Storefront. The getTree() returns a hierachical array of the publication types and documents. In the following section we will access each array item using the foreach function of PHP.

//Retrieve the publication types and templates for the logged on user
$storeFront = New Storefront();
$treeData = $storeFront->getTree();

Once the publication type and document information is collected in a PHP array we need to iterate through the array values. For this we use a PHP foreach loop. Within this function a custom PHP function (renderPublicationType) is called to generate the actual HTML.

This function generates the <li> elements required by the Treeview plugin. When a publication type contains one or multiple documents a sub list is created, again using <ul> and <li> elements. For each document a link to the preview_init_form is inserted supplying the internal ID of the document. The functions of the preview_init_form file determine the workflow of that document (e.g. show the User Input fields page or Database Upload page).

foreach ($treeDataArray as $publicationTypes) 
{
  renderPublicationType($publicationTypes);    
}

function renderPublicationType($publicationType)
{
  echo "<li><span class='folder'>" . $publicationType['name'] . "</span><ul>";

  if (isset($publicationType['publicationTypes'])) {
    foreach ($publicationType['publicationTypes'] as $subPublicationType) {
      renderPublicationType($subPublicationType);
    }
  }

  if (isset($publicationType['documents'])) {
    foreach ($publicationType['documents'] as $document) {
      echo "<li><span class='file'>";
      echo "<a href='site.php?formid=preview_init_form&id=" . $document['id'] . "'>";
      echo $document['name'];
      echo "</a>";
      echo "</span></li>";
    }
  } else {
    if (!isset($publicationType['publicationTypes'])) {
      echo "<li><a href='#'>-</a></li>";
    }
  }

  echo "</ul></li>";
}

Virtual Subfolders

In the current version of PrintShop Mail Web a publication type can not contain subfolders. You can however simulate nested publication types. The getTree() function can create virtual sub publication types or sub folders based on a delimiter character that appears in a document name.

When you call the function as follows getTree('', '_');, it will split the template names using the underscore character (if it exists in the name). The parts are used for the virtual folder name, the last part is used as the document name.

The tree view with virtual subfolders.

The following shows the returned array:

Array (
  [1] => Array  (
    [id] => 1
    [name] => Brochures
    ...
    [publicationTypes] => Array
    (
      [Black & White] => Array (
        [name] => Black & White
        [documents] => Array (
            [1] => Array (
              [id] => 1
              [name] => Dutch
              ...
            )
            [2] => Array (
              [id] => 2
              [name] => English
              ...
            )
         )
      )
      [Full color] => Array (
        [name] => Full color
        [documents] => Array (
            [1] => Array (
              [id] => 1
              [name] => Dutch
              ...
            )
            [2] => Array (
              [id] => 2
              [name] => English
              ...
            )
         )
      )
    )
  )
)