Extending Quickr and building custom applications

Customer Relationship Template

Extending Quickr and Building Custom Applications (part 1)

Quickr Domino Master Class

Agenda

Quickr Domino Customization Overview and Basic Customization

Quickr Domino Forms Customization

Quickr Domino Theme Customization

Quickr Domino Customization with PlaceBot

Quickr Domino Template Customization

Customization Example and Demo

Q&A

Technical Users

Developers

Business Users

little or no technical skills but lots of domain knowledge

some technical skills in things like visual basic, javascript, html and some domain knowledge

deep technical skills in Java, C++, C#, .net. usually little domain knowledge

workerworkeruserswoman2workerwoman1woman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman1users

Technical Users

Developers

Business Users

Logo and theme selection

Simple, custom forms with workflow

Creation of Place templates

Custom Themes

Agents and PlaceBots

Event Hooks

Rest Interfaces

Quickplace Object Model

Full access to Domino programming model

workerworkeruserswoman2workerwoman1woman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman2workerwoman1woman1users

Quickr Domino Customization Overview and Basic Customization (1)

What can you customize in Lotus Quickr

Change existing place objects or create new place objects with Lotus Notes and Domino Designer

Browser-based customization including Form, logo.

Customize the look and layout of places to make them fit your enterprise.

Perform a wide variety of actions on places using XML to access the Lotus Quickr Java API.

Hook Quickr Commands with customized logic written in C or C++.

Automate certain tasks in places by writing agents, called PlaceBots, which run in places.

Use an existing place as a template, called a PlaceType, with which you can create new places containing the same characteristics and customizations.

Customize with Quickr remote services API (SOAP/REST)


Lotus Quickr Architecture Overview

Quickr uses the Domino data structures and is implemented using core Domino technologies. See the relations between Quickr objects and Domino objects below:


Lotus Quickr Directory Structure:

\data\LotusQuickr\AreaTypes : Templates for places and rooms

\data\LotusQuickr\lotusquickr : Administration place files

\data\LotusQuickr\ : Contains the files for a certain place

The place database (main.nsf)- The place database is the parent database in any place. All other databases in the place are children of the place database.

The Members Directory database (Contacts1.nsf) - Each place has a Members Directory database.

A room database (PagelibraryXXX.nsf)- A room database structures the contents of a particular room in a place. It is optional for places that have sub-room.

\data\domino\html\qphtml : Contains CSS, Images and Javascript for theme support


Basic Customization:


Place logo:


Graphics Server:

Quickr includes a graphics engine that can be used to generate many graphics effects on text and images on the fly through the use of URL commands.

Numerous URL parameters for flexibility

Its a very powerful feature which allows you to create advanced graphic images

Images are created using a URL syntax consisting of the ?GetImage call together with different parameters.

Example:

Agenda







Q&A

Quickr Domino Forms Customization (1)

Form Basics

Forms consist of:

Input fields

Workflow

Metadata

Forms are used for collecting data from users.

All custom forms will be displayed in document create list.

Three Form types:

Simple Form

Microsoft Office Form

Imported HTML Form


Simple Form.

Add standard Quickr fields to this form such as plain or rich text, attachments, date popup, task information, etc.

Assign a workflow to this form.

Enable/disable version control in this form.

Choose publish folder


Simple Form. (Cont.)


Microsoft Office Form.

Use a Microsoft Word, Excel, or PowerPoint document as a template for new content.


Imported HTML Form.

Create a form using your own HTML.

You can use all HTML form elements, such as Input, Textarea, Checkbox, Radio Button and so on.

Two Quickr controls:

Two Javascript callback functions:

QDK_HTMLForm_OnLoadHandlerCallback

QDK_HTMLForm_OnSubmitHandlerCallback


Imported HTML Form. (Cont.)

Agenda







Q&A

Quickr Domino Theme Customization (1)

Quickr Theme Basics

A Quickr Theme controls the look and the layout of a Quickr, its fonts and background colors; how an element looks when it is selected; where the navigational controls appear; and so on.

Themes are collections of HTML, JavaScript, image and CSS files that collectively define the look, feel, and sometimes functionality of a Quickr

Files are stored in main.nsf as Skin Groups


Page Structure of the Theme


What makes up a custom theme?


MyPlaceslotusFooterTOCToolsDragAndDropPage ContentPathpageTitlefolder navigatorpageNavBarSerachActionsComponents in a List Folder layout


New Features of the Quickr 8.1 Theme

Derived from new, cross-product Web client design, that will eventually be common to most IBM Lotus Web clients, like IBM Lotus Connections.

Makes use of Web services, REST APIs, Dojo widgets and AJAX techniques for greater responsiveness.

In listfolder.htm specifically.

New Member Management UI for place managers & owners

First steps toward client side localization (CSS and strings)

