IBM Content Navigator feature plugin creation

Hello Everyone,

Today, I am going to create a feature plugin for IBM Content Navigator.  The feature plugin contains a SQL query window where FileNet query can be written to get the documents list.

<insert ICN feature pic>

Before starting, I would recommend you to read the IBM ICN customization redbook.  So that you will get the basic knowledge on what are the uses of ICN plug-in.

https://www.redbooks.ibm.com/redbooks/pdfs/sg248055.pdf

Let's get started.

Above diagram shows what are all the classes and javascripts need to be created to create a feature.

First, we have to setup the IDE for plugin development.  For this plugin creation I use eclipse Kepler version which can be downloaded from here.

https://www.eclipse.org/downloads/packages/release/kepler/sr2

and download the zip file from here.

https://www.redbooks.ibm.com/addmat/SG248055/SG248055.zip

Follow the steps given in 3.2 chapter from the redbook.  Finally your eclipse IDE is setup for ICN plugin creation.

1. Open the eclipse and go to File --> New --> Content Navigator Plug-in

2. Provide a project name and click Next (ex: SearchFeature)

3. Enter the below details and click Finish.  NavigatorAPI.jar will be available in the FileNet installation location (ex: C:\IBM\Workflow\v18.0\ECMClient\config)

Once the new project is created in eclipse.  The project hierarchy looks something like this.

4. Open the SearchFeature project lib folder and paste the NavigatorAPI.jar file in it.

5. If JRE/JDK libraries are not present in the project, add it.  In the above image it is not available so I am adding JDK 1.8.0_281

Project files should look like this after adding all the above.

6. Open build.xml file and edit as below.

    Add the below code in classpath section

    <fileset dir="lib" >

<include name="**/*.jar" />

    </fileset>

    ex:

    <path id="classpath">

<pathelement   location="C:/Users/Administrator/keplerworkspace/ICNjars/navigatorAPI.jar" />

<pathelement location="./lib/j2ee.jar" />

<fileset dir="lib" >

<include name="**/*.jar" />

</fileset>

<pathelement location="./temp" />

</path>

    then edit the javac in compile section as below

    <javac includeantruntime="true" srcdir="src" destdir="temp" source="1.8" target="1.8" debug="true">

    ex:

    <target name="compile">

<mkdir dir="temp" />

<javac includeantruntime="true" srcdir="src" destdir="temp" source="1.8" target="1.8" debug="true">

<classpath refid="classpath" />

<include name="**/*.java" />

</javac>

</target>

    These 2 codes will make sure that the lib folder is considered for plugin jar file creation and java compiler 1.8 is being used.

Now, we need to create Feature plugin by extending com.ibm.ecm.extension.PluginFeature

7. Open the project hierarchy and right click com.ibm.ecm.searchfeature package and select IBM Content Navigator --> New Feature

8. Provide the below details for creating the Feature plugin class and click ok.

for Feature Image section, you can choose an image file which will be displayed as feature icon.  It should be 32x32 size.

Ex: 

9. Modify the QuerySearchFeature.html as below.

<div class="MainPanelClass">

    <div data-dojo-type="idx/layout/BorderContainer" data-dojo-props="gutters:true">

<div data-dojo-attach-point="searchPanel" data-dojo-type="dijit/layout/ContentPane" 

data-dojo-props="splitter:true,region:'top'" class="SearchPanelClass">

<label for="queryStringId" data-dojo-attach-point="helpText">Enter an SQL query to run below</label>

<br><br>

<div class="QueryInputPanelClass">

<input id="queryStringId" data-dojo-attach-point="queryString" data-dojo-type="dijit/form/TextBox" 

placeHolder="SELECT * FROM Document"></input>

<button data-dojo-attach-point="searchButton" data-dojo-type="dijit/form/Button" 

data-dojo-attach-event="onClick: runSearch" class="SearchButtonClass">

Search

</button>

</div>

</div>

<div data-dojo-attach-point="resultsPanel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">

<div data-dojo-attach-point="searchResults" data-dojo-type="ecm/widget/listView/ContentList">

