WEX v8 PoT-WCM Advanced CTC Enhancement

IBM Software
Lotus
Power To the People! Making Your

Content More Social with CTCv3
Lab Exercises
An IBM Proof of Technology
IBM Software
Contents
OVERVIEW
INTRODUCTION..................................................................................................................................................................4
DURATION...........................................................................................................................................................................4
LAB 1
LAB 2
CONTENT TEMPLATE CATALOG 5

1.1
TARGET SITE OVERVIEW.................................................................................................................................................6
1.2
BOOT-STRAPPING THE SITE............................................................................................................................................7
1.3
ABOUT US PAGE CREATION..........................................................................................................................................18
1.4
ARTICLES AREA...............................................................................................................................................................25
1.5
NEWS AREA......................................................................................................................................................................28
CUSTOMIZING COMPONENTS IN CTC (FOR EXPERTS)
38
2.1
CUSTOMIZATION: SIMPLE TEXT....................................................................................................................................38
2.2
CUSTOMIZATION: COMPETITIONS................................................................................................................................51
2.3
NEXT STEPS.....................................................................................................................................................................72
APPENDIX A
ADDITIONAL INFORMATION
APPENDIX B
NOTICES
APPENDIX C
TRADEMARKS AND COPYRIGHTS
Web Experience v8 PoT
73
74
76
Page 2
IBM Software
Overview
The Content Template Catalog, or CTC for short, is a set of generic templates for IBM WebSphere
Portal and IBM Web Content Manager. The templates are large building blocks that you can use to
rapidly build out a website skeleton, ready for content contribution. The catalog contains a set of pre-built
portlets that can be used to decorate the pages of your site with lists, slideshows, carousels, teasers,
etc. Just as important as the actual out of the box assets are the patterns embodied within these can
be be used to build easy-to-use self-service systems for non-technical users to manage websites.
The CTC may be downloaded from the Portal catalog:
https://greenhouse.lotus.com/plugins/plugincatalog.nsf/assetDetails.xsp?
action=editDocument&documentId=9867495EE281C75985257919004DBBEB
Introduction
This lab explains how to use the patterns available in the latest Content Template Catalog V3 (CTC V3)
to create a customized templated site management solution for your business users. In this lab we'll
guide you through the new capabilities of the CTC V3, designed to provide the range of modern site
designs that can be accomplished on the basis of the IBM WebSphere Portal and Web Content
Manager Version 7 and higher. CTC V3 features a new templating model, a comprehensive set of
templates and preconfigured portlets, and a content-oriented theme and layouts. After completing this
lab you will be able to use CTC V3 to build rich ready-to-use websites in minutes, with pre-configured
social services integration, make customizations, publish content, and change the design.
Duration
You should be able to complete this lab in approximately 75 minutes.
Page 3
IBM Software
Lab 1
Create Targeted site with CTC
The CTC consists of many components to use in your site creation including:
Page Templates and Micro-sites
CTC comes with an extensive set of page templates that represent typical types of pages and
content in a website
Each page template has an associated micro-site which is a pre-built content structure that is
instantiated along with the page
Component Configurations
Most the portlets in CTC display content items that are called component configurations, which are
content items that control the behavior of a component
There are four of these component configuration types included in CTC Block, List, Slideshow and
Carousel
Pre-configured Portlet Palette
CTC installs a pallete of portlets into the page builder customization shelf
These portlets are pre-configured to instantiate a component configuration content item when they
are dragged onto the page
Adaptive Component Stylings
Components are styled in such a way that they adapt when moved to different containers on the
page
This simplifies the authoring experience and provides greater freedom in how components are
placed and managed over time
Inline editing
CTC implements inline editing for both design and content
For the design side, component configurations are set up for inline editing, but are only available in
the edit mode for the page
For content, inline editing is available in the page read mode and is subject to access control
Content indexes also have inline editing options and allow to describe their index which are
managed by configurable components
Teaser and promotions are special cases as they do not get displayed on their own pages, and they
also have inline editing for both their content and configuration
Page 4
Power To the People! Making Your Content More Social with CTCv3
IBM Software
1.1
Target Site Overview
You will be building a small, but complete site for a Weightlifting club. This is just the skeleton of site
as you won't be adding content. This will include a Home, About Us, Articles, News and Competitions
areas. You will also create a customized type for adding simple content to pages, then you will
customize the Event type to suit the club's competition structure.
Your site will include navigation, sample content, and a home page that links into the site to pull out the
latest news, latest articles, and simplified type of teaser content.
The site covers a good cross-section of content types and also contains two types of customization of
the CTC templates.
After you have constructed the site, you can continue to explore modifying the look and feel, adding
more navigational constructs, and of course adding content.
Page 5
IBM Software
1.2
Boot-strapping the site
To get your site started, you need to first create a library to store site content and any customized design
artifacts. Next you will create a top level page that is template enabled and mapped to a root site area in
the new library. After this initial setup, you will be ready to start building the site from the top down using
the CTC page templates.
1.2.1
Create a library
__1.
Login to http://portalww.demos.ibm.com/wps/portal as a page approver with the userid and

