IBM Training: Front Cover

V10.
cover
IBM Training Front cover

Instructor Exercises
Developing Websites Using IBM Web Content Manager 8.5

Course code WPL47 ERC 1.0
Student Exercises
Trademarks
IBM, the IBM logo, and ibm.com are trademarks or registered trademarks of International Business
Machines Corp., registered in many jurisdictions worldwide.
The following are trademarks of International Business Machines Corporation, registered in many
jurisdictions worldwide:
DB2® HACMP™ System i™
System p™ System x™ System z™
Windows is a trademark of Microsoft Corporation in the United States, other countries, or both.
Linux is a trademark of Linus Torvalds in the United States, other countries, or both.
Other product and service names might be trademarks of IBM or other companies.
September 2015 edition

The information contained in this document has not been submitted to any formal IBM test and is distributed on an “as is” basis without
any warranty either express or implied. The use of this information or the implementation of any of these techniques is a customer
responsibility and depends on the customer’s ability to evaluate and integrate them into the customer’s operational environment. While
each item may have been reviewed by IBM for accuracy in a specific situation, there is no guarantee that the same or similar results will
result elsewhere. Customers attempting to adapt these techniques to their own environments do so at their own risk.
© Copyright International Business Machines Corporation 2015.

This document may not be reproduced in whole or in part without the prior written permission of IBM.
US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
V10.1
Student Exercises
TOC Contents
Trademarks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . v
Exercises description . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . vii
Exercise 1. Overview of IBM Web Content Manager . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1-1

Section 1. Introduction and administrative tasks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1-2
Section 2. IBM Web Content Manager site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1-20
Exercise 2. Creating templates, components, and items . . . . . . . . . . . . . . . . . . . . . . . . . . . 2-1

Section 1. Creating a site area . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2-2
Section 2. Creating an authoring template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2-4
Section 3. Creating a content item . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2-8
Section 4. Creating a presentation template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2-12
Section 5. Creating a template map and assigning default content . . . . . . . . . . . . . . . . . . . . . 2-14
Section 6. Creating an image component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2-20
Section 7. Updating the presentation template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2-23
Section 8. Creating further site areas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2-28
Section 9. Adding more content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2-35
Section 10. Creating a menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2-41
Exercise 3. Pages, portlets, and page templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3-1

Section 1. Create a page template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3-2
Section 2. Creating pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3-17
Section 3. Updating the presentation template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3-29
Exercise 4. Adding navigational components and search queries to a website . . . . . . . . . 4-1

Section 1. Creating a navigator component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4-2
Section 2. Creating a breadcrumb navigator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4-7
Section 3. Creating a page navigation component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4-11
Section 4. Creating a search content source . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4-15
Section 5. Creating a search form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4-21
Exercise 5. Item management . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5-1

Section 1. Working with folders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5-2
Section 2. Working with versions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5-6
Exercise 6. Personalization and categories . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6-1

Section 1. Creating a user name component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6-3
Section 2. Assigning access to a page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6-5
Section 3. Testing the user name component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6-7
Section 4. Creating an events section and events list . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6-9
Section 5. Configure edit access for a group . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6-15
Section 6. Creating a personalization component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6-18
Section 7. Creating a taxonomy and categories . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6-28
Section 8. Creating a content template that includes an option selection element . . . . . . . . . . 6-30
Section 9. Assigning a content template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6-33
Section 10. Creating a list presentation component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6-34
© Copyright IBM Corp. 2015 Contents iii

Course materials may not be reproduced in whole or in part
without the prior written permission of IBM.
Student Exercises
Section 11. Creating a menu component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .6-36
Exercise 7. Custom authoring features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7-1

Section 1. Create an authoring tool component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7-2
Section 2. Create an authoring environment for site managers . . . . . . . . . . . . . . . . . . . . . . . . .7-7
Section 3. Creating an authoring environment for writers . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7-17
Section 4. Testing access . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7-20
Section 5. Setting default authoring templates for writers . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7-22
Section 6. Updating the authoring templates for writers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7-25
Exercise 8. Working with drafts, workflows, and projects . . . . . . . . . . . . . . . . . . . . . . . . . .8-1

Section 1. Creating a draft and publishing it . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .8-2
Section 2. Creating workflow actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .8-7
Section 3. Creating workflow stages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .8-9
Section 4. Creating a workflow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .8-14
Section 5. Updating the News template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .8-16
Section 6. Processing a content item through a workflow . . . . . . . . . . . . . . . . . . . . . . . . . . . . .8-18
Section 7. Creating a project template and a project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .8-25
Section 8. Working with a project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .8-29
Section 9. Approving a project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .8-36
Section 10. Creating a second project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .8-38
Section 11. Creating content by using a project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .8-39
Section 12. Creating a navigator component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .8-42
Exercise 9. User access and security . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9-1

Section 1. Adding confidential core items . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9-3
Section 2. Adding a confidential page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9-16
Section 3. Testing security . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9-25
Exercise 10. Adding CSS to your website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10-1

Section 1. Create a CSS site area . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10-2
Section 2. Creating a CSS authoring template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10-4
Section 3. Create a CSS presentation template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10-7
Section 4. Create a CSS content item . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10-9
Section 5. Reference CSS content items . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10-10
Exercise 11. Working with the Content Template Catalog and Site Builder . . . . . . . . . . .11-1
Section 1. Getting started with CTC and Site Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11-3
Section 2. Create a website by using the Internet Site Template wizard . . . . . . . . . . . . . . . . .11-18
Section 3. Customizing the site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11-28
Exercise 12. Working with the IBM Mobile Preview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12-1

Section 1. Using the IBM Mobile Preview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12-2
Exercise 13. Using the IBM Script Portlet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .13-1

Section 1. Install and deploy the Script Portlet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .13-2
Section 2. Create a script portlet application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .13-5
Section 3. Place the Company Site Maps application on a new page . . . . . . . . . . . . . . . . . . .13-16
Section 4. Import an application into the Script Portlet Editor . . . . . . . . . . . . . . . . . . . . . . . . .13-19
Section 5. Install and use the sp command-line tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .13-27
iv Developing Websites Using IBM Web Content Manager 8.5 © Copyright IBM Corp. 2015
V10.1
Student Exercises
TMK
Trademarks
The reader should recognize that the following terms, which appear in the content of this training
document, are official trademarks of IBM or other companies:
IBM, the IBM logo, and ibm.com are trademarks or registered trademarks of International Business
Machines Corp., registered in many jurisdictions worldwide.
The following are trademarks of International Business Machines Corporation, registered in many
jurisdictions worldwide:
DB2® HACMP™ System i™
System p™ System x™ System z™
Windows is a trademark of Microsoft Corporation in the United States, other countries, or both.
Linux is a trademark of Linus Torvalds in the United States, other countries, or both.
Other product and service names might be trademarks of IBM or other companies.
© Copyright IBM Corp. 2015 Trademarks v

Student Exercises
vi Developing Websites Using IBM Web Content Manager 8.5 © Copyright IBM Corp. 2015
V10.1
Student Exercises
pref
Exercises description
This course includes the following exercises:
• Overview of IBM Web Content Manager
• Creating templates, components, and items
• Pages, portlets, and page templates
• Adding navigational components and search queries to a website
• Item management
• Personalization and categories
• Custom authoring features
• Working with drafts, workflows, and projects
• User access and security
• Adding CSS to your website
• Working with Content Template Catalog (CTC) and Site Builder
• Working with the IBM Mobile Preview
• Using the IBM Script Portlet
In the exercise instructions, you can check off the line before each step as
you complete it to track your progress.
Most exercises include required sections which should always be completed.
It might be necessary to complete these sections before you can start later
exercises. Some exercises might also include optional sections that you
might want to complete if you have sufficient time and want an extra
challenge.
© Copyright IBM Corp. 2015 Exercises description vii

Student Exercises
viii Developing Websites Using IBM Web Content Manager 8.5 © Copyright IBM Corp. 2015
V10.1
Student Exercises
EXempty
Exercise 1. Overview of IBM Web Content
Manager
Estimated time
00:40
What this exercise is about

In this introductory exercise, you access IBM Web Content Manager. You
create some basic elements that are used throughout the exercises. Next,
you are introduced to the use of the authoring portlet.
What you should be able to do

At the end of this exercise, you should be able to:
• Start, stop, and query the status of the WebSphere Portal server
• Access Web Content Manager with accounts that have different roles
• Go to different websites managed with Web Content Manager
• Create a content library and define roles and permissions to access that
library
• Access the authoring portlet and modify the display of library contents
Introduction
This exercise introduces you to Web Content Manager. You learn how to
access Web Content Manager and switch between different websites. You
create a content library that you use in later exercises. You explore roles
within the Web Content Manager as you assign access to the library.
Requirements
You need administrative permissions to create a library and specify access to
it.
© Copyright IBM Corp. 2015 Exercise 1. Overview of IBM Web Content Manager 1-1
Student Exercises
Section 1. Introduction and administrative tasks

This exercise is an introductory lab. Students create the library that is used during the course. An
administrator normally does these tasks, not a website designer.
Start, stop, and query the status of the WebSphere Portal server
In this section, you query the status of the WebSphere Portal server by using the command line.
You also learn the commands to start and stop the server.
To check the WebSphere Portal server status now, and at any time during the course, follow this
procedure.
__ 1. Query the status of the WebSphere Portal server.
__ a. Open the command window.
__ b. Go to C:\IBM\WebSphere\wp_profile\bin.
__ c. Type serverStatus.bat -all. When prompted for user name and password use:
wpsadmin/wpsadmin. If WebSphere_Portal is STARTED, then skip step 2.
__ d. If the server is not yet started, use the following procedure to start it.
__ 2. Start the WebSphere Portal server.

__ a. In a command window, verify that you are in the directory:
C:\IBM\WebSphere\wp_profile\bin
__ b. Type startServer.bat WebSphere_Portal
1-2 Developing Websites Using IBM Web Content Manager 8.5 © Copyright IBM Corp. 2015
V10.1
Student Exercises
EXempty __ c. Wait until you see the message that the WebSphere_Portal is open for e-business. You
can close the command window and proceed.
Information
To stop the WebSphere Portal server, use the command: stopServer.bat WebSphere_Portal
For all these commands, the server name is case-sensitive and it is "WebSphere_Portal"
If prompted for credentials, the user ID is wpsadmin and the password is wpsadmin.
Student Exercises
Logging in
__ 1. Open the Mozilla Firefox browser and go to: http://wcm:10039/wps/portal.
Important
Do not be concerned if the website you see looks different than shown in this screen capture. There
are two websites. Later in this exercise you see how to move between them.
V10.1
Student Exercises
EXempty __ 2. Locate and click Log in on the right side of the home page. If you do not see the button,
scroll to the right.
__ 3. Enter user ID wpsadmin and password wpsadmin. Click Log in.
Student Exercises
Changing sites by using the site menu

WebSphere Portal server supports multiple websites simultaneously. In the lab environment, an
example environment and a basic environment are installed. This section explains how to go from
one environment to the other.
__ 1. Go to a different website.
__ a. In the upper left of the portal home page, find the site menu icon that looks like the earth.
__ b. Click the site menu icon to display the names of different websites that you can display.
In the student lab environment, the two sites are: Content Template Catalog
(CTC) Demo and the Home site.
V10.1
Student Exercises
EXempty __ c. Click Site menu > CTC Demo. The CTC Demo is an example website for a fictitious
conference. This website is used in a later exercise.
__ d. Click Site menu > Home. The site shown in the screen capture is used in this exercise.
Use this site for the exercises unless directed otherwise.
Student Exercises
Creating a library
__ 1. Go to Administration (the wrench icon) menu in the upper left and click the icon.
__ 2. Select Administration > Portal Content.
V10.1
Student Exercises
EXempty __ 3. On the portal content page, click Web Content Libraries.
__ 4. Create a library.
__ a. On the Web Content LIbraries page, click Create new Library.
Student Exercises
__ b. On the Create new Library page, type Training as the library name.
V10.1
Student Exercises
EXempty __ c. Still on the Create new Library pane, check Prohibit library from being deleted.
__ d. Click OK.
__ e. Wait for the verification message that the library was created.
Student Exercises
__ f. On the Web Contents Libraries page, type “Training” in the search box and click the
search icon to the right. When the new library is shown, notice the control icons to the
right of the library name.
__ g. Click the Set Permissions icon for the new Training library.
__ 5. Modify permissions for the Contributor role.

__ a. On the Resource Permissions pane, in the left column that is labeled Roles, find the
Contributor row. For the Contributor role, click the Edit Role icon in the right column.
V10.1
Student Exercises
EXempty __ b. On the Resource Permissions pane, click Add.
__ c. Notice the breadcrumb trail identifies your location, which is Resources > Contributor
> Add Role Members. Check All Authenticated Portal Users.
__ d. Click OK.
Student Exercises
__ e. On the Resource Permissions pane, verify that All Authenticated Portal Users are
now listed as members.
__ 6. Modify permissions for the User role. Refer to previous section if you need to see screen
captures.
__ a. In the breadcrumb trail, click the Resources link. Breadcrumb trails help identify your
current location and are also an easy way to move to different places.
__ b. Click the Edit Role icon for the User role.
__ c. Click Add and then select Anonymous Portal User.
__ d. Click OK.
__ 7. Modify permissions for the Editor role.
__ a. Click the Resources link to return to the Resource Permissions page.
__ b. Click the Edit Role icon for the Editor role.
V10.1
Student Exercises
EXempty __ c. Click Add and, on the Resource Permissions pane, click Search.This action expands
the users and user groups displayed.
__ d. Select Designers and then click OK.
__ 8. Exit after you are done setting permissions for different roles.
__ a. Click the Resources link.
__ b. Click Done.
Student Exercises
__ 9. Click the Library Resources icon for the Training Library.
V10.1
Student Exercises
EXempty __ 10. On the Library Resources Training pane, click Set Permissions for the Content resource.
__ 11. On the Resource Permissions pane, click the Edit Role icon for the Editor role.
__ 12. On the Resource Permissions for Editor, click Add.
Student Exercises
__ 13. On the Add Role Members pane, click Search. Notice that more names become visible.
__ 14. Select Writers and Executives and click OK. .
V10.1
Student Exercises
EXempty __ 15. Click the Resources link in the breadcrumb trail and then click Done.
__ 16. On the Library Resources Training, click OK.
Student Exercises
Section 2. IBM Web Content Manager site

This exercise introduces IBM Web Content Manager. The site is built using the authoring portlet.
Configuring the authoring portlet

__ 1. Log out as wpsadmin and log in as the Designer user (password is Designer). You can
verify the current account on the portal console in the upper right.
__ 2. Click Site menu > Home.

__ 3. In the upper left of the home page, click the Applications menu.
__ 4. Click Applications menu > Content.
__ 5. On the Content page, select the Web Content Authoring tab.
V10.1
Student Exercises
EXempty __ 6. In the left column expand Preferences. Select Personalize.
__ 7. On the Edit Shared Settings pane, expand Library Selection and then select Training.
Student Exercises
__ 8. Click Add.
__ 9. Click OK under the label Edit Shared Settings or at the bottom of the pane.
__ 10. The Training Library should now be displayed in the authoring portlet.
__ 11. Log out of the portal.
V10.1
Student Exercises
EXempty Exploring the authoring portlet

__ 1. Log in as Designer with the password Designer.
__ 2. Click Applications menu.
__ 3. Click the Content tab.
__ 4. Click the Web Content Authoring tab.
The IBM Web Content Manager authoring portlet opens and displays the list of libraries that
you configured in the previous step.
You can display the Library Explorer as a list or in a tree view. On the right is the control to
select the Display choice.
__ 5. Select the left icon to display a list.The list is the default choice.
__ 6. Select the right icon to display a tree. Expand the Training library.
__ 7. Explore the views.

End of exercise
Student Exercises
Exercise review and wrap-up

The first part of the exercise are some introductory tasks such as starting and stopping the
WebSphere Portal server, logging in, and going to different website you are managing. These tasks
can be repeated as necessary during the rest of the course. Then, you created a new resource, a
content library, and defined who is able to access it and what they can do. This library is used in
later exercises.
V10.1
Student Exercises
EXempty
Exercise 2. Creating templates, components, and
items
Estimated time
01:15

In this exercise, you learn how to create templates, components, and items
for a website.

• Create a site area
• Create an authoring template
• Create a content item
• Create and update a presentation template
• Create a template map and assign default content
• Create an image component
• Create a menu component
Introduction
Authoring templates are like forms that content authors can use to create
new content. It defines default settings for the items that are created by using
the authoring template. There are two types in authoring templates, site area
and content.
Content items are based on authoring templates. You add elements to
content item to store Web content specific to the content item.
Each content item that you create contains at least one element type. The
elements that are stored in a content item are determined by the authoring
template that is selected when you created the content item.
Requirements
To complete this exercise, you must have:
• Exercises 1 completed
© Copyright IBM Corp. 2015 Exercise 2. Creating templates, components, and items 2-1
Student Exercises
Section 1. Creating a site area

In this section, you create a site area by using the default site area template.
__ 1. Log in to WebSphere Portal.
__ a. Open a Firefox browser and go to the following URL:
http://localhost:10039/wps/portal
__ b. In the upper right, click Log In.
__ c. In the login area, enter Designer as the user ID and Designer as the password. Click
Log in.
Hint
You might already have the Firefox browser opened to WebSphere Portal from an earlier exercise.
__ 2. Create a site area by using the default site area template.

__ a. In the menu in the upper left, click the Application icon.
__ b. Click Content.
__ c. Click the Web Content Authoring tab.
__ d. To open the Training library, click Training.
__ e. Click New > Site Area > Default Site Area Template.
__ f. In the Untitled section, make the following changes:
V10.1
Student Exercises
EXempty - In the Name field, enter: Home

- Verify that the Location is set to Training (Last child)
Information
When the user is already in the training library, there is no need to select the location. If the
Location is not set, click Select Location and set the location to Training.
__ g. Go to the top or bottom of the page and click Save and Close.
__ h. You should see a message that Home was saved under Training. There is also a
Warning that indicates that default content is needed. Click Content.
A site area that is named Home now exist in the Content view. Next, you create an
authoring template. In an upcoming section, you create the content.
Student Exercises
Section 2. Creating an authoring template

You create authoring templates for your content authors to use as they develop new content for the
website. The authoring template is mapped to a presentation template. You can use one
presentation template for multiple authoring templates. This removes presentation considerations
and treatment from the content. The website design is updated by modifying the presentation
template instead of modifying multiple pieces of content.
In this section, you create an authoring template named Landing - Internet.
__ 1. Create the authoring template.
__ a. Click New > Authoring Template > Content Template.
__ b. In the Name field, enter: Landing - Internet
V10.1
Student Exercises
EXempty __ c. Click Manage Elements.
__ d. For the Element type, select HTML.

__ e. In the Name field, enter: Body
__ f. Click Add.
Student Exercises
__ g. After the element is successfully added, you can see it listed under Element type. Click
OK.
__ h. Click the Default Content Properties tab.

__ i. Expand the Workflow section.
__ j. Clear the box next to Enable workflow for items created with this authoring
template.
Information
You configure workflow for items in a later exercise.
__ k. Go to the top or bottom of the page and click Save and Close. You should see a
message that indicates Landing - Internet was saved under Training.
V10.1
Student Exercises
EXempty __ 2. Verify the authoring template, Landing - Internet, exists in the Authoring Templates view.
__ a. In the breadcrumb trail, click Training.
__ b. Click Authoring Templates. An authoring template that is named Landing - Internet

now exists in the view.
Next, you create a content item.
Student Exercises
Section 3. Creating a content item

Content items are based on authoring templates. In this section, you create a content item named
Home.
__ 1. Create a content item.
__ a. Click New > Content > Training / Landing – Internet.
__ b. In the Name field, enter: Home
V10.1
Student Exercises
EXempty __ c. In the Location section, click Select Location.
__ d. In the Select a Site Area pane, select the radio button next to Home as the site area. Do
not click the Home link. In the Placement section, select First child.
Student Exercises
__ e. Click OK.
__ f. Verify that the location is set to Training / Home (First child).
__ g. In the Body field, enter: This is the Home page
Information
You can enter any text into the Body field. You want to have some text that you can examine when
you view the site. The text that you enter does not matter as you just need something in the body
that you can verify in the site.
__ h. Go to the top or bottom of the page and click Save and Close.
__ 2. Verify the content item.
V10.1
Student Exercises
EXempty __ c. You can see the Home site area as it has the hierarchy diagram icon next to the name.
Click Home.
__ d. The content item Home now exists in the Home site area. You can see that it has the
content icon next to the name.
Next, you create a presentation template.
Student Exercises
Section 4. Creating a presentation template

In the previous section, you created a content item. To display the content, you need to create a
presentation template. You use a presentation template to define the layout of your web content.
__ 1. Create a presentation template.
__ a. Click New > Presentation Template.
__ b. In the Name field, enter: Landing - Internet
__ c. In the Presentation Template Options section, click Insert Element Tags.
__ d. Select the authoring template Landing – Internet and click OK.

__ e. You can see the markup that is added to the Presentation Template Options section.
There is a property tag to display the title and an element tag to display the contents of
the body. The type parameter is set to “content”.
V10.1
Student Exercises
EXempty __ f. Edit the type parameter of both tags to change them from “content” to “auto”.
Information
The type content parameter displays the property of the current content item. If a site area is
selected, then nothing is displayed.
The type auto parameter displays the property of the item currently being rendered.
Changing the content type from content to auto is required since
__ g. Go to the top or bottom of the page and click Save and Close.
__ 2. Verify the presentation template.
__ a. If needed, in the breadcrumb trail, click Training.
__ b. Click Presentation Templates. You can see that the presentation template Landing –
Internet is listed.
Student Exercises
Section 5. Creating a template map and assigning default

content
A template map is how content is told which presentation template it should use.
__ 1. Create a template map and assign default content.
__ a. In the Library Explorer navigator on the left, click Personal Views > Recent Items.
__ b. Select the box next to Home site area (the one with the hierarchy diagram) and click
Edit.
V10.1
Student Exercises
EXempty __ c. Go to the Site Area Properties section. In the Child Template Mappings section, you can
see that currently there are no mappings. Click Manage Template Mappings.
__ d. Select Landing - Internet as the authoring template.
Student Exercises
__ e. In the Presentation Templates section, select Landing - Internet. Your selections should
look like the following screen capture:
__ f. Click OK. This step maps the authoring template and presentation template together.
__ g. You are placed on the Manage Template Mappings pane. Here you can see that the
Authoring Template Training / Landing - Internet, is mapped to the Presentation
Template Training / Landing - Internet. Go to the bottom of the page and click OK.
V10.1
Student Exercises
EXempty __ h. In the Site Area Properties section, you can see the updated Child Template Mappings.
You can see that the Authoring Template Training / Landing - Internet, is mapped to the
Presentation Template Training / Landing - Internet.
__ i. In the Site Area Properties section, click Select Default Content next to Default
Content.
__ j. Click Home, which is the Home site area. This step takes you to Training > Home.
__ k. Select the Home content item (which has the content item next to the name).
__ l. Click OK.
__ m. Click Save and Close.
Student Exercises
__ 2. Now that you have created the content, you want to preview the content.
__ a. Select the box next to the Home content item and click Preview.
__ b. The first time that you preview an item, you need to enable pop-up windows for this
website. Click Option > Allow pop-ups for localhost. You might also see to Allow
pop-ups for wcm which is the hostname of the computer.
__ c. Since you encountered the pop-up blocker, you need to repeat the previous step. Select
the box next to the Home content item and click Preview.
Hint
Make sure that you select the Home content item and not the Home site area. Your icons may be
listed different from the list in the screen capture in step 2.
V10.1
Student Exercises
EXempty __ d. Your content previews in another window. You can see the title of the content, which is
Home, and the body of the content.
__ e. Close the Firefox browser pop-up window that shows the preview of the body.
Student Exercises
Section 6. Creating an image component

You use an image element to store an image file that can later be referenced on a web page. To
create an image element, you can either add an image element to an authoring template, site area,
or content item, or create an image component.
In this section, you create an image component named Banner Image.
__ 1. Create an image component.
__ a. In the Library Explorer navigator on the left, click Library Explorer.
__ b. In the breadcrumb trail, click Training.
__ c. Click Components.
__ d. Click New > Component > Image.
__ e. In the Name field, enter: Banner Image
V10.1
Student Exercises
EXempty __ f. Verify that the Location is set to Training.
__ g. In the Image Element section, and click Upload.

__ h. Go to the C:\Labfiles\Lab_Resources\ folder and select Shouting - 940 x
260.jpg. Then, click Open.
Student Exercises
__ i. Verify that the image is uploaded into the Image field in the Image Element section.
Then, click Save and Close.
V10.1
Student Exercises
EXempty Section 7. Updating the presentation template

