1

End-to-End Web Content in WebSphere Portal using Web Content Management 6.0 Theresa SmitCertified IT Specialist , IBM America’s TechWorks Research Triangle Park, NC, USA March, 2007 © Copyright International Business Machines Corporation 2007. All rights reserved. Learn how to define, create and edit content in a portlet using IBM® WebSphere® Portal V6.0 Web Content Management (hereafter referred to as Web Content Management). This article uses many of the new user interface and authoring features available in V6.0 such as, authoring template enhancements, in line Edit, link components, and new component types. Introduction..................................................................................................................................... 2 System requirements....................................................................................................................... 6 Create a library................................................................................................................................ 7 Create a workflow........................................................................................................................... 9 Create the site structure................................................................................................................. 15 Create authoring templates ........................................................................................................... 18

Create the home page authoring template............................................................................. 18 Create the News Authoring Template................................................................................... 22 Preview the authoring templates........................................................................................... 34

Create presentation templates ....................................................................................................... 34 The Home Page Presentation ................................................................................................ 35 The News Detail Presentation............................................................................................... 36 Create a menu component..................................................................................................... 37

Create the default content ............................................................................................................. 39 Create a link component ............................................................................................................... 42 Create in-line edit authoring tool .................................................................................................. 43 Connecting the parts ..................................................................................................................... 46 Adding a document ....................................................................................................................... 47 Configure the Content Preview Portlet ......................................................................................... 50 Adding content.............................................................................................................................. 52 Conclusion .................................................................................................................................... 57 Resources ...................................................................................................................................... 57 About the author ........................................................................................................................... 57

Introduction This article shows you how to create a simple News portal page using the components that Web Content Management manages and renders. The typical steps for this process are:

1. Create a library to contain all the assets 2. Create a workflow to manage the content approval process 3. Create the site structure to organize your content 4. Create an authoring template to define characteristics of your content 5. Create a presentation template and a menu component to format the display of the

content 6. Create your content 7. Configure the content and display relationships 8. Configure the portlet to display content

The Web Content Management library contains your Web site structure. This repository includes all of the components that make up the Web site, such as: authoring and presentation templates, and menu and links components that take advantage of the dynamic structure Web Content Management offers. These components help you easily manage the content and avoid broken links on the Web site. After you create the components, you can configure an instance of the Web Content Viewer portlet to show your content in a Portal environment. Since you have full access to the created content, you can easily edit and add new content to the Web site. After reading this article, you should be able to build all the design parts to support the display and management for a company news portlet scenario. The initial state for this portlet will display Home or Initial content. This content is the default for the company news Web site and uses a Home Page Authoring template. This template has a title, a summary, body elements, and a component reference that points to a menu component that will display a list of all the news for the company with. Figure 1 shows this template in the most current first.News portlet:

Figure 1 News Home Page portlet

2

The list of news items has a link for each item that displays the details of the news article. The News portlet uses a news authoring template that contains a name, title, description, summary, body, image, file, and confidential rating. Figure 3 Home Page components shows this template in the News portlet:

Figure 2 News Detail Page portlet.

Each of these templates associates with a presentation template in the parent Web site. In the site specifications, the site designer matches the Home Page Authoring template to the Presentation Template as well as select the default content. Figures 3 and 4 show how the individual parts format the display.

3

Figure 3 Home Page components

News Home Page Wireframe

Home Page Presentation

Home Page Content Attributes

Title

Body text

Component Reference

Menu (list) of News items

The Home Page presentation template renders the list of news items. The HTML in the presentation template references a menu component that will select the content and render it on the page. The Home Page presentation template displays the menu component, named SC Menu News. The content the menu component shows uses the News authoring template. When the user selects a link for one of the News items, the selected news displays in the portlet, as shown in Figure 4. The content renders using the News Detail presentation template.

4

Figure 4. News Detail components

News Detail Wireframe

News Detail Page Presentation

News Content Attributes Title

Summary

Image (limit to 200x200)

Classification

Body text

Related File

In Line Edit for authors only

Link to return to Home Page

The News Detail presentation template displays some of the fields that the author has filled in using the News authoring template. But the presentation template does not need to display all of the fields. The presentation template contains a reference to the Authoring Tools In Line Edit component that invokes authoring tasks. The presentation template also references a link component for the News Home. When the user clicks the link, the browser takes the user back to the site area News – our starting point.