password credentials of: wpadmin/passw0rd. This page should be the homepage for Firefox
on the desktop.
__1.
Navigate to the Administration section of your Portal, select Web Content Libraries section to
display your existing libraries and then click on the Create new library button.
Page 6
IBM Software
Page 7
IBM Software
__2.
Fill in the form to create the library named Weightlifting Club. This library will hold the club's
site and any customized assets. Click OK to save and create the library.
1.2.2
Add new library to the authoring portlet
__3.
Navigate to the authoring UI by clicking Applications > Content > Web Content Management,
open the Preferences section and click on Edit Shared Settings.
Page 8
IBM Software
__4.
Under the Library Selection section, select the following libraries:

Weightlifting Club
CTC Content
CTC Demo (should be there already)
CTC Design
CTC Process
Later in the lab, we will make some create templates that will be added into the CTC Design
library. This is the list of the libraries that make up the CTC solution.
Page 9
IBM Software
__5.
Click Add to add it to the Selected Libraries, click OK.
__6.
The library will now displayed in the Library Explorer.
1.2.3
Initial Site Area
__7.
Select the Weightlifting Club library and then New Site Area-> Default site area template.
Page 10
IBM Software
__8.
Fill in the form with your new site area information as shown below. Note that the Name
'wlclub' is used in URLs and the Title 'Weightlifting Club' is what appears for presentation
displays. Save and close your new site area.
Page 11
IBM Software
1.2.4
Create a temporary top level page
__9.
In the Portal Administration > Manage Pages view, click on Content Root and then New
Page. Enter name of temp (doesn't matter what this is, as long as its unique and something
you will remember). Click OK.
__10.
Follow the steps below to edit the new page properties to map it to your new Site Area in your
new Library. This will establish where all new Template pages will be added to the library.
Page 12
IBM Software
Page 13
IBM Software
1.2.5
Now will create the landing page for your new site.
__11.
Navigate to your new test page.
__12.
Put your mouse over the right hand side of the Publish Site button. You will see a drop-down
arrow display. Click it and choose Edit.
__13.
Choose More > New Child Page.
__14.
Name the page Weightlifting Club and use the Landing Page template. Click Create.
Page 14
IBM Software
__15.
You will see the starting page. You should be in Edit mode at this point.
Note: The images in the CTC solution come from the city of Sidney, Australia. The development
team went out and took some photos.
1.2.6
Move the Landing page to the top level
__16.
You should be in edit mode. You can tell if the button displays In View Mode. Select More
Move Page. Select to place the page above the CTC Demo page.
Page 15
IBM Software
__17.
You will see the Weightlifting Club page to the left of the CTC Demo page..
__18.
Go back to the temp page. Using the More menu again, delete the temp page you initially
created.
__19.
You will come back at a later step to decorate the Weightlifting Club page with navigation
and content, but now you will create the rest of the site!
Page 16
IBM Software
1.3
About Us page creation
The first content page you will create is the About Us area. This page is an example of static page
content which does not change regularly and appears in the main navigation.
Note: While editing and creating content in this section, you will be in "Edit" mode".
This page will be a structured content area storing history, organization and contact information for the
club. The templates used to create this page will show how to create a navigational grouping (using the
Landing template) and a fixed set of content pages (using the Standalone Topic template) which is a
typical structure for areas of the site that are relatively static.
__20.
While you are logged in as an Administrator, select the Weightlifting Club page, click Edit
mode-> More New Child Page
__21.
Enter the name for the page as About Us, select the Landing template, click Create Page (this
will take a short while to copy all the artifacts into your library... if you browser threatens to time
out, tell it to wait)
Page 17
IBM Software
__22.
Similarly, create the Club History page under the About Us(be sure this is the current page).
Click Edit mode-> More New Child Page, enter a name for the page Club History, select
the Standalone Topic template and click Create Page.
1.3.1
Update the Club History page by editing the default contents.
__23.
Navigate to Weightlifting Club About Us Club History (in edit mode) Hover over the
content on the page and click the Edit icon, enter name and title for to be History of the club,
optionally include some free form text in the Body section. When you are done, click Save and
Publish.
Page 18
IBM Software
__24.
Click Close in order to see the page with the edited portlet.
1.3.2
Create the Organization page as a sibling of the Club History page
__25.
Navigate back to the About Us landing page. In Edit mode select More New Child Page,
enter a name for the page Organization, Standalone Topic template and Create Page.
__26.
Edit this page to describe the Club's organization, note that the Rich Text Editor (RTE) Body
editor will allow insertion of images, as well as other HTML components. In the lab image the
default editor is used, this could be changed to the advanced editor of Ephox, EditLive. The
latter would allow you to import directly from Microsoft Word documents.
Page 19
IBM Software
You should be getting the hang of this now! You can close to see the results of your edits.
1.3.3
Create and edit the Contact Us page
Note: You are in Edit mode in the entire section. If you do not understand the instruction, try going into
Edit mode first.
__27.
Navigate back to the About Us page and add another new child page for the Contact Us
information using the Standalone Topic template. Edit the default content to contain how to
contact the Club. (Phone, email address as well as Facebook page link would be good to
include here).
__28.
You now have three pages under the About Us page. You will next use one of the CTC portlets
to include navigation on the About Us page for these child pages. Navigate back to the About
Us landing page.
__29.
Click Content, click All CTC Porlets, enter Navigation as a search team and click the Search
icon.
Page 20
IBM Software
__30.
Drag the Landing Navigation portlet into main container (below the Promotions slideshow
portlet) two times and the right hand container once. These three areas will hold the navigation
to the other pages.
__31.
Click Save in the customization toolbar.
__32.
The navigation portlet adds new component configuration content items to your site. These
content items need to be configured to point to each of the Topic pages you created earlier. To
do this click Edit Mode.
__33.
Hover over first navigation portlet and click gear icon.
Page 21
IBM Software
__34.
Scroll to bottom of form under the Context Override and click Browse Content. This field sets
the location in the site that the component will use for it's display.
__35.
Drill down into Weightlifting Club Content Weightlifting Club Weightlifting Club
About Us and select Club History then click OK. Click Save and close to save the
component configuration content. (Recent items is an alternate way to get to the item more
quickly)
Sometimes, Firefox will ask you if you want to "Leave the page" or "Stay on the page". Click the
Leave the page button to complete the action.
Page 22
IBM Software
__36.
You will now see the portlet populated with the link to the Club History page.
__37.
Repeat the edit steps for the second portlet in the main column selecting the Club
Organization area this time. Simply click the Browse Content > Recent Items > Club
Organization.
__38.
Lastly, edit the portlet in the sidebar column, selecting the Contact Information area Your
page now will have all the links to the other pages.
Note that even though the right column portlet is the same as the main column portlets, it has
adapted it's formatting style to the column width.
__39.
Click on Save and then click the View mode button to see how the page will look for visitor of te
site.
__40.
Let's take a quick check.
You now have an area called About Us that groups together a set of free-form content pages where
content can be added to explain the club's history, structure, and contact information
In addition to the top level navigation, you have added navigation into the page which is driven off the
sub area metadata this can be modified later to enter a description, select an image to display, etc.
Page 23
IBM Software
1.4
Articles Area
The Articles section is dynamic structured content, where the authors can build structured hierarchical
sections to organize published articles.
The articles area will be a place for club members to publish articles. This part of the site is expected to
grow over time into a hierarchical collection of articles, so we will use the Section Index and Section
Detail templates to build this area. These templates have hierarchical content navigation built-in, so the
authors can group their content hierarchically or write multi-page articles.
__41.
Page 24
The Articles page will be a child of the Weightlifting Club page. Select the Weightlifting
Club page and Edit mode-> More New Child Page, name the page Articles and select the
Section Index page template then Create page.
IBM Software
__42.
The resulting index page will have a left navigation hierarchy, currently selected navigation item
in the main section and contact information on the right. As items in the left navigation are
selected the main section will change to that section contents.
__43.
The previous Index page shows list of content items with just short descriptions of items. To
show the detail of selected items you will need to create the matching detail page under the
Articles page.
__44.
Select Edit mode-> More New Child Page. Name the page, select the Section Detail
page template and then create the page.
Page 25
IBM Software
This page is hidden from the top level navigation.

