IBM Software

AD103: Understanding the IBM Docs API Model: How developers can build Plugins

Connect2014

Jim Puckett, IBM Docs Product ManagerAlbert Wang, IBM Docs Lead Architect

January 26-30 Orlando, FloridaENERGIZING LIFE’S WORK

Connect2014

IBM DocsPlease NoteIBM’s statements regarding its plans, directions, and intent are subject to change or withdrawal without notice at IBM’s sole discretion.

Information regarding potential future products is intended to outline our general product direction and it should not be relied on in making a purchasing decision.

The information mentioned regarding potential future products is not a commitment, promise, or legal obligation to deliver any material, code or functionality. Information about potential future products may not be incorporated into any contract. The development, release, and timing of any future features or functionality described for our products remains at our sole discretion.

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.

Connect2014

IBM Docs API ModelAgenda

• IBM Docs Overview

• IBM Docs API Strategy

• Using IBM Docs APIs - Examples

• IBM Docs Customizations

IBM Software

IBM Docs Overview

Connect2014January 26-30 Orlando, FloridaENERGIZING LIFE’S WORK

Connect2014

IBM Social Document Strategy:When and where you need documents in context

Light-weight web editing• Public or Private cloud options• Commenting & discussions• Attention management• Author awareness• Synchronously and

asynchronously

Mobile device support• Review & comment• Light-weight editing• Online or Offline viewing• Rich presentation client

Desktop editing support• Complex business documents• Connectors to access, sync and manage Connections files

Connect2014

•Produce, revise and communicate in a more effective way

–Chat and presence experience –Assignment based workflow•Mobile Editing and Viewing – AirPlay® dual-display mode –Online co-editing from iPad® –Viewing on Androidtm•Extended Portfolio Support –API models for plugins and workflows –Connections Content Manager –ECM Content Navigator

IBM Docs NextA better way to create documents together

Connect2014

IBM Docs: Social Documents for Social BusinessGo from sharing to doingIBM Docs extends SmartCloud Engage and IBM Connections

Connect2014

•Detachtothelocaldrive•OfflineeditingwithOfficeTools•Updatemasterwithinputsfromall•Manageversioningmanually- disjointed

•ShareonConnectionsFiles•OnlineeditingwithIBMDocs•OnetruthwithIBMDocs•VersioningonConnectionsFiles•Simultaneousco-editingwithIBMDocs•Presentdirectlyfrom: –browser with IBM Docs –iPad with Connections Mobile App

Business as UsualCollaboration via email

A Social BusinessCollaboration via IBM Docs

Why IBM Docs?Create Documents together

Connect2014

IBM Software

IBM Docs API Strategy

Connect2014January 26-30 Orlando, FloridaENERGIZING LIFE’S WORK

Connect2014

•Workflow API –Add IBM Docs Editor and Viewer capabilities to third party applications “Outside In”

•Plugin API – Extend native IBM Docs Editor capabilities “Inside Out”

IBM DocsAPI Strategy

Connect2014

•IBM Docs REST APIs –/docs/api/docsvr/text create document –/docs/api/docsvr/sheet create spreadsheet –/docs/api/docsvr/pres create presentation –docs/app/doc/lcfiles/[file unid]/edit/content Edit a Connections file in IBM Docs

•Example: Create a new document and open in IBM Docs Editor –POST /docs/api/docsvr/text –Edit in IBM Docs http://xyz.com/docs/app/doc/lcfiles/db814baa-b305-4a7c-a2bf-2715d2a1655b/ edit/content

IBM DocsAPI Strategy

Connect2014

•Working with Connections files Wiki article

•Example:UploadafiletoConnectionFilesandopeninIBMDocseditor –POST /files/basic/api/library/5f5a1274-1a68-4698-97d1-aa89e5a90b4e/feed –Edit in IBM Docs http://xyz.com/docs/app/doc/lcfiles/c41e4749-c425-4d5f ba794fad1e42bcab/edit/content