In this section, you go back to the Landing - Internet presentation template and add in more HTML
markup to provide a more attractive display.
__ 1. Update the presentation template.
__ a. In the Library Explorer navigator on the left, click Personal Views > Recent Items.
__ b. Select the box next to the Landing – Internet presentation template (which has the
brightly colored icon) and click Edit.
__ c. Go to the Presentation Template Options section and replace the body markup. Replace
the current HTML markup in the presentation template with the following code:
<div style="margin:0 auto; width: 960px">
<div style="float: clear; width: 100%; padding-bottom:
20px;text-align: center;">
<hr>
</div>
<div style="float:left; width: 70%"><h1>[Property context="current"
type="auto" field="title"]</h1>
[Element context="current" type="auto" key="Body"]
</div>
<div style="float:right; width: 28%">
</div>
</div>
Student Exercises
Information
As you edit this markup, make sure that the Property and Element tags are not removed from the
markup.
__ d. In the body, place your cursor before the <hr> tag and add a blank line.
__ e. Place your cursor in the blank line and add the banner image. Click Insert Tag.
__ f. In the Select a tag type field, select Component.
__ g. Click Select a library component.
__ h. Click Training.
V10.1
Student Exercises
EXempty __ i. Select Banner Image and click OK.
__ j. In the Insert a Tag window, verify that the Banner Image is referenced and click OK.
Student Exercises
__ k. You can see the markup that is added to the body. Verify that your markup looks like the
following screen capture:
__ l. Go to the top or the bottom of the page. Click the down-arrow to the right of Save and
Close and click Save. Do not click Save and Close. You want to save the changes, but
remain on the page and not close the page.
__ m. Click Preview.
__ n. Select the radio button next to the Home site area. The reason that you only need to
select the Home site area is that in an earlier section you gave the Home site area a
default piece of content. Click OK.
V10.1
Student Exercises
EXempty __ o. A window opens showing the following page:
You can still see the Home title and body content, but now you see the image and a
horizontal line below the image.
__ p. Close the preview browser window.
__ q. Now, click Save and Close.
Student Exercises
Section 8. Creating further site areas

Earlier in the exercise you created the Home site area. In this section, the concept of a site area
template is introduced and you create a set of child site areas to complete the hierarchy.
__ 1. Create further site areas.
__ a. Click New > Authoring Template > Site Area Template.
__ b. In the Name field, enter: Sections
__ c. Click Manage Elements.
__ d. In the Element Manager pane, make the following changes:
- For Element type, select HTML.
- In the Name field, enter: Body
- Click Add.
- Verify that you see the HTML Element type listed and click OK.
__ e. In the Location section, click Select Location.
V10.1
Student Exercises
EXempty __ f. Select the radio button next to Training and click OK.
__ g. Click the Default Site Area tab. Make sure to click the Default Site Area tab and not the
Default Site Area Properties tab.
__ h. Expand the Site Area Properties section.
__ i. In the Rendering Behavior field, select Render the site area directly.
__ j. Click Save and Close.

__ 2. Create a set of child site areas that exist under the Home site area.
__ a. In the Library Explorer navigator on the left, click Library Explorer.
__ b. Click Training > Content > Home. The breadcrumb trail should show Libraries >
Training > Content > Home and the Home content item is displayed.
__ c. Next, create five new child site areas under the Home site area by using the Training /
Sections site area template that you created. First, create the Our Company site area
under the Home site area. Click New > Site Area > Training / Sections.
Student Exercises
__ d. In the Name field, enter: Our Company

__ e. In the Body field, enter: This is the Our Company site area
__ f. Click Save and Close.
__ 3. Create more child site areas.
__ a. Using the Training / Sections site area template, create the four remaining site areas
under the Home site area. Repeat step two creating the following child site areas:
- Create the Name News and Community with the Body This is the News &
Community site area. The display name should use the & symbol instead of
the word and. Then, set the Display title to News & Community.
Note
The Name field cannot accept the & symbol. You must use the word and instead. However, you set
the Display title field to use the & symbol, which is acceptable.
- Create the Name Business Support with the Body This is the Business
Support site area
- Create the Name Employee Services with the Body This is the Employee
Services site area
- Create the Name Search with the Body This is the Search site area
V10.1
Student Exercises
EXempty __ b. When completed, your child site area listing should look like the following screen
capture:
__ 4. Edit the Home site area and add a template map for the Sections authoring template and
the Landing – Internet presentation template.
__ a. In the breadcrumb trail, click Content.
__ b. Select the box next to Home (the site area with the hierarchy icon next to it) and click
Edit.
__ c. In the Site Area Properties section, click Manage Template Mappings.
Student Exercises
__ d. You can see the current list of template maps which includes one map. To add another
map, click Add.
__ e. Select Sections as the authoring template. In the Presentation Templates section,

select Landing - Internet.
__ f. Click OK.
__ g. You can now see the additional mapping for Training / Sections to Training / Landing -
Internet. There are now two mappings. Go to the bottom of the page and click OK.
V10.1
Student Exercises
EXempty __ h. In the Site Area Properties section, verify that you see can the two mappings under the
Child Template Mappings section.
__ i. Click Save and Close.

__ 5. Verify the configuration.
__ a. In the Library Explorer pane, click the Tree view of all entries icon in the Display menu
on the right.
Student Exercises
__ b. From the tree view, you can see an overall hierarchy of the content. In the tree view of all
entries, click Home to expand the Home site area.
__ c. You can see that Home is the parent site area, which has five child site areas and a child
content item.
V10.1
Student Exercises
EXempty Section 9. Adding more content

Now that a site structure and basic design exist, you can start adding more content.
__ 1. Create a content template named Topics.
__ a. Click New > Authoring Template > Content Template.
__ b. In the Name field, enter: Topics
__ c. Click Manage Elements.
Student Exercises
__ d. In the Element Manager pane, make the following changes:

- For Element type, select Rich Text.
- Click Add.
- When you see the Element type Rich Text listed, click OK.
__ e. Next, disable workflow. Click the Default Content Properties tab.

__ f. Expand the Workflow section.
V10.1
Student Exercises
EXempty __ g. Clear the box next to Enable workflow for items created with this authoring
template.
__ h. Click Save and Close.

__ 2. Since you have a new authoring template that is called Topics, you must create a template
map for it in the Home site area.
__ b. Select the box next to the Home site area and click Edit.
__ c. Go to the Site Area Properties section and click Manage Template Mappings.
__ d. Click Add.
__ e. Select Topics as the authoring template. In the Presentation Templates section, select
Landing - Internet.
__ f. Click OK.
__ g. You can now see the additional mapping.
Go to the bottom of the page and click OK.

__ h. For the Child Template Mappings, verify that you see three mappings.
__ 3. Use the Topics authoring template to create multiple content items under each site area
except the Search site area.
__ a. Click Home.
Student Exercises
__ b. You need to create content items for the following site areas:
- Our Company
- News & Community
- Business Support
- Employee Services
__ c. You can create the content from this page or you can go to the site area where you are
going to create the content, the child site area. To create content for the first site area,
click Our Company.
__ d. Click New > Content > Training / Topics.
__ e. In the Element Manager pane, make the following changes:
- In the Name field, enter: Our Company 1
- In the Body, enter: Our Company 1
__ g. Click New > Content > Training / Topics.
__ h. In the Element Manager pane, make the following changes:
- In the Name field, enter: Our Company 2
- In the Body, enter: Our Company 2
V10.1
Student Exercises
EXempty __ j. Repeat the prior steps to create six content items for Our Company. You must create
Our Company 3, Our Company 4, Our Company 5, and Our Company 6.
When completed, your content items should look like the following screen capture:
__ k. Repeat step three creating content for the following child site areas:
- For the News & Community site area, create the content News and Community
1, News and Community 2, News and Community 3, News and
Community 4, News and Community 5, and News and Community 6.
Note
The Name field cannot accept the & symbol. You must use the word and instead. However, you can
set the Display title field and Body to News & Community 1. Make sure to set the fields for
each of the six content items.
Student Exercises
- For the Business Support site area, create the content Business Support 1,
Business Support 2, Business Support 3, Business Support 4,
Business Support 5, and Business Support 6
- For the Employee Services site area, create the content Employee Services
1, Employee Services 2, Employee Services 3, Employee Services
4, Employee Services 5, and Employee Services 6
__ l. Verify that you did not create any content items under the Search site area. Click Search
and no content items are listed.
V10.1
Student Exercises
EXempty Section 10. Creating a menu

A menu element displays metadata and content from content items that match the search criteria of
the menu element. You can use a menu element only by creating a menu component. You cannot
add a menu element to authoring templates, site areas, or content items.
__ 1. Create a menu.
__ a. Click New > Component > Menu.
__ b. In the Name field, enter: Topic Menu
__ c. In the Menu Criteria section, select the box next to Location.
__ d. In the Location section, verify that Site Areas is selected.
__ e. Expand the Further options section.

__ f. Select the box next to Current content.
Student Exercises
__ g. In the List Presentation Markup section, make the following changes:

- In the Header field, enter: <ul>
- In the Result design field, enter: <li>[Placeholder tag="titlelink"]</li>
- In the Footer field, enter: </ul>
- Leave the Separator and No result design fields blank
__ 2. Reference the new menu component in the Landing – Internet presentation template.
__ a. In the Tree view, click Presentation Templates.
__ b. Select the box next to Landing - Internet and click Edit.
__ c. Go to the Presentation Template Options section. Include a component tag to refer to
the menu component in the <div style= “float:right”; width 28%> element. Place
your cursor at the end of the line and add a blank line.
__ d. Click Insert Tag.
V10.1
Student Exercises
EXempty __ e. In the Insert a Tag pane, make the following changes:

- For Select a tag type, select Component.
- Click Select a library component.
- Select Topic Menu and click OK.
- Verify the tag entry appears and click OK.
__ f. You can see the component tag that is added to the presentation markup. The
Component id in the screen capture and what you have in the markup are different.
Verify that the name is set to Training/Topic Menu.
Student Exercises
__ g. Go to the top or the bottom of the page. Click the small down-arrow to the right of Save
and Close and click Save. Do not click Save and Close. You want to save the changes,
but remain on the page and not close the page.
__ h. Click Preview.
__ i. Select the radio button next to the Home site area and click OK.
__ j. The page opens in a new window and looks like the following screen capture:
__ k. On the left, you see the name Home in bold and the description below the name. On the
right, you see the Home menu with a single bullet point. When completed, close the
preview window.
__ l. On the Landing - Internet pane, click Save and Close.
__ 3. Create a new HTML component that is named Right Column.
__ a. Click New > Component > HTML.
__ b. In the Name field, enter: Right Column
__ c. In the HTML Markup section, click Insert Tag,
__ d. In the Insert a Tag pane, make the following changes:
- For Select a tag type, select Component.
- Select the radio button next to Topic Menu and click OK.
- Verify the tag entry appears and click OK.
V10.1
Student Exercises
EXempty __ e. You can see the component tag that is added to the presentation markup. The
Component id in the screen capture and what you have in the markup are different.
Verify that the name is set to Training/Topic Menu.

__ 4. Edit the Landing – Internet presentation template and remove the markup from the
Presentation Markup field.
__ a. Select the box next to Landing - Internet and click Edit.
__ b. Go the Presentation Template Options section and remove the following lines of
markup:
<div style="float:right; width: 28%">
[Component
id="2732924b-a035-4e12-8669-762fead8938b:NC90cmFpbmluZy90b3BpYyBtZW51"
name="training/topic menu" resultsPerPage=”” startPage=””]
</div>
Reminder
Your component id differs from the text listed in the markup.
Note
The presentation template is updated to remove the Topic Menu because in the next exercise you
display the content by using multiple web content viewer portlets. The Menu component and the
content detail display in different portlets.
__ c. Delete the blank line.

__ d. Go to the top or the bottom of the page. Click the small down-arrow to the right of Save
and Close and click Save. Do not click Save and Close. You want to save the changes,
__ e. Click Preview.
__ f. Select the radio button next to the Home site area and click OK.
Student Exercises
__ g. The page opens in a new window and looks like the following screen capture:
__ h. On the left, you see the name Home in bold and the description below the name. Now,
on the right, the Home menu with a single bullet point is no longer there. When
completed, close the preview window.
__ i. On the Landing - Internet pane, click Save and Close.
__ j. In the Library Explorer pane, click the List view of all entries icon in the Display menu
on the right. This changes the display back to the list view.
__ k. Log out of WebSphere Portal.
End of exercise
V10.1
Student Exercises
EXempty Exercise review and wrap-up

In this exercise, you created templates, components, and content items for a website.
Student Exercises
V10.1
Student Exercises
EXempty
Exercise 3. Pages, portlets, and page templates
Estimated time
01:00

In this exercise, you learn to manage pages. You create and modify page
templates and pages.

• Create page templates
• Create and delete pages
• Specify content for pages
• Update a presentation template
Introduction
In this exercise, you create several pages from your own template. In Section
1, you create a template that specifies the layout. You associate a portlet with
with a portlet container on the new page. You also configure the portlet
containers. In Section 2, you create pages from that template. In Section 3,
you update the presentation template.
Requirements
This exercise depends upon assets that are created in Exercises 1 and 2.
© Copyright IBM Corp. 2015 Exercise 3. Pages, portlets, and page templates 3-1
Student Exercises
Section 1. Create a page template

__ 1. Log in with user ID wpsadmin and password wpsadmin.
__ 2. Create a template.
__ a. Click Administration menu (the wrench) > Portal User Interface.
__ b. Under Portal User Interface, click Manage Pages.
V10.1
Student Exercises
EXempty __ c. On the Manage Pages pane, click Content Root.
__ d. Click Hidden Pages.
Student Exercises
__ e. Click Page Templates.
__ f. Click New Page from.
V10.1
Student Exercises
EXempty __ g. Type mySection in the Title field. Click the Friendly URL name field and the title is
automatically completed.
__ h. Click OK.
__ i. Go to Portal User Interface > Page Templates.
__ j. Click mySection to view the template you created.
Student Exercises
__ 3. Specify the page layout.

__ a. From the Edit Mode selector, click the edit mode toggle to turn on editing.
Notice that the layout outline becomes visible. There are two equal sized columns. The pur-
pose of the next steps is to define a different layout.
__ b. Click the Page tab in the upper left.
__ c. Click Layout.
V10.1
Student Exercises
EXempty __ d. Select the Top column 2 column unequal layout. Verify the success message that
appears across the top with a blue background.
__ 4. Associate the Web Content Viewer portlet with the top portlet container.
__ a. Click the Create tab and then select Applications.
__ b. Type web in the search box in the upper left of the dialog and press Enter. Find the Web
Content Viewer portlet in the list.
Student Exercises
__ c. Drag this portlet to the top row of the mySection template layout.
__ d. Associate the Web Content Viewer portlet with the other two portlet containers by
repeating steps 4a through 4c for each.
__ 5. Specify content for the top Web Content Viewer portlet.
__ a. In the upper right of the portlet, click Display Portlet Menu and then click Edit Shared
settings.
__ b. For Content Type, select Component.
V10.1
Student Exercises
EXempty __ c. Under Component, click Edit.
__ d. Select the Training library. Training is on the second page of components.
Student Exercises
__ e. Next, select the Banner Image component. Click OK.
__ f. Verify that the text Banner Image now appears in the content.
V10.1
Student Exercises
EXempty __ g. Below the Content Behavior, locate the Content header. In the Content section, click
Edit.
__ h. In the Select Content Item pane, use the breadcrumb trail to move around easily. Select
Libraries > Training > Home (site area) > Home (content item).
Student Exercises
__ i. Click OK and verify that the selection appears on the Content pane.
__ j. Towards the bottom of the pane, expand the Advanced Options section.
__ k. Change Receive links from to None.
Note
Use the Links section to enter the details of how you want to receive and broadcast links with other
portlets. This option determines whether rendering portlets are aware of the state or context of other
portlets.
Select a broadcast link option:
• Select None if you do not want to broadcast the context of the current portlet to other portlets.
• Select This page to broadcast the context of the current portlet to other portlets on the same
portal page.
• Select Another page to broadcast the context of the current portlet to portlets on a different
portal page. You must then select the target portal page.
• Select Dynamically select a Web Content page to dynamically determine the best
web content page to use when rendering the linking content item.
Select a receive link option:
V10.1
Student Exercises
EXempty • Select None if you do not want to receive the context of any other portlets.
• Select This portlet to use the context of the content item, component, or element that is
displayed in the rendering portlet.
• Select Other portlets and this portlet to receive the context from any rendering portlet that
broadcasts its context.
__ l. Click OK.
__ m. Verify that the banner image displays in the top Web Content Viewer portlet. This screen
capture is taken in VIew, rather than Edit mode.
Student Exercises
__ 6. Specify the content for the right column portlet container that uses the same procedure but a
different component.
__ a. On the mySection template page, with Edit mode still enabled, click the Display
Portlet Menu for the right (smaller) column, and select Edit Shared Settings.
__ b. Configure the Web Content Viewer Content for the right column by using these values:
• Content Type: Component
• Component: Training/Right Column
V10.1
Student Exercises
EXempty • Content: Libraries/Training/Home/Home
__ c. Go to Advanced Options and verify the following settings:

• Broadcast links to: Dynamically select a Web Content page
• Receive links from: Other portlets and this portlet
__ d. Click OK.
Student Exercises
__ 7. View the template.

__ a. From the Edit Mode selector, click the edit mode toggle to turn off editing.
__ b. Verify that the portlet container now shows a link to Home.
V10.1
Student Exercises
EXempty Section 2. Creating pages

__ 1. Log in with user ID wpsadmin with a password of wpsadmin.
__ 2. Click Site menu and go to the Home.
__ 3. Click the Getting Started tab.
__ 4. Create a page from the new template.

__ a. From the Edit Mode selector, click the edit mode toggle to turn on editing.
__ b. Click the Create tab.
Student Exercises
__ c. Select the Page option from the left menu below Getting Started (not peer to Create).
__ d. In the center Templates column, type mySection into the search field. Select the
mySection template.
V10.1
Student Exercises
EXempty __ e. In the Page Settings column, type Our Company in the Page title field. In the Page
insertion point section, select Next sibling of current page.
__ f. Click Create Page.
Student Exercises
__ 5. On the confirmation pane, choose to View or edit page information. To close the Create
dialog, click the X in the upper right corner.
__ 6. Verify the new page.
V10.1
Student Exercises
EXempty __ 7. Modify the new page. The first step is to associate content you created with the lower left
portlet container.
__ a. Verify that you are in Edit mode.
__ b. Click Page > General and select the Details tab.
__ c. On the far right column that is labeled Contents and Templates:, click the edit (pencil)
icon for the Default site area.
Student Exercises
__ d. Click Add web content.
V10.1
Student Exercises
EXempty __ e. Select the Training library on the last page of library listings. Select the Home site area
and select Our Company site area. Click OK.
Student Exercises
__ f. Now select this item (Training / Home / Our Company) as the web content for the
page. Click OK.
V10.1
Student Exercises
EXempty __ g. The Our Company page you created now appears in the portlet container in the left
lower column. Later, you refine this so the banner does not appear twice. For now, verify
that your text appears.
__ 8. Modify the right portlet container to display content from the web site you developed in
Exercise 2.
__ a. Make sure that you are in Edit mode.
__ b. Edit the shared settings of the portlet in the right column. Click the Display Portlet
Menu and select Edit Shared Settings.
Student Exercises
__ 9. Under Content, click Reset. The value changes to Training/Home/Our Company

(Inherited from page).
V10.1
Student Exercises
EXempty __ 10. Click OK.
Hint
If a default value does not appear, select Our Company from the site area content item under
Training / Home.
__ 11. In the right column, verify that you see links from the Our Company page.
.
Table 1: Page name with the page mapping
Page name Page - Site Area Mapping
News & Community Training > Home > News and Community
Business Support Training > Home > Business Support
Employee Services Training > Home > Employee Services
__ 12. Repeat the process in Steps 4 - 10 to create three pages. Substitute the value in the Page
name column in Table 1 on page 3-27 for Our Company. In step 6e, substitute the values in
the Page - Site Area Mapping column for the specified mapping.
__ 13. Delete pages.
__ a. Go to the Getting Started page.
Student Exercises
__ b. Click Menu > Delete Page.
__ c. Confirm the deletion.
Information
With this step, you create a clean website that is specific to the lab. You are deleting the
unnecessary portal pages that are included with WebSphere Portal. It is not necessary to remove
them, but is helpful to get a clean website at the end.
__ 14. Click OK.

__ 15. Do the same to the welcome page.
__ 16. From the Edit Mode selector, click the edit mode toggle to turn off editing.
V10.1
Student Exercises
EXempty Section 3. Updating the presentation template

In this section, you apply a different presentation template to resolve that issue of two banners. The
banner in the lower left column is not needed.
__ 1. Log in as Designer with the password of Designer.
__ 2. Click Site menu > Home.
__ 3. Click Applications menu > Content.
__ 4. Click the Web Content Authoring tab, and then go to the Library Explorer.
Student Exercises
__ 5. Go into the Training library.
__ 6. Go into the Presentation Templates.
V10.1
Student Exercises
EXempty __ 7. Edit the Landing – Internet presentation template. Check the Landing - Internet template
and click Edit.
__ 8. In the section Presentation Template options, edit the markup so that only the following
markup is used:
<h1>[Property context="current" type="auto" field="title"]</h1> [Element
context="current" type="auto" key="Body"]
__ 9. Click Save and Close.

__ 10. Go to the home page. Click the Site icon (globe) > Home.
Student Exercises
__ 11. Verify that your site looks something like the following screen capture. In particular, check
that the left lower column no longer has the duplicate banner.
When replacing the markup, you lose the banner image. As the banner image is already added in
the portlet as an image component in the previous steps, you do not require the banner image in
the presentation template now.
End of exercise
V10.1
Student Exercises

The first part of the exercise gave you experience creating a template. In the second section, you
created four pages from that template. In the third section, you modified a presentation template so
all the pages were modified at the same time to remove the duplicate banner.
Student Exercises
V10.1
Student Exercises
EXempty
Exercise 4. Adding navigational components and
search queries to a website
Estimated time
01:15

In this exercise, you create and examine various navigational components
and create a search query form.

After completing this exercise, you should be able to:
• Design page navigation components
• Create a banner navigator
• Create a breadcrumb navigator
• Create a page navigation component
• Create a search component
• Create a search form
Introduction
A page navigation element provides navigation controls that are used to
browse through a set of results that are generated by menus, navigators,
personalization, and search elements.
Requirements
• Exercises 1 through 3 completed
© Copyright IBM Corp. 2015 Exercise 4. Adding navigational components and search queries to a 4-1
Student Exercises
Section 1. Creating a navigator component

You create a navigator element to display a list of links based on a section of the site framework of
a site. You can use a navigator element only by creating a navigator component.
In this section, you create a navigator component named Banner.
__ 1. Log in to WebSphere Portal.
Hint

Log in.
__ d. Click the Applications icon (the pages).
__ e. Click Content > Web Content Authoring > Training.
V10.1
Student Exercises
EXempty __ 2. Create a banner navigator.

__ a. Click Components.
__ b. Click New > Component > Navigator.
__ c. In the Name field, enter: Banner
__ d. Go to the Navigator Options section. For Start Type, select Selected.
__ e. In the Select Start Area section, click Select Start Area.

__ f. Select the radio button next to the Home site area and click OK.
__ g. Clear the box next to Include Start.

__ h. For Descendant Level, select 1 Level.
__ i. Clear the box next to Show Content.
__ j. Go to the List Presentation Markup section and add the following markup:
- In the Result design 1 field, enter: [Placeholder tag="titlelink"]
Student Exercises
Hint
You can also click Insert Tag. For the Select a tag type field, select Placeholder. For the Select
placeholder tag type field, select Title Link and click OK. This step adds the Placeholder line in
the Result design 1 field.
- In the Separator field, enter: space|space
Information
In the Separator field, you enter a space followed by | followed by another space. Do not enter the
word space into the field.
__ k. Go to the top or bottom of the page and click Save and Close.
__ 3. Edit the Landing – Internet presentation template.
__ b. Click Presentation Templates.
__ c. Select the box next to Landing - Internet and click Edit.
V10.1
Student Exercises
EXempty __ d. Go to the Presentation Template Options section. In the Presentation Markup field, place
your cursor before the <h1> tag and add a blank line. Place your cursor back in the
blank line.
__ e. Click Insert Tag.

__ f. In the Insert a Tag pane, make the following changes:
- For the Select a tag type field, select Component.
- Select Banner and click OK.
- Click OK. This step adds the component line in the markup.
Reminder
Your component id differs from the screen capture.
__ 4. Preview the presentation template.

__ a. Go to the top or the bottom of the page. Click the small down-arrow to the right of Save
and Close. and click Save. Do not click Save and Close. You want to save the changes,
__ b. Click Preview.
__ c. Click Home.
__ d. Select the radio button next to Our Company and click OK.
Student Exercises
__ e. In the preview window, you can see the banner navigator that is added.
__ f. Close the preview window.

__ g. Click Save and Close to save and close the presentation template.
V10.1
Student Exercises
EXempty Section 2. Creating a breadcrumb navigator

