1. Quickr D om ino 8.5, the full package What's new. How to upgrade it. How to customise it. Fergal McKenna. IBM Quickr Domino SEAL.

2. References Quickr Wiki: http://www-10.lotus.com/ldd/lqwiki.nsf Wiki Customisation Articles: http://www-10.lotus.com/ldd/lqwiki.nsf/dx/Quickr_8.5_Theme_Customization__list_of_related_Wiki_articles Fergal McKenna: [email_address]

3. Agenda What's new in Quickr 8.5 Under the hood Upgrading Customisation Branding Registration of custom widgets Menus Inline previews Image views

4. What's new in Quickr 8.5

5. What's new in Quickr 8.5 Overall streamlining of the user experience New browser based rich-text editor Improved version management Lists Imported Files Preview Folder / Document ACLs Recycle Bin (for Connectors as well) Discussion forum improvements Improved performance Increase productivity and satisfaction

6. What's new in Quickr 8.5 Simplified user interface “ What's New” now available from Place Actions Accessible from anywhere in the place Enhanced Home Page/What’s New

7. What's new in Quickr 8.5 Enhancements to the core Document Library include: Simplified layout that's cleaner, more intuitive, and faster to load Streamlined document creation and editing process with fewer steps Re-designed solution means fewer calls to the server and faster response Enhanced Document Library Experience

8. What's new in Quickr 8.5 Simplified version management that's more visible and easier to use All capabilities are available via the browser and connectors Better Version Management Experience

9. What's new in Quickr 8.5 Provide users with a richer discussion forum Commonly requested features, like pinning a topic, photos, and collapsing threads Richer meta-data around topics (# of replies, etc.) See entire thread without having to switch back and forth Same commenting thread as in library Enhanced Discussion Forums

10. What's new in Quickr 8.5 CK Editor® is a common component across Lotus products Rich in functionality and offers very good fidelity Supports paste from Microsoft® Word® and Lotus® Symphony® Great support for images, links, Adobe® Flash®, etc Supports Notes document links Easy to extend and customize the editor or swap for another if desired Used everywhere there's an editor in the browser UI (library, discussions, etc.) Better browser-based rich text editor

11. What's new in Quickr 8.5 Ability to preview uploaded files via a web browser No need to install the original application Many supported document types See Lotus technote 1316521 for full list of supported file types Preview

12. What's new in Quickr 8.5 Imported Pages In Quickr Domino 8.2 these were only available via ActiveX In Quickr Domino 8.5 there is a new page type: Imported Files Original “imported pages” will be ported to Imported Files Imported Files Imported Files - Use the Keyview technology to preview the page - Are basically Uploaded files that are automatically previewed when 'viewed'

13. What's new in Quickr 8.5 Simple and intuitive component used to create, manage, and access different types of structured content Designed to be easy for end users to create their own lists AJAX, Web 2.0 user experience In-line editing of list entries Open standard CMIS interface for programmatic access to lists Lists1

14. What's new in Quickr 8.5 View designer allows selecting columns to display and setting column widths Form designer provides a selection of data types supported out-of-the-box Text, Rich Text, Date, Time, Selection, Person, etc Can also import/export content from/to spreadsheets Lists2

15. What's new in Quickr 8.5 Document ACLs are supported in both public and restricted folders They override folder ACLs They are not altered when folder ACLs change or documents are moved When selecting users for ACLs, the list of available users will be scoped down based on Place/Room/Folder access and role i.e., Only folder members shown when setting a document ACL within a restricted folder Document ACLs

16. What's new in Quickr 8.5 Allow a subset of place members to access the contents of a folder Four roles: Reader, Author, Editor, Folder Manager Others cannot see these folders Can be enabled/disabled per place or for entire server Folder ACLs

17. What's new in Quickr 8.5 Folder and Document ACLs - Summary

18. What's new in Quickr 8.5 Deleted documents are moved to a Trash folder Rooms have their own Trash folders Can be restored to original location by users Saves administrators from having to restore an entire back-up to retrieve an accidentally deleted document Trash Can (Recycle Bin)

19. Under the Hood What's new in Quickr 8.5 Under the hood Upgrading Customisation Branding Registration of custom widgets Menus Inline previews Image views

22. Under the Hood – Widgets in a page view.toc view.checkEntry misc.dateformatter people.name view.downloadlink misc.eventlink view.dynamicrowgenerator view.library actionbar.folderactionbar misc.footer menu.placeactionsmenu view.controls.itemsperpage view.controls.prevpage view.controls.nextpage

