L3 3 - Web Content Management (1)

8/2/2019 L3 3 - Web Content Management (1)

1/42

Copyright IBM Corporation 2006. All rights reserved.

Proof of Technology Workshop Lab 3.3 - BM Workplace Web Content Management

Americas TechWorks Page 1 of 42

WebSphere Portal V6.0: Proof-of-Technology

Lab 3.3 IBM Workplace Web Content Management

What this Lab exercise is about

The objective of this lab is to provide you an understanding of IBM Workplace Web Content

Management (WWCM) and how to use it to create and manage content.

User Requirements

This document has the following prerequisites and assumptions:

WebSphere Portal V6.0 installed and configured WWCM configured on PortalWhat you should be able to do

Upon completion of this lab you should be able to:

Work with WWCM to create a web content management environment Understand the process required to create a web content management environment Use the WWCM Authoring portlet to construct a content site for implementation in a portlet Understand how to publish content created in WWCM to WebSphere PortalTable of Contents

1. Part One Create a new web content Library2. Part Two - Set up a new workflow3. Part Three Develop an authoring template4. Part Four Create a menu component5. Part Five Create a presentation template6. Part Six Build a Site framework7. Part Seven Create and edit new content8. Part Eight Implement the new portlet and test it


2/42


Proof of Technology Workshop Lab 3-3IBM Workplace Web Content Management

AmericasTechWorks Page 2 of 42

Scenario

The CIO has asked you to include in the new intranet portal environment currently being created

information for all employees about what is going on within the company. Since the companyhas decided to use WebSphere Portal you have decided to work with the Web Content

Management feature that comes with it to create a new portlet that will deliver the news to the

employees. Here is what the employee news content page will look like.


3/42




Exercise Instructions

Part One: Create a web content Library

This first step will show how to create a new library that will contain the artifacts for the new

content based portlets.

__ 1. Open WebSphere Portal server if it is not already open in a browser__ 2. Log in using wpsadmin/wpsadmin__ 3. Click on the Launch icon and then click on Administration__ 4. In the Portal Content section click on Web Content Libraries


4/42




__ 5. Create a new Library__ a. Click on the *Create new Library button__ b. In the Create new library window enter

i) EmployeeWebPage as the Web content library nameii) Information about the Employee web page will be stored in this

library as the description

iii) Check the box under Prohibit library from being deleted

iv) ClickOK__ 6. Configure the Web Content Management page to use the new library

__ a. Click on the Launch icon and then click on Web Content


5/42




__ b.Open Web Content Management by clicking on the tab (if a Security windowopens click on Always)

__ c. Click on Configure (it is located to the right at the top of the window)__ d.Click the Plus (+) sign next to Library Selection__ e. Select the EmployeeWebPage library and click on the Add> button to select it

__ f. ClickOKPart Two: Set up a new workflowNext to be done is to set up a new, simple workflow with WWCM to manage the new content

that is created each day.

__ 1. The first thing to do is to create the Workflow Actions that will be used with theworkflow stages.

__ a. Click the New__ b.Open Workflow Actions and select Publish Action


6/42




i) Enter Publish in the Name and Display title fieldsii) Enter a description (e.g. Action that will publish content)iii) Click on Save and then Save and close

__ c. Click the New button__ d. Open Workflow Actions and select Expire Action


7/42




i) Enter Expire in the Name and Display title fieldsii) Enter a description (e.g. Action to be used to mark a document as

expired)

iii) Click on Save and then Save and close

__ 2. Now lets create a workflow stage__ a. Click the New button__ b.Click on Workflow Stage__ c. Enter Draft in the Name and Display title fields__ d.Enter a description (e.g. Create and modify content)__ e. Click on Save and then Save and close


8/42




__ 3. You should now be back on the main Authoring page.__ a. Click the Plus (+) sign next to Workflow Items__ b.ClickWorkflow Stages to see the stage you just added.

__ 4. Create another stage__ a. Click the New button__ b.Click on Workflow Stage__ c. Enter GoLive in the Name and Display title fields__ d.Enter a description (e.g. Publish content)__ e. Expand the Properties section (if not already open) by clicking the Plus (+) sign


9/42




i) In the Execute on Entering Stage: (NOTE: this property specifies anaction that should occur when the item under workflow control enters the

stage.) click on the Select Actions button

ii) Select the Publish action

__ f. Click on OK__ g.Click on OK to return to the GoLive definition window


10/42




__ h.Clicking on Save and then Save and close__ 5. Create one final stage for your workflow.

__ a. Click on the New button__ b.Click on Workflow Stage

i) Enter Expire in the Name and Display title fieldsii) Add a description (e.g. Mark content as expired)iii) Expand the Properties section (if not already open) and under Execute on