If a website is large and complex, a user can easily lose orientation. A breadcrumb allows the user
to see the position of the current web page within the website and the logical path back to the
highest level of the site framework. A breadcrumb is the orientation device that shows a user where
the displayed web page fits within the site framework.
In this section, you create a breadcrumb navigator component named Breadcrumb.
__ 1. Create a breadcrumb navigator.
__ b. Click Components.
__ c. Click New > Component > Navigator.
__ d. In the Name field, enter: Breadcrumb
__ e. Go to the Navigator Options section. For Start Type, select Current Site Area.
__ f. Verify the box next to Include Start is selected.
__ g. For Ancestor Level, select All.
__ h. Select the box next to Show Top Level Site Area.
__ i. Clear the box next to Show Content.
__ j. Go to the Presentation Markup section and make the following changes:
- In the Header field, enter: <div>
- In the Result design 1 field, enter: [Placeholder tag="titlelink"]
Hint
You can also click Insert Tag. For the Select a tag type field, select Placeholder. For the Select
placeholder tag type field, select Title Link and click OK. This step adds the Placeholder line in
the Result design 1 field.
- In the Footer field, enter: </div>

- In the Separator field, enter: space>space
Information
In the Separator field, you enter a space followed by > followed by another space. Do not enter the
word space into the field.
__ k. Click Save and Close.
Student Exercises
__ 2. Edit the Landing – Internet presentation template to replace a tag that references the
Banner with one that references the Breadcrumb.
__ c. Select the box next to Landing - Internet and click Edit.
__ d. Go to the Presentation Template Options section. In the Presentation Markup field, place
your cursor before the <h1> tag and add a blank line. You still want the banner
component to be at the top. Place your cursor back in the blank line.
__ e. Enter the following markup:

<hr></hr>
<br>
__ f. Enter a blank line and place your cursor in the blank line.
__ g. Click Insert Tag.

__ h. In the Insert a Tag pane, make the following changes:
- Select Breadcrumb and click OK.
V10.1
Student Exercises
EXempty
Reminder
Your component ids differ from the screen capture.
__ 3. Preview the presentation template.

__ a. Go to the top or the bottom of the page. Click the small down-arrow to the right of Save
and Close. and click Save. Do not click Save and Close. You want to save the changes,
__ b. Click Preview.
__ c. Select the radio button next to Our Company and click OK.
Student Exercises
__ d. In the preview window, you can see the breadcrumb navigator that is added. You can
see the banner, the banner navigator, horizontal rule, and then the breadcrumb
navigator.
__ e. Close the preview window.

__ f. Click Save and Close to save and close the presentation template.
V10.1
Student Exercises
EXempty Section 3. Creating a page navigation component

A page navigation element provides navigation controls that are used to browse through a set of
results that are generated by menus, navigators, personalization, and search elements. You can
use a page navigation element only by creating a page navigation component.
In this section, you create a page navigation component named PN - Paging.
__ 1. Create a page navigation component.
__ c. Click New > Component > Page Navigation.
__ d. In the Name field, enter: PN - Paging
__ e. Go to the Page Navigation Element section. Select box next to both Shuttle (first,
previous, next, and last controls) and Paging (page numbering and continuation).
__ f. Go to the Page Navigation Element section and make the following changes:
- In the Header field, enter: <span>
- In the Footer field, enter: </span>
- In the Separator field, enter:
__ g. Verify the following fields and markup:
- In the First control - active design field, verify that the default value is: <<
- In the First control - inactive design field, verify that the default value is: <<
- In the Previous control - active design field, verify that the default value is: <
- In the Previous control - inactive design verify that the default value is, enter: <
- In the Next control - active design field, verify that the default value is: >
- In the Next control - inactive design field, verify that the default value is: >
- In the Last control - active design field, verify that the default value is: >>
- In the Last control - inactive design field, verify that the default value is: >>
- In the Continuation design field, verify that the default value is: ...
__ h. In the Page numbering options section, select Show all pages.
__ 2. Edit the Topic Menu component and place the paging navigation control into the menu.
__ a. Select the box next to Topic Menu and click Edit.
Student Exercises
__ b. Go to the List Paging Options section. Change the Results per page field from 10 to 5.
__ c. Go to the List Presentation Markup section. In the Footer field, place your cursor before
the </ul> tag and add a blank line. Place your cursor back in the blank line.
__ d. In the blank line, enter the following markup:

<br>
__ e. Place your cursor after the <br> tag and add a blank line. Place your cursor on the blank
line.
__ f. Click Insert Tag.
__ g. In the Insert a Tag pane, make the following changes:
- Select PN - Paging and click OK.
- Click OK. This adds the component line in the markup.
V10.1
Student Exercises
EXempty
Reminder

__ 3. Examine the page.
__ a. Click the Open site menu icon.
__ b. Click Home.
Student Exercises
__ c. In the preview window, you can see the paging control that is added below the menu
options on the right. You should see five menu options only, not all six. This is because
the Results per page field for the page navigation component is set to five.
__ d. Click 2 to go to page 2 and examine the details. You can also use the forward and back
arrows to move between the pages.
__ e. Click any of the other pages, such as Employee Services, to verify that the paging
controls are added.
__ f. Log out of WebSphere Portal.
V10.1
Student Exercises
EXempty Section 4. Creating a search content source

A search element is used to display the results of a search query. A search element cannot be used
in isolation, but must be used together with an HTML element that is used to define the search
query form.
In this section, you create a search content source.
__ 1. Log in to WebSphere Portal as wpsadmin.
__ a. In the upper right, click Log In.
__ b. In the login area, enter wpsadmin as the user ID and wpsadmin as the password. Click
Log in.
__ 2. Create a search content source.
__ a. Click the Administration icon (the wrench) and click Search Administration.
__ b. Under Search Administration, click Manage Search.
__ c. Click to expand Search Collections.
__ d. Click New Collection.
__ e. In the Location of Collection field, enter: WebContentCollection
__ f. Click OK.
__ 3. Create a content source.
__ a. Click WebContentCollection.
__ b. Click New Content Source.
__ c. For Content source type, select WCM site.
__ d. In the Content Source Name field, enter: Training
Student Exercises
__ e. In the Collect documents linked from this URL field, enter the following URL:
http://wcm:10039/wps/seedlist/myserver?SeedlistId=Training/Home&Source=co
m.ibm.workplace.wcm.plugins.seedlist.retriever.WCMRetrieverFactory&Action
=GetDocuments
Hint
If you copy the URL from the book, make sure that the entire URL is on one line and it does not
contain spaces. Copying and pasting from the PDF book into the browser adds spaces into the
URL. Make sure you remove the spaces in the URL before you continue.
__ f. Click the Security tab.

__ g. In the User Name field, enter: wpsadmin
__ h. In the Password field, enter: wpsadmin
__ i. In the Host Name field, enter: wcm
V10.1
Student Exercises
EXempty __ j. Click Create.
__ k. Verify the details in the Security realms section. You should see wpsadmin.
__ l. Then, at the bottom of the form, click Create. You should see the new content source,
Training.
Student Exercises
__ m. Verify that you also have a message at the top of the pane that indicates the collection is
OK.
Hint
If you do not get the OK message, click the Edit Content Source icon (the pencil) next to Training
and examine each of the configuration settings. Verify the URL and Security settings and fix any
mistakes or typos.
__ 4. Start the crawler.

__ a. Click the Start Crawler icon (the right arrow) next to Training.
__ b. This action starts the crawler and the status for Training is now changes from Idle to
Running.
__ c. After a few moments, click Refresh. Continue to click Refresh until the Status is Idle
again. This step ensures that the crawler starts successfully and that documents are
found. You should see the number of documents increase.
Note
Your number of documents might differ from the screen capture.

Your Run Time for the crawler can differ from the screen capture. It can take a few seconds to a few
minutes to complete.
V10.1
Student Exercises
EXempty __ d. Go to the navigation pane on the left. Under Access, click Resource Permissions.
__ e. Click PSE Sources.
__ f. Click the Assign Access icon next to WebContentCollection.
__ g. Next to the Editor Role, click the Edit Role icon (the pencil).
__ h. Click Add.
__ i. Verify that the Search Users or User Groups field is set to User Groups. Next to the
Search by field, click Search.
__ j. Select the box next to Designers and click OK.

__ k. You can now see Designers under Members in the Role. In the breadcrumb trail, click
C:\IBM\WebSphere\wp_profile\PortalServer\collections\WebContentCollection.
Student Exercises
__ l. Click Apply.
__ m. When prompted if you want to modify the resource, click OK.
__ n. Log out of WebSphere Portal.
V10.1
Student Exercises
EXempty Section 5. Creating a search form

To create a search form, you must create a search query by using an HTML element and create a
search results view by using a search component. The form that you create by using the HTML
element is used to submit a search query. The results of the search query are then displayed within
a search element.
In this section, you create an HTML component named Search Form and a Search component
named Search Results.
__ 1. Log in to WebSphere Portal as Designer.
__ b. In the login area, enter Designer as the user ID and Designer as the password. Click
Log in.
__ 2. Create an HTML component named Search Form.
__ a. Click the Applications icon (the pages).
__ b. Click Content > Web Content Authoring > Training > Components.
__ c. Click New > Component > HTML.
__ d. In the Name field, enter: Search Form
__ e. Go to the HTML Element section. In the HTML Markup field, enter the following markup:
<div>
<form action="[PathCmpnt type="servlet"]/Training/Home/Search/"
method="post">
<span><input type="text" name="search_query"/></span>
<span><input type="submit" value="Search"/></span>
</form>
</div>
__ 3. Create a Search component named Search Results.
__ a. Click New > Component > Search.
__ b. In the Name field, enter: Search Results
Student Exercises
__ c. Go to the Search Options section. For the Search collection field, verify that
WebContentCollection is selected.
__ d. Go to the List Presentation Markup section. In the Header field, enter the following
markup:
<div>
<ul>
__ e. In the Result design field, enter the following markup:
<li>
<span>
<b>
[Placeholder tag="titlelink"]
</b>
</span>
</li>
__ f. In the Footer field, enter the following markup:
</ul>
</div>
__ g. In the No result design field, enter the following markup:
<b>No results matched your search. Try a different search.</b>
__ 4. In the Right Column HTML component, insert a component tag to put the search form below
the existing Topic Menu component tag.
__ a. Select the box next to Right Column and click Edit.
__ b. Go to the HTML Element section. In the HTML Markup field, go to the end of the line
and add a blank line.
__ c. Click Insert Tag.
V10.1
Student Exercises
EXempty __ d. In the Insert a Tag pane, make the following changes:

- Select Search Form and click OK.
Reminder
__ e. Click Save and Close.

__ 5. Edit the Search site area and add the Search Results component to the Body field.
__ b. Click Content > Home.
__ c. Select the box next to Search and click Edit.
__ d. Go to the Body section. Remove the text that you added in earlier.
- Select Search Results and click OK.
Student Exercises
Reminder
__ g. Click Save and Close.

__ h. Log out of WebSphere Portal.
Log in.
__ 7. Create a Portal page where the results are displayed.
__ a. Click the Open site menu icon and click Home.
__ b. Click Employee Services.
__ c. From the Edit Mode selector, you can see that edit mode is inactive, or off. Click the edit
mode toggle to turn on editing, or activate editing. To turn on editing, click the box next to
Edit Mode.
__ d. In the toolbar menu in the upper left, click Create > Page.
__ e. In the Template section, verify that Basic is selected.
__ f. In the Page Settings section, make the following changes:
- In the Page title field, enter: Search
- For Page insertions point, verify that Next sibling of current page is selected.
- Click Create Page.
__ g. In the toolbar menu in the upper left, click Page > General
__ h. Click the Details tab.
__ i. In the Contents and Templates section, next to Default site area, click the Edit icon (the
pencil).
__ j. Click Add web content.
__ k. Click Training > Home.
__ l. Select the radio button next to Search and click OK.
V10.1
Student Exercises
EXempty __ m. Select the radio button next to Search Training/Home/Search and click OK.
__ n. In the tool menu in the upper left, click Create > Applications.
__ o. In the search field in the top right of the window, enter: web content (and enter)
__ p. Find the Web Content Viewer portlet in the list. Hover your mouse over Web Content
Viewer and the add icon (plus) appears in the upper right. Click the plus to add the Web
Content Viewer portlet.
Student Exercises
__ q. Close the Create pane. You are placed on the Search page and you can see the portlet
added on the left.
__ r. Next, you need to edit the shared settings. In the upper right corner of the portlet, click
the Display portlet menu icon.
__ s. Click Edit Shared Settings.

__ t. Click Advanced Options to expand the section.
__ u. For the Broadcast links to field, verify that the setting is Dynamically select a Web
Content page.
__ v. For the Receive links from field, verify that the setting is Other portlets and this
portlet.
__ w. Click OK.
__ x. From the Edit Mode selector, click the box next to Edit Mode to turn off editing.
V10.1
Student Exercises
EXempty __ y. Log out of WebSphere Portal.

Log in.
__ 9. Verify the search form.
__ b. Click the Our Company page. You can see the search form on the right.
__ c. In the Search field, enter: *

__ d. Click Search. You are redirected to the Search page where you can see a list of search
results. The results include the content present under the Home site area and its child
site areas.
__ e. Log out of WebSphere Portal.
Student Exercises
End of exercise
V10.1
Student Exercises

In this exercise, you created and examined various navigational components and created a search
query form.
Student Exercises
V10.1
Student Exercises
EXempty
Exercise 5. Item management
Estimated time
00:15

In this exercise, you learn how to use folders and versions.

• Create folders within the Components view
• Restore different template versions
Introduction
In the first part of this exercise, you learn how to organize content into
folders.
In the second part of this exercise, you view existing version numbers. You
create a new version and restore an earlier version.
Requirements
To complete this exercise, you must have completed
• Exercises 1 - 4
© Copyright IBM Corp. 2015 Exercise 5. Item management 5-1

Student Exercises
Section 1. Working with folders

__ 2. Select Site > Home.
__ 3. From the Applications menu, select Content.

__ 4. Click the Web Content Authoring tab.
__ 5. Create a folder.
__ a. In the Library Explorer, go to Training > Components.
__ b. Click New > Folder.
V10.1
Student Exercises
EXempty __ c. Type Legal in the Name field.
__ d. In the Location section, click Select location.

__ e. On the Select a location pane, select Components. Click OK.

Student Exercises
__ g. Verify that a Legal folder now exists in your Components view.
__ 6. Create two components in the Legal folder.

__ a. Click the Legal folder.
__ b. Click New > Component > HTML.
__ c. Name the component Copyright.

__ d. Click Save and Close.
__ e. Repeat Steps 5b and 5c naming the component Disclaimer.
V10.1
Student Exercises
EXempty __ f. Verify that two components are in the Legal folder.

Student Exercises
Section 2. Working with versions

__ 1. Verify the current version of the Landing - Internet template.
__ a. From the last step in Section 1, click Training in the breadcrumb trail.
__ c. Check Landing - Internet and click Read.
V10.1
Student Exercises
EXempty __ d. Click More > Versions.
__ 2. Make note of the current version. In the screen capture, the current version is 9.
__ e. Click Done and then Close.

__ 3. Create a version of the Landing - Internet template.
__ a. Select the check box next to the Landing - Internet presentation template and click
Edit.

Student Exercises
__ b. Change the presentation markup so you can easily spot the change. In the Presentation
Template Options, in the markup add a line which says “This is an obvious
change.”.
__ c. Click Save and Close.

__ 4. Verify that a new version was created.
__ a. Check the Landing - Internet presentation template and click Read.
__ b. Click More > Versions.
V10.1
Student Exercises
EXempty __ c. Verify that there is one more version.
__ 5. Revert to the previous version.

__ a. Select the previous version.
__ b. Click Restore.
__ 6. Verify that the Landing - Internet presentation template is restored to its previous version,
that is, without the text you added. To view the presentation template, refer to Section 2,
step 1c, that is, check the template and click Read.
__ 7. Log out of WebSphere Portal.
End of exercise

Student Exercises

In the first part of this exercise, you learn how to organize content into folders. In the second part of
this exercise, you view existing versions. You create a new version, and restore an earlier version.
V10.1
Student Exercises
EXempty
Exercise 6. Personalization and categories
Estimated time
01:30

In this exercise, you create a user name and personalization components,
and a taxonomy, and various categories.

After completing this exercise, you should be able to:
• Create and test a user name component
• Personalize profile-based content and use personalization rules
• Apply security and use authorization and access control based
personalization
• Create personalization components
• Create sections and events
• Create taxonomies
• Create categories
• Create a content template that includes an option selection element
• Assign a content template
• Create a list presentation component
• Create a menu
Introduction
Personalization allows a portal or website to choose which content appears
for particular site visitors. For example, a site that uses Personalization can
show different news articles to managers than to regular employees, or
different information to valued customers.
You can define content through a number of applications, including IBM Web
Content Manager. Personalization automatically detects the content
definition from these applications. After you define the content type,
attributes of the content are shown to the rule author. The rule author can use
these attributes to make conditions. These conditions can define if and when
© Copyright IBM Corp. 2015 Exercise 6. Personalization and categories 6-1

Student Exercises
certain content is displayed or even if certain actions like database updates

and triggered emails might occur.
Requirements
V10.1
Student Exercises
EXempty Section 1. Creating a user name component

Your website can be configured for viewing by both anonymous and authenticated users. You might
not want to show all your content to anonymous users. The user name component is how you store
different markup for anonymous and authenticated users. When referenced on a page, the markup
that is displayed depends on whether the user is authenticated.
In this section, you create a user name component called UN - User Name Component.
Log in.
Hint
__ 2. Create a user name component.

__ c. Click New > Component > User Name.
__ d. In the Name field, enter: UN - User Name Component
__ e. Go to the User Name Element section. In the Anonymous user design field, enter the
following markup:
<b>Log in to see your personal settings.</b>
__ f. In the User name design field, enter the following markup:
<b>Welcome [Placeholder tag="name"] to the Intranet Training website.</b>
__ 3. Edit the Right Column HTML component and add a component tag to reference the UN -
User Name Component at the end of the markup.
__ b. Go to the HTML Element section. In the HTML Markup field, put your cursor at the end
of markup and add a blank line.

Student Exercises

- Select UN - User Name Component and click OK.
Reminder

__ f. Log out of WebSphere Portal.
V10.1
Student Exercises
EXempty Section 2. Assigning access to a page

Manage Pages allows you to create, edit, activate, order, and delete pages as well as external Web
pages and labels. One of the management tasks is that you can set access permissions.
In this section, you assign anonymous access to the Home page.
__ 1. To change page security, you must log in to WebSphere Portal as wpsadmin.
Log in.
__ 2. Assign anonymous access to the Home page.
__ a. Click the Administration icon (the wrench).
__ b. Click Portal User Interface.
__ c. Under Portal User Interface, click Manage Pages.
__ d. Click Content Root.
__ e. Next to the Home page, click the Set Page Permission icon (the key).
__ f. Next to the User role, click the Edit Role icon (the pencil).

Student Exercises
__ g. There is already an entry for All Authenticated Portal Users. Next, add anonymous
access. Click Add.
__ h. Select the box next to Anonymous Portal User and click OK.
__ i. You now have two entries for Members in the Role for User.
__ j. In the breadcrumb trail, click Home.

__ k. On the Resource Permissions pane, click Done.
V10.1
Student Exercises
EXempty Section 3. Testing the user name component

In this section, you test the results of the user name component and access permissions.
__ 1. Test the user name component.
__ a. As a reminder, you are already logged in to WebSphere Portal as wpsadmin.
__ b. Click the Open site menu icon and click Home.
__ c. Click Our Company.
__ d. In the lower right, you should see the following text:
Welcome wpsadmin to the Intranet Training website.
__ e. Log out of WebSphere Portal.

__ f. You should see the same page, but with a change in the user name component.
However, it is common for caching issues to prevent the page security change to take
effect yet. To test, log in as Designer.
__ g. Click the Open site menu icon and click Home. If you do not see Home, make sure that
you are logged in as Designer. In the lower right, you should see the same message, but
for Designer.
__ h. Now, log out of WebSphere Portal and you should see the same page. The anonymous
message should be displayed in the right column. You should see the following text:
Log in to see your personal settings.

Student Exercises
__ i. At the top of the page, you also should see the following text:
Log in to use authoring capabilities
Hint
If the user name message does not show when you are logged in as Designer, then the browser
and server caching might be the cause. Clear the browser cache and wait for the server cache to
time out resolves those two situations. Then, you can clear the cache or reload the page as new.
If you still see the problem, you can restart the server, WebSphere_Portal.
V10.1
Student Exercises
EXempty Section 4. Creating an events section and events list

In this section, you create an event section on the page which contains an events list.
Log in.
__ 2. Create an events section and events.
__ b. Click Content > Web Content Authoring > Training > Authoring Templates.
__ c. Click New > Content Template.
__ d. In the Name field, enter: Events
__ e. Click Manage Elements.

Student Exercises
__ f. In the Element Manage pane, make the following changes:

- Click Add.
- Add another element. For Element type, select Date and Time.
- In the Name field, enter: Date
- Click Add.
- You should see two elements, HTML and Data and Time, which are listed under the
Element type section. Then, click OK.
__ g. Click the Default Content Properties tab.

__ h. Expand the Workflow section.
__ i. Clear the box next to Enable workflow for items created with this authoring
template.
__ 3. Create an Events area under the News & Community site area by using the Sections site
area template.
__ b. Click Content > Home > News & Community.
__ c. Click New > Site Area > Training / Sections.
V10.1
Student Exercises
EXempty __ d. In the Name field, enter: Events

__ e. Click Save and Close. Verify that you can see the Events site area under News &
Community.
__ 4. Create a template map for the Events authoring template.

__ c. Go to the Site Area Properties section. You currently have three template mappings
listed. To add another mapping, click Manage Template Mappings.

Student Exercises
__ d. Click Add.
__ e. Select Events as the authoring template.

__ f. In the Presentation Templates section, select the radio button next to Landing -
Internet.
__ g. Click OK. This step maps the authoring template and presentation template together.
You are placed on the Manage Template Mappings pane. Here you can see that the
Authoring Template Training / Events, is mapped to the Presentation Template Training /
Landing - Internet. Now, you have four template mappings.
__ h. Go to the bottom of the page and click OK.

__ 5. Create ten different event items under the Events site area. You create five events in the
future and five events in the past.
__ a. Click Home > News & Community > Events.
__ b. Click New > Content > Training / Events.
__ c. In the Name field, enter: Event 1
__ d. In the Body field, enter: Event 1
__ e. Go to the Date section. In the Date field, select a date in the future.
V10.1
Student Exercises
EXempty __ g. Repeat the prior steps to create Event 2, Event 3, Event 4 and Event 5. Make
sure that you select a date in the future.
__ h. Next, create events in the past. Click New > Content > Training / Events.
__ i. In the Name field, enter: Past Event 1
__ j. In the Body field, enter: Past Event 1
__ k. Go to the Date section. In the Date field, select a date in the past.
__ l. Click Save and Close.
__ m. Repeat the prior steps to create Past Event 2, Past Event 3, Past Event 4,
and Past Event 5. Make sure that you select a date in the past.

Student Exercises
__ n. When completed, you should see all ten events listed under the Events site area. Five
events in the future and five events in the past.
__ o. Log out of WebSphere Portal.
V10.1
Student Exercises
EXempty Section 5. Configure edit access for a group

In this section, you configure edit access for the Designer group to personalization.
Log in.
__ 2. Enable edit access for the Designers group.
__ b. Click Portlet Management.
__ c. Under Portlet Management, click Applications.
__ d. In the Search by field, verify Title starts with is selected.
__ e. In the Search field, enter: Personalization
__ f. Click Search.
__ g. Next to Personalization Editors, click the Assign access to portlet applications icon
(they key).
__ h. Next to the Editor role, click the Edit Role icon (the pencil).
__ i. You can see the message that there are no members found in the role. Next, you add
the Designer group as a member. Click Add.

Student Exercises
__ j. Since the Designer group is not listed, you must click Search.
__ k. Select the box next to Designers and click OK.
__ l. In the breadcrumb trail, click Personalization Editors.

__ m. Click Done.
__ n. In the upper left, click the Applications icon (the pages).
__ o. Click Personalization.
V10.1
Student Exercises
EXempty __ p. Click the Business Rules tab.

__ q. In the Personalization Navigator, click Extra Actions > Edit Access.
__ r. Next to the Editor role, click the Edit Role icon (the pencil).
__ s. Again, there are no members in the role and you need to add a member. Click Add.
__ t. Since the Designer group is not listed, you must click Search.
__ u. Select the box next to Designers and click OK.
__ v. In the breadcrumb trail, click Workspace.
__ w. Click Done.
__ x. Log out of WebSphere Portal.

Student Exercises
Section 6. Creating a personalization component

A Personalization element stores a reference to a rule or content spot. You can use a
Personalization element only by creating a Personalization component. A personalization element
can display personalization content, a link, and attributes of personalization content within a
presentation template or element design.
In this section, you create a personalization component named PZN - Coming Events.
Log in.
__ 2. Create a personalization component.
__ c. Click New > Component > Personalization.
__ d. In the Name field, enter: PZN - Coming Events
__ e. Go to the Personalization Element section and click New.
V10.1
Student Exercises
EXempty __ f. In the Rule field, next to whose Location is, click value.
__ g. In the menu, click the down arrow to see all of the options. Keep clicking the down arrow
until you see Select Location.
__ h. Click Select Location.

Student Exercises
__ i. Expand Training > Home > News & Community.
__ j. Select the box next to Events.

