© 2014 IBM Corporation

The Content Template CatalogIBM Digital Experience Version 8.5 -Web Content Management

IBM Ecosystem Development

2

IBM’s statements regarding its plans, directions, and intent are subject to change or withdrawal without notice at IBM’s sole discretion.

Information regarding potential future products is intended to outline our general product direction and it should not be relied on in making a purchasing decision.

The information mentioned regarding potential future products is not a commitment, promise, or legal obligation to deliver any material, code or functionality. Information about potential future products may not be incorporated into any contract. The development, release, and timing of any future features or functionality described for our products remains at our sole discretion

Performance is based on measurements and projections using standard IBM benchmarks in a controlled environment. The actual throughput or performance that any user will experience will vary depending upon many factors, including considerations such as the amount of multiprogramming in the user’s job stream, the I/O configuration, the storage configuration, and the workload processed. Therefore, no assurance can be given that an individual user will achieve results similar to those stated here.

Please Note

Agenda● Overview of the IBM Content Template Catalog (CTC)● What's new in CTC● Upgrading● Pre-requirements● Support● Limitations and known issues● Defects fixed● General debugging● Useful Links● What's next for CTC?

CTC is a structured, template-driven toolkit that allows business users to rapidly build websites from a suite of fully functional templates and assets

Business ValueAddressing Common Challenges

Build a rich site rapidlyUse its suite of ready-to-use templates and assets to get started

Give business users control

It makes it simple to author, design and modify your sites

Tailor and extend it

Replace the design and customize the templates – for your sites

Business users assemble Pages

Authors create and edit content

Designers create Templates

Building Rich Sites Rapidly and Collaboratively

Build the ‘archetypes’ used to create all the pages, content, components etc

Populate Pages with (existing and new) content and

components & select layout

options

Create content articles, using the elements defined

by the content and page type

Page TemplatesRange of typical

content and page types used in real

sites

PortletsPre-configured

portlets that when dropped on pages

immediately display content

ComponentsCommon page functions from slideshows and

carousels to navigation, social

plugins and lists of content

Authoring ToolsBuilt-in inline

editing tools to simplify the authoring

experience

FunctionalitySEO, metadata, analytics, social

integration, tagging & rating

etc – all built according to best

practice.

What’s Under the Covers?

Ready-to-use Page Templates

Landing Pages

Index/category Pages

Detail article pages

Structured content areas

Ready-to-use Page Components

Full suite of ready to use assets:– Slideshows and carousel components

are supplied for you, to provide dynamic options for display lists of content

Configure, modify and replace as needed

– Mix and match the presentation designs with lists of different content types

– Configure these components to your specific needs and content

Slideshow

Latest items list

Navigation and Teaser Text

Carousel

Pre-Integrated with Social Media

CTC gives you out of the box functionality for feeds, Facebook, Twitter, E-Mail, Phone or print (with adapted style!)

– Easy to add other integrations by modifying a single HTML Component

Search Engine Optimization (SEO) and Analytics Ready

Content meta data automatically integrated within the pages– Eg the Content Title, Categories and keywords, Authors and CampaignID from promotions– This is managed by a hidden portlet called metadata and Analytics

Create once, deliver everywhere

Desktop, mobile and tablet optimized sites and templates – using Responsive Design for device adaptation

Mobile Support & Multi-device Delivery

Desktop

A combination of device width,

resolution, and device type triggers

changes.

Everything in CTC is responsive!

Simple authoring experience for all content

Modify and create new content - all within the pageEdit properties, images, rich text and more

Inline Editing

Super simple editing

Agenda● Overview of the IBM Content Template Catalog (CTC)● What's new in CTC● Upgrading● Pre-requirements● Support● Limitations and known issues● Defects fixed● General debugging● Useful Links● What's next for CTC?

15

● CTC4.1.2 was the last version of the Content Template Catalog, available for download from the greenhouse catalog CTC4.2 is now available for xDx 8.5. The CTC 4.1.2 release included the following:

● For the CTC 4.1.2 release we've incorporating the capabilities of the Portal/WCM Now! Offerings as 2 new site templates called the Internet and Intranet site templates.

● New page templates● Usability improvements, including in-depth documentation● True inline rich text editing using the new CK4 editor● CTC 4.1.2 requires Portal 8.0.0.1 CF9

● A note on version numbering● CTC 4.0 had 2 updates, these releases will be referred to as 4.0, 4.0.1 and 4.0.2.● CTC 4.1 replaces CTC 4.0 on the greenhouse catalog. No new updates will be made to 4.0.x.

Customers should move to 4.1.x to get fixes there.

What was new in CTC 4.1.2

16

● CTC 4.2 has been released on greenhouse. This build includes fixes for the issues you raised in the community forums.

