Extensibility of IBM Content Navigator framework with plugins that suit your needs ...

IBM Content Navigator is the goto webclient and face of various content management repositories, and thus caries a huge responsibility to meet the insatiable needs of user experience. 
ICN OOTB has rich UI modules and provides an Administrative desktop for non-developers to customize. 

Now getting onto the purpose of this post, ICN also provides a platform for developers to extend the UI by adding custom layouts, menus, actions, services, or even their own web application. 

I shall showcase 2 such cases - 

Case 1: ICN Search feature to show appropriate search operator based on the Document class property / user requirement. 

Preface:
When a Date property is selected, the default operator is "Equal"
Similarly for a String property the default operator is "Starts With" and so on ..

Lets say the Customer wants the default operator for Date to be "Between" and String property to be "Like", and finally a Property called "Plant" to be "Is Not Empty". Basically reorganizing search operators based on customer needs. 

This can be easily achieved with the extensible UI framework that ICN provides without having to break a sweat. I use the concept of requestFilter and/or responseFilter to modify the data that is being exchanged between the webclient and ICN service.

The steps along with partial code are as follows -

1. The search paramaters are displayed when a document class is selected, hence lets implement a pluginResponsFilter to extend the "/p8/openContentClass" service

...
public String[] getFilteredServices() {
     return new String[] { "/p8/openContentClass" };
}
...

      
2. The search operators are basically sent as a list of items in a JSON object to front end, so we now modify the jsonResponse that is sent back to the web client to suite our needs 

...
JSONArray properties = (JSONArray) jsonResponse.get("criterias");
for (int i = 0; i < properties.size(); i++) {
    JSONObject jsonPropDef = (JSONObject) properties.get(i);
    if (jsonPropDef.get("name").equals("DocumentTitle")) {
        // Push "Is Not Empty" operator to beginning of list if it exists
        JSONArray jsonAvailableOperators = (JSONArray) jsonPropDef.get("availableOperators");
        if (jsonAvailableOperators != null && !jsonAvailableOperators.isEmpty()) {
            int likeIndex = -1;
            if ((likeIndex = jsonAvailableOperators.indexOf("NOTNULL")) > 0) {
                jsonAvailableOperators.remove(likeIndex);
                jsonAvailableOperators.add(0, "NOTNULL");
                continue;
         }
 }
}
...

JSON Data before: "criterias":[{  "defaultOperator":"EQUAL", "name":"DocumentTitle", "availableOperators":[ "STARTSWITH", "ENDSWITH", "LIKE", "NOTLIKE", "EQUAL", "NOTEQUAL", "LESS", "LESSOREQUAL", "GREATER", "GREATEROREQUAL", "INANY", "NOTIN", "NULL",  "NOTNULL"  ] ...

JSON Data after:  "criterias":[{ "defaultOperator":"EQUAL", "name":"DocumentTitle", "availableOperators":[ "NOTNULL", "STARTSWITH", "ENDSWITH", "LIKE", "NOTLIKE", "EQUAL", "NOTEQUAL", "LESS", "LESSOREQUAL", "GREATER", "GREATEROREQUAL", "INANY", "NOTIN", "NULL"  ] ...

   
3. Well there is no step 3, just package and deploy the plugin and we are done.
UI before:

UI after:
                     

Case 2: A Customer has their own web application and would like plug-in a browse / search module like the one seen in ICN, without having to re-invent this particular wheel. 

Statutory warning: While I didn't build a production ready code, I was able to brew up some code for a POC. It may not be elegant, but served the purpose. Any better approach out there and I'm all ears. 

Customer Vision:
A form exists on a webpage with a list of parameters. A user fills up a couple of them based on which a search needs to be performed against a repository and the relevant documents needs to be populated in a ICN-Browse like UI.


High level design with code snippets:
1. Create a saved search template in ICN to be used later via dojo code. 
2. Create a section with "ecm.widget.listView.ContentList" as the data-dojo-type in the
     Customer's webpage which needs to show the list of relevant documents. 
3. Plug a search button with an onClick event. 
4. The onClick event, shall extract the list of parameters and pass it to the ICN js code 
5. The ICN js code will make a call to server code, and upon receiving the results displays it
     in the created in Step #2.

Dojo/JS/ICN Code:

 ...  
 // Plug onClick event to Button on page  
 myButton = dom.byId("ECMSearchButton");  
 on(myButton, "click", function(evt) {  
   textInput = dom.byId("workOrderNumber");  
   if (textInput.value) {  
     executeSearch(textInput.value)  
   }  
 });  
 ...  
 // Retrieve ICN Search Template  
 repository.retrieveSearchTemplates(function(searchTemplateArray) {  
   var stempArr = searchTemplateArray;  
   for (i = 0; i < searchTemplateArray.length; i++) {  
     if (searchTemplateArray[i].name == "myWorkOrderNumberSearch") {  
       mySearchTemplate = searchTemplateArray[i];  
       break;  
     }  
   }  
 }, "mySearch");  
 ...  
 // Fill Search criteria  
 for(j = 0; j < searchCrit.length; j++) {  
   if (searchCrit[j].name == "My Contract Number") {  
     searchCrit[j].value = searchParams;  
     searchCrit[j].values = [searchParams];  
     searchCrit[j].defaultValue = [searchParams];  
     break;  
   }  
 }  
 mySearchTemplate.searchCriteria = searchCrit;  
 ...  
 // Make the call to search and fill ecm.widget.listView.ContentList with results.  
 mySearchTemplate.search(function(results) {  
   contentList.setResultSet(results);  
 }); 

The advantage with this approach is you get all the functionalities of a typical ICN-Browse features like the thumbnails, properties, actions that can be done on documents like download, checkout, send link, view link and so on ...


Bye for now, looking forward to develop and share more such fun stuff ...