__ k. Click OK. You can see that Events is added to the rule.
__ l. In the Rule field, next to whose attribute is, click attribute.

__ m. Click Authoring Template.
__ n. On the same line, click value.
__ o. Click the down arrow and scroll to the bottom of the window. Then, click Select WCM
Template.
__ p. Go to page 6.
V10.1
Student Exercises
EXempty __ q. Select the box next to Events that is in the Training library. It is on the final page of the
options, page 6. Click OK.
__ r. Click add Condition.
__ s. Click Authoring Template Properties > Select Authoring Template Property.

__ t. Expand Training > Events.

Student Exercises
__ u. Select the box next to Date and click OK.
__ v. In the line whose Events.Date is, click is. Then, click is greater than.
V10.1
Student Exercises
EXempty __ w. Hover your mouse over the word value. Click the arrow (>) symbol next to value and
then click Date > Date.
Hint
Place your mouse over the word value and the arrow (>) symbol appears. Make sure that you click
the arrow, and not the word value.
__ x. Click current Date.Date and select today’s date and click Submit. You can see the date
appears in the field.
__ y. Click order as is and then click order by.

__ z. Click attribute and then click Authoring Template Properties > Select Authoring
Template Property.
__ aa. Expand Training > Events.
__ ab. Select the box next to Date and click OK.

Student Exercises
__ ac. Change ascending to descending.

__ ad. Verify your rule and make sure that it looks the following screen capture:
When completed, click Save.

__ 3. Finish creating the personalization component.
__ a. Go to the List Paging Options section, make the following changes:
- For the Results per page field, enter: 3
- For the Start page field, leave the default: 1
- For the Maximum number of result pages field, enter: 1
__ b. For the Header field, enter the following markup:
<div>
<div>
<span>Upcoming Events</span>
</div>
<div>
<ul>
<li>
__ c. For the Result design field, enter the following markup:
<p>
<span>[Placeholder tag="titlelink"]</span><br><span>
[Element context="autofill" type="content" key="date" format="DATE_LONG"]
, [Element context="autofill" type="content" key="date"
format="TIME_SHORT"]
</span>
</p>
<p>
[Property context="autofill" type="content" field="description"]
</p>
V10.1
Student Exercises
EXempty
Hint
Instead of entering the following line:

[Element context="autofill" type="content" key="date" format="DATE_LONG"]
, [Element context="autofill" type="content" key="date" format="TIME_SHORT"]
You can complete the following steps:
- Click Insert Tag.
- In the Insert a Tag pane, make the following changes:
• For the Select a tag type field, select Element.
• For the Select a item context field, select Autofill.
• Click the Select authoring template.
• Select the radio button next to Events and click OK.
• For the Select the element to reference field, select Date.
• Click OK. This step adds the component line in the markup.
This step adds the following line:
[Element context="autofill" type="content" key="date"]
There is no option to add the remaining part of the line, so you must enter this text in the field
manually.
Information
Context determines which content item or site area is being referenced:

Selected: Refers to a particular item as specified in the name attribute below.
Current: References the element from the current site, site area, or content item that the user is
browsing.
AutoFill: The referenced element is determined by the search parameters of a menu,
navigator, or taxonomy component.
__ d. For the Footer field, enter the following markup:

</li></ul></div>
</div>
__ 4. Edit the Right Column component and add a component tag to reference the PZN - Coming
Events at the end of the design.
__ b. Go to the HTML Element Section. In the HTML Markup field, put your cursor at the end
of markup and add a blank line.

Student Exercises

- Select PZN - Coming Events and click OK.
Reminder

__ 5. Verify the changes to the page.
V10.1
Student Exercises
EXempty __ b. Click Our Company. You should see the upcoming events on the right.

Student Exercises
Section 7. Creating a taxonomy and categories

You use a taxonomy element to display a list of categories from a taxonomy. You need to create a
taxonomy to store the set of categories.
In this section, you create a taxonomy called All Categories and you create various categories.
__ 1. Create a taxonomy.
__ b. Click Content > Web Content Authoring > Training > Categories.
__ c. Click New > Taxonomy.
Hint
Make sure that you select Taxonomy and not Taxonomy Component.
__ d. In the Name field, enter: All Categories

__ 2. Create a category.
__ a. Click New > Category.
__ b. In the Name field, enter: Feature Article
__ c. In the Location field, click the down arrow next to Select Location and then click
Training / All Categories taxonomy as the parent.
__ 3. Repeat step two and create two child categories of the Feature Article category.
__ a. Create the category Featured News with the location Training / All Categories /
Feature Article.
__ b. Create the category Home Page Feature with the location Training / All Categories
/ Feature Article.
__ 4. Verify that the category structure exists.
__ a. Next to Display, click the Tree view of all entries icon.
V10.1
Student Exercises
EXempty __ b. Expand Categories > All Categories > Feature Article. You should see Featured
News and Home Page Feature, which are children of Feature Article.
__ c. Go back to the regular list display. Next to Display, click the List view of all entries
icon.

Student Exercises
Section 8. Creating a content template that includes an option

selection element
In this section, you create a News content template that includes an option selection element.
__ 1. Create the News content template.
__ b. Click Authoring Templates.
__ c. Select the box next to Topics and click Edit.
__ d. You want to make a copy of this template to use it as a new template. Click the down
arrow next to Save and Close, and click Save As.
__ e. In the New name field, enter: News

__ f. In the New display title field, enter: News
__ g. Click OK. You are placed in the new authoring template, News.
__ 2. Modify the News authoring template.

__ a. Click Manage Elements.
V10.1
Student Exercises
EXempty __ b. In the Element Manager pane, make the following changes:

- For Element type, select Option Selection.
- In the Name field, enter: Categories
- Click Add.
- You should see two elements, Rich Text and Option Selection, listed under the
Element type section. Then, click OK.
__ c. Click the Default Content tab.

__ d. Go to the Categories section and click the Categories field properties icon, which is
next to the name Categories.
__ e. In the Option Selection Field Properties pane, set the following parameters:
- Select Multiple select, so users can select multiple categories.
- For Option Type, select Use Taxonomy, so you can select existing categories to
populate your option selection element.
- For the Category selection options field, select Selected Categories.
- Click Add Categories.
- Click All Categories > Feature Article and select the box next to both the Featured
News and Home Page Feature categories. Click OK.
- For the User interface, select Check boxes as the user interface option.
__ 3. Create a template map in the Home site area to map the News authoring template to the
Landing – Internet presentation template.
__ a. In the breadcrumb trail, click Training > Content.
__ d. Click Add.
__ e. Select News as the authoring template.

Student Exercises
__ f. In the Presentation Templates section, select Landing - Internet.

Authoring Template Training / News, is mapped to the Presentation Template Training /
Landing - Internet. Verify that you have five template mappings.
__ h. Go to the bottom of the page and click OK.

V10.1
Student Exercises
EXempty Section 9. Assigning a content template

__ 1. Assign a content template.
__ a. Click Home > News & Community.
__ b. Select the box next to each of the six News & Community content items.
__ c. Click More > Apply Template.
__ d. Select the News content template.
__ e. Go to the bottom of the page and select the box next to Add new elements.
__ f. Click OK.
__ g. Examine the results at the top of the page and look for the number of items that are
updated. A total number of 6 items are updated.
__ 2. Edit one of the News items and select the Home Page Feature category under the new
Categories section.
__ a. You can select any of the News & Community content items, but it is best to start at the
beginning. Select the box next to News & Community 1 and click Edit.
__ b. Go to the Categories section. Select /Training/All Categories/Feature Article/Home
Page Feature.

Student Exercises
Section 10. Creating a list presentation component

You can add the List Presentation component to any page created from the List, Slideshow, or
Carousel templates. The component allows you to define a header, footer, and result design in one
place and reuse the component on multiple pages.
In this section, you create a List Presentation component called List Presentation.
__ 1. Create a List Presentation component.
__ c. Click New > Component > List Presentation.
__ d. In the Name field, enter: List Presentation
__ e. Go to the List Paging Options section and change the Results per page field to 1.
__ f. Go to the List Presentation Markup section. In the Result design 1 field, add a
placeholder tag to display the title within a <h2> tag. In the field, enter the following
markup:
<h2></h2>
__ g. Place your cursor between the two tags and click Insert Tag.
__ h. In the Insert a Tag pane, make the following changes:
- For the Select a tag type field, select Placeholder.
- Keep all remaining defaults and click OK. This step adds the component line in the
markup.
__ i. On the next line, add an element tag to display the body element. Click Insert Tag.
V10.1
Student Exercises
EXempty __ j. In the Insert a Tag pane, make the following changes:

- For the Select a tag type field, select Element.
- For the Select source item type field, keep the default Content.
- For the Select item context field, select Autofill.
- Click Select authoring template.
- Select News authoring template and click OK.
- For the Select the element to reference field, keep the default Body.
- Verify your changes. When completed, click OK.
__ k. Examine the markup in the Result design 1 field.

Student Exercises
Section 11. Creating a menu component

In this section, you create a menu component named Featured Home Page.
__ 1. Create a menu component.
__ a. Click New > Component > Menu.
__ b. In the Name field, enter: Featured Home Page
__ c. In the Menu Criteria section, select the box next to Authoring Templates and
Categories.
__ d. Go to the Authoring Templates section and click Add Authoring Templates.
__ e. Select the box next to the News content template and click OK.
__ f. In the Categories section, click Add Categories.
__ g. Click All Categories > Feature Article.
__ h. Select the box next to Home Page Feature and click OK.
__ i. Examine the results of the changes.
__ j. Go to the Menu design properties section. For Formatting, select Use a list
presentation.
__ k. Click Select List Presentation.
V10.1
Student Exercises
EXempty __ l. Select List Presentation and click OK.

__ m. Click Save and Close.
__ 2. Edit the News and Community site area. Replace the current body field text content with a
component tag that references the Featured Home Page menu.
__ b. Click Content > Home.
__ c. Select the box next to News & Community and click Edit.
__ d. Go to Body section. In the Body field, delete the current markup that you added in an
earlier exercise.
- Select Featured Home Page and click OK.
Reminder

__ 3. Verify the page results.

Student Exercises
__ b. Click News & Community. The content of the featured Home Page is now displayed.
You can see News & Community 1 listed.
__ c. Log out of WebSphere Portal.
End of exercise
V10.1
Student Exercises

In this exercise, you created a user name and personalization components, and a taxonomy and
various categories.

Student Exercises
V10.1
Student Exercises
EXempty
Exercise 7. Custom authoring features
Estimated time
01:15

In this exercise, you work with inline editing and custom authoring systems.

• Customize the editor, user roles, and portal pages
• Define authoring system access strategies and roles and access rights
• Perform inline editing
Introduction
In Section 1 of this exercise, you add buttons to create, modify, or delete
content. These inline buttons allow people with the appropriate authorization
to author content conveniently.
In Section 2, you create and configure a page to Manage Content.
In Section 3, you create and configure a page for writers.
In Section 4, you verify access to the different authoring environments that
you created.
In Section 5, you create a default authoring template for writers.
In Section 6, you update the authoring template that you created. You specify
which fields are included and which are hidden.
Requirements
To complete this exercise, you must complete:
• Exercises 1 - 6
© Copyright IBM Corp. 2015 Exercise 7. Custom authoring features 7-1

Student Exercises
Section 1. Create an authoring tool component

__ 2. Go to the authoring portlet: Application Menu > Content.
__ 3. Select the Web Content Authoring tab.
__ 4. In the Library Explorer, click Training.
__ 5. Create an authoring tool component.
__ a. Click New > Component > Authoring Tools.
__ b. Name it Authoring Tool - for Current Item.

__ c. Under New Action properties:
• Under heading Authoring Template, select Selected.
• Click Select Authoring Template and select Topics.
__ d. Click OK.
__ e. Add the following markup to the specified design sections. You are not adding text in
every possible field so be careful to find the correct fields.
V10.1
Student Exercises
EXempty • New action design: <a href="[Placeholder tag="href"]">New</a>
• Edit action design: <a href="[Placeholder tag="href"]">Edit</a>

• Delete action design: <a href="[Placeholder tag="href"]">Delete</a>
__ f. In the Presentation Options, add this markup to the specified sections:
• Header:   |
• Separator:   |
__ 6. Now edit the previously created Breadcrumb navigation component to use the authoring
component.
__ a. Go to Applications > Content > Web Content Authoring > Libraries > Training >
Components.
__ b. Check the box next to Breadcrumb and click Edit.
__ c. Within the Breadcrumb item, find the Footer section.
__ d. Place the cursor before the existing text in the Footer section.
__ e. Click Insert a Tag.

• Select a tag type: Component
• Select a library component: Authoring Tool - for Current Item

Student Exercises
• Click OK twice.
__ f. Verify that you see the component tag before the </div>. Click Save and Close.
Note
Your component ID is different than the one shown in the screen capture.
__ 7. Test the new authoring tool.

__ a. Click Site (globe icon) > Home.
__ b. Select Our Company.
V10.1
Student Exercises
EXempty __ c. Notice that the breadcrumb has authoring buttons.
__ d. Click Edit and modify the text on this page. In this example, the word MODIFIED was
added to the text on Our Company. The screen capture shows a successful example
of modifying the text by using the Edit capability.

Student Exercises
__ 8. Verify that the authoring tools appear on other pages.

__ a. On the right side of the page, click Our Company 5.
__ b. Verify that the authoring tools appear on this page.
__ 9. Verify page creation.

__ a. Click New.
__ b. Name the entity My New Page.
__ d. Click My New Page. Verify that the new page appears.
__ e. Click Delete and confirm.

__ f. Verify that the page is gone.
V10.1
Student Exercises
EXempty Section 2. Create an authoring environment for site managers

__ 1. Log in as user ID wpsadmin and password wpsadmin.
__ 2. Look at the Applications menu so you can recognize the changes later on. Notice that the
menu has six options. In later instructions, you disable this menu and create custom
environments.
__ 3. Deactivate the Applications page.

__ a. Click Administration menu (the wrench icon) > Portal User Interface.
__ b. Click Manage Pages.
__ c. Click Content Root.
__ d. Locate the Applications page in the list.

Student Exercises
__ e. Click Active corresponding to Applications. A new window opens.
__ f. Click OK to confirm that you want to deactivate Applications.

__ g. Verify that the Applications row says Inactive.
__ h. Look at the Applications menu and notice the options that you saw in Step 2 are no
longer available.
__ 4. Create a custom page.

__ a. Verify that you are at Content Root.
__ b. Click New Page.
__ c. Enter Manage Content in the Title field.
V10.1
Student Exercises
EXempty __ d. Expand Type of Page. Select Standard Portal Layout.
__ e. Click Set page layout properties and select the One Column layout.
__ f. Click OK to confirm the layout choice, and click OK again to save the page.
__ g. Click the Edit Page Properties icon for the Manage Content row. The icon looks like a
page with the upper right corner folded.
__ h. On the Edit page: Manage Content page, expand Advanced options. Click I want to
set parameters.
__ i. Enter the following parameter and value and click Add.

• New parameter: resourceaggregation.profile

Student Exercises
• New value: profiles/profile_wcmauthoring.json
__ j. Verify that the parameter appears in the list.
__ k. Click OK and OK.

__ 5. Now you set permissions for the new page.
__ a. For the Manage Content page, click Set Page Permissions (the key icon).
__ b. For the User role, click Edit Role (the pencil icon).
V10.1
Student Exercises
EXempty __ c. Click Search and check the Designers group.
__ d. Click OK.
__ e. Click Manage Content in the breadcrumb trail, and then click Done.
__ 6. Now you edit the layout of the page.
__ a. Click the Edit Page Layout (pencil icon) of the Manage Content page.

Student Exercises
__ b. Click Add portlets.
__ c. Type web in the search field, click Search and select the Web Content Authoring
portlet.
__ d. Click OK.
V10.1
Student Exercises
EXempty __ e. Click Done.
__ f. Click Open Site menu > Manage Content.
__ g. From the Edit Mode selector, click the edit mode toggle to turn on editing.

Student Exercises
__ h. Go to Display portlet menu and click Edit Shared Settings.
__ 7. Expand the Library Selection section.

__ 8. Select the Training library. Click Add. Verify that Training is in the Selected LIbraries
column.
V10.1
Student Exercises
EXempty __ 9. Remove any other libraries from the Selected Libraries list. Select each other library and
click Remove. Verify that the library moves to the Available Libraries column.

Student Exercises
__ 10. Expand the User Interface Options section. Select the following options.
• Navigation bar visibility: Hide when the home page or launch page is open
• Default view: Home Page
__ 11. Click OK.

V10.1
Student Exercises
EXempty Section 3. Creating an authoring environment for writers
Information
This section is similar to Section 2 except the authoring environment is for writers. The procedures
are the same but some values are different.
__ 1. Create a page.
__ a. Click Administration menu (the wrench icon) > Portal User Interface > Manage
Pages.
__ b. Click Content Root, if you are not there already.
__ c. Click New Page.
__ d. Enter Write Content in the Title field.
__ e. Under Type of Page, select Standard Portal Layout.
__ f. Click Set Page Layout Properties and select the One Column layout.
__ g. Click OK to confirm the layout choice, and click OK again to save the page.
__ 2. Configure Advanced Options.
__ a. On the Write Content page, click the Edit Page Properties icon.
__ b. Under Advanced options, click I want to set parameters.
__ c. Add the following parameter and value:
• New parameter: resourceaggregation.profile
• New value: profiles/profile_wcmauthoring.json
__ d. Click Add.
__ e. Click OK and OK again.
__ 3. Configure permissions.
__ a. For the Write Content page, click Set Page Permissions (the key icon).
__ b. Check the Edit Role icon for the User role.
__ c. On the Resource Permissions pane, click Add.
__ d. Click Search so all groups are shown.
__ e. Select the Writers and Legal groups.
__ f. Click OK.
__ g. Click Write Content in the breadcrumb trail, and then click Done.
__ 4. Now edit the Page Layout of the Write Content page.
__ a. For the Write Content page, click the Edit Page Layout (pencil icon).

Student Exercises
__ b. Click Add portlets.

__ c. Type web in the search field, click Search.
__ d. Select the Web Content Authoring portlet.
__ e. Click OK.
__ f. Click Done.
__ 5. Go to the Write Content page. Click Site menu > Write Content.
__ 6. From the Edit Mode selector, click the edit mode toggle to turn on editing.
__ 7. Go to Display portlet menu and click Edit Shared Settings.
__ 8. From the Library Selection section, select the Training library.
__ 9. Remove any other libraries from the Selected Libraries list.
V10.1
Student Exercises
EXempty __ 10. From under the User Interface Options section, select the following options:
• Navigation bar visibility: Hide
• Default view: Basic Home Page
__ 11. Click OK.


Student Exercises
Section 4. Testing access

__ 1. Log in as Designer with password Designer.
__ 2. Go to the Site menu and verify that:
• You do not see the Write Content page
• You do see the Manage Content page
__ 3. Click Manage Content. The home page view is displayed by default. Page down to see
Web Content Activity.
__ 5. Log in as Writer with password Writer.
__ 6. Go to the Site menu and verify that
• You do not see the Manage Content page
• You do see the Write Content page.
V10.1
Student Exercises
EXempty __ 7. Click the Write Content page and verify that the home page view is displayed by default.

Student Exercises
Section 5. Setting default authoring templates for writers

__ 1. Open a new browser window. In Mozilla Firefox, click the plus sign next to existing tabs to
open a browser window.
__ 2. Go to the WebSphere Application Server administrative console:
http://localhost:10038/admin
__ 3. Log in with user ID wpsadmin and password wpsadmin.
__ 4. Go to Resources > Resource Environment > Resource Environment Providers.
__ 5. Check th WCM WCMConfigService. Click the name to open it.
__ 6. On the right, under Additional Properties, click Custom properties.
V10.1
Student Exercises
EXempty __ 7. On the Custom properties pane, click New.
__ 8. Enter wcm.authoringui.homePageTemplates in the Name field.

__ 9. Enter the following values in the Value field:
Training/News:Training/Events:Training/Topics
__ 10. Click OK.

Student Exercises
__ 11. Click Save.
__ 12. Verify that the custom configuration parameter is correct. The newest entry is most likely at
the end of the list on page 3.
__ 13. Log out of the admin console and close the browser tab.
V10.1
Student Exercises
EXempty Section 6. Updating the authoring templates for writers

__ 1. Log in to the WebSphere Portal as Designer with the password Designer.
Note
In the last section, you used the WebSphere Application Server administrative console. In this
section, you are again using WebSphere Portal.
__ 2. Go to Site > Manage Content and Open the Library Explorer.

Student Exercises
__ 3. Go to Libraries > Training > Authoring Templates.
__ 4. Select the Events authoring template and click Edit.
V10.1
Student Exercises
EXempty __ 5. Enter some text in the description field. This text appears on the button in the basic home
page, so make it something that applies to your writers.
__ 6. Under Item Properties, do the following steps:

__ a. Under Location options, select Selected locations.

Student Exercises
__ b. Click Add.
__ c. Select Home > News & Community.

__ d. Check the box next to Events.
__ e. Click OK.
V10.1
Student Exercises
EXempty __ f. Verify that the Events site is listed.
__ 7. Simplify the form:

__ a. Under Form Properties, select the Item form layout of No sections.
__ b. Under Select which actions to hide, check the box to hide all buttons except:
- Save
- Save and Close

Student Exercises
- Preview
__ c. Under Item form help text, add some help text for your writers to complete the form.
__ 8. Go to the Default Content tab at the top.
V10.1
Student Exercises
EXempty __ 9. Edit the Name field properties by clicking the properties icon:
__ a. Select Hide field.

__ b. Select Generate name. Field will not be editable when visible.
__ c. Click Done.

Student Exercises
__ 10. Also, check Hide field for the fields that are listed. After checking Hide field, click Done.
__ a. Click the Description field properties icon.
__ b. Check Hide field.
__ c. Click the down arrow beside Save and Close and select Save at the bottom of the
pane.
__ 11. Hide all the fields on the Default Content Properties tab.
__ a. Expand the Type field properties.

__ c. Click Done.
__ d. On the Default Content Properties tab, expand the Location field properties.
__ e. Check Hide field.
V10.1
Student Exercises
EXempty __ f. Click Done.
__ g. Still on the Default Content Properties tab, expand the UUID field properties.
__ h. Check Hide field.
__ i. Click Done.
__ j. Still on the Default Content Properties tab, expand the Authors field properties.
__ k. Check Hide field.
__ l. Click Done.
__ m. Still on the Default Content Properties tab, expand the Owners field properties.
__ n. Check Hide field.

Student Exercises
__ o. Click Done.
__ p. Still on the Default Content Properties tab, expand the the Content Properties
section.
__ q. Check Hide section.
__ r. Click Save.
__ s. Still on the Default Content Properties tab, expand the Profile section.
__ t. Check Hide section.
__ u. Click Save.
__ v. Still on the Default Content Properties tab, open the Workflow section.
__ w. Check Hide section.
__ x. Click Save.
__ y. Still on the Default Content Properties tab, expand the Access section.
__ z. Check Hide section.
V10.1
Student Exercises
EXempty __ aa. Click Save.

__ ab. Still on the Default Content Properties tab, expand the History section.
__ ac. Check Hide section
__ ad. Click Save.
__ ae. Click Save and Close.

__ 12. Edit the News authoring template in a similar way.
__ a. Check the News authoring template and click Edit.
__ b. On the Content Template tab, expand Item Properties.
__ c. In the Item Properties section, find the Location options section. Select Selected
locations. Click Add.
__ d. Check Training/Home/News and Community as the selected site area for the News
template. Click OK.
__ 13. Modify the rest of the template as you did in for the Events template.
__ a. In the Form Properties section, for Item form layout, select No sections.

Student Exercises
__ b. Under Select which actions to hide, check the box to hide all buttons except: Save,
Save and Close, and Preview.
__ c. Under Item form help text, add some help text for your writers to complete the form.
Note
At any time, you can select Save to preserve your changes.
V10.1
Student Exercises
EXempty __ 14. Select the Default Content tab at the top.
__ a. Edit the Name field properties by clicking the Name field properties icon.
__ b. On the Name field properties pane, check Hide field.

Student Exercises
__ c. Select Generate name. Field will not be editable when visible.
__ d. Click Done.
__ e. Back on the Default Content tab, click the Description field properties icon.
V10.1
Student Exercises
EXempty __ f. Check Hide field.
__ 15. Select the Default Content Properties tab,
__ a. Click the Type field properties icon.

Student Exercises
__ b. On the Type field properties pane, check Hide field.
__ c. Click Done.
__ d. Still on the Default Content Properties tab, expand the Location field properties.
__ f. Click Done.
__ g. Still on the Default Content Properties tab, expand the UUID

V10.1
Student Exercises
EXempty __ i. Click Done.
__ j. Still on the Default Content Properties tab, expand the Authors field properties.
__ l. Click Done.
__ m. Still on the Default Content Properties tab, expand the Owners field properties.

Student Exercises
__ o. Click Done.
__ p. Still on the Default Content Properties tab, expand the Content Properties section.
__ r. Still on the Default Content Properties tab, expand the Profile section.
V10.1
Student Exercises
EXempty __ s. Check Hide section.
__ t. Still on the Default Content Properties tab, expand the Workflow section.
__ u. Check Hide section.
__ v. Still on the Default Content Properties tab, expand the Access section.
__ x. Still on the Default Content Properties tab, expand the History section.
__ y. Check Hide section.
__ z. Click Save and Close.

