WCM for Beginners

WCM for Beginners

1 Objective

You will create your eXo based web site using eXo WCM. Your will use a template, create new pages and manage content. At the end of this tutorial you will know all concepts and keywords of WCM. You should have an eXo WCM running and have administrator access to it. If you need to install WCM first refer to http://www.exoplatform.com/portal/public/en/services/downloads.

2 Requirements

You should know all functions of eXo Portal.

3 Overview

Please login as administrator of your eXo WCM, for example use "root" as login and "exo" as password.

You will see a page that looks like this one:

As you see the User Workspace at the left hand side is identical to the eXo Portal user workspace. There are still the standard portlets: the footer, the banner and the navigation bar. Above the banner portlet there is something really new, we call it the Admin Tool Bar. This tool bar gives you direct access to the most used WCM functions. All these functions already exist in eXo Portal and they are still accessible using the user workspace.

Edit Mode
The only function that is unique to WCM is the on/off switch at the upper right corner. It allows you to switch between the View Mode and the Edit Mode of WCM. In the edit mode you can modify any part of your portal by clicking on the pencil icon, that appears then at the corner of each portlet.

Web Site = Portal
As you already know in eXo Portal you can manage several portals at the same time. The first thing to understand is that a WCM web site is identical to a portal in eXo Portal. By creating a new site in WCM, basically you create a new portal.

When you open WCM for the first time you will see the classic portal, which is there for administration reasons. You also find an example web site called "ACME". You should not modify the existing web sites but create one of your own.

4 Create a New Site

Click on "Create Site" in the Admin Tool Bar. There you choose a name of your new site. As you already know you are effectively creating a new portal. Let's call our new site "Tools".

You have to choose a template for your new site, let's take "ACME". There is no possibility to start with an "empty" template. (In version 1.1 you will be able to choose between several templates.)

Make it user friendly

Your new site opens, it looks like ACME, but the menu entries of the navigation bar are a little bit weird. They have some generic names like "portal.Tools.home". This is a preparation for internationalization. In internationalization you use these placeholders to replace them by the terms in local languages.

As we don't want to deal with it for the moment we click on Edit Navigation in the Admin Tool Bar. The User Workspace opens. Choose the "portal.Tools.home" node, click right, click on Edit this node and replace the Label "#{portal.Tools.home}" by "Home". Repeat this for all nodes. Don't forget to finish your work by clicking on the green check mark icon.

When you are back to your new site. You will see two more navigation menu items called Administration and Sites Management. These menus are part of the navigation? for the administrator group. They are only visible to you and the all the other administrators.

5 Create Content

You have to accurately distinguish the terms content and page. A page is linked to the site's navigation. Whenever the user clicks on a navigation menu, a specific page is shown. This page contains portlet(s). And the portlet contains content. WCM content can be:

• an ECM document (that means any kind of document)
• a WCM content, a web-oriented content, see also Web Content Folders.
• a list of contents

5.1 Direct Content Creation

This functionality creates new content on the current page. The content is immediately published.

In the navigation bar click on "Product". Go to the Admin Tool Bar and click on "Add Content". Select "Quick web content creation".

Give your content a name: "Screwdrivers". Click Next. You can create any content. Don't be worried by the other panels called Illustration, default.css, and default.js. Click save. Then leave the permissions unchanged, just click on "Finish" at the lower-right corner.

Congratulation you have just published your first content!

You will say, that it's not quite that nice with these two empty portlets saying "This viewer has not been configured yet." above your new text. Let's see what we can do.

Now the Edit Mode enters the game. Go to upper right corner and click on the on/off switch. The pencil icons appears at each portlet. Click on the pencil of the lower empty portlet. You already know how to create new content, present your drilling machines.

There is still another empty portlet. As we do not need it we wish to delete it: but how? You click on Edit Page Wizard. Here you should dig up your portal knowledge: Click on "Next", use the current layout, that means click on "Next". You will see the page layout. Go with the upper portlet, which is called "Services" and delete it by clicking on the cross at the upper right corner of this portlet.

You will notice the "screwdriver portlet" which is placed at bottom of the page in a portlet. This portlet has been created automatically for your content. The portlet type is a Single Content Viewer. The Single Content Viewer has been introduced by WCM to show any content on a web site page. The screwdriver portlet's name is generated by WCM and therefore not user-friendly. We will soon see a different way for publishing content.

To make our work complete, drag the "screwdriver portlet" to the place where the "services portlet" was, before you deleted it. Take the portlet at the upper left corner and drop it in the empty space.

5.2 Sites Explorer

Normally content is independent of a certain page. Therefore let's create some independent content. Open the Sites Explorer on the far right of the navigation bar (Sites Management - Sites Explorer), possibly you need to use the small arrows to get to this menu item.

Click right and choose "Add Document". You will see a dialog where you should select the "Article" template. Create the news called "Discover Screwdriver XG205".

Add more documents in the same folder creating news called "Brazil Branch Opened" and "Welcome Mr Hibal".

You have just created news documents, but they are not published anywhere. That means nobody can see your news. Let's publish the most important news on the home page:

• Double-click on the document "Brazil Branch Opened", you will see the document content.
• Click on the publish icon.
• In the navigation choose "Home" and click on the right-arrow. In fact you will notice that you could publish your content at several places at the same time.
• Click on close.

Click on "Home" in the navigation bar. You will find that your news has been published in a "Single Content Viewer" at the bottom of the Home page. The "Single Content Viewer" is a portlet like any other portlet. There are again two empty portlets, but you have already seen how you can re-arrange the layout of your page by clicking on "Edit Page Wizard"; but wait we still need one these empty portlets.

6 Create a New Page

You are going to create a new page where we show a list of all news. Nowadays it's modern to call this kind of page a "blog".

6.1 Manage Pages

Go to eXo Start - Adminstration - Advanced - Manage Pages and have a look on all pages of all portals.

You will also notice the Add New Page button.

Use the name "BlogPage" for the new page. As you want to create a public blog, don't forget to choose the owner type "portal". In the Page Layout Tab choose "Content List Viewer" (also called CLV). Click on "Save". Voilà the new page is created.

6.2 Content List Viewer

The page is created but completely empty. Search your BlogPage in the list of the Page Manager. Type "Blog", choose "Title" and click on the magnifying glass. Do not use the enter key.

You will see your page with a single portlet which is called "Content List Viewer". You want to change the generic name of this portlet and also wish to fill the portlet with some content. Click on the pencil icon at upper right corner of the portlet.

The CLV dialog appears. Please choose the automatic mode.

Click on the plus icon next to "Folder path". Navigate to "Tools/web contents". Click on the green check mark next to the "News" folder. Don't modify anything else. Close the CLV dialog by clicking on "Save".

The standard portlet dialog is still open. Open the tab "Portlet Settings" and modify the "Portlet Title" to "Blog Portlet". Click on "Save".

Finish the Page Wizard by clicking again on "Save".

Congratulations. You just created your first own WCM page!

6.3 Navigation

Your page is created but you still need to make your page accessible from the navigation bar. Indeed there can be a number of ready to publish pages in an eXo Portal, that are not linked by the navigation menu.

At first let's delete the "News" from the navigation because it can be confused with "Blog". Select "News". Click right. And delete the node.

You already know that in eXo vocabulary a page is node. Therefore we create a new node for the blog. A node is always part of a hierachy which in this case is the navigation structure. Your node must be placed somewhere in that navigation. We want to place the "Blog" node next to the "Home" node. Click right a little bit to right of the green arrow-up which represents the root of your navigation structure. Choose "Add New Node". Enter the name "BlogNode" and the label "Blog".

Open the PageSelector tab. Here your create the connection between the navigation and the page. Click on Search and Select Page and choose the BlogPage you have created in the previous step. Click on "Save".

You already see a preview of your blog page, but before finishing let's put your blog to a more prominent position the navigation bar. Click right on the "Blog" Node and move it up. Repeat this until Blog is between Services and Search.

Do not forget to click the green check mark in order to save your modifications.

You can see your blog page by clicking on "Blog" in the navigation bar. Congratulations.

You see that using the CLV all documents of the "News" folder have been published.

7 Parameterized Content Viewer

In your Blog click on the "Discover Screwdriver XG205" article. You will see the whole article in a single page. This page is called the Parameterized Content Viewer or PCV. It shows a permalink for your article, which your visitors can reuse whenever they want to refer to your article. The permalink can also be used for bookmarking a page.

http://localhost:8080/portal/private/Tools/parameterizedviewer/repository/collaboration/sites content/live/Tools/web contents/News/Discover Screwdriver XG205

Pay attention to the fact that you are seeing a "private" permalink, because you are still logged in. In order to create a public permalink you should first log out and navigate to your article. You will see that the link is nearly identical but the word "private" has been replaced by "public":

http://localhost:8080/portal/public/Tools/parameterizedviewer/repository/collaboration/sites content/live/Tools/web contents/News/Discover Screwdriver XG205

8 Compose an Individual List

Let's fill your homepage with a list of links which point to different folders. You have already seen how to create a link list to all documents of one folder using the Content List Viewer (CLV). There you used the automatic mode. Now you try out the manual mode.

Open the Sites Explorer, choose the "Tools" drive and navigate to "web contents". In that folder create two new folders called "services" and "about". You still remember to always use Content Folders. In each folder add new webcontent using the Free layout webcontent template. Call them "SupportDoc" and "CompanyData". Use the titles: "Tools Support Service" and "Company Data". It's important to use webcontent and not "normal" articles because CLV in manual mode only allows you to webcontent.

After that, click on "Home" and switch the Edit mode on. Click on the pencil icon of the last empty portlet which is shown just above your "Brazil" document. Later, you may delete the other portlets if you wish.

The portlet should be a CLV. Switch to manual mode. Then click on the plus icon next to the folder path. Navigate to both the documents you have just created, add them to your list and click on "Save" Back in the CLV main dialog, click "Save" once again.

You will see both your articles in the portlet.

You have seen the main functionalities of eXo WCM. In order to discover more details go to the WCM Home Page