IBM Case Manager Custom search Widget
In this post I am going to share with you how to build your custom search widget to override and customize you case manager built in search widget.
Here, we will implement custom search for customer management project.
actually, user will have list of checkboxes for customers, then he can select customers and click find customers and he will see the result into CaseList Widget, also he can see customer information and related documents in the Case Information Widget.
Create customer management solution
Actually, I will create new solution named customer management to have a complete tutorial about custom search widget, and since creating project is not our target for this post, so I will quickly write done steps to build this project.
- Login to case manager build, then select add solution
- Set solution name : customer management and the prefix cust
- Add two string properties named as follow (customer name, customer no)
- Create new role named admin role
- Create new case named relation management
- Select case properties from left menu > add properties > Existing > select all > ok all
- Go to views and add both customer name and no to all views ( case summery, case search , properties)
- Create new take named task1
- Design the new task follows
Build custom search project
let’s start building our custom search project, actually this project will have the following files
(web.xml, CustomSearch.js, CustomSearch.xml) , for more information about this files visit this link
Now, We’re going to take a look at CustomSearch.xml file
- here we will see bulk of xml elements about events as shown below
- if you’re familiar with xml, you can understand this, here we have two eventdecription and other two events, you may notice that each event has a reference to the event description. i need just to focus in very important attribute here payload type which used to determine the recipient or sender event type.
- in our post we are interested with sender event type ‘CaseSearch’, this payload is responsible to descript the case search object that will sent to CaseList widget and in same xml will and immediately after above code snippet, you will find casesearch payload definition as shown below
- the above payload definition has different sections to decrepit name and type of each object in our casesearch payload, it shows details about (casetype, objectstore, sortingproerties, systemproperties, summaryproperties, searchproperties and querysql)
- finally we will see below mentioned code this line
arch payload to the event.
let’s see now the list of functions in this file
- RenderCustomersLst : it is used to render customer list found in json data object as checkboxes.
- SelectedProjLST : it is used to find out selected customers to send it to caselist for search
- Servletcall : actually it is not used but i build it, for future use if you have servlet that retrieve list of customers in the mention json format.
- onreceiveWorkItem : this is event implementation when our custom widget receive event of type workitem.
finally, lets see this line of code
1: this.iContext.iEvents.fireEvent("Send Payload", "CaseSearch", payload);
- it is using icontext to get our custom widget context and then fire event of type casesearch
- but there is another dynamic value that i use it to modify the search query based on selected customers from the widget.
Now our project is ready, so you can go a head and export it as war then deploy and register it to Case Client, for more information about this topic visit this link .
Duplicate Cases Page
since we finished all development effort let’s move now to Case Client and do some customization.
first we have to create new page to use our new custom search widget there,so please follow below steps to do this.
- Manage Spaces > Customers Management > Actions (for cases) > Duplicate
- Actions (for cop of cases) > setting
- Rename it to be > Custom Search
Modify Custom search page
now we are going to modify our new page to use the new custom search widget, and this task has two phases, first to find our the casesearch payload to extract basic information about (casetype, objectstore, sortingproerties, systemproperties, summaryproperties, searchproperties and querysql) as mentioned above and then modify same page to finalize the custom search.
Prepare the search case payload
we can get the casesearch payload by following the below steps:
- Click Edit Page link
- Add script adapter to the page
- Wire script adapter as follows
a. Add incoming wire to Search Widget > select search cases event name
b. Add outgoing wire to case list > select search cases event name
- Use the built in search widget and apply search shown below
- Once result shown in case list, open the script adapter and take copy of its payload.
- Below list of json script should be found in payload object
Add customer list widget
- Now we are going to delete the script adapter widget and before that make sure you have cleared all wire linked to it.
- Then we will add our new custom widget by following below steps
a. Click edit page link
b. Select customer list widget as shown below
- Drag it above case list widget as shown below
- Drag the in basket widget to the hidden area beside the command widget as shown below
- Configure in basket wires as shown below
- Configure customer list widget as shown below
Testing the widget
- eventually we finished all tasks related to development, deployment, customization, wiring and our custom search widget is ready now for testing
- i will assume that you have entered two customers using Case client with the following details
1- customer name : customer 1 , customer number : 111
2- customer name : customer 2 , customer number : 2
- Click the refresh button into customer list widget
- Then check customer 1 and customer 2
- Click find customers , select customer 1
- Now you should have result as shown below
since we have ended this post let’s recap activities we went throw, we learned in this post customizing built in widget, configurations, and building new solutions and customizing pages and finally wiring widget with each others.
Download source code
you can find out the project war file and all other resources related to this post here , hope that helped.
No comments yet.