Note that if you misspelled the name of a page, it is easily changed in the Page Properties
section of the Edit Mode.
__45.
Page 26
The Articles area is now ready for contribution sections can be created to group articles,
topics can be created to store individual articles. To start with, this area could be just a list of
articles, the navigation will work with a flat structure. Over time sections could be added to
group the articles appropriately.
IBM Software
__46.
Note that the inline editing has options to add new sections or a new article topic.
1.5
News Area
The News section is a typical dynamic content that is shown in reverse date order with older content
dropping out of view.
Page 27
IBM Software
The news area will be a place for the club to report news about the club, or interesting things in
the world of weightlifting
__47.
Page 28
Under the Weightlifting Club page create a New Child Page named News using the News
Index page template. This will hold a list of the most recent News articles.
IBM Software
__48.
Create a child page to the News using the News Detail template.
It is good practice to save the page once in awhile. There is a Save button on the toolbar.
__49.
The news area is now ready for contribution.
Page 29
IBM Software
1.5.1
Edit content to list items on News page
Now that you have some sample content for your site you can go back and make some modifications to
the home page to highlight these items.
You will add some content lists to show the latest news and latest articles and provide a direct link to the
Contact Information area, as that is expected to be a popular page.
__50.
Return to the Weightlifting Home page. You see that there is now content in the bottom scroll
bar. This content is automatically placed here by specifying the content is a Special Feature
item when it is created or edited. Optionally you may select this item and edit it to see where
the selection is set.
NOTE: There is an issue with the article showing up in the image. Then the first fixpack.
Page 30
IBM Software
__51.
Return to the Weightlifting Home page to add the latest featured news slideshow portlet in the
central spot on the page.
__52.
Click Edit Mode Content. Notice that this would allow you to add any portlets, widgets and
gadget in this page in which the user has authorization.. Click CTC List Portlets and type News
into the search box and click the search icon.
__53.
Drag the News Featured w/ overflow portlet into the main column then click Save exit Edit
Mode.
Page 31
IBM Software
__54.
You now have the Latest News on the home page, when new News items are added to the
news page, they will automatically appear here as well.
__55.
Similarly to add the latest Articles list, click Edit mode Content, click CTC List Portlets,
enter Topics into the search box (the Topics template was used to build the Articles Page)
and click the search icon. Drag the Topics Latest portlet to the page into the right column.
Save
Page 32
IBM Software
__56.
To change the default label in the portlet, click Edit mode. Hover over the Latest Topics
portlet and click on the gear icon. Edit the List Title to say Latest Articles.
__57.
Scroll to the bottom of the form and select Browse content in the Context Override field.
__58.
Drill down into Weightlifting Club Content Weightlifting Club Weightlifting Club ,
select Articles, click OK and now click Save and close.
Page 33
IBM Software
__59.
Optionally, add a direct link to the contact information page, by Editing the page and dragging a
Landing Navigation portlet to the page in the top of the right hand column.
__60.
Optionally, Edit the page and edit the component configuration content to point to the Contact
Us information content. Save and close the content.
Page 34
IBM Software
__61.
Lastly the Weightlifting Club page navigation needs to be changed to say Home. This
navigation is specified in the site area definitions this is changed via the Authoring Portlet.
__62.
Navigate to the Applications Content Web Content Manager page.
__63.
In the Library Explorer, navigate to the top level site area Weightlifting Club Content
Weightlifting Club and edit the Weightlifting Club site area.
__64.
Change the display title to Home. Click Save and close.
Page 35
IBM Software
__65.
Page 36
Navigate back to the Weightlifting Club top level page to see that the breadcrumb now
displays Home (recall that the site area Name is used for the URL and the Title is used for the
display). Additionally the page also includes content lists and navigation.
IBM Software
Lab 2
Customizing components in CTC (for experts)
The content types and templates supplied with CTC are necessarily generic the content types are
intended to cover many scenarios, and the page templates are quite minimal so they can be used in
most scenarios. These general types might be fine in many cases, but it is through customization that
you can really take advantage of the patterns implemented in CTC and build solutions that are a good fit
for your site and your users.
Sample customizations may include changes to:
Content types
For many scenarios the out of the box types have too many fields, and for other scenarios
they will not have specific required fields
For a self service solution they need to be de-genericized by removing unneeded
generalisations, and by adding specific support for your scenario
Page templates
For any specific site design there will be repeated patterns of layout and content that can be
encoded into a page template
Making very specific templates for common patterns has a huge impact on the ease of use of
your self service solution, and greatly speeds up the creation of new pages
2.1
Customization: Simple Text
In this part of the lab you will create a new content type based on the CTC Teaser pattern. This will be a
simplified version of a teaser that is more structured only offering the user fields for a text block (not
markup), a link, and a selection of 3 images. This simple text content can be dropped onto any page to
just directly add content to the page that is easily changed.
__1.
Create new authoring template.

