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

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
● Q & A

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

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

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); }

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
●
● 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 “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.

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

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

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

● 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

● 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

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

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)
●

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 ;-)

Link your htm files to your stylesheet
● You need to update all the htm files to reference your stylesheet
●
</script>

<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

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

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

Updating your theme after initial upload
● Open the Custom Theme UI
● Select your custom theme
●
22
●
●
●

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. :-)

An example – A theme with a Page Read Counter
▬ I'd like to know which content place members find interesting
▬ To get this information, I'd like a view counter on the pages.
▬ 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
▬

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

● PlaceBot can be written in LotusScript® or JavaTM
▬ Both versions provided with files for this talk
26

● 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
●
● 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);
...

● 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
●

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

Test the PlaceBot
● Open a page in your place, and get the document UNID
●
31
●
●
●
● Build URL to the PlaceBot (/agent)

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

How to find the document UNID
● Could get it from the url (location.href)
33
●
●
●
● But it might already be defined in the DOM?

● 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.

● 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;
span = document.createElement("span");
span.textContent = " times.";
35
}

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

Adding counter to page.htm – Discussion and Simple folders
...

<img src="PageCounter.js" style="display:none"/>
<script type="text/javascript" src="$FILE/PageCounter.js"></script>
...
...
37

<QuickPlaceSkinComponent name=PageStatus
prefixHTML={<div class="lotusSection">}
postfixHTML={</div>}>

<div id="PageCounter"></div>
<script>InsertPageCounter("PageCounter");</script>

<QuickPlaceSkinComponent name=authorAndModified
emptyFormat={}
delimiter={, }
prefixHTML={<div id="AuthorAndModified">}
postfixHTML={</div>}>
</div> 
...
Additions

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

Adding counter to headlines.htm – Headline folders
...
...
...
39
selectedFormat={<Item class="h-revisionSelected-text">}
Delimiter={<span class="h-revision-text"> | </span>}
EmptyFormat={}>

format={<Item class="authormod-text">}
prefixHTML={<br/><div class="authormod-text">}
postfixHTML={</div><br/>}
emptyFormat={}
delimiter={, }>
...
Additions

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

Adding counter to slideshow.htm – Slideshow folders
...
41
...
selectedFormat={<Item class="h-revisionSelected-text">}
Delimiter={<span class="h-revision-text"> | </span>}
EmptyFormat={}>

format={<Item class="authormod-text">}
prefixHTML={<br/><div class="authormod-text">}
postfixHTML={</div><br/>}
emptyFormat={}
delimiter={, }>
...
Additions

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

PageCounter
43
in action

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

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
● Q & A

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
●

● 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
●
▬

● 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
●

● 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
●
▬

● 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

default theme:
53
results
view
menu
a Dojo 1.3.2 widget
●

-Highlight the “What's New” section
▬ 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
▬ 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
●

● 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
▬

● 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
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
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

● 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");

● 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
▬

default theme:
61
results
menu
view
a Dojo 1.3.2 widget
●

-Change the default logo
▬ 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
▬ 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
●

● Create a new file called “Quickr81_ext_newlogo.js” and put it in the
scripts directory
and will be loaded in the Quickr81_ext.js
63

● 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
▬

● 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();

● Next we need to load the newly created JS file that will change the
default logo
66
●
▬
//let's override the logo with our own
QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_newlogo.js");

● 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
▬

default theme:
68
results
menu
view
a Dojo 1.3.2 widget
●

-Highlight search terms in search results
▬ When search results are returned in Lotus Quickr, the search terms used aren't
69
highlighted in the results
▬ 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
●

● Create a new file called “Quickr81_ext_searchterms.js” and put it in the
scripts directory
70

● 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
});
},
...

● 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
}
)

● 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

● 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"
];
...

● 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"
];
...

● 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;
}
}
...

● 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;
}
}
...

● Next we need to load the newly created JS file that will highlight the
search terms
78
●
▬
//let's update the search results UI to highlight the search terms
QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_searchterms.js");

● Here's the search results with the highlighted search terms
79

default theme:
80
results
menu
view
a Dojo 1.3.2 widget
●

-Add items to the document context menu
▬ 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
▬ 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
●

● Create a new file called “Quickr81_ext_contextmenu.js” and put it in the
scripts directory
82

● This is how the context menu looks originally. We want to add a few
more items to this list for our own purposes:
83