Entering Stage: click on the Select Actions button

iv) Select the Expire action


11/42




v) ClickOK__ c. Click on OK. You should now be back in the Expire definition window.

__ d.Click on Save and then Save and close__ e. You should now be back on the main page


12/42




__ 6. Now that the stages have been created you need to create a new Workflow.__ a. Click on the New button__ b.Select Workflow__ c. Enter QuickEdit in the Name and Display Title areas__ d.Put in a description (e.g. Workflow for doing a quick content edit)__ e. In the Properties section (expand it by clicking on the plus (+) if it is not already

open) click on the Select Workflow Stages button under Workflow Stages:

__ f. Select all of the Stages and click on OK


13/42




__ g. In order to have the stages in the proper sequence within the Workflow selectGoLive and click on the UP arrow on the right of the screen. This should move the

stage up one place so that it is under the Draft stage. ClickOK. When you have

done this here is what you should see (notice the order of the three stages: Draft,

GoLive, and Expire).


14/42




__ 7. The last thing to do is add information about which users can use the workflow.__ a. Expand the Access property by clicking on the Plus(+) sign. (Notice that there are

three sections: Effective, User Defined, and System Defined.)

__ b. In the System Defined section click on the Grant Read Access button to open it.__ c. Select Groups in the first pull down window__ d.Click the Search button__ e. From the returned list select Portal Lab Users__ f. ClickOK


15/42




__ g.ClickOK. Here is what you should see

__ h.Click on Save and then Save and close


16/42




__ i. You have successfully created a new workflowPart Three: Develop an authoring template

Lets now create an authoring template to describe all of the attributes for a piece of content, inthis case Employee News. There are two parts to creating a template, Authoring Template

Settings and Default Content Settings. Normally, there are several implied attributes associated

with all pieces of content but additional attributes are needed for the News content.

__ 1. Click on the New button__ 2. Click on Authoring Template__ 3. Enter Employee News in the Name and Detail title areas__ 4. Enter a description (e.g. Content template to be used when entering news for our

employees).


17/42




__ 5. Now, lets add the additional settings, Identification, Workflow and Content needed forthe template.

__ a. Open the Default Content Settings section by clicking on it

__ b.Expand the Identification section by clicking the Plus (+) sign next to iti) Enter Employee News in the Name and Detail title areasii) Enter a Description (e.g. Content template to be used when entering

news for our employees)


18/42




__ c. Expand the Workflow section by clicking the Plus (+) sign next to iti) Click on the box next to Hide section to select itii) Click on Select Workflowiii) Select the QuickEdit workflow

iv) Click on OK


19/42




__ d.Finally, add the content elements that will be used by the content contributors whenadding new content

i) Click on the Manage Elements buttonii) Open the drop down box under Element type by clicking on the down

arrow

iii) In the list find Rich Text and click on it to select itiv) Enter Newsbody in the Name and Display title areas

v) Click the +ADD buttonvi) Repeat steps i through v to create the following elements

(1) Image with a name ofNewsImage


20/42




(2) Text with a name ofDisplayTitle(3) HTML with a name ofNewslink

vii) Click on OK(NOTE: notice what has occurred in the authoring template. You may need to scroll down in the

Authoring template window to see the four elements that were just added. The elements are what

a content contributor will see when she/he uses the template to add new content. You will see

how to do that in a later section.)

viii) Click on Save and Save and Close

Part Four: Create a menu design

__ 1. A menu is a search mechanism that looks for published content that matches its searchcriteria. The search criteria are profiles comprising Site Areas, Templates, categories and

Keywords. Content that has a profile that matches are listed as links in the Menu.

__ a. Click on the New button__ b.Click the arrow next to Component to expand it

__ c.Select

Menufrom the list


21/42




__ d.Enter EmployeeNews in the Name and Display title areas__ e. Enter a Description (e.g. Daily Employee News)


22/42




__ 2. Now you need to associate the Authoring Template created in the previous part to theMenu Component.

__ a. In the New Element Query section, select Authoring Templates by clicking on thebox next to it

__ b.An Authoring Templates section will open. Click on the Select AuthoringTemplates button

__ c. Select Employee News by clicking on the box next to it__ d.Click on OK__ e. Click on OK


23/42




__ 3. Expand the Menu design properties section (if not already open) by clicking on the Plus(+) sign next to it to change the sort order

__ a. In the Sort results display order: areai) Select Publish Date in the first boxii) Select Name in the second boxiii) Select Description in the third box

__ 4. Now find the Header section and add: (NOTE: you can use the Import button to bringin the code below. Go to C:\PoT\Labs\WCM\ and select MenuHeader.html)