__a.
Navigate to the Applications Content Web Content Management.
__b.
Navigate to the Weightlifting Club library, click New Authoring Template -->
Content Template.
__c.
Name this template Simple Content.
Page 37
IBM Software
Page 38
__d.
Click on Default Content.
__e.
Expand the properties icon for the Display Title field and hide this field. Note that
clicking on the properties icon after your selection will close the properties settings.
__f.
Repeat for the Description field as well.
IBM Software
__g.
Click on Manage Elements.
__h.
Enter a Text element called Content, click Add.
__i.
Repeat to add a Link element called Link.
__j.
Repeat to also add an Option Selection element called Icon.
__k.
Click OK.
Page 39
IBM Software
__l.
Scroll down to the Link element.
__m. Expand the properties section for Display link as and select Hide field.
Page 40
__n.
Also hide Link Text, Link Description, Link Target and Link Additional Attributes.
This will keep the form very simple for authors.
__o.
Scroll down to the Icon element, expand the properties section for Icon
__p.
Enter options of 1, 2, 3 (not with commas, but carriage returns)
IBM Software
__2.
__q.
Click on the Default Content Properties tab, expand workflow and uncheck the
enable workflow for items created with this authoring template property
__r.
Click Save. This will leave the Authoring Template open for more edits.
Create new presentation template
Page 41
IBM Software
__a.
in the Library Explorer view, click New Presentation Template. Name your
template Simple Content Template
__b.
Paste the HTML from the grey box into the presentation markup (watch the quotes, they
should be standard quotes). The file is in the /root/Desktop/Lab Files/. (There is a link
on the Desktop.) The file is named Simple Content Template.txt.
[Component id="661f7a5a-9b93-4820-b5f2-099a08e261a7:NC9jdGMrZGVzaWduL2lubGluZSBlZGl0aW5nL3Rvb2xiYXIgZm9yIHRlYXNlcnM="
name="ctc+design/inline editing/toolbar for teasers"]
<div class="contentIndex" style="margin-bottom:20px;">
<div class="itemDetails">
<div class="itemImage">
<a href="[Element context="current" type="content" key="link" format="url"]">
[Plugin:ifEqual value2="1" value1="[Element context='current' type='content' key='Icon']"][Component id="a3a70cad-02c34135-a2e8-3f95067de8de:NC9jdGMrY29udGVudC9pbmRleCBpbWFnZXMvbmlnaHQgMDE=" name="ctc+content/index images/night 01"]
[/Plugin:ifEqual]
[Plugin:ifEqual value2="2" value1="[Element context='current' type='content' key='Icon']"][Component id="aceacadc-65b44a76-aa4f-299b110509e4:NC9jdGMrY29udGVudC9pbmRleCBpbWFnZXMvbmlnaHQgMDI=" name="ctc+content/index images/night 02"]
[/Plugin:ifEqual]
[Plugin:ifEqual value2="3" value1="[Element context='current' type='content' key='Icon']"][Component id="53d1313d-c1c34288-bd26-5123d3bd750b:NC9jdGMrY29udGVudC9pbmRleCBpbWFnZXMvbmlnaHQgMDM=" name="ctc+content/index images/night 03"]
[/Plugin:ifEqual]
</a>
</div>
<div class="itemTitle">[Element context="current" type="content" key="content"]</div>
</div>
</div>
Page 42
IBM Software
__c.
__3.
Click Save and notice that in the component tag, an additional ID entry is added.
Map the presentation template to the authoring template.