Table 1 Parts created in this article Web Content

Management Part Name Contents

Library MyShowcase Contains design elements, Site structure and all content

Publish action Publish Scheduled Move on Expiry Date action

Move to next stage on Expiry date

Workflow Actions

Expire action Expire SC Stage Draft On entry actions for

Publish and Scheduled Move on Expiry date

SC Stage Publish The group [all users] has read access in Workflow Security in this stage

Workflow Stages

SC Stage Expire On entry actions for Expire

Workflow SC Workflow Standard Has Draft, Publish and Expire stages in that

5

order Site/SiteAreas Showcase Internal Site

News

Site has authoring, Presentation mappings and default content specified.

Authoring Templates SC AT HomePage SC AT News

Elements specific to content type

Presentation Templates SC PT HomePage SC PT NewsDetail

Formats the display of content using references to AT elements and Library components.

Menu SC Menu News List of all News content for Site

Link SC Link News Home Link to the Home Content so its possible to navigate back to the Company Site

Authoring Tool SC Tools In Line Edit Format for Add, Edit and approve buttons

Image SC Image Add Button SC Image Edit Button SC Image Approve Button

Buttons used in the In Line Edit tools component

To minimize the initial steps in this article, you do not need to set security attributes. Similarly, you do not need to organize the content and design components into separate libraries. You can do this once you have made decisions on how to best secure and organize your content.

System requirements This article assumes that you installed the following software:

• WebSphere Portal 6 • Web Content Management • Web browser (this article is tested on Mozilla Firefox 1.5.x, and Microsoft Internet

Explorer 6.0) Additionally, you should review the Portal Information Center topic, An overview of developing Web content, and transfer your database from Cloudscape to your preferred database.

6

Create a library A Web Content Management library is the container for all your WebSphere Portal Web Content design and content. In practice, you might choose to separate design artifacts from your content and Web site structure in separate Libraries. For this article, use one Library for all of the assets. To create a Web Content Library: 1. Start Portal 2. Using a FireFox or IE browser, open http://<HostName>:10038/wps/portal. 3. Login as wpsadmin/passw0rd (or use your administrator ID and password). 4. Navigate to Portal Administration and select Portal Content -> Web Content Libraries. 5. Select Create new Library and name it MyShowcase, as shown in Figure 5:

Figure 5. New Library specifications

6. Click OK to create the new Library.

You should configure the Web Content Management Authoring portlet to point to the new library. To ensure that all the remaining new items appear in the new library: 7. From the Launch menu in the upper left of the Portal page , select Web Content

Management Authoring Portlet -> Configure on the top right, as shown in Figure 6:

7

Figure 6. Web Content Authoring Portlet

If a Java Runtime Environment (JRE) check causes a security warning, select Always trust… -> Run.

8. Select the MyShowcase library and click Add to add it to the right box, as in Figure 7:

Figure 7. Authoring Portlet configuration

9. Select the other libraries and click Remove. 10. Click OK to save your configuration and begin adding to your new library.

8

Create a workflow A workflow is comprised of multiple stages. Each stage can have multiple actions invoked. To build the Workflow, start by creating the actions, then create the stages, and then assemble the stages in a sequence into a Workflow. The SC Workflow Standard has a SC Stage Draft that requires approval from the Approvers group to move to the SC Stage Publish. The SC Stage Publish will publish the content, set the content access to the group [all users] (anonymous access), and will designate that the content to move to the Expire stage based on the Expiry date. In the Web Content Management Authoring portlet, you will first create the needed actions: Expire, Publish, Scheduled move action. 1. From the Web Content Page select Launch->Web Content->Web Content Management. 2. Create a new workflow action for Expire. Select New->Workflow Actions->Expire Action

and fill in the following fields: • Name: Expire • Display title: Expire • Description: Expire • Authors: wpsadmin • Owners: wpsadmin Figure 8 shows the correctly filled form:

Figure 8. Expire action specifications

9

3. Click Save, then Close, then repeat the previous step to create a Publish action. Figure 9 shows the correctly filled form:

Figure 9. Publish action specifications

4. To create the Scheduled move action, set the Expiry Date to the date on which the move will

happen.. When you set the Expiry Date, the action does not use the Selected Date, found below Action in Figure 10. Instead, the action uses the Expiry Date specified in the content.

10

Figure 10. Expiry action specification

Now that you have created the actions, create three Workflow stages for SC Stage Draft, SC Stage Publish and SC Stage Expire.

