Customizing Lotus Quickr 8.1

Guilherme CV Costa

Abhishek Jain Deepak Khandelwal Shigehisa Okamoto

Dinny Peter Steven Peters

Manny Santana Catherine Tchong

- 2 -

Preface Lotus Quickr software provides online team spaces where members can share and collaborate, and use team calendars, discussion forums, Web logs (blogs), wikis and other collaboration tools for managing projects and creating content. Lotus Quickr is designed to transform how teams share everyday busi-ness content and work together online. And it leverages many existing applica-tions and content storage systems. IBM® Lotus® and IBM Redbooks® publications have partnered together to create a wiki and show you how to perform specific customizations within Lotus Quickr 8.1. The wiki includes an initial examination of the Quickr for Domino architecture, then proceeds with four specific customizations covering both the Quickr for Domino architecture and the Quickr for J2EE architecture. Throughout much of the wiki, we build upon customizations for a fictitious company - ITSOMillenia and show how they made customizations to their Quickr 8.1 environment to better meet their specific business needs. Customization topics covered include: Part I – An introduction to the Quickr Domino Architecture Part II- Theme Customization and Branding - Domino Architecture This article describes how to customize the out-of-the-box standard 8.1 Quickr Theme, and to modify it to better match your organizations' corporate identity. Part III - Theme Customization and Branding - J2EE Architecture This article describes how to customize the out-of-the-box standard J2EE 8.1 Quickr Theme, and to modify it to better match your organizations' corporate identity. Part IV - Creating new / customized templates - Domino Architecture In this article, we describe how to perform template Customization for Lotus Quickr Domino Standard Teamplace template. We implement three scenarios as listed below: 1. Integrating Standard Team place template with wiki functionality 2. Integrating Standard Team place template with blog functionality 3. Integrating Standard Team place template with both wiki and blog functionality 4. Finally, we describe how to deploy the new template using placetype creation and how to customize the theme on the places created from these placetypes. Part V - Creating new / customized templates and components - J2EE Architecture This article discusses how to use the templates provided with the J2EE edition of Quickr 8.1 and how to customize them. In this article, we accomplish the following two objectives: 1. First , we start from the standard J2EE ‘out of the box’ teamplace template and customize it based on specific a use case. 2. Next, we describe how to create a custom component, how to register it on the component shelf and how to save a new template which includes the new component.

- 3 -

Meet the Authors

John Bergland is a is a project leader at the ITSO, Cambridge Center. He manages projects that produce IBM Redbooks focusing on IBM WebSphere and Lotus® software technology. Before joining the ITSO in 2003, John worked as an IT Specialist with IBM Software Services for Lotus (ISSL), specializing in Notes and Domino® messaging and collaborative solutions. He holds an MBA and MS in Information Technology from Boston University.

Steven Peters, founder of business partner, Peters Technology Group, has been working with national and international customers since 1996 to help them realize the value of using collaborative web technologies. He has worked closely with the IBM Lotus development teams on developing collaborative document management software and frequently teams with IBM Software Services for Lotus® (ISSL), to deliver collaborative solutions.

Abhishek Jain is working with IBM India Software Labs since 2004 and has been in the industry for about 7 years. He is currently working as a Technical Consultant with Lotus Lab Services and has skills on various Lotus technologies. He has considerable experience on Lotus and Java/J2EE technologies and is certified on both of them.

Dinny Peter is a Consulting IT Specialist from the Lotus Lab Services Team in India. Being a consultant, he gets involved in Lotus Projects from Requirements Gathering Workshop to Scoping/Estimates to Install/Build to Knowledge Transfer and finally the Sign-off. Prior to joining Lotus Lab Services he was a Pre-Sales Specialist in the IBM Lotus Brand team.

Guilherme CV Costa is an IT Specialist from the Integrated Technology Delivery division of IBM in Brasil. He has four years experience in WAS server administration, working on all phases of WAS implantation project. He is currently working as an IT Specialist (WAS) for the NiSource account and is a member of 24 x 7 Brazil Middleware support team, supporting IGA, Hitachi, Panasonic, Circuity City. He has ten years of experience in Lotus Brand products, development, administration and deployment of Lotus and IBM products. He received a Master Degree in Nuclear science - Energy Planning from The Universidade Federal de Minas Gerais, and is an IBM certified WebSphere Portal Server 5.1 and WAS 5.1, basic and advanced.

- 4 -

Manny Santana is a Managing Consultant with IBM Software Services in Sydney, Australia. He specializes in consultancy and technical work for Lotus clients in A/NZ, and has over 10 years of experience in consultancy, development, deployment, and support of various internal IBM applications and external engagements. He received a Bachelor of Science degree from the University of Sydney, and is an IBM Certified Advanced Application Developer - Lotus Notes and Domino 7. Manny co-authored the Lotus Domino 7 Application Development Redpaper and the IBM Workplace Forms 2.6 Redbook.

Shigehisa Okamoto is an Advisory IT Specialist from IBM Systems Engneering in Japan. Shigehisa has worked on many WebSphere Portal and Lotus Domino projects within IBM Software Services for Lotus and is now is engaged in technical support and as a workshop lecturer specializing in WebSphere Portal, Lotus Quickr and Lotus Connections.

Deepak Khandelwal - Software Engineer from IBM Lotus Lab services, India. Deepak has been working on Websphere Portal, Web content management, Lotus Quickr, Lotus Connections, Lotus Mashup Center and Websphere Application Server and has been involved in various Customization projects and development.

Catherine Tchong is an IT Consultant with IBM Lotus Lab Services in Paris, France. Her focus is on Lotus Quickr, Domino and Portal. Catherine has been working on various Research, Development and customer projects for IBM Websphere Voice Software family (IBM Embedded Viavoice, Websphere Voice Server, IBM Desktop Viavoice).

Supporting contributors and reviewers

Jennifer Heins - IBM Software Group, WPLC WPLC Technical Content Strategist and Architect,

- 5 -

Greg Melahn - IBM Software Group, WPLC STSM, Lotus Quickr Architect

Beth Anne Collopy - Advisory Software Engineer, Technical Enablement Specialist : WPLC

- 6 -

Part I

Introduction to the Quickr Domino Architecture

Guilherme Carvalho Velloso Costa

- 7 -

1.1 - Quickr for Domino Architecture (Quickr-D) The objective of this article is to introduce the Quickr-D Architecture to allow developers of all levels to customize and interact with Quickr-D server. Before you begin to customize a Quickr Place, you should have a basic understanding of the Lotus Quickr services for Domino architecture. Despite the many similarities with Domino Server, Quickr-D has its own object model and metaphors. Quickr uses the Domino data structures and is implemented using core domino technologies. Accordingly, when talking about Quickr-D architecture is important to first talk about Domino server architecture. The picture below illustrates some of the elements that constitute the Domino Server.

Figure 1 – Simplified Domino Server Architecture Domino Server Tasks are responsible for implementing all the functions that a Domino server performs. We can group server tasks into five categories:

• Tasks that maintain Notes applications (Agent Manager, Cataloger, Designer, Replicator, etc);

• Tasks that monitor server and administration activities (Administration Process, Cluster Replicator, etc);

• Tasks that manage mail, calendars, and scheduling (Calendar Connector and Schedule Manager, IMAP, POP3, SMTP Listener, Router, etc);

• Tasks that manage protocols (HTTP service, DIIOP, LDAP, etc); • Tasks that monitor server activity (Activity Trends Collector, iSPY, Statistics,

etc). Notes Object Services is a set of cross-platform C/C++ functions that create and access data and files. They are also responsible for compilation and interpretation of formulas

- 8 -

