Customize Styles in IBM Content Navigator

Its a major issue we face desktop wide styles within content navigator. We need to change the labels and Font Color of the Read only fields based on customer requirement and  I was looking at the better way to achieve without changing step processor files. Our consultant  Anand Ayer guide us  to achieve it .Appreciate him a lot.

The Style Sheet plugin enable to add customization specific to Theme. Following is the way to achieve it .


In here we have to Create a new Plugin with  stylesheet.css file.

In the Style Class  you can define  Required custom style using the theme ID as a prefix for the default css apply.

For an example the default style for text areas will be as fallows.

.dijitSelect input, .dijitTextBox input {
padding: 1px 1px 2px;

In order to change default style , we need to add the prefix of the theme  to default plugin and add to the custom style sheet like below .

.CustomTheme .dijitSelect input, .dijitTextBox input {
padding: 1px 1px 2px;

Integrate Search Templates within Workflow

only initial attachment already know there can be many  documents we uploaded to Content Engine but we can attachment while workflow intonation  to display within the workflow.



However We can attach any other document to workflow ,by using search template and display it in the  workflow using component.


First We need to Create the Search Object from WorkPlaceXT. Advanced Tools >> Search Designer Search Template Design

You can see the search from all search in Object Store as well as the Folder it saved.

test Serch working

Locate the saved Object from FEM and go to properties.


Go to Content Elements >> and Select UIContent.xml >> View and identify the item ID’s of Search Parameters . This is identified by the XMl with Were clause which indicated like below.Here Item ID’s is 7.

content Eliments

<eq><whereprop editproperty=”editable” itemid=”7″ name=”CaseID” objecttype=”document” symname=”CaseID”><propdesc datatype=”typestring” haschoices=”false” hasmarkings=”false” symname=”CaseID”/></whereprop><literal/></eq></where>



Go to the Workflow you have Created.In Workflow porpoises sections, Go to attachments and  define the the crated object.


Create a CE Operation object and select “SearchForMany” operation and  provide following parameters.


object type : “document”

itemIDs : “7”  << value taken from where in UI.xml

Values : “<Workflow Propriety Name>”  this will give the dynamic value for the property

return_value :  the attachments returned will be taken to here. This can be used within the Workflow as a separate attachment to display returned attachments.

Transfer Data Within the Step Processor UI’s

I found it difficult to Set a CaseID in Step Processor to the Document Add UI.  Because Client  required to set that value when adding a document .I had to put enormous effort  like searching  clinetContext Javascript array.However using Property editor I able to achieve it .Here are the technical steps followed .


I have created property editor in the to get the CaseID value  which trigger @ workitem properties  response filter

—————————————————————-java file

String value = criteriaObject.get(“value”).toString();
System.out.println(“CaseID value :: ” + value);
criteriaObject.put(“propertyEditor”, “filterPluginDojo/eduPropertyEditorSetCaseID”);

————————————————————– js file

postCreate: function() {
// Remove the base class from the domNode
domClass.remove(this.domNode, this.baseClass);
domClass.add(this.domNode, “eduPropertyEditorSetCaseID”);

this.logInfo(“Post Create edupropeditor”,this.value);
this.logInfo(“Post Create edupropeditor Case ID”,this.values[0]);
window.caseid=this.values[0]; // get the case Id to the window property



The other property editor will be fired @ the document openclass event  response filter .At the button click event the widow object value will be assessed and set the value to CaseiD property.

—————————————————————-java file

String templateName = request.getParameter(“template_name”);
System.out.println(“templateName” + templateName);

JSONArray properties = (JSONArray)jsonResponse.get(“criterias”);
for (int i = 0; i < properties.size(); i++)
JSONObject jsonPropDef = (JSONObject)properties.get(i);
String name = (String)jsonPropDef.get(“name”);
System.out.println(“templateName CaseID prpoerty” + name);
if ((name != null) && (name.equals(“CaseID”)))
jsonPropDef.put(“propertyEditor”, “filterPluginDojo/eduPropertyEditorCaseID”);

————————————————————– js file

_buttonClick: function(evt) {
this.logInfo(“Event log 2”,window.caseid);
this.set(“value”, window.caseid);

Navigator Assign Item for Particular User

Content Navigator Allows for easy Popup window to user Pickup and Assign particular case to a User Personal In Basket.Within the Workflow you have to define .

The Work Queue (CFVG ) will make available to visible @ particulate step by making it to Selected Parameters .The subsequent Step make Personal Queue with CFVG.



Within Navigator  Work Queue (CFVG ) will be displayed as follows and after submitting in that step,it will go to personal in basket .

Add User To Queue

Content Navigator ECM user Object Email

According to the reference SelectUserGroupDialog Widget Use the ecm.model.User Which has the email Attribute @ class level.However When it come to Content Foundation ,The Email will not able to retrieve to Navigator UI level ,Although it is correctly configured with Active Directory.



We have Discuss the issue in DeveloperWorks and there is solution to develop the customization using response filter.

Response Filter Utilise following  Services :   /p8/getDirectories,/p8/findUsers,/p8/findGroups

The special program has written to communicate with AD using LDAP connection and retrieve the email by passing the username.Retrieved Email  will be in added to json response .

String emailAdd = getUserEmail(displayName,ldapContext);
jsonPropDef.put(“emailAddress”, emailAdd);

Just adding to response will not display the email in the UI tool tip .After a significant effort we able to display it as above using fallowing steps.

SelectUserGroupDialog , _createRendering method has overided with a custom code . The tooltip section having the custom code indicated .


_createRendering: function(repository) {


this._selector = new UserGroupSelector({

queryMode: “all”,
selectionMode: “extended”,
_showTooltip: function(event, grid) {
var item = grid.getItem(event.rowIndex);
if (item) {
var toolTip = [];

” + idxHtml.escapeHTML(this._messages.display_name) + “ “);
toolTip.push(has(“dojo-bidi”) ? this.enforceTextDirWithUcc(null, idxHtml.escapeHTML(item.displayName)) : idxHtml.escapeHTML(item.displayName));


” + idxHtml.escapeHTML( + “ “);
toolTip.push(has(“dojo-bidi”) ? this.enforceTextDirWithUcc(null, idxHtml.escapeHTML( : idxHtml.escapeHTML(;


” + idxHtml.escapeHTML(this._messages.shortName) + “ “);
toolTip.push(has(“dojo-bidi”) ? this.enforceTextDirWithUcc(null, idxHtml.escapeHTML(item.shortName)) : idxHtml.escapeHTML(item.shortName));


“+idxHtml.escapeHTML(“emailAddress : “)+”“);

toolTip.push(has(“dojo-bidi”) ? this.enforceTextDirWithUcc(null, idxHtml.escapeHTML(item.emailAddress)) : idxHtml.escapeHTML(item.emailAddress));

“);“”), event.cellNode, [
], !this.isLeftToRight(), this.textDir);//38360 toolTip.push(has(“dojo-bidi”) ? this.enforceTextDirWithUcc(null, idxHtml.escapeHTML(item.displayName)) : idxHtml.escapeHTML(item.displayName));









Change Document Property to Text Area

It is common that the user requirement where changing some of the document fields to text areas,, I understand such still some time i could find successful way ,, With the help of friend and Sample plugin We achieve it easily as follows.

Thanks  goes to  :



You can retrieve  the sample plugin referring to following codes. Upload it  following the same procedure you followed to other plugin

Go the FEM or ACCE and locate the  property template you need to make it as Test area .Change the value of Maximum String Length to 500.After cache clearing  the text area will get appeared .

Get The Process Item Value (WorkAround)


get feild value  content navigator

In order to do adynamic manipulation We have to get the value of the process fields in FileNet  within content navigator .

content navigator_widget id

The Widget ID generated by navigator is dynamic or random  one for each Control.By inspecting Element in Firebug you can detect it .

However by inheriting the CommenPropetiesPane,We can override the way  Widget ID generated and give custom ID which can used to retrieve the value in JavaScript.content navigator_dynanmic widget id


Within CommenPropetiesPane.js   you can fine the following part ,,, The content in Bold Will give the custom ID for ProductSubType Process Field. Since the Symbolic Name for Process Field is common IT will used to identify the field.

// If no value is assigned, assign the empty value.
// If the value is undefined or null…
if (attrValues == null) {
attrValues = [];
} else {
// The attribute value must be an array.
// Both array tests are needed because instanceof Array does not recognize arrays created under a different window.
if (!((attrValues instanceof Array) || (!attrValues.propertyIsEnumerable(‘length’) && (typeof attrValues === ‘object’) && (typeof attrValues.length === ‘number’)))) {
attrValues = [



Thereafter  kwArgs section give that custom ID (widgetId) to control as fallows.

var kwArgs = {

id: widgetId,
dataType: attrDataType,
dataFormat: attrDataFormat,
readOnly: readOnly,
values: attrValues,
invalidMessage: attributeDefinition.formatDescription && lang.replace(this._messages.property_invalid_with_format, [

You can use the dojo.byId(‘ProductSubType’).value; for retrive the value.

Debug the Tabs in Content Navigator

We have discussed how to add custom tabs in Content Navigator in the following article.

The URL of the custom Tabs Will be Hidden ,which make difficult to debug an parmertor error.However if you have firefox with firebug,,, you can find the dynamic values of URL following below steps.

Open Firebug and redirect to DOM
Open Firebug and redirect to DOM
Go to Windows DOM and select relevant Window
Go to Windows DOM and select relevant Window



Select location section
Select location section
Find the URL
Find the URL