Naming Standards Best Practice Meaningful names will help identify the part type and usage. In this case, the SC prefix stands for Showcase, the Stage is the component type, and the remainder is a short description.

5. Create a new workflow stage for Draft. 6. Set the Workflow Security to allow the Approvers group to approve and read the content.

Also, allow the wcmscadmin group to read the content in Draft Stage. Figure 11 shows the completed stage:

11

Figure 11. Draft Action specification

7. Create a new workflow stage for Publish, with the Publish and Scheduled move actions and

security set to all users. Figure 12 shows the completed stage:

Figure 12. Publish Action Specification

8. Select the [all users] group for the Workflow Security Read setting.

12

9. Create a new workflow stage for Expire, as in Figure 13: Figure 13. Expire action specification

10. Now create the workflow that sequences the stages.

a. Select New->Workflow. Fill in the Identification section, as shown in Figure 14.

13

Figure 14. Workflow Specification

b. Click Select Workflow Stages and select the three stages you just created. c. Order the stages by selecting a stage you want to reposition and use the arrow buttons on

the right to move the stage. Sequence the stages in the following order: SC Stage Draft, SC Stage Publish and then SC Stage Expire. Figure 15 shows this order:

Figure 15. Workflow stage order

d. Set the System defined security to allow Administrators, Content Creators and Approvers

Read access to this workflow. See the Best Practices Guide for a sample security model. Figure 16 shows the selected groups:

14

Figure 16. Workflow access group selection

e. Save and close your new Workflow. You have finished the preliminary set up and can now create your news Web site and content.

Create the site structure The site structure you will be creating for the News is a simple initial hierarchy for the Showcase company Web site. You can add more branches, but for this article, you will only use the News site area. 1. From the Web Content Page select Launch->Web Content->Web Content Management. From the Authoring UI, create the following site structure to contain the Showcase internal Web site news content in the MyShowcase library: 2. From the Web Content Management page, select New -> Site. 3. Type Showcase Internal Site for the Name, Display Title and Description fields in

Figure 17. Then, click Save, then Close your site.

Caution! Use the exact same names as described in the exercise as you will later copy in some prewritten HTML. The code is referring to the names described throughout the article. The naming standard best practice will Prefix the

15

name with SC for “Showcase” then a type descriptor such as AT for “Authoring Template” followed by a descriptive name.

Figure 17. New Site specifications

4. Create a site area, called News, that will be under the new site. Select New -> Site Area,

select the Showcase Internal Site radio button, and click OK. The default for the location in the Web site is first child. Because this site area is the only site area, this setting is fine. If you add more site areas, you can choose something else.

5. Fill in the Identification section, as shown in Figure 18, then click Save, then Close. You

will set the default content and Authoring Template to Presentation mappings in a later step.content and these components

16

Figure 18. News Site Area specifications

6. Feel free to add Site Areas for Announcements, Events, FAQ Notices and Search selecting

First or Last Child as the placement. 7. Select the Site Areas by Site view to verify the site structure. Figure 19 shows this view.

Figure 19. Resulting Site Structure

17

Create authoring templates Web Content Management V 6.0 includes many enhancements to the authoring templates. This article guides you through the commonly used new authoring features. To learn more about these enhancements, visit the Portal Information Center for more information. Authoring templates are design components that identify content attributes, their types and edits. This article uses two types of content: one for the home page and one for news. Each type will need an authoring template. First, create the home page authoring template as indicated below.

Create the home page authoring template The home page authoring template is used to store the initial display for the news site. It will contain a rich text field and a reference to another element in the repository such as a list of news items.

1. Select New -> Authoring Template. 2. Fill out the fields, as shown in Figure 20,. Use the exact names as these are referenced

later in the helper files. Figure 20. Home Page Authoring Template Settings

3. For this template, use the default content form properties. To add specific attributes to this template, click Default Content Settings.

4. Select Manage Elements to fill out the Content section.

18

Figure 21. Navigate to Manage Elements

5. Add the fields for SC Body and SC Content List. To do this, select the type and enter the name and the display name as indicated in the steps to follow. The SC Body element contains the text that displays on the news home page and the SC Content List refers to the list of content that displays on the home page. You will create a list or menu component later. Using this reference to a list enables the flexibility to alter the component that displays on the home page to be any Web Content Management component. This also allows the home page template to apply to many parts of your site where you want to display an initial list and then a detail.

6. Select Rich Text from the Element type drop down. Enter SC Body into the Name and Display title fields.

Figure 22 Add Rich Text element

7. Click Add. . 8. Chose the Element type drop down. . Enter SC Content List into the Name and

Display title fields. 9. Click Add. 10. Verify both elements have been added and are the correct element type. Figure 23 shows

both elements.

19

Figure 23. Home Page Elements

11. Click OK and then click Default Content Settings. This will display the new elements in the template with a preview of the entry fields, as in Figure 24:

Figure 24 Tab to the Default Content Settings

20

Figure 25 Default Content Specification

12. The following steps describe how to set the workflow for this template to the SC Workflow

Standard. After you set the workflow, you can hide the workflow section so that the content creator will not see this section. a. Expand the Workflow section and click Select Workflow, as in Figure 26:

Figure 26 Workflow properties

b. Select SC Workflow Standard, then click OK, as in Figure 27:

21

Figure 27. Select default workflow

c. Select Hide Section, as in Figure 28:

Figure 28. Hide the preselected workflow

d. Click Save, then close the authoring template.

You have now created an Authoring Template to enter Home Page content. The template contains a placeholder for text and an option to reference another component. This reference will be used to add a menu that will list other pieces of content. You will use this template to add content later. Next create the SC AT News Authoring Template. In this template you will include property settings for each element.

Create the News Authoring Template The news authoring template stores the news detail for the site. Authors use this template to add and maintain news articles. The template contains these elements:

• Title • Summary • Rich text field • Confidentiality level

22

• Image • Reference to a document stored in Portal Document Manager (hereafter referred to as

Document Manager). 1. Select New -> Authoring Template. Enter the identification info, as shown in Figure 29:

Figure 29. News Authoring Template Settings

2. Under the Content Form Properties, enter the following information, as in Figure 30:

• Content form layout: Labeled Sections. • Site area selection options: Selected site areas only • Choose saving option for content author: No option

23

Figure 30. News Authoring Template Site Area specifications

3. Click Add to add a site area to the list. 4. Select the News site area and click OK. 5. Before continuing, save the template. Periodically saving complex components prevents you

from loosing any of your work.

6. Select Default Content Settings. 7. Before you add new elements to the template, you should set the properties for the standard

content attributes. Expand the Identification section.

8. Each element has properties settings that you access by clicking the icon to the right of the element name, as in Figure 31. Click the Name properties.

Figure 31. Attribute Properties icon

9. To change the appearance of the field, set the width, min- and max chars, and enter the Help text shown in Figure 32:

24

Figure 32. Name Element Properties

10. The Apply button will display the field with the properties applied and the Done button will

close the Properties section. Each will save the settings. Select Apply, then Done. 11. Set the properties for the Display title as shown.

Figure 33 Display Title properties

12. Open the properties for the Description, Authors and Owners in Identification Section and

select Hide for each. This will remove these attributes from the Author’s view.

25

Figure 34 Description element properties

13. We want to keep the contribution for the company news as simple as possible. Therefore,

also hide the Profile and Content Properties sections, located below the Identification section. Figure 35 Profile and content properties

14. Save your template before you continue.

15. Next some additional News attributes will be added. Click on Manage Elements

Figure 36 Navigate to Manage Elements

16. Add the elements shown here matching the names and types. Click OK when you are done.

26

Figure 37 New Elements added to the Authoring Template

17. Next select the Element Properties icon of the additional template field elements. For the SC

Summary change the properties of the field to change its appearance and. Don’t forget to click to identify this as a required field as shown below.(The change will not take effect until you select Apply).

27

Figure 38 SC Summary Element Properties

18. Click Apply, then click Done. 19. Set the properties for the display title, as shown in Figure 39:

Figure 39. Display Title properties

20. Open the properties for the Description, Authors, and Owners in identification section and

select Hide for each, as in Figure 40. Hide removes these attributes from the author’s view.

Figure 40. Description element properties

28

21. The contribution for the company news should be as simple as possible. Therefore, also hide the Profile and Content Properties sections, located below the Identification section, as in Figure 41:

Figure 41. Profile and content properties

22. Save your template before you continue.

23. Next, you will add some additional news attributes. Click Manage Elements, as in Figure

42:

Figure 42. Navigate to Manage Elements

24. Add the elements shown in Figure 43. Click OK when you are done adding all of them.

29

Figure 43. New Elements added to the Authoring Template

25. Next, click the element properties icon for each of the additional template field elements. 26. For the SC Summary, change the properties of the field to control its appearance and

validation. Select Identify this as a required field, as shown in Figure 44. The field width and height, in Figure 44, will limit the display for the entry of this field to the dimensions specified and the minimum and maximum specifications will enforce a valid number of characters for this field. Also select Identify this as a required field, as shown in Figure 44. The change will not take effect until you click Apply.

30

Figure 44. SC Summary Element Properties

27. Set the height of SC Body to 150. 28. For SC Confidential, open its properties and enter the settings shown in Figure 45:

31

Figure 45. SC Confidential Element Properties

29. For next element, the SC Image:

a. Hide the attributes for: • Border dimensions • Alternate Text • Html Tag Name

b. Leave the File Selection and the dimensions visible. c. Set the Image dimensions to 200 by 200 and hide this setting.

30. Save your template before you continue. 31. Expand the Workflow section. Select the SC Workflow Standard. 32. Select Hide section, as shown in Figure 46. This will effectively pre-select the workflow, so

the author neither selects nor sees the workflow section.

32

Figure 46. Selecting the default Workflow properties

33. Hide the Access and History sections, as in Figure 47:

Figure 47. Hiding the Access section

34. Save the template.

33

Preview the authoring templates Previewing a template enables you to test how your template looks. While previewing, you can perform edits under different user profiles, but no content will be saved; the input content is just for verification of the required fields and any edits you have set. 1. From the Authoring Template. click Preview to test your template. 2. Enter some data and click Validate, as shown in Figure 48. The Validate function checks

your property settings for each field (for example, required fields like SC Summary must be filled out, as in Figure 48). You can also select a different user if security has been set on a template element.

Figure 48. Validate the Authoring Template properties

3. Click Done to finish testing the template. 4. Click Save, then Close to exit. The authoring templates are now complete and ready to use.

Create presentation templates Presentation templates format content. To save time, download the sample HTML files and copy them into the presentation templates. Place these HTML files in your <LAB_FILES> directory, as described in the beginning of this article.

Be sure you have used the exact names for your elements as specified in this article. This includes spaces and capitalization

34

The Home Page Presentation Use the steps in this section to create the SC PT HomePage presentation template in the MyShowcase library. Ignore the default html text in the presentation template section for now, because you will import new HTML text in the next step. 1. Select New -> Presentation Template and complete the Name, Display Title and

Description properties, as shown in Figure 49: Figure 49. Home Page Presentation Template specifications

2. In the Presentation Template section, import the file PTHomePage.txt

Listing 1 shows HTML that displays content created with the authoring template, SC AT HomePage: Listing 1. Contents of PTHomePage.txt <div class="wcmContent"> <h3><IDCmpnt context="current" type="content" field="title" h3> /></<strong><Element context="current" type="content" key="SC Body"/></strong> <br/><br/> <p> <Element context="current" type="content" key="SC Content List"/> </p> </div> The HTML in Listing 1 refers to the elements in the SC AT HomePage authoring template. You refer to the elements by name, using the <Element context…..> tag. Refer to the Portal Information Center for a complete list of tags and their syntax,. The presentation template displays the following fields:

• Title • SC Body • The component referenced in SC Content List.

When you create the content, you enter text in the title and body, and then select a menu component for the content list field. The presentation template formats your content. The menu component has additional formatting, which you will create later in this article. 3. Click Save, then Close.

35

The News Detail Presentation Next, create the SC PT News presentation template in the library. 1. Select New -> Presentation Template and fill in the form, as shown in Figure 50:

Figure 50. News Detail Presentation Template specifications

2. Next, import PTNewsDetail.txt for the template area. The tags with references to elements

and other library components such as SC Tools In Line Edit are included in this file; you create these components later.

Listing 2. Contents of PTNewsDetail.txt <table> <tr> <td valign="top"> <Component name="MyShowcase/SC Link News Home"/> </td> <td valign="top"> <Component name="MyShowcase/SC Tools In Line Edit"/><br> </td> <td> </tr> </table> <table> <tr><td> <Element context="current" type="content" key="SC Image"/> </td><td> <h3><IDCmpnt context="current" type="content" field="title"/></h3> <p><strong><Element context="current" type="content" key="SC Summary"/></strong><p> </td></tr> </table> <br/> <p> <strong>Confidential level: </strong> <Element context="current" type="content" key="SC Confidential"/> <p> <Element context="current" type="content" key="SC Body"/> <br> <a href="<DocumentManagerElement context="current" type="content" key="SC Attachment" convertTo="text/html" scope="DocumentURL"/> " target="_blank"> <DocumentManagerElement context="current" type="content" key="SC Attachment" attributeName="title" scope="Attribute"/></a>