__ 16. Modify the Topics authoring template.
__ a. Go to Libraries > Training > Authoring Templates. Check the box to the left of the
Topics Authoring Template. Click Edit.
__ b. On the Content Template tab, expand the Item Properties section. For Location
options, verify that All available locations is selected.

Student Exercises
__ c. Simplify the form. Under Form Properties, select the Item form layout of No sections.
__ d. Under Select which actions to hide, check the box to hide all buttons except: Save,
Save and Close, and Preview.
__ e. Under Item form help text, add some help text for your writers to complete the form.
V10.1
Student Exercises
EXempty __ 17. Go to the Default Content tab on the Topics authoring template.
__ a. Edit the Name properties by clicking the Name field properties icon:

Student Exercises
__ b. Select Hide field and Generate name. Field with not be editable when visible.
__ c. Click Done.
__ d. On the Default Content tab, expand the Description field properties. Check Hide
field.
__ 18. Go to the Default Content Properties tab.

__ a. Expand the Type field properties.
V10.1
Student Exercises
EXempty __ c. Click Done.
__ d. On the Default Content Properties tab, expand the Location field properties.
__ f. Click Done.
__ g. On the Default Content Properties tab, expand the UUID

__ i. Click Done.
__ j. On the Default Content Properties tab, expand the Authors field properties.

Student Exercises
__ l. Click Done.
__ m. On the Default Content Properties tab, expand the Owners field properties.
V10.1
Student Exercises
EXempty __ o. Click Done.
__ p. On the Default Content Properties tab, expand the Content Properties section.
__ r. Still on the Default Content Properties tab, expand the Profile section.

Student Exercises
__ s. Check Hide section.
__ t. On the Default Content Properties tab, expand the Workflow section.

__ u. Check Hide section.
__ v. On the Default Content Properties tab, expand the Access section.

__ x. On the Default Content Properties tab, expand the History section.

__ y. Check Hide section.
__ z. Click Save and Close.

__ 20. Log in as Writer.
__ 21. Go to Site menu > Write Content.
V10.1
Student Exercises
EXempty __ 22. Click New > Content > Select from all Content Templates.
__ 23. Go to Libraries > Training and select Events. Click OK.

Student Exercises
__ 24. When you create a content item by using these templates, a simple form should be
displayed. Notice that you have two buttons: Save and Close and Close. There are only a
Display title, Body, and Date fields.
__ 25. On the right, click Show help and the help message you entered in the template is shown.
__ 26. Click Save and Close.

End of exercise
V10.1
Student Exercises

In the first section of this exercise, you add buttons to create, modify, or delete content. These inline
buttons allow people with the appropriate authorization to author content conveniently.
In Section 2, you create and configure a page to Manage Content.
In Section 3, you create and configure a page for writers.
In Section 4, you verify access to the different authoring environments that you created.
In Section 5, you create a default authoring template for writers.
In Section 6, you update the authoring template that you created. You specify which fields are
included and, which are hidden.

Student Exercises
V10.1
Student Exercises
EXempty
Exercise 8. Working with drafts, workflows, and
projects
Estimated time
01:30

In this exercise, you learn how to work with drafts and workflows, and how to
create projects.

• Create and work with project templates
• Assign approvers for a project
• Work with draft items
• Publish items
• Use projects effectively
• Create content by using a project
• Create a navigator
• Create workflows, workflow actions, and workflow stages
• Process a content item through a workflow
Introduction
Creating a draft of an item allows users to work on changes to that item
without changing the published version of the item. Draft items can either be
stand-alone items, or form part of a workflow. When the changes are
completed, you can choose to either publish the item, or discard the changes
by canceling the draft. You can create multiple drafts of a single item.
Requirements
© Copyright IBM Corp. 2015 Exercise 8. Working with drafts, workflows, and projects 8-1
Student Exercises
Section 1. Creating a draft and publishing it

Creating a draft of an item allows users to work on changes to that item without changing the
published version of the item. Draft items can either be stand-alone items, or form part of a
workflow. When the changes are completed, you can choose to either publish the item, or discard
the changes by canceling the draft.
In this section, you create and publish a draft item.
Hint

Log in.
__ 2. Create a draft.
__ a. Click the Open site menu icon and click Manage Content.
__ b. Click Open the Library Explorer.
V10.1
Student Exercises
EXempty __ c. Click Training > Presentation Templates.

__ d. Select the box next to Landing - Internet and click Edit.
__ e. Click the small down-arrow to the right of Save and Close. and click Save as Draft.
__ f. After the draft is created, click Edit.

__ g. Go to the Presentation Template Options section. Go to the end of the Presentation
Markup field and enter a blank line.
__ h. Click Insert Tag.
Student Exercises
__ i. In the Insert a Tag pane, make the following changes:

- For the Select a tag type field, select Property.
- For the Select a property field field, select Last Modified Date.
- For the Select source item type field, select Auto.
- For the Select item context field, keep the default setting Current.
- Verify your changes and examine the tag that is to be added to the markup.
- When completed, click OK.

__ j. The following markup is added to the field:
[Property key=”” type="auto" context="current" field="lastmodifieddate"]
Replace the line with the following markup:
<div> Last modified on: [Property key=”” type="auto" context="current"
field="lastmodifieddate"]</div>
__ k. Click the small down-arrow to the right of Save and Close and click Save. Do not click
Save and Close. You want to save the changes, but remain on the page and not close
the page.
__ 3. Preview and publish the page.
__ a. Click Preview.
__ b. Select the radio button next to the Home site area.
V10.1
Student Exercises
EXempty __ c. Click OK. The last modified text is now displayed on the preview page.
__ d. Close the preview window.

__ e. Now look at the Home page in your Portal site. Click the Open site menu icon and click
Home. The last modified date is not displayed.
__ f. Click the Open site menu icon and click Manage Content.
__ g. You are placed in the draft Landing - Internet template. Click the small down-arrow to the
right of Save and Close and click Save and Publish.
__ h. Click Close.
Student Exercises
__ i. Now look at the Home page in your Portal site. Click the Open site menu icon and click
Home. The last modified text is now displayed on the published item.
V10.1
Student Exercises
EXempty Section 2. Creating workflow actions

You use workflows to control the access to, verification, and eventual approval of items. Workflow
stages are the building blocks of a workflow. You need to create at least one stage before you can
create a workflow.
Each workflow stage contains sets of actions; actions that are run when an item enters the stage,
and actions run when an item exits the stage. The exit actions are restricted to non-scheduled
actions, since they must be run immediately.
Over the next three sections, a workflow is created. The following information defines the workflow
stages, actions, and security:
Stages Action Workflow security
Grant the Writers group Editor and Reviewer
Draft Not required
access and disable inheritance for those roles.
Grant the Legal group Editor and Reviewer
Approval Not required
access and disable inheritance for those roles.
Publish Publish action (on entering stage) Inherited
Expire Expire action (on entering stage) Inherited
__ 1. Create two workflow actions.
__ b. In the breadcrumb trail, click Training.
__ c. Click Workflow Items > Workflow Actions.
__ d. Click New > Workflow Actions > Publish Action.
__ e. In the Name field, enter: Publish
__ g. Click New > Workflow Actions > Expire Action.
__ h. In the Name field, enter: Expire
Student Exercises
__ j. You can now see the two workflow actions.
Information
An item is published when it enters a workflow stage that contains a publish action, and when the
selected published date and time are reached.
An item is expired when it enters a workflow stage that contains an expire action, and when the
selected expire date and time are reached.
V10.1
Student Exercises
EXempty Section 3. Creating workflow stages

Stages determine what actions to run when an item enters or exits a workflow stage and the access
levels of users or groups within that stage. In most cases, actions are run when an item enters a
stage.
In this section, you create four workflow stages.
__ 1. Create a workflow stage named Publish.
__ a. Click New > Workflow Stage.
__ b. In the Name field, enter: Publish
__ c. Go to the Workflow Stage Properties section. Next to the Run on Entering Stage field,
click Add Workflow Actions.
__ d. Select the box next to Publish and click OK.

__ 2. Create a workflow stage named Expire.
__ b. In the Name field, enter: Expire
__ c. Go to the Workflow Stage Properties section. Next to Run on Entering Stage, click Add
Workflow Actions.
__ d. Select the box next to Expire and click OK.
__ 3. Create a workflow stage named Draft. This stage does not have any action, but it does have
security.
Student Exercises
Note
Not all stages require selection of workflow actions. When you create the approval and draft stages,
change the workflow security settings.

__ b. In the Name field, enter: Draft
__ c. Expand the Workflow Defined Access section.
__ d. For the Editor role, clear the box under Inheritance.
__ e. Next to the Editor role, click Grant Editor Access.

__ f. In the Search field, enter: Writers
__ g. Click Search.
__ h. In the Search results field, select Writers and click Add.
V10.1
Student Exercises
EXempty __ i. This moves the group to the Selected names field. When completed, click OK.
__ j. For the Reviewer role, clear the box under Inheritance.

__ k. Next to the Reviewer role, click Grant Reviewer Access.
__ l. In the Search field, enter: Writers
__ m. Click Search.
__ n. In the Search results field, select Writers and click Add. This moves the group to the
Selected names field.
__ o. Click OK.
Student Exercises
__ p. Verify the changes in the roles and access.
__ q. Click Save and Close.

__ 4. Create a workflow stage named Approval. This stage does not have any action, but it does
have security.
__ b. In the Name field, enter: Approval
__ c. Expand the Workflow Defined Access section.
__ d. For the Editor role, clear the box under Inheritance.
__ e. Next to the Editor role, click Grant Editor Access.
__ f. In the Search field, enter: Legal
__ g. Click Search.
V10.1
Student Exercises
EXempty __ h. In the Search results field, select the Legal group and click Add. This moves the group
to the Selected names field. Make sure that you select the Legal group and not the
Legal user. The group icon has three people associated with it.
__ i. Click OK.
__ j. For the Reviewer role, clear the box under Inheritance.
__ k. Next to the Reviewer role, click Grant Reviewer Access.
__ l. In the Search field, enter: Legal
__ m. Click Search.
__ n. In the Search results field, select Legal and click Add. This moves the group to the
Selected names field. Make sure that you select the Legal group and not the Legal user.
The group icon has three people associated with it.
__ o. Click OK.
__ p. Click Save and Close.
Student Exercises
Section 4. Creating a workflow

You can manage changes to web content items either by creating drafts, by using workflows, or
adding items to projects.
A workflow must have at least one stage, but typically has more, and it always flows in a linear
pattern. You can use a workflow to:
• Review the accuracy of content.
• Review content for any legal implications.
• Review content to ensure that it meets accessibility guidelines.
• Ensure that no malicious code such as cross scripting attacks are added to content.
In this section, you create a workflow named Standard - Published.
__ 1. Create a workflow.
__ a. In the breadcrumb trail, click Workflow Items.
__ b. Click Workflows.
__ c. Click New > Workflow.
__ d. In the Name field, enter: Standard - Published
__ e. Go to the Workflow Properties section. Next to Workflow Stages, click Add Workflow
Stages.
__ f. Select the box next to all four of the stages and click OK.
V10.1
Student Exercises
EXempty __ g. Use the up and down arrows to change the order of the stages to match the following
list:
- Training / Draft
- Training / Approval
- Training / Publish
- Training / Expire
Student Exercises
Section 5. Updating the News template

In this section, you update the News template.
__ 1. Update the News template.
__ c. Select the box next to News and click Edit.
__ d. Click the Default Content Properties tab.
__ e. Expand the Workflow section.
__ f. Select the box next to Enable workflow for items created with this authoring
template.
__ g. Next to Default Workflow, click Select Workflow.
__ h. Select Standard - Published and click OK.
V10.1
Student Exercises
EXempty __ i. Verify that the Default Workflow is set to Training / Standard - Published.

__ k. Logout of WebSphere Portal.
Student Exercises
Section 6. Processing a content item through a workflow

__ 1. Log in to WebSphere Portal as Writer.
__ b. In the login area, enter Writer as the user ID and Writer as the password. Click Log
in.
__ 2. Create a content item by using the News authoring template.
__ a. Click the Open site menu icon and click Write Content.
__ b. Click New > Content > Select from all Content Templates.
__ c. Click Training.
__ d. Select News and click OK.
__ e. For the Display title field, enter: Workflow News
__ f. Verify that the Location field is set to: Training / Home / News & Community
(Last child)
__ g. In the Body field, enter the following text: Workflow News content here
V10.1
Student Exercises
EXempty __ i. Back on the Write Content page, click My Recent Items.
__ j. You can see that Workflow News is saved with a status of draft.
__ k. Click the Open site menu icon and click Home.
Student Exercises
__ l. Click News & Community. Look at both pages of your content. The Workflow News
item should not be visible in the list of News topics.
__ m. Click the Open site menu icon and click Write Content.
__ n. Click Workflow News to open it in read mode.
__ o. Click Submit for Review.
__ p. You can see a message that indicates Workflow News is moved to the next stage. Click
Close.
__ q. Logout of WebSphere Portal.
__ 3. Log in to WebSphere Portal as Legal.
__ b. In the login area, enter Legal as the user ID and Legal as the password. Click Log in.
__ 4. Approve the content item.
V10.1
Student Exercises
EXempty __ c. In the navigation pane on the left, click Personal Views > My Pending Approvals.
__ d. The Workflow News item should be in your list of items that are pending approval. To
approve the item, select the box next to Workflow News and then click More >
Approve.
Student Exercises
__ e. Because the item is now approved, it no longer shows in your list of items that are
pending approval. Click the Open site menu icon and click Home.
__ f. On News & Community, go to page 2. The Workflow News item should now be visible in
the Latest News menu.
__ g. Logout of WebSphere Portal.

Log in.
__ 6. Move the content item from a published stage to an expired stage.
__ c. Click Training > Content > Home > News & Community.
__ d. Click Workflow News to open it in read mode.
V10.1
Student Exercises
EXempty __ e. You can see that the status is Published. Click More > Expire to move the item to the
expire stage.
__ f. Verify that the status is now expired.
__ g. Click Close.
__ h. Click the Open site menu icon and click Home.
Student Exercises
__ i. Go to News & Community page 2. The Workflow News item should not be visible in the
Latest News menu. This is due to Workflow News being moved to the expired stage and
expired items do not appear on the published web site.
__ j. Logout of WebSphere Portal.
V10.1
Student Exercises
EXempty Section 7. Creating a project template and a project

Log in.
__ 2. Create a project template.
__ d. Click New > Project Template.
__ e. In the Name field, enter: Site Update Approval
__ f. Expand the Approval section.
__ g. Next to Approvers, click Add.
__ h. In the Search field, enter: Legal
__ i. Click Search.
__ j. In the Search results field, select the Legal group and click Add. This step moves the
group to the Selected names field. Make sure that you select the Legal group and not
the Legal user. The group icon has three people who are associated with it.
Student Exercises
__ k. Click OK.
__ l. Go to the Properties tab.
__ m. Expand the Access section.
__ n. Next to Contributor, click Grant Contributor Access.
__ o. In the Search results field, select the Legal group and click Add. This step moves the
__ p. Click OK.
V10.1
Student Exercises
EXempty __ 3. Examine the project template.

__ a. In the navigation pane on the left, click Project Views > Project Templates. You should
see the Site Update Approval project template listed.
__ 4. Create a project named Add HR Policies Sections.

__ a. Click New > Project > WebContent Projects / Site Update Approval.
__ b. In the Name field, enter: Add HR Policies Sections
__ c. Go to the Publish Option section. For Publish Option, select Automatic.
__ d. Go to the Properties tab.
__ e. Expand the Access section.
__ f. Next to Contributor, click Grant Contributor Access.
Student Exercises
__ g. In the Search results field, select the Legal group and click Add. This step moves the
Information
In the project template that you created, you added Legal as an Approver. If you do not also give
Legal Contributor access to the project, Legal is able to approve the project, but cannot see a list of
project items. The project items list is invisible to Legal due to a security issue.
__ h. Click the small down-arrow to the right of Save and Close, and click Save. Do not click
the page.
V10.1
Student Exercises
EXempty Section 8. Working with a project

__ 1. Work with a project.
__ a. You are still in the Add HR Policies Sections form from the previous section. Click the
Project tab.
__ b. Go to the Project Items section and click New > Authoring Template > Content
Template.
__ c. In the Name field, enter: HR Policy

__ d. In the Location section, click Select Location.
__ e. Select the radio button next to Training and click OK.
__ f. Click Manage Elements.
Student Exercises
__ g. In the Element Manager pane, make the following changes:

- For the Element type field, select File.
- In the Name field, enter: PDF
- Click Add.
- Verify that you see the File Element type and click OK.
__ h. Go to the Item Properties section. For the Rendering type field, select Resource.
__ i. Click the Default Content Properties tab.
__ j. Expand the Workflow section.
__ k. Clear the box next to Enable workflow for items created with this authoring
template.
V10.1
Student Exercises
EXempty __ m. In the Add HR Policies Sections project form, go to the Project Items section. You should
see the HR Policy listed.
Note
When opened, a resource-rendering content item starts the file that is specified in the File Element,
a PDF in this case, instead of using a presentation template to display its content.
__ 2. Create a site area template.

__ a. In the Project Items section, click New > Authoring Template > Site Area Template.
__ b. In the Name field, enter: HR Policy Section
__ c. In the Location section, click Select Location.
__ d. Select the radio button next to Training and click OK.
__ e. Go to the Item Properties section. For the Child restriction options field, select the box
next to Restrict allowed authoring templates.
__ f. Click Add.
__ g. Select the box next to HR Policy and click OK.
Student Exercises
__ h. You should see the HR Policy authoring template listed. Select the HR Policy authoring
template in the Child restriction options.
__ i. Click the Default Site Area tab.

__ j. Expand the Site Area Properties section.
__ k. In the Rendering Behavior field, select Render the site area directly.
__ 3. Create a site area from a template.
__ a. In the Project Items section, click New > Site Area > Select from all Site Area
Templates.
__ b. Select HR Policy Section and click OK.
__ c. In the Name field, enter: Leave
__ d. In the Location section, click Select Location.
__ e. If needed, click Home.
__ f. Select the radio button next to Business Support and click OK.
__ h. Repeat step three to create two extra site areas, Pay and Work.
V10.1
Student Exercises
EXempty __ i. Verify the list of Project Items. You should see Leave, Pay, and Work added to the list.
__ 4. Add the Home site area to the project.

__ a. Click Add.
__ c. Select the box next to the Home site area and click Finish.
__ d. You get a message that indicates that Home is added to the project Add HR Policies
Section. Click Close to close the window.
Student Exercises
__ 5. Edit the Home site area.

__ a. You can see that Home is now in the list of Project Items. Next, you need to edit the
Home site area. Click Home.
__ b. Click Edit.
__ d. You currently have five template mappings listed. Click Add.
__ e. Select the radio button next to HR Policy Section as the authoring template.
__ f. In the Presentation Templates section, select the radio button next to Landing -
Internet.
Authoring Template Training / HR Policy Section, is mapped to the Presentation
Template Training / Landing - Internet. Now, you have six template mappings.
__ h. Click Add.
__ i. Select the radio button next to HR Policy as the authoring template.
__ j. In the Presentation Templates section, select the radio button next to Landing -
Internet.
__ k. Click OK. This step maps the authoring template and presentation template together.
Authoring Template Training / HR Policy, is mapped to the Presentation Template
Training / Landing - Internet. Now, you have seven template mappings.
__ l. Click OK.
V10.1
Student Exercises
EXempty __ m. Examine the mappings. You can see the two new mappings added to the list.
__ n. Click Save and Close.

__ 6. Approve the items.
__ a. Select all of the items in the project and click More > Approve.
__ b. All of the items in the project should now have a status of Publish Pending.
__ c. Logout of WebSphere Portal.
Student Exercises
Section 9. Approving a project

__ 1. Log in to WebSphere Portal as Legal.
__ b. In the login area, enter Legal as the user ID and Legal as the password. Click Log in.
__ 2. Approve a project.
__ c. In the navigation pane on the left, click Project Views > All Projects.
__ d. Click Add HR Policies Sections to open the project in read mode.
__ e. Go to the Project Items section. You can see the status for the Project Items is Publish
Pending.
__ f. At the top of the page, click Approve Project.
V10.1
Student Exercises
EXempty __ g. Go to the Project Items section. All of the items might still have a status of Publish
Pending. Wait a few moments and click Refresh. The items in the project should have a
status of Published. If not, click refresh again.
__ h. Click Close.
__ i. Logout of WebSphere Portal.
Student Exercises
Section 10. Creating a second project

Log in.
__ 2. Create a second project.
__ b. Click New > Project > Default Project Template.
__ c. In the Name field, enter: Add HR Policies

__ d. Go to the Publish Option section. For Publish Option, select Automatic.
__ e. Click the small down-arrow to the right of Save and Close. and click Save. Do not click
the page.
V10.1
Student Exercises
EXempty Section 11. Creating content by using a project

__ 1. Create content by using a project: Leave.
__ a. In the Add HR Policies project form, go to the Project Items section. Click New >
Content > Training / HR Policy.
__ b. In the Name field, enter: Leave HR Policy 1
__ c. In the Location field, click Select Location.
__ d. Click Training > Home > Business Support.
__ e. Select the radio button next to Leave and click OK.
__ f. Verify that the location is set to Training / Home /Business Support / Leave (Last child).
__ g. Go to the PDF section. Next to the File field, click Upload.
__ h. Go to C:\Labfiles\Lab_Resources\Sample PDFs\ and select HR Resource 01.pdf.
Then, click Open.
__ 2. Create content by using a project. Pay.
__ a. In the Add HR Policies project form, click New > Content > Training / HR Policy.
__ b. In the Name field, enter: Pay HR Policy 1
__ c. In the Location field, Select Location.
__ e. Select the radio button next to Pay and click OK.
__ f. Verify that the location is set to Training / Home /Business Support / Pay (Last child).
Then, click Open.
__ 3. Create content by using a project: Work.
__ a. In the Add HR Policies project form, click New > Content > Training / HR Policy.
__ b. In the Name field, enter: Work HR Policy 1
__ e. Select the radio button next to Work and click OK.
__ f. Verify that the location is set to Training / Home /Business Support / Work (Last child).
Then, click Open.
Student Exercises

__ j. Go to the Project Items section. Verify that you have three items listed.
__ 4. Create a content item by using the Topics template.

__ a. In the Add HR Policies project form, click New > Content > Training / Topics.
__ b. In the Name field, enter: HR Policies
__ d. Try to save the item under Leave. If your authoring template restrictions are working, it
should be impossible. Due to the restriction, save it under Business Support instead.
Select the radio button next to Business Support and click OK.
__ e. Verify your location setting. Then, click Save and Close.
__ 5. Examine the details.
__ b. Click Business Support.
V10.1
Student Exercises
EXempty __ c. Go to page 2. The HR Policies page should not be visible.
__ 6. Preview the project item.

__ b. You are placed back in the Add HR Policies project. Go to the Project Items section.
Select the box next to HR Policies and click Preview.
In the preview window, you can see HR Policies. This result means that while items are
in draft form in a project, you can preview the item from within the project. They display
as if they are in the site. But if you go directly to the site, the items do not display.
__ c. Close the preview window.
Student Exercises
Section 12. Creating a navigator component

__ 1. Create a navigator component inside the Add HR Policies project.
__ a. In the Add HR Policies project form, click New > Component > Navigator.
__ b. In the Name field, enter: HR Policies
__ d. Select the radio button next to Training and click OK.
__ e. Go to the Navigator Options section. In the Start Type field, select Selected.
__ f. In the Selected Start Area field, click Select Start Area.
__ g. Click Home. Then, select the radio button next to Business Support and click OK.
__ h. In the Descendant Level field, select All.
__ i. Go to the List Paging Options section. In the Results per page field, enter: 100
__ j. Go to the List Presentation Markup section. Select the box next to Show header,
footer, and separator fields for each result design.
__ k. In the Header 1 field, enter the following markup:
<ul><li>
__ l. In the Result design 1 field, enter the following markup:
V10.1
Student Exercises
EXempty __ m. In the Footer 1 field, enter the following markup:

</li></ul>
__ n. In the Separator 1 field, enter the following markup:
</li><li>
__ o. Click Save and Close. You can see the HR Policies navigator in the list of Project Items.
Note the icon for the navigator component.
Student Exercises
__ 2. Edit the HR Policies content item.

__ a. Click the HR Policies content item. Make sure that you click the content item and not
the navigator component.
__ b. Click Edit.
__ c. In the Body field, click the [ ] Insert Tag icon.

- Select HR Policies and click OK.
- Click OK.
__ e. Examine the markup that is added to the Body field.
V10.1
Student Exercises
EXempty __ f. Click Save and Close.

__ 3. Preview the HR Policies content item.
__ a. In the Project Items section, select the box next to HR Policies (content item) and click
Preview. The navigator component should display as an ordered list.
__ b. Click one of the resource-rendering content items under Work, Pay, or Leave. For
example, click Leave HR Policy 1. The PDF document opens in the browser.
__ c. Close the preview page.
__ 4. Approve all of the items in the project.
__ a. Back in the Add HR Policies project, go to the Project Items section.
__ b. Select the box next to all of the Project Items and click More > Approve.
__ c. After you get the message that indicates that all of the items are published, your project
is published. However, the Project Items still have a status of Publish Pending, which
means the screen did not refresh. Click Refresh. The Project items now have a status of
Published. You can see the version information also.
__ d. Click the Open site menu icon and click Home.
__ e. Click Business Support.
__ f. On the right, click HR Policies on page 2. The HR Policies content is now being
displayed on the site. You can see the navigator component which is displayed as an
ordered list.
__ g. Click Leave HR Policy 1. The PDF document opens in the browser.
__ h. Click the back arrow to go back to the Portal page.
__ i. Logout of WebSphere Portal.
Student Exercises
End of exercise
V10.1
Student Exercises

In this exercise, you worked with drafts and workflows, and created various projects.
Student Exercises
V10.1
Student Exercises
EXempty
Exercise 9. User access and security
Estimated time
00:45

In this exercise you add confidential core items, test the access controls,
create confidential content, display confidential content, and test page
access controls.

• Access control layers and control settings
• Manage users and groups in Portal
• Define roles within a library
• Define IBM Web Content Manager roles
• Manage security
Introduction
In this exercise, you gain experience by creating confidential items and then
verify that are, or are not, visible based on user role.
Requirements
To complete this exercise, you must complete:
• Exercises 1 -8
Items are named with a suffix to distinguish the type of entity. Here is a summary of the names and
their corresponding entity type:
• Confidential_SA: Site Area
• Confidential_AT: Authoring Template
• Confidential_PT: Presentation Template
• Menu - Confidential: Menu component
© Copyright IBM Corp. 2015 Exercise 9. User access and security 9-1
Student Exercises
• Confidential: Page peer to Our Company

• Confidential Content 1, Confidential Content 2, Confidential Content 3:
content
V10.1
Student Exercises
EXempty Section 1. Adding confidential core items

__ 1. Log in as Designer with a password of Designer.
__ 2. Create a site area under the Home site area by using the sections site area template.
__ a. Click Site Menu > Manage Content.
__ c. Go to Training > Content > Home.
__ d. Click New > Site Area > Training / Sections.
__ 3. Configure the site area.
__ a. Name the site area Confidential_SA. The initials help you distinguish the site area
from other items.
__ b. Click the Properties tab.
__ c. Go to the Access section and set the following access controls:
• Clear all Inheritance check boxes.
• In the Access section, in the left column, find the row that is labeled Contributor. In the
column that is labeled User Defined, click Grant Contributor Access.
• On the Directory Search pane, type Executives. Be careful to select the group
indicated with an icon of three people, rather than the single user. Click Add to move the
Executives group into the Selected names column. Click OK.
• Then, click Save and Close.
Student Exercises
__ 4. Create and configure a content authoring template.

__ a. On the Libraries > Training > Content > Home pane, click New > Authoring
Template > Content Template.
__ b. Name the content template Confidential_AT.

__ c. In the Item Properties section, under Location options, click Selected locations.
__ d. Under Specify locations to display, click Add.
__ e. Select Training > Home > Confidential_SA site area as the selected location. Click
OK. With this setting, content items that are created by using this authoring template are
always saved in the Confidential_SA site area.
V10.1
Student Exercises
EXempty __ f. On the Properties tab, go to the Access section and set the following access controls:
• Clear all Inheritance check boxes.
• Grant contributor access to the Executives group. Still in the Access section, in the
left column, find the row that is labeled Contributor. In the column that is labeled User
Defined, click Grant Contributor Access.
• On the Directory Search pane, type Executives. Be careful to select the group
__ g. Create Element Manager.

• Click Manage Elements.
• In the Element Manager pane, For Element type, select Rich Text.
• For the Name, type Body.
Student Exercises
• Click Add.
__ h. Verify that you see the Element type listed.Click OK.
V10.1
Student Exercises
EXempty __ i. On the Default Content Properties tab, go to the Workflow section and disable
workflows. Clear the Enable workflow for items that are created with this authoring
template check box.
__ 5. Create a content item based on the Confidential_AT template.
__ a. Select New > Content > Training/Confidential_AT.
Student Exercises
__ b. Name it Confidential Content 1. Provide body content such as All employees

will get pay raises. Notice that the authoring template specifies that this content
item goes into the Confidential_SA site area.

__ d. Verify that the new item was created in Libraries > Training > Content > Home >
Confidential_SA.
V10.1
Student Exercises
EXempty __ 6. Create a presentation template based on the Landing - Internet template.

__ a. Open the Landing - Internet presentation template. Go to Libraries > Training >
Presentation Templates. Check the box by Landing - Internet and click Edit.
__ b. Click the down arrow next to Save and Close and select Save As.
__ c. Name the template Confidential_PT. Type Confidential Presentation

Template for the Display Title. Click OK.
Student Exercises
__ 7. In the presentation template, click the Properties tab. Expand the Access section, and set
the following access controls:
__ a. Clear all Inheritance check boxes.
__ b. Grant contributor access to the Executives group. Still in the Access section, in the
left column, find the row that is labeled Contributor. In the column that is labeled User
Defined, click Grant Contributor Access.
__ c. On the Directory Search pane, type Executives. Be careful to select the group

__ 8. Edit the Confidential_SA site area.Go to Libraries > Training > Content > Home.
Check the Confidential_SA site area and click Edit.
__ a. Click the Manage Template Mappings.
__ b. In the Authoring Templates section, select the Confidential_AT authoring
template.
__ c. In the Presentation Templates section, select the Confidential Presentation
Template. Click OK.
V10.1
Student Exercises
EXempty __ d. On the Manage Template Mappings pane, verify that the Confidential_AT
authoring template is mapped to the Confidential Presentation Template. Click
OK.
__ e. Under Site Area Properties, for the Rendering Behavior, select Render the default
content as a child of this site area.
Student Exercises
__ f. Next to Default Content, click the Select Default Content link. Go to Libraries >
Training > Home > Confidential_SA. Select the Confidential Content 1 content
item that was created earlier. Click OK.
__ g. Verify the changes to the default content.

__ 9. Create a second content item from the Confidential authoring template.
__ a. Go to the Confidential site area: Libraries > Training > Content > Home >
Confidential_SA.
__ b. Create content from the Confidential_AT authoring template by selecting New >
Content > Training/Confidential_AT
V10.1
Student Exercises
EXempty __ c. Provide the Name Confidential Content 2 with some content in the Body field
such as Extra vacation days for everyone.

__ e. Verify that you see two content items in the Confidential_SA site area.
__ 10. Create a menu.

__ a. Go to Training > Components.
Student Exercises
__ b. Select New > Component > Menu.

__ c. Name the component Menu - Confidential.
__ d. In the Menu Criteria section, check Authoring Templates.
__ e. In the Authoring Templates section, click Add Authoring Templates. Select the
Training / Confidential_AT authoring template.
__ f. Add the following markup to the Results design to display links to the confidential
content items. You can copy this text or use the Insert Tag method.
__ g. Add security by clicking the Properties tab.

__ h. In the Access section, clear all Inheritance check boxes.
__ i. For the Contributor role, grant contributor access to the Executives group.
__ 11. Specify the placement of the confidential content.
__ a. Go to Libraries > Training > Components.
__ b. Edit the Right Column HTML component. The components list might be longer than a
page, but it is alphabetical so you can more easily find the component of interest. Check
Right Column HTML component and click Edit.
V10.1
Student Exercises
EXempty __ c. In the HTML Element section, at the end of the HTML Markup field, reference Menu
Confidential by adding this text.
[Component name="Training/Menu – Confidential"]

__ e. Log out of the portal.
Student Exercises
Section 2. Adding a confidential page

__ 1. Log in as wpsadmin, with the password wpsadmin.
__ 2. Add a confidential page.
__ a. Click Site menu > Home.
__ b. Click the Employee Services tab. When you create the new confidential page, the new
page is a sibling to the Employee Services page.
__ c. From the Edit Mode selector in the upper right, click the edit mode toggle to turn on
editing.
__ d. Click Create > Page. I
V10.1
Student Exercises
EXempty __ e. n the Templates center column, select mySection as the page template.
__ f. Type Confidential as the page title.

__ g. For Insertion Point, check Next sibling of current page.
Student Exercises
__ h. Click Create Page.
__ i. Click Page > General and select the Details tab.
__ 3. On the far right column, click the Default site area.Edit icon (a pencil).
V10.1
Student Exercises
EXempty __ 4. Specify the default location for new content.

__ a. On the Manage Associated Content pane, click Add web content.
Student Exercises
__ b. Go to Training > Home.
__ c. Select Confidential_SA item as the web content to associate with the page and click
OK.
V10.1
Student Exercises
EXempty __ 5. Close the page dialog.

__ 6. Click Edit Shared Settings of the portlet in the right column.
__ d. Under Content, click Reset. The site area becomes

Training/Home/Confidential_SA(inherited from page)
__ e. Click OK.
__ f. From the Edit Mode selector, disable edit mode.
__ 7. Modify the resource permissions.
__ a. Click Administration menu (wrench icon) > Portal User Interface.
__ b. Go to Manage Pages.
Student Exercises
__ c. Go to the Content Root > Home page and locate the Confidential page entry.
__ d. For the Confidential page, select the Set Page Permissions (the key icon).
__ e. In the Allow Inheritance column, clear the User role and Privileged User role.
__ f. Click the third column Edit Role for the User role.
__ 8. On the Resource Permissions pane, click Add.

__ 9. Click Search so all groups are shown.
V10.1
Student Exercises
EXempty __ 10. Select the Executives group and click OK.
__ 11. Click Confidential in the breadcrumb.
__ 12. On the Resource Permissions pane, click Apply. Confirm the request. Click Done.
__ 13. Verify the new page.
__ a. Click Site > Home.
__ b. Verify the new Confidential tab on the web site.
Student Exercises
__ c. Click the Confidential tab.

__ d. Verify in the left pane that you see Confidential Content 1.
__ e. On the right pane, click Confidential Content 2.
__ f. Verify the Confidential Content 2 text.
__ 14. Logout of the portal.
V10.1
Student Exercises
EXempty Section 3. Testing security

__ 1. Verify that Executive can access confidential content.
__ a. Log in as user Executive with password Executive.
__ b. Go to Site menu > Home.
__ c. Verify that you can see Confidential tab.
__ 2. Verify access to confidential items. Click the Confidential tab.Verify that you can see the
Confidential content and menu.
__ 3. Create new content by using inline editing.

__ a. In the breadcrumb trail, click New.
Student Exercises
__ b. Create a third confidential item with the name Confidential Content 3 and some
text in the Body field.

__ d. Verify that you can see the third item of confidential content in the menu as Executive.
V10.1
Student Exercises
EXempty __ e. Click Confidential Content 3 in the menu to verify that you see the content on that
page.
__ f. This content confirms that the Executive user has appropriate visibility and permission
to create new inline content.
__ 5. Now log in as Writer with the password Writer to verify that confidential material is not
visible.
__ a. Go to Site menu > Home.
__ b. Verify that the Confidential content is not visible.
__ c. Verify that the Menu - Confidential is not visible.

__ d. Go to the Site menu > Write content page.
__ e. Using the library explorer, go to Libraries > Training > Authoring Templates. Verify
that you do not see the Confidential_AT authoring template.
By default, items are listed alphabetically.
__ f. Go to Libraries > Training > Presentation Templates and verify that you do not see
the Confidential presentation template
__ g. Go to Libraries > Training > Components and verify that do not see the Confidential
menu.
__ h. Go to Libraries > Training > Content > Home and verify that do not see the
Confidential_SA site area
Student Exercises
__ i. On the Library Explorer page, go to Item Views > All Items > All > Content and verify
that you do not see any of the confidential content items.
End of exercise
V10.1
Student Exercises

In this exercise you add confidential core items, test the access controls, create confidential con-
tent, display confidential content, and test page access controls.
Student Exercises
V10.1
Student Exercises
EXempty
Exercise 10.Adding CSS to your website
Estimated time
00:30

In this exercise, you explore how to add custom CSS to your website.

• Create a site area to store CSS content items
• Create an authoring template for CSS
• Create a presentation template for CSS
• Reference CSS content items
Introduction
Responsive Web Design provides content parity between mobile devices
and desktop channels, which enhances user experience and brand
consistency. Seamless changes in screen size, from small to large, are now
possible while the order of the content is maintained. Content maintenance is
simplified by having one site that is represented by one set of assets.
To assist with making the elements of a page responsive to various widths,
relative width CSS classes have been added to the theme layouts. These
classes are marker classes only. There are no styles that are defined for
these classes by default. They are there on the containers, rows and
columns, of the layouts so that you can define your own styles that are
associated with the classes as needed to make your page elements
responsive to various widths.
Requirements
© Copyright IBM Corp. 2015 Exercise 10. Adding CSS to your website 10-1
Student Exercises
Section 1. Create a CSS site area

Hint

Log in.
__ 2. Create a CSS site area.
__ d. Click New > Site Area > Default Site Area Template.
__ e. In the Name field, enter: CSS
__ f. Verify that the Location is set to Training (Last child).
V10.1
Student Exercises
EXempty __ h. You get a message that indicates CSS was saved under Training. There is also a
warning message, which is safe to ignore. Later in the exercise, you create a content
item. i
__ i. Click Content. A site area that is named CSS should now exist in the Content view.
Student Exercises
Section 2. Creating a CSS authoring template

__ 1. Create a CSS authoring template.
__ c. Click New > Authoring Template > Content Template.
__ d. In the Name field, enter: CSS
__ e. Verify that the Location is set to Training.
__ f. Go to the Item Properties section. For the Location options section, select Selected
locations.
__ g. Click Add.
__ h. Select the box next to CSS and click OK.
V10.1
Student Exercises
EXempty __ i. Verify that you see the CSS Location with the Path /Training/CSS/.
__ j. For the Choose saving option for author section, select No option (automatically
save item to all selected locations for which the user has contributor access).
__ k. Click Manage Elements.
__ l. In the Element Manager pane, make the following changes:
- In the Name field, enter: Styles
- Click Add.
__ m. You should see the element, Styles, which is listed under the Element type section.
Then, click OK.
__ n. Click the Default Content Properties tab.
Student Exercises
__ o. Expand the Workflow section.

__ p. Clear the box next to Enable workflow for items created with this authoring
template.
V10.1
Student Exercises
EXempty Section 3. Create a CSS presentation template

__ 1. Create a CSS presentation template.
__ c. Click New > Presentation Template.
__ d. In the Name field, enter: CSS
__ e. Verify that the Location is set to Training.
__ f. Next, you need to reference the CSS element from the CSS authoring template in the
presentation template design. Go to the Presentation Template Options section. Click
Insert Tag.
__ g. In the Insert a Tag pane, make the following changes:
- For the Select a tag type field, select Element.
- Click the Select authoring template.
- Select CSS and click OK.
- For the Select the element to reference field, verify that Styles is selected.
- Click OK. This step adds the element line in the markup.

__ 2. Edit the CSS site area.
__ c. Select the box next to the CSS site area and click Edit.
__ d. Go to the Site Area Properties section and click Manage Template Mappings.
__ e. Select the radio button next to CSS as the authoring template.
__ f. In the Presentation Templates section, select the radio button next to CSS.
Authoring Template Training / CSS, is mapped to the Presentation Template Training /
CSS.
Student Exercises
__ h. Click OK. Verify that the Child Template Mappings has the Training / CSS Authoring
Template mapped to the Training / CSS Presentation Template.
__ i. Click Save and Close. You see a warning message that is safe to ignore. The rendering
behavior needs a default content. In the next section, you create a content item.
V10.1
Student Exercises
EXempty Section 4. Create a CSS content item

__ 1. Create a CSS content item.
__ b. Click New > Content > Training / CSS.
__ c. In the Name field, enter: BaseStyles
__ d. Go to the Styles section. In the Styles field, enter the following CSS:
h1
{
color: rgb(0, 96, 160);
font-style: italic;
font-variant: small-caps;
}
Student Exercises
Section 5. Reference CSS content items

__ 1. Reference the CSS content items in the presentation template.
__ a. Click Presentation Templates.
__ b. Select the box next to Landing – Internet and click Edit.
__ c. Go to the Presentation Template Options section. In the markup, place your cursor at
the beginning of the markup and add a blank line.
__ d. At the beginning of the markup, add the following tag:
<link
rel="stylesheet"href="/wps/wcm/myconnect/Training/CSS/BaseStyles?subtype=
css"type="text/css">
__ 2. Examine the changes.
__ b. Go to one of the site pages. For example, click News & Community. You can see the
changes that the custom CSS made to the header of the content item. The header is in
a different color and the font is italicized.
__ c. Feel free to examine any of the other pages.

__ d. When completed, log out of WebSphere Portal.
End of exercise
V10.1
Student Exercises

In this exercise, you added custom CSS to your website.
Student Exercises
V10.1
Student Exercises
EXempty
Exercise 11.Working with the Content Template
Catalog and Site Builder
Estimated time
01:30

This exercise explains how to use Site Builder and the patterns available in
Content Template Catalog (CTC) V4.3 to create a customized templated site
management solution for business users. In this exercise, you are guided
through some of the capabilities of Site Builder and CTC.

• Use Site Builder to build a site with the Home Page Template
• Use Site Builder to build a site with the Internet Site Template
• Customize a site
• Create and publish a project
Introduction
The Content Template Catalog (CTC) is a suite of assets that accelerate the
process of building a website. It includes common page templates, content
types and design elements; making it possible to build a basic site very
quickly with little or no customization.
You should also install the CTC with Site Builder so you can build sites based
on CTC components.
Site Builder is an application that you can use to create site templates or
section templates for use with IBM WebSphere Portal. Installing CTC and
Site Builder together offers you the widest choice of website designs. After
you install Site Builder and set up access for administrators and website
creators, they can log in to WebSphere Portal and go to the Site Builder page
to access the features of Site Builder.
Requirements
© Copyright IBM Corp. 2015 Exercise 11. Working with the Content Template Catalog and Site 11-1
Student Exercises
• Content Template Catalog V4.3 and Site Builder installed
V10.1
Student Exercises
EXempty Section 1. Getting started with CTC and Site Builder

The Content Template Catalog (CTC) is a set of templates that accelerate the process of building a
website. You can use Content Template Catalog to mock up a site quickly or to build the skeleton of
a site as a basis for further development. By using the template patterns that CTC is built on, you
can supply a customized system for your users that lets them build their own sites.
Site Builder is an application that you can use to create site templates or section templates for use
with IBM WebSphere Portal. You use Site Builder to quickly roll out new websites, or add new
sections to existing websites, using these site templates and section templates. Use the Site
Builder wizard to build a site in minutes, with all of the necessary pages, portlets, site areas,
content, and components, set up and ready for editing. Installing CTC and Site Builder together
offers you the widest choice of website designs. Site Builder is included as an option in the CTC
installation and is installed by default. It is recommended that Site Builder is used to start creating a
CTC site.
In this section, you learn how to use Site Builder to build and customize a new website.
http://wcm:10039/wps/portal
Hint

__ c. In the login area, enter wpsadmin as the user ID and wpsadmin as the password. Click
Log in.
__ 2. Update the status of the Application page. In an earlier exercise, the Application page was
changed to a status of Inactive. It must be changed to Active to work with Site Builder.
__ b. Click Portal User Interface.
__ c. Under Portal User Interface, click Manage Pages.
__ d. Click Content Root.
Student Exercises
__ e. Next to Applications, click the status Inactive.
__ f. Click OK to activate the page. The status for Applications is now Active.
__ 3. Create the Cycling Club site with a landing home page.
__ a. In the menu at the top, click the Applications icon (the pages).
__ b. Click Site Builder. If you do not see the Site Builder link, make sure the Applications
page status is Active.
V10.1
Student Exercises
EXempty
Information
You are placed on the main page for Site Builder. You can see that there are a set of CTC
compatible Site Builder templates that are displayed on the page. From here, you can manually
create sites and section templates, and import templates. You can also use a set of wizards to
guide you through the creation of Site Builder templates, and the creation of sites and sections
using those templates.
Templates are available to create empty sites from scratch or with ready to use content. The
templates are based on known practices, and allow you to get a fast start with a solution. The
template can be changed, edited, duplicated, and exported to other environments.
__ c. Scroll to the bottom of the page to the Site with Home Page Template section. With the
Site with Home Page Template wizard, you can create a basic empty site with a landing
page, where site users start browsing the website. You can see that 1 page is to be
created by using this template, the landing page.
__ d. Click Launch Site Wizard.
Student Exercises
__ e. On the Name Your Website page, you provide details on the name of your web site and
URL name. The template creator wizard provides default settings which you can modify.
Next to each field you can get details about the field. At the end of the Unique site name
field, click the ? icon.
__ f. You can see a window appears providing details about the field. When completed, click
the X to close the window. Feel free to examine details for any of the remaining fields.
V10.1
Student Exercises
EXempty __ g. In the Name Your Website page, make the following changes:
- In the Unique site name field, enter: Cycling Club
- In the Site title field, enter: Cycling Club
- In the Friendly URL name field, enter: cclub
- In the Description field, enter: The Cycling Club site.
__ h. Click > to move to the next page in the wizard.
Hint
You can also click the page name, such as Content Library, to move between the pages.
Student Exercises
__ i. When you create a site by using Site Builder, a content library is created by default. In
the Select a Library to Store Content page, make the following changes:
- Leave the option Create a content library selected
- In the Unique library name field, enter: Cycling Club
- In the Description field, enter: Cycling Club content library
__ j. Click > to move to the next page in the wizard.

__ k. On the last step of the wizard, you can see the Site with Home Page Template contains
a single page, a landing home page.
__ l. On the right, click Create Site.
V10.1
Student Exercises
EXempty __ m. Review the Site Creation Summary, and click OK.
__ n. A message appears indicating the site is being validated on the server. The message is
visible until the validation completes. Then, on the right, you can observe the creation
status of the website. You can see the status is currently in progress. There is one page
that must be created. Observe the output as the site is created.
Student Exercises
__ o. After a few moments, you can see the status is Completed. The site Cycling Club is
completed. You can go to the site from the status area or you can access the site from
the site menu.
__ 4. Access and modify your website.

__ a. In the menu in the upper left, click the Open site menu icon and then click Cycling
Club.
__ b. You can see the website and the landing page listed that you created. From the Edit
Mode selector, you can see that edit mode is inactive, or off. Click the Edit Mode toggle
to turn on editing, or activate editing.
__ c. The landing page contains help text to guide you through the process of adding text and
images directly into the page. To enter a description for the site, hover your mouse over
Enter promotion description and click in the Description field.
__ d. In the Description field, enter: Cycling Club
__ e. Next, insert an image for the site. To the right, click Insert promotion image.
__ f. In the Image window, click Upload. Go to C:\Labfiles\CTC, select cycle.jpg and
click Open.
V10.1
Student Exercises
EXempty __ g. In the Image window, you can see the image that is to be displayed. You can change the
dimensions of the image if needed. Click Save.
You can see how the landing page is updated with the description and image.
__ 5. Add a section to the website by using the Events page template. The Events page template
contains an index pages that shows all the events and a details page that shows information
about each event.
__ a. In the toolbar menu, click Create > Page.
__ b. In the Templates section, in the Filter templates field, enter: Eve
__ c. Select Events.
Student Exercises
__ d. In the Page Settings section, in the Page title field, enter: Meetups
__ e. Examine the Friendly URL name that is created. For the Page insertion point, select
Child of current page.
__ f. When completed, click Create Page.
__ g. When the page is created, a message appears and asks what you want to do next. You
can select one of the options available or close the window. Next, you edit the page
information. Close the Create window by clicking the X in the upper right of the window.
__ h. Go to the Events portlet. In the Title field, enter: Meetups
__ i. In the Body field, enter: Find meetups in your city
__ 6. Create an event.
__ a. Click Create new event.
V10.1
Student Exercises
EXempty __ b. In the Name field, enter: Pittsburgh Meetup
__ c. Click Create.
__ d. Enter a start date and click Save. Then, enter an end date and click Save. Choose dates
in the future.
Hint
When you click in the enter start date or enter end date fields, a window appears with a drop down
menu. Click the drop down and a monthly calendar appears where you can select a date.
__ e. Scroll down to the Fields displaying in other views section. In this section, you can
update any of the fields. Click in the Feature Image field.
__ f. In the Image window, click Upload. Go to C:\Labfiles\CTC, select pgh.jpg and
click Open.
__ g. Click Renditions to expand the section. Here you can add other images to be rendered
specifically for the desktop, tablet, or smartphone. Keep the default Desktop selected.
__ h. Click Save to upload the image.
Student Exercises
__ i. Hover your mouse over the Pittsburgh Meetup portlet and a window appears. You can
see that Pittsburgh Meetup is currently in draft form. Click Publish.
__ j. Go to the top of the page. In the breadcrumb trail, click Meetups. Scroll down to the
events and you can see the Pittsburgh Meetup listed.
__ 7. Add a page component. Change the recent event list into an events slideshow component.
__ a. Go to the Sidebar Recent Slideshow List portlet. Click the portlet menu and click Delete.
__ b. Click Yes to delete the portlet.