https://greenhouse.lotus.com/plugins/plugincatalog.nsf/assetDetails.xsp?action=editDocument&documentId=3FD86133125CB80385257CD000824EB5

● New features in CTC 4.2 include:● WebSphere Portal 8.5 theme support:

● CTC 4.2 supports and requires the WebSphere® Portal 8.5 theme● Embedded editing

● All text and rich text fields throughout Content Template Catalog are now editable using the new "embed" mode for inline editing. The embed mode retains the exact styles and layout of the page, giving you true WSYWIG editing of all fields.

● Localized CTC demonstration sites, available in English, Arabic, German, Spanish and Chinese.● Enhanced features in Site Builder 4.2 include:

● Site and section creation can be achieved by users without requiring them to have Administration permission's in Portal

What's new in CTC 4.2

17

New Templates – Offerings● The offering page template is used to promote products or services. It includes an image

gallery and video gallery so that you can upload multiple product photos and videos.

18

New Templates – Offerings

● Offerings are the most advanced template yet● They consist of an entire site area:

● content to represent the offering● a site area that contains the offering images● a site area the contains the offering videos

● When an offering page is created, an entire new microsite of content is created in the web content library

19

New Templates – Offerings● The CTC 'create offering' code hooks into the inplace edit creation javascript code to cause this

code to do a branch copy, rather than creating the content with a template● The javascript is in ctc.theme/content.js. It hits the CopyBranch JSP.● It hooks into wcmModules.inplace.create.showForm() which is a new javascript hookpoint added in

CF7● The JSP is called CopyBranch.jsp. It uses the Java Public API branch copy.

● Where is the content?● The content that is copied to create a new offering is in CTC Content/Offering● The Micro-site (which is copied when a new Offerings page is created) is in CTC Content/Offerings

● Know issues● Templates based on site areas, such as sections and offering are published immediately (unless in a

project) and have no draft stage.● Offerings can't be deleted using the inplace delete menu option, since offerings are a site area, not

content. You have to delete the offering site area in the Authoring UI. Aim to fix in CTC 4.next on WCM 8.next. (Coming soon)

New Templates - Contact Us● The Contact Us page template allows users to add a 'contact us' form to their site to send email messages● Users can configure mail settings through edit mode on the page

Edit mode

New Templates - Contact Us - Customisation● Both the sample 'contact us' form and the

email message design is completely customisable

● Contact us form● HTML component● Users can add additional fields on the

contact us form, needs to be referenced by the email design for the values to be used

● Email category selection driven by taxonomy component. User can customise with their own taxonomy.

● Can be used as 'inspiration' to create your own form

Categories – Taxonomy Component

New Templates - Contact Us - Design

Submission ConfigForm Config

HTML Component:Form Design

HTML Component:Email Design

JSP:emailAction.jsp

Submit Page

Contact Us Form

Submission Action

Email Formatter

Mail Server Config

Email Address

MessagesSuccess Message

Fail Message

Java:ctc.emailOn form submit

Email Processing

23

New Templates – Contact Us - Submission Action

● Submission action is processed by a JSP● emailAction.jsp uses Java defined classes (ctc.email component) to send emails● Deployed in wp_profile/installedApps/<node>/CTC.ear/ctc.war/

● Note: For now the Java source code is not shipped with CTC. We aim to do this in the future.

New Templates – Contact Us - Email Component

● New component ctc.email● Contains code to process contact form and send emails using the configuration on the

Submission page● Uses javax.mail library● com.ibm.workplace.wcm.ctc.contactus.EmailAction

● Ensures required fields for messages are filled out● Renders the HTML message using the defined email design/formatter● Sends email via SMTP using the configuration defined in Email Submission content● Outputs result message indicating if the message has been sent successfully

● Debugging● Errors in mail configuration or mail service are shown in SystemOut.log

New Templates - Events Calendar● Displays a list of date-based content in a calendar format● Alternative to the existing Events, Courses and Meetings templates, which show lists● New events can be created in edit mode

● When the event is published it will appear on the calendar● Content is created using Event authoring template which has a start date/time and end date/time

New Templates - Events Calendar - JavaScript

● Events on calendar are populated using indexSearch.jsp● Searched for published upcoming and past events under content site area● Deployed in wp_profile/installedApps/<node>/CTC.ear/ctc.war/

● The calendar is a client side widget (a dijit), and is driven by the WCM Rest API● The calendar entries are populated using a GET request● When you move an event in the calendar, there's a PUT request to update the event on the server.

● Inspiration for creating your own client side widgets backed by WCM content● The JavaScript in the widget that uses the WCM Rest API is highly reusable● Tip: A more exhaustive Javascript API is contained in the inplace edit WAR on the server

