Child pages
  • Document and Media Tree View
Skip to end of metadata
Go to start of metadata


This app enables a tree view for the Document Library and Web Content. The main purpose on this view is to provide authenticated users an easy way to move and organize their content using a tree structure and drag and drop feature.


The Document & Media Tree View includes customizations for Document and Media portlet and Web Content portlet. Users can select this view from the drop down menu in top right and they will see the content structure in a tree. For documents and articles, a preview image is showed when mouse goes over the name of the entry, and users can drag an entry, at a time, to move it to another folder.

The tree view is not available for guest users, since it uses some Liferay's JSON APIs, which require authenticated users.


 The installation steps are as follows:

  1. Obtain Document & Media Tree View app from the Liferay Marketplace.
  2. Deploy the app in your existing Liferay installation. If you haven’s installed Liferay, please download and follow the instructions to do so.
  3. Once application is installed, you will able to see the tree icon in drop menu at top right of the toolbar.


No extra configuration is required


FeatureRelated Image
Once applications is installed, users will able to select the tree view from drop down menu in the tool bar.
In the portlet for administration of documents (Document and Media), users will see your folders, documents and shortcuts in a tree, each node is identified by its name.
In the portlet for administration of Web Contents, users will see folders and web contents in a tree view, each node is identified by its name.
In the treeview, users will able to see a preview of each content by moving cursor over entry's name.

Also users will able to move one element at time in the tree, by dragging it and drop it in the folder target.

By clicking in an entry, the user will be taken to the view/edit page of the entry. This feature doesn't apply for folders.

In the case of shortcut of documents, users will be taken to the view/edit page of the entry which is target of the shortcut and not to the edit page of the shortcut itself.

Browser Compatibility

This app has been tested in IE9+, Safari 9+, Firefox 42+ and Chrome 46+.

Known Issues

In some servers after the WAR is deployed and the Document & Media added to a page the custom CSS is not served to the browser causing missing icons & file previews. This problem is caused by the internal cache used by Liferay that generates a single css file to improve performance, if Liferay is started in development mode or the cache is disabled the problem is solved. In a production environment it will be required to clear the server temp files and in some cases even restart the server (glassfish & jboss).

If the file preview is not displayed correctly (image below), add the following parameters at the end of the URL ?js_fast_load=0&css_fast_load=0&strip=0 and refresh the page. The issue should be fixed. After that, you can remove the parameters off the URL.

Preview Issue

Code repository

The latest source code is located at the following location:

Contact Us

We welcome feature/bug reports concerning the Document & Media Tree View app. Discussion helps to clarify the ways the app can be used and also helps define directions for future development. Please post your concerns at

Change log:


New feature: multiple files drag and drop.
Bug fix: fixing bug when Liferay is not deployed in the root context of the server.


Company credits.

  • No labels