</div>

</div>

</div>

</div>

10. Modify the SearchFeature.css as below.

.querysearchicon {

width: 32px;

height: 32px;

background: url('images/search.png') no-repeat;

}

.QueryInputPanelClass {

display: table;

}

.QueryInputPanelClass .dijitTextBox {

display: table-cell;

}

.QueryInputPanelClass .dijitButton {

display: table-cell;

width: 1px;

white-space: nowrap;

padding-left: 10px;

}

.dijitRtl .QueryInputPanelClass .dijitButton {

padding-left: 0px;

padding-right: 10px;

}

.QueryInputPanelClass .dijitTextBox .dijitInputField {

width: 100%;

}

.MainPanelClass .SearchPanelClass {

background-color: #ddd;

padding: 20px !important;

}

.MainPanelClass .QueryInputPanelClass {

width: 100%;

}

.ecm.icn .MainPanelClass .SearchPanelClass {

background-color: transparent;

height: 100px;

border-bottom: 1px dotted #cdced2;

}

Above 2 files will be useful to develop the feature page.

11. Modify the QuerySearchFeature.js file as below to include the runSearch function.

define([

"dojo/_base/declare",

"ecm/widget/layout/_LaunchBarPane",

"dojo/text!./templates/QuerySearchFeature.html"

],

function(declare,

_LaunchBarPane,

template) {

/**

* @name searchFeatureDojo.QuerySearchFeature

* @class 

* @augments ecm.widget.layout._LaunchBarPane

*/

return declare("searchFeatureDojo.QuerySearchFeature", [

_LaunchBarPane

], {

/** @lends searchFeatureDojo.QuerySearchFeature.prototype */

templateString: template,

// Set to true if widget template contains DOJO widgets.

widgetsInTemplate: true,

postCreate: function() {

this.logEntry("postCreate");

this.inherited(arguments);

console.log("postCreate function");

/**

* Add custom logic (if any) that should be necessary after the feature pane is created. For example,

* you might need to connect events to trigger the pane to update based on specific user actions.

*/

this.logExit("postCreate");

},

/**

* Optional method that sets additional parameters when the user clicks on the launch button associated with 

* this feature.

*/

setParams: function(params) {

this.logEntry("setParams", params);

if (params) {

if (!this.isLoaded && this.selected) {

this.loadContent();

//domStyle.set(this.testLabel, "display", "inline");

}

}

this.logExit("setParams");

},

/**

* Loads the content of the pane. This is a required method to insert a pane into the LaunchBarContainer.

*/

loadContent: function() {

this.logEntry("loadContent");

if (!this.isLoaded) {

/**

* Add custom load logic here. The LaunchBarContainer widget will call this method when the user

* clicks on the launch button associated with this feature.

*/

this.isLoaded = true;

this.needReset = false;

//domStyle.set(this.testLabel, "display", "inline");

}

this.logExit("loadContent");

},

/**

* Run the search

*/

runSearch: function() {

console.log("start runSearch");

},

/**

* Resets the content of this pane.

*/

reset: function() {

this.logEntry("reset");

/**

* This is an option method that allows you to force the LaunchBarContainer to reset when the user

* clicks on the launch button associated with this feature.

*/

this.needReset = false;

this.logExit("reset");

}

});

});

Now, we will deploy the plugin jar file in ICN to check how it appears.

12. Deploy feature plugin in ICN.

12a. Open build.xml --> right click --> run as --> click Ant build to generate the jar file

SearchFeature.jar will generated in the project path.  Provide the path in ICN plugin section.

12b. Go to ICN Administrator desktop and open plug-in section --> Click New Plug-in --> Provide the jar file path and click Load to load the plugin.

12c. Once plugin is added.  From the Admin desktop, open the corresponding desktop where feature plugin needs to be displayed.  Open Layout --> check QuerySearchFeature and save.

12d.  Open the corresponding desktop and select newly added QuerySearchFeature plugin.

QuerySearchFeature plugin will look like below.