__a.
Navigate back to the Simple Content authoring template, which should still be open.
__b.
Click on the Content Template tab.
__c.
Click on the triangle (quick select) next to the Select Presentation Template prompt.
__d.
Click on the Simple Content Template.
__e.
Click Save and close
Page 43
IBM Software
2.1.1
Page 44
Create sample content to be instantiated with each portlet

__f.
In the Library Explorer, click on New Content Weightlifting Club / Simple

Content
__g.
Click on Select Location
__h.
Select the Weightlifting Club library and navigate to the root site area (you will store
this here for now, but you may wish to create a special library or area for these
prototype content items). Click OK
IBM Software
Page 45
IBM Software
__4.
Create sample content to be instantiated with each portlet.

__a.
__5.
Page 46
Enter a name Sample Simple Content, enter some sample text This is sample
content, select one of the Icon options 1, click Save and close.
Create portlet for palette

__a.
Navigate to Administration Portlets, enter teaser into the search field, click
Search.
__b.
Click the Copy Portlet icon for the Teaser portlet (not the Teaser Reference portlet).
__c.
Call this portlet Simple Content, click Ok.
IBM Software
__6.
Configure your new Simple Content Portlel.

__a.
Navigate to the Weightlifting Club site, click Edit mode page, click Content. Click
All CTC Portlets, enter Simple into the search box and click Search.
__b.
Select your new portlet and drag it to the page. Click Save & View.
Page 47
IBM Software
Page 48
__c.
Click Edit mode . Click the new portlet (which still displays teaser_1 for now) menu
and click Configure. Configure will establish the portlet settings for any subsequent
usage of this portlet.
__d.
Click the Edit link under the Content section.
__e.
Drill down to Weightlifting Club Home select Sample Simple Content then click
Ok. Scroll down to the end of the portlet form and click Ok
IBM Software
__7.
__f.
Now your portlet is configured for use on any other page, so you can delete it from this
page and re-add it to be sure the configuration is set correctly. Edit the page again,
click the new portlet (which still shows the Teaser!) menu and click Delete.
__g.
Click Save & Exit.
Use the new configured Simple Content portlet.

__a.
Edit the page, select Content and find your portlet, then the drag the now configured
Simple Content portlet onto the page. Save.
__b.
This action will create a new Simple Text Content item under the Weightlifting Club
page site so that it may be edited to contain what ever the author needs on the page.
Page 49
IBM Software
This portlet will allow anyone to post simple messages up onto the site.
2.2
Customization: Competitions
Lastly the Competitions area is date-oriented content that you will customize for this scenario by
copying the CTC Event template and adding some modifications to use as our Competition template.
This is a more complex scenario where you will not only create a new content type (as you did for the
Simple Content) but also build a new set of pages templates for creating pages for this content.
The Weightlifting Club wants to host a calendar of competitions, and they want to add extra fields to
specify things like whether this is an open, novice or masters competition, whether both women's and
men's competition are being run, etc.
To do this you will:
Instantiate the Competitions area based on the out of the box Event templates
Copy the Event authoring and presentation templates and modify them to suit the competition
scenario
Apply these changes to the Competitions area
Template-ize this into a new Competition template.
The result is a new template that may be used to created other pages on this site as well as other sites
with similar needs.
Page 50
IBM Software
__1.
Instantiate the Competitions area based on the out of the box Event templates
__a.
In earlier steps, you used the CTC Page templates to create other pages in this site.
Using that experience, create a new Competitions page using the Event Index page
template under the Weightlifting Club page.
__b.
Create the matching details Item page as a child of the Competitions page.
Page 51
IBM Software
__c.
Page 52
This will create not only the page but some default event items as well.
IBM Software
__d.
Edit the list title to show Upcoming Competitions, Save and close.
Page 53
IBM Software
__2.
__3.
Page 54
Copy the Event authoring and presentation templates and modify them to suit the competition
scenario
__a.
Navigate to Applications Content Web Content Management, switch to the CTC