Need to enable Java servlet support on Domino server.

Default standard and main place themes may be modified and extended on the server

Support for JavaScript extensions

Full 8.1 user experience available only in the Quickr theme


Files Comprising the Quickr 8.1 Theme


Change the branding:

The name of the standard logo file is logo.gif, which is located in qphtml/skins/common/images

Two ways to change the branding:

Just replace that file with your own

In each of the five layout HTML files, replace the line below:

with this:


Best Practices for Quickr 8.1 Theme Customization

Approach #1: Create a custom theme

Steps:

Obtain the five 8.1 theme HTML files from the server.

If custom CSS is needed, put it in stylesheet.css, upload it, and add one line below to all HTML files:

If custom JavaScript is needed, put it in Quickr81Custom.js, put that file in the same directory as your HTML files, and add the following lines to all of them:

Upload the five HTML files via the Custom Themes UI using IE with Active X

Advantages:

The customized place can be used as the basis for a template (place type).

Any place manager/owner can do this; no access to server's file system needed.

Done completely from the client machine, all files uploaded via Web UI.

Disadvantages:

Customizations affect only the place thats changed.

Universal customizations (e.g., all places having the company look) require the Quickr admin to enforce creation of places from approved template(s) only.


Best Practices for Quickr 8.1 Theme Customization (Cont.)

Approach #2: Modify and extend the standard theme on the server

Requires solid JavaScript and/or CSS skills.

Use Quickr81_ext.js to do any or all of the following:

Replace the default style sheet

Load additional style sheet(s)

Extend or modify the behavior of dynamic elements (e.g., menus)

Add elements to, manipulate, or remove elements from the page

Advantages:

Customizations will be applied to all places regardless of creation time.

This method can also be used to customize the Main (a.k.a. My Places) place!

Disadvantages:

Global customizations may not be acceptable in all places.

May be useful only when changes to the page layout HTML are not needed (because this approach does not affect the HTML files).


General Tips and Precautions for Quickr 8.1 Theme Customization

The Quickr 8.1 theme is different from older themes, using updated technologies and an updated code base to deliver an enhanced user experience..

Quickr81_ext.js is the JavaScript extension entrance, you can add your code to manipulate all page elements here. It does not exist by default, you need to create one under qphtml/skins/quickr81/scripts.

Do not recommend customizing Quickr81.css and Quickr81.js directly, because it will affect all places on the server, and can cause problems after upgrade

Agenda







Q&A

Quickr Domino Customization with PlaceBot (1)

A PlaceBot is a Domino agent, written either in Java or LotusScript, that automates a task.

Using a PlaceBot, you can access, process, and manage the data in a Place.

You can create a PlaceBot that runs when a Form is submitted, or on a scheduled basis. You can also run a PlaceBot manually.

Scheduled

Monthly, Weekly, Daily or Minutes Interval

Act on all docs or new/modified docs

Optionally act on docs in specific folder

Optionally specify start/end dates, enable/disable

Run with the rights of the Quickr Manager.

Form

Runs when page based on system or custom forms is published

Processed by the Web Server task

Run with the rights of the current user.


Development is similar to Domino agent development.

Need to be familiar with Quickr elements and fields

Server does compilation and notifies of compilation errors

Agent design doc can be inspected with Designer

Quickr may be rendered inoperable by a badly coded PlaceBot.

Form PlaceBots do run in offline, but scheduled PlaceBots do not run in offline

Quickr Admin controls whether PlaceBots are enabled


Java PlaceBots

Accept files of type .java, .class, .jar

A Java PlaceBot file must contain a class that extends the Domino Java agent class AgentBase.

The entry point to the functional code must be public void NotesMain().

LotusScript PlaceBots

Creating PlaceBots using LotusScript is essentially the same as writing an agent for a Domino application.

Accept single file of type .lss


Quickr Admin controls whether PlaceBots are enabled

Affects all Quickr places on server

Control is in Server Settings - Other Options, its enabled by default


PlaceBot Log

The log displays information from the last time the PlaceBot ran and any statements you may have logged from your PlaceBot.

May be used as a debugging tool.

Useful to see when a PlaceBot last ran.

Performance considerations

Scheduled PlaceBots

Stay away from short intervals

Form PlaceBots

Use conservatively as compiled code have to be loaded/verified each time

Agenda







Q&A

Quickr Domino Template Customization (1)

Template are blueprints to create Lotus Quickr places from and are like Domino templates. Useful places can be enabled to serve as models for new places.

There are two steps to make a place available as a Template:

Place owner creates a place and allows it to be a template with options shown below

Lotus Quickr administrator creates the template based on the previous place

Note New places are created from templates and cant be switched to different template.




All template files will be placed into \data\LotusQuickr\AreaTypes

