Sencha Inc. | HTML5 Apps

Blog

Ext JS Spotlight: ProcessMaker

June 07, 2011 | Jay Robinson

Colosa, Inc. is the developer of the Ext JS web application ProcessMaker 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.

ProcessMaker is built with Ext JS and makes good use of trees for displaying content.
Language option in the Admin Menu of ProcessMaker, built with Ext JS. Click to see bigger.

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.

ProcessMaker is built with Ext JS to work in every browser.
Case Scheduler Log in the ProcessMaker web app.

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.

ProcessMaker is built with Ext JS because of its powerful grid component.
Processes List of ProcessMaker.

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.

ProcessMaker is built with Ext JS to create beautiful layouts.
Case Panel tabs show a graphical representation of the 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.

There are 11 responses. Add yours.

Conor

4 years ago

Impressive! Was the process modeller done in Ext JS as well?

Les

4 years ago

Looks good smile  I’m also curious if the graphical representation of the ProcessMap was done using the Ext drawing package.

posicionamiento

4 years ago

mmmm sounds good ! thanks a lot for share this information
Grettings from chile

Harry

4 years ago

Very nice application.  Great screenshots too!  Love reading how fellow Extians are using the framework in creative ways.

vahid4134

4 years ago

I think this program is very very bad use Extjs and They cant better to use Extjs

John Doe

4 years ago

@vahid4134:
Care to say why?

vahid4134

4 years ago

Because I use and Process maker don’t use all power of Extjs. this just use a few feature of Extjs.
If you see older version , change in view very low.
And JS code of Extjs in Process maker is not good and I think its amateur .
If Process maker use all power (and power of Extjs 4) very very better
and at end sorry for my bad English

lily

4 years ago

you let me think other thing from all kinds of aspects.i admire what you did for us.i will learn this spirit from you

numan

3 years ago

how did they do the processmap?

Barbie

3 years ago

Gosh, I wish I would have had that infmortaoin earlier!

Fernando

3 years ago

Hi, the processmap was not developed using Ext, because previous processmap was developed 4 year ago before ExtJS was so popular and powerful.

about “we are not using all the power of ExtJS”, that should be true, but Processmaker developers were working hard in new versions, and soon will be released a new one with BPMN 2.0 compliance, and more ExtJs.

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.