Design Library, select the Authoring Templates view, select the Event template, click
More Actions Copy.
__b.
Select the Weightlifting Club library (in the dialog) for the location. Click OK.
IBM Software
__c.
To edit the copied template, switch to the Weightlifting Club library (in the Library
Explorer), select the Event template and Edit.
__d.
Edit the template metadata for Name, Title, Description to Competition AND be sure
to clear the localization from the title.
Page 55
IBM Software
__e.
__f.
Page 56
Click Manage Elements, add a new Option Selection element called Class, add
another Option Selection element called Gender, move the two new elements to the
top of the list then scroll down and click OK.
IBM Software
__g.
Navigate to the Default Content tab, expand the properties section for the Class
element, enter Novice, Open and Masters as the options.
__h.
Expand the Gender element, select Multiple Select and enter Men and Women as
options. These are the available classes for the competition.
__i.
Click Save, keeping the Authoring template open.
__j.
In the Library Explorer, switch to the CTC Design Library, select the Presentation
Templates view, find the Event Template, click More Actions Copy.
Page 57
IBM Software
__k.
Page 58
Select the Weightlifting Club library (in the dialog) and select OK.
IBM Software
__l.
Edit the copied template in the Weightlifting Club Library.
__m. Enter the Name and Title as Competition Template AND clear the localization from
the title.
Page 59
IBM Software
__a.
Insert the markup from the grey box into the Presentation markup in the indicated
location, you may optionally use the Insert Tag button to build these tags. There is a
helper file named Competition Presentation snippet.txt The file is in the
/root/Desktop/Lab Files/. (There is a link on the Desktop.)
NOTE: To find the location in the html, simply press Ctrl+F while in the field. The
browser will allow you to search. Look for "header separator" and add the code after it.
<div class="contentInfo">[Element context="current" type="content" key="Class"]</div>

<div class="contentInfo">[Element context="current" type="content" key="Gender"]</div>
Page 60
IBM Software
__n.
Click Save and close.
__o.
Navigate to the Competition authoring template which should still be open, in the
Authoring Template tab, click on the quick selection triangle on the Default
Presentation Template field, select the Competition Template.
Page 61
IBM Software
__p.
Click Save and close.
Your Authoring and Presentation Template changes are complete.

__4.
Apply the new templates to the Competitions area content items.

__a.
Page 62
Navigate to the Library Explorer, switch to Weightlifting Club Content, drill down
into Content Weightlifting Club Home Competitions Content
IBM Software
__b.
Select all content items in this area, click More Actions Apply Template
Select the Competition template, enable the Add new elements option, click Ok.
Page 63
IBM Software
__c.
Page 64
A successful message will be displayed. The default content items will now include the
fields for Gender and Class and will allow the author to make the proper selections.
IBM Software
__5.
Template-ize this into a new Competition template

__a.
Navigate up to the Weightlifting Club Home area, select the Competitions area,
click More Actions Move .
Page 65
IBM Software
Page 66
IBM Software
Select Weightlifting Club (root site area) as the location Note you are just
moving it out of the main site map, typically you would move this to a library used
to store micro-sites just as the CTC Content library is used for the CTC
microsites.
__b.
__6.
Click Ok.
For a page to be included as a Template page, it needs to be under the Page templates page in
portal. To move your page:
__a.
Navigate to the Weightlighting Club site Competitions area, click Edit Mode
More -> Move Page
\
Page 67
IBM Software
__7.
Page 68
__b.
Drill down to Administration WebSphere Portal Portal User Interface, select

Page Templates. Click Save.
__c.
Your new template is now available to be used for a page.
Create new Index and detail Competition pages using the new template.
IBM Software
__a.
Navigate to the Weightlifting Club page (you should no longer see the Competitions
page, as you just moved this to become a page template), click Edit Mode More
New Child Page, enter a name for the page as Competitions, select the new
Competitions template (scroll to the bottom of the list).
__b.
Repeat the page creation using the Competition Detail Template.
__c.
Your new pages are now ready to be updated with the current competition events.
\
Page 69
IBM Software
You can edit the competitions or add a new Competition that includes Gender and Class
selections to be sure they render on the detail page.
Page 70
IBM Software
The new Templates may now be used to create other pages as well.
2.3
Next Steps
CTC contains useful out of the box templates and patterns for creating you own templates. In this lab
you built the framework for a small site using a combination of out of the box and customized templates,
you also added pre-configured portlets to the palette and creating page templates.
Now that you have a feel for how to create your own template pages and portlets here are some things
you may want to try: Modifying the index design for the Competitions page, creating a new list of
showing upcoming competitions on the Home page that include the Gender and Class fields.
Workflow requirements were not addressed in this lab, but clearly each of these scenarios could have
different workflow processes associated with them these could also be embedded in the templates.
Access control is another requirement that may be added to your templates. For example, you may
need to restrict usage of the various templates, portlets and content types to reduce the complexity
presented to non-technical users.
You have now successfully completed this lab.
Page 71
IBM Software
Appendix A Additional Information