__ a. In the toolbar menu, click Create > Content.
__ b. You can see the content that you can add to a page such as blogs and wikis, teasers,
lists, carousels, and slideshows. Click Slideshows.
__ c. Click Events Upcoming Featured Slideshow. Hover your mouse over the name to see
the full name since there are two items with similar names.
__ d. You can see a description for this content. In the upper right, click Add To Page.
__ e. Wait for the message that the item is added to the page. Then, close the Content
window.
V10.1
Student Exercises
EXempty __ f. The content is added to the top of the page. On the right, click the portlet menu and click
Move Down. Continue to move the content down and move it to the right until it is in the
spot where you deleted the previous portlet.
__ 8. Currently, meetups are displayed in a index flat list by using the List Presentation
component. Create a calendar list to display a list of date-based content in a calendar
format by using the list builder.
Information
The list builder is an example of how to create a specialized content authoring interface using inline
editing and the Web Content Manager REST API. It uses "ItemRepository.js" which is part of a
JavaScript API for sending requests to the Web Content Manager REST API which is contained in
the inplace edit WAR on the server.
__ a. Go to the bottom of the Meetups portlet.
Student Exercises
__ b. Click the Configure the list icon in the bottom right.
__ c. In the Configure the list section, you can see the List Presentation Component is set to
Index Filter List Design for Scheduled Events. To change the list presentation
component, click in the field with definition.
__ d. In the window that appears, click Select Component.

__ e. Click CTC Design.
__ f. Go to page 2 and click List Presentation Components.
__ g. Go to page 2 and select Index Calendar Design for Scheduled Events.
__ h. Click OK.
__ i. In the Component window, click Save.
__ j. In the Configure the list section, verify that the List Presentation Component is set to
Index Calendar Design for Scheduled Events. Then, click Done.
V10.1
Student Exercises
EXempty __ k. You can see the events listed in a calendar form. You can modify the dates of a meetup
by using the calendar. Select the start of the Pittsburgh meetup and drag it to start a
week earlier.
__ 9. Examine the site.

__ a. From the Edit Mode selector, turn off editing, or deactivate editing. To turn off editing,
click the box next to Edit Mode.
__ b. You are placed on the Meetups page. You can see your calendar list of meetup and on
the right, you see the upcoming events. Notice under UPCOMING EVENTS, the start
date of the Pittsburgh Meetup is updated to the date you set in the calendar list.
This is an example of creating a simple website with a single page. In the next section,
you create a more complex website by using Site Builder.
Student Exercises
Section 2. Create a website by using the Internet Site

Template wizard
In the previous section, you created a simple website with a single page, the landing page. You
added a second page, an events template page, and edited the default settings of the page. It was
a basic example of starting to create a website.
In this section, you create a complex website by using the Internet Site Template wizard. By default,
this template creates a website with 38 pages. The site includes Landing pages, Index, and Detail
page pairs.
__ 1. Create an internet site.
__ b. Click Site Builder.
__ c. Scroll down the page to the Internet Site Template section. With the Internet Site
Template wizard, you can rapidly deploy websites from predefined site templates.This
template creates an internet site with CTC theme extensions enabled. A number of
pages are created by default, 38 pages, and you can add more pages as needed.
__ d. Click Launch Site Wizard.

__ e. In the Name Your Website page, make the following changes:
- In the Unique site name field, enter: My Cycling Website
- In the Site title field, enter: My Cycling Website
- In the Friendly URL name field, enter: My Cycling Website
- In the Description field, enter: My Cycling Website
__ f. Click > to move to the next page in the wizard.
V10.1
Student Exercises
EXempty __ g. When you create a site by using Site Builder, a content library is created by default. In
the Name Your Website page, make the following changes:
- Leave the option Create a content library selected.
- In the Unique library name field, enter: My Cycling Library
- In the Description field, enter: My Cycling content library
__ h. Click > to move to the next page in the wizard.
__ i. On the last step of the wizard, you can see the internet site template contains a full
hierarchy of pages. Place your cursor to the right of My Cycling Website. You can see
Edit is an option to edit the page attributes. Click Edit.
Student Exercises
__ j. The Page title and Friendly URL name fields have the information that you provided in
step 1 of the wizard. The page is based on the Landing Home template. From this pane,
you can make changes to any of your initial settings. Change to Friendly URL name to
mycyclingsite
V10.1
Student Exercises
EXempty __ k. Click Content and More to expand these sections. You can see the options selected
and available for each of these sections.
__ l. You can see the Page template is the Landing Home template. You can click the down
arrow to see all of the available templates. When completed, click OK.
Student Exercises
__ m. On the Select Pages to Include in Your Website pane, you can choose what pages are
included in your website. By default, all pages are selected. Clear the box next to
Products to remove the pages. This removes the Products page and all the Products
child pages.
__ n. On the right, click Advanced Settings.
V10.1
Student Exercises
EXempty __ o. On the Site Experience tab, you can select a style. You cannot change the theme or
profile for the site but you can change the default settings after the site is created. Select
one of the styles that is listed.
__ p. Click the Access Control tab. On the Access Control tab, you select users and groups
that you can give access to the site as a user or administrator.
Student Exercises
__ q. Next to Administrator, click Add.

__ r. Click Select from all users and groups.
__ s. In the Search field, enter wps and click Search. The entries in the directory that begin
with wps appear in the Search results field. Select the wpsadmin group and click Add.
This moves the group to the Selected names field. Click OK.
__ t. You can see the wspadmins group now has Administrator access to the website. Now
you are ready to create the site. On the right, click Create Site.
V10.1
Student Exercises
EXempty __ u. Review the Summary, and click OK.
Student Exercises
__ v. A message appears indicating the site is being validated on the server. On the right, you
can observe the creation status of the website. You can see the status is currently in
progress. There are 33 pages that must be created. Observe the output as the pages
are created.
__ w. After a few moments, you can see the status is Completed. The site My Cycling Website
is completed. You can go to the site from the status area or you can access the site from
the site menu.
V10.1
Student Exercises
EXempty __ 2. Access your website.

__ a. In the Creation Status section, under My Cycling Website, click Go to Site.
__ b. You can see the website and the pages listed that you created. This page is based on
many of the provided page templates. The website contains a set of portlets with
content, such as a slide show on the top, a teaser, promotions call-outs, and a special
features carousel at the bottom.
You can see that you added all of the default pages except for the Product page. The
Site includes About Us, Services, Media, Events, Support, and Contact Us. Click Events
and examine the page.
__ c. Under Events there are two underlying pages, Conferences and Briefings. Hover your
mouse over Events to see the two pages.
__ d. Continue to explore the various pages. You see that the About Us and Media pages
have three underlying pages each. The remaining pages each have two underlying
pages.
Now that you created the site, you can customize the site.
Student Exercises
Section 3. Customizing the site

In this section, you customize your website by adding an Cycling Events page. You add this page
under the existing Events page.
__ 1. Edit the site by adding a new page to the Events page.
__ a. Click Events to go to this page.
__ b. From the Edit Mode selector, you can see that edit mode is inactive, or off. Click the Edit
Mode toggle to turn on editing, or activate editing.
__ c. Scroll through the page and examine the portlets. In Edit Mode, you can see the titles of
each portlet and all options to edit the content directly, or configure them differently.
Scroll down the page to the Create new promotion porlet and hover your mouse over
Expertise to see the options available to edit.
__ d. Continue to scroll through the page. Notice the Automatic Landing Page (Specified)
portlet that shows a summary of the underlaying pages.
V10.1
Student Exercises
EXempty __ 2. Create a project.

__ a. In the new site, you can either make changes that are published directly, or prepare a
new version jointly with your team, use the draft content, decide for each change if it
should go through a workflow, preview the changes with different audiences, and finally
schedule to publish the changes at a specific time in the future. These steps are done by
using projects. The projects can be used by contributors as well as developers and
several projects can run in parallel.
Next, create a project to manage your new version. Click Published Site > New
Project.
__ b. In the New Project section, enter: My Cycling Website V1.1
__ c. Click Create.
__ d. A message confirms the project is created and the project is empty. In the top toolbar
you should now see this project name.
The Projects panel provides the details and gives you options to Publish, Manage
Project, and Exit Project There is also a More option. In the project window, click More
to see the options to add to the project, delete the project and create a project template
Student Exercises
from it with all its current entries, it may be a good start for future modifications. Do not
click any options under More at this time.
__ e. Click Manage Project.

__ f. From here, you can examine the project and properties, see if there are any project
items and add project items. On the Properties tab, you can define access to the project
and see a history of the project.
__ g. Close the Manage Project window.

__ 3. Create a page.
__ a. Make sure you are on the Events page. Then, in the toolbar menu, click Create > Page.
V10.1
Student Exercises
EXempty __ b. In the Templates section, the Filter templates field shows Eve from the filter you applied
earlier in the exercise. The Events and Events Calendar templates are listed. Select
Events.
__ c. In the Page Settings section, in the Page title field, enter: Cycling Events
__ d. Examine the Friendly URL name that is created. Change the Friendly URL name to:
Cycling-Events
__ e. Keep the default setting of Last child of current page.
__ f. When completed, click Create Page.
__ g. In the toolbar menu, click Page > General.
Student Exercises
__ h. This panel shows you the general basic information about this page which you could
directly edit.
- You can see the location, page URL, and vanity URL.
- It also has the actions in the upper right to publish the page, as it is in draft now, and
delete it.
- On the left you also have direct access to the page Layout, Style, and Vanity URLs.
- The Details tab shows some more details on your page, such as the project, theme,
and profile used.
__ i. Make sure you are on the Basic tab.

__ j. Next to Edit Page Properties, click the Edit icon (the pencil).
V10.1
Student Exercises
EXempty __ k. Explore the Manage Page Properties options. Take a look at the various tabs. The
General tab shows the display and friendly URL names. The Cache tab sets the caching
scope for a single user, across users, and an expiration interval. The Security tab is
where you define author and owner selections, as well as workflow settings for this
page. The Localization tab is for page translations. Finally, the Advanced tab shows
theme and profile selections, allowed portlets control, page versions and more.
__ l. Click Cancel.
__ m. In the navigation menu on the left, click Layout.
Student Exercises
__ n. To change the layout, select 1 column.
__ o. After the layout is changed, you see a message that indicates the layout has one column
taking up 100% of the available space. On the right, a message indicates there are three
items hidden for the current layout. For now, keep this layout. You observe the hidden
items in the page and modify the layout again later.
__ p. In the navigation menu on the left, click Style.
V10.1
Student Exercises
EXempty __ q. Select any of the styles. After you select a style, a message indicates that the style has
been changed.
__ r. In the navigation menu on the left, click Vanity URLs. From here, you can assign a
specific short vanity URL names for your page and in specific languages. If needed, you
can control what content to show in that page and whether to enforce authentication.
__ s. In the Vanity URL Name field, enter: cyclev
Student Exercises
Information
You can associate vanity URLs with portal pages and labels. Vanity URLs are short URLs that
people can easily remember. They are shorter than full WebSphere Portal URLs. They are
sometimes also called marketing URLs. You can publish vanity URLs for marketing campaigns
through different channels, such as email or print. This way, you can use vanity URLs to direct
customers to a specific portal page or content item. Interested site visitors who want to view your
campaign can then remember or copy the short vanity URL and type it into the browser address
field.
__ t. Click Save. You see a confirmation message that the vanity URL was created
successfully. You can continue creating more vanity URLs if needed. For example, you
can create one for each language. Your page is now configured and you can see the
vanity URL listed.
__ u. Close the Page window.

__ 4. Examine and modify the Cycling Events page.
__ a. You are placed on the Cycling Events page. Hover your mouse over Events to see the
child page listing. The Cycling Events page is still in the draft state as indicated by its
name surrounded by parenthesis.
V10.1
Student Exercises
EXempty __ b. On the Cycling Events page, you can configure promotions, a section header, a search
filter, events corresponding to the filter results, as well as social connect and recent
events. You can see the events portlet and the upcoming items index list portlet only.
__ c. Click Show non-displaying fields. You can see the list of fields that are displaying in
other views and the non-displaying fields on the page.
Student Exercises
__ d. On the page, you can only see the events and upcoming items index list portlet. The
non-displaying portlets, such as social connect and recent events, are set this way due
to the layout that you selected. When the 1 column layout is selected, there are three
items hidden for the current layout. To see these items, change the layout. In the toolbar
menu at the top, click Page.
__ e. In the navigation menu on the left, click Layout.
__ f. Scroll down and select CTC: 2 column with header and follower.
__ g. At the top, you can see the message that the layout is changed and there are no hidden
items. Close the page window. Scroll through the page and examine all of the portlets
that are now visible.
__ h. Hover over the area until you see the word Description. In the Description field, enter:
Cycling Events
__ i. Next, insert an image for the site. This time, use an existing promotion image in the CTC
Content library. In the upper right of the portlet, click the Edit item icon (the pencil).
V10.1
Student Exercises
EXempty __ j. Go to the Library Image section. Click Select Component.
__ k. In the breadcrumb trail, click Libraries.

__ l. Click CTC Content > Promotion Images.
__ m. Hover your mouse over any of the library images to get a preview of the image. Select
any of the library images. For example, select Botanical 03 and click OK.
__ n. Click the down arrow next to Save and Close, and click Save and Publish.
__ o. You can see that the changes are in a pending state and will be published when the
project is published. Close the Edit window. You are placed on the Cycling Events page.
You can see the site promotion with the library image that you selected.
__ 5. Create another site promotion. A site promotion is part of a marketing campaign that has the
objective to introduce a new product, service, or event, or better position an existing one. A
marketing campaign can consist of mailings, posters, banners, articles, games or other web
content.
__ a. In the upper left, click Create new promotion.
__ b. In the Name field, enter: Cycling Events - Europe
__ c. In the Title field, enter: Cycling Events - Europe
__ d. In the Description field, enter: Cycling Events - Europe
__ e. Insert a library image for the site by using an existing promotion image in the CTC
Content library. Go to the Library Image section.
__ f. Click Select Component.
__ g. In the breadcrumb trail, click Libraries.
__ h. Click CTC Content > Promotion Images.
__ i. Hover your mouse over any of the library images to get a preview of the image. Select
any of the images. For example, select Floral 03 and click OK.
__ j. Click the down arrow next to Save and Close, and click Save and Publish.
__ k. Wait until you see the confirmation message. Then, click Close to close the window.
Student Exercises
__ 6. Examine the details of having two site promotions on the page.

__ a. You can see in the site promotions section that there is a control which allows you to
manually select any of the site promotions. Since there are two site promotions, you
have numbers, 1 and 2, to move between the two site promotions. You can also use the
previous and next controls, the arrows, to move between the site promotions.
__ b. Click 2 to see the second site promotion, Cycling Events - Europe.

__ c. Click 1 to go back to the first site promotion, Cycling Events.
__ d. From the Edit Mode selector, turn off editing, or deactivate editing. To turn off editing,
__ e. You should see your site promotions displayed by using a crossfade style transition,
changing every 5 seconds, and containing the previous, next, and numerical controls at
the bottom.
__ f. From the Edit Mode selector, turn on editing, or activate editing. To turn on editing, click
the box next to Edit Mode.
__ 7. Change the behavior of the site promotions.
__ a. Place your mouse in the site promotions area. When the menu appears, click Open Edit
Form.
V10.1
Student Exercises
EXempty __ b. You can see on the Content tab the Widget ID. The Index Page Signpost and
Promotions Slideshow content item that is used to display a slideshow of items that you
want to promote on your site.
__ c. Go to the Transition section.
__ d. Here you select the type of transition to apply between the slides. You can see the
default setting is Crossfade. From the menu, select Wipe Left.
__ e. Go the Slide Duration section.
__ f. Change the slide duration to 3000 miliseconds. Now, the site promotions will change
faster, every 3 seconds.
__ g. Go to the Controls section.
__ h. You can see the controls are set to Previous, Numbers, and Next by default. From the
menu, select Previous, Play/Pause, Numbers and Next.
__ i. Go to the top or bottom of the page and click Save and Close.
__ 8. Verify the changes to the behavior of the promotions.
__ a. From the Edit Mode selector, turn off editing, or deactivate editing. To turn off editing,
__ b. You should see your site promotions displayed using the wipe left style transitions, one
slide replaces another slide by moving from one side of the frame to another, starting on
the left. The site promotion changes every 3 seconds and contains a left/right controls at
the bottom.
__ c. From the Edit Mode selector, turn on editing, or activate editing. To turn on editing, click
the box next to Edit Mode.
__ 9. Work with the draft site and publish your changes.
__ a. In the menu in the upper right, click the down arrow next to My Cycling Website V1.1.
Student Exercises
__ b. Next to Published Site, click View.
__ c. In the menu in the upper left, click the Open site menu icon and then click My Cycling
Website. This is your current, published version of the website.
__ d. Hover over the Event page. You should only see the two pages, Conferences and
Briefings.
__ e. Next, go back to your draft project. In the menu in the upper right, click the down arrow
next to Published Site.
__ f. Click My Cycling Website V1.1.
__ g. Hover over the Event page. You see the three pages, Conferences, Briefings, and
Cycling Events.
V10.1
Student Exercises
EXempty __ h. The Cycling Events page is still in draft form and part of your project. In the upper right,
click Menu. If wanted, you can preview the page as a specific user and as an
unauthenticated user.
__ i. For this exercise, you can assume that everything is working properly and you are going
to publish the project with all of the items. In the toolbar menu, click Projects.
__ j. On the pane, you see your current project with all of the items that are part of the project.
You can see the items created during the page creation and the edits. It also shows the
corresponding workflow status. The screen capture in the book is large and can not
display all of the content. Examine the content on your course image.
__ k. In the upper right, click Manage Project.
Student Exercises
__ l. In the Project Items section, you can see content items with various states, such as draft
and publish pending. You want to approve all of the items. Normally, you would select
each content item in draft status, review it, and approve each item individually. However,
for this exercise, you use a fast track method. In the Project Items sections, click 50 to
display all of the items on the page.
__ m. Select the box for Select All to select all of the items.
__ n. Click More > Approve. This actions moves all of the content items to the status Publish
Pending. This status means that the items are ready to be published, but waiting for the
project to be published.
__ o. Click Publish Project.
Hint
If you do not see the option Publish Project, make sure that there are no content items still in draft
form. If you see content items in draft, approve the items, which moves them into the status Publish
Pending.
__ p. All of the changes for your next version of My Cycling Website V1.1 are published.
Hover over the Event page. You see the three pages, Conferences, Briefings, and
Cycling Events. The Cycling Events page is displayed and no longer in draft form, the
parenthesis are removed.
You have successfully created and published a new version of your My Cycling Website
where you added the Cycling Events page.
__ q. Logout of WebSphere Portal.
End of exercise
V10.1
Student Exercises

In the first part of the exercise, you used the Site Builder to build a site with the Home Page
Template. Then, you used Site Builder to build a site with the Internet Site Template. s
Student Exercises
V10.1
Student Exercises
EXempty
Exercise 12.Working with the IBM Mobile Preview
Estimated time
00:30

This exercise explains how to use the IBM Mobile Preview for Digital
Experience Software to view targeted content for a mobile device by using
the Mobile Browser Simulator.

• Install the IBM Mobile Preview
• Use the Mobile Browser Simulator
• Create segments with personalization
• Add targeted content to a spot
Introduction
The IBM Mobile Preview for Digital Experience Software is a tool that allows
you to preview your Portal pages as a mobile user from a variety of virtual
mobile devices.
Requirements
• Content Template Catalog V4.3 and Site Builder installed
• The Mobile Browser Simulator installation binaries
• Completed Exercise 11
© Copyright IBM Corp. 2015 Exercise 12. Working with the IBM Mobile Preview 12-1
Student Exercises
Section 1. Using the IBM Mobile Preview

IBM Mobile Preview for Digital Experience Software is a tool that allows you to preview your Portal
pages as a mobile user from a variety of virtual mobile devices.
As an addition to the Actions menu, the IBM Mobile Preview for Digital Experience Software tool
allows you to preview pages as a mobile user. When selected, a mobile preview window is opened,
allowing the you to select from a variety of virtual mobile devices to preview the page. This allows
you to compare end user experiences across multiple mobile devices simultaneously during the site
creation process, without the hassle of using and maintaining expensive physical devices.
To use the IBM Mobile Preview, you must install and deploy the application. Then, you add the
module to the profile files. A profile defines the modules that are used to render a page for a theme.
In this section, you see how you can personalize content and how a web page adapts automatically
to different devices with multichannel functions.
Hint

Log in.
__ 2. Examine the actions menu.
__ a. In the menu in the upper left, click the Open site menu icon and then click My Cycling
Website.
__ b. In the menu in the upper right, click Actions. Notice that there are options for Analytics
and Additional Actions only.
__ c. Logout of WebSphere Portal.
V10.1
Student Exercises
EXempty __ d. Minimize the browser window.

__ 3. Install and deploy the IBM Mobile Preview by using the command line.
__ a. Open a command prompt.
__ b. Go to the C:\IBM\WebSphere\wp_profile\ConfigEngine folder.
Information
The IBM Mobile Preview for Digital Experience Software requires WebSphere Portal 8.5, Combined
Cumulative Fix 01 or later.
The download package contains the following items:
• Lic_en.txt: License that governs the terms and conditions to use the application
archive.
• mobile-preview-8001-v1.1.paa: The Portal application archive to be installed on
WebSphere Portal v8.0.0.1 servers.
• mobile-preview-8500-v1.1.paa:The Portal application archive to be installed on
WebSphere Portal v8.5 servers.
• mobile-preview-readme.pdf: Instruction manual.
• notices.txt: Notices and information for the application archive.
The IBM Mobile Preview for Digital Experience Software Portal application archive file is on the
course image in the C:\Software folder.
__ c. To install the IBM Mobile Preview, enter the following command:

ConfigEngine.bat install-paa
-DPAALocation=C:\Software\mobile-preview-8500-v1.1.paa
-DWasPassword=wpsadmin -DPortalAdminPwd=wpsadmin
Student Exercises
__ d. When completed, scroll through the results. You should see a message that indicates
BUILD SUCCESSFUL.
__ e. Now that the IBM Mobile Preview is installed, you must deploy the application. To deploy
the IBM Mobile Preview, enter the following command:
ConfigEngine.bat deploy-paa -DappName=mobile-preview
__ f. When completed, scroll through the results. You should see a message that indicates
BUILD SUCCESSFUL.
Reminder
You can log in to the administrative console as wpsadmin and examine the application.
• Open a Firefox browser and go to the following URL:
http://localhost:10041/ibm/console
• In the login area, enter wpsadmin as the user ID and wpsadmin as the password. Click
Log in.
• Click Applications > Application Types > WebSphere enterprise applications. You
should see the Mobile_Preview application listed with a Started status.
V10.1
Student Exercises
EXempty
Information
The final step is to add the Mobile Preview module to the deferred section of all profiles where you
would like to enable IBM Mobile Preview for Digital Experience Software. This task has been
completed on the course image.
To access the profile files, a WebDAV client is used, such as AnyClient or Cyberduck. With
WebDAV for IBM WebSphere Portal, you can use standard operating system tools to create,
modify, and delete web content rather than the standard authoring portlet. For more information on
the IBM Mobile Preview for Digital Experience, see the following page:
https://greenhouse.lotus.com/plugins/plugincatalog.nsf/assetDetails.xsp?action=edi
tDocument&documentId=BE1D7AA2A79761C485257CF900607A35
__ 4. Restart the server for the changes to take affect.

__ a. In the command prompt, go to the C:\IBM\WebSphere\wp_profile\bin folder.
__ b. Stop the server by entering the following command:
stopServer.bat WebSphere_Portal -user wpsadmin -password wpsadmin
__ c. Start the server by entering the following command:
startServer.bat WebSphere_Portal
Wait until the server is started before you continue.
__ d. Exit the command prompt.
__ a. Maximize the Firefox browser window. If needed, go to the following URL:
Log in.
__ d. In the menu in the upper left, click the Open site menu icon and then click My Cycling
Website.
Student Exercises
__ e. In the menu in the upper right, click Actions. You should see Preview with the option As
Mobile User. .
__ f. Click As Mobile User.

