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.
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.
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.
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>
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
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
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.