__ a.Daily Employee News

__ 5. Finally set the News titles up as a link. In the section Design for each menu searchresult add: (NOTE: you can use the Import button to bring in the code below. Go to

C:\PoT\Labs\WCM\ and select MenuMatching.html)

__ a.


24/42




__ 6. The next thing to do is to define who can view the results of the menu in a site.__ a. Find the Access section (it is near the bottom of the window) and open it__ b. In the System Defined section click on the Grant Read Access button to open it__ c. Select Groups in the first pull down window__ d.Click the Search button__ e. From the returned list select Portal Lab Users__ f. ClickOK__ g.ClickOK__ h.Click on Save and Save and close


25/42




Part Five: Create a presentation template

In this section you will create the presentation template to deliver the employee news content.The template consists of the layout of components that will be shown in a web page along with

the default properties of a web page. The presentation template you will create will be placed inthe right hand Portlet that shows the detail news article.

__ 1. Click on the New button__ 2. Select Presentation Template__ 3. Enter EmployeeNewsDetail in the Name and Display title areas__ 4. Enter a Description (e.g. Detail content display for an employee)

__ 5. In the Presentation Template section add the following code after the


26/42




__ 6. Click on Save and Save and close__ 7. In the left hand window click on Presentation Templates to see what you just added

Part Six: Build a Site framework

In a Web Content Management environment a Site framework is what links together the portlets(or pages) automatically using the Menu and Navigator components. The framework consists ofSites that are made of Site Areas and content.

__ 1. Lets first create the Site.__ a. Click on the New button__ b.Select Site__ c. Enter EmployeeNewsSite as the Name and Detail title areas__ d.Enter a description (e.g. Site used with Employee news)


27/42




__ 2. Now lets associate the presentation and authoring templates that you created earlier.__ a. In the Site Properties section, click the Edit Template Mapping button__ b. In the Authoring Templates section (the top half) click the button next to Employee

News to select it

__ c. In the Presentation Templates section (the bottom half) click the button next toEmployeeNewsDetail to select it

__ d.Click on OK__ e. Click on OK__ f. Click on Save and Save and close


28/42




__ 3. Next, create a Site Area.__ a. Click on the New button__ b.Select Site Area__ c. On the New Site Area window select EmployeeNewsSite by clicking in the button

next to it in the right hand window

__ d.Click on OK__ e. Enter EmployeeNewsArea in the Name and Detail title areas__ f. Enter a description (e.g. Location of employee news in the Employee News Site)


29/42




__ 4. Now lets associate the presentation and authoring templates that you created earlier.__ a. In the Site Area Properties section, click the Edit Template Mapping button__ b. In the Authoring Templates section (the top half) click the button next to Employee

News to select it

__ c.In the Presentation Templates section (the bottom half) click the button next toEmployeeNewsDetail to select it


30/42




__ d.Click on OK__ e. Click on OK__ f. You should now be back on the EmployeeNewsArea.NOTE: The Authoring and Presentation template combination selected in the previous

window are now shown in the Properties section. Notice that both are underlined and

highlighted. If you click on one of the templates it will open so that you can modify it.Should you decided to try it, click on the Close button in the template window when

finished to return to the EmployeeNewsArea window.


31/42




__ g.Click on Save and Save and Close

Part Seven Create and edit web content

__ 1. Now you can create and edit content for the employee news site.__ a. Click the New button__ b.Select Content__ c. In the New Content window Employee News as the Authoring template

__ d.ClickOK__ 2. The Employee News window should be open. Lets identify the new content.


32/42




__ a. Enter New Employee Vacation News in the Name and Detail title area__ b.Enter a new description (e.g. Announce new vacation opportunity)

__ c. The Content section is where information will be entered into each of the fourelements that were added into the authoring template earlier in the lab

i) In the Newsbody element (which uses the Rich Text Editor) enterAnnouncing a new vacation opportunity for all employees

ii) In the NewsImage element click on the Upload File button and click theBrowse button. Find Trips.bmp. It is the directory C:\PoT\Labs\WCM,

select it, and clickOK

iii) In the DisplayTitle element enter New Employee VacationOpportunities to Yellowstone National Park

iv) In the Newslink element click on the Insert Link button(1) In the Insert Link window select External URL as the Link Type(2) Enter http://www.yellowstone.net in the External Link area(3) Enter Read more about it as the Link text

v) Select New Window in the Link target pull down


33/42




vi) Click on OK__ d.Click on Save and Save and close

__ 3. Finally, select the site area for this piece of content__ a. In the left hand window expand the EmployeeNewsSite by clicking on the Plus (+)