24. q_LoginReturn.nx

26. Javascript classes, implemented as dojo classes.

27. XSL style sheets (these are always associated with a Quickr widget).

28. CSS style sheets (theme-specific, plus One UI V2)

29. HTML (theme-specific)

31. Under the Hood - Relationship of Events

32. Under the Hood Server capacity increased over 90 % ! Testing Scenario: Simulated an enterprise with 10,000 active users. Simulated the data volume after one year's deployment, over 120G. Simulated users act different features, including the team collaboration along with documents, blog and wiki, and connectors users in an even mix. Testing Environment: Domino Server:IBM X3650 (7979-AC1)Server,2 Dual Core 3.0G Hz Processors Windows Server 2003 R2 64bit System Enterprise LDAP Server :IBM Tivoli Directory Server. Storage : IBM System Storage DS4700 Server Capacity Improvements

35. <qwidgets enabled=“false”/>

37. Changes will not be picked up when debugging mode is turn off

38. http://www-10.lotus.com/ldd/lqwiki.nsf/dx/notes.ini_settings_qd85 Debugging...

39. Upgrading What's new in Quickr 8.5 Under the hood Upgrading Customisation Branding Registration of custom widgets Menus Inline previews Image views

40. Verify your environment meets minimum system requirements Upgrade Lotus ® Quickr 8.5 from a Lotus ® Quickr 8.2 deployment Two approaches can be taken for Lotus ® Quickr upgrade deployment Ensure Lotus ® Domino 8.5.1FP3 or upper installed, Lotus ® Quickr requires Lotus Domino 8.5.1 Be sure to record any specific 'Locked' places http://www-01.ibm.com/support/docview.wss?uid=swg21448544 Preparation Upgrade

41. The move to Quickr 8.5.1

42. Upgrades your whole server including all 'Place' & 'PlaceTypes' Advantages: No need to provide additional hardware for new Lotus ® Quickr 8.5 server URL for server does not change, all links to 'Places' and documents work after upgrade Disadvantages: Upgrading server including 'Places' & 'PlaceTypes' will take more time During upgrade server and 'Places' are not available to users If presented with issues, 'Places' cannot revert back to old environment http://www-10.lotus.com/ldd/lqwiki.nsf/dx/Upgrading_qd85 In-place upgrade Upgrade

43. Upgrade Place one after another moving from Lotus ® Quickr 8.2 server to new Lotus ® Quickr 8.5 server then upgrade the 'Place' on new Lotus ® Quickr server Advantages: Check each 'Place' after upgrade before opening for general user access Can switch back to old 'Place' on old Lotus ® Quickr 8.2 server if any issues encountered All ' Other Places' are still accessible to users whilst upgrade in process No downtime during the upgrade process Disadvantages: Urls will be different for Places on different servers Additional hardware required to setup staging environment URL to access migrated 'Place' will have changed from old server to new Quickr server Side by side upgrade Upgrade

45. By default data upgrade will use new Lotus ® Quickr 8.5 theme

46. Once theme has been upgraded to 8.5, not reversible back to 8.2

47. Look and feel of Places will change

48. Customized themes not automatically upgraded and will retain it's prior look and feel

49. New improved performance on 8.5 theme

50. Quickr Entry What to expect... Upgrade

51. Place not listed in Place Catalog Check Place Statistics database for stats of Place Run 'FIXUP' on corrupted Places Run QPTool command 'REPAIR' on non-accessible Places What to do if..? Upgrade

53. DAOS enabled Best Practices Upgrade

54. Customisation What's new in Quickr 8.5 Under the hood Upgrading Customisation Branding Registration of custom widgets Menus Inline previews Image views

56. Place Branding Branding

57. Landing Page Branding Branding

58. Customisation What's new in Quickr 8.5 Under the hood Upgrading Customisation Branding Registration of custom widgets Menus Inline previews Image views

60. <domino install>ataominotmlphtmlidgetsesources

62. Globally replace widgets

64. e.g. Replace all Library view with a custom thumbnail view when folder is call “Photos” The Widget Registry Config Extension

66. Customisation What's new in Quickr 8.5 Under the hood Upgrading Customisation Branding Registration of custom widgets Menus Inline previews Image views

67. Widget Sample – Menu Customization Issue we are addressing: Within the folder view we may want to add, remove or disable items or submenus in the menu buttons. What we need to do to implement: Write code that customizes the menus when they are being loaded. Load the new javascript file into the existing javascript extension file -Addemoveisable menu items in folders view