36

3. Click Save, then Close.

Create a menu component The menu component is one of several ways to query and present a list of content items. You can also create a personalization component and a navigator component. In the MyShowcase library, use the steps below to create a menu to display a list of news items. 1. Select New -> Component -> Menu. 2. Complete the Identification section, as shown in Figure 51, for the SC Menu News

component.

Figure 51. SC Menu News Specification

3. Under Menu Element Query, select Authoring Templates and Site Areas. 4. Under Authoring Templates, click Select Authoring Template and select SC AT News 5. Under Site Areas, click Select Site Areas and select the news site area, as shown in Figure

52. Figure 52. Site Area selection

6. Under Menu design properties, set the following selections, as in Figure 53:

• Specify results display order: Descending • Sort results first by: Publish Date • Then by (left): Title

37

• Then by (right): Description • Results per page: 10 • Start page: 1 • Maximum pages to include: 10 • Pages to read ahead: 5

Figure 53. Menu Design properties

7. Under Header, enter <table> 8. For “Design for each menu search result,” import the MenuNews.txt, as shown in Listing 3.

In the HTML, you can see references to the file attachment (which is a resizable image), the title, the summary, and the publish date. Listing 3. Contents of MenuNews.txt <tr> <td> <span style="float: left; padding: 0 3 3 0;"> <img src="<Element context="autoFill" type="content" key="SC Image" format="url"/>" width="100" height="100" /> </span> <strong><A style="color: #BA3914;" HREF="<Placeholder tag="href"/>"><IDCmpnt context="autoFill" type="content" field="title"/></A></strong> <br> <b>Profile: </b><ProfileCmpnt context="autoFill" type="content" field="categories" include="exact" separator=","/> <br> <Element context="autoFill" type="content" key="SC Summary"/> <br> <span style="color: #227203; "> [Published: <WorkflowCmpnt context="autoFill" type="content" field="publishdate" format="MMMM dd, yyyy"/>] </span> </div> </td> </tr>

38

9. Under Footer, enter </table> 10. Click Save, then Close.

Create the default content Now you can create the default content for company news home page using the SC AT HomePage template. 1. Select New -> Content. 2. Select SC AT HomePage template -> OK. 3. Create the default home page content, as shown in Figure 54:

Figure 54. Home Page content creation

39

4. Under SC Content List, add the reference to the menu created earlier. This menu shows a list of News items on our default page. To do this, click Select Component and select SC Menu News.

5. Navigate to MenuNews Component and select SC Menu News, as shown in Figure 55:

Figure 55. Menu Selection for reference element

6. Click OK. 7. Click Save to save this HomePage content as draft. 8. Under the Showcase Internal Site, select the site area News as the location for this content, as

shown in Figure 56:

40

Figure 56. Site Area selection for Home Page Content

9. You must publish content before it is visible to the end user. After you publish the content,

the status changes from Draft (Yellow) to Published (Green) . The Workflow view allows you to view content in any stage. To move this draft content to the next stage, you need to approve it. Select Save. . . -> Save and Approve, as in Figure 57, to move the content to the next stage, SC Publish, of the workflow.

Figure 57. Save and Approve content

10. Click Close.

41

Create a link component A link component is new to Web Content Management v6.0V6. The link component stores a link to another piece of content, files, images, and/or an external URL. For example, you can store a link to your "home" content item in a link component. You then add a reference to the link component in any presentation template that your site uses to enable users to return to the "home" content item. If you want to change your "home" content, you only need to change the selected item in the link. Link management also enables you to find all of the places that use the link, enabling you to remove or replace the link. You can create a link component to help users navigate from a news detail item back to the list of news items on the home page. The HTML for the presentation template, SC PT NewsDetail, already refers to the link component. This link sends the user back to the news home page. To create the link component, SC Link News Home:

1. Select New -> Component -> Link 2. Complete the Identification fields, as shown in Figure 58:

Figure 58. Link component specification