New Templates – Event Calendar - Dojo● The Calendar widget is from Dojo 1.8 – it's not in Dojo 1.7.2 which is shipped with 8.0.0.1.● CTC has a custom dojo layer build, to which the Dojo 1.8 calendar has been added

● Defined in ctc.war.dojo.custom.layer● Deployed at /wp_profile/installedApps/<node>/CTC.ear/ctc.war/js/portal_dojo_17/ctc/

● Building Dojo custom layer● Challenges around building translated strings (nls files) into component layer js● Fix was to copy nls files from the Dojo 1.8 add on into build output and modify component layer files to

reference it● Defined in build.xml

● Portal 8.next is based on dojo 1.9, so these complexities won't exist in CTC 4.next.● Thought the layer will be retained as it improved page load speed by preventing multiple requests for

Dojo resources

New Templates - Landing Templates● Four new landing templates, each one with a different presentation layout● Landing Content, Landing Home, Landing Navigation, Landing Featured● Landing page displays content and navigation by automatically pulling in content from the site structure

New Templates - Landing Templates● Landing Content Template

● Displays navigation for all the child pages of the landing page as well as the latest content below those pages

● Landing Featured Template● Displays promotional content and navigation to all the child pages of the landing page

● Landing Home Template● Displays promotional content to direct visitors to important content in other parts of the website

● Landing Navigation Template● Displays navigation for all the child pages of the landing page

New Templates - Landing Templates● Landing pages also display featured content designed to capture attention

Teasers

Auto Landing Navigation – Content from site structure

Callouts

Promotions

New Templates - Landing Templates – Auto Navigation

● The landing templates have been designed to automatically populate the landing page by pulling content from the child pages

● Driven by Automatic Landing Navigation List design list component● This allows the seed content to define the landing pages in a template without any further portlet

configuration

Page CPage BPage A

Landing Page

A CB

A B C

Content from site structure is shown on the landing page

32

Site Templates – Customize

● Use the Site Builder to customize your site, then just click Create Site!

33

Site Templates – Internet and Intranet

● Two new demo sites are available for creation from the site builder

Replaces WCM NOW template and offering

Replaces Portal NOW template and offering

34

Site Templates – seed content● The sites re-use the CTC page templates, including the new CTC 4.1 page templates, with each page in

the site template created from a CTC page template, and associated content

35

Site Templates – seed content● The seed content is in the CTC Content library

● This is the text, images etc. that will appear in the sites themselves

36

Copy Branch Authoring UI plug in● Plugin to the WCM Authoring UI to facilitate creation of CTC-based sites

● The WCM Authoring UI only copies single items. This allows copying of a site area, including all the site areas and content under the site area, with internal links within the content updated

● This has been available through the WCM Java API for a while. This exposes this in the Authoring UI.● Good example of how to use the public Authoring UI plug-in API.

37

Full inline edit of Rich Text ● Authors can see exactly what effect their edits will have, using a floating rich text editor that

maintains the look of the page during editing.

38

User and groups● Commonly used users and groups can now be installed with CTC

● Site Managers, Site Developers, Content Reviewers, Content Authors, Content Viewers● The groups are configured with typical access the CTC portal pages and CTC content

39

Tagging and rating profile

● This profile existed in 4.0, but now it is installed into the theme by CTC by default

● Should be applied to pages where tagging and rating is required on the page

● Tagging and rating is not in the default CTC 'Content' profile, since it can slow down the page load time.

● This will be resolved in 8.next, where tagging and rating has had Dojo removed to make it more lightweight. Hence, this profile will disappear in CTC 4.next.

40

Improved Documentation

● Documentation for the assets shipped with Content Template Catalog has been added, including detailed documentation:

● All of the CTC page templates● All of the CTC portlets● Much of the CTC content

● Install, uninstall and upgrade documentation has been expanded● CTC 4.1 documentation:

● http://www-10.lotus.com/ldd/portalwiki.nsf/xpDocViewer.xsp?lookupName=Fast+Track+Documentation+for+Version+8#action=openDocument&res_title=Content_Template_Catalog_4.1_V8&content=pdcontent

41

Improved Documentation● Helpful descriptions for all the portlets and pages templates are now documented in the page

creation dialog:

42

Upgrading

● CTC 3.0, 3.1 and 4.0 can be upgraded to CTC4.1● Extensively tested and documented in the info center● Upgrade from 4.0 to 4.1 is easy, as long as you've not modified the CTC content

● Note the important 'best practise' that care should be taken when considering modifying the CTC application, theme or content.

● Any changes will have to be reapplied after upgrade. When customisation is required, it is often better to create a new application, theme or content libraries as independent extensions to CTC.