SNAPPS is the official IBM Design Partner for Lotus Quickr. You can get FREE templates from SNAPPS: http://www.snapps.com/

QActivities: Activities Integration, Web 2.0 Theme

QAnnounce: Corporate Communications Management

QContacts: Contact Management

QProject: Project Management

QIdeas: Ideas and Innovation

QIssues: Issues Escalation, Workflow and Management

QMeeting: Meeting and Agenda Management

QPhotos: Image Repository

QPresent: Collaborative Presentation Development

QSurvey: Dynamic Surveys

QSite: All-In-One, plus a Blog and Wiki

Note Look at SNAPPS templates as learning examples and starting points not recommended for production.

Agenda






Customization Example Customer Relationship Template

Q&A

Customization Example Customer Relationship Template

Reference

Lotus Quickr Wiki

http://www-10.lotus.com/ldd/lqwiki.nsf

Lotus Quickr 8.1 Information Center

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

Customizing Quickplace Redbook

http://www.redbooks.ibm.com/redbooks/pdfs/sg246000.pdf

White Paper on Lotus Quickr 8.1 Theme Customization

http://www.ibm.com/developerworks/lotus/documentation/quickr/d-ls-quickrthemes

Lotus Quickr Forum

http://www-10.lotus.com/ldd/quickplace.nsf

Quickr ObjectDomino ObjectDescription

Place .nsf files in a File system directoryOrganizes pages in rooms and folders.

Place Type A collection of database (.nsf) or Notes template (.ntf) files derived from a parent place.The structure and design used to create a particular type of place. For example, the default place is Main.nsf, which is created from the MeetingRoom.ntf template. MeetingRoom.ntf is a PlaceType.

Room Notes database (.nsf)A collection of pages with its own security and authentication protection.

Folder Domino folder or viewAn organizing structure for collecting and displaying related pages in a site.

Page Domino Form + Subform + data noteThe basic vehicle for content. You can create content using the Lotus Quickr editor or import content from an external source.

Member Domino data noteA member note contains information about a team member of a place.

Form Data note of type "h_Form"Manages the display of data notes. A form can contain fields for containing data and employ scripts to process and compute data.

Field Data note of type "h_Field"Allow for user input of data into data notes.

PlaceBot Domino agent Can be written I Java or LotusScript. Run on schedule basis or on form events

lotusFrameTop level container

lotusBannerBranding & global links

lotusTitleBarApplication links & search

lotusPlaceBarPlace name (link)

lotusMainPage columns

lotusColLeftMenu (TOC), filters, etc.

lotusContentMain content

lotusFooterHelper links

Files Comprising a Theme

Layout FilesTypePurpose

Page ReadHTMLDefines the appearance of a page in read mode.

Page EditHTMLDefines the appearance of a page in edit mode or create mode.

List FolderHTMLDefines the appearance of folders of type list, as well as the Members, Calendar and Tasks pages.

Headline FolderHTMLDefines the appearance of folders of type headline.

Slideshow FolderHTMLDefines the appearance of folders of type slideshow.

StylesheetcssDefines styles such as fonts and colors for all layouts in legacy themes only this file is empty in the 8.1 theme.

Gallery ImageJPEG or GIFDefines the image icon to represent the theme when viewed in the theme selection scene.

ImagesJPEG or GIFImages used throughout the layouts.

JavascriptjsJavascript support for theme (8.1 only)

FileLocation relative to Domino html pathDescription

Page.htmqphtml/skins/quickr81The basic theme layout, used when viewing pages and documents, etc. The other HTML files are variants of this file.

Edit.htmqphtml/skins/quickr81Basically a simplified version of Page.htm, used for page layout when editing something.

Listfolder.htmqphtml/skins/quickr81Column number of value to sort by

Headlines.htmqphtml/skins/quickr81Page layout of Headlines folders. Uses the HeadlinesFolder skin component to provide a tabbed interface to pages.

Slideshow.htmqphtml/skins/quickr81Page layout of Slide Show folder. Similar to Headlines.htm but no tabbed interface; uses paging controls only

Stylesheet.cssqphtml/skins/quickr81Unused, but available for use in custom themes

Quickr81.cssqphtml/skins/quickr81/nls/enTheme-specific, localized style sheet

Quickr81Strings.jsqphtml/skins/quickr81/nls/enTheme-specific, localized strings

Quickr81.jsQuickr81_ext.jsqphtml/skins/quickr81/scriptsTheme-specific JavaScript support (Quickr81_ext.js is optional)

*.gif, *.pngqphtml/skins/quickr81/imagesTheme-specific image files

2009 IBM Corporation

IBM Software Group | Lotus software Quickr Domino Master Class 2009

Extending Quickr and building custom applications

Technology

Transcript of Extending Quickr and building custom applications