–http://www.lotus.com/ldd/appdevwiki.nsf/xpDocViewer.xsp?lookupName=IBM+Connections+4.5+API+Documentation#action=openDocument&res_title=Working_with_filesic45&content=pdcontent

IBM DocsUsingDocsAPIandFilesAPI

Connect2014

Using OSGi bundle to extend IBM Docs

Docs-API

Docs Service

OSGI-INF/blueprint/blueprint.xml

META-INF/extension.xml

OSGI-INF/blueprint/blueprint.xml

Docs-BL Docs Service Extension

web-INF/web.xmlMETA-INF/extension.xml

Docs-WebDocs JS Extension

Web application bundle

EM JNDI EM

Connect2014

IBM Software

Using IBM Docs APIs: Examples

Connect2014January 26-30 Orlando, FloridaENERGIZING LIFE’S WORK

Connect2014

IBM Docs integration with third party Content Management Systems

IBM DocsWorkflow API

FileNetSharePoint®Documentum®

input file

output file

ConnectionsFiles

Journal & Audit

IBM Docs

Connect2014

FileNetExample–callingDocsEditorfromexternalapplication

IBM DocsWorkflow API

Connect2014

Extend IBM Docs to create document from external office templates

IBM DocsPlugin API

IBM Docs Server

Browser(Client Side Plugin)

User Action: New

Plugin: is invoked

Plugin: drive desired dialong, get data from the template server and collect user input

T-server: return docs URL

Plugin: redirect to new URL

Docs: import document, initial edit session

T-server: Upload generated document to Connections

1

2

35

6

7

4

Template ServerConnections Server

Connect2014

Fordocument,spreadsheet,andpresentation

Example:Fillspreadsheetautomaticallybyimportdatafromexternaldataresource.Customize document header and footer by Javascript bundle with external service.

Language TranslationDocument TemplatesLanguage StandardizationSlide Picker

IBM DocsJavascript APIs

Connect2014

•Add new JavaScript when you want to add new functionality, widgets or scripts to the product

•IBM Docs will use OSGi extension model to serve and aggregate all JavaScript files

–Expose custom JavaScript in a new Dojo module package

–Ensure that custom JavaScript loads when another module is loaded

•To extend the JavaScript used by the product

–PackageJavaScriptinanOSGibundle(JARwithspecialMANIFEST.MF)

–DeploythebundleintheIBMDocs.ear\docs.web.resources.war\WEB-INF\eclipse\plugins

•Forasampleplugin,refertoinstructionsConnectionsWiki-

IBM DocsUsing OSGi bundle for JavaScript

http://www.lotus.com/ldd/lcwiki.nsf/xpDocViewer.xsp?lookupName=IBM+Connections+4.0+documentation%23action=openDocument&res_title=Extending_JavaScript_in_IBM_Connections_ic40&content=pdcontent

Connect2014

IBM DocsExample OSGi Plugin with custom script

•JAR contents –MANIFEST.MF –plugin.xml –plus your new stuff

•Ability to tie loading your new JavaScript to when another script is loaded in Docs

plugin.xml

<plugin> <extension point="net.jazz.ajax.webBundles"> <alias value="com.ibm.docs.extension.test" /> </extension> <extension point="net.jazz.ajax.dojoModuleBinding"> <dojoModuleBinding bind="com.ibm.docs.extension.test.alert" to="com.ibm.docs.extension.plugin" /> </extension> </plugin>

Connect2014

IBM DocsAddressing your new resources via URL

com.ibm.docs.extension.test_1.0.0.jar

Connect2014

IBM DocsExampleExtensiontotheFileMenuofPresentation

dojo.provide(“com.ibm.docs.extension.test.extendPreFileMenu”);dojo.declare(“MyExampleAction”, null,{ name: “My action”, description: “My example tooltip”, execute: function() { new dijit.Dialog({ title: “My Dialog”, content: “Test content.”, style: “width: 300px” }).show(); }});

