Build FileNet BPM applications using IBM ECM Widgets, Part 1: Introducing IBM Enterprise Content Management Widgets

IBM Enterprise Content Management Widgets (ECM Widgets) is a new Web 2.0 application based on mashup technology. As an important part of the FileNet P8 product, the application provides several widgets that developers can use as-is or can customize to easily create content-centric business process applications for FileNet® P8. This first article in the series introduces ECM Widgets features and advantages.


Wei Wang (, Staff Software Engineer, IBM

Wei Wang's photoWei Wang joined IBM in September 2004. Currently he is working on IBM ECM Widgets as a developer. He previously worked as developer in FileNet BPF development.

HongDong Zhao (, Software Engineer, IBM

Photo of HongDong ZhaoHongDong Zhao is a software engineer in IBM China Software Development Lab (CSDL). He works on IBM FileNet ECM Widgets development.

Wei Liao (, Staff Software Engineer, IBM

Wei LiaoWei Liao is an ECM software developer in the IBM China development lab. He has 4 years of IT industry experience in programming, J2EE application development, Windows/.NET development, Web development, and enterprise content management. He is proficient in building rich Internet applications based on Web standards and Dojo.

05 November 2009


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.

Understanding mashups and business spaces concepts

This section describes some concepts of mashups and business spaces that are essential to understanding ECM Widgets.

Application space
An application space is a way of organizing the resources for an ECM Widgets application or other custom application that uses a workflow. An application space contains a collection of roles. In an application space, you can assign roles to users and you can assign which in-basket each role can access.
A role defines a set of privileges for accessing the in-basket. A role defines what kind of work needs to be done by each kind of user. Each user is assigned to one or more roles. While using ECM Widgets, a business analyst can configure the application space and roles in the in-basket widget configuration panel.
An in-basket contains a list of work items associated with a role.
A widget is a small, portable application or piece of dynamic content that can easily be placed into a Web page or an embedded browser within a rich client. Each ECM widget uses best practices for FileNet application development.
iEvent and wiring
An iEvent has a source widget that fires the iEvent and has at least one target widget to receive the iEvent. When an iEvent is fired, a payload is sent from source widget to target widget. Widgets communicate with each other through iEvents. One widget can fire more than one iEvent. One widget can receive more than one iEvent. If two widgets are wired to send and receive an iEvent together, the two widgets can communicate with each other through the iEvent. Wiring is the procedure to establish communication between widgets using events.
Mashup pages
A mashup page consists of a layout of widgets, their configuration, and an event flow between widgets.
Business space
A business space is a collection of mashup pages organized into tabs. Authorization on the space determines who can view and edit the space.
Space template
A space template is a pre-arrangement of mashup pages that can be used to quickly create a new business space instance.

Understanding the ECM Widgets architecture

Figure 1 illustrates the ECM Widgets architecture.

Figure 1. ECM Widgets architecture
A drawing showing an end user and a business analyst going through a client browser and WebSphere Application Server to a relational database, process engine, content engine, or 3rd party data source

The end user uses the BPM solution that is built using ECM Widgets. Each end user is assigned one or more roles, so he can use the solution according to the assigned roles.

The business analyst builds the BPM solution. The business analyst designs a business process and then builds the mashup page for the end user to use.

On the client browser, the ECM Widgets application uses Business Space powered by WebSphere® as its widgets container. The Web browser provides the Business Space client runtime environment. You can see not only ECM Widgets but also third party widgets in the Business Space client runtime. A user can develop his own widgets to integrate with the ECM Widgets through wired iEvent. Widgets communicate with the server by calling the REST service.

On the server, three REST services are deployed in WebSphere Application Server for ECM Widgets: Process Engine (PE) REST service, Content Engine (CE) REST service, and eForm service. The three REST services communicate with the FileNet Process Engine and the FileNet Content Engine to provide their services. ECM Widgets provide document viewer and document operations, such as check in and check out, through Workplace XT.

Understanding widgets

ECM Widgets 4.5.1 provides 12 widgets. You can find them in the Business Space palette, as shown in Figure 2. You can see more widgets by clicking the grey left or right arrows to page through the palette.

Figure 2. Add widgets
Screen cap: The ECM Widgets Business Space palette with Add Widgets at the top

Users can assemble widgets to create applications based on the widgets' requirements. Table 1 briefly describes the function of each widget.

Widget nameBrief function description
ToolbarToolbar widgets provide pre-defined action menus. With these actions, you can launch work items, launch a new eForm work item, or open a Web page. Users can also develop custom actions to meet special requirements.
In-basketIn-basket widgets display all in-baskets associated with user roles. A user can see all work items by opening the in-basket.
HeaderHeader widgets display system properties associated with work items, including step name, deadline, subject, and instructions.
Work dataWork data widgets display data fields for work items. A user can input new values when launching a new work item, and the user can change values when modifying an existing work item.
Work data eFormWork data eForm widgets play the same role as work data widgets in the step processor page. However, the work data eForm widgets use the eForm user interface to present data. With eForm designer, a user can develop a customizable user interface.
AttachmentAttachment widgets display attachment lists grouped by workflow fields. A user can view, check out, check in, or download attachments associated with a work item.
Step completionStep completion widgets display the workflow response list, execute responses, and save or close the work item.
ViewerViewer widgets display documents stored in P8 object stores. Viewer widgets display attachment content from an attachment widget.
Content listContent list widgets show a list of documents retrieved from a search action that is executed on a backend content server. You can view the documents, view their properties, and download the documents.
Launch processLaunch process widgets register actions in toolbar widgets. These registered actions launch new work items for preconfigured workflows, or for a workflow that the user selects.
Launch process (eForm)Like the launch process widgets, the launch process (eForm) widgets launch new work items associated with eForms.
Open Web pageOpen Web page widgets are used to register actions in toolbar widgets. These actions open a configured Web page in a separate browser window.

Understanding the ECM Widgets iEvent

Figure 3 shows the ECM Widgets main iEvent flows. All widgets are connected through wiring and event. Payload is the data with the event sent between widgets.

Figure 3. ECM Widgets iEvent overview
Drawing showing workflow starting with LaunchProcess and In-basket both flowing through StepCompletion, and ending in Header, WorkData, WorkDataEForm, Attachment, Content List, or Viewer

You can use widget wiring to wire the widgets in the business space. You can click Widget Wiring in the drop-down menu of each widget, as shown in Figure 4.

Figure 4. Widgets wiring menu
Screen cap: Step Completion window showing a context menu with Widget Wiring selected

Figure 5 shows the wiring between step completion widgets and content list widgets. When the Send Work Item iEvent is fired, a work item is sent as payload to the content list widget.

Figure 5. Widgets wiring
Screen cap: Widget Wiring window showing Step Completion yielding a Content List

Widgets on the step processor page are automatically wired so that a business analyst does not have to wire them manually. Through iEvent wiring, ECM Widgets can easily integrate with third-party widgets.

Understanding ECM Widgets space templates

ECM Widgets provides three space templates to build BPM solutions:

  • ECM - Processing Work
  • ECM - Processing Work and Business Monitoring
  • ECM - Step Processors

Each template contains well-designed pages from ECM Widgets.

Using the space templates, business analysts do not need to create pages one by one by dragging and dropping widgets onto the palette. All standard pages and widgets are ready to use after creating a space using one of the templates. Using space templates accelerates BPM solution building.

Figure 6. ECM Widgets space templates
Screen cap: Create New Business Space window with From a Template selected, and a drop-down menu with ECM-Processing Work highlighted

Using ECM Widgets pages

You can build a BPM application quickly using ECM Widgets. This section describes an application built from the template. Usually a BPM application is in the cross-page mode that contains two kinds of pages: a My Work page and a Step Processor page. Figure 7 shows an example of a My Work page.

Figure 7. My Work page
Screen cap: Your Business Space window with the Index1 tab showing in the My Work In-basket

An end user can use the toolbar widget to launch a process that checks the work items to be processed in the in-basket widget. Figure 8 shows a work item to be processed in Index In-basket.

When the end user double-clicks the row to process it, the page switches to the Step Processor page.

Figure 8. Step Processor page
Screen cap: Your Business Space windows showing an Index page with header, work data, attachments, content list, and step completion sections

A standard Step Processor page contains a header, work data, an attachment, a viewer, and a step completion widget to display the detailed work item information. You can add or remove widgets from this page according to your requirements. In the example, the content list widget is added to the page.

Note: The step completion widget is a required widget on this page. You cannot remove it.

You can get more information about how to build a BPM solution in other parts of this article series.

Understanding single page mode

ECM Widgets supports two types of page modes: cross page mode and single page mode. While the example in this article described cross page mode, single page mode enables a user to process work items quickly and improve the end user experience. A single page contains the function of both the My Work page and the Step Processor page. All the widgets appear on one page. The end user can launch a process, view work items, and process work items without switching pages. Figure 9 shows an example of single page mode. You can open a work item from the same page when you click a work item in the in-basket widget.

Figure 9. Single page mode
Screen cap: Window showing toolbar, in-basket, work data, and attachment sections


This article briefly described the functions and advantages of ECM Widgets. With ECM Widgets, you can rapidly build your BPM applications without coding. If you want to add any additional functions, ECM Widgets can be easily extended by integrating with third-party widgets. The rest of this article series introduces how to build a FileNet BPM solution and how to integrate third-party widgets using ECM Widgets.


The authors thank the following people for assisting in 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



Get products and technologies

  • Build your next development project with IBM trial software, available for download directly from developerWorks.



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
ArticleTitle=Build FileNet BPM applications using IBM ECM Widgets, Part 1: Introducing IBM Enterprise Content Management Widgets