eXo Platform is a perfect runtime for content-based applications. It is very easy to create flexible data structures, add forms and display them. The built-in Content Management System contains all the constructs you need to speed up your app development.
In this series of posts, we will demonstrate how to use eXo Platform capabilities to add a blog to your social intranet.
Use Case
There are multiple ways to build a blog system, public/private, multi-user vs single, etc. Here, the goal is not to build a generic blog management system that would fit any /all requirements, but rather to focus on a single use case. For the purposes of this tutorial, we used requirements from our recent project to establish an internal blog at eXo – a blog for employees to share internally what they do, what they like. We are a global company, with eXoers all around the world. Since we are using the social intranet from eXo Platform 3.5, the new blog will be a simple system open to all intranet users.
Getting Started
eXo Platform really shines when it comes to live development. So you could very well – as we did initially – build this blog system entirely from the UI. We added pages with the portal UI, created the data structure in the ECM Admin and coded all the templates in the embedded IDE. Everything live, without a single server restart.
However, to make it easier to reuse and share with you, we finally ended up creating an installable extension. To learn more about how to create a new extension, please see our eXo Platform Developer Guide.
Any code or config shown below can be found in this Git repository: https://github.com/exo-addons/blog-extension
Navigation
The very first step is to to define a set of pages.
: the blog homepage, where post excerpts are listed
: the form where users can quickly add a new post
: the blog back office where posts are managed
: the page where each complete article is displayed
Let’s start with the navigation.xml:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<page-nodes>
<node>
<uri>blog</uri>
<name>blog</name>
<label>Blog</label>
<page-reference>portal::intranet::blog</page-reference>
<node>
<uri>admin</uri>
<name>admin</name>
<label>Blog Admin</label>
<visibility>HIDDEN</visibility>
<page-reference>portal::intranet::blogadmin</page-reference>
</node>
<node>
<uri>add</uri>
<name>add</name>
<label>Quick Post</label>
<visibility>HIDDEN</visibility>
<page-reference>portal::intranet::quickpost</page-reference>
</node>
<node>
<uri>article</uri>
<name>article</name>
<label>Blog Article</label>
<visibility>HIDDEN</visibility>
<page-reference>portal::intranet::blogarticle</page-reference>
</node>
</node>
</page-nodes> |
Quite easy, right ? Two things to note: explicitly refers to intranet portal, as our extension sits on top of it. Also note the visibility, which will be interpreted by not generating a menu entry on the frontend (portal admins have the ability to edit them of course).
Let’s see how it goes. Login as an admin, then . You should see the new navigation:
Pages
Next, we need to point the navigation to real pages.
will use the Content Explorer (aka File Explorer Portlet)
will use the Content Detail (aka Single Content Viewer)
will use the Content List (aka Content List Viewer)
will use the Fast Content Creator
Here’s an excerpt of the pages.xml:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<page>
<name>blog</name>
<title/>
<access-permissions>*:/platform/users</access-permissions>
<edit-permission>*:/platform/administrators</edit-permission>
<portlet-application>
<portlet>
<application-ref>presentation</application-ref>
<portlet-ref>ContentListViewerPortlet</portlet-ref>
<!-- ... -->
</portlet>
</portlet-application>
</page>
<page>
<name>quickpost</name>
<title/>
<access-permissions>*:/platform/users</access-permissions>
<edit-permission>*:/platform/administrators</edit-permission>
<portlet-application>
<portlet>
<application-ref>formgenerator</application-ref>
<portlet-ref>FastContentCreatorBasicPortletStandard</portlet-ref>
<!-- ... -->
</portlet>
</portlet-application>
</page>
<page>
<name>blogadmin</name>
<title/>
<access-permissions>*:/platform/users</access-permissions>
<edit-permission>*:/platform/administrators</edit-permission>
<portlet-application>
<portlet>
<application-ref>ecmexplorer</application-ref>
<portlet-ref>FileExplorerPortlet</portlet-ref>
<!-- ... -->
</portlet>
</portlet-application>
</page>
<page>
<name>blogarticle</name>
<title/>
<access-permissions>*:/platform/users</access-permissions>
<edit-permission>*:/platform/administrators</edit-permission>
<portlet-application>
<portlet>
<application-ref>presentation</application-ref>
<portlet-ref>SingleContentViewer</portlet-ref>
<!-- ... -->
</portlet>
</portlet-application>
</page> |
That’s it. We now have the page structure for our blog system. Login as any user, and you should see the Blog menu and try the URLs.
Now, to get something functional we need to invite WCM to the party. Since any user can be a potential blogger, we’ll store the blog posts in a location that is available to all: . The CLV (Content List Viewer) can then be configured accordingly:
|
1 2 3 4 5 |
<preference>
<name>folderPath</name>
<value>repository:collaboration:/Groups/platform/users/Documents</value>
<read-only>false</read-only>
</preference> |
We need to tell the CLV to display the page when we click on one of the items in the list:
|
1 2 3 4 5 |
<preference>
<name>basePath</name>
<value>blog/article</value>
<read-only>false</read-only>
</preference> |
And of course, the quickpost form should also point there:
|
1 2 3 4 5 |
<preference>
<name>path</name>
<value>/Groups/platform/users/Documents/Blog</value>
<read-only>false</read-only>
</preference> |
Finally, let’s tell the Content Explorer to use the drive so that it will display our posts:
|
1 2 3 4 5 |
<preference>
<name>driveName</name>
<value>users</value>
<read-only>false</read-only>
</preference> |
That’s it. We now have a rudimentary yet fully functional blog system.
Give it a try: log in as admin and go to http://localhost:8080/portal/intranet/blog/add.
Next, save, then go to http://localhost:8080/portal/intranet/blog/admin to publish your post. Check http://localhost:8080/portal/intranet/blog to make sure your post appears:
Finally, click on the post title to verify that your article displays under http://localhost:8080/blog/article.
Conclusion
We’ve demonstrated how to build a rudimentary blog system in minutes, using the powerful portal and content management constructs that come with eXo Platform 3.5. In part 2 we’ll add a little more coolness to the blog, by making it easy for even non-technical employees to use.
Resources
- Download eXo Platform 3.5
- Blog Extension, Code and Config
- Developer Guide
- Installing and Starting eXo Platform
[...] Building a Fully Functional Blog with eXo Platform – Part 1 [...]
12:00 am, November 14, 2012