__ g. In the Firefox blocker pop-up, click Options > Allow pop-ups for wcm.
__ h. Close the Firefox browser window.
__ i. Open the Firefox browser and go to the following URL:
__ j. In the upper right, click Log In.
__ k. In the login area, enter wpsadmin as the user ID and wpsadmin as the password. Click
Log in.
__ l. In the menu in the upper left, click the Open site menu icon and then click My Cycling
Website.
V10.1
Student Exercises
EXempty __ m. In the menu in the upper right, click Actions > As Mobile User. The Mobile Browser
Simulator opens a the Firefox browser window with the default of an iPhone 5 as the
smartphone device.
Information
The Mobile Browser Simulator is a web application that helps you test mobile web applications
without having to install device vendor native SDK. The Mobile Browser Simulator contains a frame
that emulates a target device. It shows you what your page looks like inside the mobile device
browser. You can switch the frame to emulate different screen resolutions and form factors,
including BlackBerry 6 and 7, Android, iPad, iPhone, Windows Phone 7, and Windows Phone 8
mobile devices.
You can use the Mobile Browser Simulator to render your web applications on different mobile
devices. To render your web applications with the appropriate style sheets and theme, you must
enable user agent switching. The Useragent Switcher Extension is a browser extension that
provides the user agent switching feature.
__ n. The Mobile Browser Simulator shows you the primary version of the page instead of the
device version. To enable the device version, select the box next to Enable Useragent
Switching.
Student Exercises
__ o. A browser extension must first be installed before testing. Click Install Browser
Extension.
__ p. In the Firefox pop-up, click Allow and wait for the download to complete. Then, click
Install Now.
__ q. Click Restart Now to restart the browser windows.
__ r. Close the Mobile Browser Simulator window.
__ 6. Targeted content displays different content to different user segments in a content spot of
web content viewer. Before you can create the targeted content, you need to create
segments for personalization. When you target content to a segment based on device
classes, ensure that the device classes are installed and enabled. By default, the
smartphone and tablet device classes are already defined. You can use these device
classes in rules that you create.
__ a. In the Portal browser, click the Applications icon (the pages) > Personalization.
__ b. Click Business Rules.
__ c. In the Navigator, click New > Rule.
__ d. For the New Rule field, enter: User by device
__ e. For Rule Type, select Profiler.
__ f. In the rule definition box, click Profile.
__ g. For the Value field, enter: Smartphone User

__ h. Click Submit.
__ i. Click attribute.
V10.1
Student Exercises
EXempty __ j. Click Device > Device Class.

__ k. On the same line, click value.
__ l. Click smartphone.
__ m. Click add Profile.
__ n. For the Value field, enter: Tablet User

__ o. Click Submit.
__ p. Click attribute.
__ q. Click Device > Device Class.
__ r. On the same line, click value.
__ s. Click tablet.
__ t. On the Otherwise line, click Profile.
__ u. For the Value field, enter: Desktop User

__ v. Click Submit.
Student Exercises
__ w. Verify your rule with the following screen capture:
__ x. Scroll to the bottom and click Save. In this step, you created two segments, Smartphone
User and Tablet User. Each segment views content through different devices.
__ 7. Add web content that can show different contents depending on the device types.
__ a. In the menu in the upper left, click the Open site menu icon and then click My Cycling
Website.
__ b. This time, you make this change directly to the website, not within a project. Click
Events > Cycling Events.
__ c. From the Edit Mode selector, click the Edit Mode toggle to turn on editing, or activate
editing.
__ d. In the toolbar, click Create > Content.
__ e. Click Teasers.
__ f. Click Teaser.
__ g. Click Add To Page. The teaser content is added to the top of the page above the
promotions.
__ h. Close the content window.
__ 8. Edit the teaser.
__ a. Replace the default text in the teaser with the following text:
Download the latest Mobile applications now to find out about Cycling
Events.
__ b. Change the font size to 12.
__ c. Bold the text.
__ d. Click outside the teaser text.
V10.1
Student Exercises
EXempty __ 9. You can add targeted content to a spot to match the best content with the most appropriate
segments or audiences. You can also hide the spot for particular user segments. Add
targeted content to a spot.
__ a. Hover your mouse over the teaser. You can see the teaser is published. Click Configure
Spot.
__ b. Next to Configure Spot, click the drop down and select Targeted Content.
__ c. Rather than showing the content item that you selected, you can hide the web content
viewer from the selected user segments. Click Hide Spot.
__ d. To select the target audience for the content item that you added, click Add Segment.
Student Exercises
__ e. The three segments with personalization that you added by using Business Rules are
listed. Click Desktop User.
__ f. Click Done.
__ g. You can see the segment defined for the hidden spot is Desktop User. Click Done.
V10.1
Student Exercises
EXempty __ h. You can see the summary of the updated configuration. You can apply this to any
content and with any segments configured in your environment. Click Save.
__ i. As expected the content is now hidden, as you are working on a desktop device.
To see the content in the teaser, hover your mouse over the area. In the window, click
Show.
__ j. From the Edit Mode selector, click the Edit Mode toggle to turn off editing, or deactivate
editing. The teaser is not visible in the desktop view.
Student Exercises
__ 10. Preview the teaser content by using the Mobile Browser Simulator.
__ a. Click Actions > As Mobile User.
__ b. Wait for the Mobile Browser Simulator to load. Then, you can see the teaser content.
It shows your mobile targeted content again, as the server recognizes the device that is
used. It also has changed the whole navigation, so with thick fingers you can still
navigate easily. There are different options available, such as showing the code of your
current page to read it with an external device and rotate it.
__ c. Click Rotate.
__ d. You can test with other devices. Click Add Device. Select any of the preconfigured
devices, for example, click iOS - iPad > Apple iPad 4. You can see the teaser content.
__ e. You can remove any of the devices by clicking the x in the upper right of the device.
__ f. Continue to explore other devices. When completed, close the Mobile Browser
Simulator Firefox browser window.
__ g. Logout of WebSphere Portal.
End of exercise
V10.1
Student Exercises

In this exercise, the Mobile Browser Simulator was installed, and personalization segments for
smartphone and tablet devices was created to show content for each of those devices.
Student Exercises
V10.1
Student Exercises
EXempty
Exercise 13.Using the IBM Script Portlet
Estimated time
01:00

In this exercise, you install the Script Portlet and work with some of its
features such as the Script Portlet Editor and sp command-line tools. You
create a script portlet application with the editor and place it on a page. You
also learn how to import existing applications into the Script Portlet Editor
and push applications to the server.

• Install the Script Portlet
• Create a script portlet application with the Script Portlet Editor
• Create an empty page and place the application on the page
• Import an existing application into the Script Portlet Editor
• Use the sp push command to push an application to the server
Introduction
IBM Script Portlet for WebSphere Portal is a tool that enables a script
developer to quickly develop portlets for WebSphere Portal without the need
to know anything about Java, portlets, or the JSR 286 portlet specification.
This tool allows users to develop portlets by using just their knowledge of
scripting languages like JavaScript, CSS, and HTML.
Two approaches for building applications with Script Portlet are available.
You can build an application in the browser with the Script Portlet Editor. You
can also build an application on your workstation with your preferred tools,
then use the sp push command to move the application to the server. Both of
these approaches are explored in this exercise.
Requirements
You can complete this exercise after completing Exercise 7: Custom
authoring features. The IBM Script Portlet 1.3 and the Script Portlet
Samples are also required. Both are downloaded to the course image.
© Copyright IBM Corp. 2015 Exercise 13. Using the IBM Script Portlet 13-1
Student Exercises
Section 1. Install and deploy the Script Portlet
Important
IBM Script Portlet 1.3

This exercise uses the 1.3 version of Script Portlet. Future releases of the Script Portlet might
include new features and a different look and feel. Therefore, if this exercise is attempted with a
future release of Script Portlet, some screen captures might not match.
The Script Portlet 1.3 files are already downloaded to the course image. In this section, you run the
ConfigEngine tasks to install and deploy the scriptportlet-app-1.3.0.paa.
__ 1. Start WebSphere_Portal server if it is not already started.
__ a. From a command window, go to C:\IBM\WebSphere\wp_profile\bin
__ b. Enter the command: startServer WebSphere_Portal
__ 2. Use a ConfigEngine task to install the IBM Script Portlet on your portal server.
__ a. From a command window, go to C:\IBM\WebSphere\wp_profile\ConfigEngine
__ b. Type the following ConfigEngine command all on one line.
ConfigEngine.bat install-paa
-DPAALocation=C:\Labfiles\ScriptPortlet-1.3.0\scriptportlet-app-1.3.0.paa
V10.1
Student Exercises
EXempty __ c. Wait until you see the task complete with a BUILD SUCCESSFUL message.
__ d. Type the following ConfigEngine command all on one line.

ConfigEngine.bat deploy-paa -DappName=scriptportlet-app
__ e. This task takes longer to finish than the installation task. Wait a few minutes until you
see the task complete with a BUILD SUCCESSFUL message.
__ 3. Restart the WebSphere_Portal server.
__ a. From a command window, go to C:\IBM\WebSphere\wp_profile\bin
__ b. Enter the command: stopServer WebSphere_Portal -user wpsadmin
-password wpsadmin
__ c. Wait for the server to stop completely.
__ d. Enter the command: startServer WebSphere_Portal
Student Exercises
Information
Developer mode
You might use the developer mode to improve start performance. When developer mode is
enabled, a list of applications to exclude from auto-starting is generated. The Script Portlet must be
removed from this list. You must edit the wp.base_TargetMapExclList.properties file by
adding the line scriptportlet. For more details, read the documentation in the WebSphere
Portal 8.5 IBM Knowledge Center article, Installing the IBM Script Portlet,
http://www.ibm.com/support/knowledgecenter/SSHRKX_8.5.0/script/script-po
rtlet/installing_on_the_base_portal.dita.
__ 4. Verify the installation of the Script Portlet.

__ b. Log in with user ID wpsadmin and password wpsadmin.
__ c. Click the Open administration menu icon, and click Portlet Management > Portlets.
__ d. In the Search field, type Script, and click Search. Verify that you see the Script Portlet
in the Manage Portlets pane.
V10.1
Student Exercises
EXempty Section 2. Create a script portlet application

In this section, you create an empty page on which to place the script portlet. You then create an
application by providing HTML, CSS, and JavaScript code.
Important
Internet access is required

The portlets in the remainder of the exercise require access to the Internet since the code snippets
make calls to remote websites. As a result, if the Internet is not available in your lab environment,
the portlets cannot render their output in the web browser.
__ 1. If necessary, log in to the portal with user ID wpsadmin and password wpsadmin.
__ 2. Create an empty page for the Script Portlet.
__ b. Click the Open toolbar icon if the toolbar is not already visible.
__ c. Turn on Edit Mode.
__ d. Click Create in the toolbar, and then click Page.

__ e. Select the Basic template, and add the properties for the new page.
• Page title: Developing Script Portlets
• Page insertion point: Child of current page
Student Exercises
__ f. Click Create Page.

__ g. Close the page creation pane.
__ h. You now see the new page with two empty columns.
__ 3. Add the Script Portlet to the page.

__ a. Click Create in the toolbar, then click Application.
__ b. Type Script Portlet in the search field, and then click Submit search icon.
V10.1
Student Exercises
EXempty __ c. You now see only the Script Portlet application. Click the + in the upper right corner of
the application icon.
__ d. Wait until you see the message: “The application 'Script Portlet' has successfully been
added to the page 'Developing Script Portlets'”. Close the Applications pane.
__ e. You now see the empty Script Portlet on the Developing Script Portlets page.
__ 4. Use the Script Portlet Editor to create an application. The application that you are going to
create uses the OpenStreetMap website (www.openstreetmap.org) to render a map of a
location whose latitude and longitude you provide. The data that is provided by
OpenStreetMap is available under the Open Database License.
__ a. Click Edit on the portlet to start the Script Portlet Editor.
Student Exercises
__ b. Click the HTML tab.
__ c. Type in the following code, or copy the code from C:/Labfiles/scripts/HTML

<!DOCTYPE html>
<html>
<head>
<title>Site Maps</title>
<h1 id=block1 > Company Site Maps </h1>
<div>
<h2 id=block2 name="page_header_text"
class="blockHeading">Austin, TX</h2>
<input id="button" type="button" onclick="showAustin()"
value="Click for map">
</div>
<div>
<h2 id=block3 name="page_header_text"
class="blockHeading">Markham, ON</h2>
<input id="button" type="button" onclick="showMarkham()"
value="Click for map">
</div>
</head>
</html>
V10.1
Student Exercises
EXempty
Note
HTML code
The code displays a heading for the portlet, and then defines two buttons. One button calls the
showAustin() function when it is clicked, the other calls the showMarkham() function. Both of
these functions are defined in the subsequent JavaScript code.
__ d. Click Save in the editor to preview. You see only the heading.
__ e. Click the CSS tab, and type in the following code, or copy the code from
C:/Labfiles/scripts/CSS.
#block1 { color: blue;
font-family: tahoma;
}
#block2 { color: brown;
background-color: khaki;
border: 1px solid black;
}
#block3 { color: gold;
background-color: green;
Student Exercises
border: 1px solid black;
}
#button {
font-weight: bold;
color: blue;
}
Note
CSS code
These CSS declarations define the style (font, color, and border) of the headings and buttons that
are referenced in the HTML code.
V10.1
Student Exercises
EXempty __ f. Click the JavaScript tab, and type in the following code, or copy the code from
C:/Labfiles/scripts/JavaScript.
function showAustin() {
location.href=
'https://www.openstreetmap.org/#map=15/30.40190/-97.71850';
}
function showMarkham() {
location.href=
'https://www.openstreetmap.org/#map=15/43.84879/-79.33829';
}
Note
JavaScript code
The JavaScript code defines two functions that are called showAustin() and
showMarkham().These functions are used to take the user to a new page by using the location
object. The hypertext reference href is assigned the URL for www.openstreetmap.org which
also contains the hardcoded latitude and longitude for Austin and Markham. This approach
transfers the user to the new page and keeps the original page in the history list of the browser. In
this way, the user can return by clicking the browser Back button.
__ g. Click Save to preview in the preview pane.
Student Exercises
__ h. You now see the Company Site Maps portlet in the preview pane.
__ i. Change the title of this portlet by clicking the pencil icon.
__ j. Type Company Site Maps for the title.
__ k. Click Save.
V10.1
Student Exercises
EXempty __ 5. Save the application into a IBM Web Content Manager library.
__ a. From the Script Portlet Editor, click Save as.
__ b. In the Save As dialog box, expand Script Portlet Library, click Script Portlet
Applications, and then click Save. This action stores the application in the IBM Web
Content Manager Content library.
__ c. Close the Script Portlet Editor.

__ 6. Verify that the Company Site Maps application now shows up on the Developing Script
Portlets page.
__ 7. Turn off Edit Mode and verify that the application is running in view mode.
Student Exercises
__ 8. Test the application by clicking the buttons.

__ a. Under Austin, TX, click Click for map.
__ b. Verify that you go the OpenStreetMap webpage and a map of the IBM Austin site is
displayed.
__ c. Click the browser Back button to return.

__ d. Click Click for map under Markham, ON, and verify that a map of the IBM Canada
Toronto Lab site is displayed.
V10.1
Student Exercises
EXempty __ e. Click the browser Back button to return.
Troubleshooting
If the browser hangs when trying to load the OpenStreetMaps page, click the browser Back button
and log out. Log in again as wpsadmin and click Click for map again.
Student Exercises
Section 3. Place the Company Site Maps application on a new

page
In this section, you add a page to the Home site, and place the Company Site Maps application on
that page.
__ 1. Go to the Home site and create a page that is named Maps
__ c. Turn on Edit Mode.
__ d. Click the Our Company tab to make it the current page.
__ e. Click Create in the toolbar, then click Page.
__ f. Select the Basic template, and add the properties for the new page.
• Page title: Maps
• Page insertion point: Next sibling of current page
__ g. Click Create Page.
__ h. Close the page creation pane.
__ 2. Click the Maps tab, and then open the toolbar and turn on the Edit mode.
__ 3. Add the Company Site Maps application to the Maps page.

__ a. Because, the Company Site Maps application was saved from the Script Portlet Editor
by using the “Save as” option, the application is available in the Content folder under
Script Portlet Applications. Click Create on the toolbar, and then click Content.
V10.1
Student Exercises
EXempty __ b. Click Script Portlet Applications.
__ c. You now see the Company Site Maps application. Drag the application to the Maps
page and drop it into the first column.
Student Exercises
__ d. Turn off the Edit mode, and you now see the Company Site Maps application in a
running state on the Maps page in view mode.
__ e. Test the application as you did before by clicking Click for map under each location.
Remember to click the browser Back button to return to the Maps page.
Troubleshooting
If the browser hangs when trying to load the OpenStreetMaps page, click the browser Back button
and log out. Log in again as wpsadmin and click Click for map again.
V10.1
Student Exercises
EXempty Section 4. Import an application into the Script Portlet Editor

In this section, you use the Import feature of the Script Portlet to bring an existing application
compressed file into the Script Portlet Editor.
__ 1. Go to the Developing Script Portlets page and add another instance of the Script Portlet.
__ b. Click the Developing Script Portlets tab.
__ c. Click Create in the toolbar, then click Applications.
__ d. Search for Script Portlet if necessary.
__ e. Click + in the upper right corner of the Script Portlet application to add it to the page.
__ f. Wait until you see the message: “The application 'Script Portlet' has successfully been
added to the page 'Developing Script Portlets'”. Close the Applications pane.
__ g. By default, the Script Portlet is added to the first column underneath the Company Site
Maps application. Click the portlet menu icon for the Script Portlet and click Move Right
to move it into the second column.
Student Exercises
__ 2. Import an existing Script Portlet sample application. You are going to import an application
that is named Angular Contacts. This application is built with the AngularJS framework and
the Bootstrap CSS library. It is an example of a "single page application" where the
AngularJS framework dynamically loads the different views within a single index.html
page.
__ a. Expand the Actions menu on the empty Script Portlet and click Import.
__ b. In the Script Portlet Import dialog box, click the Import Zip tab, and then click Browse.
__ c. Browse to C:\Labfiles\samples
V10.1
Student Exercises
EXempty __ d. Click the angular_contacts compressed file (angular_contacts.zip), and click

Open.
__ e. You now see the angular_contacts.zip file, click Import.
Student Exercises
__ f. Wait for the import to complete.
__ g. You can explore which files were imported by expanding the tree. When you are done
exploring close the Script Portlet Import pane.
V10.1
Student Exercises
EXempty __ h. Wait a few moments for the page to render, and you now see the imported application
on the page.
__ 3. Examine the application in the Script Portlet Editor.

__ a. Make sure that you are in Edit mode, and click Edit on the portlet.
__ b. The Script Portlet Editor comes up with all of the files in the application viewable and
editable.
Student Exercises
__ c. Expand the tree view on the left to examine which files are in the application.
__ d. Click any file name to see it displayed in the editor.
V10.1
Student Exercises
EXempty __ e. The preview window shows the functioning application. You can test the search feature
by typing in a search string. Try typing Steve.
__ 4. Change the title of the application.

__ a. Change the title by clicking the pencil icon and typing My Contacts.
__ b. Click Save.
__ c. Close the Script Portlet Editor.
Information
Angular Contacts Sample

The Angular contacts application is a simple contact list application for viewing and updating a list of
contacts.
Here are the key features that are illustrated in the sample:
• The four different views (list, details, update, and about) are separate HTML files that
are loaded as partial pages by using the AngularJS $routeProvider service, which is
configured in app.js.
• An AngularJS service named "contactsLocalStorageService" is used to retrieve and
update a list of contacts. Data initially comes from a JSON file but after that is stored by
using HTML5 local storage. It can be reset to the file data by clicking "Reset Default
Data."
Student Exercises
• The AngularJS $http service is used to load the default JSON data file, contacts.json.
• Three simple AngularJS controllers are used for: the list view, the details view, and the
update view.
• Three local JS files are used, and when the files are running in Script Portlet they are
combined into a single resource by WebSphere Portal's resource aggregation feature
(available in version 8.5, CF03 or later). The following
data-scriptportlet-combine-urls attribute in the index.html file causes Script
Portlet to enable the combining of the three local application JavaScript files.
<html data-scriptportlet-combine-urls="true">
• The Bootstrap library is used for styling of the application UI.
V10.1
Student Exercises
EXempty Section 5. Install and use the sp command-line tools

In this section, you learn how to install and configure sp command-line tools. You then use the sp
push command to bring an existing application folder into the IBM Web Content Manager library.
__ 1. Install the sp command-line tools.
__ a. From Windows Explorer, go to C:\Labfiles\ScriptPortlet-1.3.0.
__ b. Right-click the compressed file sp_cmdln.zip and click Extract All.
__ c. Change the destination folder to C:\sp_cmdln, and click Extract.
__ 2. Set the JAVA_HOME variable.

__ a. On the desktop of your lab image, right-click the Computer icon, and click Properties.
__ b. In the Control Panel, click Advanced system settings.
__ c. Select the Advanced tab, and click Environment Variables.
__ d. Under System variables, click New.
__ e. Type JAVA_HOME for the Variable name.
__ f. Type for the Variable value, C:\IBM\WebSphere\AppServer\java_1.7_64\jre
__ g. Click OK, click OK, then click OK again.
__ h. Close the Control Panel.
__ 3. Set the properties for the server in sp-config.json
__ a. From Windows Explorer, go to the directory: C:\sp_cmdln
__ b. Use Notepad++ to open the sp-config.json file.
__ c. Remove the comment symbol // and update the following properties.
• "scriptPortletServer": "http://wcm:10039",
• "portalUser": "wpsadmin",
Student Exercises
• "portalPassword": "wpsadmin",
__ d. Save the file, and close Notepad++.
__ 4. Use sp push to create a script portlet application
__ a. Open a new command window, go to C:\sp_cmdln.
__ b. Enter the following command:
sp push -contentRoot C:\Labfiles\samples\jqplot_chart
__ c. The command was successful. However, if the command fails, it is helpful to view the
sp_cmdln.log file.
__ 5. Verify that the new application is now available in the Content tab.
__ a. If necessary, log in to the portal with user ID wpsadmin and password wpsadmin.
__ c. Click Create in the toolbar.
__ d. Click Content, and then click Script Portlet Applications.
__ e. You should see the jqPlot Chart application that you pushed to the server.
__ 6. Optional: Place the jqPlot Chart application on a page, and use the Script Portlet Editor to
explore its features.
V10.1
Student Exercises
EXempty
Information
jqPlot Chart
This example shows a chart that is created with the jQPlot open source charting library. The data for
the chart in this example is defined right in the JS code. In a real world implementation, the data
would come from a REST service.
End of exercise
Student Exercises

In this exercise, you installed the Script Portlet and worked with some of its feature such as the
Script Portlet Editor and sp command-line tools. You created a script portlet application with the
editor and placed it on a page. You also learned how to import existing applications into the Script
Portlet Editor and push applications to the server.
V10.1
backpg
Back page

IBM Training: Front Cover

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

IBM Training: Front Cover

Uploaded by

Copyright:

Available Formats

V10.

IBM Training Front cover

Developing Websites Using IBM Web Content Manager 8.5

September 2015 edition

© Copyright International Business Machines Corporation 2015.

Exercises description . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . vii

Exercise 1. Overview of IBM Web Content Manager . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1-1

Exercise 2. Creating templates, components, and items . . . . . . . . . . . . . . . . . . . . . . . . . . . 2-1

Exercise 3. Pages, portlets, and page templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3-1

Exercise 4. Adding navigational components and search queries to a website . . . . . . . . . 4-1

Exercise 5. Item management . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5-1

Exercise 6. Personalization and categories . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6-1

© Copyright IBM Corp. 2015 Contents iii

Section 11. Creating a menu component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .6-36

Exercise 7. Custom authoring features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7-1

Exercise 8. Working with drafts, workflows, and projects . . . . . . . . . . . . . . . . . . . . . . . . . .8-1

Exercise 9. User access and security . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9-1

Exercise 10. Adding CSS to your website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10-1

Exercise 12. Working with the IBM Mobile Preview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12-1

Exercise 13. Using the IBM Script Portlet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .13-1

© Copyright IBM Corp. 2015 Trademarks v

© Copyright IBM Corp. 2015 Exercises description vii

What this exercise is about

What you should be able to do

Section 1. Introduction and administrative tasks

__ 2. Start the WebSphere Portal server.

__ 3. Enter user ID wpsadmin and password wpsadmin. Click Log in.

Changing sites by using the site menu

__ 2. Select Administration > Portal Content.

EXempty __ 3. On the portal content page, click Web Content Libraries.

__ 5. Modify permissions for the Contributor role.

EXempty __ b. On the Resource Permissions pane, click Add.

__ d. Select Designers and then click OK.

__ 9. Click the Library Resources icon for the Training Library.

__ 12. On the Resource Permissions for Editor, click Add.

__ 14. Select Writers and Executives and click OK. .

Section 2. IBM Web Content Manager site

Configuring the authoring portlet

__ 2. Click Site menu > Home.

__ 4. Click Applications menu > Content.

__ 5. On the Content page, select the Web Content Authoring tab.

EXempty __ 6. In the left column expand Preferences. Select Personalize.

__ 11. Log out of the portal.

EXempty Exploring the authoring portlet

__ 7. Explore the views.

Exercise review and wrap-up

What this exercise is about

What you should be able to do

Section 1. Creating a site area

__ 2. Create a site area by using the default site area template.

__ f. In the Untitled section, make the following changes:

EXempty - In the Name field, enter: Home

Section 2. Creating an authoring template

__ b. In the Name field, enter: Landing - Internet

EXempty __ c. Click Manage Elements.

__ d. For the Element type, select HTML.

__ h. Click the Default Content Properties tab.

You configure workflow for items in a later exercise.

__ b. Click Authoring Templates. An authoring template that is named Landing - Internet

Section 3. Creating a content item

__ b. In the Name field, enter: Home

EXempty __ c. In the Location section, click Select Location.

__ g. In the Body field, enter: This is the Home page