Build FileNet BPM applications using IBM ECM Widgets, Part 2: Constructing a business process management solution

IBM Enterprise Content Management Widgets (ECM Widgets) is a new Web 2.0 application based on mashup technology. ECM Widgets is an important component of the IBM Agile ECM FileNet® portfolio. It provides a set of widgets for business designers, analysts, IT specialists, and end users. The ECM Widgets application is highly flexible, easy to use, and convenient to expand. A user can quickly construct a FileNet business process management (BPM) solution by dragging and dropping widgets to easily configure the solution. ECM Widgets can significantly reduce the cost of implementation for enterprise business process management. This article focuses on how to construct a BPM solution using ECM Widgets 4.5.1 from a business designer's perspective and from a business analyst's perspective.


Shao Hong Xu (, Software Engineer, IBM

Photo of Shao Hung XuShao Hong Xu is a software engineer in IBM China Software Development Lab (CSDL). He has rich experience in designing IBM FileNet solutions, in developing Javascript based on Dojo, and in tuning Web client performance.

Xin Yu Zhou (, Software Engineer, IBM

Photo of Xin ZhouXin Yu Zhou is a software engineer in IBM China Software Development Lab (CSDL). He works on IBM FileNet products development in IBM Information Management.

12 November 2009

Also available in Portuguese


ECM Widgets is a set of widgets that enables users to build IBM enterprise content management (ECM) and business process management (BPM) applications more rapidly and efficiently. Ideal for both business and IT users, ECM Widgets provides a set of out-of-the-box user interface components that enables a business user to quickly build applications just by dragging-and-dropping, without additional programming. The application also enables an IT user to create custom widgets that can be integrated with existing ECM widgets.

ECM Widgets provides a set of standard ECM and BPM widgets based on the iWidget specification. You can easily assemble these widgets using event wiring to create different applications.

The ECM Widgets application:

  • Enables rapid development of BPM user interfaces.
  • Is easy to use. A business analyst can build applications by dragging and dropping.
  • Decreases the cost and effort required to develop applications.
  • Meets the usability expectations of Web 2.0.
  • Provides good scalability and easy customization.

This second article in the series describes how to build a BPM solution using ECM Widgets 4.5.1.

Designing a FileNet BPM 4.5.1 solution

Three participants have distinct roles in completing a BPM solution based on ECM Widgets:

A business analyst
The business analyst mainly uses the Process Designer to design the workflow, in-basket, and roles. The business analyst also creates mashup pages using ECM Widgets.
An end user
The end user mainly uses mashup pages composed of ECM widgets.
A developer
The developer mainly engages in developing and integrating with third-party widgets.

The business analyst first designs and creates a BPM solution based on FileNet and ECM Widgets according to specified business requirements. The business analyst then passes the solution to the end user. The end user can directly use the solution in the real online system. The developer integrates and develops any third-party widgets for the end-user to solve more complex business problems and to gain more business value. Figure 1 shows the described workflow.

Figure 1. Workflow overview
Drawing showing workflow of process designer, business analyst, end user, and developer

For example, imagine a company called XYZ needs a business process to recruit and manage candidates. The business analyst must first understand how to run the business process on the online system. Second, he breaks down the business process into some key factors, identifying such factors as the people involved in the process, the steps needed, the data store, and so on. Figure 2 shows the example business process for XYZ's recruitment.

Figure 2. XYZ personnel recruitment process
Drawing of workflow going throught Clerk, Reviewer, and Manager completing the Index, Review, and ManagerApprove steps.

There are three people involved in this example business process:

Collects the candidates' information and dispatches resumes to appropriate reviewers
Reviews the candidates' resumes and determines which candidates to recommend to the manager
Makes final decision on which candidates to interview

There are three corresponding steps involved in this example business process:

The clerk collects and screens candidates' resumes. If a resume meets the job requirements, the resume is dispatched to the reviewer. Otherwise, the resume is archived into the human resources database.
The reviewer evaluates the candidates' resumes that the clerk has already identifies as meeting the job requirements. For the candidates that the reviewer determines to be strong candidates for the job, the reviewer submits interview requests to the manager. The resumes for the weaker candidates are archived into the human resources database.
The manager makes the final decision on which candidates should be invited for an interview. For interview candidates, the resumes are archived into the human resources database in order to set up interviews.

Modeling the business process

Next, the business analyst needs to accurately translate the XYZ personnel recruitment process into terms the FileNet Process Designer can recognize. This phase is called modeling the business process. FileNet 4.5.1 simplifies using the Process Designer to accelerate modeling the business process. The business analyst does no programming, but instead uses a graphical interface to complete the steps. In this example scenario, the XYZ personnel recruitment process is modeled using the following factors:

  • Queue
  • Workflow definition
  • In-basket
  • Application space
  • Role

The queue holds the work items waiting to be processed. Each work item includes the data field values that record the necessary information about XYZ personnel candidates, as shown in Figure 3.

Figure 3. Queue
Screen cap: Configuration tab is highlighted. GenericApproval is right-clicked, and the Queue Properties window appeared, showing AccountNumber highlighted on the Data Fields tab

The workflow definition is a graphical representation of the actions required to complete a business process. Figure 4 shows the workflow definition in Process Designer for the XYZ personnel recruitment business process.

Figure 4. Workflow definition
Drawing shows the LaunchStep going to Index, Review, and ManagerApprove, and shows rejections at each step funnelling to ArchiveFailure and shows approval at ManagerApprove going to ArchiveSuccess

In-basket is a new feature in the IBM FileNet 4.5.1 release. It is located on the last tab of a view on the Queue Properties window. The business analyst can define multiple in-baskets within the same queue, while each in-basket shows its corresponding work items. For the example, there are three in-baskets: Index, Review, and ManagerApprove, which correspond to the steps defined in XYZ personnel recruitment process, as shown in Figure 4. Each in-basket contains different data fields of XYZ personnel recruitment candidates and different work items.

Figure 5. In-basket
Screen cap: Queue Properties window shows In-baskets tab selected and shows Index highlighted in In-baskets list. Index shows three tabs, as described below

The Index in-basket has three tabs:

Create Columns and Labels
This tab enables the business analyst to specify the fields of the XYZ personnel candidates that he wants to see for each item in the in-basket.
Create filters
This tab specifies one or more filters that the business analyst can use to display selected items in the in-basket.
Define Content
This tab enables the business analyst to create a filter that determines which work items to display. This filter cannot be changed during runtime.

The application space helps to organize the resources, including roles, members, and in-baskets for ECM widgets, as shown in Figure 6.

Figure 6. Application Space
Screen cap: Expanded folder tree showing Root > localhost > PEConection > Application Spaces > and GenericApprovalApplication highlighted

A role is created at design-time. An administrator assigns LDAP users and groups to the role, and he associates one or more In-baskets with the role. There are three roles in the XYZ personnel recruitment process: clerk, reviewer, and manager, as shown in Figure 7.

Figure 7. Roles
Screen cap: Application Space Properties window showing the Roles tab selected and Clerk highlighted in the Roles list

Designing mashup pages using the Business Space product

Creating a mashup page is much simpler and more flexible. You can use the ECM Widgets application to create IBM FileNet BPM applications. A mashup page is comprised of a set of ECM widgets laid out with their configurations and an event flow between the widgets. A business space is a collection of mashup pages organized into tabs. Figure 8 shows a sample mashup page created in a business space.

Figure 8. Mashup page
Screen cap: Your Business Space window showing Generic Approval Processing and My Work highlighted. Items are listed in Toolbar, Inbasket, and Content List sections

Business Space powered by WebSphere® is a Web 2.0-based mashup environment. It enables business users to create an integrated and customized user experience. It includes a set of out-of-the-box templates that provide pre-integrated process capabilities for an enhanced user experience.

For the example scenario, Figure 9 shows how to create a step processor using an ECM Widgets template in Business Space. The space is made up of four pages. The launch page launches work items. It provides the user interface for the beginning steps in the XYZ personnel recruitment process. Other pages handle work items for the Index, Review, and ManagerApprove steps in the example.

Figure 9. Business space
Screen cap: Your Business Space window showing Business Space Manager grouping. The Step Processors Space contains three Step Processor samples

Business analysts use business spaces to create step processor pages. End-users also use business spaces in which the pages contain in-baskets to process work. The business analyst's step pages can be opened dynamically in the end-user's spaces. All step pages must contain only one step-completion widget.

Associating work flow steps with mashup pages

After you have modeled business processes and created mashup pages based on the XYZ personnel recruitment process example, the next step is to create the relationships among them. The section describes how to make the connections among them by associating workflow steps with mashup pages. Once the connections are made, the work items can be handled in different steps by opening different mashup pages.

To create a connection:

  1. Obtain the URL of the page by clicking the Show Link button.
  2. Extract the string as a page ID, such as spaceId=3a5dacf01db411deacdea2912246421f&pageid=1238477078625_0a8abf749acd4d91b619f330a2195dbb.
  3. Create a step processor in the Process Designer window and paste the page ID into the step processor location, as shown in Figure 10. Note that the launch page must match the launch type, and the step page must match the step type.
Figure 10. Register the mashup page
Screen cap: Isolated Region Properties window showing Step Processor Info tab selected. Launch is selected, and IBM ECM Widgets for Business Space is highlighted in the Step Processor Locations window

Configuring ECM Widgets

ECM Widgets renders the user interface according to the configuration data. For example, you can select different roles to control the In-basket widget to show different in-baskets. The configuration data is stored in the widget's Edit window. You can easily configure widgets according to the configuration items' descriptions. Configuring the Work Data eForm widget and the Content List widget often requires additional steps.

Work Data eForm widget

The Work Data eForm widget is a new widget in the 4.5.1 release. The Work Data eForm widget displays a FileNet eForm user interface to enter data for a new work item. In order to use the widget:

  1. Create the form using the eForm Designer.
  2. Check the form into the Workplace XT by using the eForm template class. Figure 11 shows the graphical user interface of the eForm template.
Figure 11. Designing an eForm template in Workplace XT
Screen cap: FileNet Workplace XT is open in a browser, and eForm Template is highlighted. The GenericApproval.itx window appears showing Welcome and blank spaces to enter information
  1. Click Show Hyperlink to obtain the URL of the eForm template, as shown in Figure 12.
Figure 12. Obtain the eForm template URL
Screen cap: Workplace XT: Show Hyperlink window in browser with GenericApproval.itx highlighted, and cursor on Show Referenced
  1. Copy the URL of the eForm template, and paste it into the configuration window of the Work Data eForm widget, as shown in Figure 13.
Figure 13. Configure the Work Data eForm widget
Screen cap: Work Data eForm window shows where to copy template URL

The Work Data eForm widget displays the content according to the template URL, as shown in Figure 14.

Figure 14. Render the Work Data eForm widget
Screen cap: Work Data eForm window promptin for information such as Account Number, Company Name, and so on

Content List widget

The Content List widget is a new widget in the 4.5.1 release. The Content List widget shows a list of documents retrieved from a Workplace XT stored search. In order to use the widget:

  1. Create a stored search using Search Designer in the Workplace XT, as shown in Figure 15.
Figure 15. Design a storeSearch in Workplace XT
Screen cap: FileNet Workplace XT window showing Tools tab and ContentListStoreSearch selected
  1. Click Show Hyperlink to obtain the URL of the store search, as shown in Figure 16.
Figure 16. Copy the storeSearch URL
Screen cap: Workplace XT Show Hyperlink window with Show Hyperlink tab highlighted
  1. Copy the store search URL and paste it into the configuration window in the Content List widget, as shown in Figure 17.
Figure 17. Configure the Content List widget
Screen cap: Content List widget configuration screen with URL filled into URL Address for Stored Search field

The Content List widget displays the documents that are retrieved by the store search, as shown in Figure 18.

Figure 18. Render Content List widget
Screen cap: Content LIst widget winodw with documents displayed, including AccountNumbers and Addresses

The Content List widget enables a user to change the search condition dynamically after it is connected to the in-basket widget or the step completion widget. For the example scenario, assume that the initial search condition is AccountNumber > 100 and the Address is IBM. When you click a work item in the In-basket widget in which the AccountNumber is 200 and the Address is ABC, the condition is updated to AccountNumber > 200, and the Address is updated to ABC. The Content List widget renders the new work items according to the new search condition.

Sharing work and step processor spaces

A business analyst can run the entire XYZ personnel recruitment BPM solution with ECM widgets. After verification, the mashup pages are delivered to end users by sharing business spaces.

When you share a page, you can designate users as viewers or editors. Users designated as viewers cannot edit the page or the widget. Users designated as editors have the privilege level required to edit both the page and the widget. You can also designate users as viewers or editors at the page level.

Figure 19. Sharing a business space
Screen cap: Your Business Space window showing the Business Space Manager tab. Shows Step Porcessors Space and Share this Business Space selected


During the design and implementation process, you might encounter unexpected results at times. This section describes some typical troubleshooting approaches to finding a design error. If you receive an error message, do the following:

  • Make sure the process configuration console in the Workplace XT can connect the PE connection point.
  • Make sure the stored search that the Content List widget uses can properly search the correct data in the Workplace XT.
  • Make sure and perest:connection.point are correct in the WorkplaceXT_Deployed_Folder/WEB-INF/P8BPMRESTConfig.xml.

You can also collect the necessary logs related to the ECM widgets by following these steps:

  1. Copy ECMWigets_Installation_Home/ContentList/ into WorkplaceXT_Deployed_Folder/WEB-INF.
  2. Restart the Workplace XT application in the WebSphere® Application Server console to enable the ECM Widgets CE REST log. The log file is generated and stored in C:\\ecmwdgt.log.
  3. Install Firebug into the Mozilla Firefox browser to collect the browser's log messages.


Part 2 of this series discussed how to construct an IBM FileNet BPM solution from a business analyst's perspective. By following the example of the XYZ personnel recruitment scenario, you should have an understanding of the ECM Widgets application, Business Space, and the IBM FileNet. With that understanding, you now are ready to start integrating the widgets. Part 3 will describe how to expand ECM widgets using third-party widgets.


Thank you to following people for reviewing this article:

  • Lauren Mayes, the architect of ECM Widgets
  • Ming Liang Guo, team lead of the ECM Widgets development team
  • Simon Chu, IBM Master Inventor





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

Zone=Information Management, Industries
ArticleTitle=Build FileNet BPM applications using IBM ECM Widgets, Part 2: Constructing a business process management solution