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.
- Role
- 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.
- In-basket
- An in-basket contains a list of work items associated with a role.
- Widget
- 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
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.
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
Users can assemble widgets to create applications based on the widgets' requirements. Table 1 briefly describes the function of each widget.
| Widget name | Brief function description |
|---|---|
| Toolbar | Toolbar 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-basket | In-basket widgets display all in-baskets associated with user roles. A user can see all work items by opening the in-basket. |
| Header | Header widgets display system properties associated with work items, including step name, deadline, subject, and instructions. |
| Work data | Work 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 eForm | Work 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. |
| Attachment | Attachment 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 completion | Step completion widgets display the workflow response list, execute responses, and save or close the work item. |
| Viewer | Viewer widgets display documents stored in P8 object stores. Viewer widgets display attachment content from an attachment widget. |
| Content list | Content 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 process | Launch 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 page | Open 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
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
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
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
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
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
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
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
Learn
- Use an
RSS
feed to request notification for the upcoming articles in this series. (Find out more about RSS feeds of developerWorks content.)
- Get more details from
IBM ECM Widgets online documentation.
- Learn more about Information Management at the developerWorks Information Management
zone. Find technical documentation,
how-to articles, education, downloads, product information, and
more.
- Stay current with
developerWorks technical events and webcasts.
Get products and technologies
- Build your next
development project with
IBM trial software,
available for download directly from developerWorks.
Discuss
- Check out the
developerWorks
blogs and get involved in the
developerWorks community.

Wei 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 is a software engineer in IBM China Software Development Lab (CSDL). He works on IBM FileNet ECM Widgets development.

Wei 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.
Comments (Undergoing maintenance)





