SlideShare a Scribd company logo
SHOW202: How to customize Lotus Quickr 
Templates Using HTML, Javascript and CSS 
Bob Barber | Developer – IBM Lotus Quickr 
Brian O'Gorman | Developer – IBM Lotus Quickr
2 
Agenda 
● Introduction 
● Creating a custom theme for your group 
● Modifying the default template 
● Using performance servlet on customizations 
● Q & A 
● Related Sessions
Introduction 
● Bob Barber 
▬ Working for IBM for 10 years. 
▬ Working on Lotus Quickr doing UI 
3 
development for 3 years. 
● 
● Brian O'Gorman 
▬ Working for IBM for 5 years 
▬ Working on Lotus Quickr Domino 
for 1 year 
▬ Worked on Composite 
Applications before that
4 
Agenda 
● Introduction 
● Creating a custom theme for your group 
● Modifying the default template 
● Using performance servlet on customizations 
● Q & A 
● Related Sessions
Creating a custom theme for your group 
● Using custom themes, you can: 
▬ Apply customization's to individual places 
▬ Associate customization's to a placetype 
5
Creating a custom theme for your group 
Anatomy of a custom theme 
● HTML files define various 'scenes' in IBM® Lotus® Quickr® 
▬ page.htm – layout of content while being viewed 
▬ edit.htm – layout of content while being edited 
▬ folderlist.htm – layout of list and discussion folders 
▬ headlines.htm – layout of headline folders 
▬ slideshow.htm – layout of slideshow folders 
● Stylesheet 
▬ stylesheet.css – include any styles your customizations 
6 
need 
● 
● Thumbnail - Displayed in the Themes gallery for your theme 
● Other resources - JavaScript files, images, etc
Creating a custom theme for your group 
Anatomy of a custom theme 
● You can include other image & JavaScript files in your theme by 
referencing them from the htm files or stylesheet 
<img src="MyScript.js" style="display:none"/> 
<script type="text/javascript" src="$FILE/MyScript.js"></script> 
7 
● 
● To include image, just use it in an <img> tag 
● To include a JavaScript file use a hidden image: 
● 
● 
● 
● To include image in stylesheet, just reference it: 
▬ 
.lotusThingy { background-image: 
url(ThingyBG.png); }
Creating a custom theme for your group 
Installing a custom theme 
● Requires ActiveX, need to use Microsoft® Internet Explorer® 
● Access the Custom Themes UI via Customization options in a place 
8
Creating a custom theme for your group 
9 
● 
● Lets go create a theme... 
● 
● Our new theme will address two issues 
▬ 1. Make a “LotusKnows” theme 
▬ 2. Add some extra functionality via the theme
Creating a custom theme for your group 
Creating a “LotusKnows” theme 
● Issue we are addressing: 
▬ I'd like my places to have a LotusKnows color scheme 
● What we need to do to implement: 
▬ Create a custom theme 
▬ Override the Logo within the theme 
▬ Override various styling in the theme 
10 
NB: This is not an official LotusKnows theme. 
This is my non-graphic-designer attempt 
at making a theme that inherits my 
interpretations (and extrapolations) of the 
LotusKnows color styles.
Creating a custom theme for your group 
Getting started with a custom theme 
● Get the base theme files from the server 
▬ <domino>/data/domino/html/qphtml/skins/quickr81 
● Just take the files we need: 
▬ page.htm, headlines.htm, listfolder.htm, 
11 
page.htm, slideshow.htm, stylesheet.css 
▬ We don't need the sub-folders 
● We'll use these files as a base, and modify as needed
Creating a custom theme for your group 
Changing the logo for your theme 
● In each of the htm files, the logo is referenced: 
● 
<img id="lotusLogo" alt="Lotus Software" src="/qphtml/skins/common/images/logo.gif"/> 
● We want to change this to point to our new logo: 
● 
<img id="lotusLogo" alt="Lotus Knows" src="LotusKnows-logo. 
gif"/> 
● Do not specify any path 
● Place your logo image in same folder as the theme files 
▬ The upload custom theme feature will pick up referenced images 
12
Creating a custom theme for your group 
Changing styling within your theme 
● The styling for Lotus Quickr is based on the IBM Lotus User Interface 
▬ Also known as “OneUI” 
● The Lotus User Interface is an initiative to standardize the interface of 
Lotus products. 
● It is used in IBM Lotus Quickr, IBM Lotus® Connections®, and more 
● Documentation can be found here: 
▬ http://www-12.lotus.com/ldd/doc/oneuidoc/docpublic/index.htm 
● It defines the layouts, components, styling, etc. 
13
Creating a custom theme for your group 
Changing styling within your theme 
● I want to change the “Places” link at the top of the screen 
● From the Lotus User Interface documentation, this is the banner. 
▬ className = lotusBanner 
● And the links in it are lotusLinks 
14
Creating a custom theme for your group 
Changing styling within your theme 
● You can also use Firebug to see the exact usage in Quickr 
1 Identify item to change 
2 
3 Refine selection in the 
HTML view 
4 
5 
6 Find the style class 
15
Creating a custom theme for your group 
Adding styles to the stylesheet 
● Create the appropriate style in stylesheet.css 
● Only specify the style properties you want to change 
▬ Allow rest to be inherited from Lotus Quickr css files 
● I want the background color of the “Places” link to be yellow(-ish) 
● 
#lotusBanner ul.lotusLinks li.lotusSelected a, 
.lotusBanner ul.lotusLinks li.lotusSelected a { 
background-color:#a96d00; 
16 
● 
● 
● 
● 
} 
● Repeat as necessary for various elements on page
Creating a custom theme for your group 
But it's not all just colors, there's lots of background images too 
● Some items use images (or multiple images) for fancy effects 
● 
17 
● 
● 
● 
● 
● Locate original image 
to get properties 
(i.e. Size) 
●
Creating a custom theme for your group 
But it's not all just colors, there's lots of background images too 
● Create your own image 
● Place in same folder as your theme files 
● Override the style to point to your image: 
● 
#lotusTitleBar .lotusInner, 
.lotusTitleBar .lotusInner { 
18 
● 
● 
● 
● 
● 
● 
● 
background-image:url(MyTitleBarLeft.png); 
} 
● Repeat as necessary...... or as willing ;-)
Creating a custom theme for your group 
Link your htm files to your stylesheet 
● You need to update all the htm files to reference your stylesheet 
● 
</script> 
<!-- Import the stylesheet --> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"/> 
<div id="lotusFrame"> 
<div id="lotusBanner"><div class="lotusRightCorner"><div class="lotusInner"> 
19 
● 
● 
● 
● 
● Be sure to insert this after the initial <script> blocks 
▬ just before the lotusFrame div 
● This ensures your stylesheet is loaded after the core stylesheets 
▬ and that your overrides are not overridden
Creating a custom theme for your group 
Create a thumbnail 
● Themes can have a thumbnail associated with them 
● This can be GIF or JPEG 
● Should be 80x60 pixels 
● Thumbnail is displayed in the Choose Theme UI 
▬ & in the Custom Themes management UI 
20
Creating a custom theme for your group 
Uploading your theme 
● Need to use Microsoft Internet Explorer – for ActiveX support 
● Give name & description for theme, then select your files 
▬ Can browse for files, or use drag'n'drop 
●Include all files, even if 
you've not modified them. 
● 
●If you leave out a htm file, 
Lotus Quickr will try to 
generate it based on other 
files supplied. 
21
Creating a custom theme for your group 
Updating your theme after initial upload 
● Open the Custom Theme UI 
● Select your custom theme 
● 
22 
● 
● 
●
Creating a custom theme for your group 
Enjoying the results 
● Apply the new custom theme for your place 
● 
23 
● 
● 
● 
● 
● 
● 
● 
● 
● 
● Then see if you can get your UI/Graphics designer to provide the rest of the styles & images you want. :-)
Creating a custom theme for your group 
An example – A theme with a Page Read Counter 
● Issue we are addressing: 
▬ I'd like to know which content place members find interesting 
▬ To get this information, I'd like a view counter on the pages. 
● What we need to do to implement: 
▬ Update our custom theme to display view counter 
24 
▬ In theme, use JavaScript, AJAX, CSS, HTML to add counter to UI 
▬ Create a PlaceBot to read, increment, store, and return the 
counter 
▬
Creating a custom theme for your group 
The PageCounter PlaceBot 
● Using PlaceBot to handle the server-side task of managing the counter 
▬ A PlaceBot is an agent, we will use it like a Web Agent 
▬ We will call it using AJAX from the browser 
25 
● 
● The Placebot will: 
▬ Take document UNID as input 
▬ Locate the document 
▬ Read the current view count from a field in the document 
▬ Increment the view count and save it back to the document 
▬ Return the new count to the browser
Creating a custom theme for your group 
The PageCounter PlaceBot 
● PlaceBot can be written in LotusScript® or JavaTM 
▬ Both versions provided with files for this talk 
26
Creating a custom theme for your group 
The PageCounter PlaceBot 
● We are using this PlaceBot as a service 
▬ We make a request to it, giving it an ID, and get back a result 
● In the PlaceBot, we need to extract the ID from the query 
● The PlaceBot's DocumentContext contains a field with the queryString 
● 
AgentContext agentContext = session.getAgentContext(); 
Database db = agentContext.getCurrentDatabase(); 
Document docContext = agentContext.getDocumentContext(); 
String queryString = docContext.getItemValueString("Query_String"); 
27 
● 
● 
● 
● 
Set db = session.Currentdatabase 
Set docCtx = session.Documentcontext 
queryStr = docCtx.Getitemvalue("Query_String")(0) 
● Our query string will be like this: 
▬ OpenAgent&unid=DA27A807FF3652A28025768900495B07
Creating a custom theme for your group 
The PageCounter PlaceBot 
28 
● 
● To return result from a LotusScript agent, just use print 
● 
● 
● 
● 
... 
ret = incAndGetPageCount(db, unid) 
Print(ret) 
End Sub 
● To return result from Java agent, use PrintWriter 
... 
PrintWriter pw = getAgentOutput(); 
pw.println(ret); 
...
Creating a custom theme for your group 
The PageCounter PlaceBot 
● By detault, a PlaceBot will wrap your output in a basic HTML page 
● If your PlaceBot outputs “27”, the response would be: 
● 
<html><head></head> 
<body text="#000000">27</body></html> 
● To override this, you can specify the content-type for your output 
● Print “Content-Type:text/plain” 
29 
● - (or text/xml, 
text/javasc 
ript, etc...) 
● 
● 
● 
● 
Print("Content-Type:text/plain"); 
Print(ret) 
PrintWriter pw = getAgentOutput(); 
pw.println("Content-Type:text/plain"); 
pw.println(ret); 
● Content-Type declaration must be first line output from the PlaceBot 
●
Creating a custom theme for your group 
Adding the PlaceBot to your place 
● Open the place, click “Customize this place”, click “Placebots” 
● Click “New Placebot” 
▬ Be sure to name it “PageCounter” - this will be needed by the 
30 
theme 
▬ Run on Schedule, but “Disable Placebot” in schedule settings 
▬ Select your file(s) to upload
Creating a custom theme for your group 
Test the PlaceBot 
● Open a page in your place, and get the document UNID 
● 
31 
● 
● 
● 
● Build URL to the PlaceBot (/agent)
Creating a custom theme for your group 
JavaScript to get the count and insert into page 
● JavaScript code for the counter is contained in PageCounter.js 
● 
● The script needs to perform 2 steps 
▬ Call the agent to get the count 
▬ Updates the PageCounter div in the page with the counter 
32 
HTML 
▬ 
● But first we need to find the document UNID
Creating a custom theme for your group 
How to find the document UNID 
● Could get it from the url (location.href) 
33 
● 
● 
● 
● But it might already be defined in the DOM?
Creating a custom theme for your group 
JavaScript to get the count and insert into page 
● Call the agent to get the count 
▬ Uses AJAX to make call to agent on server 
function InsertPageCounter(/*String*/divId) { 
34 
var response; 
var pageUnid = currentPage.PageUnid; 
var agentUrl = "../../PageCounter?OpenAgent&unid=" + pageUnid; 
dojo.io.bind({ 
url: agentUrl, 
load: function(type, data, evt) { 
response = data; 
response.trim(); 
insertCountIntoPage(divId, response); 
}, 
mimetype: "text/plain" 
}); 
} 
Lotus Quickr 8.2 
uses Dojo 0.4. 
Need to use dojo.io.bind 
as opposed to xhrGet.
Creating a custom theme for your group 
JavaScript to get the count and insert into page 
● Updates the PageCounter div in the page with the counter HTML 
▬ Uses three <span>s, to allow extra styling on actual number 
function insertCountIntoPage(/*String*/ divId, /*String*/ count) { 
var pcDiv = dojo.byId(divId); 
pcDiv.setAttribute("class", "PageCounter"); 
var span = document.createElement("span"); 
span.textContent = "This page has been viewed "; 
pcDiv.appendChild(span); 
span = document.createElement("span"); 
span.setAttribute("class", "PageCounterCount"); 
span.textContent = count; 
pcDiv.appendChild(span); 
span = document.createElement("span"); 
span.textContent = " times."; 
pcDiv.appendChild(span); 
35 
}
Creating a custom theme for your group 
Adding counter to page.htm – Discussion, Simple & Ordered folders 
● X marks the spot – this is where I want my view counter 
● Use Firebug to see what is there: <div 
id=”AuthorAndModified”> 
36
Creating a custom theme for your group 
Adding counter to page.htm – Discussion and Simple folders 
... 
<!-- Import the stylesheet --> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"/> 
<!-- Import the Javascript needed for the view counter --> 
<img src="PageCounter.js" style="display:none"/> 
<script type="text/javascript" src="$FILE/PageCounter.js"></script> 
... 
... 
37 
<!-- "This is checked out..." --> 
<QuickPlaceSkinComponent name=PageStatus 
prefixHTML={<div class="lotusSection">} 
postfixHTML={</div>}> 
<!-- Div placeholder for the PageCounter (and script to insert it) --> 
<div id="PageCounter"></div> 
<script>InsertPageCounter("PageCounter");</script> 
<!-- Author and Modified --> 
<QuickPlaceSkinComponent name=authorAndModified 
emptyFormat={} 
delimiter={,&nbsp;} 
prefixHTML={<div id="AuthorAndModified">} 
postfixHTML={</div>}> 
</div> <!-- lotusHeader --> 
... 
Additions
Creating a custom theme for your group 
Adding counter to headlines.htm – Headline folders 
● X marks the spot – this is where I want my view counter 
● Use Firebug to see what is there: <div id=”authodmod-text”> 
38
Creating a custom theme for your group 
Adding counter to headlines.htm – Headline folders 
... 
<!-- Import the stylesheet --> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"/> 
<!-- Import the Javascript needed for the view counter --> 
<img src="PageCounter.js" style="display:none"/> 
<script type="text/javascript" src="$FILE/PageCounter.js"></script> 
... 
... 
39 
selectedFormat={<Item class="h-revisionSelected-text">} 
Delimiter={<span class="h-revision-text">&nbsp;|&nbsp;</span>} 
EmptyFormat={}> 
<!-- Div placeholder for the PageCounter (and script to insert it) --> 
<div id="PageCounter"></div> 
<script>InsertPageCounter("PageCounter");</script> 
<!-- SPR RELS7EGSXD: Author and Modified --> 
<QuickPlaceSkinComponent name=authorAndModified 
format={<Item class="authormod-text">} 
prefixHTML={<br/><div class="authormod-text">} 
postfixHTML={</div><br/>} 
emptyFormat={} 
delimiter={,&nbsp;}> 
... 
Additions
Creating a custom theme for your group 
Adding counter to slideshow.htm – Slideshow folders 
● And again, X marks the spot 
● Use Firebug to see what is there: <div id=”authodmod-text”> 
40
Creating a custom theme for your group 
Adding counter to slideshow.htm – Slideshow folders 
... 
<!-- Import the stylesheet --> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"/> 
<!-- Import the Javascript needed for the view counter --> 
<img src="PageCounter.js" style="display:none"/> 
<script type="text/javascript" src="$FILE/PageCounter.js"></script> 
41 
... 
selectedFormat={<Item class="h-revisionSelected-text">} 
Delimiter={<span class="h-revision-text">&nbsp;|&nbsp;</span>} 
EmptyFormat={}> 
<!-- Div placeholder for the PageCounter (and script to insert it) --> 
<div id="PageCounter"></div> 
<script>InsertPageCounter("PageCounter");</script> 
<!-- SPR RELS7EGSXD: Author and Modified --> 
<QuickPlaceSkinComponent name=authorAndModified 
format={<Item class="authormod-text">} 
prefixHTML={<br/><div class="authormod-text">} 
postfixHTML={</div><br/>} 
emptyFormat={} 
delimiter={,&nbsp;}> 
... 
Additions
Creating a custom theme for your group 
Custom styling for our PageCounter 
● Add extra styles for PageCounter to stylesheet.css 
● Float the PageCounter <div> to right of the Author & Modified info 
● Display the actual number in bold italics 
● 
.PageCounter { float: right } 
.PageCounterCount { font-weight: bold; font-style: italic } 
42
Creating a custom theme for your group 
PageCounter 
43 
in action
Creating a custom theme for your group 
When not logged in, agent cannot update documents 
● Note: As the PlaceBot is modifying documents in the place, you need to 
be logged in. This type of customization is not suitable for places 
with anonymous access. 
44
Creating a custom theme for your group 
Further resources for creating custom themes 
● Lotus User Interface (OneUI) documentation: 
▬ http://www-12.lotus.com/ldd/doc/oneuidoc/docpublic/index.htm 
45 
● 
● Customizing Lotus Quickr 8.1 for Redbooks Wiki 
▬ http://www-10.lotus.com/ldd/lqwiki.nsf/dx/customizing-lotus-quickr-table-of-contents-for-● 
● Quickr Domino 8.2 Masterclass: Branding,Customization,Template Development for 
Quickr 
▬ http://www-10.lotus.com/ldd/lqwiki.nsf/dx/quickr-domino-8.2-masterclass-brandingcustomizationtemplate-● 
● LS2009 Breakout session AD403 - 
Customizing IBM Lotus Quickr Domino Services 
▬ http://www-10.lotus.com/ldd/lqwiki.nsf/dx/01272009112520AMWEBM9V.htm
Quickr Domino Customisation Samples Template 
● In the Apache catalog on OpenNTF.org 
http://www.openntf.org/catalogs/a2cat.nsf/topicThread.xsp?action=openDocument&documentId=093E45ABCC25088786257693003F4256 
46
47 
Agenda 
● Introduction 
● Creating a custom theme for your group 
● Modifying the default template 
● Using performance servlet on customizations 
● Q & A 
● Related Sessions
Modifying the default template 
● When creating a new place, you may want to make changes without 
having to create a whole new custom template 
● The rendering of the places in Lotus Quickr rely heavily on javascript 
and css 
● Most of these modifications will involve inspecting the resulting HTML 
generated for the Lotus Quickr UI and using javascript to manipulate 
the html objects and css class definitions 
● Some of the modifications will show how to override and modify some 
of the existing Lotus Quickr javascript functions 
● The modifications specified here will get increasingly more advanced 
(and cool) 
48 
●
Modifying the default template 
● Doing these modifications will require knowledge of HTML, CSS and 
javascript 
● These customizations outlined are all designed for Lotus Quickr8.2 with 
the latest fix pack running on IBM Lotus® Domino® 8.5.1 
● Since most of this is web development, any text editor will suffice when 
creating/editing javascript or css files 
● These customizations will be shown with Firefox® 3.5 since it's a great 
browser for general use as well as development. Obviously you may 
need to make your customizations also work on other major 
browsers such as Safari®, Opera®, Chrome®, and probably at least 
one more 
49 
● 
▬
Modifying the default template 
● Here's what we'll modify in the 
default theme: 
▬ Highlight the “What's New” section 
▬ Change the default logo 
▬ Highlight search terms in search 
50 
results 
▬ Add items to the document context 
menu 
▬ Add thumbnails to pictures in a 
view 
▬ Add a slideshow of images to the 
view from the thumbnails using 
a Dojo 1.3.2 widget 
●
Modifying the default template 
● Much of the UI generated is done through javascript. The easiest way 
to determine the generated markup is to use Firefox with the Firebug 
Add-on 
▬ Firefox - http://getfirefox.com 
▬ Firebug - http://getfirebug.com 
● Once these are installed, Firebug can be activated by clicking on the 
little bug at the bottom-right of the browser 
51 
● 
▬
Modifying the default template 
● To extend the default place there, it all starts with the Quickr81_ext.js, 
which is located in the 
datadominohtmlqphtmlskinsQuickr81scripts directory 
● This file is blank to start 
● It will not be overwritten with upgrades or Fix Packs 
● It is the starting point for loading default theme customizations 
● Use this file to load other supplemental scripts 
52
Modifying the default template 
● Here's what we'll modify in the 
default theme: 
▬ Highlight the “What's New” section 
▬ Change the default logo 
▬ Highlight search terms in search 
53 
results 
▬ Add thumbnails to pictures in a 
view 
▬ Add items to the document context 
menu 
▬ Add a slideshow of images to the 
view from the thumbnails using 
a Dojo 1.3.2 widget 
●
Modifying the default template 
-Highlight the “What's New” section 
● Issue we are addressing: 
▬ The “What's New” section of the Welcome page blends in with the rest of the Welcome 
54 
page. You may want to make this particular section more visible to your users 
● What we need to do to implement: 
▬ Inspect the welcome page for html element id used to define the What's New section 
▬ Create a new javascript file for the code new css class attributes for the html element to 
change it's look 
▬ Code to add style attributes to the document to make the section stand out 
▬ Load the new javascript file into the existing javascript extension file 
●
Modifying the default template 
-Highlight the “What's New” section 
● Click on the Inspect icon in Firebug. This will allow you to point to a 
section on the screen and the resulting HTML will show in Firebug 
● Using this, we can tell that this section has an id of “newsbody” 
● 
55 
▬
Modifying the default template 
-Highlight the “What's New” section 
● Create a new file called “Quickr81_ext_whatsnew.js” and put it in the 
scripts directory 
● This file will contain all the changes necessary for this customization 
and will be loaded in the Quickr81_ext.js file 
● One could load all customizations directly into the Quickr81_ext.js file, 
but I prefer to keep each customization in separate files and just 
load them from the Quickr81_ext.js file 
56
Modifying the default template 
-Highlight the “What's New” section 
57 
var Quickr_WhatsNewUtil = { 
main: function() { 
var sNewStyle = '<style>' + 
'#newsbody{' + 
'border: 1px dotted;' + 
'margin: 10px;' + 
'padding: 10px;' + 
'}'; 
sNewStyle += '#newsbody div b{' + 
'color: #ff0000;' + 
'font-size: 2em' + 
'}' + 
'</style>'; 
document.write(sNewStyle); 
} 
} 
Quickr_WhatsNewUtil.main(); 
● The code is encapsulated in a 
variable object called 
Quickr_WhatsNewUtil 
● The main method is called once 
the file is loaded 
● We will define a new string 
variable named sNewStyle 
that will contain the style 
definition 
● Since we know the id of the 
What's New section, any 
style defined with #newsbody 
will be applied to that section
Modifying the default template 
-Highlight the “What's New” section 
58 
var Quickr_WhatsNewUtil = { 
main: function() { 
var sNewStyle = '<style>' + 
'#newsbody{' + 
'border: 1px dotted;' + 
'margin: 10px;' + 
'padding: 10px;' + 
'}'; 
sNewStyle += '#newsbody div b{' + 
'color: #ff0000;' + 
'font-size: 2em' + 
'}' + 
'</style>'; 
document.write(sNewStyle); 
} 
} 
Quickr_WhatsNewUtil.main(); 
● We also want to set the style of 
the “What's New” section title 
area 
● Since this lives in nested <div> 
and <b> tags, we can add 
style definitions for it 
● Now that we've defined the 
styles, we'll use the 
document.write javascript call 
to output them for the 
browser to render 
● Finally, we'll call the main 
method to run our script
Modifying the default template 
-Highlight the “What's New” section 
● Next we need to load the newly created javascript file that will write out 
the new style for the What's New section 
● In the Quickr81_ext.js file, we can call the loadSupplementalScript 
method in the QuickrGeneralUtils object to load our new functionality 
59 
● 
▬ 
//simple modification showing how to change the look/feel of the "What's New" page 
QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_whatsnew.js");
Modifying the default template 
-Highlight the “What's New” section 
● Here's the resulting section changes: 
● The title of the section is now red and there is a border around it to 
draw more attention 
60 
▬
Modifying the default template 
● Here's what we'll modify in the 
default theme: 
▬ Highlight the “What's New” section 
▬ Change the default logo 
▬ Highlight search terms in search 
61 
results 
▬ Add items to the document context 
menu 
▬ Add thumbnails to pictures in a 
view 
▬ Add a slideshow of images to the 
view from the thumbnails using 
a Dojo 1.3.2 widget 
●
Modifying the default template 
-Change the default logo 
● Issue we are addressing: 
▬ In the default theme, the IBM Lotus Quickr logo displays on every page. We may want 
62 
to change this to be our own company logo or another logo 
● What we need to do to implement: 
▬ Create a new javascript file for the new code 
▬ Inspect the page for the logo image's id 
▬ Code to change the image source and any other look/feel changes 
▬ Load the new javascript file into the existing javascript extension file 
●
Modifying the default template 
-Change the default logo 
● Create a new file called “Quickr81_ext_newlogo.js” and put it in the 
scripts directory 
● This file will contain all the changes necessary for this customization 
and will be loaded in the Quickr81_ext.js 
63
Modifying the default template 
-Change the default logo 
● Click on the Inspect icon in Firebug. This will allow you to point to a 
section on the screen and the resulting HTML will show in Firebug 
● Using this, we can tell that the logo at the top an id of “lotusLogo” 
● 
64 
▬
Modifying the default template 
-Change the default logo 
● Using a text editor, edit the 
Quickr81_ext_newlogo.js 
file to define a new object 
called QuickrNewLogoUtil 
● We will use javascript to get 
the reference to the image 
tag using the id lotusLogo 
● We will change the image 
source to reference the 
IBM logo from the main 
site 
● We will also set a few style 
attributes to make it look 
better 
65 
var Quickr_NewLogoUtil = { 
main: function() { 
var nodeLogo = document.getElementById("lotusLogo"); 
nodeLogo.src = "http://www.ibm.com/i/v16/t/ibm-logo.gif"; 
nodeLogo.style.backgroundColor = "#649DE1"; 
nodeLogo.style.paddingBottom = "5px"; 
nodeLogo.style.border = "3px solid #DDDDDD"; 
} 
} 
Quickr_NewLogoUtil.main();
Modifying the default template 
-Change the default logo 
● Next we need to load the newly created JS file that will change the 
default logo 
● In the Quickr81_ext.js file, we can call the loadSupplementalScript 
method in the QuickrGeneralUtils object to load our new functionality 
66 
● 
▬ 
//simple modification showing how to change the look/feel of the "What's New" page 
QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_whatsnew.js"); 
//let's override the logo with our own 
QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_newlogo.js");
Modifying the default template 
-Change the default logo 
● Here's the resulting logo change: 
● The logo at the top left has now changed to the IBM logo and has a 
gray border 
67 
▬
Modifying the default template 
● Here's what we'll modify in the 
default theme: 
▬ Highlight the “What's New” section 
▬ Change the default logo 
▬ Highlight search terms in search 
68 
results 
▬ Add items to the document context 
menu 
▬ Add thumbnails to pictures in a 
view 
▬ Add a slideshow of images to the 
view from the thumbnails using 
a Dojo 1.3.2 widget 
●
Modifying the default template 
-Highlight search terms in search results 
● Issue we are addressing: 
▬ When search results are returned in Lotus Quickr, the search terms used aren't 
69 
highlighted in the results 
● What we need to do to implement: 
▬ Create a new javascript file for the new code 
▬ Code to make sure that we're on the search results page 
▬ Inspect the results for CSS class names used to define the look of results 
▬ Code to find all html elements using those CSS class names 
▬ Replace the search terms in those html elements with highlighted search terms 
▬ Load the new javascript file into the existing javascript extension file 
●
Modifying the default template 
-Highlight search terms in search results 
● Create a new file called “Quickr81_ext_searchterms.js” and put it in the 
scripts directory 
● This file will contain all the changes necessary for this customization 
and will be loaded in the Quickr81_ext.js 
70
Modifying the default template 
-Highlight search terms in search results 
● We'll define the Quickr_SearchTerms object, which will contain all of 
our necessary customizations 
● The _HighlightFormat property will define the html to replace the 
search terms 
● {0} will be replaced with the original search term 
var Quickr_SearchTerms = { 
_highlightFormat: "<span style="font-size: 1.5em; background-color: #FFE400">{0}</span>", 
main: function() { 
dojo.addOnLoad(function() { 
Quickr_SearchTerms.highliteSearchTerms(); 
71 
}); 
}, 
...
Modifying the default template 
-Highlight search terms in search results 
● Here is the code to make sure we are on search page before we 
attempt to modify the page 
● We'll define the _isSearchPage method 
● If the URL contains h_SearchResults, then we know to run our code 
var Quickr_SearchTerms = { 
... 
_isSearchPage: function() { 
return (window.location.href.indexOf("h_SetEditScene;h_SearchResults") > -1); 
72 
} 
)
Modifying the default template 
-Highlight search terms in search results 
● Click on the Inspect icon in Firebug 
● Start selecting the different sections of the search results to determine 
the class names or ids we can use to apply our changes 
73
Modifying the default template 
-Highlight search terms in search results 
● First, we make sure we're on 
the search page 
● We then use javascript to 
pull the search terms from 
the url, which immediately 
follow the h_SearchString 
in the url 
● Multiple search terms are 
separated by spaces, 
which we will split and 
iterate 
74 
● 
● 
... 
highliteSearchTerms: function() { 
if ( this._isSearchPage() ) { 
var aSplit = window.location.href.split("h_SearchString;"); 
var aTerms = ""; 
if (aSplit.length > 1) aTerms = aSplit[1]; 
if (aTerms.indexOf(",") > -1) aTerms = aTerms.split(",")[0]; 
aTerms = aTerms.split("%20"); 
var aClassNames = [ "h-folderCompact-text", 
"h-folderItem-text", 
"h-folderAbstract-text", 
"richTextContainer" 
]; 
...
Modifying the default template 
-Highlight search terms in search results 
● The class names to work 
with are: 
▬ h-folderCompact-text 
▬ h-folderItem-text 
▬ h-folderAbstract-text 
▬ RichTextContainer 
● Create an array of CSS class 
names through which we 
can iterate 
75 
● 
● 
... 
highliteSearchTerms: function() { 
if ( this._isSearchPage() ) { 
var aSplit = window.location.href.split("h_SearchString;"); 
var aTerms = ""; 
if (aSplit.length > 1) aTerms = aSplit[1]; 
if (aTerms.indexOf(",") > -1) aTerms = aTerms.split(",")[0]; 
aTerms = aTerms.split("%20"); 
var aClassNames = [ "h-folderCompact-text", 
"h-folderItem-text", 
"h-folderAbstract-text", 
"richTextContainer" 
]; 
...
Modifying the default template 
-Highlight search terms in search results 
● We will loop through the 
list of html elements 
that match the 
classNames for 
search results 
● Get the innerHTML of 
the nodes found so 
we can inspect it for 
terms 
● Then loop through the 
search terms 
● Check to see if the 
search term is in the 
html element 
76 
... 
for (var hh = 0; hh < aClassNames.length; hh++) { 
var aList = qp_getElementsByClassName(aClassNames[hh], "*"); 
for (var ii = 0; ii < aList.length; ii++) { 
var bChanged = false; 
var newHTML = aList[ii].innerHTML; 
for (var jj = 0; jj < aTerms.length; jj++) { 
if (newHTML.toLowerCase().indexOf(aTerms[jj].toLowerCase()) > -1) { 
newHTML = newHTML.replace( 
new RegExp(aTerms[jj],"gi"), 
this._highlightFormat.replace(/{0}/gi, aTerms[jj]) 
); 
bChanged = true; 
} 
} 
if (bChanged) aList[ii].innerHTML = newHTML; 
} 
} 
...
Modifying the default template 
-Highlight search terms in search results 
● If we find the terms in 
the node's HTML, 
then need to replace 
that search term 
● We replace the term with 
the _highlightFormat 
html string 
● Make sure to replace the 
{0} in the 
_highlightFormat with 
the term found 
● Finally, since we found 
the term, replace the 
innerHTML 
77 
... 
for (var hh = 0; hh < aClassNames.length; hh++) { 
var aList = qp_getElementsByClassName(aClassNames[hh], "*"); 
for (var ii = 0; ii < aList.length; ii++) { 
var bChanged = false; 
var newHTML = aList[ii].innerHTML; 
for (var jj = 0; jj < aTerms.length; jj++) { 
if (newHTML.toLowerCase().indexOf(aTerms[jj].toLowerCase()) > -1) { 
newHTML = newHTML.replace( 
new RegExp(aTerms[jj],"gi"), 
this._highlightFormat.replace(/{0}/gi, aTerms[jj]) 
); 
bChanged = true; 
} 
} 
if (bChanged) aList[ii].innerHTML = newHTML; 
} 
} 
...
Modifying the default template 
-Highlight search terms in search results 
● Next we need to load the newly created JS file that will highlight the 
search terms 
● In the Quickr81_ext.js file, we can call the loadSupplementalScript 
method in the QuickrGeneralUtils object to load our new functionality 
78 
● 
▬ 
//simple modification showing how to change the look/feel of the "What's New" page 
QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_whatsnew.js"); 
//let's override the logo with our own 
QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_newlogo.js"); 
//let's update the search results UI to highlight the search terms 
QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_searchterms.js");
Modifying the default template 
-Highlight search terms in search results 
● Here's the search results with the highlighted search terms 
79
Modifying the default template 
● Here's what we'll modify in the 
default theme: 
▬ Highlight the “What's New” section 
▬ Change the default logo 
▬ Highlight search terms in search 
80 
results 
▬ Add items to the document context 
menu 
▬ Add thumbnails to pictures in a 
view 
▬ Add a slideshow of images to the 
view from the thumbnails using 
a Dojo 1.3.2 widget 
●
Modifying the default template 
-Add items to the document context menu 
● Issue we are addressing: 
▬ When clicking on the context menu for a document in a view, I would like to add a link 
81 
to the product homepage, a link to search an outside site, and a link to search the 
current place 
● What we need to do to implement: 
▬ Create a new javascript file for the new code 
▬ Code to override the default context menu writer 
▬ Code to determine if the menu being rendered is for a document or something else 
▬ Code to append one static and two dynamic links to the document's context menu 
▬ Load the new javascript file into the existing javascript extension file 
●
Modifying the default template 
-Add items to the document context menu 
● Create a new file called “Quickr81_ext_contextmenu.js” and put it in the 
scripts directory 
● This file will contain all the changes necessary for this customization 
and will be loaded in the Quickr81_ext.js 
82
Modifying the default template 
-Add items to the document context menu 
● This is how the context menu looks originally. We want to add a few 
more items to this list for our own purposes: 
83
Modifying the default template 
-Add items to the document context menu 
● Create a new object called Quickr_ContextMenuUtil. This object will 
encapsulate all of our functions 
● In the main method of our object, we call dojo.addOnLoad to run our 
code once the page is fully loaded 
● The function to write the menu is called QP_ContextMenu_write 
var Quickr_ContextMenuUtil = { 
main: function() { 
dojo.addOnLoad(function(){ 
84 
window.QP_ContextMenu_write_contextmenu = window.QP_ContextMenu_write; 
window.QP_ContextMenu_write = function() { 
var menu = this; 
...
Modifying the default template 
-Add items to the document context menu 
● We will be overriding the QP_ContextMenu_write function with our own 
and call the original one as necessary 
● When this function is run, it runs within the context of the menu item itself 
var Quickr_ContextMenuUtil = { 
main: function() { 
dojo.addOnLoad(function(){ 
85 
window.QP_ContextMenu_write_contextmenu = window.QP_ContextMenu_write; 
window.QP_ContextMenu_write = function() { 
var menu = this; 
...
Modifying the default template 
-Add items to the document context menu 
● There will be several strings that we'll need during the process of adding 
these menu items 
● These strings will be broken out into a resources object 
● We're adding 3 links to this customization, so we need 3 resources 
● The {0} in the strings will be replaced with the document title 
var Quickr_ContextMenuUtil = { 
... 
86 
resources: { 
QUICKR_HOMEPAGE: "Lotus Quickr homepage", 
SEARCH_IBM: "Search IBM for: {0}", 
SEARCH_THISPLACE: "Search this place for: {0}" 
} 
} 
Quickr_ContextMenuUtil.main();
Modifying the default template 
-Add items to the document context menu 
● First, let's determine if this is a menu we want to modify. If the name of 
the menu is a 32 character hexadecimal, we can proceed 
● Otherwise, we'll call the original javascript function 
... 
window.QP_ContextMenu_write = function() { 
var menu = this; 
if (menu.name.search(/^[A-F0-9]{32}/i) >=0 && menu.name.length == 32) { 
87 
... 
} else { 
window.QP_ContextMenu_write_contextmenu.apply(menu, arguments); 
} 
...
Modifying the default template 
-Add items to the document context menu 
● We wish to add a static link to the menu 
▬ First, we'll add a menu separator using the addSeparator 
88 
method 
▬ Next, we need to call the addItem method with the following 
parameters: 
▬ The link text 
▬ The site url 
▬ The target. For the current window, use _self. For a 
new window, use _blank 
... 
if (menu.name.search(/^[A-F0-9]{32}/i) >=0 && menu.name.length == 32) { 
menu.addSeparator(); 
menu.addItem( 
Quickr_ContextMenuUtil.resources.QUICKR_HOMEPAGE, 
"http://www-01.ibm.com/software/lotus/products/quickr/", 
"_blank" 
); 
...
Modifying the default template 
-Add items to the document context menu 
● Next, we want to add another more dynamic menu item. We want to 
get the name of the document and pass it in as a term to search the 
public IBM site 
● Since we only have the doc unid at this point, we will make an ajax 
request to get the document data and pull the name 
● We will use dojo.io.bind to make the ajax request 
● To get an xml representation of the fields on the document, we can 
build a url to the document then append &Form=h_DocXml to it 
... 
dojo.io.bind ({ 
url: "../../h_Index/" + menu.name + "/?OpenDocument&Form=h_DocXml&nowebcaching", 
method: "get", 
sync: true, 
mimetype: ( ( h_ClientBrowser.isIE() ) ? "text/plain" : "text/xml" ), 
load: function (type, data, evt) { 
QuickrXMLUtil.massageXmlStringForData(data); 
89 
...
Modifying the default template 
-Add items to the document context menu 
● The data variable in the callback from the load method contains a 
reference to the returned information 
● The massageXmlStringForData function ensures the data is xml 
● We then use the Lotus Quickr function getTagValue to pull out the 
name and then call the decodeEntities function to make sure the 
html entities are properly decoded 
... 
dojo.io.bind ({ 
url: "../../h_Index/" + menu.name + "/?OpenDocument&Form=h_DocXml&nowebcaching", 
method: "get", 
sync: true, 
mimetype: ( ( h_ClientBrowser.isIE() ) ? "text/plain" : "text/xml" ), 
load: function (type, data, evt) { 
90 
QuickrXMLUtil.massageXmlStringForData(data); 
var sName = QuickrGeneralUtil.decodeEntities( 
window.getTagValue(data, "qp_doc", "h_Name") 
); 
...
Modifying the default template 
-Add items to the document context menu 
● We now need to call the addItem method for our two dynamic links: 
▬ One link to the IBM public site 
▬ One link to search the current place 
● We will replace the {0} in the link text with the name of the document 
91 
... 
var sName = QuickrGeneralUtil.decodeEntities( 
window.getTagValue(data, "qp_doc", "h_Name") 
); 
menu.addItem( 
Quickr_ContextMenuUtil.resources.SEARCH_IBM.replace("{0}", sName), 
"http://www.ibm.com/Search/?q=" + sName, 
"_blank" 
); 
menu.addItem( 
Quickr_ContextMenuUtil.resources.SEARCH_THISPLACE.replace("{0}", sName), 
"javascript: void Quickr_ContextMenuUtil.searchThisPlace("" + 
sName.replace(/"/g,""") + 
"");", 
"_self" 
); 
...
Modifying the default template 
-Add items to the document context menu 
● For the link to search the current place using the name of the document 
as the search terms, we call the searchThisPlace function 
● This function will find the search box on the page using the id 
searchtext, set the search value and submit the search form 
92 
... 
searchThisPlace: function(sTerms) { 
var elSearch = dojo.byId("searchtext"); 
if (elSearch) { 
elSearch.value = sTerms; 
QuickSearchFormSubmit(); 
} 
}, 
resources: { 
QUICKR_HOMEPAGE: "Lotus Quickr homepage", 
SEARCH_IBM: "Search IBM for: {0}", 
SEARCH_THISPLACE: "Search this place for: {0}" 
} 
} 
Quickr_ContextMenuUtil.main();
Modifying the default template 
-Add items to the document context menu 
● Now that we've added all of the links to the context menu, we can call 
the original function to render the menu object 
93 
... 
menu.addItem( 
Quickr_ContextMenuUtil.resources.SEARCH_IBM.replace("{0}", sName), 
"http://www.ibm.com/Search/?q=" + sName, 
"_blank" 
); 
menu.addItem( 
Quickr_ContextMenuUtil.resources.SEARCH_THISPLACE.replace("{0}", sName), 
"javascript: void Quickr_ContextMenuUtil.searchThisPlace("" + 
sName.replace(/"/g,""") + 
"");", 
"_self" 
); 
window.QP_ContextMenu_write_contextmenu.apply(menu, arguments); 
}, 
...
Modifying the default template 
-Add items to the document context menu 
● Next we need to load the newly created JS file that will add the context 
menu items 
● In the Quickr81_ext.js file, we can call the loadSupplementalScript 
method in the QuickrGeneralUtils object to load our new functionality 
94 
● 
▬ 
//simple modification showing how to change the look/feel of the "What's New" page 
QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_whatsnew.js"); 
//let's override the logo with our own 
QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_newlogo.js"); 
//let's update the search results UI to highlight the search terms 
QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_searchterms.js"); 
//let's append context menu items in the view 
QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_contextmenu.js");
Modifying the default template 
-Add items to the document context menu 
● This is how the context menu looks with our new link. This link search 
the current place in the current window 
95
Modifying the default template 
● Here's what we'll modify in the 
default theme: 
▬ Highlight the “What's New” section 
▬ Change the default logo 
▬ Highlight search terms in search 
96 
results 
▬ Add items to the document context 
menu 
▬ Add thumbnails to pictures in a 
view 
▬ Add a slideshow of images to the 
view from the thumbnails using 
a Dojo 1.3.2 widget 
●
Modifying the default template 
-Add thumbnails to pictures in a view 
● Issue we are addressing: 
▬ When opening a view with attachments, you will see a download icon. If the 
97 
attachment is an image, we want to show a thumbnail of that image in the view 
● What we need to do to implement: 
▬ Create a new javascript file for the new code 
▬ Code to override the javascript function to render the download icon 
▬ Code to render the thumbnail if the attachment is an image. If it isn't an image, call the 
original javascript function to render the download icon 
▬ Load the new javascript file into the existing javascript extension file 
●
Modifying the default template 
-Add thumbnails to pictures in a view 
● Create a new file called “Quickr81_ext_thumbnails.js” and put it in the 
scripts directory 
● This file will contain all the changes necessary for this customization 
and will be loaded in the Quickr81_ext.js 
98
Modifying the default template 
-Add thumbnails to pictures in a view 
● This is how the view looks originally. The download column shows the 
default icon: 
99
Modifying the default template 
-Add thumbnails to pictures in a view 
● Create a new object called Quickr_ThumbnailUtil. This object will 
encapsulate all of our functions 
● The size of the thumbnail is defined in the _defaultHeight property. By 
setting the height of the thumbnail, the browser will automatically 
scale the image width to keep the image in proportion 
var Quickr_ThumbnailUtil = { 
_defaultHeight: 50, 
main: function() { 
100 
... 
} 
} 
Quickr_ThumbnailUtil.main();
Modifying the default template 
-Add thumbnails to pictures in a view 
● In the main method of our 
object, we call 
dojo.addOnLoad to run 
our code once the page 
is fully loaded 
● We want to override the 
Lotus Quickr function that 
generates the download 
icon. It is called 
GenerateAttachmentAnc 
hor 
● Before we override the 
function, we reassign the 
original function to 
another name so that it 
can be called 
101 
... 
dojo.addOnLoad(function(){ 
window.GenerateAnchor_thumbnail = window.GenerateAttachmentsAnchor; 
window.GenerateAttachmentsAnchor = function () { 
var sUnid = arguments[0]; 
var sName = arguments[1]; 
if (FM.view.getView() == FM.view.VIEW_LIST && 
Quickr_ThumbnailUtil.isImage(sName)) { 
return Quickr_ThumbnailUtil._generateThumbnailLink(sUnid, sName); 
} else { 
return window.GenerateAnchor_thumbnail.apply(null, arguments); 
} 
} 
}); 
...
Modifying the default template 
-Add thumbnails to pictures in a view 
● The document unid and 
attachment name of the 
document are passed as 
the first two arguments 
● We need to check to make 
sure that we are in a list 
type view 
● We also need to check that 
the attachment name is a 
supported image type 
● If we pass these checks, go 
ahead and call our 
function to generate the 
thumbnail 
102 
... 
dojo.addOnLoad(function(){ 
window.GenerateAnchor_thumbnail = window.GenerateAttachmentsAnchor; 
window.GenerateAttachmentsAnchor = function () { 
var sUnid = arguments[0]; 
var sName = arguments[1]; 
if (FM.view.getView() == FM.view.VIEW_LIST && 
Quickr_ThumbnailUtil.isImage(sName)) { 
return Quickr_ThumbnailUtil._generateThumbnailLink(sUnid, sName); 
} else { 
return window.GenerateAnchor_thumbnail.apply(null, arguments); 
} 
} 
}); 
...
Modifying the default template 
-Add thumbnails to pictures in a view 
● If we pass these checks, go 
ahead and call our 
function to generate the 
thumbnail 
● If we don't pass these 
checks, call the original 
function so that the UI will 
render as normal. 
103 
... 
dojo.addOnLoad(function(){ 
window.GenerateAnchor_thumbnail = window.GenerateAttachmentsAnchor; 
window.GenerateAttachmentsAnchor = function () { 
var sUnid = arguments[0]; 
var sName = arguments[1]; 
if (FM.view.getView() == FM.view.VIEW_LIST && 
Quickr_ThumbnailUtil.isImage(sName)) { 
return Quickr_ThumbnailUtil._generateThumbnailLink(sUnid, sName); 
} else { 
return window.GenerateAnchor_thumbnail.apply(null, arguments); 
} 
} 
}); 
...
Modifying the default template 
-Add thumbnails to pictures in a view 
● The isImage function to determine if this attachment is an image 
● We need to inspect the sName variable to make sure there is no “/” 
in it, which is the indicator that there are multiple files attached 
... 
isImage: function(sName) { 
var bReturn = false; 
if (sName.indexOf("/") == -1) { 
var aImageTypeList = ["jpg","gif","jpeg","png"]; 
for (var ii = 0; ii < aImageTypeList.length; ii++) { 
if (sName.toLowerCase().indexOf("." + aImageTypeList[ii]) == sName.length - 4) { 
104 
bReturn = true; 
break; 
} 
} 
} 
return bReturn; 
}, 
...
Modifying the default template 
-Add thumbnails to pictures in a view 
● The aImageTypeList variable is the array of image extensions 
supported 
● We will loop through this list to see if sName ends with one of them 
... 
isImage: function(sName) { 
var bReturn = false; 
if (sName.indexOf("/") == -1) { 
var aImageTypeList = ["jpg","gif","jpeg","png"]; 
for (var ii = 0; ii < aImageTypeList.length; ii++) { 
if (sName.toLowerCase().indexOf("." + aImageTypeList[ii]) == sName.length - 4) { 
105 
bReturn = true; 
break; 
} 
} 
} 
return bReturn; 
}, 
...
Modifying the default template 
-Add thumbnails to pictures in a view 
● The _generateThumbnailLink function generates the html for the 
thumbnail 
● generateAttachmentLinkHref is the Lotus Quickr function to get the 
link to download the attachment 
106 
● 
● 
... 
_generateThumbnailLink: function (sUnid, sName) { 
var linkurl = window.generateAttachmentLinkHref(sUnid, sName); 
var sTarget = ((linkurl.indexOf("javascript:") == -1) ? "_blank" : "_self"); 
return "<a href="" + linkurl + "" target="" + sTarget + "">" + 
"<img style="margin-bottom: 5px" title="" + sName + 
"" alt="" + sName + "" src="" + 
QuickrGeneralUtil.getBaseUrl() + "/$defaultview/" + sUnid + 
"/$file/" + encodeURIComponent(sName) + 
"" height="" + Quickr_ThumbnailUtil._defaultHeight + ""/>" + 
"</a>"; 
} 
...
Modifying the default template 
-Add thumbnails to pictures in a view 
● We set the target of the link to be _self when we want the link to 
open in the current window 
● We set it to _blank to open in a new window 
● 
107 
● 
● 
... 
_generateThumbnailLink: function (sUnid, sName) { 
var linkurl = window.generateAttachmentLinkHref(sUnid, sName); 
var sTarget = ((linkurl.indexOf("javascript:") == -1) ? "_blank" : "_self"); 
return "<a href="" + linkurl + "" target="" + sTarget + "">" + 
"<img style="margin-bottom: 5px" title="" + sName + 
"" alt="" + sName + "" src="" + 
QuickrGeneralUtil.getBaseUrl() + "/$defaultview/" + sUnid + 
"/$file/" + encodeURIComponent(sName) + 
"" height="" + Quickr_ThumbnailUtil._defaultHeight + ""/>" + 
"</a>"; 
} 
...
Modifying the default template 
-Add thumbnails to pictures in a view 
● We will now build the html string to return a reference to the 
thumbnail 
● We will set the link url and link target to our new link using the 
previously computed variables. 
... 
_generateThumbnailLink: function (sUnid, sName) { 
var linkurl = window.generateAttachmentLinkHref(sUnid, sName); 
var sTarget = ((linkurl.indexOf("javascript:") == -1) ? "_blank" : "_self"); 
return "<a href="" + linkurl + "" target="" + sTarget + "">" + 
108 
"<img style="margin-bottom: 5px" title="" + sName + 
"" alt="" + sName + "" src="" + 
QuickrGeneralUtil.getBaseUrl() + "/$defaultview/" + sUnid + 
"/$file/" + encodeURIComponent(sName) + 
"" height="" + Quickr_ThumbnailUtil._defaultHeight + ""/>" + 
"</a>"; 
} 
...
Modifying the default template 
-Add thumbnails to pictures in a view 
● QuickrGeneralUtil.getBaseUrl() is the Lotus Quickr function to get a 
reference to the current place 
● EncodeURIComponent will encode the attachment name so it is 
suitable for use in a url 
... 
_generateThumbnailLink: function (sUnid, sName) { 
var linkurl = window.generateAttachmentLinkHref(sUnid, sName); 
var sTarget = ((linkurl.indexOf("javascript:") == -1) ? "_blank" : "_self"); 
return "<a href="" + linkurl + "" target="" + sTarget + "">" + 
109 
"<img style="margin-bottom: 5px" title="" + sName + 
"" alt="" + sName + "" src="" + 
QuickrGeneralUtil.getBaseUrl() + "/$defaultview/" + sUnid + 
"/$file/" + encodeURIComponent(sName) + 
"" height="" + Quickr_ThumbnailUtil._defaultHeight + ""/>" + 
"</a>"; 
} 
...
Modifying the default template 
-Add thumbnails to pictures in a view 
● This is where we use the _defaultHeight property. We set the height 
property of the image tag so it will show smaller on the screen 
... 
_generateThumbnailLink: function (sUnid, sName) { 
var linkurl = window.generateAttachmentLinkHref(sUnid, sName); 
var sTarget = ((linkurl.indexOf("javascript:") == -1) ? "_blank" : "_self"); 
return "<a href="" + linkurl + "" target="" + sTarget + "">" + 
110 
"<img style="margin-bottom: 5px" title="" + sName + 
"" alt="" + sName + "" src="" + 
QuickrGeneralUtil.getBaseUrl() + "/$defaultview/" + sUnid + 
"/$file/" + encodeURIComponent(sName) + 
"" height="" + Quickr_ThumbnailUtil._defaultHeight + ""/>" + 
"</a>"; 
} 
...
Modifying the default template 
-Add thumbnails to pictures in a view 
● Next we need to load the newly created JS file that will render the 
thumbnails 
● In the Quickr81_ext.js file, we can call the loadSupplementalScript 
method in the QuickrGeneralUtils object to load our new functionality 
111 
● 
▬ 
//simple modification showing how to change the look/feel of the "What's New" page 
QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_whatsnew.js"); 
//let's override the logo with our own 
QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_newlogo.js"); 
//let's update the search results UI to highlight the search terms 
QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_searchterms.js"); 
//let's append context menu items in the view 
QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_contextmenu.js"); 
//let's show thumbnails 
QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_thumbnails.js");
Modifying the default template 
-Add thumbnails to pictures in a view 
● Here's the view with the thumbnails instead of the download icon 
112
Modifying the default template 
● Here's what we'll modify in the 
default theme: 
▬ Highlight the “What's New” section 
▬ Change the default logo 
▬ Highlight search terms in search 
results 
▬ Add items to the document context 
menu 
▬ Add thumbnails to pictures in a 
view 
▬ Add a slideshow of images to the 
view from the thumbnails using 
a Dojo 1.3.2 widget 
113 
●
Modifying the default template 
-Add a slideshow of images to the view from the thumbnails 
● Issue we are addressing: 
▬ We've already added thumbnails of images to a view, but I want to show the images in 
the view in a Lightbox slideshow instead of downloading them 
● What we need to do to implement: 
▬ Create a new javascript file for the new code 
▬ Load newer version of Dojo along side the version used by core Lotus Quickr 
▬ Code to override the default Lotus Quickr link generator code 
▬ Code to determine if the link is to a thumbnail and add the image to our slideshow 
▬ Code to change the link to open the slideshow instead of opening the image 
▬ Load the new javascript file into the existing javascript extension file 
114 
●
Modifying the default template 
-Add a slideshow of images to the view from the thumbnails 
● This is what happens currently when you click on the download link 
● We want it to show in a Dojo1.3.2 slideshow lightbox instead 
115
Modifying the default template 
-Add a slideshow of images to the view from the thumbnails 
● Developers frequently request if they can use a newer version of Dojo 
instead of the one used by core Lotus Quickr 
● Unfortunately, Dojo 0.4.3 is still required to load for core Lotus Quickr 
functionality 
● However, if you wish to leverage some functionality in a newer version of 
Dojo, it is possible to load it concurrently with the existing version of 
Dojo 
● Domino 8.5.1 ships with Dojo1.3.2 already installed. We can load that 
along side the older Dojo 0.4.3 to get the functionality we need 
● *NOTE: You can only load multiple concurrent Dojo frameworks if at 
least one of them is Dojo 1.1 or later 
116 
●
Modifying the default template 
-Add a slideshow of images to the view from the thumbnails 
● Create a new file called “Quickr81_ext_slideshow.js” and put it in the 
scripts directory 
● This file will contain all the changes necessary for this customization 
and will be loaded in the Quickr81_ext.js 
117
Modifying the default template 
-Add a slideshow of images to the view from the thumbnails 
● Create a new object called Quickr_SlideshowUtil. This object will 
encapsulate all of our functions 
● Dojo requires a variable names djConfig defined to configure how it 
should be loaded. It was already defined for Dojo 0.4.3 loading 
● We need to save this variable definition into a different variable name in 
case some other code is dependant on it 
var Quickr_SlideshowUtil = { 
main: function() { 
window.djConfig_043 = window.djConfig; 
118 
...
Modifying the default template 
-Add a slideshow of images to the view from the thumbnails 
● In order to load another version of Dojo, we need to redefine the 
djConfig object and change the baseUrl property to point to the 
location of the newer version of dojo 
● Domino 8.5.1 already has Dojo 1.3.2 installed, we'll just use that 
119 
... 
main: function() { 
window.djConfig_043 = window.djConfig; 
window.djConfig = { 
parseOnLoad: true, 
isDebug: true, 
baseUrl: "/domjs/dojo-1.3.2/dojo/", 
scopeMap: [ 
["dojo", "dojo132"], 
["dijit", "dijit132"], 
["dojox", "dojox132"] 
] 
}; 
...
Modifying the default template 
-Add a slideshow of images to the view from the thumbnails 
● We also need to change the scopeMap property to rename the Dojo 
framework objects. This will allow us to differentiate between calling 
the old Dojo framework and the new one 
● For this customization, we'll append on “132” into the respective names 
120 
... 
main: function() { 
window.djConfig_043 = window.djConfig; 
window.djConfig = { 
parseOnLoad: true, 
isDebug: true, 
baseUrl: "/domjs/dojo-1.3.2/dojo/", 
scopeMap: [ 
["dojo", "dojo132"], 
["dijit", "dijit132"], 
["dojox", "dojox132"] 
] 
}; 
...
Modifying the default template 
-Add a slideshow of images to the view from the thumbnails 
● After we have completed redefining the djConfig object, we can load 
the Dojo 1.3.2 framework using the Lotus Quickr 
loadSupplementalScript method 
121 
... 
main: function() { 
window.djConfig_043 = window.djConfig; 
window.djConfig = { 
parseOnLoad: true, 
isDebug: true, 
baseUrl: "/domjs/dojo-1.3.2/dojo/", 
scopeMap: [ 
["dojo", "dojo132"], 
["dijit", "dijit132"], 
["dojox", "dojox132"] 
] 
}; 
Lotus QuickrGeneralUtil.loadSupplementalScript(window.djConfig.baseUrl + "/dojo.js"); 
...
Modifying the default template 
-Add a slideshow of images to the view from the thumbnails 
● This new extension is used with the thumbnails extension previously 
shown 
● Again using the Lotus Quickr loadSupplementalScript, make sure this 
extension is loaded before proceeding 
122 
... 
QuickrGeneralUtil.loadSupplementalScript(window.djConfig.baseUrl + "/dojo.js"); 
if (typeof Quickr_ThumbnailUtil == "undefined") { 
QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_thumbnails.js"); 
} 
...
Modifying the default template 
-Add a slideshow of images to the view from the thumbnails 
● Now that we've loaded the concurrent version of Dojo, restore the 
original djConfig variable in case some other code is dependant on it 
● The Dojo1.3.2 Lightbox widget requires additional styles be loaded. 
We need to create the link element and point it to the Lightbox css 
file 
123 
... 
if (typeof Quickr_ThumbnailUtil == "undefined") { 
QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_thumbnails.js"); 
} 
dojo.addOnLoad(function(){ 
window.djConfig = window.djConfig_043; 
var skinCss = document.createElement("link"); 
skinCss.rel = ("stylesheet"); 
skinCss.type = ("text/css"); 
skinCss.href = ("/domjs/dojo-1.3.2/dojox/image/resources/Lightbox.css"); 
document.getElementsByTagName("head")[0].appendChild(skinCss); 
...
Modifying the default template 
-Add a slideshow of images to the view from the thumbnails 
● The Lightbox widget also requires that the <body> tag have a 
className of tundra. So we'll find the <body> tag and append it 
● We also want to do a bit of our own styling of the Lightbox, so we'll 
create a style element and set the border to be gray 
124 
... 
document.getElementsByTagName("head")[0].appendChild(skinCss); 
document.getElementsByTagName("body")[0].className += " tundra"; 
var skinStyle = document.createElement("style"); 
skinStyle.type = ("text/css"); 
skinStyle.innerHTML = "#" + Quickr_SlideshowUtil._dijitName + " { border-color: #DDDDDD }"; 
document.getElementsByTagName("head")[0].appendChild(skinStyle); 
...
Modifying the default template 
-Add a slideshow of images to the view from the thumbnails 
● In order to use the Lightbox widget, we need Dojo to load it 
● Dojo has a require method, which loads the appropriate Dojo javascript 
125 
files 
● However, we cannot use the standard dojo.require since that would use 
the Dojo 0.4.3 framework. We need to call dojo132.require from the 
dojo132 object we defined so that it gets loaded with the correct 
framework 
... 
document.getElementsByTagName("body")[0].className += " tundra"; 
var skinStyle = document.createElement("style"); 
skinStyle.type = ("text/css"); 
skinStyle.innerHTML = "#" + Quickr_SlideshowUtil._dijitName + " { border-color: #DDDDDD }"; 
document.getElementsByTagName("head")[0].appendChild(skinStyle); 
dojo132.require("dojox.image.Lightbox"); 
...
Modifying the default template 
-Add a slideshow of images to the view from the thumbnails 
● The Lotus Quickr function to get the link href is called 
generateAttachmentLinkHref 
● We will be overriding this function with our own and call the original one 
as necessary 
126 
... 
dojo132.require("dojox.image.Lightbox"); 
window.generateAttachmentLinkHref_lightbox = window.generateAttachmentLinkHref; 
window.generateAttachmentLinkHref = function(sUnid, sName) { 
...
Modifying the default template 
-Add a slideshow of images to the view from the thumbnails 
● In our function, we will use the Quickr_ThumbnailUtil extension to see if 
this link is to an image file 
● If it is an image, we can start adding the image to the slideshow 
● 
127 
... 
window.generateAttachmentLinkHref = function(sUnid, sName) { 
if (Quickr_ThumbnailUtil.isImage(sName)) { 
var dialog = dijit132.byId(Quickr_SlideshowUtil._dijitName); 
if (typeof dialog == "undefined") { 
dialog = new dojox132.image.LightboxDialog( 
{ 
id: Quickr_SlideshowUtil._dijitName 
} 
); 
dialog.startup(); 
} 
...
Modifying the default template 
-Add a slideshow of images to the view from the thumbnails 
● If there is no Lightbox dialog widget defined yet, we will define it here 
● Notice how we are using dijit132 and dojox132 in this code to make sure 
we are calling the new framework 
128 
... 
window.generateAttachmentLinkHref = function(sUnid, sName) { 
if (Quickr_ThumbnailUtil.isImage(sName)) { 
var dialog = dijit132.byId(Quickr_SlideshowUtil._dijitName); 
if (typeof dialog == "undefined") { 
dialog = new dojox132.image.LightboxDialog( 
{ 
id: Quickr_SlideshowUtil._dijitName 
} 
); 
dialog.startup(); 
} 
...
Modifying the default template 
-Add a slideshow of images to the view from the thumbnails 
● Now that the dialog widget is instantiated, we call the startup method to 
129 
load it 
● Next, we'll manually build a reference to the image attachment, which will 
be used when we reassign the link of the thumbnail in the view 
● 
... 
var dialog = dijit132.byId(Quickr_SlideshowUtil._dijitName); 
if (typeof dialog == "undefined") { 
dialog = new dojox132.image.LightboxDialog( 
{ 
id: Quickr_SlideshowUtil._dijitName 
} 
); 
dialog.startup(); 
} 
var sImgSrc = QuickrGeneralUtil.getBaseUrl() + 
"/0/" + 
sUnid + 
"/$FILE/" + 
sName + 
"?OpenElement"; 
...
Modifying the default template 
-Add a slideshow of images to the view from the thumbnails 
● Add the image reference to the Lightbox dialog widget. This widget 
requires a title, and also requires a group name be provided 
● We will return a javascript link to a method that will show the Lightbox 
instead of the original link, which just prompted for download 
130 
... 
var sImgSrc = QuickrGeneralUtil.getBaseUrl() + 
"/0/" + 
sUnid + 
"/$FILE/" + 
sName + 
"?OpenElement"; 
dialog.addImage( 
{ 
title: sName, 
href: sImgSrc 
}, 
Quickr_SlideshowUtil._groupName 
); 
return "javascript: void Quickr_SlideshowUtil.showLightbox(" + 
"&quot;" + sImgSrc + "&quot;, " + 
"&quot;" + sName + "&quot;" + 
");"; 
...
Modifying the default template 
-Add a slideshow of images to the view from the thumbnails 
● The showLightbox method will run when the user clicks on a thumbnail 
image in the view. It will find the Lightbox widget and display the 
slideshow of images in the lightbox 
● Notice again how we are using dijit132 instead of dijit to get the Lightbox 
131 
dialog 
... 
showLightbox: function(sImgSrc, sName) { 
var dialog = dijit132.byId(this._dijitName); 
if (dialog && dialog.show) { 
dialog.show( 
{ 
title: sName, 
group: this._groupName, 
href: sImgSrc 
} 
); 
} 
}, 
_groupName: "viewThumbNails", 
_dijitName: "dojox132LightboxDialog" 
} 
Quickr_SlideshowUtil.main();
Modifying the default template 
-Add a slideshow of images to the view from the thumbnails 
● Check to make sure the Lightbox dialog exists and the show method can 
be called 
● If all is well, go ahead and call the show method to open the Lightbox 
dialog to the specified image 
132 
... 
showLightbox: function(sImgSrc, sName) { 
var dialog = dijit132.byId(this._dijitName); 
if (dialog && dialog.show) { 
dialog.show( 
{ 
title: sName, 
group: this._groupName, 
href: sImgSrc 
} 
); 
} 
}, 
_groupName: "viewThumbNails", 
_dijitName: "dojox132LightboxDialog" 
} 
Quickr_SlideshowUtil.main();
Modifying the default template 
-Add a slideshow of images to the view from the thumbnails 
● The _groupName and _dijitName property values are defined separately 
from the methods 
133 
... 
showLightbox: function(sImgSrc, sName) { 
var dialog = dijit132.byId(this._dijitName); 
if (dialog && dialog.show) { 
dialog.show( 
{ 
title: sName, 
group: this._groupName, 
href: sImgSrc 
} 
); 
} 
}, 
_groupName: "viewThumbNails", 
_dijitName: "dojox132LightboxDialog" 
} 
Quickr_SlideshowUtil.main();
Modifying the default template 
-Add a slideshow of images to the view from the thumbnails 
● Next we need to load the newly created JS file that will show the 
slideshow 
● In the Quickr81_ext.js file, we can call the loadSupplementalScript 
method in the QuickrGeneralUtils object to load our new functionality 
//simple modification showing how to change the look/feel of the "What's New" page 
QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_whatsnew.js"); 
//let's override the logo with our own 
QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_newlogo.js"); 
//let's update the search results UI to highlight the search terms 
QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_searchterms.js"); 
//let's append context menu items in the view 
QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_contextmenu.js"); 
//let's show thumbnails 
QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_thumbnails.js"); 
//let's show a dojo 1.3.2 Lightbox slideshow 
QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_slideshow.js"); 
134 
● 
▬
Modifying the default template 
-Add a slideshow of images to the view from the thumbnails 
● When clicking on the image in the view, a slideshow will start 
● There are previous and next buttons at the bottom to go through all of 
the images in the view 
135 
●
136 
Agenda 
● Introduction 
● Creating a custom theme for your group 
● Modifying the default template 
● Using performance servlet on customizations 
● Q & A 
● Related Sessions
Using performance servlet on customizations 
● There were many performance improvements done in Lotus Quickr 8.2 
● One of the biggest performance enhancements was the implementation 
of a servlet to serve the javascript and css files 
● The servlet allows developers to combine multiple files into one request 
● The servlet will remove all comments from the script 
● The servlet will gzip the combined files if the client supports it 
● The servlet caches the results on the server side so that the hit to 
process the request is done only once 
137 
●
Using performance servlet on customizations 
Using servlet with javascript files 
● Using the servlet for your custom script files will reduce the total 
number of requests as well as the total number of bytes downloaded 
● There are 6 new scripts loaded. If you're on a network with 200ms 
latency, it will add more than a full second to the load time 
//simple modification showing how to change the look/feel of the "What's New" page 
QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_whatsnew.js"); 
//let's override the logo with our own 
QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_newlogo.js"); 
//let's update the search results UI to highlight the search terms 
QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_searchterms.js"); 
//let's append context menu items in the view 
QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_contextmenu.js"); 
//let's show thumbnails 
QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_thumbnails.js"); 
//let's show a dojo 1.3.2 Lightbox slideshow 
QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_slideshow.js"); 
138
Using performance servlet on customizations 
Using servlet with javascript files 
● We can combine all of our custom scripts into one call 
● To utilize the servlet for your javascript files: 
▬ Set the type parameter to “combinescripts” 
▬ Set in the key parameter to a semicolon delimited list of the 
script files 
139 
● 
QuickrGeneralUtil.loadSupplementalScript( "/servlet/QuickrSupportUtil?type=combinescripts&key=" + 
"/qphtml/skins/quickr81/scripts/Quickr81_ext_whatsnew.js;" + 
"/qphtml/skins/quickr81/scripts/Quickr81_ext_newlogo.js;" + 
"/qphtml/skins/quickr81/scripts/Quickr81_ext_searchterms.js;" + 
"/qphtml/skins/quickr81/scripts/Quickr81_ext_contextmenu.js;" + 
"/qphtml/skins/quickr81/scripts/Quickr81_ext_thumbnails.js;" + 
"/qphtml/skins/quickr81/scripts/Quickr81_ext_slideshow.js" 
);
Using performance servlet on customizations 
Using servlet with javascript files 
● Here's some info profiling the performance improvements to our 
customizations: 
▬ Number of requests reduced from 6 to 1 
▬ Amount of data downloaded reduced from ~32kb to ~3kb 
140 
●
141 
Agenda 
● Introduction 
● Creating a custom theme for your group 
● Modifying the default template 
● Using performance servlet on customizations 
● Q & A 
● Related Sessions
142 
Agenda 
● Introduction 
● Creating a custom theme for your group 
● Modifying the default template 
● Using performance servlet on customizations 
● Q & A 
● Related Sessions
Related Sessions 
-Lotus Quickr related sessions 
● AD305: Customizing IBM Lotus Quickr Using Templates and APIs (B. 
Rodrick & A. Goelzer) 
● BP210: The Great Code Giveaway 9 - Never Gonna Let you Down (R. 
Novak & V. Krantz) 
● BP211: IBM Lotus Quickr Development Grows Up - Now This Changes 
Things (T. Reimer & V. Krantz) 
● BP113: “Making Quickr Scream” - Performance Strategies for a 
Smokin' Fast Server (J. Mahurin & W. Elsmore) 
143 
●
Related Sessions 
-Other related sessions 
● JMP104: JavaScript, JSON, jQuery and AJAX for IBM Lotus Domino 
Developers (S. Good) 
● AD102: Extreme Makeover – LotusScript and Java Editor Edition (D. 
Taieb & S. Kumar) 
● WEB203: Powering Exceptional Web Experiences Using Industry 
Toolboxes (R. Buisan & S. Liesche) 
144 
●
Lotus knows when the 30 social software sessions are... 
Sunday 
8:00 Lotus Connections: From Pilot to Production Dolphin Southern III(JMP205) 
10:30 Getting the Most Out of Lotus Collaboration and Social Software Dolphin Southern IV-V (WEB102) 
4:00 We've Got Collaboration Under Control: Lotus Quickr in Action Dolphin Southern III (JMP203) 
4:00 Ten Innovative Ways to Customize the Lotus Connections Environment Swan Mockingbird (JMP204) 
Monday 
1:00 12 Things Your Mother Never Told You About Installing Lotus Connections Dolphin Southern III (BP112) 
1:00 Lotus Quickr Development Grows Up: Now This Changes Things Swan 1-2 (BP211) 
2:15 Start Planning Your Migration from Lotus Domino Document Manager Swan 3-4 (BP110) 
2:15 Lotus Quickr Domino 8.x Sneak Preview Swan 7-10 (ID309) 
3:45 Social Collaboration Delivers Real Business Value Dolphin Northern A-E (KEY106) 
5:00 Lotus Domino Quickr Domino 8.x Sneak Preview Dolphin Southern III (ID309) 
5:00 Deployment and Performance Planning for Lotus Connections 2.5 Swan 3-4 (ID301) 
Tuesday 
8:30 Getting the Most Out of Your Lotus Connections Communities Swan 3-4 (ID302) 
10:00 “Making Quickr Scream”: Performance Strategies for... Swan 1-2 (BP113) 
10:00 What's New with Lotus Connections Swan 5-6 (ID305) 
10:00 Collaborative and Web Content Meet ECM Swan Mockingbird (ID306) 
11:15 Customizing Lotus Connections Swan 5-6 (AD301) 
3:00 IBM's Center for Social Software—Enterprise Health & Government Transparency Dolphin Northern A-C (INV102) 
3:00 Deployment and Performance Considerations for Lotus Quickr Domino Services Swan Mockingbird (ID307) 
4:15 Keep it Simple (and Open/Standard) with Lotus Quickr Content Services! Dolphin Northern A-C (AD304) 
Wednesday 
8:30 Collaboration Without Boundaries Dolphin Southern II (INV101) 
8:30 How Lotus Connections Plug-ins Empower Your Applications Dolphin Southern III (AD302) 
8:30 Lotus Quickr Services for J2EE Swan 3-4 (ID308) 
10:00 The Intersection of Collaboration and Enterprise Content Management Swan 1-2 (INV105) 
10:00 Customizing Lotus Quickr using Templates and APIs Swan 3-4 (AD305) 
11:15 Looking for the Right Document Management Alternative Swan Mockingbird (BP304) 
11:15 Connecting Developers and Community with Rational Jazz and Lotus Connections Swan 1-2 (AD303) 
4:15 How Top Companies are Getting “Out of the Box” with Lotus Connections 2.5 Swan 5/6 (BP301) 
4:30 Putting Sparkle in your Social Applications! Customization and Branding.... SW Osprey (SHOW303) 
Thursday 
8:30 Lotus Quickr ECM Integration Dolphin Southern II (ID310) 
10:00 Selling the Value of Web 2.0/Social Software within your Organization Toucan 1 (BP305) 
11:15 Keep it Simple (and Open/Standard) with Lotus Quickr Content Services! Dolphin Southern I (AD304) 
11:15 The Measurement of Social Software Swan 1-2 (ID304)
Legal Disclaimer 
●© IBM Corporation 2009. All Rights Reserved. 
●The information contained in this publication is provided for informational purposes only. While efforts were made to verify the completeness and accuracy 
of the information contained in this publication, it is provided AS IS without warranty of any kind, express or implied. In addition, this information is based on 
IBM’s current product plans and strategy, which are subject to change by IBM without notice. IBM shall not be responsible for any damages arising out of the 
use of, or otherwise related to, this publication or any other materials. Nothing contained in this publication is intended to, nor shall have the effect of, 
creating any warranties or representations from IBM or its suppliers or licensors, or altering the terms and conditions of the applicable license agreement 
governing the use of IBM software. 
●References in this presentation to IBM products, programs, or services do not imply that they will be available in all countries in which IBM operates. 
Product release dates and/or capabilities referenced in this presentation may change at any time at IBM’s sole discretion based on market opportunities or 
other factors, and are not intended to be a commitment to future product or feature availability in any way. Nothing contained in these materials is intended 
to, nor shall have the effect of, stating or implying that any activities undertaken by you will result in any specific sales, revenue growth or other results. 
● 
●Performance is based on measurements and projections using standard IBM benchmarks in a controlled environment. The actual throughput or 
performance that any user will experience will vary depending upon many factors, including considerations such as the amount of multiprogramming in the 
user's job stream, the I/O configuration, the storage configuration, and the workload processed. Therefore, no assurance can be given that an individual user 
will achieve results similar to those stated here. 
● 
●IBM, the IBM logo, Lotus, Lotus Notes, Notes, Domino, Quickr, and Lotusphere are trademarks of International Business Machines Corporation in the United 
States, other countries, or both. 
● 
●Microsoft and Windows are trademarks of Microsoft Corporation in the United States, other countries, or both. 
● 
146 
●

More Related Content

What's hot

Anex.......
Anex.......Anex.......
Anex.......
Carlos Catanejo
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 3/3 - Web components avec ...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 3/3 - Web components avec ...ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 3/3 - Web components avec ...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 3/3 - Web components avec ...
Horacio Gonzalez
 
How Browsers Work
How Browsers Work How Browsers Work
How Browsers Work
myposter GmbH
 
Drupal website in 45 mins
Drupal website in 45 minsDrupal website in 45 mins
Drupal website in 45 mins
Rachit Gupta
 
OpenCms Days 2013 - Details of the OpenCms 9 detail pages
OpenCms Days 2013 - Details of the OpenCms 9 detail pagesOpenCms Days 2013 - Details of the OpenCms 9 detail pages
OpenCms Days 2013 - Details of the OpenCms 9 detail pages
Alkacon Software GmbH & Co. KG
 
ENIB 2015-2016 - CAI Web - S01E01- La forge JavaScript
ENIB 2015-2016 - CAI Web - S01E01- La forge JavaScriptENIB 2015-2016 - CAI Web - S01E01- La forge JavaScript
ENIB 2015-2016 - CAI Web - S01E01- La forge JavaScript
Horacio Gonzalez
 
Responsive Layout Frameworks for XPages Application UI
Responsive Layout Frameworks for XPages Application UIResponsive Layout Frameworks for XPages Application UI
Responsive Layout Frameworks for XPages Application UI
Chris Toohey
 
Drupal theming - a practical approach (European Drupal Days 2015)
Drupal theming - a practical approach (European Drupal Days 2015)Drupal theming - a practical approach (European Drupal Days 2015)
Drupal theming - a practical approach (European Drupal Days 2015)
Eugenio Minardi
 
The Time for Vanilla Web Components has Arrived
The Time for Vanilla Web Components has ArrivedThe Time for Vanilla Web Components has Arrived
The Time for Vanilla Web Components has Arrived
Gil Fink
 
jQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPagesjQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPages
Mark Roden
 
A look at Drupal 7 Theming
A look at Drupal 7 ThemingA look at Drupal 7 Theming
A look at Drupal 7 Theming
Aimee Maree Forsstrom
 
How Browser Works?
How Browser Works?How Browser Works?
How Browser Works?
Vova Voyevidka
 
Component-Oriented Web Development with Dart
Component-Oriented Web Development with DartComponent-Oriented Web Development with Dart
Component-Oriented Web Development with Dart
C4Media
 
Web component driven development
Web component driven developmentWeb component driven development
Web component driven development
Gil Fink
 
Developing new feature in Joomla - Joomladay UK 2016
Developing new feature in Joomla - Joomladay UK 2016Developing new feature in Joomla - Joomladay UK 2016
Developing new feature in Joomla - Joomladay UK 2016
Peter Martin
 
Theming moodle technical
Theming moodle   technicalTheming moodle   technical
Theming moodle technical
Alex Walker
 
Extending CMS Made Simple
Extending CMS Made SimpleExtending CMS Made Simple
Extending CMS Made Simple
cmsmssjg
 
Introduction to Gutenberg- Imran Sayed
Introduction to Gutenberg- Imran SayedIntroduction to Gutenberg- Imran Sayed
Introduction to Gutenberg- Imran Sayed
Imran Sayed
 
Introduction to Browser Internals
Introduction to Browser InternalsIntroduction to Browser Internals
Introduction to Browser Internals
Siva Arunachalam
 
How browser work
How browser workHow browser work
How browser work
Manish Trivedi
 

What's hot (20)

Anex.......
Anex.......Anex.......
Anex.......
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 3/3 - Web components avec ...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 3/3 - Web components avec ...ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 3/3 - Web components avec ...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 3/3 - Web components avec ...
 
How Browsers Work
How Browsers Work How Browsers Work
How Browsers Work
 
Drupal website in 45 mins
Drupal website in 45 minsDrupal website in 45 mins
Drupal website in 45 mins
 
OpenCms Days 2013 - Details of the OpenCms 9 detail pages
OpenCms Days 2013 - Details of the OpenCms 9 detail pagesOpenCms Days 2013 - Details of the OpenCms 9 detail pages
OpenCms Days 2013 - Details of the OpenCms 9 detail pages
 
ENIB 2015-2016 - CAI Web - S01E01- La forge JavaScript
ENIB 2015-2016 - CAI Web - S01E01- La forge JavaScriptENIB 2015-2016 - CAI Web - S01E01- La forge JavaScript
ENIB 2015-2016 - CAI Web - S01E01- La forge JavaScript
 
Responsive Layout Frameworks for XPages Application UI
Responsive Layout Frameworks for XPages Application UIResponsive Layout Frameworks for XPages Application UI
Responsive Layout Frameworks for XPages Application UI
 
Drupal theming - a practical approach (European Drupal Days 2015)
Drupal theming - a practical approach (European Drupal Days 2015)Drupal theming - a practical approach (European Drupal Days 2015)
Drupal theming - a practical approach (European Drupal Days 2015)
 
The Time for Vanilla Web Components has Arrived
The Time for Vanilla Web Components has ArrivedThe Time for Vanilla Web Components has Arrived
The Time for Vanilla Web Components has Arrived
 
jQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPagesjQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPages
 
A look at Drupal 7 Theming
A look at Drupal 7 ThemingA look at Drupal 7 Theming
A look at Drupal 7 Theming
 
How Browser Works?
How Browser Works?How Browser Works?
How Browser Works?
 
Component-Oriented Web Development with Dart
Component-Oriented Web Development with DartComponent-Oriented Web Development with Dart
Component-Oriented Web Development with Dart
 
Web component driven development
Web component driven developmentWeb component driven development
Web component driven development
 
Developing new feature in Joomla - Joomladay UK 2016
Developing new feature in Joomla - Joomladay UK 2016Developing new feature in Joomla - Joomladay UK 2016
Developing new feature in Joomla - Joomladay UK 2016
 
Theming moodle technical
Theming moodle   technicalTheming moodle   technical
Theming moodle technical
 
Extending CMS Made Simple
Extending CMS Made SimpleExtending CMS Made Simple
Extending CMS Made Simple
 
Introduction to Gutenberg- Imran Sayed
Introduction to Gutenberg- Imran SayedIntroduction to Gutenberg- Imran Sayed
Introduction to Gutenberg- Imran Sayed
 
Introduction to Browser Internals
Introduction to Browser InternalsIntroduction to Browser Internals
Introduction to Browser Internals
 
How browser work
How browser workHow browser work
How browser work
 

Similar to SHOW202: How to customize Lotus Quickr Templates Using HTML, Javascript and CSS - Lotusphere 2010

Developing Custom WordPress Themes for Clients
Developing Custom WordPress Themes for ClientsDeveloping Custom WordPress Themes for Clients
Developing Custom WordPress Themes for Clients
Steven Slack
 
Design to Theme @ CMSExpo
Design to Theme @ CMSExpoDesign to Theme @ CMSExpo
Design to Theme @ CMSExpo
Emma Jane Hogbin Westby
 
Jbake workshop (Greach 2019)
Jbake workshop (Greach 2019)Jbake workshop (Greach 2019)
Jbake workshop (Greach 2019)
Mario García
 
Face off apex template and themes - 3.0 - k-scope11
Face off   apex template and themes - 3.0 - k-scope11Face off   apex template and themes - 3.0 - k-scope11
Face off apex template and themes - 3.0 - k-scope11
Christian Rokitta
 
WordPress 101 Saturday Session
WordPress 101 Saturday SessionWordPress 101 Saturday Session
WordPress 101 Saturday Session
pamselle
 
Intro to Theming Drupal, FOSSLC Summer Camp 2010
Intro to Theming Drupal, FOSSLC Summer Camp 2010Intro to Theming Drupal, FOSSLC Summer Camp 2010
Intro to Theming Drupal, FOSSLC Summer Camp 2010
Emma Jane Hogbin Westby
 
Performance (browser)
Performance (browser)Performance (browser)
Performance (browser)
aquarius070287
 
Rapid WordPress Theme Development
Rapid WordPress Theme DevelopmentRapid WordPress Theme Development
Rapid WordPress Theme Development
Josh Williams
 
Introduction to TeacherPress
Introduction to TeacherPressIntroduction to TeacherPress
Introduction to TeacherPress
Nick Purdue
 
Forensic Theming for Drupal
Forensic Theming for DrupalForensic Theming for Drupal
Forensic Theming for Drupal
Emma Jane Hogbin Westby
 
Bootstrap4 x pages
Bootstrap4 x pagesBootstrap4 x pages
Bootstrap4 x pages
Philippe Riand
 
Architektura html, css i javascript - Jan Kraus
Architektura html, css i javascript - Jan KrausArchitektura html, css i javascript - Jan Kraus
Architektura html, css i javascript - Jan Kraus
Women in Technology Poland
 
Magento2 frontend development
Magento2   frontend developmentMagento2   frontend development
Magento2 frontend development
Kapil Dev Singh
 
PyconIE 2016 - Kajiki, the fast and validated template engine your were looki...
PyconIE 2016 - Kajiki, the fast and validated template engine your were looki...PyconIE 2016 - Kajiki, the fast and validated template engine your were looki...
PyconIE 2016 - Kajiki, the fast and validated template engine your were looki...
Alessandro Molina
 
Creating custom themes in AtoM
Creating custom themes in AtoMCreating custom themes in AtoM
Creating custom themes in AtoM
Artefactual Systems - AtoM
 
Neoito — How modern browsers work
Neoito — How modern browsers workNeoito — How modern browsers work
Neoito — How modern browsers work
Neoito
 
Responsive themeworkshop wcneo2016
Responsive themeworkshop wcneo2016Responsive themeworkshop wcneo2016
Responsive themeworkshop wcneo2016
David Brattoli
 
Joomla! Day UK 2009 Basic Templates
Joomla! Day UK 2009 Basic TemplatesJoomla! Day UK 2009 Basic Templates
Joomla! Day UK 2009 Basic Templates
Andy Wallace
 
Joomla Day UK 2009 Basic Templates
Joomla Day UK 2009 Basic TemplatesJoomla Day UK 2009 Basic Templates
Joomla Day UK 2009 Basic Templates
Chris Davenport
 
Share point 2013 Building Websites
Share point 2013 Building WebsitesShare point 2013 Building Websites
Share point 2013 Building Websites
Suhas R Satish
 

Similar to SHOW202: How to customize Lotus Quickr Templates Using HTML, Javascript and CSS - Lotusphere 2010 (20)

Developing Custom WordPress Themes for Clients
Developing Custom WordPress Themes for ClientsDeveloping Custom WordPress Themes for Clients
Developing Custom WordPress Themes for Clients
 
Design to Theme @ CMSExpo
Design to Theme @ CMSExpoDesign to Theme @ CMSExpo
Design to Theme @ CMSExpo
 
Jbake workshop (Greach 2019)
Jbake workshop (Greach 2019)Jbake workshop (Greach 2019)
Jbake workshop (Greach 2019)
 
Face off apex template and themes - 3.0 - k-scope11
Face off   apex template and themes - 3.0 - k-scope11Face off   apex template and themes - 3.0 - k-scope11
Face off apex template and themes - 3.0 - k-scope11
 
WordPress 101 Saturday Session
WordPress 101 Saturday SessionWordPress 101 Saturday Session
WordPress 101 Saturday Session
 
Intro to Theming Drupal, FOSSLC Summer Camp 2010
Intro to Theming Drupal, FOSSLC Summer Camp 2010Intro to Theming Drupal, FOSSLC Summer Camp 2010
Intro to Theming Drupal, FOSSLC Summer Camp 2010
 
Performance (browser)
Performance (browser)Performance (browser)
Performance (browser)
 
Rapid WordPress Theme Development
Rapid WordPress Theme DevelopmentRapid WordPress Theme Development
Rapid WordPress Theme Development
 
Introduction to TeacherPress
Introduction to TeacherPressIntroduction to TeacherPress
Introduction to TeacherPress
 
Forensic Theming for Drupal
Forensic Theming for DrupalForensic Theming for Drupal
Forensic Theming for Drupal
 
Bootstrap4 x pages
Bootstrap4 x pagesBootstrap4 x pages
Bootstrap4 x pages
 
Architektura html, css i javascript - Jan Kraus
Architektura html, css i javascript - Jan KrausArchitektura html, css i javascript - Jan Kraus
Architektura html, css i javascript - Jan Kraus
 
Magento2 frontend development
Magento2   frontend developmentMagento2   frontend development
Magento2 frontend development
 
PyconIE 2016 - Kajiki, the fast and validated template engine your were looki...
PyconIE 2016 - Kajiki, the fast and validated template engine your were looki...PyconIE 2016 - Kajiki, the fast and validated template engine your were looki...
PyconIE 2016 - Kajiki, the fast and validated template engine your were looki...
 
Creating custom themes in AtoM
Creating custom themes in AtoMCreating custom themes in AtoM
Creating custom themes in AtoM
 
Neoito — How modern browsers work
Neoito — How modern browsers workNeoito — How modern browsers work
Neoito — How modern browsers work
 
Responsive themeworkshop wcneo2016
Responsive themeworkshop wcneo2016Responsive themeworkshop wcneo2016
Responsive themeworkshop wcneo2016
 
Joomla! Day UK 2009 Basic Templates
Joomla! Day UK 2009 Basic TemplatesJoomla! Day UK 2009 Basic Templates
Joomla! Day UK 2009 Basic Templates
 
Joomla Day UK 2009 Basic Templates
Joomla Day UK 2009 Basic TemplatesJoomla Day UK 2009 Basic Templates
Joomla Day UK 2009 Basic Templates
 
Share point 2013 Building Websites
Share point 2013 Building WebsitesShare point 2013 Building Websites
Share point 2013 Building Websites
 

Recently uploaded

SMS API Integration in Saudi Arabia| Best SMS API Service
SMS API Integration in Saudi Arabia| Best SMS API ServiceSMS API Integration in Saudi Arabia| Best SMS API Service
SMS API Integration in Saudi Arabia| Best SMS API Service
Yara Milbes
 
Atelier - Innover avec l’IA Générative et les graphes de connaissances
Atelier - Innover avec l’IA Générative et les graphes de connaissancesAtelier - Innover avec l’IA Générative et les graphes de connaissances
Atelier - Innover avec l’IA Générative et les graphes de connaissances
Neo4j
 
ALGIT - Assembly Line for Green IT - Numbers, Data, Facts
ALGIT - Assembly Line for Green IT - Numbers, Data, FactsALGIT - Assembly Line for Green IT - Numbers, Data, Facts
ALGIT - Assembly Line for Green IT - Numbers, Data, Facts
Green Software Development
 
Using Xen Hypervisor for Functional Safety
Using Xen Hypervisor for Functional SafetyUsing Xen Hypervisor for Functional Safety
Using Xen Hypervisor for Functional Safety
Ayan Halder
 
Need for Speed: Removing speed bumps from your Symfony projects ⚡️
Need for Speed: Removing speed bumps from your Symfony projects ⚡️Need for Speed: Removing speed bumps from your Symfony projects ⚡️
Need for Speed: Removing speed bumps from your Symfony projects ⚡️
Łukasz Chruściel
 
SQL Accounting Software Brochure Malaysia
SQL Accounting Software Brochure MalaysiaSQL Accounting Software Brochure Malaysia
SQL Accounting Software Brochure Malaysia
GohKiangHock
 
Webinar On-Demand: Using Flutter for Embedded
Webinar On-Demand: Using Flutter for EmbeddedWebinar On-Demand: Using Flutter for Embedded
Webinar On-Demand: Using Flutter for Embedded
ICS
 
What is Master Data Management by PiLog Group
What is Master Data Management by PiLog GroupWhat is Master Data Management by PiLog Group
What is Master Data Management by PiLog Group
aymanquadri279
 
8 Best Automated Android App Testing Tool and Framework in 2024.pdf
8 Best Automated Android App Testing Tool and Framework in 2024.pdf8 Best Automated Android App Testing Tool and Framework in 2024.pdf
8 Best Automated Android App Testing Tool and Framework in 2024.pdf
kalichargn70th171
 
UI5con 2024 - Boost Your Development Experience with UI5 Tooling Extensions
UI5con 2024 - Boost Your Development Experience with UI5 Tooling ExtensionsUI5con 2024 - Boost Your Development Experience with UI5 Tooling Extensions
UI5con 2024 - Boost Your Development Experience with UI5 Tooling Extensions
Peter Muessig
 
Using Query Store in Azure PostgreSQL to Understand Query Performance
Using Query Store in Azure PostgreSQL to Understand Query PerformanceUsing Query Store in Azure PostgreSQL to Understand Query Performance
Using Query Store in Azure PostgreSQL to Understand Query Performance
Grant Fritchey
 
LORRAINE ANDREI_LEQUIGAN_HOW TO USE ZOOM
LORRAINE ANDREI_LEQUIGAN_HOW TO USE ZOOMLORRAINE ANDREI_LEQUIGAN_HOW TO USE ZOOM
LORRAINE ANDREI_LEQUIGAN_HOW TO USE ZOOM
lorraineandreiamcidl
 
How Can Hiring A Mobile App Development Company Help Your Business Grow?
How Can Hiring A Mobile App Development Company Help Your Business Grow?How Can Hiring A Mobile App Development Company Help Your Business Grow?
How Can Hiring A Mobile App Development Company Help Your Business Grow?
ToXSL Technologies
 
GreenCode-A-VSCode-Plugin--Dario-Jurisic
GreenCode-A-VSCode-Plugin--Dario-JurisicGreenCode-A-VSCode-Plugin--Dario-Jurisic
GreenCode-A-VSCode-Plugin--Dario-Jurisic
Green Software Development
 
Empowering Growth with Best Software Development Company in Noida - Deuglo
Empowering Growth with Best Software  Development Company in Noida - DeugloEmpowering Growth with Best Software  Development Company in Noida - Deuglo
Empowering Growth with Best Software Development Company in Noida - Deuglo
Deuglo Infosystem Pvt Ltd
 
Graspan: A Big Data System for Big Code Analysis
Graspan: A Big Data System for Big Code AnalysisGraspan: A Big Data System for Big Code Analysis
Graspan: A Big Data System for Big Code Analysis
Aftab Hussain
 
Lecture 2 - software testing SE 412.pptx
Lecture 2 - software testing SE 412.pptxLecture 2 - software testing SE 412.pptx
Lecture 2 - software testing SE 412.pptx
TaghreedAltamimi
 
WWDC 2024 Keynote Review: For CocoaCoders Austin
WWDC 2024 Keynote Review: For CocoaCoders AustinWWDC 2024 Keynote Review: For CocoaCoders Austin
WWDC 2024 Keynote Review: For CocoaCoders Austin
Patrick Weigel
 
E-commerce Development Services- Hornet Dynamics
E-commerce Development Services- Hornet DynamicsE-commerce Development Services- Hornet Dynamics
E-commerce Development Services- Hornet Dynamics
Hornet Dynamics
 
2024 eCommerceDays Toulouse - Sylius 2.0.pdf
2024 eCommerceDays Toulouse - Sylius 2.0.pdf2024 eCommerceDays Toulouse - Sylius 2.0.pdf
2024 eCommerceDays Toulouse - Sylius 2.0.pdf
Łukasz Chruściel
 

Recently uploaded (20)

SMS API Integration in Saudi Arabia| Best SMS API Service
SMS API Integration in Saudi Arabia| Best SMS API ServiceSMS API Integration in Saudi Arabia| Best SMS API Service
SMS API Integration in Saudi Arabia| Best SMS API Service
 
Atelier - Innover avec l’IA Générative et les graphes de connaissances
Atelier - Innover avec l’IA Générative et les graphes de connaissancesAtelier - Innover avec l’IA Générative et les graphes de connaissances
Atelier - Innover avec l’IA Générative et les graphes de connaissances
 
ALGIT - Assembly Line for Green IT - Numbers, Data, Facts
ALGIT - Assembly Line for Green IT - Numbers, Data, FactsALGIT - Assembly Line for Green IT - Numbers, Data, Facts
ALGIT - Assembly Line for Green IT - Numbers, Data, Facts
 
Using Xen Hypervisor for Functional Safety
Using Xen Hypervisor for Functional SafetyUsing Xen Hypervisor for Functional Safety
Using Xen Hypervisor for Functional Safety
 
Need for Speed: Removing speed bumps from your Symfony projects ⚡️
Need for Speed: Removing speed bumps from your Symfony projects ⚡️Need for Speed: Removing speed bumps from your Symfony projects ⚡️
Need for Speed: Removing speed bumps from your Symfony projects ⚡️
 
SQL Accounting Software Brochure Malaysia
SQL Accounting Software Brochure MalaysiaSQL Accounting Software Brochure Malaysia
SQL Accounting Software Brochure Malaysia
 
Webinar On-Demand: Using Flutter for Embedded
Webinar On-Demand: Using Flutter for EmbeddedWebinar On-Demand: Using Flutter for Embedded
Webinar On-Demand: Using Flutter for Embedded
 
What is Master Data Management by PiLog Group
What is Master Data Management by PiLog GroupWhat is Master Data Management by PiLog Group
What is Master Data Management by PiLog Group
 
8 Best Automated Android App Testing Tool and Framework in 2024.pdf
8 Best Automated Android App Testing Tool and Framework in 2024.pdf8 Best Automated Android App Testing Tool and Framework in 2024.pdf
8 Best Automated Android App Testing Tool and Framework in 2024.pdf
 
UI5con 2024 - Boost Your Development Experience with UI5 Tooling Extensions
UI5con 2024 - Boost Your Development Experience with UI5 Tooling ExtensionsUI5con 2024 - Boost Your Development Experience with UI5 Tooling Extensions
UI5con 2024 - Boost Your Development Experience with UI5 Tooling Extensions
 
Using Query Store in Azure PostgreSQL to Understand Query Performance
Using Query Store in Azure PostgreSQL to Understand Query PerformanceUsing Query Store in Azure PostgreSQL to Understand Query Performance
Using Query Store in Azure PostgreSQL to Understand Query Performance
 
LORRAINE ANDREI_LEQUIGAN_HOW TO USE ZOOM
LORRAINE ANDREI_LEQUIGAN_HOW TO USE ZOOMLORRAINE ANDREI_LEQUIGAN_HOW TO USE ZOOM
LORRAINE ANDREI_LEQUIGAN_HOW TO USE ZOOM
 
How Can Hiring A Mobile App Development Company Help Your Business Grow?
How Can Hiring A Mobile App Development Company Help Your Business Grow?How Can Hiring A Mobile App Development Company Help Your Business Grow?
How Can Hiring A Mobile App Development Company Help Your Business Grow?
 
GreenCode-A-VSCode-Plugin--Dario-Jurisic
GreenCode-A-VSCode-Plugin--Dario-JurisicGreenCode-A-VSCode-Plugin--Dario-Jurisic
GreenCode-A-VSCode-Plugin--Dario-Jurisic
 
Empowering Growth with Best Software Development Company in Noida - Deuglo
Empowering Growth with Best Software  Development Company in Noida - DeugloEmpowering Growth with Best Software  Development Company in Noida - Deuglo
Empowering Growth with Best Software Development Company in Noida - Deuglo
 
Graspan: A Big Data System for Big Code Analysis
Graspan: A Big Data System for Big Code AnalysisGraspan: A Big Data System for Big Code Analysis
Graspan: A Big Data System for Big Code Analysis
 
Lecture 2 - software testing SE 412.pptx
Lecture 2 - software testing SE 412.pptxLecture 2 - software testing SE 412.pptx
Lecture 2 - software testing SE 412.pptx
 
WWDC 2024 Keynote Review: For CocoaCoders Austin
WWDC 2024 Keynote Review: For CocoaCoders AustinWWDC 2024 Keynote Review: For CocoaCoders Austin
WWDC 2024 Keynote Review: For CocoaCoders Austin
 
E-commerce Development Services- Hornet Dynamics
E-commerce Development Services- Hornet DynamicsE-commerce Development Services- Hornet Dynamics
E-commerce Development Services- Hornet Dynamics
 
2024 eCommerceDays Toulouse - Sylius 2.0.pdf
2024 eCommerceDays Toulouse - Sylius 2.0.pdf2024 eCommerceDays Toulouse - Sylius 2.0.pdf
2024 eCommerceDays Toulouse - Sylius 2.0.pdf
 

SHOW202: How to customize Lotus Quickr Templates Using HTML, Javascript and CSS - Lotusphere 2010

  • 1. SHOW202: How to customize Lotus Quickr Templates Using HTML, Javascript and CSS Bob Barber | Developer – IBM Lotus Quickr Brian O'Gorman | Developer – IBM Lotus Quickr
  • 2. 2 Agenda ● Introduction ● Creating a custom theme for your group ● Modifying the default template ● Using performance servlet on customizations ● Q & A ● Related Sessions
  • 3. Introduction ● Bob Barber ▬ Working for IBM for 10 years. ▬ Working on Lotus Quickr doing UI 3 development for 3 years. ● ● Brian O'Gorman ▬ Working for IBM for 5 years ▬ Working on Lotus Quickr Domino for 1 year ▬ Worked on Composite Applications before that
  • 4. 4 Agenda ● Introduction ● Creating a custom theme for your group ● Modifying the default template ● Using performance servlet on customizations ● Q & A ● Related Sessions
  • 5. Creating a custom theme for your group ● Using custom themes, you can: ▬ Apply customization's to individual places ▬ Associate customization's to a placetype 5
  • 6. Creating a custom theme for your group Anatomy of a custom theme ● HTML files define various 'scenes' in IBM® Lotus® Quickr® ▬ page.htm – layout of content while being viewed ▬ edit.htm – layout of content while being edited ▬ folderlist.htm – layout of list and discussion folders ▬ headlines.htm – layout of headline folders ▬ slideshow.htm – layout of slideshow folders ● Stylesheet ▬ stylesheet.css – include any styles your customizations 6 need ● ● Thumbnail - Displayed in the Themes gallery for your theme ● Other resources - JavaScript files, images, etc
  • 7. Creating a custom theme for your group Anatomy of a custom theme ● You can include other image & JavaScript files in your theme by referencing them from the htm files or stylesheet <img src="MyScript.js" style="display:none"/> <script type="text/javascript" src="$FILE/MyScript.js"></script> 7 ● ● To include image, just use it in an <img> tag ● To include a JavaScript file use a hidden image: ● ● ● ● To include image in stylesheet, just reference it: ▬ .lotusThingy { background-image: url(ThingyBG.png); }
  • 8. Creating a custom theme for your group Installing a custom theme ● Requires ActiveX, need to use Microsoft® Internet Explorer® ● Access the Custom Themes UI via Customization options in a place 8
  • 9. Creating a custom theme for your group 9 ● ● Lets go create a theme... ● ● Our new theme will address two issues ▬ 1. Make a “LotusKnows” theme ▬ 2. Add some extra functionality via the theme
  • 10. Creating a custom theme for your group Creating a “LotusKnows” theme ● Issue we are addressing: ▬ I'd like my places to have a LotusKnows color scheme ● What we need to do to implement: ▬ Create a custom theme ▬ Override the Logo within the theme ▬ Override various styling in the theme 10 NB: This is not an official LotusKnows theme. This is my non-graphic-designer attempt at making a theme that inherits my interpretations (and extrapolations) of the LotusKnows color styles.
  • 11. Creating a custom theme for your group Getting started with a custom theme ● Get the base theme files from the server ▬ <domino>/data/domino/html/qphtml/skins/quickr81 ● Just take the files we need: ▬ page.htm, headlines.htm, listfolder.htm, 11 page.htm, slideshow.htm, stylesheet.css ▬ We don't need the sub-folders ● We'll use these files as a base, and modify as needed
  • 12. Creating a custom theme for your group Changing the logo for your theme ● In each of the htm files, the logo is referenced: ● <img id="lotusLogo" alt="Lotus Software" src="/qphtml/skins/common/images/logo.gif"/> ● We want to change this to point to our new logo: ● <img id="lotusLogo" alt="Lotus Knows" src="LotusKnows-logo. gif"/> ● Do not specify any path ● Place your logo image in same folder as the theme files ▬ The upload custom theme feature will pick up referenced images 12
  • 13. Creating a custom theme for your group Changing styling within your theme ● The styling for Lotus Quickr is based on the IBM Lotus User Interface ▬ Also known as “OneUI” ● The Lotus User Interface is an initiative to standardize the interface of Lotus products. ● It is used in IBM Lotus Quickr, IBM Lotus® Connections®, and more ● Documentation can be found here: ▬ http://www-12.lotus.com/ldd/doc/oneuidoc/docpublic/index.htm ● It defines the layouts, components, styling, etc. 13
  • 14. Creating a custom theme for your group Changing styling within your theme ● I want to change the “Places” link at the top of the screen ● From the Lotus User Interface documentation, this is the banner. ▬ className = lotusBanner ● And the links in it are lotusLinks 14
  • 15. Creating a custom theme for your group Changing styling within your theme ● You can also use Firebug to see the exact usage in Quickr 1 Identify item to change 2 3 Refine selection in the HTML view 4 5 6 Find the style class 15
  • 16. Creating a custom theme for your group Adding styles to the stylesheet ● Create the appropriate style in stylesheet.css ● Only specify the style properties you want to change ▬ Allow rest to be inherited from Lotus Quickr css files ● I want the background color of the “Places” link to be yellow(-ish) ● #lotusBanner ul.lotusLinks li.lotusSelected a, .lotusBanner ul.lotusLinks li.lotusSelected a { background-color:#a96d00; 16 ● ● ● ● } ● Repeat as necessary for various elements on page
  • 17. Creating a custom theme for your group But it's not all just colors, there's lots of background images too ● Some items use images (or multiple images) for fancy effects ● 17 ● ● ● ● ● Locate original image to get properties (i.e. Size) ●
  • 18. Creating a custom theme for your group But it's not all just colors, there's lots of background images too ● Create your own image ● Place in same folder as your theme files ● Override the style to point to your image: ● #lotusTitleBar .lotusInner, .lotusTitleBar .lotusInner { 18 ● ● ● ● ● ● ● background-image:url(MyTitleBarLeft.png); } ● Repeat as necessary...... or as willing ;-)
  • 19. Creating a custom theme for your group Link your htm files to your stylesheet ● You need to update all the htm files to reference your stylesheet ● </script> <!-- Import the stylesheet --> <link rel="stylesheet" type="text/css" href="stylesheet.css"/> <div id="lotusFrame"> <div id="lotusBanner"><div class="lotusRightCorner"><div class="lotusInner"> 19 ● ● ● ● ● Be sure to insert this after the initial <script> blocks ▬ just before the lotusFrame div ● This ensures your stylesheet is loaded after the core stylesheets ▬ and that your overrides are not overridden
  • 20. Creating a custom theme for your group Create a thumbnail ● Themes can have a thumbnail associated with them ● This can be GIF or JPEG ● Should be 80x60 pixels ● Thumbnail is displayed in the Choose Theme UI ▬ & in the Custom Themes management UI 20
  • 21. Creating a custom theme for your group Uploading your theme ● Need to use Microsoft Internet Explorer – for ActiveX support ● Give name & description for theme, then select your files ▬ Can browse for files, or use drag'n'drop ●Include all files, even if you've not modified them. ● ●If you leave out a htm file, Lotus Quickr will try to generate it based on other files supplied. 21
  • 22. Creating a custom theme for your group Updating your theme after initial upload ● Open the Custom Theme UI ● Select your custom theme ● 22 ● ● ●
  • 23. Creating a custom theme for your group Enjoying the results ● Apply the new custom theme for your place ● 23 ● ● ● ● ● ● ● ● ● ● Then see if you can get your UI/Graphics designer to provide the rest of the styles & images you want. :-)
  • 24. Creating a custom theme for your group An example – A theme with a Page Read Counter ● Issue we are addressing: ▬ I'd like to know which content place members find interesting ▬ To get this information, I'd like a view counter on the pages. ● What we need to do to implement: ▬ Update our custom theme to display view counter 24 ▬ In theme, use JavaScript, AJAX, CSS, HTML to add counter to UI ▬ Create a PlaceBot to read, increment, store, and return the counter ▬
  • 25. Creating a custom theme for your group The PageCounter PlaceBot ● Using PlaceBot to handle the server-side task of managing the counter ▬ A PlaceBot is an agent, we will use it like a Web Agent ▬ We will call it using AJAX from the browser 25 ● ● The Placebot will: ▬ Take document UNID as input ▬ Locate the document ▬ Read the current view count from a field in the document ▬ Increment the view count and save it back to the document ▬ Return the new count to the browser
  • 26. Creating a custom theme for your group The PageCounter PlaceBot ● PlaceBot can be written in LotusScript® or JavaTM ▬ Both versions provided with files for this talk 26
  • 27. Creating a custom theme for your group The PageCounter PlaceBot ● We are using this PlaceBot as a service ▬ We make a request to it, giving it an ID, and get back a result ● In the PlaceBot, we need to extract the ID from the query ● The PlaceBot's DocumentContext contains a field with the queryString ● AgentContext agentContext = session.getAgentContext(); Database db = agentContext.getCurrentDatabase(); Document docContext = agentContext.getDocumentContext(); String queryString = docContext.getItemValueString("Query_String"); 27 ● ● ● ● Set db = session.Currentdatabase Set docCtx = session.Documentcontext queryStr = docCtx.Getitemvalue("Query_String")(0) ● Our query string will be like this: ▬ OpenAgent&unid=DA27A807FF3652A28025768900495B07
  • 28. Creating a custom theme for your group The PageCounter PlaceBot 28 ● ● To return result from a LotusScript agent, just use print ● ● ● ● ... ret = incAndGetPageCount(db, unid) Print(ret) End Sub ● To return result from Java agent, use PrintWriter ... PrintWriter pw = getAgentOutput(); pw.println(ret); ...
  • 29. Creating a custom theme for your group The PageCounter PlaceBot ● By detault, a PlaceBot will wrap your output in a basic HTML page ● If your PlaceBot outputs “27”, the response would be: ● <html><head></head> <body text="#000000">27</body></html> ● To override this, you can specify the content-type for your output ● Print “Content-Type:text/plain” 29 ● - (or text/xml, text/javasc ript, etc...) ● ● ● ● Print("Content-Type:text/plain"); Print(ret) PrintWriter pw = getAgentOutput(); pw.println("Content-Type:text/plain"); pw.println(ret); ● Content-Type declaration must be first line output from the PlaceBot ●
  • 30. Creating a custom theme for your group Adding the PlaceBot to your place ● Open the place, click “Customize this place”, click “Placebots” ● Click “New Placebot” ▬ Be sure to name it “PageCounter” - this will be needed by the 30 theme ▬ Run on Schedule, but “Disable Placebot” in schedule settings ▬ Select your file(s) to upload
  • 31. Creating a custom theme for your group Test the PlaceBot ● Open a page in your place, and get the document UNID ● 31 ● ● ● ● Build URL to the PlaceBot (/agent)
  • 32. Creating a custom theme for your group JavaScript to get the count and insert into page ● JavaScript code for the counter is contained in PageCounter.js ● ● The script needs to perform 2 steps ▬ Call the agent to get the count ▬ Updates the PageCounter div in the page with the counter 32 HTML ▬ ● But first we need to find the document UNID
  • 33. Creating a custom theme for your group How to find the document UNID ● Could get it from the url (location.href) 33 ● ● ● ● But it might already be defined in the DOM?
  • 34. Creating a custom theme for your group JavaScript to get the count and insert into page ● Call the agent to get the count ▬ Uses AJAX to make call to agent on server function InsertPageCounter(/*String*/divId) { 34 var response; var pageUnid = currentPage.PageUnid; var agentUrl = "../../PageCounter?OpenAgent&unid=" + pageUnid; dojo.io.bind({ url: agentUrl, load: function(type, data, evt) { response = data; response.trim(); insertCountIntoPage(divId, response); }, mimetype: "text/plain" }); } Lotus Quickr 8.2 uses Dojo 0.4. Need to use dojo.io.bind as opposed to xhrGet.
  • 35. Creating a custom theme for your group JavaScript to get the count and insert into page ● Updates the PageCounter div in the page with the counter HTML ▬ Uses three <span>s, to allow extra styling on actual number function insertCountIntoPage(/*String*/ divId, /*String*/ count) { var pcDiv = dojo.byId(divId); pcDiv.setAttribute("class", "PageCounter"); var span = document.createElement("span"); span.textContent = "This page has been viewed "; pcDiv.appendChild(span); span = document.createElement("span"); span.setAttribute("class", "PageCounterCount"); span.textContent = count; pcDiv.appendChild(span); span = document.createElement("span"); span.textContent = " times."; pcDiv.appendChild(span); 35 }
  • 36. Creating a custom theme for your group Adding counter to page.htm – Discussion, Simple & Ordered folders ● X marks the spot – this is where I want my view counter ● Use Firebug to see what is there: <div id=”AuthorAndModified”> 36
  • 37. Creating a custom theme for your group Adding counter to page.htm – Discussion and Simple folders ... <!-- Import the stylesheet --> <link rel="stylesheet" type="text/css" href="stylesheet.css"/> <!-- Import the Javascript needed for the view counter --> <img src="PageCounter.js" style="display:none"/> <script type="text/javascript" src="$FILE/PageCounter.js"></script> ... ... 37 <!-- "This is checked out..." --> <QuickPlaceSkinComponent name=PageStatus prefixHTML={<div class="lotusSection">} postfixHTML={</div>}> <!-- Div placeholder for the PageCounter (and script to insert it) --> <div id="PageCounter"></div> <script>InsertPageCounter("PageCounter");</script> <!-- Author and Modified --> <QuickPlaceSkinComponent name=authorAndModified emptyFormat={} delimiter={,&nbsp;} prefixHTML={<div id="AuthorAndModified">} postfixHTML={</div>}> </div> <!-- lotusHeader --> ... Additions
  • 38. Creating a custom theme for your group Adding counter to headlines.htm – Headline folders ● X marks the spot – this is where I want my view counter ● Use Firebug to see what is there: <div id=”authodmod-text”> 38
  • 39. Creating a custom theme for your group Adding counter to headlines.htm – Headline folders ... <!-- Import the stylesheet --> <link rel="stylesheet" type="text/css" href="stylesheet.css"/> <!-- Import the Javascript needed for the view counter --> <img src="PageCounter.js" style="display:none"/> <script type="text/javascript" src="$FILE/PageCounter.js"></script> ... ... 39 selectedFormat={<Item class="h-revisionSelected-text">} Delimiter={<span class="h-revision-text">&nbsp;|&nbsp;</span>} EmptyFormat={}> <!-- Div placeholder for the PageCounter (and script to insert it) --> <div id="PageCounter"></div> <script>InsertPageCounter("PageCounter");</script> <!-- SPR RELS7EGSXD: Author and Modified --> <QuickPlaceSkinComponent name=authorAndModified format={<Item class="authormod-text">} prefixHTML={<br/><div class="authormod-text">} postfixHTML={</div><br/>} emptyFormat={} delimiter={,&nbsp;}> ... Additions
  • 40. Creating a custom theme for your group Adding counter to slideshow.htm – Slideshow folders ● And again, X marks the spot ● Use Firebug to see what is there: <div id=”authodmod-text”> 40
  • 41. Creating a custom theme for your group Adding counter to slideshow.htm – Slideshow folders ... <!-- Import the stylesheet --> <link rel="stylesheet" type="text/css" href="stylesheet.css"/> <!-- Import the Javascript needed for the view counter --> <img src="PageCounter.js" style="display:none"/> <script type="text/javascript" src="$FILE/PageCounter.js"></script> 41 ... selectedFormat={<Item class="h-revisionSelected-text">} Delimiter={<span class="h-revision-text">&nbsp;|&nbsp;</span>} EmptyFormat={}> <!-- Div placeholder for the PageCounter (and script to insert it) --> <div id="PageCounter"></div> <script>InsertPageCounter("PageCounter");</script> <!-- SPR RELS7EGSXD: Author and Modified --> <QuickPlaceSkinComponent name=authorAndModified format={<Item class="authormod-text">} prefixHTML={<br/><div class="authormod-text">} postfixHTML={</div><br/>} emptyFormat={} delimiter={,&nbsp;}> ... Additions
  • 42. Creating a custom theme for your group Custom styling for our PageCounter ● Add extra styles for PageCounter to stylesheet.css ● Float the PageCounter <div> to right of the Author & Modified info ● Display the actual number in bold italics ● .PageCounter { float: right } .PageCounterCount { font-weight: bold; font-style: italic } 42
  • 43. Creating a custom theme for your group PageCounter 43 in action
  • 44. Creating a custom theme for your group When not logged in, agent cannot update documents ● Note: As the PlaceBot is modifying documents in the place, you need to be logged in. This type of customization is not suitable for places with anonymous access. 44
  • 45. Creating a custom theme for your group Further resources for creating custom themes ● Lotus User Interface (OneUI) documentation: ▬ http://www-12.lotus.com/ldd/doc/oneuidoc/docpublic/index.htm 45 ● ● Customizing Lotus Quickr 8.1 for Redbooks Wiki ▬ http://www-10.lotus.com/ldd/lqwiki.nsf/dx/customizing-lotus-quickr-table-of-contents-for-● ● Quickr Domino 8.2 Masterclass: Branding,Customization,Template Development for Quickr ▬ http://www-10.lotus.com/ldd/lqwiki.nsf/dx/quickr-domino-8.2-masterclass-brandingcustomizationtemplate-● ● LS2009 Breakout session AD403 - Customizing IBM Lotus Quickr Domino Services ▬ http://www-10.lotus.com/ldd/lqwiki.nsf/dx/01272009112520AMWEBM9V.htm
  • 46. Quickr Domino Customisation Samples Template ● In the Apache catalog on OpenNTF.org http://www.openntf.org/catalogs/a2cat.nsf/topicThread.xsp?action=openDocument&documentId=093E45ABCC25088786257693003F4256 46
  • 47. 47 Agenda ● Introduction ● Creating a custom theme for your group ● Modifying the default template ● Using performance servlet on customizations ● Q & A ● Related Sessions
  • 48. Modifying the default template ● When creating a new place, you may want to make changes without having to create a whole new custom template ● The rendering of the places in Lotus Quickr rely heavily on javascript and css ● Most of these modifications will involve inspecting the resulting HTML generated for the Lotus Quickr UI and using javascript to manipulate the html objects and css class definitions ● Some of the modifications will show how to override and modify some of the existing Lotus Quickr javascript functions ● The modifications specified here will get increasingly more advanced (and cool) 48 ●
  • 49. Modifying the default template ● Doing these modifications will require knowledge of HTML, CSS and javascript ● These customizations outlined are all designed for Lotus Quickr8.2 with the latest fix pack running on IBM Lotus® Domino® 8.5.1 ● Since most of this is web development, any text editor will suffice when creating/editing javascript or css files ● These customizations will be shown with Firefox® 3.5 since it's a great browser for general use as well as development. Obviously you may need to make your customizations also work on other major browsers such as Safari®, Opera®, Chrome®, and probably at least one more 49 ● ▬
  • 50. Modifying the default template ● Here's what we'll modify in the default theme: ▬ Highlight the “What's New” section ▬ Change the default logo ▬ Highlight search terms in search 50 results ▬ Add items to the document context menu ▬ Add thumbnails to pictures in a view ▬ Add a slideshow of images to the view from the thumbnails using a Dojo 1.3.2 widget ●
  • 51. Modifying the default template ● Much of the UI generated is done through javascript. The easiest way to determine the generated markup is to use Firefox with the Firebug Add-on ▬ Firefox - http://getfirefox.com ▬ Firebug - http://getfirebug.com ● Once these are installed, Firebug can be activated by clicking on the little bug at the bottom-right of the browser 51 ● ▬
  • 52. Modifying the default template ● To extend the default place there, it all starts with the Quickr81_ext.js, which is located in the datadominohtmlqphtmlskinsQuickr81scripts directory ● This file is blank to start ● It will not be overwritten with upgrades or Fix Packs ● It is the starting point for loading default theme customizations ● Use this file to load other supplemental scripts 52
  • 53. Modifying the default template ● Here's what we'll modify in the default theme: ▬ Highlight the “What's New” section ▬ Change the default logo ▬ Highlight search terms in search 53 results ▬ Add thumbnails to pictures in a view ▬ Add items to the document context menu ▬ Add a slideshow of images to the view from the thumbnails using a Dojo 1.3.2 widget ●
  • 54. Modifying the default template -Highlight the “What's New” section ● Issue we are addressing: ▬ The “What's New” section of the Welcome page blends in with the rest of the Welcome 54 page. You may want to make this particular section more visible to your users ● What we need to do to implement: ▬ Inspect the welcome page for html element id used to define the What's New section ▬ Create a new javascript file for the code new css class attributes for the html element to change it's look ▬ Code to add style attributes to the document to make the section stand out ▬ Load the new javascript file into the existing javascript extension file ●
  • 55. Modifying the default template -Highlight the “What's New” section ● Click on the Inspect icon in Firebug. This will allow you to point to a section on the screen and the resulting HTML will show in Firebug ● Using this, we can tell that this section has an id of “newsbody” ● 55 ▬
  • 56. Modifying the default template -Highlight the “What's New” section ● Create a new file called “Quickr81_ext_whatsnew.js” and put it in the scripts directory ● This file will contain all the changes necessary for this customization and will be loaded in the Quickr81_ext.js file ● One could load all customizations directly into the Quickr81_ext.js file, but I prefer to keep each customization in separate files and just load them from the Quickr81_ext.js file 56
  • 57. Modifying the default template -Highlight the “What's New” section 57 var Quickr_WhatsNewUtil = { main: function() { var sNewStyle = '<style>' + '#newsbody{' + 'border: 1px dotted;' + 'margin: 10px;' + 'padding: 10px;' + '}'; sNewStyle += '#newsbody div b{' + 'color: #ff0000;' + 'font-size: 2em' + '}' + '</style>'; document.write(sNewStyle); } } Quickr_WhatsNewUtil.main(); ● The code is encapsulated in a variable object called Quickr_WhatsNewUtil ● The main method is called once the file is loaded ● We will define a new string variable named sNewStyle that will contain the style definition ● Since we know the id of the What's New section, any style defined with #newsbody will be applied to that section
  • 58. Modifying the default template -Highlight the “What's New” section 58 var Quickr_WhatsNewUtil = { main: function() { var sNewStyle = '<style>' + '#newsbody{' + 'border: 1px dotted;' + 'margin: 10px;' + 'padding: 10px;' + '}'; sNewStyle += '#newsbody div b{' + 'color: #ff0000;' + 'font-size: 2em' + '}' + '</style>'; document.write(sNewStyle); } } Quickr_WhatsNewUtil.main(); ● We also want to set the style of the “What's New” section title area ● Since this lives in nested <div> and <b> tags, we can add style definitions for it ● Now that we've defined the styles, we'll use the document.write javascript call to output them for the browser to render ● Finally, we'll call the main method to run our script
  • 59. Modifying the default template -Highlight the “What's New” section ● Next we need to load the newly created javascript file that will write out the new style for the What's New section ● In the Quickr81_ext.js file, we can call the loadSupplementalScript method in the QuickrGeneralUtils object to load our new functionality 59 ● ▬ //simple modification showing how to change the look/feel of the "What's New" page QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_whatsnew.js");
  • 60. Modifying the default template -Highlight the “What's New” section ● Here's the resulting section changes: ● The title of the section is now red and there is a border around it to draw more attention 60 ▬
  • 61. Modifying the default template ● Here's what we'll modify in the default theme: ▬ Highlight the “What's New” section ▬ Change the default logo ▬ Highlight search terms in search 61 results ▬ Add items to the document context menu ▬ Add thumbnails to pictures in a view ▬ Add a slideshow of images to the view from the thumbnails using a Dojo 1.3.2 widget ●
  • 62. Modifying the default template -Change the default logo ● Issue we are addressing: ▬ In the default theme, the IBM Lotus Quickr logo displays on every page. We may want 62 to change this to be our own company logo or another logo ● What we need to do to implement: ▬ Create a new javascript file for the new code ▬ Inspect the page for the logo image's id ▬ Code to change the image source and any other look/feel changes ▬ Load the new javascript file into the existing javascript extension file ●
  • 63. Modifying the default template -Change the default logo ● Create a new file called “Quickr81_ext_newlogo.js” and put it in the scripts directory ● This file will contain all the changes necessary for this customization and will be loaded in the Quickr81_ext.js 63
  • 64. Modifying the default template -Change the default logo ● Click on the Inspect icon in Firebug. This will allow you to point to a section on the screen and the resulting HTML will show in Firebug ● Using this, we can tell that the logo at the top an id of “lotusLogo” ● 64 ▬
  • 65. Modifying the default template -Change the default logo ● Using a text editor, edit the Quickr81_ext_newlogo.js file to define a new object called QuickrNewLogoUtil ● We will use javascript to get the reference to the image tag using the id lotusLogo ● We will change the image source to reference the IBM logo from the main site ● We will also set a few style attributes to make it look better 65 var Quickr_NewLogoUtil = { main: function() { var nodeLogo = document.getElementById("lotusLogo"); nodeLogo.src = "http://www.ibm.com/i/v16/t/ibm-logo.gif"; nodeLogo.style.backgroundColor = "#649DE1"; nodeLogo.style.paddingBottom = "5px"; nodeLogo.style.border = "3px solid #DDDDDD"; } } Quickr_NewLogoUtil.main();
  • 66. Modifying the default template -Change the default logo ● Next we need to load the newly created JS file that will change the default logo ● In the Quickr81_ext.js file, we can call the loadSupplementalScript method in the QuickrGeneralUtils object to load our new functionality 66 ● ▬ //simple modification showing how to change the look/feel of the "What's New" page QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_whatsnew.js"); //let's override the logo with our own QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_newlogo.js");
  • 67. Modifying the default template -Change the default logo ● Here's the resulting logo change: ● The logo at the top left has now changed to the IBM logo and has a gray border 67 ▬
  • 68. Modifying the default template ● Here's what we'll modify in the default theme: ▬ Highlight the “What's New” section ▬ Change the default logo ▬ Highlight search terms in search 68 results ▬ Add items to the document context menu ▬ Add thumbnails to pictures in a view ▬ Add a slideshow of images to the view from the thumbnails using a Dojo 1.3.2 widget ●
  • 69. Modifying the default template -Highlight search terms in search results ● Issue we are addressing: ▬ When search results are returned in Lotus Quickr, the search terms used aren't 69 highlighted in the results ● What we need to do to implement: ▬ Create a new javascript file for the new code ▬ Code to make sure that we're on the search results page ▬ Inspect the results for CSS class names used to define the look of results ▬ Code to find all html elements using those CSS class names ▬ Replace the search terms in those html elements with highlighted search terms ▬ Load the new javascript file into the existing javascript extension file ●
  • 70. Modifying the default template -Highlight search terms in search results ● Create a new file called “Quickr81_ext_searchterms.js” and put it in the scripts directory ● This file will contain all the changes necessary for this customization and will be loaded in the Quickr81_ext.js 70
  • 71. Modifying the default template -Highlight search terms in search results ● We'll define the Quickr_SearchTerms object, which will contain all of our necessary customizations ● The _HighlightFormat property will define the html to replace the search terms ● {0} will be replaced with the original search term var Quickr_SearchTerms = { _highlightFormat: "<span style="font-size: 1.5em; background-color: #FFE400">{0}</span>", main: function() { dojo.addOnLoad(function() { Quickr_SearchTerms.highliteSearchTerms(); 71 }); }, ...
  • 72. Modifying the default template -Highlight search terms in search results ● Here is the code to make sure we are on search page before we attempt to modify the page ● We'll define the _isSearchPage method ● If the URL contains h_SearchResults, then we know to run our code var Quickr_SearchTerms = { ... _isSearchPage: function() { return (window.location.href.indexOf("h_SetEditScene;h_SearchResults") > -1); 72 } )
  • 73. Modifying the default template -Highlight search terms in search results ● Click on the Inspect icon in Firebug ● Start selecting the different sections of the search results to determine the class names or ids we can use to apply our changes 73
  • 74. Modifying the default template -Highlight search terms in search results ● First, we make sure we're on the search page ● We then use javascript to pull the search terms from the url, which immediately follow the h_SearchString in the url ● Multiple search terms are separated by spaces, which we will split and iterate 74 ● ● ... highliteSearchTerms: function() { if ( this._isSearchPage() ) { var aSplit = window.location.href.split("h_SearchString;"); var aTerms = ""; if (aSplit.length > 1) aTerms = aSplit[1]; if (aTerms.indexOf(",") > -1) aTerms = aTerms.split(",")[0]; aTerms = aTerms.split("%20"); var aClassNames = [ "h-folderCompact-text", "h-folderItem-text", "h-folderAbstract-text", "richTextContainer" ]; ...
  • 75. Modifying the default template -Highlight search terms in search results ● The class names to work with are: ▬ h-folderCompact-text ▬ h-folderItem-text ▬ h-folderAbstract-text ▬ RichTextContainer ● Create an array of CSS class names through which we can iterate 75 ● ● ... highliteSearchTerms: function() { if ( this._isSearchPage() ) { var aSplit = window.location.href.split("h_SearchString;"); var aTerms = ""; if (aSplit.length > 1) aTerms = aSplit[1]; if (aTerms.indexOf(",") > -1) aTerms = aTerms.split(",")[0]; aTerms = aTerms.split("%20"); var aClassNames = [ "h-folderCompact-text", "h-folderItem-text", "h-folderAbstract-text", "richTextContainer" ]; ...
  • 76. Modifying the default template -Highlight search terms in search results ● We will loop through the list of html elements that match the classNames for search results ● Get the innerHTML of the nodes found so we can inspect it for terms ● Then loop through the search terms ● Check to see if the search term is in the html element 76 ... for (var hh = 0; hh < aClassNames.length; hh++) { var aList = qp_getElementsByClassName(aClassNames[hh], "*"); for (var ii = 0; ii < aList.length; ii++) { var bChanged = false; var newHTML = aList[ii].innerHTML; for (var jj = 0; jj < aTerms.length; jj++) { if (newHTML.toLowerCase().indexOf(aTerms[jj].toLowerCase()) > -1) { newHTML = newHTML.replace( new RegExp(aTerms[jj],"gi"), this._highlightFormat.replace(/{0}/gi, aTerms[jj]) ); bChanged = true; } } if (bChanged) aList[ii].innerHTML = newHTML; } } ...
  • 77. Modifying the default template -Highlight search terms in search results ● If we find the terms in the node's HTML, then need to replace that search term ● We replace the term with the _highlightFormat html string ● Make sure to replace the {0} in the _highlightFormat with the term found ● Finally, since we found the term, replace the innerHTML 77 ... for (var hh = 0; hh < aClassNames.length; hh++) { var aList = qp_getElementsByClassName(aClassNames[hh], "*"); for (var ii = 0; ii < aList.length; ii++) { var bChanged = false; var newHTML = aList[ii].innerHTML; for (var jj = 0; jj < aTerms.length; jj++) { if (newHTML.toLowerCase().indexOf(aTerms[jj].toLowerCase()) > -1) { newHTML = newHTML.replace( new RegExp(aTerms[jj],"gi"), this._highlightFormat.replace(/{0}/gi, aTerms[jj]) ); bChanged = true; } } if (bChanged) aList[ii].innerHTML = newHTML; } } ...
  • 78. Modifying the default template -Highlight search terms in search results ● Next we need to load the newly created JS file that will highlight the search terms ● In the Quickr81_ext.js file, we can call the loadSupplementalScript method in the QuickrGeneralUtils object to load our new functionality 78 ● ▬ //simple modification showing how to change the look/feel of the "What's New" page QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_whatsnew.js"); //let's override the logo with our own QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_newlogo.js"); //let's update the search results UI to highlight the search terms QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_searchterms.js");
  • 79. Modifying the default template -Highlight search terms in search results ● Here's the search results with the highlighted search terms 79
  • 80. Modifying the default template ● Here's what we'll modify in the default theme: ▬ Highlight the “What's New” section ▬ Change the default logo ▬ Highlight search terms in search 80 results ▬ Add items to the document context menu ▬ Add thumbnails to pictures in a view ▬ Add a slideshow of images to the view from the thumbnails using a Dojo 1.3.2 widget ●
  • 81. Modifying the default template -Add items to the document context menu ● Issue we are addressing: ▬ When clicking on the context menu for a document in a view, I would like to add a link 81 to the product homepage, a link to search an outside site, and a link to search the current place ● What we need to do to implement: ▬ Create a new javascript file for the new code ▬ Code to override the default context menu writer ▬ Code to determine if the menu being rendered is for a document or something else ▬ Code to append one static and two dynamic links to the document's context menu ▬ Load the new javascript file into the existing javascript extension file ●
  • 82. Modifying the default template -Add items to the document context menu ● Create a new file called “Quickr81_ext_contextmenu.js” and put it in the scripts directory ● This file will contain all the changes necessary for this customization and will be loaded in the Quickr81_ext.js 82
  • 83. Modifying the default template -Add items to the document context menu ● This is how the context menu looks originally. We want to add a few more items to this list for our own purposes: 83
  • 84. Modifying the default template -Add items to the document context menu ● Create a new object called Quickr_ContextMenuUtil. This object will encapsulate all of our functions ● In the main method of our object, we call dojo.addOnLoad to run our code once the page is fully loaded ● The function to write the menu is called QP_ContextMenu_write var Quickr_ContextMenuUtil = { main: function() { dojo.addOnLoad(function(){ 84 window.QP_ContextMenu_write_contextmenu = window.QP_ContextMenu_write; window.QP_ContextMenu_write = function() { var menu = this; ...
  • 85. Modifying the default template -Add items to the document context menu ● We will be overriding the QP_ContextMenu_write function with our own and call the original one as necessary ● When this function is run, it runs within the context of the menu item itself var Quickr_ContextMenuUtil = { main: function() { dojo.addOnLoad(function(){ 85 window.QP_ContextMenu_write_contextmenu = window.QP_ContextMenu_write; window.QP_ContextMenu_write = function() { var menu = this; ...
  • 86. Modifying the default template -Add items to the document context menu ● There will be several strings that we'll need during the process of adding these menu items ● These strings will be broken out into a resources object ● We're adding 3 links to this customization, so we need 3 resources ● The {0} in the strings will be replaced with the document title var Quickr_ContextMenuUtil = { ... 86 resources: { QUICKR_HOMEPAGE: "Lotus Quickr homepage", SEARCH_IBM: "Search IBM for: {0}", SEARCH_THISPLACE: "Search this place for: {0}" } } Quickr_ContextMenuUtil.main();
  • 87. Modifying the default template -Add items to the document context menu ● First, let's determine if this is a menu we want to modify. If the name of the menu is a 32 character hexadecimal, we can proceed ● Otherwise, we'll call the original javascript function ... window.QP_ContextMenu_write = function() { var menu = this; if (menu.name.search(/^[A-F0-9]{32}/i) >=0 && menu.name.length == 32) { 87 ... } else { window.QP_ContextMenu_write_contextmenu.apply(menu, arguments); } ...
  • 88. Modifying the default template -Add items to the document context menu ● We wish to add a static link to the menu ▬ First, we'll add a menu separator using the addSeparator 88 method ▬ Next, we need to call the addItem method with the following parameters: ▬ The link text ▬ The site url ▬ The target. For the current window, use _self. For a new window, use _blank ... if (menu.name.search(/^[A-F0-9]{32}/i) >=0 && menu.name.length == 32) { menu.addSeparator(); menu.addItem( Quickr_ContextMenuUtil.resources.QUICKR_HOMEPAGE, "http://www-01.ibm.com/software/lotus/products/quickr/", "_blank" ); ...
  • 89. Modifying the default template -Add items to the document context menu ● Next, we want to add another more dynamic menu item. We want to get the name of the document and pass it in as a term to search the public IBM site ● Since we only have the doc unid at this point, we will make an ajax request to get the document data and pull the name ● We will use dojo.io.bind to make the ajax request ● To get an xml representation of the fields on the document, we can build a url to the document then append &Form=h_DocXml to it ... dojo.io.bind ({ url: "../../h_Index/" + menu.name + "/?OpenDocument&Form=h_DocXml&nowebcaching", method: "get", sync: true, mimetype: ( ( h_ClientBrowser.isIE() ) ? "text/plain" : "text/xml" ), load: function (type, data, evt) { QuickrXMLUtil.massageXmlStringForData(data); 89 ...
  • 90. Modifying the default template -Add items to the document context menu ● The data variable in the callback from the load method contains a reference to the returned information ● The massageXmlStringForData function ensures the data is xml ● We then use the Lotus Quickr function getTagValue to pull out the name and then call the decodeEntities function to make sure the html entities are properly decoded ... dojo.io.bind ({ url: "../../h_Index/" + menu.name + "/?OpenDocument&Form=h_DocXml&nowebcaching", method: "get", sync: true, mimetype: ( ( h_ClientBrowser.isIE() ) ? "text/plain" : "text/xml" ), load: function (type, data, evt) { 90 QuickrXMLUtil.massageXmlStringForData(data); var sName = QuickrGeneralUtil.decodeEntities( window.getTagValue(data, "qp_doc", "h_Name") ); ...
  • 91. Modifying the default template -Add items to the document context menu ● We now need to call the addItem method for our two dynamic links: ▬ One link to the IBM public site ▬ One link to search the current place ● We will replace the {0} in the link text with the name of the document 91 ... var sName = QuickrGeneralUtil.decodeEntities( window.getTagValue(data, "qp_doc", "h_Name") ); menu.addItem( Quickr_ContextMenuUtil.resources.SEARCH_IBM.replace("{0}", sName), "http://www.ibm.com/Search/?q=" + sName, "_blank" ); menu.addItem( Quickr_ContextMenuUtil.resources.SEARCH_THISPLACE.replace("{0}", sName), "javascript: void Quickr_ContextMenuUtil.searchThisPlace("" + sName.replace(/"/g,""") + "");", "_self" ); ...
  • 92. Modifying the default template -Add items to the document context menu ● For the link to search the current place using the name of the document as the search terms, we call the searchThisPlace function ● This function will find the search box on the page using the id searchtext, set the search value and submit the search form 92 ... searchThisPlace: function(sTerms) { var elSearch = dojo.byId("searchtext"); if (elSearch) { elSearch.value = sTerms; QuickSearchFormSubmit(); } }, resources: { QUICKR_HOMEPAGE: "Lotus Quickr homepage", SEARCH_IBM: "Search IBM for: {0}", SEARCH_THISPLACE: "Search this place for: {0}" } } Quickr_ContextMenuUtil.main();
  • 93. Modifying the default template -Add items to the document context menu ● Now that we've added all of the links to the context menu, we can call the original function to render the menu object 93 ... menu.addItem( Quickr_ContextMenuUtil.resources.SEARCH_IBM.replace("{0}", sName), "http://www.ibm.com/Search/?q=" + sName, "_blank" ); menu.addItem( Quickr_ContextMenuUtil.resources.SEARCH_THISPLACE.replace("{0}", sName), "javascript: void Quickr_ContextMenuUtil.searchThisPlace("" + sName.replace(/"/g,""") + "");", "_self" ); window.QP_ContextMenu_write_contextmenu.apply(menu, arguments); }, ...
  • 94. Modifying the default template -Add items to the document context menu ● Next we need to load the newly created JS file that will add the context menu items ● In the Quickr81_ext.js file, we can call the loadSupplementalScript method in the QuickrGeneralUtils object to load our new functionality 94 ● ▬ //simple modification showing how to change the look/feel of the "What's New" page QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_whatsnew.js"); //let's override the logo with our own QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_newlogo.js"); //let's update the search results UI to highlight the search terms QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_searchterms.js"); //let's append context menu items in the view QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_contextmenu.js");
  • 95. Modifying the default template -Add items to the document context menu ● This is how the context menu looks with our new link. This link search the current place in the current window 95
  • 96. Modifying the default template ● Here's what we'll modify in the default theme: ▬ Highlight the “What's New” section ▬ Change the default logo ▬ Highlight search terms in search 96 results ▬ Add items to the document context menu ▬ Add thumbnails to pictures in a view ▬ Add a slideshow of images to the view from the thumbnails using a Dojo 1.3.2 widget ●
  • 97. Modifying the default template -Add thumbnails to pictures in a view ● Issue we are addressing: ▬ When opening a view with attachments, you will see a download icon. If the 97 attachment is an image, we want to show a thumbnail of that image in the view ● What we need to do to implement: ▬ Create a new javascript file for the new code ▬ Code to override the javascript function to render the download icon ▬ Code to render the thumbnail if the attachment is an image. If it isn't an image, call the original javascript function to render the download icon ▬ Load the new javascript file into the existing javascript extension file ●
  • 98. Modifying the default template -Add thumbnails to pictures in a view ● Create a new file called “Quickr81_ext_thumbnails.js” and put it in the scripts directory ● This file will contain all the changes necessary for this customization and will be loaded in the Quickr81_ext.js 98
  • 99. Modifying the default template -Add thumbnails to pictures in a view ● This is how the view looks originally. The download column shows the default icon: 99
  • 100. Modifying the default template -Add thumbnails to pictures in a view ● Create a new object called Quickr_ThumbnailUtil. This object will encapsulate all of our functions ● The size of the thumbnail is defined in the _defaultHeight property. By setting the height of the thumbnail, the browser will automatically scale the image width to keep the image in proportion var Quickr_ThumbnailUtil = { _defaultHeight: 50, main: function() { 100 ... } } Quickr_ThumbnailUtil.main();
  • 101. Modifying the default template -Add thumbnails to pictures in a view ● In the main method of our object, we call dojo.addOnLoad to run our code once the page is fully loaded ● We want to override the Lotus Quickr function that generates the download icon. It is called GenerateAttachmentAnc hor ● Before we override the function, we reassign the original function to another name so that it can be called 101 ... dojo.addOnLoad(function(){ window.GenerateAnchor_thumbnail = window.GenerateAttachmentsAnchor; window.GenerateAttachmentsAnchor = function () { var sUnid = arguments[0]; var sName = arguments[1]; if (FM.view.getView() == FM.view.VIEW_LIST && Quickr_ThumbnailUtil.isImage(sName)) { return Quickr_ThumbnailUtil._generateThumbnailLink(sUnid, sName); } else { return window.GenerateAnchor_thumbnail.apply(null, arguments); } } }); ...
  • 102. Modifying the default template -Add thumbnails to pictures in a view ● The document unid and attachment name of the document are passed as the first two arguments ● We need to check to make sure that we are in a list type view ● We also need to check that the attachment name is a supported image type ● If we pass these checks, go ahead and call our function to generate the thumbnail 102 ... dojo.addOnLoad(function(){ window.GenerateAnchor_thumbnail = window.GenerateAttachmentsAnchor; window.GenerateAttachmentsAnchor = function () { var sUnid = arguments[0]; var sName = arguments[1]; if (FM.view.getView() == FM.view.VIEW_LIST && Quickr_ThumbnailUtil.isImage(sName)) { return Quickr_ThumbnailUtil._generateThumbnailLink(sUnid, sName); } else { return window.GenerateAnchor_thumbnail.apply(null, arguments); } } }); ...
  • 103. Modifying the default template -Add thumbnails to pictures in a view ● If we pass these checks, go ahead and call our function to generate the thumbnail ● If we don't pass these checks, call the original function so that the UI will render as normal. 103 ... dojo.addOnLoad(function(){ window.GenerateAnchor_thumbnail = window.GenerateAttachmentsAnchor; window.GenerateAttachmentsAnchor = function () { var sUnid = arguments[0]; var sName = arguments[1]; if (FM.view.getView() == FM.view.VIEW_LIST && Quickr_ThumbnailUtil.isImage(sName)) { return Quickr_ThumbnailUtil._generateThumbnailLink(sUnid, sName); } else { return window.GenerateAnchor_thumbnail.apply(null, arguments); } } }); ...
  • 104. Modifying the default template -Add thumbnails to pictures in a view ● The isImage function to determine if this attachment is an image ● We need to inspect the sName variable to make sure there is no “/” in it, which is the indicator that there are multiple files attached ... isImage: function(sName) { var bReturn = false; if (sName.indexOf("/") == -1) { var aImageTypeList = ["jpg","gif","jpeg","png"]; for (var ii = 0; ii < aImageTypeList.length; ii++) { if (sName.toLowerCase().indexOf("." + aImageTypeList[ii]) == sName.length - 4) { 104 bReturn = true; break; } } } return bReturn; }, ...
  • 105. Modifying the default template -Add thumbnails to pictures in a view ● The aImageTypeList variable is the array of image extensions supported ● We will loop through this list to see if sName ends with one of them ... isImage: function(sName) { var bReturn = false; if (sName.indexOf("/") == -1) { var aImageTypeList = ["jpg","gif","jpeg","png"]; for (var ii = 0; ii < aImageTypeList.length; ii++) { if (sName.toLowerCase().indexOf("." + aImageTypeList[ii]) == sName.length - 4) { 105 bReturn = true; break; } } } return bReturn; }, ...
  • 106. Modifying the default template -Add thumbnails to pictures in a view ● The _generateThumbnailLink function generates the html for the thumbnail ● generateAttachmentLinkHref is the Lotus Quickr function to get the link to download the attachment 106 ● ● ... _generateThumbnailLink: function (sUnid, sName) { var linkurl = window.generateAttachmentLinkHref(sUnid, sName); var sTarget = ((linkurl.indexOf("javascript:") == -1) ? "_blank" : "_self"); return "<a href="" + linkurl + "" target="" + sTarget + "">" + "<img style="margin-bottom: 5px" title="" + sName + "" alt="" + sName + "" src="" + QuickrGeneralUtil.getBaseUrl() + "/$defaultview/" + sUnid + "/$file/" + encodeURIComponent(sName) + "" height="" + Quickr_ThumbnailUtil._defaultHeight + ""/>" + "</a>"; } ...
  • 107. Modifying the default template -Add thumbnails to pictures in a view ● We set the target of the link to be _self when we want the link to open in the current window ● We set it to _blank to open in a new window ● 107 ● ● ... _generateThumbnailLink: function (sUnid, sName) { var linkurl = window.generateAttachmentLinkHref(sUnid, sName); var sTarget = ((linkurl.indexOf("javascript:") == -1) ? "_blank" : "_self"); return "<a href="" + linkurl + "" target="" + sTarget + "">" + "<img style="margin-bottom: 5px" title="" + sName + "" alt="" + sName + "" src="" + QuickrGeneralUtil.getBaseUrl() + "/$defaultview/" + sUnid + "/$file/" + encodeURIComponent(sName) + "" height="" + Quickr_ThumbnailUtil._defaultHeight + ""/>" + "</a>"; } ...
  • 108. Modifying the default template -Add thumbnails to pictures in a view ● We will now build the html string to return a reference to the thumbnail ● We will set the link url and link target to our new link using the previously computed variables. ... _generateThumbnailLink: function (sUnid, sName) { var linkurl = window.generateAttachmentLinkHref(sUnid, sName); var sTarget = ((linkurl.indexOf("javascript:") == -1) ? "_blank" : "_self"); return "<a href="" + linkurl + "" target="" + sTarget + "">" + 108 "<img style="margin-bottom: 5px" title="" + sName + "" alt="" + sName + "" src="" + QuickrGeneralUtil.getBaseUrl() + "/$defaultview/" + sUnid + "/$file/" + encodeURIComponent(sName) + "" height="" + Quickr_ThumbnailUtil._defaultHeight + ""/>" + "</a>"; } ...
  • 109. Modifying the default template -Add thumbnails to pictures in a view ● QuickrGeneralUtil.getBaseUrl() is the Lotus Quickr function to get a reference to the current place ● EncodeURIComponent will encode the attachment name so it is suitable for use in a url ... _generateThumbnailLink: function (sUnid, sName) { var linkurl = window.generateAttachmentLinkHref(sUnid, sName); var sTarget = ((linkurl.indexOf("javascript:") == -1) ? "_blank" : "_self"); return "<a href="" + linkurl + "" target="" + sTarget + "">" + 109 "<img style="margin-bottom: 5px" title="" + sName + "" alt="" + sName + "" src="" + QuickrGeneralUtil.getBaseUrl() + "/$defaultview/" + sUnid + "/$file/" + encodeURIComponent(sName) + "" height="" + Quickr_ThumbnailUtil._defaultHeight + ""/>" + "</a>"; } ...
  • 110. Modifying the default template -Add thumbnails to pictures in a view ● This is where we use the _defaultHeight property. We set the height property of the image tag so it will show smaller on the screen ... _generateThumbnailLink: function (sUnid, sName) { var linkurl = window.generateAttachmentLinkHref(sUnid, sName); var sTarget = ((linkurl.indexOf("javascript:") == -1) ? "_blank" : "_self"); return "<a href="" + linkurl + "" target="" + sTarget + "">" + 110 "<img style="margin-bottom: 5px" title="" + sName + "" alt="" + sName + "" src="" + QuickrGeneralUtil.getBaseUrl() + "/$defaultview/" + sUnid + "/$file/" + encodeURIComponent(sName) + "" height="" + Quickr_ThumbnailUtil._defaultHeight + ""/>" + "</a>"; } ...
  • 111. Modifying the default template -Add thumbnails to pictures in a view ● Next we need to load the newly created JS file that will render the thumbnails ● In the Quickr81_ext.js file, we can call the loadSupplementalScript method in the QuickrGeneralUtils object to load our new functionality 111 ● ▬ //simple modification showing how to change the look/feel of the "What's New" page QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_whatsnew.js"); //let's override the logo with our own QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_newlogo.js"); //let's update the search results UI to highlight the search terms QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_searchterms.js"); //let's append context menu items in the view QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_contextmenu.js"); //let's show thumbnails QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_thumbnails.js");
  • 112. Modifying the default template -Add thumbnails to pictures in a view ● Here's the view with the thumbnails instead of the download icon 112
  • 113. Modifying the default template ● Here's what we'll modify in the default theme: ▬ Highlight the “What's New” section ▬ Change the default logo ▬ Highlight search terms in search results ▬ Add items to the document context menu ▬ Add thumbnails to pictures in a view ▬ Add a slideshow of images to the view from the thumbnails using a Dojo 1.3.2 widget 113 ●
  • 114. Modifying the default template -Add a slideshow of images to the view from the thumbnails ● Issue we are addressing: ▬ We've already added thumbnails of images to a view, but I want to show the images in the view in a Lightbox slideshow instead of downloading them ● What we need to do to implement: ▬ Create a new javascript file for the new code ▬ Load newer version of Dojo along side the version used by core Lotus Quickr ▬ Code to override the default Lotus Quickr link generator code ▬ Code to determine if the link is to a thumbnail and add the image to our slideshow ▬ Code to change the link to open the slideshow instead of opening the image ▬ Load the new javascript file into the existing javascript extension file 114 ●
  • 115. Modifying the default template -Add a slideshow of images to the view from the thumbnails ● This is what happens currently when you click on the download link ● We want it to show in a Dojo1.3.2 slideshow lightbox instead 115
  • 116. Modifying the default template -Add a slideshow of images to the view from the thumbnails ● Developers frequently request if they can use a newer version of Dojo instead of the one used by core Lotus Quickr ● Unfortunately, Dojo 0.4.3 is still required to load for core Lotus Quickr functionality ● However, if you wish to leverage some functionality in a newer version of Dojo, it is possible to load it concurrently with the existing version of Dojo ● Domino 8.5.1 ships with Dojo1.3.2 already installed. We can load that along side the older Dojo 0.4.3 to get the functionality we need ● *NOTE: You can only load multiple concurrent Dojo frameworks if at least one of them is Dojo 1.1 or later 116 ●
  • 117. Modifying the default template -Add a slideshow of images to the view from the thumbnails ● Create a new file called “Quickr81_ext_slideshow.js” and put it in the scripts directory ● This file will contain all the changes necessary for this customization and will be loaded in the Quickr81_ext.js 117
  • 118. Modifying the default template -Add a slideshow of images to the view from the thumbnails ● Create a new object called Quickr_SlideshowUtil. This object will encapsulate all of our functions ● Dojo requires a variable names djConfig defined to configure how it should be loaded. It was already defined for Dojo 0.4.3 loading ● We need to save this variable definition into a different variable name in case some other code is dependant on it var Quickr_SlideshowUtil = { main: function() { window.djConfig_043 = window.djConfig; 118 ...
  • 119. Modifying the default template -Add a slideshow of images to the view from the thumbnails ● In order to load another version of Dojo, we need to redefine the djConfig object and change the baseUrl property to point to the location of the newer version of dojo ● Domino 8.5.1 already has Dojo 1.3.2 installed, we'll just use that 119 ... main: function() { window.djConfig_043 = window.djConfig; window.djConfig = { parseOnLoad: true, isDebug: true, baseUrl: "/domjs/dojo-1.3.2/dojo/", scopeMap: [ ["dojo", "dojo132"], ["dijit", "dijit132"], ["dojox", "dojox132"] ] }; ...
  • 120. Modifying the default template -Add a slideshow of images to the view from the thumbnails ● We also need to change the scopeMap property to rename the Dojo framework objects. This will allow us to differentiate between calling the old Dojo framework and the new one ● For this customization, we'll append on “132” into the respective names 120 ... main: function() { window.djConfig_043 = window.djConfig; window.djConfig = { parseOnLoad: true, isDebug: true, baseUrl: "/domjs/dojo-1.3.2/dojo/", scopeMap: [ ["dojo", "dojo132"], ["dijit", "dijit132"], ["dojox", "dojox132"] ] }; ...
  • 121. Modifying the default template -Add a slideshow of images to the view from the thumbnails ● After we have completed redefining the djConfig object, we can load the Dojo 1.3.2 framework using the Lotus Quickr loadSupplementalScript method 121 ... main: function() { window.djConfig_043 = window.djConfig; window.djConfig = { parseOnLoad: true, isDebug: true, baseUrl: "/domjs/dojo-1.3.2/dojo/", scopeMap: [ ["dojo", "dojo132"], ["dijit", "dijit132"], ["dojox", "dojox132"] ] }; Lotus QuickrGeneralUtil.loadSupplementalScript(window.djConfig.baseUrl + "/dojo.js"); ...
  • 122. Modifying the default template -Add a slideshow of images to the view from the thumbnails ● This new extension is used with the thumbnails extension previously shown ● Again using the Lotus Quickr loadSupplementalScript, make sure this extension is loaded before proceeding 122 ... QuickrGeneralUtil.loadSupplementalScript(window.djConfig.baseUrl + "/dojo.js"); if (typeof Quickr_ThumbnailUtil == "undefined") { QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_thumbnails.js"); } ...
  • 123. Modifying the default template -Add a slideshow of images to the view from the thumbnails ● Now that we've loaded the concurrent version of Dojo, restore the original djConfig variable in case some other code is dependant on it ● The Dojo1.3.2 Lightbox widget requires additional styles be loaded. We need to create the link element and point it to the Lightbox css file 123 ... if (typeof Quickr_ThumbnailUtil == "undefined") { QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_thumbnails.js"); } dojo.addOnLoad(function(){ window.djConfig = window.djConfig_043; var skinCss = document.createElement("link"); skinCss.rel = ("stylesheet"); skinCss.type = ("text/css"); skinCss.href = ("/domjs/dojo-1.3.2/dojox/image/resources/Lightbox.css"); document.getElementsByTagName("head")[0].appendChild(skinCss); ...
  • 124. Modifying the default template -Add a slideshow of images to the view from the thumbnails ● The Lightbox widget also requires that the <body> tag have a className of tundra. So we'll find the <body> tag and append it ● We also want to do a bit of our own styling of the Lightbox, so we'll create a style element and set the border to be gray 124 ... document.getElementsByTagName("head")[0].appendChild(skinCss); document.getElementsByTagName("body")[0].className += " tundra"; var skinStyle = document.createElement("style"); skinStyle.type = ("text/css"); skinStyle.innerHTML = "#" + Quickr_SlideshowUtil._dijitName + " { border-color: #DDDDDD }"; document.getElementsByTagName("head")[0].appendChild(skinStyle); ...
  • 125. Modifying the default template -Add a slideshow of images to the view from the thumbnails ● In order to use the Lightbox widget, we need Dojo to load it ● Dojo has a require method, which loads the appropriate Dojo javascript 125 files ● However, we cannot use the standard dojo.require since that would use the Dojo 0.4.3 framework. We need to call dojo132.require from the dojo132 object we defined so that it gets loaded with the correct framework ... document.getElementsByTagName("body")[0].className += " tundra"; var skinStyle = document.createElement("style"); skinStyle.type = ("text/css"); skinStyle.innerHTML = "#" + Quickr_SlideshowUtil._dijitName + " { border-color: #DDDDDD }"; document.getElementsByTagName("head")[0].appendChild(skinStyle); dojo132.require("dojox.image.Lightbox"); ...
  • 126. Modifying the default template -Add a slideshow of images to the view from the thumbnails ● The Lotus Quickr function to get the link href is called generateAttachmentLinkHref ● We will be overriding this function with our own and call the original one as necessary 126 ... dojo132.require("dojox.image.Lightbox"); window.generateAttachmentLinkHref_lightbox = window.generateAttachmentLinkHref; window.generateAttachmentLinkHref = function(sUnid, sName) { ...
  • 127. Modifying the default template -Add a slideshow of images to the view from the thumbnails ● In our function, we will use the Quickr_ThumbnailUtil extension to see if this link is to an image file ● If it is an image, we can start adding the image to the slideshow ● 127 ... window.generateAttachmentLinkHref = function(sUnid, sName) { if (Quickr_ThumbnailUtil.isImage(sName)) { var dialog = dijit132.byId(Quickr_SlideshowUtil._dijitName); if (typeof dialog == "undefined") { dialog = new dojox132.image.LightboxDialog( { id: Quickr_SlideshowUtil._dijitName } ); dialog.startup(); } ...
  • 128. Modifying the default template -Add a slideshow of images to the view from the thumbnails ● If there is no Lightbox dialog widget defined yet, we will define it here ● Notice how we are using dijit132 and dojox132 in this code to make sure we are calling the new framework 128 ... window.generateAttachmentLinkHref = function(sUnid, sName) { if (Quickr_ThumbnailUtil.isImage(sName)) { var dialog = dijit132.byId(Quickr_SlideshowUtil._dijitName); if (typeof dialog == "undefined") { dialog = new dojox132.image.LightboxDialog( { id: Quickr_SlideshowUtil._dijitName } ); dialog.startup(); } ...
  • 129. Modifying the default template -Add a slideshow of images to the view from the thumbnails ● Now that the dialog widget is instantiated, we call the startup method to 129 load it ● Next, we'll manually build a reference to the image attachment, which will be used when we reassign the link of the thumbnail in the view ● ... var dialog = dijit132.byId(Quickr_SlideshowUtil._dijitName); if (typeof dialog == "undefined") { dialog = new dojox132.image.LightboxDialog( { id: Quickr_SlideshowUtil._dijitName } ); dialog.startup(); } var sImgSrc = QuickrGeneralUtil.getBaseUrl() + "/0/" + sUnid + "/$FILE/" + sName + "?OpenElement"; ...
  • 130. Modifying the default template -Add a slideshow of images to the view from the thumbnails ● Add the image reference to the Lightbox dialog widget. This widget requires a title, and also requires a group name be provided ● We will return a javascript link to a method that will show the Lightbox instead of the original link, which just prompted for download 130 ... var sImgSrc = QuickrGeneralUtil.getBaseUrl() + "/0/" + sUnid + "/$FILE/" + sName + "?OpenElement"; dialog.addImage( { title: sName, href: sImgSrc }, Quickr_SlideshowUtil._groupName ); return "javascript: void Quickr_SlideshowUtil.showLightbox(" + "&quot;" + sImgSrc + "&quot;, " + "&quot;" + sName + "&quot;" + ");"; ...
  • 131. Modifying the default template -Add a slideshow of images to the view from the thumbnails ● The showLightbox method will run when the user clicks on a thumbnail image in the view. It will find the Lightbox widget and display the slideshow of images in the lightbox ● Notice again how we are using dijit132 instead of dijit to get the Lightbox 131 dialog ... showLightbox: function(sImgSrc, sName) { var dialog = dijit132.byId(this._dijitName); if (dialog && dialog.show) { dialog.show( { title: sName, group: this._groupName, href: sImgSrc } ); } }, _groupName: "viewThumbNails", _dijitName: "dojox132LightboxDialog" } Quickr_SlideshowUtil.main();
  • 132. Modifying the default template -Add a slideshow of images to the view from the thumbnails ● Check to make sure the Lightbox dialog exists and the show method can be called ● If all is well, go ahead and call the show method to open the Lightbox dialog to the specified image 132 ... showLightbox: function(sImgSrc, sName) { var dialog = dijit132.byId(this._dijitName); if (dialog && dialog.show) { dialog.show( { title: sName, group: this._groupName, href: sImgSrc } ); } }, _groupName: "viewThumbNails", _dijitName: "dojox132LightboxDialog" } Quickr_SlideshowUtil.main();
  • 133. Modifying the default template -Add a slideshow of images to the view from the thumbnails ● The _groupName and _dijitName property values are defined separately from the methods 133 ... showLightbox: function(sImgSrc, sName) { var dialog = dijit132.byId(this._dijitName); if (dialog && dialog.show) { dialog.show( { title: sName, group: this._groupName, href: sImgSrc } ); } }, _groupName: "viewThumbNails", _dijitName: "dojox132LightboxDialog" } Quickr_SlideshowUtil.main();
  • 134. Modifying the default template -Add a slideshow of images to the view from the thumbnails ● Next we need to load the newly created JS file that will show the slideshow ● In the Quickr81_ext.js file, we can call the loadSupplementalScript method in the QuickrGeneralUtils object to load our new functionality //simple modification showing how to change the look/feel of the "What's New" page QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_whatsnew.js"); //let's override the logo with our own QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_newlogo.js"); //let's update the search results UI to highlight the search terms QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_searchterms.js"); //let's append context menu items in the view QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_contextmenu.js"); //let's show thumbnails QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_thumbnails.js"); //let's show a dojo 1.3.2 Lightbox slideshow QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_slideshow.js"); 134 ● ▬
  • 135. Modifying the default template -Add a slideshow of images to the view from the thumbnails ● When clicking on the image in the view, a slideshow will start ● There are previous and next buttons at the bottom to go through all of the images in the view 135 ●
  • 136. 136 Agenda ● Introduction ● Creating a custom theme for your group ● Modifying the default template ● Using performance servlet on customizations ● Q & A ● Related Sessions
  • 137. Using performance servlet on customizations ● There were many performance improvements done in Lotus Quickr 8.2 ● One of the biggest performance enhancements was the implementation of a servlet to serve the javascript and css files ● The servlet allows developers to combine multiple files into one request ● The servlet will remove all comments from the script ● The servlet will gzip the combined files if the client supports it ● The servlet caches the results on the server side so that the hit to process the request is done only once 137 ●
  • 138. Using performance servlet on customizations Using servlet with javascript files ● Using the servlet for your custom script files will reduce the total number of requests as well as the total number of bytes downloaded ● There are 6 new scripts loaded. If you're on a network with 200ms latency, it will add more than a full second to the load time //simple modification showing how to change the look/feel of the "What's New" page QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_whatsnew.js"); //let's override the logo with our own QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_newlogo.js"); //let's update the search results UI to highlight the search terms QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_searchterms.js"); //let's append context menu items in the view QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_contextmenu.js"); //let's show thumbnails QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_thumbnails.js"); //let's show a dojo 1.3.2 Lightbox slideshow QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_slideshow.js"); 138
  • 139. Using performance servlet on customizations Using servlet with javascript files ● We can combine all of our custom scripts into one call ● To utilize the servlet for your javascript files: ▬ Set the type parameter to “combinescripts” ▬ Set in the key parameter to a semicolon delimited list of the script files 139 ● QuickrGeneralUtil.loadSupplementalScript( "/servlet/QuickrSupportUtil?type=combinescripts&key=" + "/qphtml/skins/quickr81/scripts/Quickr81_ext_whatsnew.js;" + "/qphtml/skins/quickr81/scripts/Quickr81_ext_newlogo.js;" + "/qphtml/skins/quickr81/scripts/Quickr81_ext_searchterms.js;" + "/qphtml/skins/quickr81/scripts/Quickr81_ext_contextmenu.js;" + "/qphtml/skins/quickr81/scripts/Quickr81_ext_thumbnails.js;" + "/qphtml/skins/quickr81/scripts/Quickr81_ext_slideshow.js" );
  • 140. Using performance servlet on customizations Using servlet with javascript files ● Here's some info profiling the performance improvements to our customizations: ▬ Number of requests reduced from 6 to 1 ▬ Amount of data downloaded reduced from ~32kb to ~3kb 140 ●
  • 141. 141 Agenda ● Introduction ● Creating a custom theme for your group ● Modifying the default template ● Using performance servlet on customizations ● Q & A ● Related Sessions
  • 142. 142 Agenda ● Introduction ● Creating a custom theme for your group ● Modifying the default template ● Using performance servlet on customizations ● Q & A ● Related Sessions
  • 143. Related Sessions -Lotus Quickr related sessions ● AD305: Customizing IBM Lotus Quickr Using Templates and APIs (B. Rodrick & A. Goelzer) ● BP210: The Great Code Giveaway 9 - Never Gonna Let you Down (R. Novak & V. Krantz) ● BP211: IBM Lotus Quickr Development Grows Up - Now This Changes Things (T. Reimer & V. Krantz) ● BP113: “Making Quickr Scream” - Performance Strategies for a Smokin' Fast Server (J. Mahurin & W. Elsmore) 143 ●
  • 144. Related Sessions -Other related sessions ● JMP104: JavaScript, JSON, jQuery and AJAX for IBM Lotus Domino Developers (S. Good) ● AD102: Extreme Makeover – LotusScript and Java Editor Edition (D. Taieb & S. Kumar) ● WEB203: Powering Exceptional Web Experiences Using Industry Toolboxes (R. Buisan & S. Liesche) 144 ●
  • 145. Lotus knows when the 30 social software sessions are... Sunday 8:00 Lotus Connections: From Pilot to Production Dolphin Southern III(JMP205) 10:30 Getting the Most Out of Lotus Collaboration and Social Software Dolphin Southern IV-V (WEB102) 4:00 We've Got Collaboration Under Control: Lotus Quickr in Action Dolphin Southern III (JMP203) 4:00 Ten Innovative Ways to Customize the Lotus Connections Environment Swan Mockingbird (JMP204) Monday 1:00 12 Things Your Mother Never Told You About Installing Lotus Connections Dolphin Southern III (BP112) 1:00 Lotus Quickr Development Grows Up: Now This Changes Things Swan 1-2 (BP211) 2:15 Start Planning Your Migration from Lotus Domino Document Manager Swan 3-4 (BP110) 2:15 Lotus Quickr Domino 8.x Sneak Preview Swan 7-10 (ID309) 3:45 Social Collaboration Delivers Real Business Value Dolphin Northern A-E (KEY106) 5:00 Lotus Domino Quickr Domino 8.x Sneak Preview Dolphin Southern III (ID309) 5:00 Deployment and Performance Planning for Lotus Connections 2.5 Swan 3-4 (ID301) Tuesday 8:30 Getting the Most Out of Your Lotus Connections Communities Swan 3-4 (ID302) 10:00 “Making Quickr Scream”: Performance Strategies for... Swan 1-2 (BP113) 10:00 What's New with Lotus Connections Swan 5-6 (ID305) 10:00 Collaborative and Web Content Meet ECM Swan Mockingbird (ID306) 11:15 Customizing Lotus Connections Swan 5-6 (AD301) 3:00 IBM's Center for Social Software—Enterprise Health & Government Transparency Dolphin Northern A-C (INV102) 3:00 Deployment and Performance Considerations for Lotus Quickr Domino Services Swan Mockingbird (ID307) 4:15 Keep it Simple (and Open/Standard) with Lotus Quickr Content Services! Dolphin Northern A-C (AD304) Wednesday 8:30 Collaboration Without Boundaries Dolphin Southern II (INV101) 8:30 How Lotus Connections Plug-ins Empower Your Applications Dolphin Southern III (AD302) 8:30 Lotus Quickr Services for J2EE Swan 3-4 (ID308) 10:00 The Intersection of Collaboration and Enterprise Content Management Swan 1-2 (INV105) 10:00 Customizing Lotus Quickr using Templates and APIs Swan 3-4 (AD305) 11:15 Looking for the Right Document Management Alternative Swan Mockingbird (BP304) 11:15 Connecting Developers and Community with Rational Jazz and Lotus Connections Swan 1-2 (AD303) 4:15 How Top Companies are Getting “Out of the Box” with Lotus Connections 2.5 Swan 5/6 (BP301) 4:30 Putting Sparkle in your Social Applications! Customization and Branding.... SW Osprey (SHOW303) Thursday 8:30 Lotus Quickr ECM Integration Dolphin Southern II (ID310) 10:00 Selling the Value of Web 2.0/Social Software within your Organization Toucan 1 (BP305) 11:15 Keep it Simple (and Open/Standard) with Lotus Quickr Content Services! Dolphin Southern I (AD304) 11:15 The Measurement of Social Software Swan 1-2 (ID304)
  • 146. Legal Disclaimer ●© IBM Corporation 2009. All Rights Reserved. ●The information contained in this publication is provided for informational purposes only. While efforts were made to verify the completeness and accuracy of the information contained in this publication, it is provided AS IS without warranty of any kind, express or implied. In addition, this information is based on IBM’s current product plans and strategy, which are subject to change by IBM without notice. IBM shall not be responsible for any damages arising out of the use of, or otherwise related to, this publication or any other materials. Nothing contained in this publication is intended to, nor shall have the effect of, creating any warranties or representations from IBM or its suppliers or licensors, or altering the terms and conditions of the applicable license agreement governing the use of IBM software. ●References in this presentation to IBM products, programs, or services do not imply that they will be available in all countries in which IBM operates. Product release dates and/or capabilities referenced in this presentation may change at any time at IBM’s sole discretion based on market opportunities or other factors, and are not intended to be a commitment to future product or feature availability in any way. Nothing contained in these materials is intended to, nor shall have the effect of, stating or implying that any activities undertaken by you will result in any specific sales, revenue growth or other results. ● ●Performance is based on measurements and projections using standard IBM benchmarks in a controlled environment. The actual throughput or performance that any user will experience will vary depending upon many factors, including considerations such as the amount of multiprogramming in the user's job stream, the I/O configuration, the storage configuration, and the workload processed. Therefore, no assurance can be given that an individual user will achieve results similar to those stated here. ● ●IBM, the IBM logo, Lotus, Lotus Notes, Notes, Domino, Quickr, and Lotusphere are trademarks of International Business Machines Corporation in the United States, other countries, or both. ● ●Microsoft and Windows are trademarks of Microsoft Corporation in the United States, other countries, or both. ● 146 ●