3. Under Link, select Content, files or images, and select the Select Content, files or images

button, as shown in Figure 59: Figure 59. Specify Link Type

4. Navigate the site structure and select the News site area. 5. Complete the link specifications, as shown in Figure 60:

42

Figure 60. Completed Link component settings

6. Click Save, close then Close. 7. Create the component.

Create in-line edit authoring tool The authoring tools component is a reusable component that describes the look, feel and actions of in-line edit links that invoke authoring functions. Depending on the link, the authoring UI appears either in a new window, or in the same portlet. The authoring tool has actions such as new, approve, reject and/or edit, which a link invokes. In this exercise, use a button as the image link. To make the images reusable, you can create image components that the authoring tool references. 1. From the Web Content Management page, select New -> Component -> Image. 2. Name the component SC Image Add Button. In the Image element section, click

Browse, navigate to the <LAB_FILES> directory, and select addButton.gif. Optionally, enter the width, height, and alternate text, as shown in Figure 61. These parameters override the default width and height. After you select Save . . . -> Save and Read, the image will display.

43

Figure 61. Add button image specifications

3. Repeat these steps to create the SC Image Edit Button and SC Image Approve Button.

You use the images to construct the links in the authoring tools component: 4. From the Web Content Management page, select New -> Component ->Authoring Tools. 5. Enter the Name, Display title and Description fields, as shown in Figure 62:

44

Figure 62. SC Tools In Line Edit specifications

6. Copy the HTML under the New action Design in the <LAB_FILES>ToolsInLineEdit.txt file

to the New Action Design.

<a href ="<Placeholder tag="href" start="" end=""/>" > <Component name="MyShowcase/SC Image Add Button"/></a>

7. Under Site Area in New action properties, select User selected, as shown in Figure 63:

Figure 63. New action properties

8. Separately copy the HTML under the Edit and Approve action Design in the <LAB_FILES>ToolsInLineEdit.txt file into the corresponding Design for the Edit and the Approve sections of the Authoring Tools component.

Edit: <a href ="<Placeholder tag="href" start="" end=""/>" > <Component name="MyShowcase/SC Image Edit Button"/></a>

Approve: <a href ="<Placeholder tag="href" start="" end=""/>" > <Component name="MyShowcase/SC Image Approve Button"/></a>

9. Select Save . . . -> Save and Read. After you save, the references to the image buttons get

converted with the component ID specified. This indicates that Web Content Management has located the component in the repository. The component ID will allow names of components to be changeable and references to be managed.

45

Figure 64. Component ID imbeded in Web Content Mangement tag

The SC PT NewsDetail presentation template already has a reference to the SC Tools In Line Edit component, so now the buttons are available in the news detail once we create some news content to display.

Connecting the parts You have created all of the parts for the new site. To connect the parts default content and template mappings selections are set in the site framework. A site framework identifies the context for the presentation of the content. For example, you might have the same content type (news) on your department site as on your company site, but you might want to use different presentation templates to change which attributes the site renders, and how the site renders the attributes. Creating separate company and department site areas enables you to easily change the mapping of presentation template to the authoring template by site area. To do this: 1. Navigate to the Showcase Internal Site, select the News site area and edit the object. 2. Click Select Default Content. 3. Navigate to the default home page content you created earlier (under the news site area) and

select it, then click OK. 4. Click Edit Template Mapping. 5. Select the authoring template, SC AT HomePage, and the presentation template, SC PT

HomePage, and click OK. 6. Click Add to map SC AT News to SC PT NewsDetail, and then click OK. 7. The Site Area properties should now match Figure 65:

Figure 65. Completed Site Area mappings

46

8. Save and close.

Adding a document Before we create a new news item we will include our referenced documents in to the Portal Document Manager library. We will do this using the Desktop Integration feature of Portal document Manager. Then reference the document in the news content using the SC AT News template. 1. Navigate back to the Documents Portlet tab.

Figure 66 Launch Menu

2. Select the Tools -> Install Desktop Components.

Figure 67 Document Manager portlet

3. Follow the prompts to install this feature. 4. To configure your desktop integration, open a Windows Explorer window and select

Network Places.

47

Figure 68 Desktop Integration using Network Places

5. Right mouse on the localhost and select properties.

Figure 69 Connection Properties

6. Fill in your user ID and password and Save..

48

Figure 70 Settings for Desktop Integration