68. Widget Sample - Menu Customization This is how the default menus look originally. The new items will be placed within the menu buttons. -Addemoveisable menu items in folders view

69. Widget Sample - Menu Customization Create the following new folder in the qphtmlkinsfolder: extidgetsenu This folder will hold the files which will load all the changes necessary for this customization and will be loaded in the widgetRegistryConfig_ext.js Create a file within the qphtmlidgetsenu called customMenuAction.js. -Addemoveisable menu items in folders view

70. Registering Widget Extensions The widget registry extension file allows us to define new dojo modules Register new widgets and define a condition when the widget should be actioned. This allows us to globally and locally replace widgets It's found in dataominotmlphtmlidgetsesources With Quickr 8.5 there is a new widget registry & widget registry extension file

71. WidgetRegistryConfig_ext.js In the widgetRegistryConfig_ext.js file, we can register the new Widget to load the new functionality In this case the widget will load the functionality in the folder view for all Places. { registerWidgets: [ { type: 'REGISTERMODULEPATH', name: &quot;qext.widgets&quot;, path: &quot;/qphtml/skins/qext/widgets&quot; } , { type: 'view', style: '1', use: 'qext.widgets.view.customMenuAction' } ] }

72. Widget Sample - Menu Customization Enter the code below. Code highlighted in blue will be expanded on in the following slides. - menuustomMenuAction.js dojo.provide(&quot;qext.widgets.menu.customMenuAction&quot;); dojo.require(&quot;quickr.widgets.view.defaultFolder&quot;); dojo.declare(&quot;qext.widgets.menu.customMenuAction&quot;, [quickr.widgets.view.defaultFolder], { xslSource: &quot;/qphtml/widgets/view/defaultFolder.xsl&quot;, postMixInProperties: function(){ }, _interceptNewMenu: function(){ }, _interceptActionMenu: function(){ }, getResString: function(string){ return window.q_LocaleUtils.getStringResource(string); }, renderContent:function(){ var orig = this.xslSource; this.xslSource = &quot;/qphtml/widgets/view/library.xsl&quot;; this.inherited(&quot;renderContent&quot;,arguments); this.xslSource = orig; } });

73. Widget Sample - Menu Customization postMixInProperties loads in our code before the page is loaded. If the specified event is called load our own code i.e. If “popcom.new_menu” is called load our “_interceptNewMenu” function. Load the original function by inheriting its functions. -Addemoveisable menu items in folders view - menuustomMenuAction .js ... postMixInProperties: function(){ this.subscribeEvent(this.ACTION.MENU.POPCOM.NEW_MENU, this._interceptNewMenu, this); this.subscribeEvent(this.ACTION.MENU.POPCOM.FOLDER_ACTIONS,this._interceptActionMenu,this); this.inherited(&quot;postMixInProperties&quot;,arguments); }, ...

