Create a Flipboard Layout for eXo Platform 4

With eXo Platform, you can easily define new Content Types and their associated view. These can be used to 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 a page. We’ve called it FlipFeed.

Note: These screenshots were taken on eXo Platform Enterprise Edition 4.0.

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 as the Content Administrator user
  • Go to the Content Administration page
  • Select Repository, then Node Types

xflipfeed-1

xflipfeed-2

xflipfeed-3

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

Add the News Template

To create a template for the news content, we now need to create a dialog that will allow us to interact with the news Node Type from the Content Explorer. We also need to create a default view that will be used to display the news content. To do so, please follow these steps:

  • In the Content Administration, select Templates then Add Template

xflipfeed-4

  • Fill in the fields as required (label, permissions, etc.). Select “exo:news” for the name

xflipfeed-5

xflipfeed-6

xflipfeed-7

  • Save your template
  • Finally, let’s test it!

Create a News Item

To make sure everything is okay, we’ll add a new news item:

  • Go to the Sites Explorer, select New Content

xflipfeed-8

  • Select News as the Content Type
  • Fill in the field as required then Save

xflipfeed-9

  • You should see something like this:

xflipfeed-10

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:

  • Go to the Content Administration app
  • Select Explorer then Views
  • Click on the Edit button of the Admin view

xflipfeed-11

  • Switch to the Action tab and click on the Edit button of the Admin tab

xflipfeed-12

  • Select Import Node then Save

xflipfeed-13

Now we can go back to the Sites Explorer and import this sample set: https://github.com/exo-addons/resource-center/blob/master/flip-feed/sysview-newsfeed.xml.

xflipfeed-14

  • Select Collaboration Drive
  • Switch to the Admin view
  • Click Import

xflipfeed-15

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 (Administration -> IDE)
  • Select menu Windows -> Select Workspace…, then “dms-system” workspace
  • In the left tree, open: dms-system > exo:ecm > views > templates > content-list-viewer > list

xflipfeed-16

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 (Edit -> Page -> Add Page)
  • Choose a name and title, then go to the layout
  • Add a Content List app and click on the Edit button to set the preferences

xflipfeed-17

  • Point the Folder Path to our sample set location (news)

xflipfeed-18

  • Switch to the Display Settings tab, set Template to FlipFeed.gtmpl and change the other settings as required

xflipfeed-19

Final Result

You should finally see something like this:

xflipfeed-20

You can find more tutorials in the eXo Resource Center and by joining the eXo Community.

Be part of the discussion, share your comments

comments

Keep in touch with the author

Tags: , , , ,