and scripts (Notes Formula, LotusScript®, Java and JavaScript. Interacting with all domino server tasks are Notes Object Services (NOS). It is s also responsible to interface with operating system services. NOS can be customized using C-language callback functions. Another way of thinking about this is to equate NOS as the glue that maintains all Notes/Domino elements together. To learn more about the C/C++ API toolkit take a look at the following documentation found in this article: http://www.ibm.com/developerworks/lotus/documentation/?OpenDatabase The shared databases and local files consist of database files, templates, static html files, java script files, servlets and other elements. A Notes database is a collection of documents; each document is a collection of fields. These elements are commonly called notes. Every note represents an element in a Notes database. Extrapolating further from the diagram shown in picture 1, it is possible to see where the main Quickr services are inserted. The Quickr engine is an extension of the Domino HTTP process, and when the HTTP task is started, it automatically starts the Quickr services and loads the JVM. The HTTP task writes status messages for these operations to the server console and log file. This is illustrated in Picture 2.

Figure 2 – IBM Lotus Quickr services for IBM Lotus Domino Behind the scenes of the Quickr UI

- 9 -

From an end-user perspective, the Quickr focus is on the user experience. It provides an intuitive and customizable UI to serve as a collaborative knowledge and document repository, independent of infrastructure and interoperability with other repositories. Behind the scenes, Quickr has somewhat of a ‘double identity’ that can be addressed using known Domino structures, such as Databases, views, agents, or using the qptool commands, Quickr Java API, servlets, WEB Services an others. The diagram shown in Figure 3 below provides an overview of Quickr Architecture.

Figure 3 – Overview of the Quickr D Architecture Because Lotus Quickr-D objects are based on Domino objects, you can use the Notes client and Domino Designer to view, customize, and create new objects in a Quickr place. All the data for objects in a Quickr place are contained in database notes. Its possible interact with Quickr-D server using Quickr-D Java API, there are three ways to do this:

• Creating an XML input file and run it against the Quickr-D command line or Domino server console;

• Write a Java program that creates the XML and passes it to the Quickr-D processor programmatically using QPAPI class;

• Using the QPTool execute command used on administrative tasks.

Examining Quickr from a ‘Domino-centric’ technology perspective, it is possible to find some elements common to typical Domino application, such as a subset of Domino security and authentication model, the utilization of Notes databases, views, documents in conjunction with Ajax approach to render the web interface. Table 1 below shows the correlation between Lotus Quickr objects and Domino objects.

- 10 -

Table 1 Lotus Quickr

Object

Domino Object

Description

Place File System Directory Organizes pages in rooms and folders. It’s created from a Place Type. Each Place resides in a Notes data directory subdirectory and has at least 3 Notes Dbs (main.nsf, contacts1.nsf and Search.nsf).

Place Type Database template (.ntf) The structure and design used to create a particular type of place. For example, the default place is Main.nsf, which is created from the MeetingRoom.ntf template. MeetingRoom.ntf is a PlaceType

Room Domino Database A room contains folders and forms and can contain other rooms (actually called as page libraries). The access control can be inherited from the place or defined at room level

Folder Domino Folder or View An organizing structure for collecting and displaying related pages or pages properties in a site.

Page Domino Form + Subform + Data Note (metadata)

The basic vehicle for content. You can create content using Web clients, connectors, services.

Member Domino Data Note A member note contains information about a team member of a place. In addition to this data, the member must be listed in the ACL of main.nsf and in a group in names.nsf to pass authentication.

Form Data note of type ″h_Form″

Manages the display of data notes. A form can contain fields for containing data and employ scripts to process and compute data.

Field Data note of type ″h_Field″ Allow for user input of data into data notes. PlaceBot Domino agent Can be written I Java or LotusScript. Run on

schedule basis or on form events Table 1. Relationship between Lotus Quickr-D and Lotus Domino objects When the directory tree of the Domino server is inspected, it reveals the following information shown in Table 2: Subdirectory Content domino_data_root\LotusQuickr\AreaTypes Contains the templates used to create places and

rooms. domino_data_root\LotusQuickr\lotusquickr The home place for the server where the user

sees their places and can create new places. Also contains the administrator place . .

domino_data_root\LotusQuickr\PlaceName Contains the files of a particular place, main.nsf, contacts1.nsf, search.nsf and room files.

domino_data_root\domino\html\ Directory that contains all static domino html files and also the Quickr connector install kit.

domino_data_root\domino\html\qphtml\ The directory where most Quickr-D files are found including Dojo, Java Scripts common to all places and files to format the exhibition of Quickr-D Admin Console.

domino_data_root\domino\html\qphtml\skins The directory where CSS, gif, html and JavaScript files.

domino_data_root\data\domino\html\qphtml\skins\quickr81 Default Quickr-D theme.

- 11 -

Table 2. Quickr services for Domino file directory structure 1.1.1 Building a scene In most cases, the first user contact with Quickr is through a web browser. In order to render that scene, several elements are invoked in sequence from a collection of code pieces read from the template files, application of a skin, and place data. Rendered together, these produce the final result as a scene. A scene can be considered as a browser-visible and usable version of a state of content. 1.1.2 - How a scene is rendered by Quickr Server? As mentioned earlier, Quickr uses the web page generation capabilities provided by core Domino. For example, the URL http://www.itsomillenia.ibm.com /LotusQuickr/itsomillenia/Main.nsf will be used as base URL. When a URL command is received by the Domino web server the following steps occurs:

1. Browser (HTTP) request is submitted: …/?OpenDocument&Form=h_PageUI; 2. Domino HTTP server task receive the request and inspects the URL searching for

/LotusQuickr/ token; 3. If URL contains token, request is passed to Quickr that inspect searching for a

know command like ?OpenDocument 4. Quick processor opens form named in URL: &Form=h_PageUI from

HaikuCommonForms.ntf; 5. Quickr processes the form by resolving Quickr tags within the form amd all

subforms, requesting all files involved with the current scene (gifs, html, JavaScript, stylesheets, etc) ;

6. When all tags are resolved, Quickr processor delivers this information to Http server that renders the webpage.

The HaikuCommonForms.ntf template is a central repository for forms used by all templates. Using a centralized database reduces the overhead in a Lotus Quickr service, allowing for smaller databases, faster creation of a place, and better performance resulting from more efficient server caching. Basically, this is the mechanism to render every scene on Quickr. When other types of documents or folders are requested, for example tasks, security control documents, a slightly different scene composition will occur. One very helpful tool to observe the files dependencies and relationship is Paros Proxy. (You can research this tool further at http://www.parosproxy.org/index.shtml) This tool allows you to follow the entire request of a URL, showing the post and get commands, JavaScript, CSS and graphical files. The picture below (Figure 4) illustrates how this can be helpful - in the left picture, you the Quickr-D initial screen, while in the right picture we have the elements used to render the initial screen scene.

- 12 -

Figure 4 – Elements used to render the initial screen

1.1.3 - Quickr data notes When you create a place, you are actually creating several Notes databases (NSF files). Databases are created from Notes templates (NTF files). When a new place is created the following databases are created:

• Main.nsf - stores main settings like user documents, folder design element, form design, field design, pages and elements used as containers of code. All other databases in the place’s folder are child rooms of the place database;

• Contacts1.nsf - stores list of who has access to place and sub rooms creating one document per place member;

• Search.nsf – contains the default search forms. The database PageLibraryxxxxxxx.nsf is created on-demand and has a similar structure that Main.nsf. PageLibrary has security and authentication features so that access to a room can be limited to a subset of team members. The picture bellow shows the databases and some of the elements that are used to compose our sample Millennia Place.

- 13 -

Figure 5 – Overview of Millennia Place structures and scene elements. If you simultaneously open the Main.nsf database using the Notes client, while also opening the Millennia place from a web Browser, it is possible to see the documents that represents the Quickr structures (Home, Discussion, Library, Calendar, Tasks, Index, Members, etc). The Domino forms are not used in the same way as a normal Domino Web Application. The System views are used as a mechanism of indexing files or to present the elements in the right order. For example, in the two illustrations below, we can see the Table of content view from web perspective and from a Notes client perspective.

- 14 -

Figure 6a - The place viewed from a web browser

Figure 6b - main.nsf database of Millennia Place Now let’s compare the left menu of Millennia place with the TOC view on client side.

- 15 -

Figure 7 - Menu of the Millenia Place - vs. View of the Documents which comprise the TOC Upon opening the Home document it is also possible to see some of the fields used to build the entire scene. It is possible build an entire place just creating the documents using LotusScript for example. Keep in mind that when you work with scripts which modify these documents directly, you must be careful about what values are inserted into the fields. A wrong parameter inserted in a field such as h_Type can break the relationship between all elements of scene, causing your Quickr place to become unavailable to the end user.

Figure 8 – Field parameters

- 16 -

Quickr data notes characteristically have the actual data presented on the page (within the PageBody item), as well as several system items (h_* items) which identify things such as:

• which scenes to use to present these data,

• the folder where this note appears in,

• the abstract version of this note,

• whether it is in the Table Of Contents (TOC), and if so, the position within the TOC.

Figure 9 – details of field parameters Some data notes are just references to a folder or another database. These notes also contain various system items (h_* items) identifying additional Quickr related details about the folder or room allowing a creation of a fake relationship similar to relational databases. To create or modify a document it’s recommended do the same action, then manually comparing the fields that changed. To verify these changes, open the View named QDK from within Lotus Notes Designer and verify the field names. Note that a good tool to compare the different states of a document is the Compare Documents database founded on openNTF web Site. This can be found at http://www.openntf.org/internal/home.nsf. It is also possible to construct a script that compares the documents item by item. All screenshots shown below were taken from the sample Quickr Place used in this wiki - ITSO Millennia place. Note – the details about how to customize a place are covered in other sections and articles within this Wiki. For the sake of the example, the same document will be shown in draft status and published status.

- 17 -

Figure 10 - First Page – draft

Opening the Database on Notes Client it’s possible to locate the document on QDK view.

Figure 11 – Looking at the document in QDK view

After the document is checked in, it is possible to compare the two states of the same document.

- 18 -

Figure 12 – comparing the states of the same document Pasting the documents in the Compare database it is possible see what is different.

Figure 13 – once pasted in the comparing the states of the same document

The document 1 is the document in draft mode, while in document 2 , this represents the document in its published state.

Figure 14 – comparing document results

- 19 -

Figure 15 – Changed fields

Analysis of the changed fields In this case, the fields h_lastTimePutAway and h_PageCmd were changed. These changes are indications to the Quickr engine which elements must be picked to render the scene.

Conclusion IBM Lotus Quickr for Domino servers presents a huge set of tools to maximize collaboration between persons, teams and organizations. The end users, with different skill levels, can work, customize and expand Quickr, extracting the best to their daily activities. The fusion of the best of Domino technology and WEB patters gave to Quickr-D the capacity to interact with other products through Rest, Java API, Lotus Script, SOAP and other where the imagination is the limit.

References Used References

• “Architectural Styles and the Design of Network-based Software Architectures”: Roy Fielding's doctoral dissertation

• Rest http://en.wikipedia.org/wiki/Representational_State_Transfer • “Inside Notes” - http://www-12.lotus.com/ldd/doc/uafiles.nsf/docs/inside-notes • IBM Lotus Quickr Infocenter -

http://publib.boulder.ibm.com/infocenter/lqkrhelp/v8r0/index.jsp

- 20 -

Part II

Quickr Theme Customization and Branding - Domino Architecture

Steven Peters

Manny Santanna

Catherine Tchong

Guilherme Costa

- 21 -

2.0 Theme Customization and Branding - Domino Architecture This article describes how to customize the out-of-the-box standard 8.1 Quickr Theme, and to modify it to better match your organizations’ corporate identity. As a starting point, we begin with this “look and feel” for Quickr, namely the standard 8.1 Quickr place theme.

Figure 1 We illustrate how to arrive at a customized example Quickr place for the fictitious ITSO Millenia Corporation, shown in the image below. This article provides an analysis of the Quickr page layout and themes which make up a Quickr page, then provides a step-by-step instruction on how to complete this customization.

- 22 -

Figure 2

2.1 Goals and scope of theme customization for this example This chapter begins with an overview of the default standard place theme used in IBM Lotus Quickr services for IBM Lotus Domino version 8.1. The composition of the default theme is covered in detail, including a breakdown of the theme’s page layout, and the file structure of the default theme. The chapter then covers the intended end point of our customization, the Millennia custom theme, and proceeds in showing a detailed step by step process on how the customization is achieved. Also included in this chapter is a section demonstrating how the default blog and wiki placeTypes are customized. Finally, theme development tools used in the customization are discussed. When we create a place in Quickr, the place is initially presented with the default standard place theme. We can select from a Theme Gallery of predefined ″themes″ to customize the look and layout of the place. We can also create custom themes to add to the Theme Gallery. A Quickr theme controls aspects such as fonts and background colors, how an element looks when it is selected, and where the navigational controls are displayed. By creating a custom theme for the ITSO Millennia Company, we provide their place with a strong brand identity and design it to match their corporate look and feel.

- 23 -

2.2 Quickr page layout architecture for Domino The Quickr 8.1 page is made up of a series of <div> tags that organize all items within the page. The <div> tag, which is short for division, is simply a container for other tags. Div elements are block elements and work behind the scenes grouping other tags together. The <div> tag is similar to the <body> tag. Generally, you can’t see the effect of divisions until styles are added. At the outermost level is the lotusFrame div, as shown in the figure below.

lotusFrame

Figure 3 - lotusFrame div

- 24 -

2.3 Page layout components Within the lotusFrame div, there are 5 more divs. They are:

1. lotusBanner 2. lotusTitleBar 3. lotusPlaceBar 4. lotusMain 5. lotusFooter

lotusBanner

lotusPlaceBar

lotusTitleBar

lotusMain

lotusFooter

Figure 4 - lotusFrame div with 5 sub divs

- 25 -

lotusBanner This is the lotusBanner div.

lotusBanner

Figure 5 - lotusBanner div

lotusTitleBar This is the lotusTitleBar div

- 26 -

lotusTitleBar

Figure 6 - lotusTitleBar div

lotusPlaceBar This is the lotusPlaceBar div

- 27 -

lotusPlaceBar

Figure 7 - lotusPlaceBar div

lotusMain (includes lotusColLeft = TOC) This is the lotusMain div.

- 28 -

Figure 8 - lotusMain div

lotusFooter This is the lotusFooter div.

lotusMain

- 29 -

lotusFooter

Figure 9 - lotusFooter div

- 30 -

2.4 Theme components A typical Quickr 8.1 theme is comprised of the following main components – 5 .htm files, a .css file and a .js file. There are also other files that comprise the theme; however, for theme customization, the abovementioned files are the files that are usually modified. All files comprising the default 8.1 theme reside on the Quickr server either in or under the following path: [DOMINO HTML PATH]\qphtml\skins\quickr81. The [DOMINO DATA PATH] is defined as [DOMINO DATA DIR]\domino\html.

2.4.1 HTML files The default Quickr 8.1 theme is composed of a group of layouts that define the appearance of specific place components. For example, the layout of a page differs from the layout of a folder; however, they will probably share some style elements as part of a common theme. An 8.1 theme has 5 layout HTML files as shown in the table below. These layout files reside in the [DOMINO HTML PATH]\qphtml\skins\quickr81 directory. Layout Description Page.htm The basic theme layout, used when viewing pages and

documents, etc. The other HTML files are variants of this file.

Edit.htm Simplified version of Page.htm, used for page layout when editing something.

Listfolder.htm Defines the appearance of a list or response folder. Headlines.htm Page layout of “Headlines” folders. Uses the

HeadlinesFolder skin component to provide a tabbed interface to pages.

Slideshow.htm Page layout of “Slide Show” folder. Similar to Headlines.htm but no tabbed interface; uses paging controls only.

When customizing a Quickr theme, you will probably need to add, remove, or modify Quickr specific built-in components such as the Notify component, the Table of Contents, etc. The HTML tag that controls the style and placement of these elements in the layout files is the <QuickPlaceSkinComponent>. How to use these predefined components is well described in Chapter 4 of the IBM Redbook “Customizing QuickPlace”. However, Quickr 8.1 introduces new layout components. These new layout components are discussed in detail in Bill Rodrick’s developerWorks article on customizing Quickr 8.1 (we will include here the link when it will be available). Adding a QuickPlaceSkinComponent includes the appropriate HTML and JS code to create the component.

- 31 -

Example : creation of the “print” component The following piece of code in a layout HTM file to add a “print” QuickPlaceSkinComponent : <div id="headerOrangeBar"> <div id="header_banner_link_block"> <ul> <QuickPlaceSkinComponent name=Print format={<li> <Item> </li>} emptyformat={} replaceString={print= <img src="/qphtml/skins/millenniav2quickr81/images/Print_icon.gif" border="0">&nbsp;&nbsp;Print}> </ul> </div> </div> generates this HTML source code in the browser : (we don’t expand here the JavaScript functions) <div id="headerOrangeBar"> <div id="header_banner_link_block"> <ul class="ulQuickPlace"> <script type="text/javascript"> QPComponentInit('<li class=liQuickPlace><Item></li>', '', '<li class=liQuickPlace><Item></li>', '', '', '', 'print=<img src="/qphtml/skins/millenniav2quickr81/images/Print_icon.gif" border="0">&nbsp;&nbsp;Print', ''); </script> <script type="text/javascript"> document.write(GeneratePrintHTML()); </script> <li class="liQuickPlace"> <a href="javascript:gotoPrint()" title="Open the contents of this in a separate window, formatted for printing"><img border="0" src="/qphtml/skins/millenniav2quickr81/images/Print_icon.gif"/> Print</a> </li> </ul> </div> </div>

- 32 -

- 33 -

2.4.2 Style sheets In Quickr 8.0, the stylesheet.css is the style sheet used to define the styles, such as font and colors, for all layouts. In Quickr 8.1, the stylesheet.css belonging to the 8.1 theme (and any custom theme based on it) is, by default, not used but exists in the main theme directory. Instead, there are four style sheets used by the 8.1 theme, all residing in the server's file system.

1. core.css 2. defaultTheme.css 3. iehacks.css 4. Quickr81.css

The first 3 style sheets listed above are located in [DOMINO HTML DIR]\qphtml\skins\common\themes\nls\en (replace "en" with your locale if it is not English). core.css controls the layout of the application, while defaultTheme.css controls the "look" or design of the application, the colors and background images (but not layout). ieHacks.css ensures that the UI looks the same in IE as it does in Firefox and other browsers These style sheets should not be modified. These 3 style sheets - core.css, defaultTheme.css, and iehacks.css - are delivered to us by the "One UI" project (an internal project to ensure a common user experience across IBM Lotus products with a thin client web experience). They are not Quickr-specific, but are used to achieve the "One UI" look that will eventually be used across the board in IBM Lotus web-based products. For example, these are already shared by Quickr Domino and Connections. The fourth style sheet above (Quickr81.css) is the Quickr 8.1 theme-specific style sheet and is also located in the [DOMINO HTML DIR]\qphtml\skins\quickr81\nls\en directory. This is the style sheet that is usually updated for customized themes. In our Millennia custom theme, instead of updating Quick81.css, we use the stylesheet.css file to override the selectors whose attribute we want to change. This also isolates all our theme-specific css changes to the stylesheet.css, so that any future Quickr updates to the Quickr81.css will not affect our Millennia-specific changes. To explicitly load this updated stylesheet.css file in our custom theme’s HTML files, we insert the line below after the <script> tag at the top section of the HTML file that contains a call to Quickr81SupportUtil.init(): <link rel="stylesheet" type="text/css" href="stylesheet.css" />

- 34 -

2.4.3 Quickr81.js file Quickr81.js contains all the JavaScript support necessary for the 8.1. Most of the code in this file is used to generate or modify elements on the page, and it is specific to the 8.1 theme because it expects to find certain elements in the DOM which are generated by the HTML in the 8.1 theme's HTML files. If a custom theme based on the 8.1 theme is created, it may either use Quickr81.js, or a new theme-specific JS file may be created, based on Quickr81.js. In this case, the HTML files will need to be modified to use this new JS file, and some file references in the JS file may need to be modified as well. Quickr81.js is located in the in[DOMINO HTML DIR]\qphtml\skins\quickr81\scripts directory. There is a Quick81Strings.js that reside in the DOMINO HTML DIR]\qphtml\skins\quickr81\nls\en directory. This file contains localized strings used in the Quickr 8.1 theme. For our Millennia custom theme, we do not need to update this file.

2.4.4 Images The following lists all of the .gif files that are used by the default Quick 8.1 theme. They are located in the in [DOMINO HTML DIR]\qphtml\skins\quickr81\images directory.

- 35 -

Figure 10 - Contents of images directory Note: Installing a Quickr Domino hotfix or upgrade may include updated versions of these files which will necessitate updating the files on your customized themes. If files have been updated on the quickr81 folder, the hotfix or upgrade may overwrite them with new versions and any modifications will be lost. Always check whether new hotfixes or upgrades contain changes that will affect your customized files.

- 36 -

2.5 Intended end point - Millennia custom theme plus specifications Our goal is not to completely revamp the “out-of-the-box” Quickr 8.1 theme, but rather, to use much of existing functionality while giving it the look and feel of the Millennia brand. When all is said and done, we want the theme to look as follows:

Figure 11 - End point - Millennia place with custom theme applied to it

- 37 -

Millennia Theme Specifications The following diagram outlines the hex color values that are to be used for the Millennia theme.

Logo(provided)

Fill: FFCC66Border: 1 px/7B7B7B

Fill: F4F1F1Border: 1 px/7B7B7B

Fill: 6699CCBorder: 1 px/7B7B7B

Fill: FAD791Border: 1 px/7B7B7B

Font: MS Sans Serif Reg 6 ptFont color: ADADADRectangle fill: FFFFFFRectangle border: 2 px/6699CC

Font: MS Sans Serif Reg 6 ptFont color: 000000

Icons provided

Font: MS Sans SerifReg 6 pt000000

Font: MS Sans SerifReg 7 pt6699CC

Fill: EEF5FDBorder: 2 px/476C90Fill: D8E8F7Border: 2 px/476C90Font:MS Sans SerifBold 6pt333399

Font:MS Sans SerifReg 6pt7B7B7B

Lines: 2px/ADADAD

IconsprovidedFont:MS Sans SerifReg 6pt333399

Icon provided

Font: HelveticaMed 6 pt000000Rectangle fill: FFFFFFRectangle border: 2 px/B1B0B0

Font: HelveticaMed 6 pt000000Rectangle fill: DBDDDFRectangle border: 2 px/B1B0B0

*See below

Font: HelveticaBold 6 ptFFFFFFRectangle fill: 6699CC gradientRectangle border:

*Font: HelveticaBold 6 pt6699CCRectangle fill: DBDDDF gradientRectangle border:

Logo(provided)

Fill: FFCC66Border: 1 px/7B7B7B

Fill: F4F1F1Border: 1 px/7B7B7B

Fill: 6699CCBorder: 1 px/7B7B7B

Fill: FAD791Border: 1 px/7B7B7B

Font: MS Sans Serif Reg 6 ptFont color: ADADADRectangle fill: FFFFFFRectangle border: 2 px/6699CC

Font: MS Sans Serif Reg 6 ptFont color: 000000

Icons provided

Font: MS Sans SerifReg 6 pt000000

Font: MS Sans SerifReg 7 pt6699CC

Fill: EEF5FDBorder: 2 px/476C90Fill: D8E8F7Border: 2 px/476C90Font:MS Sans SerifBold 6pt333399

Font:MS Sans SerifReg 6pt7B7B7B

Lines: 2px/ADADAD

IconsprovidedFont:MS Sans SerifReg 6pt333399

Icon provided

Font: HelveticaMed 6 pt000000Rectangle fill: FFFFFFRectangle border: 2 px/B1B0B0

Font: HelveticaMed 6 pt000000Rectangle fill: DBDDDFRectangle border: 2 px/B1B0B0

*See below

Font: HelveticaBold 6 ptFFFFFFRectangle fill: 6699CC gradientRectangle border:

*Font: HelveticaBold 6 pt6699CCRectangle fill: DBDDDF gradientRectangle border:

Figure 12 - Millennia page specifications

- 38 -

2.6 Step by step process to achieve Millennia custom theme To reach our intended end point, we need to perform the following steps – • Create the Millennia theme, • Load the Millennia theme onto our place, and • Customize the newly created Millennia theme.

2.6.1 Create Millennia theme The default Quickr 8.1 theme is located in the [DOMINO HTML DIR]\qphtml\skins\quickr81 folder. To create the new Millennia theme we perform the following steps:

1. We start by creating an identical copy of the default quickr81 folder. Make a copy of the quickr81 folder and paste it into the skins folder. Rename the folder to: millenniaquickr81

Figure 13 – copy of the quickr 81 directory

2. Open each of the 5 HTML files located in the millenniaquickr81 folder and update the references to Quickr81.js file so that it is referenced from within the millenniaquickr81 folder. In our custom theme, we shall use stylesheet.css to override to override the

- 39 -

selectors whose attribute we want to change; therefore, to explicitly load this updated stylesheet.css file in our custom theme’s HTML files, we insert the line below after the <script> tag at the top section of the HTML file that contains a call to Quickr81SupportUtil.init(): <link rel="stylesheet" type="text/css" href="stylesheet.css" />

3. The Quickr81.js file programmatically loads the appropriate .css files and is located in the \millenniaquickr81\scripts folder. Update the theme name, image location and css path in this file to refer to our new millenniaquickr81 folder.

// QUICKR 8.1 THEME SUPPORT var theme_name='millenniaquickr81'; var theme_imgLoc = '/qphtml/skins/millenniaquickr81/images/';

// CSS LOADER

function quickr81_preloadStyles() {

QuickrLocaleUtil.loadCssFiles("/qphtml/skins/millenniaquickr81", "Quickr81.css");

} 4. From your Millennia place, click the “Customize this place” link and select

“Custom Themes”.

<style>#lotusFrame{display:none;}</style> <script type="text/javascript" src="/qphtml/skins/millenniaquickr81/scripts/Quickr81.js"></script> <script type="text/javascript" src="/qphtml/html/common/dynamic_toc.js"></script>

- 40 -

Figure 14 - Custom Themes

5. From the Custom Themes page, click the “Create a Custom theme” button.

Note: You need to use Internet Explorer to create a custom theme, otherwise you will be prompted with the following message:

Figure 15 - ActiveX is required for custom theme section

- 41 -

Figure 16 - Create a Custom Theme button

6. Enter a title for the theme and click the “Replace” button to attach your stylesheet.css, page.htm, edit.htm, headlines.htm, listfolder.htm and slidehow.htm files. These are the files located in the skins\millenniaquickr81 folder. Optionally, add an image to represent the custom theme in the Themes Gallery. Click Next to save the theme.

- 42 -

Figure 17 - New Theme page

- 43 -

7. The newly created custom theme is now displayed on the Custom Themes page.

Figure 18 - Newly created theme displayed on Custom Themes page

2.6.2 Load Millennia theme Once the new theme is created, we load the new Millennia theme into our place. From the Customize page, click the “Choose a Theme” link. The new Millennia theme is now listed among the other Quickr provided themes, and should be at the bottom of the list. Select the Millennia theme. We are then automatically returned to the Customize page. At this point, it should look identical to the default Quickr81 theme as we have not yet made any Millennia theme-specific changes.

- 44 -

Figure 19 - ITSO Millennia custom theme display at bottom of page

- 45 -

2.6.3 Customize Millennia theme The new Millennia theme is now created and we can now proceed with the customization of this theme. The theme customization is achieved with the following steps:

• Replace the Header divs (lotusBanner, lotusTitleBar and lotusPlaceBar) with new Millennia divs on our Millennia htm files.

• Modify the Table of Content components in the lotusColLeft Div. • Override various Quickr81 styles with Millennia styles.

2.6.3.1 Replace the Header divs with new Millennia divs We begin by replacing the Quickr81 divs (lotusBanner, lotusTitleBar and lotusPlaceBar) with the following Millennia divs –

• millenniaBanner • millenniaBannerOrangeBar • millenniaBannerBlueBar • millenniaBannerPlaceBar and • millenniaBannerUserBar

We replace the divs on our Millennia htm files. The Millennia divs are shown on the figure below.

- 46 -

millenniaBanner

millenniaBannerOrangeBarmillenniaBannerPlaceBar

millenniaBannerUserBar

millenniaBannerBlueBar

lotusMain

Figure 20 - Breakdown of Millennia page

- 47 -

millenniaBanner div : Replacement of the banner logo We customize the logo image by replacing the image file – <img id="lotusLogo" alt="Lotus Software" src="/qphtml/skins/common/images/logo.gif"/> with <img id="millenniaLogo" src="/qphtml/skins/millenniav2quickr81/images/Redbooks_Millennia logo 72dpi.jpg"> In our Millennia example, we have removed the 4 layout components from the banner div – MyPlaces, MyStatus, Help and Signin.

- 48 -

millenniaBanner

Figure 21 - millenniaBanner with code

- 49 -

millenniaBannerOrangeBar div This bar replaces the lotusTitleBar (from Quickr 8.1 theme), and offers 3 layout components: “QuickSearch”, “Notify” and “Print”.

millenniaBannerOrangeBar

Figure 22 - millenniaBannerOrangeBar with code

- 50 -

millenniaBannerPlaceBar, millenniaBannerBlueBar and millenniaBannerUserBar divs The millenniaBannerPlaceBar replaces the lotusPlaceBar (from Quickr 8.1 theme), and displays the logo or place name layout component (“logo”). The millenniaBannerBlueBar is an additional bar and does not contain any components or links. It is used to display a horizontal blue bar. The millenniaBannerUserBar is also an additional bar and is created to display the user name (“MyStatus” component).

millenniaBannerBlueBar

millenniaBannerUserBar

millenniaBannerPlaceBar

Figure 23 - Other milleniaBanner components and code

- 51 -

- 52 -

To accomplish this, we edit each of the Millennia .htm files and replace the Quickr81 divs with the Millennia divs. We then add the appropriate styles to the stylesheet.css file. The following steps outline how the default header divs are replaced. Step 1: Open headlines.htm within Aptana Studio (or any text file editor) and locate <div id=”lotusFrame”>. Delete everything between this div and the <div id=”lotusMain”> Step 2: Insert the Millennia divs to look as follows:

<div id="lotusFrame"> <div id="lotusBanner"><div class="lotusRightCorner"><div class="lotusInner"> <a href="#mainContent" accesskey="S" class="accessibility"><img src="/qphtml/html/common/clear_pixel.gif" alt="Skip to main content link. Accesskey S" /></a> <img id="lotusLogo" alt="Lotus Software" src="/qphtml/skins/common/images/logo.gif"/> <ul class="lotusInlinelist lotusLinks" id="PlacesOrFiles"> <QuickPlaceSkinComponent name=MyPlaces format={<li class="lotusFirst lotusSelected"><Item></li>} replaceString={My Places=Places}> <li><a href="javascript: void QuickrSetupUtil.showQuickrContent(QuickrSetupUtil.SHOWTYPE_FILES, true);">Files</a></li> </ul> <ul class="lotusInlinelist"> <QuickPlaceSkinComponent name=MyStatus format={<li class="lotusFirst"><Item></li>}> <QuickPlaceSkinComponent name=Help format={<li><Item></li>}> <QuickPlaceSkinComponent name=signin replaceString={Sign In=Login && Sign Out=Logout} format={<li><Item></li>}> </ul> </div></div></div><!--end banner--> <a id="mainContent" name="mainContent"></a> <div id="lotusTitleBar"><div class="lotusRightCorner"><div class="lotusInner"> <h2 id="pageTitlePlaces">Places</h2> <ul class="lotusTabs"> <!--put class="lotusSelected" on the li element of the selected tab--> <QuickPlaceSkinComponent name=MyPlaces format={<li><Item></li>}> </ul> <form class="lotusSearch" name="h_QuickSearchForm" method="post" action="javascript:QuickSearchFormSubmit()"> <input id="searchtext" onfocus="this.value='';" name="h_SearchStringTmp" class="lotusText lotusInactive" size="10" type="text" value="Search in this place" /> <input class="lotusSearchButton" type="image" src="/qphtml/skins/common/images/search.gif" alt="submit search" title="submit search" /> </form> </div></div></div><!--end titleBar--> <div id="lotusPlaceBar"><div class="lotusRightCorner"><div class="lotusInner"> <QuickPlaceSkinComponent name=logo format={<h2><Item></h2>}> </div></div></div><!--end placebar--> <div id="lotusMain">

- 53 -

Step 3: Add the Millennia styles to the stylesheet.css file.

<div id="lotusFrame"> <div id="millenniaBanner"><div class="lotusInner"> <img id="millenniaLogo" src="/qphtml/skins/millenniav2quickr81/images/Redbooks_Millennia logo 72dpi.jpg"> <ul class="millenniaInlinelist" id="PlacesOrFiles"></ul> </div></div> <div class="clear"></div> <div id="headerOrangeBar"> <div id="header_banner_link_block"> <ul> <QuickPlaceSkinComponent name=Notify format={<li><Item></li>} emptyformat={} replaceString={notify=<img src="/qphtml/skins/millenniav2quickr81/images/notify_icon.gif" border="0">&nbsp;&nbsp;Notify}> <QuickPlaceSkinComponent name=Print format={<li><Item></li>} emptyformat={} replaceString={print=<img src="/qphtml/skins/millenniav2quickr81/images/Print_icon.gif" border="0">&nbsp;&nbsp;Print}> </ul> </div> <div id="search_block"> table border="0" cellspacing="2" cellpadding="2"> <tr> <td align="right"><QuickPlaceSkinComponent name={QuickSearch}></td> <td align="right"><a href="javascript:void submitQuickSearchForm();"><img src="/qphtml/skins/common/images/search.gif" border=0 alt="Go"></a></td> </tr> </table> </div> </div> <div class="clear"></div> <div id="headerPlaceBar"> <ul class="millenniaInlinelist lotusLinks"> <QuickPlaceSkinComponent name=logo format={<Item>}> </ul> </div> <div class="clear"></div> <div id="headerBlueBar"></div> <div class="clear"></div> <div id="headerUserBar"> <div id=personalizationLabel> <QuickPlaceSkinComponent name=MyStatus format={<Item>} emptyformat={}> </div> </div> <a id="mainContent" name="mainContent"></a> <div id="lotusMain">

- 54 -

/* Copyright IBM Corp. 2007, 2008 All Rights Reserved. */ /* 5724-S31 */ /* disclosure restricted by GSA ADP Schedule Contract with IBM Corp. */ /* */ /*********************************************************************/ /* body{background-image:none} */ /****** Millennia Styles ******/ #millenniaBanner, .millenniaBanner { background-color:#FFFFFF; overflow:hidden; padding:5px 0px 5px 10px; height:70px; } #millenniaBanner #millenniaLogo, .millenniaBanner .millenniaLogo { float:left; } #millenniaBanner ul.lotusLinks, .millenniaBanner ul.lotusLinks { float:left; padding-left:10px; margin-left:10px; border-left:1px solid; } #millenniaBanner ul, .millenniaBanner ul { float:right; margin-top:-4px; } .millenniaInlinelist { margin:0pt; padding:0pt; } #millenniaBanner ul li, .millenniaBanner ul li { background-color:transparent; border-left-color:#FFFFFF; color:#000000; padding:0pt 5px; } #headerOrangeBar { padding:35px 0 0 0; background-color:#FFCC66; } #headerPlaceBar { padding:4px 0px 4px 5px; background-color:#FFFFFF; } #headerBlueBar { padding:4px 0 0 0; background-color:#6699CC; } #personalizationLabel { width:160px; } #headerUserBar { padding:2px 0pt 2px 10px; background-color:#FAD791; height:21px; } #header_banner_link_block { font-size:9pt; float: right; margin: -14px 10px 0px 0px; } #header_banner_link_block ul { margin:0pt; padding:0px 5pt 0pt 5pt; } #header_banner_link_block ul li { display:inline; } #header_banner_link_block a:link, #header_banner_link_block a:visited { color:#000000; padding:0pt 0pt 0pt 15px; text-decoration:none; text-transform:capitalize; } #header_banner_link_block a:hover { text-decoration:underline; } #search_block { float: right; margin-top:-19px; }

- 55 -

Step 4: Reload the headlines.htm and stylesheet.css files into the Millennia theme. The headline scene should then look as follows:

Figure 24 - Headline scene of Millennia place Step 5: Update the remaining Millennia .htm files in the same way and load them into the Millennia theme.

- 56 -

Figure 25 - Millennia place with custom theme applied Note: You should start customization with headline.htm and stylesheet.css. Expect to iterate through this process and reload the files several times while you are editing the theme. Once the final layout of the theme is achieved, the other HTML files can then be edited.

- 57 -

2.6.3.2 Modify the Table of Contents Styles We now need to set the color and borders for the Table of Contents. The Table of Contents is contained within the lotusColLeft div. Using Firefox and the Firebug extension, you can easily navigate through the HTML to locate the lotusColLeft div.

Figure 26 - Millennia place with Firebug enabled, and TOC highlighted We need to replace the menuTop.gif image with the Millennia image. The only difference between this image and the one used by the Quickr81 theme are the colors. The menuTop.gif file is actually referenced in the Quickr81.css stylesheet. We need to override this style by placing it in our Millennia stylesheet (stylesheet.css).

- 58 -

Figure 27 - lotusMenu It is easiest to copy the style from the Firebug window, paste it into stylesheet.css and clean up any extraneous characters. Follow the same procedure for the menuMiddle.gif and menuBottom.gif references.

/* Copyright IBM Corp. 2007, 2008 All Rights Reserved. */ /* 5724-S31 */ /* disclosure restricted by GSA ADP Schedule Contract with IBM Corp. */ /* */ /*********************************************************************/ /* body{background-image:none} */ .lotusMenu, .lotusPortlet-menu { background-image:url(/qphtml/skins/millenniav2quickr81/images/menuTop_Millennia.gif); } .lotusMenu .lotusInner { background-image:url(/qphtml/skins/millenniav2quickr81/images/menuMiddle_Millennia.gif); overflow:hidden; } .lotusMenu .lotusBottomCorner { background-image:url(/qphtml/skins/millenniav2quickr81/images/menuBottom_Millennia.gif); }

- 59 -

Figure 28 - lotusBottomCorner

- 60 -

Figure 29 - lotusInner

- 61 -

2.6.3.3 Override various Quickr81 styles with Millennia styles A number of styles need to be overridden in our Millennia style sheet. The complete list is shown below.

/* Copyright IBM Corp. 2007, 2008 All Rights Reserved. */ /* 5724-S31 */ /* disclosure restricted by GSA ADP Schedule Contract with IBM Corp. */ /* */ /*********************************************************************/ /* body{background-image:none} */ a:link, a:visited { color:#333399; } span.lotusBtnAction a, span.lotusBtnAction a:visited { background-image:url(/qphtml/skins/millenniav2quickr81/images/btnActionBkgd_Millennia.png); border-color:#B1B0B0; } span.lotusBtn a, span.lotusBtn a:visited { /* color:#6699CC; */ } #lotusMain, #lotusFooter, .lotusMain, .lotusFooter { border-style:solid; clear:both; margin:0pt 0pt 0pt 0pt; overflow:hidden; } .lotusMenu, .lotusPortlet-menu { background-image:url(/qphtml/skins/millenniav2quickr81/images/menuTop_Millennia.gif); } .lotusMenu .lotusInner { background-image:url(/qphtml/skins/millenniav2quickr81/images/menuMiddle_Millennia.gif); overflow:hidden; } .lotusMenu .lotusBottomCorner { background-image:url(/qphtml/skins/millenniav2quickr81/images/menuBottom_Millennia.gif); } /* TOC Selected Item Background */ .lotusMenu li.lotusSelected a, .lotusMenu li.lotusSelected a:visited, .portlet-menu li.lotusSelected a, .portlet-menu li.lotusSelected a:visited { background-color:#6699CC; border-color:#6699CC; color:#FFFFFF; } .lotusMenu li a, .lotusMenu li a:visited, .portlet-menu li a, .portlet-menu li a:visited { display:block; font-weight:bold; line-height:1em; padding:5px 0pt 5px 13px; text-decoration:none; } #lotusContent, .lotusContent { background:url(/qphtml/skins/millenniav2quickr81/images/MillenniaBkg.jpg) no-repeat center; }

- 62 -

2.7 Redeploying the updated theme Once the custom theme's layout files and style sheet have been updated, follow the steps below to apply the updated theme to the Millennia place.

1. Open the Millennia place and select "Customize this place → Custom Themes”. Select the Millennia theme as displayed on the list of custom themes.

Figure 30 - Custom Themes page with Millennia theme

2. From the Edit Theme page, click "Replace" and select the correct file for each of the boxes that represent the style sheet and the 5 layout files. Alternatively, drag and drop the updated file to the corresponding box. Selecting the "Generate" checkbox will automatically generate the layout file. It is highly recommended that you use the layout file within the directory of your updated theme, even if you did not update the layout file, instead of relying on Quickr to generate the file for you. An image can be optionally added and will be used in the Themes Gallery.

Note: Ensure that the htm and css files are uploaded from the updated theme subdirectory on the Domino server as these files have dependencies on other files within the data directory. Theme uploads bring in referenced image file, etc. Adding htm files from a local directory might break linkages to other resources (e.g., image files, js files, etc), and may result in a 'broken' theme.

- 63 -

Figure 31 - Edit Theme page

- 64 -

Note: You will be prompted to use Internet Explorer before you can go to the Create a Custom Theme page if you are using a different browser.

Figure 32 - ActiveX message box

3. Click "Next". The updated theme will then be saved and the Custom Themes page is again displayed.

4. Select "Customize this place → Choose a theme" and select the newly updated theme from the list of themes. The newly updated Millennia theme should be displayed at the bottom of the list.

5. The Millennia place will now have the updated look and feel based on the newly updated Millennia theme.

- 65 -

Figure 33 - Millennia place with updated theme Note: To reset the place to the default theme, enter the following URL in your browser: http://[DOMINO SERVER]/LotusQuickr/[PLACE NAME]/Main.nsf/?opendatabase&ResetTheme

- 66 -

2.8 Theme Customization for Wiki and Blog PlaceTypes This section covers the steps to follow when customizing a wiki placetype, starting with the default Quickr 8.1 theme. The same procedure can also be applied to a blog placetype. The general advice for standard place theme customization is to start from the Quickr 8.1 theme files. This is even more important for blogs and wikis since there are pieces of code specific to these placetypes’s functionalities in the HTM layout files as well as in the Quickr81.js file. Basically, the wiki template uses the same set of HTM layout files as the standard template. While navigating through a place, you can determine which HTM is used by viewing the HTML source (“View Source” from your browser client) and checking for the variable currentPageType. You can re-use the same method applied to the out-of-the-box standard place to create a custom theme and apply it to your wiki place. Once you have created your custom HTM and CSS files (which are covered in detail in previous sections) and your custom skin directory if needed, you can create a custom theme by uploading these files.

Figure 34 - Customize Page of Millennia Wiki place In a wiki place, the “Create theme” and “Choose a theme” pages are hidden in the list of options displayed in the “Customize” page (compare the options list in Figure 30 – wiki place, and Figure 31 – standard place) but they are still there in the template.

- 67 -

Figure 35 - Customize Page of a standard place You can re-use the equivalent URL for these pages from a standard place and replace the reference to the standard place with the wiki place to access these hidden pages. To illustrate, navigate first within a standard place to the Custom themes page and save the URL – http://9.12.4.193/LotusQuickr/test1/Main.nsf/AD143AC211C5AED40525670800167228/8138745487BCB874052568B0005C0EE0/?OpenDocument Change the place name to your wiki place – http://9.12.4.193/LotusQuickr/millenniawiki/Main.nsf/AD143AC211C5AED40525670800167228/8138745487BCB874052568B0005C0EE0/?OpenDocument By using this updated URL, you reach the hidden Custom Themes page in your wiki place, as shown in Figure 32.

- 68 -

Figure 36 - "Hidden" Custom Themes page on Millennia wiki place You can now create your custom theme by uploading your CSS and HTM files as explained in a previous section for standard places. Once the custom theme is created, you need to apply the theme. Create the URL using the same method to access the “Choose a theme” page and click on the custom theme that you’ve just added. As shown in the figure below, the Millennia custom theme is displayed at the bottom of the list.

- 69 -

Figure 37 - Choose a Theme page of the Millennia wiki place Once the custom theme is selected, the Millennia wiki place will have a similar “look and feel” to the Millennia standard place, as shown below.

- 70 -

Figure 38 - Millennia wiki place using custom theme

- 71 -

2.9 Theme Development tools Aptana Studio Aptana Studio is an open source integrated development environment (IDE) for building Ajax web applications. It includes coding assistance for JavaScript, HTML, DOM, and CSS languages, an outliner of JavaScript, HTML, and CSS code structure, error and warning notification and the possibility to customize and extend the UI.

Firefox Mozilla Firefox is an open source web browser descended from the Mozilla Application Suite, managed by the Mozilla Corporation. Firefox includes tabbed browsing, a spell checker, incremental find, live bookmarking, a download manager, and an integrated search system that uses the user's desired search engine. Functions can be added through add-ons created by third-party developers. Firefox Add-ons Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. Web Developer adds a menu and a toolbar to the browser with various web developer tools.

Figure 39 – Firefox Web Developer menu

- 72 -

Part III -

Quickr Theme Customization and Branding – J2EE Architecture

Deepak Khandelwal

Shigehisa Okamoto

Catherine Tchong

- 73 -

Theme Customization and Branding – J2EE Architecture This article describes how to customize the out-of-the-box standard 8.1 Quickr Theme, and to modify it to better match your organizations’ corporate identity. As a starting point, we begin with this “look and feel” for Quickr, namely the standard 8.1 Quickr place theme. We illustrate how to arrive at a customized example Quickr place for the fictitious ITSO Millenia Corporation, shown in the image below.

Figure a.1 – Customized theme developed in this example This article provides an analysis of the Quickr page layout and themes which make up a Quickr page, then provides a step-by-step instruction on how to complete this customization.

- 74 -

3.1 Goals and scope of theme customization for this example Quickr themes allow you to add your unique graphic identity and look and feel to your application, while the Quickr server handles all the functionality. Within this section of the wiki, accomplish the following:

• We first explain what a theme is and which elements it contains, including the stylesheet files, java script files, images, color palette and layout components such as HTML and JSP. We will also include reference information for Quickr skin.

• We then walk through the steps to get an existing theme modified, and how to upload it once the modification process is complete. As a context for the example, we discuss the process we used when creating the theme for our sample company ITSOMillennia Consulting.

• In the last section, deployment of customized theme using XMLAccess and admin console is provided.

3.2 What is a Theme A Quickr theme controls the look and the layout of a TeamPlace: its fonts and background colors; how an element looks when it is selected; where the navigational controls appear; and so on. When you create a TeamPlace, you can select a theme by choosing from a gallery of predefined themes. You can also modify an existing theme or create a new theme. Using a custom theme, you can give your TeamPlace a strong brand identity, or design it to look like other corporate sites. Finally, by customizing the theme, you can supply additional functionality as well as provide a unique look for your TeamPlace.

3.3 The Quickr theme layout architecture This section provides an overview of the Lotus Quickr theme and its artifacts. By convention, WebSphere Portal themes are broken down into four subfolders: colors, icons, images, and js (javascript). Each of these folders contains a set of theme files as suggested by the folder name. Essentially, a theme includes four main elements: Java Server Pages, stylesheets, script files, and theme graphics that include image and icon files. 3.3.1 Explanation The main theme fragments are:

o Theme Banner o Page header

- 75 -

o Top Navigation row o Page area (Portlet render area) o Page footer

Figure 1: Theme Layout So, the overall structure can be defined as :

- 76 -

Figure 2: Theme Layout 3.3.2 Layout Components : Theme JSP Java Server Pages are text documents that contain static data and dynamic data. Static data can be expressed in any text format where dynamic data is used to construct the dynamic content of the page. Lotus Quickr JSP files are located at the root of the QPG folder located in the WebSphere Portal themes directory at: was_profile_root/installedApps/cellname/wps.ear/wps.war/themes/html/QPG The theme is composed of a set of files that consist of a parent JSP file and subsequent fragments of the parent JSP. The fragment JSPs are included from within the parent JSP, and by convention, they are saved with JSPF extensions. For most requests, the portal page is rendered starting with Default.jsp in the themes directory unless the request has been modified by a newWindow="true" parameter. In this case, the page is rendered using Plain.jsp. Following figure shows an overview of all the theme files and how they are laid out with respect to the parent file and to each other.

Banner

Breadcrumb Section

Page Header

Top Navigation Tabs

Page Area

Page Footer

- 77 -

Head

Toolbar Crumbtrail Globalactions

Headercontent

Searchcontrol

Default

Banner Pageheader Top nav Side nav FooterHead

Toolbar Crumbtrail Globalactions

Headercontent

Searchcontrol

Default

Banner Pageheader Top nav Side nav Footer

Figure 3: Theme file hierarchy Default.jsp is the parent JSP file that includes the JSP fragments (denoted by the JSPF extension) and tag libraries that are needed to render the theme elements. The fragments are compiled into the servlet for Default.jsp. Whenever you make a change to a fragment, resave Default.jsp to force the servlet to recompile. Resaving Default.jsp ensures that the servlet picks up the latest modifications to the fragments. The head.jspf file is the first fragment included in Default.jsp. This file contains header elements of an HTML page. In the Lotus Quickr theme, all the stylesheets and client-side script files are linked from head.jspf. The page title and text direction are also set in this file. For better performance, link any additional files added to the theme in head.jspf. This approach consolidates all downloads to the beginning of the page and avoids retrieval in the middle of page rendering. The banner.jspf file, as suggested by its name, displays the page banner shown in figure below. The banner includes the product logo, search box, and action links to login and logout. It also includes the banner breadcrumb that displays the Back To Home button, a button that lets you expand or compact the screen width, and Lotus Quickr help. Like Default.jsp, the banner also includes fragment files that are compiled in banner.jspf. These fragments are: banner_toolbar.jspf. This fragment renders the toolbar at the top that includes the product logo and search control box and links to login and logout. banner_searchControl. This is a subfragment of banner_toolbar.jspf. It renders the search control box at the right end of the banner toolbar. banner_crumbtrails.jspf. This fragment renders the Back to Home link on a theme page.

- 78 -

banner_globalActions.jspf. This fragment contains the code that points to the links to expand and compact the page width and to Lotus Quickr help.

Figure 4: Page banner This section of the theme, contained in pageHeader.jspf and shown in the figure below, displays the application header. In this JSP, you can find the source that retrieves the application name and favorite status. The Customize link that is displayed at the right end of the application header is also rendered in this fragment. The Customize link displays a dynamic palette that is rendered with pageHeaderContent.jspf and shown in figure 6.

Figure 5: Page Header

Figure 6: Customize palette The pageHeaderContent.jspf file contains the source that renders the customize shelf. The customize shelf provides the ability to add components, members, and new pages or to modify the properties for an existing place. The topNav.jspf file is a simple and short file that renders the tabbed navigation row that allows users to switch between different components in the same application; see figure 8. The fragment uses different styles to differentiate between the selected and unselected tabs.

- 79 -

Figure 7: Tabbed navigation The sideNav.jspf file renders subpages created under the top-level navigation node in a place. By default, child nodes to the parent page in a place are displayed in side-tree navigation. In a later section of this article, we discuss an example to change the default styles to a horizontal navigation style instead. The footerLarge.jspf file renders the section at the bottom of the page that contains quick links to commonly accessed areas of Lotus Quickr; see figure 8 below. The links are internal links to portal pages, and they appear in an expanded or a collapsed state.

Figure 8: Footer 3.3.3 Images Images are used for icons and tools in the theme pages. These files are placed in the images folder at the root of the theme directory at: was_profile_root/installedApps/cellname/wps.ear/wps.war/themes/html/QPG/images When you customize a new theme, you can modify the existing image file or create new ones and place them in the images directory. Image files are spread across various subfolders that are created to keep the image files grouped with respect to various sections of the page. 3.3.4 Stylesheets The layout content is contained in the theme JSP files, but the presentation details of the content are defined in stylesheets. Lotus Quickr stylesheets are located in the same folder with the theme JSP files at: was_profile_root/installedApps/cellname/wps.ear/wps.war/themes/html/QPG Similar to the theme JSPs, the stylesheets are broken into several fragments that are included from the parent stylesheet named styles.jsp. Stylesheets are saved as JSP files to accommodate differences in locale and browser support. Similar to default.jsp, the parent

- 80 -

stylesheet must be recompiled to pick up the updates to the fragments included in it. Here is a list of stylesheets and a brief description of the contents of each file:

• styles_cacheSettings.jspf. Used to set the cache headers for all CSS JSPs. • styles_extension.jspf. Contains theme extension styles. • styles_help.jspf. Contains the styles used to render Lotus Quickr help content. • styles_ibm.jspf. Contains styles for the WebSphere Portal administrator portlet

page. • styles_ibmportlet.jspf. Exclusive to the Lotus Quickr theme, contains styles used

by the document library and web content management components in Lotus Quickr.

• styles_oobQuickr.jspf. Contains styles for the My Places Navigation portlet. • styles_people.jspf. Contains styles in the person card. • styles_portlet.jspf. Contains the default styles that are shipped with the IBM

theme. • styles_qpg.jspf. Contains styles for Lotus Quickr administrative portlets only. • styles_rules.jspf. Sets browser- and locale-specific CSS rules. • styles_theme.jspf. Contains general theme styles that are used in the theme files

and fragments. • styles_themeSolo.jspf. Is included when the toolbar render is turned off. Adjusts

the page elements to display well without the toolbar. 3.3.5 Color palette A color palette allows you to set the color scheme of the theme. In WebSphere Portal, the color palette is defined by a property file that contains key value pairs holding references to colors and graphics used in the theme. This is a useful concept that lets users change the color scheme of the theme without making any changes to the stylesheets. You can assign a color palette to an entire theme or to a single page depending upon the design requirements. Refer to the section, "Using color palettes in the theme," in the WebSphere Portal Infomation Center (See URL below) to get details on creating, using, and referencing color themes in WebSphere Portal. http://publib.boulder.ibm.com/infocenter/wpdoc/v6r0/topic/com.ibm.wp.ent.doc/wps/dgn_colorpalet.html Out of the box, the QPG theme uses the default color palette. You will reuse it in this customization. 3.3.6 Theme policy A theme policy is an XML file that controls how various parts of the theme are rendered on a page. This design concept allows you to display a single theme in multiple ways.

- 81 -

Contents

Contents

Banner Tool bar

Top navLevel1 Level1 Level1

Banner Tool bar

Top navLevel1 Level1 Level1

Sidenav

Level2

Level3

Level2Banner Tool bar

Top nav

Sidenav

Level3

Level4

Level3

Level1 Level1 Level1

Level2 Level2 Level2

Banner Tool barBanner Tool bar

Sidenav

Level1

Level2 ContentsLevel1

Portal page hierarchy

Level3

Level2

Level2

Level1

Level1

Level3

Level2

Level2

Level1

Level1

Single TopNav

Double TopNav

SideNav only Figure 9: Theme Policies Theme policies are an important part of the theme and theme customizations. Lotus Quickr installation is shipped with two policies used to render the Lotus Quickr pages: QuickrMyPlaces and QuickrSpaces. To set up a new policy, you must create and install it using the XML configuration utility as described in the WebSphere Portal Information Center. (See the URL provided below.) http://publib.boulder.ibm.com/infocenter/wpdoc/v6r0/topic/com.ibm.wp.ent.doc/wps/dgn_thempolicy.html

3.4 The Quickr skin Skins represent the wrapper that goes around the components. They are made of row containers, column containers, and controls. The containers act as a wrapper for the inside portlet application, and the control section renders portlet controls. By default, Lotus Quickr uses QuickrSkin, which was designed specifically to work with Lotus Quickr themes and pages. In the "Getting Started" section of this article, we created a custom_skin from the default Lotus Quickr skin. This skin directory contains three main JSP files: UnlayeredContainer-H. This is the row container. UnlayeredContainer-V. This is the column container. Control.jsp. This renders the controls for the portlet application.

- 82 -

3.5 Millennia theme customization The following section describes how to proceed with the customization of the Millennia theme. 3.5.1 Creating Millennia theme : Introduction To make modifications to the theme, you need administrative access to the Lotus Quickr server. The Lotus Quickr theme is shipped in a folder named “QPG” in the WebSphere Portal theme directory. The section that follows describes how to create custom themes and skins from Lotus Quickr and how to apply them to the desired team places. It also describes the steps you take to enable JSP reloading on the custom theme. This approach helps save development time when you make changes to the theme. Create a custom skin Lotus Quickr uses “QuickrSkin” as the default skin for the “QPG” theme. If you choose, you can create a new skin that is more suited to your custom environment. The skin files are located here : was_profile_root/installedApps/cellname/wps.ear/wps.war/skins/html/ Use the default skin called “QuickrSkin” as the starting point for your custom skin. To do this, copy the existing “QuickrSkin” folder to a new folder and rename that folder custom_skin. You can now set this skin as the default skin for your custom_theme. Create a custom theme To create your custom theme, first make a copy of the Lotus Quickr theme folder and rename that folder to a name that is appropriate to your theme. The WebSphere Portal theme files are located here: was_profile_root/installedApps/cellname/wps.ear/wps.war/themes/html You need to make a copy of the “QPG” folder and paste that copy back into the WebSphere Portal theme folder at the above location. After pasting it, you can rename the folder custom_theme (in this case, “Millennia”). You are now ready to set the custom_theme on the desired places in your workspace. Set the theme to a place Your next step is to register your custom_skin and custom_theme with WebSphere Portal, and then to set them both on the desired team places. To do this, you first need to create a new theme in WebSphere Portal and point that to the custom_theme folder. Registering

- 83 -

new skins and themes will be done in Site Administration – Advanced Administration – Themes and Skins. Optional : If you created a custom_skin, first register your new skin by clicking the Add New Skin button on this page. See figure 10.

Figure10. Adding a new skin You are now ready to register your theme and set your custom_skin as the default skin for your custom_theme. Choose Site Administration – Advanced Administration – Themes and Skins – Add new theme. The directory name listed on the WebSphere Portal site administration page must match the folder name that you created in the WebSphere Portal theme directory. In this example, the new theme name and directory name are both set to custom_theme. At this point, you have the option to add any skins desired by your theme, and then to set the custom_skin as the default skin. See figure 11.

- 84 -

Figure 11. Adding a new theme and setting the default skin on a theme After you have created the new theme and registered it in WebSphere Portal, you can apply it to one or more places. Choose Site Administration – Advanced Administration – Portal User Interface – Manage Pages, and then follow these steps. See figure 12.

1. Click the content root under the My Pages header on the left side. 2. In the list of pages that appear on this page, navigate to your place under

Application Root or search for it by typing its name in the search box. 3. Click the Edit Page properties icon for the desired place. 4. Select custom_theme from the drop-down box under theme header, and then click

OK.

- 85 -

Figure 12. Setting the theme on a place At this point, you are ready to start applying your customization to the custom_theme. Enable automatic JSP reloading To view changes to your theme JSPs without restarting WebSphere Portal, you can force the application server to automatically check for new versions of JSPs. Even though this is ideal for development and testing purposes, you should disable automatic JSP reloading in a production environment. Enabling automatic reloading forces the IBM WebSphere Application Server engine to check the file system for updated files on every page refresh and slows down the overall performance. Follow these steps to enable automatic JSP reloading:

1. Open the file was_profile_root/config/cells/cell_name/applications/wps.ear/deployments/wps/wps.war/WEB-INF/ibm-web-ext.xmi.

2. Find the entry shown in Listing 1 in this file. Listing 1. ibm-web-ext.xmi file

<webappext:WebAppExtension xmi:version="2.0" xmlns:xmi="http://www.omg.org/XMI" xmlns:webappext="webappext.xmi" xmlns:webapplication="webapplication.xmi" xmlns:commonext="commonext.xmi" xmlns:common="common.xmi" xmi:id="IBM_WPS_Ext" reloadInterval="3" reloadingEnabled="false" fileServingEnabled="true" directoryBrowsingEnabled="false" serveServletsByClassnameEnabled="false" preCompileJSPs="false">

- 86 -

3. Change the value for reloadingEnabled to true. 4. Save the file. 5. Restart WebSphere Portal.

While this is ideal for development and testing purposes, automatic JSP reloading should be disabled in a production environment because of performance issues. (See the URL below) http://publib.boulder.ibm.com/infocenter/wpdoc/v6r0/topic/com.ibm.wp.ent.doc/wps/dgn_reload.html 3.5.2 Customizing the “Millennia” theme

Start image and Goal image As a starting point, you will begin with the “QPG” default theme and, after performing the necessary customization steps, arrive at the customized "Millennia" theme, as shown in figure 13, below.

Figure13. Start image “QPG” theme and Goal image “Millennia” theme

- 87 -

You could settle the difference between the two by customizing. You notice the difference of colors, the structure of Banner part (“Millennia” has two lines) and navigation style (“Millennia” look like the SideNav), See wire frame figure 14.

Figure14. Structural difference at wire-frame image Customizing Lotus Quickr theme policy We will create a new theme policy, starting from the default Lotus Quickr one. You can export default Lotus Quickr theme policy using XMLAccess. See Listing 2. For more information on XMLAccess, please refer to http://publib.boulder.ibm.com/infocenter/wpdoc/v6r0/topic/com.ibm.wp.ent.doc/wps/adxmltsk.html.

- 88 -

Listing 2. ExportThemePolicy.xml Locate this file at c:\temp for example (in case Windows), then in command prompt, < portal_server_root>\bin\xmlaccess.bat –url <Quickr_hostname:port>/lotus/config –in c:\temp\ExportThemePolicy.xml –user <admin_userid> -password <admin_password> This command will create c:\temp\exported_QuickrSpaces_ThemePolicy.xml file. You can rename this file to QuickrSideNavOnly_ThemePolicy.xml and edit it to perform the following modifications :(edit to Bold value) :

<?xml version="1.0" encoding="UTF-8"?> <request xsi:noNamespaceSchemaLocation="PortalConfig_1.4.xsd" create-oids="true" type="export" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> <portal action="locate"> <policy-node action="export" label="WebPage" type="theme" path="QuickrSpaces"> <url>file:///c:/temp/exported_QuickrSpaces_ThemePolicy.xml</url> </policy-node> </portal> </request>

- 89 -

Listing 3. Editing QuickrSideNavOnly_ThemePolicy.xml Save your custom XML theme policy file . You can import your new theme policy using the following XML file. See Listing 4.

<?xml version="1.0" encoding="UTF-8"?> : <policyList xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="Policy.xsd" > <policy> <policyValue Name="Type" Factory="com.ibm.wps.policy.parse.StringFactory" > <value>theme</value> </policyValue> : <policyValue Name="Description" Factory="com.ibm.wps.policy.parse.StringFactory" > <value>Side Navigation Only Theme Policy</value> </policyValue> : <policyValue Name="PznType" Factory="com.ibm.wps.policy.parse.StringFactory" > <value>QuickrSideNavOnly</value> </policyValue> : <policyValue Name="topNavigationStopLevel" Factory="com.ibm.wps.policy.parse.IntegerFactory" > <value>0</value> </policyValue> : <policyValue Name="renderTopNavigation" Factory="com.ibm.wps.policy.parse.BooleanFactory" > <value>false</value> </policyValue> : <policyValue Name="sideNavigationStartLevel" Factory="com.ibm.wps.policy.parse.IntegerFactory" > <value>3</value> </policyValue> : <policyValue Name="topNavigationStartLevel" Factory="com.ibm.wps.policy.parse.IntegerFactory" > <value>0</value> </policyValue> <policyValue Name="Title" Factory="com.ibm.wps.policy.parse.StringFactory" > <value>QuickrSideNavOnly</value> </policyValue> </policy> </policyList>

- 90 -

Listing 4. AddThemePolicyNode.xml You could execute XML import at WebSphere Portal Admin page. Choose Site Administration – Advanced Administration – Portal Settings – import XML, and then follow these steps. See figure 15.

1. Select C:/temp/AddThemePolicyNode.xml for Directory: field. 2. Click the Import button.

Figure15. Import XML to add new theme policy After you have installed the new policy in WebSphere Portal, it can be set on a page by accessing Page properties under Manage Pages in Portal Site Administration. To do this, follow these steps (see figure 16):

<?xml version="1.0" encoding="UTF-8"?> <request xsi:noNamespaceSchemaLocation="PortalConfig_1.4.xsd" create-oids="true" type="update" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> <portal action="locate"> <policy-node action="update" label="WebPage" type="" path=""> <url>file:///C:/temp/QuickrSideNavOnly_ThemePolicy.xml</url> </policy-node> </portal> </request>

- 91 -

1. Search for the Application root under Manage Pages, Select Page > Content Root

(You may have to turn several pages). 2. Click the Edit page properties icon for the Application Root.

Figure 16. Application Root under Manage pages

Figure 17. Setting theme policy on a page

- 92 -

3. The desired policy “QuickrSideNavOnly” can be selected from the drop-down box under Navigation Type on this page as shown in figure 17.

You will find the style has changed to “Quickr side navigation only” accessing Quickr place page (figure 18).

Figure 18. Quickr Side Navigation Only style Note: In our theme customization example (Millennia theme), we used the navigation properties of theme policy to easily switch from one type of navigation to another. Changing the theme policy for the Application Root page will set the theme policy for all Quickr places (specific themes can be set on each Quickr place, while all Quickr places inherit from the same theme policy). Theme policies can be set on the Application Root page and a few other pages (homepage for example). If you want to use different navigation styles for different places, you have to build themes that are independent from the theme policy from the navigation point of view. Page background You can update the page background image easily using the color palettes. The color palette used by Lotus Quickr is default.properties. To update your theme background, follow these steps:

1. Open default.properties located at custom_theme/colors. 2. Find property bodyMarginBackground = url(./colors/qpg/body_background.gif). 3. Update this property to point to your custom background image:

bodyMarginBackground = url(./colors/custom/body_background_ml.jpg) 4. Background of Toolbar and Body should be transparent. So update are following;

- 93 -

Listing 5. Update in colors/default.properties

5. Next, resave styles_rules.jspf, styles.jsp, and Default.jsp. This step updates the

timestamps on all the files and forces the theme to recompile the files and to read the color palette into the theme again. You should also check web browser cache must be cleared. After these changes occur, the page background is updated to look similar to the one shown in figure 19.

Figure 19 After page background is updated

<before> bodyMarginBackground=url(./colors/qpg/body_background.gif) repeat-x bodyBackground=#FFFFFF toolbarBackground=#FFDB4A url(./colors/qpg/toolbar_background.gif) repeat-x <after> bodyMarginBackground=url(./colors/custom/body_background_ml.jpg) repeat-x bodyBackground=transparent toolbarBackground=transparent

- 94 -

Theme banner The next step is to update the logos in the theme designed for the custom team place. Lotus Quickr banner table structure also be target for customization. Follow the steps listed here to tailor the banner to your custom environment. Figure 20 displays the banner logo highlighted in pink. You can update this to a custom logo by making modifications in the banner_toolbar.jspf file that is located in /custom_theme.

Figure 20. Banner logo Find the text shown in listing 6. and update the file path parameter value to point to your custom logo file (in Bold).

Listing 6. Banner title <div> element in banner_toolbar.jspf The banner is updated to look like the image shown in figure 21.

Figure 21. The Millennia banner

<before> <div class="bannerTitle"> <img alt="Lotus Quickr" title="Lotus Quickr" src='<portal-logic:urlFindInTheme file="colors/${colorPalette}/toolbar_logo.gif"/>' /> </div> <after> <div class="bannerTitle"> <img alt="Lotus Quickr" title="Lotus Quickr" src='<portal-logic:urlFindInTheme file="colors/custom/toolbar_logo_ml.gif"/>' /> </div>

- 95 -

Another row table is needed for search bar, login/logout and user profile link. It can be modified by <div> tag. In the styles_theme.jspf file located at /custom_theme root, add original class .toolbar-second as shown in listing 7. Listing 7. Toolbar-second style definition in styles_theme.jspf For the orange color shown here, use #FFCC66. We recommend that you collect information about updated colors for new theme in advance. (See figure 22 for specific color information used in this there customization.)

Figure 22. Update color information in Millennia theme

.toolbar-second { background-color: #FFCC66; border: 1px solid; border-top-color: ${colors.bodyBorder}; border-bottom-color: ${colors.bodyBorder}; border-right-color: #FFCC66; border-left-color: #FFCC66; }

- 96 -

Then update again the banner_toolbar.jspf file as shown in listing 8.

- 97 -

Listing 8. Add <div> element and comment out toolbarShadow in banner_toolbar.jspf The banner should now look like the one shown in figure 23.

<before> <div class="bannerTitle"> <img alt="Lotus Quickr" title="Lotus Quickr" src='<portal-logic:urlFindInTheme file="colors/custom/toolbar_logo_ml.gif"/>' /> </div> <c:if test = "${themePolicy.renderUserActions}"> <portal-logic:if loggedIn="yes"> : : --%> </button> <div class="clearing"></div> </div> <div class="toolbarShadow"><!-- IE hack --></div> <after> <div class="bannerTitle"> <img alt="Lotus Quickr" title="Lotus Quickr" src='<portal-logic:urlFindInTheme file="colors/custom/toolbar_logo_ml.gif"/>' /> </div> <div class="clearing"></div> <div class="toolbar-second"> <c:if test = "${themePolicy.renderUserActions}"> <portal-logic:if loggedIn="yes"> : : --%> </button> <div class="clearing"></div> </div> </div> <%-- <div class="toolbarShadow"><!-- IE hack --></div> --%>

- 98 -

Figure 23. Updated banner The banner margin and padding can be modified in the style file. Image can be updated respectively. toolbarShadow can be reused at bottom of banner. Listing 9. Update margin and padding in styles_theme.jspf

.banner { color: ${colors.bannerText}; background: ${colors.bannerBackgroundImage}; background-color: ${colors.bannerBackground}; margin: 0px; padding: 0px; border: 1px solid ${colors.bodyBorder}; } .bannerTitle{ font-size: ${requestScope.cssRules.fontSize.large}; color: ${colors.bannerTitleText}; font-weight: bold; padding-${requestScope.cssRules.bidiLeft}: 10px; /* padding-top: 4px; */ /* padding-bottom: 4px; */ padding-top: 0px; padding-bottom: 3px; float:${requestScope.cssRules.bidiLeft}; } .toolbar { color: ${colors.toolbarText}; background:${colors.toolbarBackground}; margin-${requestScope.cssRules.bidiRight}: 0px; /* border-bottom: 1px solid ${colors.toolbarBorder}; */ /* border-left: 1px solid ${colors.toolbarBorder}; */ /* border-right: 1px solid ${colors.toolbarBorder}; */ /* padding: 7px 5px; */ padding: 0px 0px; /* -moz-border-radius-bottomright: 4px; */ /* -moz-border-radius-bottomleft: 4px; */ } .toolbarShadow { background:${colors.toolbarShadowBackground}; /* height: 4px; */ height: 6px; padding: 0px; /* margin: 0px 3px 0px 3px; */ } a.returnHome{ /* background: #2e93e2 url(images/quickr/returnHome_${requestScope.cssRules.bidiLeft}.gif) center ${requestScope.cssRules.bidiLeft} no-repeat; */ background: #476C90 url(colors/custom/returnHome_left_ml.gif) center ${requestScope.cssRules.bidiLeft} no-repeat; border: 1px solid ${colors.breadcrumbBorder}; padding: 1px 15px !important; display: block; }

- 99 -

- 100 -

Listing 10. Update menu icon in banner_toolbar.jspf Listing 11. Add toolbarShadow in banner.jspf

<before> <%-- this div is for branding image --%> <div class="bannerbg"> </div> <div class="clearing"></div> </div> <%-- end banner --%> <after> <%-- this div is for branding image --%> <div class="bannerbg"> </div> <div class="clearing"></div> </div> <div class="toolbarShadow"><!-- IE hack --></div> <%-- end banner --%>

<before> <img id="userActionsMenu_img" class="menuLinkSideNav" src='<portal-logic:urlFindInTheme file="colors/${colorPalette}/menu_selected_yellow.gif"/>' alt="<portal-fmt:text bundle='nls.engine' key='link.page.actions' />" title="<portal-fmt:text bundle='nls.engine' key='link.page.actions' />" /> <after> <img id="userActionsMenu_img" class="menuLinkSideNav" src='<portal-logic:urlFindInTheme file="colors/${colorPalette}/menu_selected.gif"/>' alt="<portal-fmt:text bundle='nls.engine' key='link.page.actions' />" title="<portal-fmt:text bundle='nls.engine' key='link.page.actions' />" />

- 101 -

Listing 12. Update in colors/default.properties The banner should be updated to look like the one shown in figure 24.

Figure 24. Updated banner Page area The following section provides guidance on updating the page area in the Lotus Quickr theme. As indicated by the name, the page area in the theme is wrapped in a <div> tag with the ID value pageArea. This <div> tag acts as a wrapper for the page header, the top /side navigation, portlet render area, and the page footer. The page header, shown in figure 25, is the first section rendered within the page area. This space is used to display the application title, the application favorite status, and the Customize link that allows users to control access to the place and add pages or components to a place. Common customizations to this section include updating the background image, font styles, and header dimensions.

Figure 25. Page header Here are a few examples of different customizations for the page header. Background is updated from image to color. Padding is omitted and bottom border is added.

<before> toolbarShadowBackground=url(./colors/qpg/toolbar_shadow.gif) repeat-x <after> toolbarShadowBackground=url(./colors/custom/toolbar_shadow_ml.gif) repeat-x

- 102 -

Listing 13. Update in colors/default.properties Listing 14. Update pageArea style definitionnt in styles_theme.jspf After these changes are made, the page header now looks similar to the one shown in figure 26.

Figure 26. Page header after updates Figure 27 shows the side navigation row that contains all the pages for a team place. The section of the theme has scope for some advanced customizations.

<before> customizeBackground=transparent url(./colors/qpg/barBack.gif) <after> customizeBackground=#FAD791

#pageArea { background-color: ${colors.bodyBackground}; border: 1px solid ${colors.bodyBorder}; /* padding: 2px; */ padding: 0px; -moz-border-radius: 4px; } #pageHeader { background: ${colors.customizeBackground} top ${requestScope.cssRules.bidiLeft} repeat-x; padding: 2px; border-bottom: 1px solid ${colors.bodyBorder}; }

- 103 -

Figure 27. Side navigation Default side navigation has simple look and feel. Let's build unique menu area for side navigation with original style class (as shown in listing 15-16).

- 104 -

Listing 15. wpsSideNav style definition in styles_theme.jspf Listing 16. Add class to sideNav in Default.jsp

.wpsSideNav{ font-size: ${requestScope.cssRules.fontSize.normal}; border: 1px solid; border-color: ${colors.sideNavBorder}; text-decoration: none; white-space:nowrap; background-color:${colors.sideNavBackground}; /* margin-top:0px; */ /* margin-bottom:0px; */ /* margin-${requestScope.cssRules.bidiLeft}: 0px; */ /* padding-${requestScope.cssRules.bidiLeft}: 0px; */ font-weight: bold; margin: 15px 10px 15px 10px; padding: 4px; -moz-border-radius: 6px; /* This is a fix for the IE peekaboo bug */ <c:if test="${requestScope.isIE}"> {height: 1%;} </c:if> } .wpsSideNav-box { background-color: #F6F8FC; border-right: 1px solid; border-bottom: 1px solid; border-color: ${colors.bodyBorder}; }

<before> <table style="width:100%; height:100%;" cellpadding="0px" cellspacing="0px" id="portletRenderWidth"> <tr> <td valign="top"> <portal-logic:if portletSolo="no"> <%@ include file="./sideNav.jspf" %> </portal-logic:if> </td> <td width="100%" height="100%" valign="top"> <after> <table style="width:100%; height:100%;" cellpadding="0px" cellspacing="0px" id="portletRenderWidth"> <tr> <td valign="top" class="wpsSideNav-box"> <portal-logic:if portletSolo="no"> <%@ include file="./sideNav.jspf" %> </portal-logic:if> </td> <td width="100%" height="100%" valign="top">

- 105 -

Figure 28. Side navigation after updated styles It is necessary to superadd color data in side navigation and borders. The example in listing 17-18 shows how to update style definitions. Listing 17. Update wpsSideNav style definition in styles_theme.jspf

.wpsSideNav .wpsNavItem a { display: inline; border: 0px !important; } .wpsSideNav .selected{ color: ${colors.sideNavSelectedText} !important; background-color: ${colors.sideNavSelectedBackground}; text-decoration: none; padding:3px 3px; display:block; cursor:default; white-space:nowrap; border: 1px solid; border-color: ${colors.sideNavSelectedBorder}; margin:0px 2px 0px 2px; }

- 106 -

Listing 18. Update in colors/default.properties

At this point, your team place looks like the one shown in figure 29.

Figure 29. Side navigation after updated styles

<before> sideNavText=#000 sideNavTopLevelText=#000 sideNavBackground=#FFF sideNavBorder=white sideNavTopLevelBorder=#E6E6E6 sideNavSelectedBackground=#777777 sideNavSelectedBorder=#E6E6E6 <after> sideNavText=#303090 sideNavTopLevelText=#303090 sideNavBackground=#D8E8F7 sideNavBorder=#476C90 sideNavTopLevelBorder= sideNavSelectedBackground=#6699CC sideNavSelectedBorder=#476C90

- 107 -

The last step is to update portlet style. Frame of portlet is decorated by skin, but some portlet style depend on which theme include. the purpose is to give the consistency of externals between theme and skin. Listing 19. Update portlet side bar style definition in styles_ibmportlet.jspf

.ibm-portlet-sidebar .primary-action-section BUTTON { /* background: #E6F0FC url(./images/portlet/buttonBg.gif) left center repeat-x; */ /* color: #0063DC; */ background: #E6F0FC url(./colors/custom/buttonBg_ml.gif) left center repeat-x; color: #FFFFFF; border: 1px solid #9acae8; padding: 0.2em 0.5em; cursor: pointer; } .ibm-portlet-sidebar .action-section { /* background-color:#F6FBFF; */ /* border:1px solid #C2E2F4; */ line-height: 1.4em; padding: 0.5em; padding-bottom: 0; margin-bottom: 2em; background-color:#D8E8F7; border:1px solid #476C90; -moz-border-radius: 6px; }

- 108 -

Figure 30. Portlet side bar area before and after updated styles The final result is shown in figure 31.

Figure 31. Updated view of the place

- 109 -

3.6 Deploying the customized theme and skin 3.6.1 Deploying themes and skins in a production environment Theme and skin JSPs are managed as part of the main WebSphere Portal enterprise application and are thus part of the WebSphere Portal EAR file. The WebSphere Portal EAR file must be updated and redeployed when adding new themes and skins. Failure to do this could cause the custom themes and skins to be deleted when the EAR file is subsequently updated. To update and redeploy the EAR file with the new themes and skins, follow the instructions in the WebSphere Portal Information Center. (See the URL below.) http://publib.boulder.ibm.com/infocenter/wpdoc/v6r0/topic/com.ibm.wp.ent.doc/wps/dgn_dpycst.html 3.6.2 Install the theme and skin into Quickr As already described in this section, to install the theme deployed to Quickr, the Administrative portlet “Themes and Skins” is used. An alternative way is provided by XMLAccess. The sample file is shown in Listing 20.

- 110 -

Listing 20. DeployTheme.xml

Further information is in the WebSphere Portal Information Center. (See the URL below) http://publib.boulder.ibm.com/infocenter/wpdoc/v6r0/topic/com.ibm.wp.ent.doc/wps/admxmsmp.html Additionally, see support information about PK63234 for Lotus Quickr 8.1 services for Portal. (See the URL below) http://www.ibm.com/support/docview.wss?uid=swg21307594 3.7 Summary This section summarizes common customizations to the Lotus Quickr theme for WebSphere Portal. It describes how to create a new theme and skin and how to apply it to a place. It also talks about the theme components and the role that each component plays in the theme. Finally, the chapter went over individual theme sections and provided examples of common customizations to modify the theme.

<?xml version="1.0" encoding="UTF-8"?> <request xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="PortalConfig_1.4.xsd" type="update" create-oids="true"> <portal action="locate"> <!-- Sample for deploying themes and skins in an XML script. Note that this only created the database entries; you still need to provide the rendering JSPs under the resource root directories specified in the XML. --> <skin action="update" active="true" objectid="customSkin" uniquename="ibm.portal.skin.customSkin" resourceroot="customSkin"> <localedata locale="en"> <title>customSkin</title> <description>A customSkin!</description> </localedata> </skin> <theme action="update" active="true" defaultskinref="customSkin" uniquename="ibm.portal.theme.customTheme" resourceroot="customTheme"> <localedata locale="en"> <title>A customTheme</title> </localedata> <!-- There's only one skin that may be combined with this theme. --> <allowed-skin skin="customSkin" update="set"/> </theme> </portal> </request>

- 111 -

Part IV -

Quickr Template Customization – Inserting the wiki and blog functionality into a Standard Team Place- Domino Architecture

Steven Peters

Abhishek Jain

Catherine Tchong

- 112 -

Goals and Scope of the Customizations covered in this article In this document, we describe how to perform template Customization for Lotus Quickr Domino Standard Teamplace template. We will be implementing three scenarios as listed below:

1. Integrating Standard Team place template with wiki functionality 2. Integrating Standard Team place template with blog functionality 3. Integrating Standard Team place template with both wiki and blog functionality

Finally, we describe how to deploy the new template using placetype creation and how to customize the theme on the places created from these placetypes.

Integrating Standard Team place with Wikis

1. Login to the Quickr server and click on “Create a Place”

Figure 1

2. Choose “Wiki” as the base template for the place

- 113 -

Figure 2

3. Fill in all the fields and click on “Create”

Figure 3

4. Click on the place name and you will be taken to the place home page.

- 114 -

Figure 4

5. Click on “Customize this place”, as shown in Figure 5.

Figure 5

6. Click on “Forms”

- 115 -

Figure 6

7. Click on first form “Wiki Page” and then save the form on local disk by doing Right Click -> Copy -> Paste

- 116 -

Figure 7

8. Do the same step for all the placebots

- 117 -

Figure 8

9. Exit the place. 10. Create a new place with “Standard place for Teams” as base template. 11. Fill in all the fields and click on “Create”.

- 118 -

Figure 9

12. Using an id with administrator access for quickr server open the following databases in Lotus Notes client. <quickr server>\data/LotusQuickr\<wiki place name>\main.nsf <quickr server>\data/LotusQuickr\<standard team place with wiki name>\main.nsf

13. Go to “QDK” view in both the databases. 14. Copy the “Wiki Page” form from the <Wiki place> to the <Standard place>

Figure 10

15. Copy the “Wiki Fast Start” document (one with the text in body) from the <Wiki place> to the <Standard place>.

- 119 -

Figure 11

16. Get UNIDs of both the elements copied above from the <Wiki place>. 17. This can be done by accessing the “Meta” tab in the document properties

Figure 12

18. The UNID will be the value after last “/”. 19. The UNIDs should match these values

8E5E3E1C13061E71062572A4005896ED - wiki page form 241BA5539D751FA9852572CF0056E94E - wiki fast start doc

20. Using Domino Designer write an agent in the <Standard place> to set the UNIDs in the copied documents as per the values mentioned below. Run the agent on one document at a time as the values will be hard-coded. The code for the agent can be as below: Sub Initialize Dim session As New NotesSession Dim db As NotesDatabase Dim collection As NotesDocumentCollection Dim doc As NotesDocument Set db = session.CurrentDatabase Set collection = db.UnprocessedDocuments Set doc = collection.GetFirstDocument() Messagebox "UNID is: " + doc.UniversalID doc.UniversalID = "241BA5539D751FA9852572CF0056E94E" Call doc.Save(True,False) Messagebox "UNID is: " + doc.UniversalID End Sub

- 120 -

21. Do not close the designer. 22. Open the <Standard place> from the browser and create a new folder in it using

“New Page or Folder” option and name the folder as “Wiki” using “Discussion” as base template.

Figure 13

23. Close the browser. 24. Using Domino Designer copy all the “Wiki” views from the <Wiki place> to the

<Standard place>.

Figure 14

25. Close the Designer. 26. Go to the <Standard place> from the browser and click on Customize -> Forms.

- 121 -

27. Open the “Wiki Page” form and replace the html in there by the file which we stored on the local machine in Step 7. Also, fill the value “New Wiki Page” in the field “Text to be used on the New Document button”

Figure 15

28. Now go to Customize -> PlaceBots and import the place bots we saved on local machine in Step 8.

29. For “Publish Wiki” PlaceBot use the option “When a form is submitted” and select ”Wiki Page”

- 122 -

Figure 16

30. For “deleteWiki” and “copyWiki” PlaceBots use the scheduler with default options and select the option “Disable Placebot”.

- 123 -

Figure 17

31. Again go to Customize -> Form -> Wiki Page form and set the “Folder” repository for new documents to the “Wiki” folder.

Figure 18

32. Open the “Wiki” folder and go to Folder options.

Figure 19

33. Set the value of the favored form to “Wiki Page”

Figure 20

34. Complete the steps and place the “Wiki” folder as desired. 35. Test the functionality by clicking on the “New Wiki Page” button.

- 124 -

Figure 21

36. You should be able to create a new Wiki and see it in the “Wiki folder”

Figure 22

- 125 -

37. This step completes the integration of Wikis with Standard Team Place.

Integrating the Standard Team place template with blog functionality

1. Login to the Quickr server and click on “Create a Place”

Figure 23

2. Choose “Blog” as base template for the place

Figure 24

3. Fill in all the fields and click on “Create”

- 126 -

Figure 25

4. Click on the place name and you will be taken to the place home page.

Figure 26

5. Click on “Customize this place”

- 127 -

Figure 27

6. Click on “Forms”

Figure 28

7. Click on all the forms one by one and then save the form on local disk by doing Right Click -> Copy -> Paste

8. Do the same step for all the placebots

- 128 -

Figure 29

9. Exit the place. 10. Create a new place with “Standard place for Teams” as base template.

Figure 30

- 129 -

11. Fill in all the fields and click on “Create”. 12. Using an id with administrator access for quickr server open the following

databases in Lotus Notes client. <quickr server>\data/LotusQuickr\<blog place name>\main.nsf <quickr server>\data/LotusQuickr\<standard team place with blog name>\main.nsf

13. Go to “QDK” view in both the databases. 14. Copy the “Blog Entry”, “QBlog Preferences” and “Image” forms from the <Blog

place> to the <Standard place>. For Image form use the one with attachments.

Figure 31

15. Copy the “Blog”, “Blog Fast Start” and “Images” documents from the <Blog place> to the <Standard place>.

Figure 32

16. Get UNIDs of all the elements copied above from the <Blog place>. 17. This can be done by accessing the “Meta” tab in the document properties

- 130 -

Figure 33

18. The UNID will be the value after last “/”. 19. The UNIDs should match these values

09E51B734D454517062572AA005ECDFF – Blog Entry Form 1B2A79F63BB61135062572AA005EBC3F – QBlog Preferences form 2C4A5362B4A94FDA062572AA005E9F27 – Image Form A4125175F6805D29852572CF0057C778 – Blog Fast Start Document E0C06F91932DE36C062572AA005FD78D – Blog Document 3D5837BCC3D3D484062572AA005F22EF – Images Document

20. Using Domino Designer write an agent in the <Standard place> to set the UNIDs in the copied documents as per the values mentioned below. Run the agent on one document at a time as the values will be hard-coded. The code for the agent can be as below: Sub Initialize Dim session As New NotesSession Dim db As NotesDatabase Dim collection As NotesDocumentCollection Dim doc As NotesDocument Set db = session.CurrentDatabase Set collection = db.UnprocessedDocuments Set doc = collection.GetFirstDocument() Messagebox "UNID is: " + doc.UniversalID doc.UniversalID = "241BA5539D751FA9852572CF0056E94E" Call doc.Save(True,False) Messagebox "UNID is: " + doc.UniversalID End Sub

21. Close the Designer. 22. Go to the <Standard place> from the browser.

- 131 -

23. You will encounter an error like this. Ignore it for now.

Figure 34

24. Click on Customize -> Forms. 25. Open all the forms one by one and replace the html in there by the respective files

which we stored on the local machine in Step 7.

Figure 35

26. Now go to Customize -> PlaceBots and import all the place bots we saved on local machine in Step 8.

- 132 -

Figure 36

27. For “Publish QBlog Preferences” PlaceBot use the option “When a form is submitted” and select”QBlog Preferences”.

28. For “createComment”, “manageComment” and “deleteBlogEntry” PlaceBots use the scheduler with default options and select the option “Disable Placebot”.

Figure 37

29. Click on “Blog” and go to “Blog Settings”. Set the values as desired and click on “Next”. Now the error should go and you should see a page like this.

- 133 -

Figure 38

Figure 39

30. Close the browser. 31. Open the “Blogs” document in <Standard Place> in Lotus Notes client using

“QDK” view only and set the value of “h_Position” to 350000.

- 134 -

Figure 40

32. Open the place in browser and you should see that the Blog link has changed its position.

Figure 41

33. Test the functionality by clicking on the “New Blog Entry” button. 34. You should be able to create a new Blog and see it in the “Blog” folder.

- 135 -

Figure 42

Figure 43

35. This step ends the integration of Blogs with Standard Team Place.

Integrating the Standard Team place template with Wiki & Blog functionality

1. Login to the Quickr server and click on “Create a Place”

- 136 -

Figure 44

2. Choose “Standard place for Teams” as base template for the place

Figure 45

3. Fill in all the fields and click on “Create”

- 137 -

Figure 46

4. Click on the place name and you will be taken to the place home page.

- 138 -

Figure 47

5. Close the browser. 6. For “Blog” and “Wiki” places we will use the places created above. 7. It is presumed that you have all the forms and placebots from all the earlier

“Wiki” and “Blog” places already stored on your local machine. 8. Repeat steps 12-34 from “Integrating Standard Team place with Wikis” with the

new <Standard Place>. 9. Repeat steps 12-32 from “Integrating Standard Team place with Blogs” with the

new <Standard Place>. 10. Your place should now look like this.

- 139 -

Figure 48

11. Test the Wiki functionality by clicking on Wiki -> New Wiki Page.

Figure 49

- 140 -

12. You should see the new Wiki created.

Figure 50

13. Now test the Blog functionality by clicking on Blog -> New Blog Entry

Figure 51

14. You should be able to see the new Blog created

- 141 -

Figure 52

15. This step ends the integration of Wiki and Blog with Standard Team Place.

Deploying the customized template using Placetype creation Once you have a place that you have customized in terms of appearance and functionalities using theme and template customizations, or even basic customization from the “Customize this place” menu, you can create a placetype from your customized place. Placetype creation is described in IBM Lotus Quickr Information Center: http://publib.boulder.ibm.com/infocenter/lqkrhelp/v8r0/topic/com.ibm.lotus.quickr.dominov81.doc/customize/qp_adm_pt_create_t.html Note that documents and members can also to be part of the new placetype. During placetype creation, you will be able to authorize or not custom themes.

Deploying a customized theme on ITSO Millennia Standard Teamplace with Wiki and Blog In previous sections, we have created a theme (ITSO Millenia) that we applied to a standard place, a wiki place and a blog place. In the last ITSO Millennia customized template which is a standard teamplace with a blog and a wiki that all share the same HTM layout files, you will be able to use the

- 142 -

“Customize/Custom theme” menu to upload your theme files, and then apply the new theme. NOTE on the wiki history functionality We have described how to add the wiki and blog functionality to a standard place. Note that to enable the wiki history functions, you need to update skins/quickr81/scripts/Quickr81.js to take into account that the placetype of your place is not “Wiki”. To avoid modifying the reference skins/quickr81/scripts/Quickr81.js, you can use the theme customization to load layout files that will point to your updated script. For example, we will apply the modification into our custom theme directory : skins/millenniaQuickr81. Edit skins/millenniaQuickr81/scripts/Quickr81.js and add the line in bold characters : isWikiPlace: function () { var ret = false; if (!ret) ret = ( typeof(window.G_PlaceType) != "undefined" && window.G_PlaceType.toLowerCase() == "wiki" ); if (!ret) ret = ( typeof(window.c_Form) != "undefined" && (window.c_Form.toLowerCase() == "wiki") ); return ret; } Ensure that all your HTM layout files uses the updated file skins/millenniaQuickr81/scripts/Quickr81.js (instead of skins/Quickr81/scripts/Quickr81.js). Finally, upload (if needed) your custom theme files.

- 143 -

Part V -

Quickr Template Customization – Quickr J2EE Architecture Customizing the Standard Quickr Template to add a new component – innovation place

Deepak Khandelwal

Shigehisa Okamoto

- 144 -

5.1 Goals and Scope of template customization for this example The overall scope of this document is to understand where we can use these templates and how to customize them within the J2EE edition of Quickr 8.1. In this article, we accomplish the following two objectives:

1. First , we start from the standard ‘out of the box’ teamplace template and customize it based on specific a use case.

2. Next, we describe how to create a custom component, how to register it on the component shelf and how to save a new template which includes the new component.

5.2 What is a Quickr template A “template” represents a pattern or a model. In Quickr terminology, a template describes reusable collaborative patterns. They are portable and persistent. Users can instantiate templates in the form of an application which contains component definitions, process definitions, layout and seed content. It also describes a community and its relationship to the components. Templates can have the ability to affect change in instances created from the original template. A Place is created by instantiating it from a template. A customized place (including pages, components and ACL roles definition) can be saved to new template (Figure.1).

- 145 -

Figure 1: Understanding the relationship between a Quickr Place and a Quickr Template

5.3 Standard templates and components in Lotus Quickr services for WebSphere Portal In this section we introduce default templates and components provided in Lotus Quickr 8.1. It is useful for the consideration of the comparison of similar functions to in the Lotus Quickr services for Domino.

Standard templates A Quickr place within Lotus Quickr for WebSphere Portal consists of sets of components and pages. We will illustrate in the coming sections how to create an original place and a template from a blank “Custom” template. This section gives an overview of the other out-of-box templates for the starting point for creating place.

- 146 -

Table 1. Standard templates in Lotus Quickr services for WebSphere Portal Template Name

Pages Components on pages

Usage

Custom

(no page) (no component) Creates a place with no default components installed. Instead, you customize your place by adding any component you need.

Library

“Library”

-Library Creates a place where documents and media files are managed and searched, such as creating workflows and review cycles for documents.

“Welcome”

-Agenda (Lists) -Announcements

“Meeting Materials”

-Library

Meeting Place

“Minutes” -All Minutes (Wiki)

Creates a place to organize and manage team meetings. This place contains a library that you can use to keep relevant documents handy and a wiki that can be used for meeting minutes.

“Welcome”

-Announcements -Contacts

Project Library Place

“Project Library”

-Project Tasks -Library

Creates a place where you can create, manage, track, and search documents and media. Organize information and tasks related to your content with announcements, project tasks, and a contacts list.

Team Blog

“Team Blog” -Blog Displays information in the style of a journal or diary. Create posts and comments in a blog to share information with the team and to gain quick project solutions. Bring visibility to your ideas and questions.

“Welcome” -RichTextEditor “Blog” -Blog “Library” -Library

Team Place “Wiki” -Wiki

Creates a place where you can manage different types of team content. This place contains a blog that you can use to post information, a library to help manage documents and media files, and a wiki that lets you create and edit content online.

“Team Wiki” -Wiki Creates a place where content is

created and maintained by

- 147 -

Team Wiki members.

Standard components included All Quickr functions such as Blog and Wiki functionality are achieved in the form of component. We can add standard components to our customized place. Table 2. Standard components in Lotus Quickr services for WebSphere Portal Component Name

Usage Can add comment

Main screen Can add to previous page

Blog

A blog is a Web site that displays information in the style of a diary. In a place, the team blog is used to record the milestones of a team or project.

Yes view no (new page will be created)

Wikis

A wiki is a Web site created and maintained by the same people who use the Web site. In a place a wiki is used to display content in the form of editable Web pages called wiki pages.

Yes latest update document

no

Feed Reader

The feed reader allows you to subscribe to and consume available feeds which you want to be displayed.

No view yes

Announcements

One of list feature component. An announcements list contains news items relating to a team or project. Users with editor access to an announcements list can create new announcements.

Yes view yes

Project Tasks

One of list feature component. A project task list is used to store a set of tasks relating to a team or project. Users with editor access to a project task list can create new task.

yes view yes

One of list feature component. A contacts list contains a list of

No view yes

- 148 -

Contacts

contacts relating to a team or project. Users with editor access to a contacts list can create new contacts.

Library

Libraries are collection containers for document files and other media files, such as video or audio files.

Yes view no

Discussion Forums

User could start a brainstorming session on a current issue or project, get new ideas from a broad group of people, and more.

“post” to topic

view yes

Team Calendar

Calendar application. Allows posting events and milestones by teamspace members.

No View(month /week/day)

yes

Blog A team member can post an idea, report and memo in rich text. The Blog reader can add a comment to each blog post. In customization for place/template, this component is added to the place with new page.

Wiki The team member can edit a web page. The wiki has section content (like Wikipedia), versioning, generate link from/to wiki page. This component is added to place with new page too.

- 149 -

Feed Reader This component can subscribe RSS/Atom feed. Display item options are configurable.

Announcements / Project tasks / Contacts These components use common “Lists” form element, thus structure of them looks similar.Announcements, we can select icon by importance of announcement post. Project tasks provide assign task to team member, GUI parts for task progress status. Contacts has many fields for attribute data of each contact.

- 150 -

Library This is the most multifunctional out-of-the-box component. Document files are stored and managed, including many view and navigation styles, document versioning, template, document types and draft approval workflow. The Quickr connector on the client side accesses a Quickr Place hthrough a unit of this library component.

Discussion Forums This is a new component from verison 8.1. This component treats data within a three layer structure; namely using “Forums”, “Topics” at each forum and “Posts” for each topic is supported.

- 151 -

Team Calendar This is a new component from verison 8.1. A team member can post events and milestone for project. This component provides three view modes: Month, Week and Day.

All these default components are as portlets and portlet applications in Portal. We can find them in web modules; iwwcm-teamspace-portlet.war (Blog, Wiki and etc.), pdm.war (Library), teamCalendar.war, feedreader.war.

- 152 -

5.4 Template customization which builds upon the standard Teamplace This section provides information on how to customize a template and populate it with initial seed content. The Teamplace customization is based upon incorporating additional functionality around blogs, wikis etc. Quickr 8.1 provides a user with several ‘out of the box’, provided templates. When a user wants to create a new teamplace, they have to choose from one of these built-in provided templates. The figure below illustrates the standard templates provided with J2EE Quickr 8.1.

Figure 2: Standard list of templates available in Quickr 8.1 According to one’s specific requirements, the user creates a place based on an underlying template. With the exception of a custom template, every template has few standard components. For example, the library template will have a library portlet, while the Team wiki will have a wiki portlet included. A user can make further changes in these standard templates based on their specific needs. For example, if someone has the library template and needs to add wiki functionality, they can add a wiki page in that teamplace. When creating your own template, you will ideally have defined a specific use case in advance which determines the required functionality. Additionally, you will have some seed content which you want to have in all instances of this template. Finally, you will

- 153 -

want to have a defined layout for the template. In the upcoming sections, we will illustrate a sample test case which describes the process for customizing a template.

Use Case for Creating the Knowledge Network Teamplace Test Case: IBM. Senior managers want to have a virtual team ‘place’ with a standard layout. More specifically they wish for the Quickr teamplace to have the following characteristics:

• It must have a home page which contains a clear Welcome message. The home page also needs to contain a Feed Reader and an Announcement.

• The next page should have a wiki and a Feed Reader portlet. • Finally, there should be one page for Discussion Forums, Library and Blogs. • The Feed Reader portlet should point to same feed that is used for providing the

initial seed content. The customized Teamplace for this example is called the “Knoweldge Network”.

Step 1: Create the custom Teamplace ‘Knowledge Network’ To start with this case scenario, we begin by creating a custom teamplace first. To create the custom teamplace, perform the following steps:

1. First, we must create the place.

- 154 -

Figure 3: Creating a new Teamplace based on a custom template.

2. There will be no pages within this new place with custom template and it will ask you to create pages. Click on ‘click here to create a new page’.

Figure 4: Example of the sample place “Knowledge Network”

Step 2: Create a welcome page for the Teamplace. As a starting point for the Teamplace, we need to create a Welcome Page. The theme and theme policy can be decided by administrators or you can use the default Quickr theme.

- 155 -

Figure 5: Creating a welcome page for the new place

Step 3: Adding portlets to the page After adding this page, we need to add portlets to this page. We can select the portlets from a portlet catalog by performing the following steps:

Figure 6: Adding portlets to the page

1. Click on Add portlets and select rich text portlet from the menu. Click OK.

- 156 -

Figure 7: Adding the Rich Text Editing Portlet

2. Add two more portlets on this page, namely the Announcements and Feed Reader portlets.

Figure 8: Adding the Feed Reader portlet

Figure 9: Adding the Announcements portlet

3. Click on Done and return to the Teamplace. You are now presented with the Welcome Page where you need to write content in rich text portlet and provide a feed url for the feed reader portlet.

- 157 -

4. After adding a base amount of seed content, the Welcome Page within the

Teamplace should look like the figure below.

Figure 10: Example of the Welcome Page with sample content

Step 4: Adding a new page for the wiki and feed reader. To create the new page for placing these portlets, perform the following steps:

1. Go to “customize” on a Teamplace and click on page--> Advanced layout

Figure 11: Customizing using Advanced Layout option

- 158 -

2. Create a new page.

Figure 12: Creating a new page within the teamplace

3. Add both the Wiki and Feed Reader portlets on this page.

Figure 13: Adding the Wiki portlet on the new page

- 159 -

Figure 14: Adding the Feed Reader portlet on the new page

4. Return to the Teamplace.

Step 5: Adding a page for a discussion forum within the teamplace. To add the page for hosting the discussion forum, perform the following steps:

1. Click on “customize” and select components. Select Discussion Forums from components provided on the shelf.

Figure 15: Selecting the Discussion Forum component

2. Add this as a new page with some name.

- 160 -

Figure 16: Adding a page to host the discussion forum

Step 6: Adding a library component.

1. Similar to Step 5, click on “customize” and select components. Select the Library component from components provided on the shelf.

Figure 17: Selecting the Library component

2. Create the page for the Library component.

- 161 -

Figure 18: Creating the page for the library

Step 7: Adding the blog component

1. Similar to the steps for adding the Discussion Forum and the Library component, follow the same steps to add a Blog component.

2. Click on “customize” and select components. Select the Blog component from components provided on the shelf.

Figure 19: Selecting the Blog component

3. Next, specify to add the blog to a new page and click OK.

- 162 -

Figure 20: Adding a new page for the blog component At this point, we have added all the required pages and components to this Teamplace, as shown in the figure below.

Figure 21: Illustration of the Knowledge Network Teamplace with all components added

Step 8: Save the Teamplace as a template

1. Go to “customize” and then click on Properties. Click on Save Template.

- 163 -

Figure 22: Save as a template

2. Provide a name for the new template

Figure 23: Naming the Application Template

3. Once you have saved the template, you can see this new template as an option to choose from when you create new Teamplace.

- 164 -

Figure 24: Once saved as a template, this appears as an option to choose from when creating new Teamplace

4. Once you create a new Teamplace using this new, customized template and you will experience the same features, layout and the seed content.

- 165 -

5.5 Creating a new custom component The following article discusses how to create a new component, register it into the component shelf, then create this as a template

Overall goal and scope for Innovation Place In this article, we will create a new component called idea and register it into the component shelf. Later we will create another template for a new Teamplace - Innovation Place which will consist of following components.

o Discussion Forum (To discuss posted ideas) o Library (for upload documents and abstracts) o Idea component (Framework to add/ edit ideas) o Latest Ideas (Menu component for latest ideas posted) o Wiki and blog functionality

For Template customization for the Innovation Place, we must first associate these components with specific pages, then save the updated place as a template. The template will consist of the following pages and components: Welcome Page - Rich text viewer portlet (Introduction for innovation place) - Idea component (new customized component) - Latest ideas (Menu component) Discussion Forums page - Discussion forums portlet Library page - Library portlet Blog page - Blog portlet Wiki page - Wiki portlet

Preview of the pages and components to be created for the Innovation Place

- 166 -

Figure 1: Welcome page within Innovation Place

Figure 2: Discussion forums component within Innovation Place

- 167 -

Figure 3: Library component within Innovation Place

Figure 4: Blog component within Innovation Place

- 168 -

Figure 5: Wiki component within Innovation Place In the next section, we discuss the steps required to create a new component.

Creating the Idea component Within the Innovation Place, we will create a new custom component called an Idea component. The functionality for the List Idea component is as follows:

• User can create ideas by clicking “Add idea” link • User can edit / delete the ideas • User can see other ideas and their authors • User can add an attachment with an idea

The List Ideas component in Lotus Quickr is implemented using Web Content Management (WCM) and the following defines the basic WCM concepts that are used.

Authoring Templates

Authoring Template determines List Ideas Design. It defines the list of fields and elements that are on List Ideas Item. It also defines the default values for the fields in the default Content settings.

Menu Component

Menus in WCM display the List Items that match the search criteria of the Menu element.

Presentation Templates

Presentation Templates define the layout of elements from Content/List Items that will be displayed using HTML.

Site

A Site is a top level item and can be used to set the default mappings for Authoring Templates & Presentation Templates for the Content/List Items.

SiteArea

- 169 -

SiteArea is used to group the Content items. Authoring Template & Presentation Template mappings set on SiteArea will override the settings on Site.

Steps for Creating the Idea Component The following describes the detailed steps for creating Idea component. There are a total of 10 high level steps listed, with specific details given for each step. These are as follows:

• Step 1: Create the Ideas Site • Step 2: Copy items within the site area • Step 3: Create the Authoring Template for Ideas • Step 4: Create the Menu to display the list of Ideas • Step 5: Create Authoring Tool Component which will generate URLs for

New/Edit/Delete Ideas • Step 6: Create Presentation Template to display the Ideas item • Step 7: Copy default Content Item Announcement from Project Tasks • Step 8: Edit Ideas Site and change the template mappings & Menu Component • Step 9: Make a copy of the Announcement Portlet • Step 10: Add the Component on the Quickr customize link.

Step 1: Create the Ideas Site In this step, you will create the ideas site, based upon the original Announcement site.

1. Go to Site Administration --> Manage Content. 2. Create a site for Ideas in the Shared Resources Library by opening the

Announcement site in edit mode. 3. You can click “By Site” and select “Announcement” in right pane.

- 170 -

Figure 6: Site Areas by Site

4. Click “Edit” button and then use Save As to save the Ideas Site.

Figure 7: Save As – Announcement to Ideas

- 171 -

Figure 8: Naming the new site

5. Once you have completed this step, you will see the Site Ideas listed within the list of Site Areas, as shown in the figure below.

Figure 9: Ideas Site has been created

Step 2: Copy items within the site area In this step, you will copy the items from the Announcement Site to the newly created Ideas site.

1. Copy items for the SiteArea under the Announcement Site to the newly created Ideas Site using More Actions in UI.

2. Select items SiteArea and then click More Actions--> Copy 3. This will bring up following screen for Site selection and select Ideas.

- 172 -

Figure 10: Copying Items from Announcements to the Ideas site

Step 3: Create the Authoring Template for Ideas The following steps illustrate how to create the Authoring template for Ideas.

1. Click New -->Authoring Template

- 173 -

Figure 11: Creating the new authoring template

2. Add list_ideas in the name field. 3. Add List - Ideas in the display title. 4. In “Authoring Template Settings” page, check items as shown in the figure below.

- 174 -

Figure 12: Options for the Authoring Template settings

5. Click on the option for Default Content Setting. 6. Click on Manage Elements, as shown in the figure below.

Figure 13: Managing the Elements to be included in the template

7. Add the following elements in the Ideas Authoring template:

- 175 -

Element type Name Display title Rich Text body Body File Resource ideaUpload Project Idea Attachment

8. Once completed, this will look like the figure below:

Figure 14: Element Manager

9. Click OK . In the Default Content Settings option, please review the settings and match these to the values shown in the screenshots illustrated below:

- 176 -

Figure 15: Default Content Settings: Name Field properties

- 177 -

Figure 16: Default Content Settings: Display title properties

- 178 -

Figure 17: Default Content Settings: Description field properties

Figure 18: Hide Field Type

- 179 -

Figure 19: Hide Field Library

Figure 20: Hide Field Authors

Figure 21: Hide Field Owners

Figure 22: Profile properties

Figure 23: Hide Content Properties section

- 180 -

Figure 24: Rich Text Field properties

Figure 25: Attachment Properties

10. Once you have reviewed the settings shown in the figures above, click Save and click Close

- 181 -

Step 4: Create the Menu to display the list of Ideas 1. Open List – Announcement Menu from Components --> Menu for editing and

save it as List – Ideas Menu

Figure 26: Performing the Save As step to create the List – Ideas Menu 2. Change the Authoring Template selection criteria of Menu Element Query to List

– Ideas and remove List – Announcement, as shown in the figure below.

- 182 -

Figure 27: Changing the Authoring Template selection criteria 3. In Further options setting click the option for User-specified rendering portlet

configuration

User-specified rendering portlet configuration Figure 28: Specifying the portlet configuration 4. Once this option is open, enter the code from the samples shown below: Header :

<Component name="shared resources/generic_table_header"/> <table> </table> <table class="portlet-table" cellspacing="4" cellpadding="0">

- 183 -

Design for each menu search result:

Footer: No result design: 5. Click Save. In HTML fields, you can see component id parameter is added automatically. 6. Click Close.

Step 5: Create Authoring Tool Component which will generate URLs for New/Edit/Delete Ideas

1. Go to Web content New Component Authoring tool 2. Enter the information as shown in the screenshots shown below: This is for the

list_ideas_home_tool.

<tr> <td width="25px"> <Component name="shared resources/list_ideas_icon" compute="always"/> </td> <td style="width:100%;white-space: normal;"> <span class="content-title"> <a href='<Placeholder tag="href"/>' class="teamspaceList"><Placeholder tag="title"/></a> <br/> </span> </td> </tr>

<Component name="shared resources/generic_table_footer"/>

<Component name="shared resources/generic_table_header"/> <table class="portlet-table" cellspacing="0" cellpadding="0"> <tr class="row-blank" > <td> @nls@list.empty@ </td> </tr> <Component name="shared resources/generic_table_footer"/>

- 184 -

Figure 29: Enter the name of the Authoring Tool component

Figure 30: Specifying the Action Design

Figure 31: Edit Live Content – use the sample code below Delete action design:

- 185 -

3. Click Save. The id parameter is added as below:

Figure 32: The Delete Action Design

4. Click Close.

5. Next, add a second Authoring tool 6. Go to Web content ->New ->Component -> Authoring tool 7. Add the information as shown in the screenshots below. This is for the

list_ideas_item_action_links.

Figure 33: Enter the name of the Authoring Tool component

<Component name="shared resources/list_edit_portlet_settings"/>

- 186 -

Figure 34: Specifying the Action Design

Figure 35: Edit Live Content – use the sample code below

Figure 36: Delete Action Design

- 187 -

Step 6: Create Presentation Template to display the Ideas item In the following steps, you will use the List - Main News Presentation template, then save this as a List-Main Ideas template.

1. Open List – Main Presentation Template for editing and Save As List – Main Ideas

Figure 37: Open the List Main News, then Save As List – Main Ideas

2. Enter the information as shown in the screenshots shown below:

Figure 38: Providing the information for the Name and Display title

- 188 -

3. Change the Presentation Template HTML, so that it displays the fields from

Ideas and uses the List – Ideas Home Action Links authoring tool component that was created to generate the New/Edit/Delete Links for Ideas. The HTML to enter is shown below:

Presentation template

4. Create the List – Ideas Item template

5. Open the List – Announcement Presentation Template for editing and Save As List – Ideas Item

<table cellpadding="0" cellspacing="0" dir="@nls@dir@" class="ibm-portlet-section-body"> <tr> <td class="ibm-portlet-section-left"> <div class="ibm-portlet-section-header-small ibm-portlet-section-header"> <table cellpadding="0" cellspacing="0"> <tr> <td class="header-icon"><Component name="shared resources/list_main_view_icon"/></td> <td class="header-left"><h1> <IDCmpnt context="current" type="sitearea" field="title"/></h1><div class="information"><IDCmpnt context="current" type="sitearea" field="description"/></div> </td> <td class="header-right" style="white-space: nowrap;border-left:1px solid #ECECEC"> </li> </td> <td class="header-right" style="white-space: nowrap" ><Component name="shared resources/list_ideas_home_tool"/></td> </tr> </table> </div> <div class="content-container"> <Element context="current" type="site" key="menu"/> </div> </td> </tr> </table>

- 189 -

Figure 39: Entering the new name for List Ideas Item – Created from Save As from Announcement Presentation Template

6. Change the Presentation Template HTML (provided below) so that it displays the fields from Ideas and uses the List – Ideas Item Action Links authoring tool component that was created to generate the New/Edit/Delete Links for Ideas.

- 190 -

7. Click Save and click Close.

<table cellpadding="0" cellspacing="0" dir="ltr" class="ibm-portlet-section-body"> <tr> <td class="ibm-portlet-section-left"> <div class="ibm-portlet-section-header-small ibm-portlet-section-header"> <table cellpadding="0" cellspacing="0"> <tr> <td class="header-icon"><Component name="shared resources/list_main_view_icon"/></td> <td class="header-left"><h1><IDCmpnt context="current" type="content" field="title"/> </h1><div class="information"><a class="nav-link" href="<URLCmpnt context="current" type="site" mode="storable"/>">< Back to <IDCmpnt context="current" type="sitearea" field="title"/></a>&nbsp;<span class="commentHeaderTimestamp">|</span>&nbsp;</div> </td> &nbsp;&nbsp;&nbsp <td class="header-right" style="white-space: nowrap;border-left:1px solid #ECECEC"><Component name="shared resources/list_ideas_item_action_links"/> </td> </tr> </table> </div> <div class="content-container"> <table cellpadding="0" cellspacing="0" width="100%"> <tr> <td> <Element context="current" type="content" key="body"/> </td> </tr> <tr> <td><script> var fileUrl = '<Element context="current" type="content" key="ideaUpload"/>'; if(fileUrl!='') { document.write("<a href="+fileUrl+" title="" target="">"+fileUrl.substring(fileUrl.lastIndexOf('/')+1,fileUrl.lastIndexOf('?'))+"</a>"); } else { document.write("<FONT COLOR=red>No Attachment</FONT>"); } </script> </td> </tr> </table> <IDCmpnt context="current" type="content" field="authors" awareness="true" start="&lt;p&gt;&lt;h4&gt;@nls@author.title@&lt;/h4&gt;"/> </div> </table>

- 191 -

Step 7: Copy default Content Item Announcement from Project Tasks 1. Go to Content->By Site Area-> Announcement ->items and select

Announcement Content item, 2. From More Actions->Copy, Select Ideas->items so that it saves the copy in

Ideas->items.

Figure 40: Copying the default content item

Step 8: Edit Ideas Site and change the template mappings & Menu Component

1. Now, edit the Ideas site and change the template mappings & Menu Component

Figure 41: Edit the Ideas site and change the template mappings

- 192 -

2. Edit the template mapping as follows; a. Remove List – Announcement (Authoring Template) List – Announcement (Presentation Template) Item mapping b. Add List – Ideas (authoring Template) List – Ideas Item (Presentation Template) mapping

c. Edit List – Default (Authoring Template) d. Change mapping

From: List – Main(Presentation Template) To: List – Main Ideas (Presentation Template)

e. Change List View (menu) to select List – Ideas Menu f. Change New Button Text to Add Idea

Figure 42: Changing the template mappings

3. Click Save and click Close.

- 193 -

Step 9: Make a copy of the Announcement Portlet 1. Now go to Site Administration and make copy of Announcement Portlet to

create Ideas 2. Go to Site Administration-> Advanced Administration ->Portlet

Management->Portlets and search for Announcement

Figure 43: Creating the Ideas Portlet based upon the Announcements portlet

3. Click on copy portlet and create Ideas Portlet

Figure 44: Naming the new portlet

4. Click on the configure portlet icon and go to Portlet Settings. 5. Change following values:

templateSite shared resources/ideas titleKey Ideas desciptionKey Idea Description WCM_CONTENT_CONTEXT /ideas2/items/Announcement

- 194 -

6. Change the value of AUTHORINGTEMPLATE_OVERRIDE by performing the following steps:

a. Go to Site Administration -> Manage Content -> Authoring Template

->Open List – Ideas in Edit mode .

b. Right click on List – Ideas authoring template -> view page source. It will open a text document. Search for the HEX_IDENTITY_REFERENCE value field. It gives results similar to this:

c. Take the value of value field . Change the value of AUTHORINGTEMPLATE_OVERRIDE with this value .

Add one parameter New parameter : CommentsShow New value : disabled

d. Click Add.

Figure 45: Listing of Parameters

<input type="hidden" value="9362290047dd0f7f8d56cd667e18b34e" name="PC_7_UBKEDVC21GEKB02P28TC6D14D1_HEX_IDENTITY_REFERENCE" id="HEX_IDENTITY_REFERENCE" class="te1" />

- 195 -

e. Click OK.

7. Go to Portal Settings->Custom Unique Names->Portlets and change Unique

Name for the News portlet to wps.p.web.ideas

Step 10: Add the Component on the Quickr customize link. 1. To add the component on the Quickr customize link, edit the following file: <QuickrDir>/wp_profile/installedApps/<node>/wps.ear/wps.war/themes/html/<theme folder>/pageHeaderContent.jsp file and following for custom component under <div id="customizePage2" style="display: none;"

Creating the Menu component for latest Ideas In this step, we will now create a menu component which will retrieve content from the specified authoring template on the date basis.

Step 1: Create a new Menu component 1. Create a new Menu component by navigating to New Component Menu

<li> <a href="#" onClick="javascript:showTeamSpaceAddComponentForm(&quot;<%=MarkupUtil.htmlAttributeEscape(MarkupUtil.jsEscape("Ideas"))%>&quot;, &quot;<%=MarkupUtil.htmlAttributeEscape(MarkupUtil.jsEscape("Ideas"))%>&quot;, &quot;<%= applicationID %>&quot;, &quot;wps.p.web.ideas&quot;, true, nodesOnLevel, false, Ideas)" class="picture">Ideas</a> </li>

- 196 -

Figure 46: Creating the new Menu component

2. Name the Menu component Aggregated Ideas

Figure 47: Naming the new Menu component ‘Aggregated Ideas’

Step 2: Select the List- Ideas as authoring template 1. Select the List-Ideas (created in a previous step) as the authoring template for the

Menu component

- 197 -

Figure 48: Selecting the List-Ideas template authoring template

Step 3: Select menu design properties 1. Select the menu design properties as shown in the screenshot below:

- 198 -

Figure 49a: Menu component design properties

Figure 49b: Menu component design properties

- 199 -

Figure 49c: Menu component design properties

2. Once you have verified these settings, please click Save and close.

Step 4: Place the Web Content Viewer portlet on the page to view the list Ideas

1. Finally – view the completed component for List Ideas on a page, you must first put a “Web content viewer” portlet on that page.

2. From within the page, add the Web Content Viewer Portlet as shown below

Figure 50: Place the Web Content Viewer on the page to view List Ideas

- 200 -

Step 5: Edit the settings of the Web Content Viewer Portlet to show the Aggregated Ideas component

1. Click Edit shared setting of this “Web content viewer” Portlet on the page as following.

Figure 51: Associating the Aggregated Ideas component with the web content viewer portlet.

2. Click Apply and OK.

- 201 -

3. All the latest ideas will be listed here in descending order, as shown in the screenshot below

Figure 52: Showing the list of Ideas

Saving the Innovation Place template with the new customized components After adding all the pages with all these out of box and customized components, we can save it as a template using the same method as described in last section.

1. Click customize Properties and Save Template.

Figure 53: Saving as a template

- 202 -

Comparison between J2EE version and Domino version in template customization As we described, the J2EE version a Quickr Place template consists of page and components. Blog, Wiki and Library are all ready as components. Though the template only for the unit is prepared respectively, it is possible to add component to other templates. In case we customize template, edit object are components and pages. Both version has similar function as Application, but the beginning point of customizing depends on each architecture and is different. Customizing and extending templates and component can be done based on the portal and web content management infrastructure. Regarding document file storage function, J2EE version basically treat them in only Library component. Domino version could has document files at any position as attached file. In this respect, when the Quickr connector accesses them, usage of the application is a little different between both version. Table 3. Comparison template customization J2EE version Domino version Default template -Custom

-Library -Meeting Place -Project Library Place -Team Blog -Team Place -Team Wiki

-Srandard place for Teams -Blog -Wiki etc. (Some Domino templates are only available in English and from Website)

Customize object Components and Pages Forms and Pages Connector access to

Library component Any group for attached files

Summary This document summarizes customizations to the Lotus Quickr template for WebSphere Portal. We described how to create a new template by editing the place and creating an original component. This serves as a useful exercise for understanding how the template/place and component architecture is based on portal and web content management. We introduced the default templates and components in Lotus Quickr portal version, and illustrated some of the key differences with the Quicker Domino version. Reference: Customizing your place (Information Center)

- 203 -

http://publib.boulder.ibm.com/infocenter/lqkrhelp/v8r0/topic/com.ibm.lotus.quickr.user.wp.doc/ts/customize_place.html Customizing components in IBM Lotus Quickr services for IBM WebSphere Portal 8.0 http://www.ibm.com/developerworks/lotus/library/quickr-components/