● 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;
...

● 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
main: function() {
85
window.QP_ContextMenu_write_contextmenu = window.QP_ContextMenu_write;
var menu = this;
...

● 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
...
86
resources: {
QUICKR_HOMEPAGE: "Lotus Quickr homepage",
SEARCH_IBM: "Search IBM for: {0}",
SEARCH_THISPLACE: "Search this place for: {0}"
}
}
Quickr_ContextMenuUtil.main();

● 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
...
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);
}
...

● 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"
);
...

● 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
...

● 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")
);
...

● 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"
);
...

● 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();

● 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);
},
...

● Next we need to load the newly created JS file that will add the context
menu items
94
●
▬
//let's append context menu items in the view
QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_contextmenu.js");

● This is how the context menu looks with our new link. This link search
the current place in the current window
95

default theme:
96
results
menu
view
a Dojo 1.3.2 widget
●

-Add thumbnails to pictures in a view
▬ 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
▬ 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
●

● Create a new file called “Quickr81_ext_thumbnails.js” and put it in the
scripts directory
98

● This is how the view looks originally. The download column shows the
default icon:
99

● Create a new object called Quickr_ThumbnailUtil. This object will
● 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();

● 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
...
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);
}
}
});
...

● 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
...
} else {
}
}
});
...

● 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
...
} else {
}
}
});
...

● 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;
},
...

● 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;
},
...

● 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>";
}
...

● 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
●
●
...
"" alt="" + sName + "" src="" +
"</a>";
}
...

● 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.
...
108
"" alt="" + sName + "" src="" +
"</a>";
}
...

● 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
...
109
"" alt="" + sName + "" src="" +
"</a>";
}
...

● 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
...
110
"" alt="" + sName + "" src="" +
"</a>";
}
...

● Next we need to load the newly created JS file that will render the
thumbnails
111
●
▬
//let's show thumbnails
QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_thumbnails.js");

● Here's the view with the thumbnails instead of the download icon
112

default theme:
results
menu
view
a Dojo 1.3.2 widget
113
●

-Add a slideshow of images to the view from the thumbnails
▬ 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
▬ 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
114
●

● 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

● 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
●

● Create a new file called “Quickr81_ext_slideshow.js” and put it in the
scripts directory
117

● Create a new object called Quickr_SlideshowUtil. This object will
● 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
...

● 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 = {
parseOnLoad: true,
isDebug: true,
baseUrl: "/domjs/dojo-1.3.2/dojo/",
scopeMap: [
["dojo", "dojo132"],
["dijit", "dijit132"],
["dojox", "dojox132"]
]
};
...

● 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 = {
parseOnLoad: true,
isDebug: true,
scopeMap: [
]
};
...

● 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 = {
parseOnLoad: true,
isDebug: true,
scopeMap: [
]
};
Lotus QuickrGeneralUtil.loadSupplementalScript(window.djConfig.baseUrl + "/dojo.js");
...

● 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") {
}
...

● 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") {
}
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);
...

● 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);
...

● 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");
...

● 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) {
...

● 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
...
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();
}
...

● 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
...
if (Quickr_ThumbnailUtil.isImage(sName)) {
{
}
);
dialog.startup();
}
...

● 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
●
...
{
}
);
dialog.startup();
}
var sImgSrc = QuickrGeneralUtil.getBaseUrl() +
"/0/" +
sUnid +
"/$FILE/" +
sName +
"?OpenElement";
...

● 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(" +
""" + sImgSrc + "", " +
""" + sName + """ +
");";
...

● 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();

● 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
...
dialog.show(
{
title: sName,
href: sImgSrc
}
);
}
},
}

● The _groupName and _dijitName property values are defined separately
from the methods
133
...
dialog.show(
{
title: sName,
href: sImgSrc
}
);
}
},
}

● Next we need to load the newly created JS file that will show the
slideshow
//let's show a dojo 1.3.2 Lightbox slideshow
QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_slideshow.js");
134
●
▬

● 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
● Q & A

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 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
//let's show a dojo 1.3.2 Lightbox slideshow
QuickrGeneralUtil.loadSupplementalScript("/qphtml/skins/quickr81/scripts/Quickr81_ext_slideshow.js");
138

● 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"
);

● 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
● Q & A

142
Agenda
● Introduction
● Q & A

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
●

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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

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

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

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

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