74. For the _interceptNewMenu function enter the code given below changing the code higlighted in blue to point to the items you wish to change in the “New” menu. -Addemoveisable menu items in folders view - menuustomMenuAction.js ... _interceptNewMenu: function(){ if(typeof arguments !== &quot;undefiend&quot; && arguments !== null){ menu = arguments[0]; children = menu.getChildren(); for( i in children){ label = children[i].label; //1. Disable an item from New Menu if(label === this.getResString(&quot; FOLDER.NEW_MENU.FOLDER &quot;)){ children[i].setDisabled(true); } //2. Remove an Item from New Menu if(label === this.getResString(&quot; FOLDER.NEW_MENU.LINK &quot;)){ menu.removeChild(children[i]); } } //3. Add an item to New Menu menu.addChild(new dijit.MenuSeparator()); menu.addChild(new dijit.MenuItem({label: &quot;Download&quot;, disabled: false, onClick: function() {alert('i was clicked');}})); } }, ... Widget Sample - Menu Customization

75. For the _interceptActionMenu function enter the code given below changing the code higlighted in blue to point to the items in certain submenus you wish to change in the “More Actions” menu. -Addemoveisable menu items in folders view - menuustomMenuAction.js ... _interceptActionMenu: function(){ if(typeof arguments !== &quot;undefiend&quot; && arguments !== null){ menu = arguments[0]; children = menu.getChildren(); for( r in children){ //1. Disable and remove items from the submenu &quot;This Folder&quot; if(children[r].label === &quot; This Folder &quot;){ subMenuItems = (children[r].popup).getChildren(); for( i in subMenuItems){ label = subMenuItems[i].label; //2. Disable Item in the “This Folder” submenu if(label === this.getResString(&quot; FOLDER.ACTIONS_MENU.FOLDER.SEND_LINK &quot;)){ subMenuItems[i].setDisabled(true);} //3. Remove Item if(label === this.getResString(&quot; FOLDER.ACTIONS_MENU.FOLDER.PRINT &quot;)){ (children[r].popup).removeChild(subMenuItems[i]);}} } //4. Add item to the submenu &quot;Selected Items&quot; if(children[r].label === &quot; Selected Items &quot;){ (children[r].popup).addChild(new dijit.MenuSeparator()); (children[r].popup).addChild(new dijit.MenuItem({label: &quot;Downloader&quot;, disabled: false, onClick: function() {alert('i was clicked');}}));}} } } ... Widget Sample - Menu Customization

76. -Add/Remove/Disable menu items in folders view Under the “New” menu “Folder” has been disabled and a new item named “Download” has been added. In the “More Actions” menu a new submenu named “My SubMenu” has been added to the list. Within the existing “This Folder” submenu Folder Properties has been disabled. Widget Sample - Menu Customization

77. Customisation What's new in Quickr 8.5 Under the hood Upgrading Customisation Branding Registration of custom widgets Menus Inline previews Image views

80. In this case we do not have any specific condition for when we want our custom page to be displayed, so we simply set a “global replace” to use our custom upload in all circumstances. { type: 'GLOBALREPLACE', source: &quot;quickr.widgets.page.defaultUpload&quot;, use: &quot;qext.inlineAttachments.customUpload&quot; } Inline Attachments – Register the widgets

82. This folder will hold the files which will load all the changes necessary for this customization and will be loaded in the widgetRegistryConfig_ext.js

84. fieldingleAttachment.js – Contains code to display attached file. Found in the field folder under pageInline Attachments

86. defaultUpload.js is renamed to customUpload.js.

87. We want it to be able to do everything a normal upload page can, so we inherit the functions the same way as the defaultUpload.js file does and also add our widgets and call a new XSL file. dojo.provide(&quot;qext.inlineAttachments.customUpload&quot;); dojo.require(&quot;quickr.widgets.page.defaultModalPage&quot;); dojo.require(&quot;qext.inlineAttachments.imageAttachment&quot;); dojo.require(&quot;qext.inlineAttachments.defaultAttachment&quot;); dojo.require(&quot;qext.inlineAttachments.flashAttachment&quot;); dojo.require(&quot;qext.inlineAttachments.pdfAttachment&quot;); dojo.declare(&quot;qext.inlineAttachments.customUpload&quot;, [quickr.widgets.page.defaultModalPage], { xslSource: &quot;/qphtml/skins/qext/inlineAttachments/customUpload.xsl&quot; } ); Inline Attachments - defaultUpload.js

89. We choose which of our JavaScript files to call based on the attachment names. <!--attachments --> <xsl:variable name=&quot;AttNames&quot; select=&quot;child::*[attribute::fid='h_AttachmentNames']&quot;/> <xsl:variable name=&quot;AttNumber&quot; select=&quot;count($AttNames)&quot;></xsl:variable> <xsl:choose> <xsl:when test=&quot;$AttNumber=1&quot;> <xsl:variable name=&quot;xslAttNames&quot;><xsl:value-of select=&quot;$AttNames&quot; /></xsl:variable> <xsl:choose> <!-- Check for images --> <xsl:when test=&quot;contains($AttNames, ' .jpg ') or contains($AttNames, ' .png ') or contains($AttNames, ' .gif ')or contains($AttNames, ' .GIF ')&quot;> <span dojoType=&quot; qext.inlineAttachments.imageAttachment &quot; state=&quot;read&quot; value=&quot;{$xslAttNames}&quot; label=&quot;PAGE.CREATE.FIELDS.ATTACHMENTS.LABEL&quot; unid=&quot;{$UNID}&quot; description=&quot;{summary}&quot; ></span> </xsl:when> <!-- Check for PDF files --> <xsl:when test=&quot;contains($AttNames, ' .pdf ')&quot;> <span dojoType=&quot; qext.inlineAttachments.pdfAttachment &quot; state=&quot;read&quot; value=&quot;{$xslAttNames}&quot; label=&quot;PAGE.CREATE.FIELDS.ATTACHMENTS.LABEL&quot; unid=&quot;{$UNID}&quot; description=&quot;{summary}&quot; ></span> </xsl:when> Inline Attachments - defaultUpload.xsl

91. singleAttachment.js is renamed to defaultAttachment.js.

92. Remove all the functions from the new defaultAttachment.js file except the renderRead function, which we will rename to defaultUpload

93. Change the definition of the file to qext instead of quickr

94. We will also add a number of functions common to all attachment types

95. When finished the file should look similar to this. dojo.provide(&quot;qext.widgets.page.defaultAttachment&quot;); dojo.declare(&quot;qext.widgets.page.defaultAttachment&quot;, null { defaultUpload(){...}, getValue(){...}, getNode(){...}, getSrc(){...} ); Inline Attachments - singleAttachment.js

97. The _isImage function checks to make sure we are dealing with an image file, and if not, calls the inherited defaultUpload function dojo.provide(&quot;qext.inlineAttachments.imageAttachment&quot;); dojo.require(&quot;quickr.widgets.page.field.singleAttachment&quot;); dojo.require(&quot;qext.inlineAttachments.defaultAttachment&quot;); dojo.declare(&quot;qext.inlineAttachments.imageAttachment&quot;, [quickr.widgets.page.field.singleAttachment, qext.inlineAttachments.defaultAttachment], { _isImage: function(filename){ ... Checks if it is an image file }, renderRead: function() { ... Displays the image and resizes if needed }, }); Inline Attachments - imageAttachment.js

99. We create a div, and then a PDF object with the appropriate URL. dojo.provide(&quot;qext.inlineAttachments.pdfAttachment&quot;); dojo.require(&quot;quickr.widgets.page.field.singleAttachment&quot;); dojo.require(&quot;qext.inlineAttachments.defaultAttachment&quot;); dojo.declare(&quot;qext.inlineAttachments.pdfAttachment&quot;, [quickr.widgets.page.field.singleAttachment, qext.inlineAttachments.defaultAttachment], { _isPdf: function(filename) { ... Checks if it is a PDF file }, renderRead: function() { ... Displays the PDF object in a div }, }); Inline Attachments - pdfAttachment.js

101. We use the <object> tag for most browsers and <embed> for IE dojo.provide(&quot;qext.inlineAttachments.flashAttachment&quot;); dojo.require(&quot;quickr.widgets.page.field.singleAttachment&quot;); dojo.require(&quot;qext.inlineAttachments.defaultAttachment&quot;); dojo.declare(&quot;qext.inlineAttachments.flashAttachment&quot;, [quickr.widgets.page.field.singleAttachment, qext.inlineAttachments.defaultAttachment], { _isFlash: function(filename) { ... Checks if it is an .swf file }, renderRead: function() { ... Displays the movie object and sets its parameters in a div }, }); Inline Attachments - flashAttachment.js

103. Create a Dojo Dijit to parse the CSV information and display it using the dojox.charting package included in the dojo distribution included in Domino. dojo.provide('qext.inlineAttachments.csvAttachment'); dojo.require('dojox.charting.widget.Legend'); dojo.declare('qext.inlineAttachments.csvAttachment', [quickr.widgets.page.field.singleAttachment, qext.inlineAttachments.defaultAttachment],{ postCreate: function(){ ... Call the graph stylesheet renderRead: function(){ ... Displays the attached file createChartNodes: function() ... Generate the node for the chart renderChart: function(chartNodes, series) ... Displays the chart makeLabels: function(series) ... Use the first row to create a legend parseCSV: function(data) ... Basic parser to access the data }); Inline Attachments - csvAttachment.js

104. Customisation What's new in Quickr 8.5 Under the hood Upgrading Customisation Branding Registration of custom widgets Menus Inline previews Image views

106. A Photo list view

108. Created a new thumbnail widget

109. Modified the xsl to restyle the content area of the view

110. Register new widgets with the registry and define conditions of use in the widgetRegistryConfig_ext.js Custom Views - Steps dojo.declare(&quot;qext.photoThumbnailGrid.photoFolder&quot;, [quickr.widgets.view.library]..... { type: 'view', condition: &quot;(object.entry.fields.h_Name == 'Photos I')&quot;, use: 'qext.photoThumbnailGrid.photoFolder' }

111. Legal Disclaimer © IBM Corporation 2011. 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. IBM, the IBM logo, Lotus, Lotus Notes, Notes, Domino, Quickr, Sametime, WebSphere, UC2, PartnerWorld and Lotusphere are trademarks of International Business Machines Corporation in the United States, other countries, or both. Unyte is a trademark of WebDialogs, Inc., in the United States, other countries, or both. Adobe, the Adobe logo, PostScript, and the PostScript logo are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States, and/or other countries. Microsoft and Windows are trademarks of Microsoft Corporation in the United States, other countries, or both.

112. Thank You.. Questions ?