Integrate third-party widgets with IBM Case Manager Client, Part 1: Develop a custom search widget

The Search widget included in the IBM® Case Manager Client is designed for case workers to search for cases based on selected property values. In Case Manager Client 5.0, the Search widget provides a basic search and an advanced search. Case workers can use the Search widget to find cases by the case ID, by date, or narrow the search based on various properties. If you have requirements that go beyond the capabilities of the search widget, then you can develop a custom search widget. Building a custom search widget requires the leveraging of interfaces provided by ICM runtime to develop the specific search function. This article describes how to create a custom Search widget and when it is appropriate to do so.

Xiao Ling Cui (cuixling@cn.ibm.com), Software Engineer, IBM

Photo of author Xiao Ling CuiXiaoLing Cui is a software engineer on the IBM Case Management development team.



Hong Dong Zhao (zhaohd@cn.ibm.com), Software Engineer, IBM

Photo of author Hong Dong ZhaoHong Dong Zhao is a software engineer in IBM China Software Development Lab (CSDL). He works on IBM Case Management development team.



Wei Wang (wangweiu@cn.ibm.com), Staff Software Engineer, IBM

Wei Wang photoWei Wang joined IBM in 2004. Currently he works on IBM Case Manager as a developer. He previously worked as a developer for FileNet.



23 June 2011

Introduction

Case Manager Client is an iWidget-based mashup application for business analysts who create and customize solution layouts. Also, Case Manager Client is an environment where case workers can collaborate and process cases. Based on IBM Dojo technology, Case Manager Client provides a widgets application with a set of spaces and pages that are configured to work together, enabling case workers to manage cases and process work items. A business analyst designs the views and in-baskets for the Case Manager Client in the Case Manager Builder. Business analysts can then use the provided spaces and pages, or they can further customize the Case Manager Client by adding additional pages or widgets.

Widgets are portable, reusable components that are used in pages to manage content and process work items. IBM Case Manager provides three default spaces and associated pages that make up the Case Manager Client application: Solution space, Step pages space and Case Pages space. The Solution space is a mashup space that case workers use for interacting with a solution. It is the main IBM Case Manager space, and contains the Work page with the In-baskets and Toolbar widgets, and the Cases page with the Case Search-related widgets. By default, the Cases page contains the widgets laid out as shown in Figure 1. The Command widget is required for each page, but is hidden from case workers.

Figure 1. Layout of Search Widget, Case List Widget in IBM Case Manager Client
Within the Cases page, the Search Widget is on the left; the Case List widget is in the center and shows the results of the search; the Case Information Widget is on the right and shows details about cases.

You use the Search widget to provide case workers with a way to search for cases based on selected properties.

The Search widget provides a basic search and an advanced search. Case workers can use the basic search to find cases by the case ID or by the date that the case was created. They can use the advanced search to find cases within a specific case type or to narrow the search based on various properties. The Search widget only collects search criteria and builds the search statement, and then provides all of the information to the Case List widget by firing an event. It is the Case List widget's responsibility to execute the search and display the search result. The Search widget is wired with the Case List widget automatically; the Search widget sends an event with required information as payload. The payload includes the searched properties definition, the summary properties definition defined in Case Builder, the query statement, and other useful information. After receiving the event, the Case List widget executes the search and displays the result.

Figure 2 shows the relationship between the Search Widget and Case List Widget in IBM Case Manager Client.

Figure 2. Widget relationship
diagram showing the relationship between Search Widget and Case List Widget in IBM Case Manager Client. The Search Widget prepares the search query to the Case List Widget through the SearchCases event. The Case List Widget executes the query and displays the results.

If the Search widget doesn't satisfy your requirements or describe the business scenario, you can develop a custom search widget to provide additional functionality. After wiring with the Case List widget, the custom search widget will work with the Case List widget by sending the required event and payload information.

For example, assume an insurance company needs an application to manage all its insurance policies. The insurance agent must be able to search through policies to find one that meets their needs. Generally the agent searches for a specific insurance policy by the insured name or policy number. If the agent uses the basic Search widget, the agent will have to open the advanced search dialog first, then add search criteria in user-specified properties. To improve efficiency and usability, you could build a custom search widget named Insurance Search widget. In the Insurance Search widget, the following general properties are listed in the panel:

  • The insured name
  • The number
  • The date that the insurance policy was created
  • Its current state

The result is a search widget that is tailored to the specific solution needs. An agent can use this custom widget to find an insurance policy quickly and accurately.

The next sections describe how to build a custom search widget. You will first learn about the IBM Case Manager REST APIs, which will be used by the custom widget. Then you'll see how to build the actual widget.


Introducing the REST APIs

Before learning how to develop a custom search widget, first take a look at the IBM Case Manager REST APIs that will be used in the Search widget. The Search widget uses the following two services:

  • CMIS
  • Case REST service

The Content Management Interoperability Services (CMIS) provide standard methods for interacting with Enterprise Content Management repositories in a vendor and product agnostic manner. CMIS accepts HTTP requests from Case Manager Client. CMIS connects to the FileNet P8 Content Engine (CE) using the IIOP protocol to perform operations for the requests. CMIS then sends HTTP responses to the Case Manager Client with the result.

The Case REST service supports the REST framework. The Case REST service uses the FileNet P8 Process Engine (PE) Java API and the CE Java API to handle case solution requests from the IBM Case Manager components, notably those from Case Builder and Case Manager Client.

In the Search widget, Case REST is used for getting the list of view definitions of a particular case type. The Search widget needs the search view of the specified case type to construct the search panel, and send the summary view for the case type to the Case List widget to determine what case properties to display.

CMIS is used for retrieving all the properties for a case type. At the same time, querying is a feature for a CMIS repository. It is the Search widget's responsibility to build the query statement, and then the query statement with other useful information will be sent to the Case List widget by event. The Case List widget will execute the query by CMIS, and then display the search result.


Creating a custom search widget

This section shows how to develop and deploy a custom search widget to communicate with the Case List widget. The custom search widget contains a series of searchable properties that are defined in the FileNet P8 Content Engine object store. Then it collects useful information which is used for the Case List widget to execute the search and display the result.

To create a custom search widget, You will need to complete the following tasks:

  1. Retrieve the view definitions using the Case REST APIs
  2. Retrieve the property definitions using CMIS
  3. Restrict the search to one solution
  4. Build the query statement
  5. Create the widget definition
  6. Build the publish event that will be received by the Case List widget
  7. Create the JavaScript
  8. Deploy the custom search widget
  9. Wire the search widget and the Case List widget together

These tasks are described in detail in the following sections.

Retrieve the view definitions using the Case REST APIs

The business analyst defines three lists of view definitions: CaseSummaryView, CaseDataView and CaseSearchView. The widget uses the Case Summary view to communicate the properties that should be displayed in the Case List widget, and it uses the Search view to define the properties that are available and their display order for building a search. Listing 1 shows the code for invoking Case REST to get the view definitions.

Listing 1. Invoking Case REST to get the view definitions
getViewDefinitions: function(){
	var self = this;

	return this.caseService.getViewDefinitions({
		caseTypeName: this._getCaseType(),
		TargetObjectStore: this._getObjectStore()
	}).addCallbacks(dojo.hitch(this, function(result){
		var fields = result.value.CaseSummaryView ? result.value.CaseSummaryView
		 .Fields : [];
		dojo.forEach(fields, function(property) {
			self.summaryProperties.push({
				symbolicName: property.Name,
			});
		});
		self.summaryProperties.sort();
		
		var fields = result.value.CaseSearchView ? result.value.CaseSearchView
		 .Fields : [];
		dojo.forEach(fields, function(property) {
			self.searchProperties.push({
				symbolicName: property.Name,
			});
		});
		self.searchProperties.sort();
		return self.searchProperties;
	}), dojo.hitch(this, function(){
		//err back
	}));	 
},

A sample response returned by Case REST is displayed in Listing 2:

Listing 2. A sample response
{
"CaseDataView": 
{
	"Fields": 
	[
	  { "FieldType": "property", "Name": "caseName" },
	  { "FieldType": "property", "Name": "accountNumber" },
	  { "FieldType": "group", "Label": "Home Address", "OpenState": false,
		"Fields": 
		[ 
		  {"FieldType": "property", "Name": "StreetAddressLine1"},
		  {"FieldType": "property", "Name": "StreetAddressLine2"},
		  {"FieldType": "property", "Name": "City"},
		  {"FieldType": "property", "Name": "State"},
		  {"FieldType": "property", "Name": "ZIPCode"},
		] 
	  }
	]
},
"CaseSummaryView": 
{
	"Fields": 
	[
	  { "FieldType": "property", "Name": "caseName" },		
	  { "FieldType": "property", "Name": "customerName" },
	  { "FieldType": "property", "Name": "requestedLoanAmount" },
	  { "FieldType": "property", "Name": "percentageDown" },
	  { "FieldType": "property", "Name": "FicoScore" }
	]
},
"CaseSearchView": 
{
	"Fields": 
	[
	  { "FieldType": "property", "Name": "caseName" },		
	  { "FieldType": "property", "Name": "customerName" },
	  { "FieldType": "property", "Name": "accountNumber" },
	  { "FieldType": "property", "Name": "requestedLoanAmount" }
	]     
}

Retrieve the property definitions using CMIS

The view definition provided by Case REST is not the full definition of each case property. You can only get the name and type for each property. Other useful information, such as property's symbolic name, which is used for building query statement, is provided through the CMIS API. Additionally, if a search requires access to case properties that aren't defined in the search view, you would need to use the CMIS API to get a complete list of properties for the case type. Listing 3 shows the code for invoking CMIS to get all the properties and filter out the searchable ones.

Listing 3. Invoking CMIS to get all properties
_showDefaultPane: function() {
		//show the widgets description.
		var caseTypeProperties = this.getCaseTypeProperties().addCallbacks(
				dojo.hitch(this, "_getCaseTypeProperties"),
				dojo.hitch(this, function(err) {
					console.log(err.toString());
					return err;
				}));
	},

getCaseTypeProperties: function() {
		var caseTypeName = this._getCaseType();
		var	targetObjectStore = this._getObjectStore();
		return this.CMISService.getPropertyDefinitions(targetObjectStore, 
		 caseTypeName).addCallbacks(dojo.hitch(this, function(result){
			return result;
		}), dojo.hitch(this, function(){
			//err back
		}));	
	},

This would be useful if the solution has been deployed successfully by the business analyst before developing the custom search widget. In this situation, you can get the searchable properties information through CMIS and then hard code them in the widget. The useful property information includes symbolic name and property type. In the sample code, it picks up several typical property types and hard codes the properties, so you can focus on how to retrieve the search view properties by REST APIs and how to construct the payload that will be fired to the Case List widget.

Restrict the search to one solution

The business analyst can deploy several solutions in one content engine, so it is very important to restrict the search to one solution. In the content engine, the case structure is represented as a case folder, so you must invoke CMIS to fetch the target solution folder ID first, and then insert it as search criteria in the query statement. Listing 4 shows the code for invoking CMIS to get the target solution folder id.

Listing 4. Invoking CMIS to get the target solution folder id
_onClickSearchButton: function() {
		this.solutionName = this._getSolutionName();
		this.objectStore = this._getObjectStore();
		var _sql = this._solutionIDSQL;
		_sql = _sql.replace("@solutionName", this.solutionName);
		
		var self = this;
		return this.CMISService.queryRaw(this.objectStore, _sql).
		 addCallbacks(dojo.hitch(this, function(result){
			self._onSolutionIDQueryDone(result);
		}), dojo.hitch(this, function(){
			//err back
		}));	
	},

_onSolutionIDQueryDone: function(feed) {
		if(!feed.entries){
			var resourceBundle = ecmwdgt.getResourceBundle("common");
			var msg = dojo.string.substitute(resourceBundle.
			 SolutionIDNotFound, [this.solutionName, this.objectStore]);
			
			ecmwdgt.getBean("messageDialog", {
						icon: "ERROR",
						message: msg
			}).show();
			return;
		}
		var entry = feed.entries[0];
		this.currentSolutionID = entry.getCMISProperty("This").value[0];
	},

The query statement built in the function is: SELECT This FROM CmAcmDeployedSolution where cmis:name = ' SampleSolutionName'.

The required solution folder ID in the response is this property value, Listing 5 shows the script of the query response.

Listing 5. The script of the query response
<cmisra:object>
	<cmis:properties>
		<cmis:propertyId queryName="This" displayName="This" localName="This" 
		 propertyDefinitionId="This">                    
		 <cmis:value>ido_F391D3A8-972F-4D23-ADC0-D03E148E5AFF:
		 idt_616EA2CB-2F81-4AE7-8E9E-A787A0B224AF:
		  idx_23807F89-D34F-4C4D-9838-DBF7886067B7</cmis:value>
		</cmis:propertyId>
	</cmis:properties>
	<p8ext:ClassDisplayName>Deployed Solution</p8ext:ClassDisplayName>
</cmisra:object>

Build the query statement

This section describes how to build a query statement that is used for searching cases based on the search criteria. The syntax for queries is similar to SQL query syntax. Case Manager Client supports the following six property types: ID, String, DateTime, Integer, Decimal and Boolean. Each type can be a single value or multi-valued. The following table shows a listing of query expressions that represent a reasonable CMIS query for each single property type and supported operators.

Table 1. Data types and operators supported by CMIS
Data type and operator matrix
Property Data TypeOperatorExample Query Expression
ID Equalcmis:objectId = 'F8DF248A-D0F8-4FEC-B086-1F52DA81A5EF'
Emptycmis:objectId IS NULL
Not emptycmis:objectId IS NOT NULL
StringStarts withCmAcmCaseIdentifier LIKE 'Custom%'
Ends withCmAcmCaseIdentifier LIKE '%Custom '
ContainsCmAcmCaseIdentifier LIKE '%Custom %'
Equal toCmAcmCaseIdentifier = 'Custom '
Not equal toCmAcmCaseIdentifier <> 'Custom'
EmptyCmAcmCaseIdentifier IS NULL
Not emptyCmAcmCaseIdentifier IS NOT NULL
DateTimeEqual tocmis:creationDate = TIMESTAMP'2010-12-09T16:00:00.000Z'
Not equal tocmis:creationDate <> TIMESTAMP'2010-12-09T16:00:00.000Z'
Less thancmis:creationDate < TIMESTAMP'2010-12-09T16:00:00.000Z'
Greater thancmis:creationDate > TIMESTAMP'2010-12-09T16:00:00.000Z'
Less than or equal tocmis:creationDate <= TIMESTAMP'2010-12-09T16:00:00.000Z'
Greater than or equal tocmis:creationDate >= TIMESTAMP'2010-12-09T16:00:00.000Z'
Emptycmis:creationDate IS NULL
Not emptycmis:creationDate IS NOT NULL
IntegerEqual toETEProperty2 = 163
Not equal toETEProperty2 <> 163
Less thanETEProperty2 < 163
Greater thanETEProperty2 > 163
Less than or equal toETEProperty2 <= 163
Greater than or equal toETEProperty2 >= 163
EmptyETEProperty2 IS NULL
Not emptyETEProperty2 IS NOT NULL
DecimalEqual toETEProperty4 = 3.14
Not equal toETEProperty4 <> 3.14
Less thanETEProperty4 < 3.14
Greater thanETEProperty4 > 3.14
Less than or equal toETEProperty4 <= 3.14
Greater than or equal toETEProperty4 >= 3.14
EmptyETEProperty4 IS NULL
Not emptyETEProperty4 IS NOT NULL
BooleanEqualETEProperty1 = true
EmptyETEProperty1 IS NULL
Not emptyETEProperty1 IS NOT NULL

If the property is multi-valued, then the query expression is like: ANY cmis:creationDate IN (TIMESTAMP'2010-12-09T16:00:00.000Z').

Additionally, the custom widget developer should pay attention to the following issues:

  • Add the solution folder id expression to the query statement: CmAcmParentSolution = 'do_F391D3A8-972F-4D23-ADC0-D03E148E5AFF:idt_616EA2CB-2F81-4AE7-8E9E-A787A0B224AF:idx_23807F89-D34F-4C4D-9838-DBF7886067B7'.
  • The value of the DateTime property should be Timestamp. But generally, it is not possible to get accurate time values from user input. For example, let's say the widget only accepts a date value and you enter a value of 2010-12-10. The widget developer must convert the query expression to: cmis:creationDate >= TIMESTAMP'2010-12-10T00:00:00.000Z' AND cmis:creationDate < TIMESTAMP'2010-12-11T00:00:00.000Z'
  • For String type property, if the operator of query expression is LIKE, then there are four characters that must be escaped by a preceding backslash \. Those characters are: '%', '_', '\' and '''. If the operator is equal, not equal, or IN, then the character '\' must be escaped to '\\'.
  • The FROM clause identifies which virtual tables the query will run against. So if the search is a cross-type search, the FROM clause should be CmAcmCaseFolder. If you identify a specific case type, the FROM clause is the case type symbolic name.

The whole query statement will be similar to the following: SELECT * FROM CmAcmCaseFolder WHERE CmAcmParentSolution = 'ido_F391D3A8-972F-4D23-ADC0-D03E148E5AFF:idt_616EA2CB-2F81-4AE7-8E9E-A787A0B224AF:idx_23807F89-D34F-4C4D-9838-DBF7886067B7' AND ETEProperty4 = 3.14

Create the widget definition

You create the widget definition as an XML file. In the widget definition file, define the following items:

  • An iScope parameter that specifies the name of the IScope class that is to be instantiated by the Mashup application.
  • A resource URI element that identifies the JavaScript file that contains the logic for the custom widget.
  • A title element that identifies the widget name that is displayed in the Mashup widget title bar.
  • A description element that identifies the widget outline.
  • An attributes element that specifies the attributes of the widget.
  • An event element and eventDescription element that identify the event that the widget uses.

Listing 6 shows the basic XML definition file of a custom search widget. The name of the widget is CustomSearch. You can also add translated title or description content as child elements of the title or description element for globalization.

Listing 6. Widget Definition xml file
<cmisra:object>
	<cmis:properties>
		<cmis:propertyId queryName="This" displayName="This" localName="This" 
		 propertyDefinitionId="This">                    
		 <cmis:value>ido_F391D3A8-972F-4D23-ADC0-D03E148E5AFF:
		 idt_616EA2CB-2F81-4AE7-8E9E-A787A0B224AF:
		  idx_23807F89-D34F-4C4D-9838-DBF7886067B7</cmis:value>
		</cmis:propertyId>
	</cmis:properties>
	<p8ext:ClassDisplayName>Deployed Solution</p8ext:ClassDisplayName>
</cmisra:object>	
<iw:iwidget id="com.ibm.im.ecmwidgets.sample.CustomSearchWidget" 
   xmlns:iw="http://www.ibm.com/xmlns/prod/iWidget" 
   iScope="com.ibm.im.ecmwidgets.sample.CustomSearchWidget"
 allowInstanceContent="true" supportedModes="view" mode="view" lang="en">
   
  <iw:resource uri="common/CMISService.js" />  
  <iw:resource uri="common/CaseService.js" />   
  <iw:resource uri="customSearchWidget.js" />  

  <iw:itemSet id="idescriptor">
	<iw:item id="title" lang="en" value="Custom Search">
		<!--@customSearch.title@-->
		<iw:alt lang="en" value="Custom Search"/> 
	</iw:item>
	<iw:item id="description" lang="en" value="A widget that supports custom search">
		<!--@slideshow.description@-->
		<iw:alt lang="en" value="A widget that supports custom search"/> 
	</iw:item>
  </iw:itemSet> 
   
  <iw:itemSet id="attributes" >
    <iw:item id="version" value="1.0"/>
  </iw:itemSet>

  <iw:event eventDescName="desc_search" published="true" 
     id="com.ibm.ecmwidgets.acm.SearchCases"/>	
	<iw:eventDescription  id="desc_search" payloadType="CaseSearch">
		<iw:alt description="The user executed a search for cases. 
		This event is automatically wired to the Case List widget." 
		lang="en" title="Search cases"/>	
	</iw:eventDescription>

 <iw:content mode="view">
        <![CDATA[
		<div id="_IWID_viewModeContent" class="ecmwdgt ecmwdgtViewModeContent">
		</div>
      	]]>
 </iw:content>
</iw:iwidget>

Build the publish event that will be received by the Case List widget

The introduction section described the mechanism for displaying the search results in the Case List widget. The Search widget sends an event with required information as payload. The following section introduces the payload in detail. The custom search widget fires an event 'com.ibm.ecmwidgets.acm.SearchCases' with the CaseSearch payload to the Case List widget. The CaseSearch payload type represents the search criteria that a case worked enters in the search widget. The CaseSearch payload type uses the iWidget syntax shown in Listing 7.

Listing 7. CaseSearch payload definition
<cmisra:object>
<iw:payloadDef name="CaseSearch">
    <iw:payloadDef name="CaseType" type="string" defaultValue="" description=""/>
    <iw:payloadDef name="ObjectStore" type="string" defaultValue="" description=""/>
    <iw:payloadDef name="SortingProperties" type="any" defaultValue="" description=""/>
    <iw:payloadDef name="SystemProperties" type="any" defaultValue="" description=""/>
    <iw:payloadDef name="SummaryProperties" type="any" defaultValue="" description=""/>
    <iw:payloadDef name="SearchProperties" type="any" defaultValue="" description=""/>
    <iw:payloadDef name="QuerySQL" type="string" defaultValue="" description=""/>
</iw:payloadDef>

The CaseSearch payload type includes the following properties shown in Table 2.

Table 2. Properties for the CaseSearch payload type
PropertyTypeDescription
CaseTypestringThe type of case for which the case worker is searching
ObjectStorestringThe object store to be searched for the case
SortingPropertiesanyThe case properties that are used in the Sort by section of the Case List Widget. User could use these properties to sort cases that are listed in Case List Widget.
SystemPropertiesanyTo be displayed in the second line in Case List widget
SummaryPropertiesanyTo be displayed in the third line in the Case List widget. They are the summary view properties configured for specified Case Type in Case Builder. The widget can get it by invoking Case REST.
SearchPropertiesanyTo be displayed in the fourth line in the Case List widget. They are the executed properties which are selected by the user in the Search widget.
QuerySQLstringA SQL-like statement to be executed by invoking CMIS

The sample of the payload is shown in Listing 8.

Listing 8. A sample casesearch payload
{"CaseSearch":
{"CaseType": "ETECase1",
"ObjectStore: "ATOS",
"QuerySQL": "SELECT * FROM ETECase1 WHERE (CmAcmCaseState = 2)",
"SystemProperties": [
{"displayName": "Case State", "symbolicName": "CmAcmCaseState", "type": "string"},
	...
 ],
"SummaryProperties": [
{"displayName": "ETEProperty1", "symbolicName": "ETEProperty1", "type": "property"},
	...
 ],
"SortingProperties": [
{"displayName": "Case ID", "symbolicName": "CmAcmCaseIdentifier", "type": "string"},
	...
 ],
"SearchProperties": [
{"displayName": "Case State", "symbolicName": "CmAcmCaseState", "type": "string"},
	...
 ]}}

Create the JavaScript

In the example JavaScript code in Listing 9 shows the custom search widget implements onLoad and onview methods to handle onLoad and onview events.

Listing 9. A sample code for onLoad() and onview()
onLoad: function() {
	//get this widget's viewModeContentNodeId.
	this.viewModeContentNodeId = "_" + this.iContext.widgetId + "_viewModeContent";

	this.CMISService = new com.ibm.im.ecmwidgets.sample.common.CMISService();
	this.caseService = new com.ibm.im.ecmwidgets.sample.common.CaseService();

	this.summaryProperties = [];
	this.searchProperties = [];
},

onview: function() {
	//show the default user interface, which is the widget description.
	this._showDefaultPane();
},

Deploy the custom search widget

There are three main steps to deploy a customized widget. There are a number of different mechanisms for deploying widgets, such as uploading a WAR file in IBM InfoSphere® MashupHub. This section will focus on the approach by which the widgets in the IBM Case Manager are deployed. The following steps show to do this.

  1. Package the widgets in a WAR file. The WAR should contain following files:
    • Widgets definition XML file
    • Widgets resource files(Javascript files, pictures and CSS files)
  2. Deploy the WAR file on WebSphere® Application Server via the WebSphere Application Server admin console:
    1. Log in to the WebSphere Application Server admin console and navigate to Applications-->Application Types-->WebSphere enterprise applications.
    2. Click the Install button to deploy the Custom Search widget WAR and follow the install wizard.
    3. Fill out the application name and set the context to CustomSearch on the wizard.
    4. Start up the CustomSearch application upon deployment completion. Verify the widget package deployment by confirming the widget definition file at the following URL. You should be able to see the XML content.
      http://hostname:port/CustomSearch/customSearchWidget/customSearchWidget.xml
  3. Register the widget in MashupHUB.

Open the InfoSphere MashupHUB window and upload the widget. Refer to the Resources section to learn about uploading a widget or an OpenSocial gadget to the Catalog in the IBM Mashup Center v3.0 Information Center, including detailed steps on how to deploy a widget. There are several ways to upload widgets, one of which is shown in Figure 3. You select the URL method to upload the widget.

Figure 3. Upload widget by URL
This dialog allows the user to select how he wants to upload his widget. Options include providing a zip or war file or referencing it by URL. In our example, we will reference it by URL.

A widget registration window will appear as shown in Figure 4, where you will enter the following URL (http://hostname:port/CustomSearch/customSearchWidget/customSearchWidget.xml) that was used for testing the Custom Search application in step 2 shown previously.

Figure 4. Input widget URL
Here we are providing the URL of the widget we wish to upload. This URL is the same URL we used to verify the widget deployment in the previous step.

The customized search widget will be added in the MashupHub when you complete the steps wizard. You will be able to see the custom search widget in the widget palette after you log in to the IBM Case Manager Client.

Wire the search widget and the Case List widget together

After you successfully deploy the custom search widget, complete the following steps:

  1. Add the custom search widget and the Case List widget to a page.
  2. Wire the custom search widget and the Case List widget together. Figure 5 shows the event wiring panel where you can see the result of wiring two widgets together using the com.ibm.ecmwidgets.acm.SearchCases event.
Figure 5. Event wired between Search Widget and Case List Widget in IBM Case Manager Client
The event wiring dialog in IBM Case Manager. Select the Custom Search widget to send content to the Case List widget using the Casesearch event

After wiring two widgets together, you can use the custom search widget to collect search criteria, and use the Case List widget to display the search result. The Cases page displays the custom widget and the Case List widget side by side, as shown in Figure 6.

Figure 6. The custom search widget works with the Case List Widget in IBM Case Manager Client
The custom search widget appears to the left of the Case List widget on the page

Conclusion

The Case Manager Client enables customers to integrate a custom widget with its out-of-the-box widgets to create a customized Mashup application. You can implement the customized functions in a custom widget, and the custom widget can work together with Case Manager Client to use the events that are exposed in following the events contract. So Case Manager Client can be easily enhanced by integrating the custom widgets to meet the requirements for a solution. This article described how to develop a custom search widget to work together with the Case List widget in support of your special solution requirements.


Download

DescriptionNameSize
Custom Search widget source codecustomsearch.zip5KB

Resources

Learn

Get products and technologies

  • Build your next development project with IBM trial software, available for download directly from developerWorks.
  • Evaluate IBM products in the way that suits you best: Download a product trial, try a product online, use a product in a cloud environment, or spend a few hours in the SOA Sandbox learning how to implement Service Oriented Architecture efficiently.

Discuss

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into Information management on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Information Management, Industries
ArticleID=681641
ArticleTitle=Integrate third-party widgets with IBM Case Manager Client, Part 1: Develop a custom search widget
publish-date=06232011