● This is explained clearly in the CTC documentation

Pre-Requirements● Portal 8.0.0.1 CF9 is required● Portal 8.0 theme only is supported ● Managed pages must be enabled

● This is the default on 8.0● Managed pages must be enabled during migration● We aim to remove this requirement in the future

● Derby is NOT supported. You must do a DB transfer before installing CTC. Otherwise, CTC may not install, and if it does, it will be very slow.

● All of these are documented, of course!● None of these are new – this was all true for CTC 4.0 too.

Support and Troubleshooting● CTC is on greenhouse, it's not part of the product

● However, it is still fully supported● There is very little Java code in CTC, and what we have uses the public APIs. Therefore, in almost all

cases, defects can be fixed on the customer machines as a simple content change.● The fixes will be rolled into the next CTC maintenance releases, e.g. 4.1.x, 4.next

● CTC 'issues' are sometimes Portal/WCM issues● If a PMR is raised with a CTC scenario, the defect may still be in Portal/WCM

● So:● If the issue is a base Portal/WCM issue, it will be fixed as a PMR, and released in the next CF● If the issue is in CTC, the fix can often be made without an APAR, but the fix will go into the next CTC

version.

Limitations / Known issues● Know limitations

● CTC page templates must only be used in a CTC site – you can't add them to just any page● CTC does not work well with the “Portal Site Library” option in the site builder. ● If you move/delete a CTC templated portal page, you have to move/delete the content as well● Sections, topics, and offerings have to be deleted manually in the Authoring UI, rather than through inplace edit● The design assets are translated by use of text providers and rendering plugins to externalize the strings. The

CTC Demo and CTC Content libraries are not translated. A full translated version of CTC would involve separate CTC Demo and CTC Content libraries for each locale, as per the MLS pattern.

● All of these we plan to improve upon in the future● Documented here:

● http://www-10.lotus.com/ldd/portalwiki.nsf/xpDocViewer.xsp?lookupName=Fast+Track+Documentation+for+Version+8#action=openDocument&res_title=Known_limitations_for_Content_Template_Catalog_4.1_V8&content=pdcontent

● All are issues that existed in CTC 4.0, but are documented more clearly in CTC 4.1.

Defects fixed in CTC 4.1● Lots of existing CTC 4.0 defects fixed● Some notable areas in which defects have been fixed

● The demo content and page template default content has been 'cleaned up' to be more professional and suitable for demos

● Internationalisation: Design content that wasn't translated is now translated, and WCM defects in the text providers have been fixed in CF8. Defects in CTC/MLS integration are fixed.

● Performance● copy branch is faster, so page creation from page templates is faster

● Events/Meetings/News items etc. dates have been updated – these where no longer showing up in parts of the sites, because the dates where old. These have all been refreshed.

● General fixes to existing page templates – inplace edit, responsiveness, etc.● Print stylesheet fixed● Portal search fixes

● OOM issues fixed (CF8)● Site areas can be excluded from the search seed (CF8)

Agenda● Overview of the IBM Content Template Catalog (CTC)● What's new in CTC● Upgrading● Pre-requirements● Support● Limitations and known issues● Defects fixed● General debugging● Useful Links● What's next for CTC?

What's next for CTC?● This is subject to change...● Full managed pages support (i.e. create CTC pages in the Portal Site library)

● Jquery UI widgets● Full Multi-Lingual Solution (MLS) support, meaning, a fully translated CTC demo site.● Additional templates

General Debugging

● Install:● Check pre-requisites are met● Check troubleshooting guide in the documentation

● Theme/JavaScript/CSS● Disable resource aggregation using:

● com.ibm.wps.resourceaggregator.CombinerDataSource.RemoteDebug=all● com.ibm.workplace.wcm.remoteDebug=all

● Use Chrome Developer Tools or Firebug for Firefox● Chrome browser plug in 'User Agent Switcher' is recommended for debugging phone and tablet issues

Useful Links

● CTC download from greenhouse● 4.2: https://greenhouse.lotus.com/plugins/plugincatalog.nsf/assetDetails.xsp?

action=editDocument&documentId=3FD86133125CB80385257CD000824EB5● 4.1.2: https://greenhouse.lotus.com/plugins/plugincatalog.nsf/assetDetails.xsp?

action=editDocument&documentId=6506DAAAF92F201585257AFA0005B9E7● CTC documentation

● http://www-10.lotus.com/ldd/portalwiki.nsf/xpViewCategories.xsp?lookupName=Content%20Template%20Catalog

● CTC Public (within IBM) Wiki● https://w3-connections.ibm.com/communities/service/html/communityview?

communityUuid=d2d06b4c-5f37-44a8-a24d-506c7354408c