sign next to it

__ b. In the right hand window select the EmployeeNewsArea by clicking the circle nextto it

__ c. ClickOK


34/42




__ 4. Now lets publish the content just created by moving it through the workflow.__ a. Expand My Items (if not already open) by clicking on the Plus (+) sign__ b.Click on Draft__ c. Select New Employee Vacation News in the right hand window__ d.Click the More Actions button to expand it__ e. ClickNext Stage

__ f. This is what you should see when the move is successful (the content item that wasthere is now gone)


35/42




Part Eight View The Content in a Portlet

The Local Rendering Portlet is installed with the Authoring UI. To see the Employee news that

youve created in this lab you will want to make a copy of this portlet. You will configure thisportlet to show the Employee News you just created.

__ 1. Copy the Local Rendering Portlet into new portlets.__ a. Click on the Launch icon click and then Administration__ b.Select Portlets in the Portlet Management section__ c. In the Search window enter Web and click the Search button__ d. In the list that is returned find Web Content Viewer__ e. Click the Copy Portlet icon (the second one shown)__ f. Name both the new portlet application and portlet, Employee News


36/42




__ g.ClickOK__ h.Create a second portlet application and portlet by clicking the Copy Portlet icon

again on the Web Container Viewer portlet

__ i. Name both the new portlet application and portlet, Employee News Detail__ j. Click on OK.__ k. In the Search window on Manage Portlets screen enter Employee and click on the

Search button to display the following screen.

__ 2. Now, create a new page and add the two portlets to the page__ a. In the Portal User Interface section select Manage Pages__ b.Click on Content Root__ c. Click on the New Page button


37/42




__ d.Name the new page Employee News__ e. In the Theme pull down select the companys theme AJRS__ f. Use the defaults for the page, click on OK

__ 3. Now that the Employee News page has been added lets add the two portlets to the page__ a. The new page will be at the end of the page list so click on enter 5 in the Jump to

page: box and click the icon next to it

__ b.Select the Edit Page (pencil) icon__ c. In the left hand frame, click the Add Portlets icon__ d. In the Search window enter Employee and click the Search button__ e. From the returned list select Employee News, clickOK__ f. In the right hand frame, click the Add Portlets icon__ g. In the Search window enter Employee and click the Search button__ h.From the returned list select Employee News Detail, clickOK

__ i. Click on Done


38/42




__ 4. Now that the portlets are on a page they need to be configured to work with the content inWWCM. Lets start with the portlet in the left hand frame.

__ a. Open the Launch icon and select the new Employee News page__ b. In the Employee News portlet click on the down arrow and clickConfigure

__ c. In the Content section, select Component by clicking the circle next to it__ d.Click on the Edit icon in the Component section

i) Select Menu Component in the left hand frameii) Select EmployeeNews in the right hand frame by clicking the circle next

to it

iii) Click on OK


39/42




__ e. Click the Edit button under Content__ f. Click the plus (+) sign next to EmployeeNewsSite in the left hand frame__ g. In the left hand frame select EmployeeNewsArea by clicking on it__ h.Click on OK__ i. In the Links section, select This page under Broadcast Links To: (if it is not

already selected)


40/42




__ j. Click on OK__ 5. Lets now configure the portlet in the right hand frame.

__ a. In the Employee NewsDetail portlet click on the down arrow and clickConfigure__ b. In the Content section make sure that Content Item is selected (if not, select it)__ c. Click on the Edit button under Content__ d.Click on the plus (+) sign next to EmployeeNewsSite__ e. Select EmployeeNewsArea by clicking on it__ f. In the right hand frame select New Employee Vacation News__ g.Click on OK__ h.Click the pull down arrow in the Select a target portal page area and select

Employee News

__ i. In the Links section, under Receive Links From select the option Other portletsand this portlet (if not already selected)


41/42




__ j. Click on OK__ 6. Lets see what the content will look like.

__ a. Click on the Launch icon click__ b.Click on the page Employee News__ c. Here is how the content you created on a portal page looks


42/42


What was done in this exercise:

1). A workflow was defined to control how content is created and published

2). An authoring template was defined for users to add content by completing a form verses

having to create HTML pages or web applications.

3). In order to select to the Employee content created with the authoring template a menucomponent was created.

4). A presentation template was created to display the Employee content.

5). A site was created to contain the layout of the menu and employee content

6). Employee content was entered using the template and following the workflow process to

review/preview, approve and publish the content.

7). Portlets were added in WebSphere Portal to show the published content on a new portal page.

END OF LAB EXERCISE

L3 3 - Web Content Management (1)

Documents

Transcript of L3 3 - Web Content Management (1)