CTC Download
https://greenhouse.lotus.com/plugins/plugincatalog.nsf/assetDetails.xsp?
action=editDocument&documentId=9867495EE281C75985257919004DBBEB
CTC Wiki
http://www-10.lotus.com/ldd/portalwiki.nsf/dx/IBM_Content_Templates_Catalog_V3.0
CTC Forum
http://www-10.lotus.com/ldd/wcmforum.nsf/topicThread.xsp?
action=openDocument&documentId=0D500FC5A09344AE8525791B00124089
CTC Videos
http://www.youtube.com/watch&v=Q3-xqy2osD0 (5min)
http://youtu.be/i81-J4_wTIk (10:19 min)
Wiki with Community Articles, Documentation and a Learning Center for WebSphere Portal, Web
Content Manager, etc.
http://www-10.lotus.com/ldd/portalwiki.nsf
Planning a website in this wiki
http://www-10.lotus.com/ldd/portalwiki.nsf/dx/Planning_a_website_wcm7
http://www-10.lotus.com/ldd/portalwiki.nsf/dx/Planning_a_website_wcm8
Page 72
TECH-P19 Using CTCv3
IBM Software
Appendix B Notices
This information was developed for products and services offered in the U.S.A.
IBM may not offer the products, services, or features discussed in this document in other countries.
Consult your local IBM representative for information on the products and services currently available in
your area. Any reference to an IBM product, program, or service is not intended to state or imply that
only that IBM product, program, or service may be used. Any functionally equivalent product, program,
or service that does not infringe any IBM intellectual property right may be used instead. However, it is
the user's responsibility to evaluate and verify the operation of any non-IBM product, program, or
service.
IBM may have patents or pending patent applications covering subject matter described in this
document. The furnishing of this document does not grant you any license to these patents. You can
send license inquiries, in writing, to:
IBM Director of Licensing
IBM Corporation
North Castle Drive
Armonk, NY 10504-1785
U.S.A.
For license inquiries regarding double-byte (DBCS) information, contact the IBM Intellectual Property
Department in your country or send inquiries, in writing, to:
IBM World Trade Asia Corporation
Licensing
2-31 Roppongi 3-chome, Minato-ku
Tokyo 106-0032, Japan
The following paragraph does not apply to the United Kingdom or any other country where such
provisions are inconsistent with local law: INTERNATIONAL BUSINESS MACHINES CORPORATION
PROVIDES THIS PUBLICATION "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS
OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF NONINFRINGEMENT, MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE. Some states
do not allow disclaimer of express or implied warranties in certain transactions, therefore, this statement
may not apply to you.
This information could include technical inaccuracies or typographical errors. Changes are periodically
made to the information herein; these changes will be incorporated in new editions of the publication.
IBM may make improvements and/or changes in the product(s) and/or the program(s) described in this
publication at any time without notice.
Any references in this information to non-IBM Web sites are provided for convenience only and do not in
any manner serve as an endorsement of those Web sites. The materials at those Web sites are not part
of the materials for this IBM product and use of those Web sites is at your own risk.
IBM may use or distribute any of the information you supply in any way it believes appropriate without
incurring any obligation to you.
Appendix
Page 73
IBM Software
Any performance data contained herein was determined in a controlled environment. Therefore, the
results obtained in other operating environments may vary significantly. Some measurements may have
been made on development-level systems and there is no guarantee that these measurements will be
the same on generally available systems. Furthermore, some measurements may have been estimated
through extrapolation. Actual results may vary. Users of this document should verify the applicable data
for their specific environment.
Information concerning non-IBM products was obtained from the suppliers of those products, their
published announcements or other publicly available sources. IBM has not tested those products and
cannot confirm the accuracy of performance, compatibility or any other claims related to non-IBM
products. Questions on the capabilities of non-IBM products should be addressed to the suppliers of
those products.
All statements regarding IBM's future direction and intent are subject to change or withdrawal without
notice, and represent goals and objectives only.
This information contains examples of data and reports used in daily business operations. To illustrate
them as completely as possible, the examples include the names of individuals, companies, brands, and
products. All of these names are fictitious and any similarity to the names and addresses used by an
actual business enterprise is entirely coincidental. All references to fictitious companies or individuals are
used for illustration purposes only.
COPYRIGHT LICENSE:
This information contains sample application programs in source language, which illustrate programming
techniques on various operating platforms. You may copy, modify, and distribute these sample programs
in any form without payment to IBM, for the purposes of developing, using, marketing or distributing
application programs conforming to the application programming interface for the operating platform for
which the sample programs are written. These examples have not been thoroughly tested under all
conditions. IBM, therefore, cannot guarantee or imply reliability, serviceability, or function of these
programs.
Page 74
TECH-P19 Using CTCv3
IBM Software
Appendix C Trademarks and copyrights