var extensionName1 = “docs/presentation/file/new”; if (!window.docs_ui_extensionsContainer) window.docs_ui_extensionsContainer={}; varc=window.docs_ui_extensionsContainer; if (!c)c=window.docs_ui_extensionsContainer={};varmyAction=newMyExampleAction(); varextensions=c[“”]; if (!extensions)extensions=c[extensionName1]=[];extensions.push(myAction);

Connect2014

IBM Software

IBM Docs Customizations

Connect2014January 26-30 Orlando, FloridaENERGIZING LIFE’S WORK

Exploring and Understanding the Customization Process

Connect2014

IBM DocsIntroduction of IBM Docs Customization

•How customizable is IBM Docs? Fullyrebrandyourdeployment!

–CSS customization –Image –And more!

Connect2014

IBM DocsIntroduction of IBM Docs Customization

•Customization to product and service configuration files –concord-config.json controls product features –Example: The level of log –Example: House keeping setting•Customization to the user interface –Fileslocatedunder<Customization_Dir>directorythatcontainsallextensions –Example: Overriding static files, such as images, CSS, HTML, JavaScript, and text files•If your change does not fall in one of these categories, you are doing a product modification that

may not work when taking updates or upgrading releases! –Example: Modifying a JAR in a service EAR file

Connect2014

IBM Docs CustomizationBest Practices and Guidelines

•Keep your customization directory under source control•Do not keep files in your customization directory that you did not change•Take advantage of comments to remember why a change is needed•Use documented, public APIs•Always back up the customization directory before a product upgrade –Rename customization directory to a temporary name –Apply a IBM Docs interim fix or fix pack –Compare updated files to customized copy and merge your changes –Change customization directory back from them temporary name –Test your changes

Connect2014

IBM Docs CustomizationRebrand your Deployment

•Customization Scenarios When Branding your Application –Overriding installed resources –Updating CSS and themes –Updating image resources –UpdatingJavascriptFiles

Connect2014

IBM Docs CustomizationOverriding installed resources via Customization directory

•Provides the ability to override CSS, JavaScript and image resources with their own content, without requiring replacement of installed content.

•Example: 1. Copy the target JS from an installed application directory. <WebSphere>/profiles/<profile>/installedApps/<cell>/IBMDocs.ear/com.ibm.concord. war.war/static/20131213-0904/js/concord/concord_pres.js.uncompressed.js 2. Copy to the customization directory and rename the JS. <Customization_Dir>/docs/static/20131213-0904/js/concord/concord_pres.js 1. Make changes to the copied JS. 2. Compress the changed JS(optional).

Connect2014

IBM Docs CustomizationUpdating Image resources through customization directory

Example: Updating the icons

Connect2014

IBM Docs CustomizationUpdating the style sheet for IBM Docs

1. Use web browser development tool to find the effective style rules and locate the according css files

2. Copy the found css files to the same sub-directory under IBM Docs customization directory.

3. Change the css rules inside the web dev tool to achieve the desired styles.

4. Overwrite the according rules of the css files with the same rule in the web dev tool.

5. Save the changes to the css files and refresh web browser to view the changed styles.

Connect2014

IBM Docs CustomizationUpdating string on IBM Docs web UI

“viewMenu_Coediting”:”Co-editing Highlights” “viewMenu_Coediting”:”Co-editing Marks”

Connect2014

IBM Docs and SmartCloud DocsBuildingouttheComprehensiveFeatureSet

Business as Usual•Onepersonedits everyone else watches•Projectmanagement stops at the document editor•Conversationsare asynchronous to the file editor•Teamsmustcoordinate files edited offline •Usersmustdownload to find what they’re looking for

Core Editing•Focusonbasicuserscenario,thenadvanced user scenario•.docxsupport,andnewDocumenteditor supported by layout engine•EnrichSpreadsheetwithmorefeatures for basic and advanced users•ContinuetorefractorPresentationeditor to build a strong foundation, adding strong shape support.•Filesexperienceimprovementondraft and version•HTMLbasedviewers

Social CollaborationReduce manual efforts to enable focus on content editing•Sectionassignments•SametimeChatandMeetingsintegration•Changetracking•Revisionmanagement

MobileCollaborative editing online or offline•PresentationEdit•TeamSyncOfflineEdit•SpreadsheetEdit

IntegrationEnable content editing in business context•CCM/ECMintegration•PublicAPItoenable3rdpartyintegrators•PublicAPItoallow3rdpartyplugins•EmbeddedviewerinConnections

Foundation•Qualityimprovements•BIDIcompliance•Increasedscalability•Webfont•NFRupdates

Social Business•Teamseditfileswithin Sametime Meetings•Light-weightworkflow ensures everyone knows their assignment•Instantlycommunicate within the file editor•TeamFileSyncmakes certain everyone has the latest version—anywhere•Usersareabletoviewfiles within Connections using embedded viewers

Connect2014

IBM DocsEngage Online

SocialBiz User Group socialbizug.orgJoin the epicenter of Notes and Collaboration user groups

Follow us on Twitter@IBMConnect and @IBMSocialBiz and @IBMDocs

LinkedIn http://bit.ly/SBCommParticipate in the IBM Social Business group on LinkedIn

Facebook https://www.facebook.com/IBMSocialBizLikeIBMSocialBusinessonFacebook

Social Business Insights blog ibm.com/blogs/socialbusinessRead and engage with our bloggers

Connect2014

IBM Docs @Connect2014Sessions

JMP303: IBM Docs Architecture, Deployment and Cloud Considerations

SHOW500:IBMDocs:FromDeploymenttoDailyUse

AD103:Understanding the IBM Docs API Model

BOF407:IBMDocs–UnderstandingHowitWorks

ID604:Reinventing Office Productivity: Desktop+Cloud+Mobile

ID601: IBM Docs – Today, Tomorrow and Beyond

ID400: What’s New and Coming in IBM Connections

ID605:Making Your Microsoft Stack Social with IBM Connections

ID401: What’s New with IBM Connections Mobile

Meet the Developers (Dolphin Asia 1 & 2)Monday 11AM - 6PMTuesday 9:30AM – 6PMWednesday 9:30am – 6pmThursday 9am – 12pm

IBM Design Studio (Dolphin Asia 4)Monday 11AM - 6PMTuesday 9:30AM – 6PMWednesday 9:30am – 6pmThursday 9am – 12pm

Sunday8:00-10:00am

Sunday10:30-12:30

Wednesday3:00-4:00

Thursday7:00-8:00

Thursday8:30-9:30

Thursday10:00-11:00

Monday1:00-2:00am

Monday5:00-6:00

Wednesday4:14-5:15

Time Topic

Related Sessions

Connect2014

IBM Docs

Questions?

Connect2014

IBM Docs

Thank You!Access Connect Online to complete your session surveys using any:•Webormobilebrowser•ConnectOnlinekioskonsite

Your Feedback is important!

Connect2014

IBM DocsAcknowledgements and DisclaimersAvailability. 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.

The workshops, sessions and materials have been prepared by IBM or the session speakers and reflect their own views. They are provided for informational purposes only, and are neither intended to, nor shall have the effect of being, legal or other guidance or advice to any participant. While efforts were made to verify the completeness and accuracy of the information contained in this presentation, it is provided AS-IS without warranty of any kind, express or implied. IBM shall not be responsible for any damages arising out of the use of, or otherwise related to, this presentation or any other materials. Nothing contained in this presentation 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.All customer examples described are presented as illustrations of how those customers have used IBM products and the results they may have achieved. Actual environmental costs and performance characteristics may vary by customer. 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.

© Copyright IBM Corporation 2014. All rights reserved.

–U.S. Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.

–IBM, the IBM logo, ibm.com, and IBM Docs are trademarks or registered trademarks of International Business Machines Corporation in the United States, other countries, or both. If these and other IBM trademarked terms are marked on their first occurrence in this information with a trademark symbol (® or ™), these symbols indicate U.S registered or common law trademarks owned by IBM at the time this information was published. Such trademarks may also be registered or common law trademarks in other countries. A current list of IBM trademarks is available on the Web at “Copyright and trademark information” at www.ibm.com/legal/copytrade.shtml

Other company, product, or service names may be trademarks or service marks of others.

Connect2014

IBM Software

Backup

Connect2014January 26-30 Orlando, FloridaENERGIZING LIFE’S WORK

Connect2014

IBM DocsCreate documents togetherIBM Docs is an innovative suite of socially enabled office productivity applications. Simple yet powerful, IBM Docs helps organizations of all sizes quickly get users collaborating more efficiently on spreadsheets, presentations and word processing documents. IBM Docs is available as an integrated, social editing application on the IBM Social Business Platform, both in the cloud and on your own premises.

IBM Docs provides casual users with a robust, easy-to-use office productivity suite they can access with a browser. It also supports more advanced users enabling them to collaboratively create, edit and review documents with team members or with customers and suppliers in the cloud.

Connect2014

IBM Docs User roles and functions

SalesSolution architects, sales, legal experts and the account manager are working on competitive proposals, able to access the latest updates anytime from anywhere.

Human ResourcesPeriodicaly update regulations, and maintain version history within shared communitiies.

ManagementSupport your team with reviews and feedbacks directly in shared documents, and quickly check the status of tasks and assignments.

MarketingWork from different locations to producenew collateral asyncronously with conversational commenting.

Product ManagementCollaborate quickly on design goals using design thinking methodologies and presentation artifacts.

SalesSellers are able to quickly leverage existing content without meetings or emails with one-click file creation from templates.

Connect2014

•CloudorOnPremisesDeployments•ExtendsIBMConnectionsandIBM SmartCloud for Social Business•Workinoneprimarydocument•Real-timeco-editing•Authorpresenceawareness•Socialcommenting&discussions•Revisionmanagement•Attentionmanagement•SupportsMicrosoft®OfficeandOpenOfficefiletypes

Designed to support SaaS offerings through IBM Commercial offerings, such as SmartCloud for Social Business as well as private cloud implementation in customers’ data centers.

Social Documents for Social Business – IBM DocsWeb-based collaborative editors for creating, sharing and collaboratively authoring word processor documents, spreadsheets and presentations.

Connect2014

IBM Docs Updating Style Sheets

1. Use web browser development tool to find the effective style rules and locate the according css files.

2. Copy the found css files to the same sub-directory under IBM Docs customization directory. e.g,

1. Change the css rules inside the web dev tool to achieve the desired styles.

2. Overwrite the according rules of the css files with the same rule in the web dev tool.

3. Save the changes to the css files and refresh web browser to view the changed styles.

<Customization_Dir>/docs\static\20131213-0904\js\dijit\themes\oneui30\oneui30.css and <Customization_Dir>/docs\static\20131213-0904\styles\css\base.css

Connect2014

IBM Docs CustomizationUpdating Image resources through customization directory

Example: Updating the icons

1. Copy common_sprite.png from the static resource directory to the Customization directory.

<Customization_Dir>/docs/static/20131213-0904/ styles/css/images/common_sprite.png

2. Edit common_sprite.png and save yourchanges;

3. Refresh web browser to show the new customized icons.

Connect2014

IBM Docs CustomizationUpdating string on IBM Docs web UI

Example: Updating the strings

1. Locate and copy the string resource file to the Customization directory. e.g,

<Customization_Dir>/docs/static/20131213-0904/js concord/nls/concord_pres_en-us.js

2. Edit concord_pres_en.js and save yourchanges;

3. Refresh web browser to show the new strings.