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 the 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:

Classic1.2.png

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 create your own web site instead of modifying the existing web sites.

ACME1.2.png

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. The Administration bar on the top of the site provides you with the most used WCM functions.

Edit Mode and Live 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 Live 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.

4 Create a New Site

Go to Site Administrator --> Create Site in the Administration bar. There you choose a name of your new site. As you have already known, you are effectively creating a new portal. Let's call our new site "VIR".

You have to choose a template for your new site, let's take "ACME". There is no possibility to start with an "empty" template. You also set the access and edit permission for this new site. Finish creating a new site by clicking the Save button.

The new site that you have just created will be listed in the list of sites when you go to Sites on the Administration bar.

Sites1.2.png

Click on this site name in order to switch to your own site where you freely create the site's content to meet your need.

VIRHome.png

Make it user friendly

Your new site opens, it looks like ACME, however you can change the names for entries on the navigation bar.

Go to Site Editor --> Edit Navigation on the Administration bar. The User Workspace opens. Choose the "Overview" node, click right, click on Edit this node and replace the Label "Overview" by "News". Repeat this for all nodes. Don't forget to finish your work by clicking on the green check mark icon.

EditNode.png

When you are back to your new site. You will see two more navigation menu items called Banking and Finance and Stock Market. 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
A page can of course contain several portlets. Each of these portlets contains one the above points. This way you can for example create the site of a newspaper. A newspaper contains a lot of articles (=content) which are listed in several places of the homepage (=several portlets). Whenever the reader clicks on an article link the complete content is shown.

5.1 Direct Content Creation

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

1. Go to Site Editor --> Edit Site on the Administration bar. The Single Content Viewer appears:

SingleContentViewer.png

Select Create a new content. Click the Next button. It will show the form that you have to enter the title of the content and select the layout for that content.

SingleContentViewer1.png

Give your content a name: "Northern regions face blackouts next year".

You can create any content. Don't be worried by the other panels called Illustration and Advanced. Click the Fast Public button.

SingleContenViewer2.png

Congratulation you have just published your first content!

5.2 Sites Explorer

Normally content is independent of a certain page. Therefore, let's create some independent content.

Open the Sites Explorer by going to Group --> Sites Explorer on the Administration bar.

SitesExplorer.png

Content Folder versus Document Folder

As you know eXo products are based on JCR, where all documents and folder are nodes of a hierarchy. Each node has specific node type. The Document Folder corresponds to the predefined JCR node type called nt:folder. The Document Folder is therefore a very restricted folder type which only allows to add special JCR nodes.

The Content Folder however allows you to add any kind of documents or sub folders. Don't worry too much, always use the Content Folder!

Choose the drive called "Manage site". Click on the VIR site. Open the "web contents" folder and click right and choose Add Folder. Create a "Content Folder" called "Insight" and open this new folder.

AddFolder1.2.png

Click on the "Insight" folder and click on AddDocument1.2.png on the action bar. You will see a dialog where you should select the "Article" template. Create the news called "The winds of change".

AddNewDoc.png

Add more documents in the same folder called "Renewable energy potential" and "Rural development".

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 "The winds of change", you will see the document content.
  • Click on ManagePublications1.2.png on the action bar.
  • In the navigation choose "Overview" 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 the Close button.
Publication1.2.png

Click on "Overview" 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.

6 Create a New Page

You are going to create a new page where we show a list of all news.

6.1 Manage Pages

Go to Site Administrator --> Manage Pages and have a look on all pages of all portals. You will also notice the Add New Page button.

AddNewPage1.2.png

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

AddNewPage1.21.png

6.2 Content List Viewer

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

SearchPage.png

Click on the EditIcon.png. 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 this portlet.

ContentListViewer.png

The CLV dialog appears. Please choose the automatic mode.

Automatic and Manual mode

In Automatic Mode you select exactly one folder. All documents in that folder are published in the list. They are ordered by the criteria you choose.

In Manual Mode you select several documents. They are all shown in one list despite the fact they are in different folder. You can adapt the order of published documents to your needs.

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

PortletSetting.png

The standard portlet dialog is still open. Open the "Portlet Setting" tab and modify the "Portlet Title" to "Insight 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.

Page versus Navigation

Don't be afraid when deleting navigation nodes. You are not destroying an existing page. If you delete a navigation node the underlying page remains untouched. In fact pages and navigation nodes are independent.

You already know that in eXo vocabulary a page is node. Therefore we create a new node for the Insight page. A node is always part of a hierarchy which in this case is the navigation structure. Your node must be placed somewhere on the navigation. We want to place the "Insight" node next to the "Overview" 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 "InsightNode" and the label "Insight".

AddNewNode.png

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

PageSelector.png

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

MoveUp.png

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

You can see your page by clicking on "Insight" on the navigation bar. Congratulations.

Insight.png

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

7 Parameterized Content Viewer

In your Insight page click on the "The winds of change" article. You will see the whole article in a single page. This page is called the Parameterized Content Viewer or PCV.

Recently Modified

Creator: quynh lien on 09/17/2009
Copyright (c) 2000-2009. Allright reserved - eXo platform SAS
1.6.13286