Resource Center

eXo Platform allows you to easily define new Content Types and define their associated view. This can help you create elaborate designs while benefiting from the powerful Content Management System.

In this tutorial, you will learn how to create a Flipboard-like layout for your page. We've called it FlipFeed.

Note that screenshots were taken on eXo Platform 3.5 but this tutorial is also compatible with eXo Platform 3.0. After downloading eXo Platform,  follow the README.txt file to install it and get started.

Add the "News" Content Type

We'll start by creating a new Content Type for News items. To create this Content Type, follow these steps:

• Log in using Mary (she has administrative rights in the Content section).
• Go to the Content Administration page.
• Go to the Content Types tab, then Manage Node Type.
• You can now import the following nodetype definition: https://github.com/benjp/exosamples/blob/master/flipfeed/news-nodetype.xml.

This Content Type definition is very basic. It simply contains an image that will be used in the FlipFeed effect.

Add the Dialog Template

We now need to create the Dialog that will allow us to interact with the "News" nodetype from the Content Explorer.

To add this Dialog, follow these steps:

• In the Content Administration, switch to the Content Presentation tab, then Manage Templates.



• Click on the "Add" button at the bottom right.
• Fill in the fields to fit your needs (Label, Permissions, etc.).



• Add the Dialog template which can be found here: https://github.com/benjp/exosamples/blob/master/flipfeed/dialog1.gtmpl.

Add a Default View

Finally, we need to add the default View that will be used to display the "News" content.

To define this View, follow these steps:

• In the View tab, replace the View template by the one found here: https://github.com/benjp/exosamples/blob/master/flipfeed/view1.gtmpl
• Save your template
• Finally, let's test it!

Create a "News"

To make sure everything is okay, we'll add a new "News" item:

• In the admin menu, go to the Content Explorer.
• Select "Add Document", then "News" and fill in the fields.



• Save, and you should see something like the following image.

Import a "News" Sample Set

You can import a sample set to test the template with a larger number of "News" items. The button to import nodes is not visible by default, so we'll first need to add that to the admin view:

• Login as John and open the Content Administration app.
• Go to Content Presentation, then Manage View.



• Edit the "admin-view".
• Click on the Admin tab.
• Add the "Import Node" action, and save.
• Open the Content Explorer app.
• Select the "collaboration" drive, then click on the Import Node action.

Install the FlipFeed Template

The view for each individual "News" item has been defined but we now want to define how these items will be displayed when used by a Content List Viewer portlet. For that, we'll have to add a new Content List Viewer template:

• Open the IDE app.
• In the menu, select: Window > Select workspace…, then "dms-system" workspace.
• In the left tree, open: dms-system > exo:ecm > views > templates > content-list-viewer > list



• Create a new template (menu > File > Open Local File…).
• Copy the following template and save: https://github.com/benjp/exosamples/blob/master/flipfeed/FlipFeed.gtmpl

Create the FlipFeed Page

We'll now create a new page to display our "News" with the FlipFeed effect:

• Go to the Acme website and create a new page (Admin bar > Page > Add New Page).
• Choose a name and title, then go to the layout.
• Add a Content List app.



• Edit the Content List configuration choosing the FlipFeed template.

Final Result

You should finally see something like this: