Best Practices & Lessons Learned from the field on EMC Documentum xCP 2.0

1 © Copyright 2013 EMC Corporation. All rights reserved.

Best Practices & Lessons Learned from the field on EMC Documentum xCP 2.0 Jim Lewonski EMC – Systems Engineer Manager Jason Adams EMC – Practice Manager, xCP



We Want to Hear Your Thoughts On This

Session!

OPTION 1:

OPTION 2:

Download the Momentum Mobile App and take the Survey

Complete the Survey sent via Email


Agenda

� Best Practices � Debugging in Designer

� Tips and Tricks


Best Practices

© Copyright 2013 EMC Corporation. All rights reserved. 5


xCP 1.x to 2.0 Designer Quickstart •  Object Modeling

–  DA and/or Composer

•  UI (Components/Forms) –  Forms Builder

•  Process –  Process Builder

•  Dashboards/Reports –  Process Builder –  Process Reporting Services –  Taskspace

•  Runtime Deployment –  Taskspace –  Composer

•  General Configuration –  Taskspace

xCP Designer Object Model

xCP Designer User Interface

xCP Designer Processes

Data Services xCP Designer

User Interface Run Application

xCP Designer Home

xCP Designer / DA Application


General Navigation


xCP 2.0 Designer Current Limitations � Unified Development Except for:

–  Work Queue –  Business Calendar –  User –  Group

� Management of Exceptions such as: –  Role Management –  Updating Endpoint values –  Updating Parameter Values –  Configuring which Object Types should be indexed


xCP 2.0 Design Approach �  Mandatory vs. Optional Solution Requirements. �  Identify Data Only, Content Only, or Hybrid Based Solution. �  Identify & Review General User Process

–  User Roles –  Processes/Workflows –  Document Sources –  Taxonomy –  Reports –  Etc…

�  Identify Solution UI Req’ts (i.e. tabs, menubars, etc..) - “Keep it simple!” �  Prototype & Phase Rollout of Solution

–  Business/Content Objects –  Pages –  Data Services


Prototype UI Layout Examples


Prototype UI Layouts - Continued


Handling Captured Documents

Content Object Business Objects

Customer Insurer Name SSN Address Etc…

… Vehicle Model Year Make Etc…

Vehicle Model Year Make Etc…

Relationships

Indexed Attributes

Insurer Name SSN Address . . . Vehicle Model Year Make Etc…

Data Service to Create/

Map Related Business Object &

Attributes

Transfer/Copy Indexed Attributes to Multiple Related Business Object


Tutorial – Concordant Insurance �  xCP 2.0 Self Paced

Tutorial v1.5

�  Introduction to xCP 2.0 Designer Tool

�  Introduction to xCP 2.0 Design Paradigm


Reliable Insurance Demo Application �  Vehicle Insurance

Application Process –  eForm Application –  Multiple Roles

▪  Agent ▪  Approver ▪  Manag

�  Application Highlights Various UI Tips & Tricks


Navigation Menu (with images)

Each menu item label is a piece of HTML code referencing: �  An image �  A link to an application page

<div>

<img style="height:32px;width=32px;vertical-align:middle" src=”[YOUR_IMAGE]" border="0"/>

<span style="font-family:verdana;white-space:normal;font-size:10px"> [YOUR_LABEL]</span>

</div>


HTML Labels with Rich Text Widget

Embedding some HTML in the rich text widget is an easy way to customize a label or a set of user instructions in the interface.


HTML in result lists Embedding some HTML in the result list widget is one of the easiest and most effective ways to customize the user interface. You can add some HTML in the “Value” property for a column, by leveraging the expression editor:


HTML in result lists – Example 1 How to include some images & formatting in the same column.


HTML in result lists – Example 1 Column in xCP Designer :

You can even use some HTML for the label of the column:

Expression for the value:


HTML in result lists – Example 2 How to include HTML directly from the value of an attribute


HTML in result lists – Example 2 The “vehicle” data model contains an attribute called “safety” which refers to a picklist.

This picklist contains the HTML code I want to use in the user interface:

In the column configuration, just specify that the Data type is HTML:


Investigative Case Management �  Dynamic Case Handling

Based on Configurable Case Templates.

�  Comprehensive Task Assignment Options.

�  Web-based Rich UI also Accessible from a Mobile Device

�  Documentation Auto Generated


State Hospital Patient Evaluations Problem �  Incomplete Paperwork �  Non-prioritized Manual

Routing �  Personnel Safety Issues

Solution �  Streamlined Admissions �  Prioritized Evaluations �  Automatic Evaluation

Documents Generation


Debugging in Designer



Debugging

� No process debugger (yet!) � Would like to bring a larger, application-level

debugger (business events, page logic, queries?)

� Don’t Panic… there are some things you can do!


Design Time Troubleshooting

� Problems tab � Logs

–  Runapp.log –  Deployment log

� Broken references

� Refactoring/renaming


Runtime troubleshooting � Browser tools

–  Use Incognito/Private Browsing to eliminate caching

�  Invocation of REST services � Logs

–  JMS –  bpm-runtime –  xCPApplication (runtime log) –  runapp.log

� Think outside the box…


These are your new best friends Browser Developer Tools

� Bundled in Chrome, IE and Opera; Firefox has a “Firebug” add-in

� Let you see each individual server call, along with inputs and outputs

� Quickly ensure that your inputs are getting passed in correctly (are your expressions on your page working right?)


Using browser development tools How to debug a stateless process

1.  Use debugging tools to ensure that inputs are being passed in correctly

2.  Use RESTful service to call it with arbitrary inputs

3.  Check log files.

4.  Run it statefully


Tips and Tricks



Pass Multi Selection to Stateless Process �  Multi selected row_ids can be

passed to a single value process variable in a concat format with ","


Pass Multi Selection to Stateless Process �  Able to split the concat inside

the process and map the result to a multi-value variable or the attachments


Open Document in Native Application �  The URL to open the document directly is:

–  http://localhost:8000/<application_name>/application/document/<r_object_id>

�  The link could look something like:

�  The onclick event would have something like: '<div class="x-btn xcp_button-cls x-box-item x-btn-default-small x-noicon x-btn-noicon x-btn-default-small-noicon" style="border-width: 0px; left: 0px; top: 0px; margin: 0px; " onclick="window.open(\'/MyApplication/application/document/' + widgets.my_results_list.selected_row.doc_object_id + '/\',\'_self\')"><span class="x-btn-inner" style="">Open Document</span></div>'

<a href = "/MyApplication/application/document/' + widgets.my_results_list.selected_row.doc_object_id + '">Open</a>


DB Endpoints & Custom Drivers �  JDBC driver: PostgreSQL, DB2, Oracle, MS SQL, & ODBC

�  Need another type of database with a different JDBC driver (such as MySQL, LDAP)