7. Now your Poral Document Library is available on your desktop. 8. Right mouse in the Document Library and add a new folder named End2End.

Figure 71 Create new Portal Document Folder

9. Open the <LAB-Files> folder and drag the PDF file to the new folder. 10. Right mouse on the document in the new folder and select properties. 11. Set the title and description as shown and select OK.

49

Figure 72 Add document to folder

This document is now available in Portal.

Configure the Content Preview Portlet The next step is to configure the portlet so that it will show our News content. The Web Content Viewer portlet is provided with the Web Content Management product. It may be configured to point to any content in the repository and has additional setting to manage the display and behavior of the portlet. 1. Navigate to Content Preview page (or create a new SC Home page)Content Preview. 2. If not present add an instance of the Web Content Viewer portlet to this page using the Page

Menu. Figure 73 Content Preview

3. To configure the Portlet Shared settings click the portlet menu at the far top right of the

screen, and select Edit Shared Settings

50

Figure 74 Portlet menu

4. Configure the portlet as shown by selecting Content Item and then the Edit button. Be sure

you have selected the MyShowcase library and navigate to select the News site area. Figure 75 Context Selection

5. Then select the remaining options as shown and click OK.

51

Figure 76 Web Content Viewer Portlet Settings

6. Now your default content is visible in the portlet, as shown in Figure 77:

Figure 77. Portlet Display with Home Page content

Adding content Now add your own content using the SC AT News template. 1. Navigate back to the Web Content Management tab and create a new news item using the SC

AT News authoring template. Select New -> Content. 2. Select SC AT News. Click OK.

52

3. Create the first news item and fill in the fields, as shown in Figure 78 below. Copy the text from the <LAB_FILES>News1.txt. You can also select any image from the <LAB_FILES> for the SC Image.

Figure 78. Complete the values for the News item

7. Select Search for the SC Attachment and select your document from Portal Document

Manager Library. The selection window may be behind your Portal window.

53

Figure 79 Document selection

8. The reference information will be displayed as shown in Figure 80.

Figure 80 Document Reference

54

9. Select Save . . . -> Save and Approve. This will move the item to the Publish stage

of the workflow. Otherwise, you will not be able to view the content. 10. Click Close. 11. Navigate back to the SC Home or Content Preview page to see your content.

Figure 81. News Home Page Portlet

Using the in-line edit function, create the second news item. 12. Select the link to the first news item on your news home page to show the full article.

Figure 82 Detail News Article display

13. Click Add, and complete the second News item using the <LAB_FILES>News2.txt, as in

Figure 83:

55

Figure 83. Completed Second News

14. Select Save . . . -> Save and Approve. 15. Click Close to return to see your new content, as shown in Figure 84:

Figure 84. News Home with list of Articles

16. Ensure that your content appears as expected. Also ensure that you can navigate from the list

to the detail and return using the news home link. 17. Use the in-line edit button to change the title of one of the items. 18. Add more items of your own, and explore the UI.

56

Conclusion In this article, you created a simple site structure and all the basic components that are used to:

• create and edit content (authoring template) • present content from the repository (presentation template) • dynamically select related content (menu component) • link to other pieces of content. This is used to ease the link management task for the

site administrators (link component) • allow for easy in-line editing of your content.

Finally, you connected the parts and set up the view of the content. Now, it is easy for business users to add new content by using the authoring templates. The workflow helps you publish the content according to the policies of the workflow.

Resources • An overview of developing Web content • Best practices for using IBM Workplace Web Content Management V6

About the author

Theresa Smit is a member of the IBM America’s TechWorks team in Reseach Triangle Park, NC. She has been with IBM for over 25 years and has specialized in enabling customers and IBMers on the usage of softwar products such as Web Content Management, Portal, VisualAge Generator, CSP, DB2 and CICS...You can reach Theresa at tsmit@us.ibm.com.

Trademarks • DB2, IBM, Lotus, Tivoli, Rational, and WebSphere are trademarks or registered trademarks

of IBM Corporation in the United States, other countries, or both. • Windows and Windows NT are registered trademarks of Microsoft Corporation in the United

States, other countries, or both. • Java and all Java-based trademarks and logos are trademarks or registered trademarks of Sun

Microsystems, Inc. in the United States, other countries, or both. • Other company, product, and service names may be trademarks or service marks of others. IBM copyright and trademark information: http://www.ibm.com/legal/copytrade.phtml

57