The following terms are trademarks of International Business Machines Corporation in the United States,
other countries, or both:
IBM
Cube Views
Informix
Rational
System z
AIX
DB2
Lotus
Redbooks
Tivoli
CICS
developerWorks
Lotus Workflow
Red Brick
WebSphere
ClearCase
DRDA
MQSeries
RequisitePro
Workplace
ClearQuest
IMS
OmniFind
System i
System p
Cloudscape
IMS/ESA
Adobe, the Adobe logo, PostScript, and the PostScript logo are either registered trademarks or
trademarks of Adobe Systems Incorporated in the United States, and/or other countries.
IT Infrastructure Library is a registered trademark of the Central Computer and Telecommunications
Agency which is now part of the Office of Government Commerce.
Intel, Intel logo, Intel Inside, Intel Inside logo, Intel Centrino, Intel Centrino logo, Celeron, Intel Xeon, Intel
SpeedStep, Itanium, and Pentium are trademarks or registered trademarks of Intel Corporation or its
subsidiaries in the United States and other countries.
Linux is a registered trademark of Linus Torvalds in the United States, other countries, or both.
Microsoft, Windows, Windows NT, and the Windows logo are trademarks of Microsoft Corporation in the
United States, other countries, or both.
ITIL is a registered trademark, and a registered community trademark of The Minister for the Cabinet
Office, and is registered in the U.S. Patent and Trademark Office.
UNIX is a registered trademark of The Open Group in the United States and other countries.
Java and all Java-based trademarks and logos are trademarks or registered trademarks of Oracle
and/or its affiliates.
Cell Broadband Engine is a trademark of Sony Computer Entertainment, Inc. in the United States, other
countries, or both and is used under license therefrom.
Linear Tape-Open, LTO, the LTO Logo, Ultrium, and the Ultrium logo are trademarks of HP, IBM Corp.
and Quantum in the U.S. and other countries.
Appendix
Page 75
NOTES
NOTES
Copyright IBM Corporation 2012
The information contained in these materials is provided for
informational purposes only, and is provided AS IS without warranty
of any kind, express or implied. IBM shall not be responsible for any
damages arising out of the use of, or otherwise related to, these
materials. Nothing contained in these materials is intended to, nor
shall have the effect of, creating any warranties or representations
from IBM or its suppliers or licensors, or altering the terms and
conditions of the applicable license agreement governing the use of
IBM software. References in these materials to IBM products,
programs, or services do not imply that they will be available in all
countries in which IBM operates. This information is based on
current IBM product plans and strategy, which are subject to change
by IBM without notice. Product release dates and/or capabilities
referenced in these materials may change at any time at IBMs sole
discretion based on market opportunities or other factors, and are not
intended to be a commitment to future product or feature availability
in any way.
IBM, the IBM logo, and ibm.com are trademarks of International
Business Machines Corp., registered in many jurisdictions
worldwide. Other product and service names might be trademarks of
IBM or other companies. A current list of IBM trademarks is
available on the Web at Copyright and trademark information at
www.ibm.com/legal/copytrade.shtml.

WEX v8 PoT-WCM Advanced CTC Enhancement

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

WEX v8 PoT-WCM Advanced CTC Enhancement

Загружено:

Авторское право:

Доступные форматы

IBM Software

Power To the People! Making Your

An IBM Proof of Technology

CONTENT TEMPLATE CATALOG 5

TARGET SITE OVERVIEW.................................................................................................................................................6

BOOT-STRAPPING THE SITE............................................................................................................................................7

ABOUT US PAGE CREATION..........................................................................................................................................18

CUSTOMIZING COMPONENTS IN CTC (FOR EXPERTS)

CUSTOMIZATION: SIMPLE TEXT....................................................................................................................................38

TRADEMARKS AND COPYRIGHTS

Web Experience v8 PoT

Web Experience v8 PoT

Create Targeted site with CTC

Pre-configured Portlet Palette

Adaptive Component Stylings

CTC implements inline editing for both design and content

Target Site Overview

Web Experience v8 PoT

Boot-strapping the site

Login to http://portalww.demos.ibm.com/wps/portal as a page approver with the userid and

Web Experience v8 PoT

Add new library to the authoring portlet

Under the Library Selection section, select the following libraries:

Web Experience v8 PoT

Click Add to add it to the Selected Libraries, click OK.

The library will now displayed in the Library Explorer.

Initial Site Area

Web Experience v8 PoT

Create a temporary top level page

Web Experience v8 PoT

Navigate to your new test page.

Choose More > New Child Page.

Move the Landing page to the top level

Web Experience v8 PoT

About Us page creation

Web Experience v8 PoT

Update the Club History page by editing the default contents.

Create the Organization page as a sibling of the Club History page

Web Experience v8 PoT

Create and edit the Contact Us page

Click Save in the customization toolbar.

Hover over first navigation portlet and click gear icon.

Web Experience v8 PoT

Let's take a quick check.

Web Experience v8 PoT

This page is hidden from the top level navigation.

Web Experience v8 PoT

The news area is now ready for contribution.

Web Experience v8 PoT

Edit content to list items on News page

Web Experience v8 PoT

Web Experience v8 PoT

Navigate to the Applications Content Web Content Manager page.

Change the display title to Home. Click Save and close.

Web Experience v8 PoT

Customizing components in CTC (for experts)

Customization: Simple Text

Create new authoring template.

Navigate to the Applications Content Web Content Management.

Name this template Simple Content.

Web Experience v8 PoT

Click on Default Content.

Repeat for the Description field as well.

Click on Manage Elements.