Blog

Ext JS Spotlight: ProcessMaker

June 07, 2011 | Jay Robinson

Colosa, Inc. is the developer of ProcessMaker — a simple-to-use, cost-effective, open source workflow software solution. ProcessMaker helps organizations of all sizes to easily design, automate and deploy approval-based business processes that connect humans and systems in the workplace.

ProcessMaker has been downloaded more than 250,000 times in the last two years and is currently being run by hundreds of companies with tens of thousands of users across numerous vertical markets including government, telecom, banking, insurance, manufacturing and others.

The ProcessMaker design suite allows business users to create forms and map fully-functional workflows. The software is entirely web-based, making it simple to coordinate workflow across users, departments and organizations. As a powerful SOA application, ProcessMaker can be integrated with systems including document management, ERP, CRM and business intelligence applications.

“For our team, design matters. With Sencha, we found a development group and a product with the same mantra.”

Why We Chose Ext JS

At Colosa, we believe that workflow software has gotten too complicated. Our goal is to provide well-designed, effective, easy-to-use software. One of our early design decisions was to improve our user interface to be simple and user friendly. We wanted to allow users to draw processes inside the web browser. To achieve this goal, we developed our own JavaScript framework. After a few years, we became bogged down by the time required to maintain the framework. We evaluated the major JavaScript frameworks available in the market, and ultimately we decided that Ext JS was the best one available because the Object Model is very intuitive with lots of rich options and the cross-browser functionality allows us to support many different browsers.

We use Ext JS grids to create many of the lists and reports in our application. Features like pagination, JSON datastores, column rendering and Ajax requests are all a breeze thanks to Ext JS.

Here are some examples of how we’re using Ext JS in Processmaker:

Language option in Admin Menu: Every language we support can have many locales and versions, and we were having trouble using normal grids because they ended up showing redundant data. We needed a better way to group and show this information. With Ext JS, we’re now using GroupingStore in a GridPanel to show ProcessMaker translations and their versions. Also, we’ve added small flag images to the rows for easy viewing. GroupingStore allows us to show clear information about the locale and country translation using only one Ajax request.

Case Scheduler Log: This is a simple grid, but in the most recent versions of ProcessMaker we have included more complicated search options. ProcessMaker users wanted to filter records using a full text search and be able to cancel the filter with just one click. It was easy for our developers to add the “X” at the right of the search box and send an Ajax request to cancel the filter. In fact, our developers are redesigning all of the Admin Menus, and we’re now using this feature in every list that we can.

Processes List: In this grid, we added a context menu for row selection. Actions in the top-toolbar are enabled or disabled depending on which rows the user has selected.

Case Panel: Here, we’re using multi tabs to show more information about a case. All of this information is organized on the same page, and it can be updated with simple Ajax requests. Before we started using Ext JS, the user had to open many pages and wait until every page reloaded to view all of this information. Now, we can show all of the information about the case in these tabs which is much more efficient. We are even showing a graphical representation of our ProcessMap.

Business Value of Using Ext JS

Ext JS is helping us to achieve significant savings in our development efforts.

1. We estimate that we’re saving 40% in development time by using high performance, customizable UI widgets in the redesign of our application forms. With an improved user experience and customized controls, we have cut one of our projects from 3 months to 2 because we don’t have to hand-code controls and forms.
2. We’re seeing a 50% savings in development time for reports and lists due to reuse of previous lists and forms. Now, our junior programmers simply follow our guidelines, and they can produce awesome lists and forms.

Our Advice to New Developers

If you are planning to use Ext JS, here are a few tips:

1. The first thing you need to do is play with all of the examples and then try some simple implementations.
2. The next things you should work on mastering are forms, datastore, JSON encode and Ajax requests. After that, you’ll be ready to build interesting applications.
3. Finally, don’t forget to use the excellent online documentation provided by Sencha. You will find examples of many amazing features.

Final Thoughts

For our team at ProcessMaker, design matters. With Sencha, we found a development group and a product with the same mantra. Ext JS is helping us bring elegance, style and meaning to the world of workflow. Now, the ProcessMaker interface is light years ahead of other players in the BPM and Workflow software space.

But most importantly, Ext JS is helping us to build the kind of product we want and one that our customers love to use. We plan on taking advantage of Sencha Touch in the coming months to create a seamless way for users to enjoy using ProcessMaker in a cross-platform mobile environment.