–  Download the desired JDBC driver JAR file –  Place it in <your_xCP_app>/content/modules (create the

"modules" directory if it doesn't already exist) –  Create a .javamodule file in <your_xCP_app>/Artifacts/Java

Modules (create the "Java Modules" directory if it doesn't already exist" with the following content:


DB Endpoints & Custom Drivers

–  Restart Designer and select the new JDBC driver when defining a database endpoint

<?xml version="1.0" encoding="UTF-8"?> <nsJavaModule:JavaModule xmlns:nsJavaModule="http://xcp.emc.com/javamodule" urn="urn:your_xCP_app_namespace:com.emc.xcp.artifact.javamodule.category:Artifacts/Java Modules/your_java_module_name.javamodule" categoryId="com.emc.xcp.artifact.javamodule.category" name="your_java_module_name" label="your_java_module_name" implementationClass="your_JDBC_implementation_class"> <interfaceClassNames>java.sql.Driver</interfaceClassNames> <implementationJars contentPath="content/modules/your_JDBC_driver_jar_file"/> </nsJavaModule:JavaModule>


Enabling File Upload From an iPad �  Locate the jar file xcp-core-2.0.0000.xxxx.jar in

–  C:\Users\dmadmin\.m2\repository\com\emc\xcp\xcp-core\2.0.0000.1949

�  Open the jar file with 7-Zip or similar and edit the file: \xcp-core\content\xcp\action\ImportFileAction.js

–  Comment out line 31: //return xcp.Enablement.HIDE;

�  Close the file make sure the jar is updated with the modified file.

�  Go to your application directory and delete the 'target' folder.

�  Redeploy your app and you have an Import button on an iPad. When the import dialog loads and you click on the you get the following:


Changing the Logo on the Sign In Page

� Create your logo with a size of 448 x 50 pixels �  Include your logo graphic in your applications /

Artifacts/Resources folder

� Add the this style to your themes CSS.signin-panel .signin-logo-panel .x-panel-body {

background: url("../../../../../Artifacts/Resources/Logo.png") no-repeat scroll 0 0 transparent;

margin-left: 0px; }


Changing the Logo - Continued

� What if you have a graphic that is not 448 x 50? –  Resize image to 448 px wide and modify the page layout

� Locate the signin page definition here: –  C:\xCPDesigner\Applications\<APP_NAME>\<APP_NAME>\src\main\webapp\pages

\application\application_signin.json

� Backup the file

� Edit the file, modifying the highlighted lines, to resize the boxes as needed.


Changing the Logo - Continued { "xtype": "panel", "border": false, "cls": "signin-logo-panel", "width": "100%", "height": 50 }, { "xtype": "panel", "border": false, "cls": "signin-form-panel", "width": "100%", "height": 248, "border": true, "bodyStyle": { "border-style": "none" }, "items": [ { "xtype": "form", "cls": "signin-form", width: "100%", height: 248, "defaults": {"anchor": "100%"}, "defaultType": "textfield", "monitorValid": true, "border": false, "bodyBorder": true, "bodyStyle": { "padding": "80px 30px 0px" },


Enabling HTML Support in the Viewer �  Locate the file xcp-ivf-provider-browser-2.0.0000.xxxx.jar in

the folder –  C:\Users\dmadmin\.m2\repository\com\emc\xcp\xcp-ivf-provider-browser\2.0.0000.0421

�  Edit the <supportedProviders> element in Browser.xml in the folder com\emc\xcp\config\app\ivf\providers

�  Refresh the application

<supportedFormats>html</supportedFormats> <assignedFormats>html</assignedFormats>


Add an HTML Progress Indicator

'<div style= "display:block;float:left;width:100%;height:16px;margin:0 0 2px;background:url(\'Artifacts/Resources/pb_blue.png\');"><div style= "background:url(\'Artifacts/Resources/pb_red.png\');height:16px; width:75%;text-align:right;display:block;width:'+ forex_inbound_signe_review_deal.processVariables.percent + '%;color:white;"/></div>'

�  Add images to my applications resources folder

�  Remember to set the Data type to 'HTML'


SVN in xCP 2.0 Designer �  Use file system based SVN client (e.g.

TortoiseSVN) � When collaborating with a team, get a

lock for the file when editing. Release the lock when finished editing.

�  Commit changes to multiple files at the application folder level.

� Need to revert? Use SVN Revert and refresh Designer.


Retrieving updated files from SVN SVN in xCP 2.0 Designer

� From the SVN client, select SVN Update.

�  In Designer, click Refresh to view the updated and new files.

� Remember to coordinate, coordinate, coordinate!


Importing an application into a clean build SVN in xCP 2.0 Designer

�  Method 1: –  Create an application with the same name and namespace as the one you

want to import. –  Check out the app from source control to the new Application folder.

Refresh Designer.

�  Method 2: –  Check out the application to another folder outside

the Applications folder structure. –  Import the application from Designer, not selecting

Import a copy.


STAY IN TOUCH!

emcMMTM emcDocumentum

Syncplicity emcDocSciences

emcCaptiva

EmcSoftware emc-mmtm EMC_Momentum EMC_Documentum

Syncplicity EMC_Captiva

EMC_DocSciences

go/MomentumECM go/Documentum

emc_iig

facebook.com/ youtube.com/ linkd.in/ twitter.com/ community.emc.com/ slideshare.net/

Come to the Social Media Center to play, win, learn and more.

Technology

Best Practices & Lessons Learned from the field on EMC Documentum xCP 2.0