Unveiling the New Flowable Design: A Closer Look

Flowable Design as you’ve known it for years, was built on AngularJS, a frontend technology which was initially released back in 2010. Paul Holmes-Higgin, co-founder of Flowable and long-time Open-Source advocate, already announced a year ago that we were working on a new version of the Flowable Design. While the user interface is completely new, the focus was also on keeping the backward compatibility to the old version. This allows customers to easily switch to the new version and keep all the work they have already done. While Flowable Design cloud edition is already available for you to try, this article will highlight some of the new features as well as some technical details on how the new Flowable Design (cloud and on-prem) was created.

The workspace concept

When you work together on a larger project, for example, with SAFe or other methodologies, you often have a lot of content. While Flowable Design previously supported to separate different workstreams through tenants, there were always limitations in the way people are working. The tenants were initially meant to separate data during runtime, but then later got adapted to be also useful during the modeling time. However, this double role of tenants made it sometimes difficult, when you want to separate different projects during modeling time, but not during runtime. To accommodate this challenge, the new Flowable Design has, additionally to the workstream through tenants, the concept of workspaces. A workspace is part of one tenant and contains different models. This approach allows you to separate multiple projects within the same tenant. It is possible to have multiple tenants, and each tenant must have at least one workspace. This means great flexibility and simplified contribution in case you have multiple projects running on the same Flowable installation. But these are not the only benefits: Workspaces have visibility and permission management. With those, it is finally possible to define who has access to those workspaces. It is also possible to make workspaces read-only, which is the perfect way to provide a template to enable other users to build out their application quicker.

App Revisions

Rather than versioning everything separately, now the apps themselves can be given a revision. This allows you to keep track of what was changed on an app level rather than on a process/case model level and bundle everything together. The advantage is that you can create a snapshot of the app of that momet (for example to make a revision about what was deployed to a certain environment). In addition, it also allows you to provide a version key and a description which makes it possible to add information like a version number and notes to the version. Whenever a change needs to be made it is either possible to revert the entire app to the specific version or to copy the revision into another workspace, which allows to create a “patch” without impacting the existing models like cases and processes.

Single ZIP file

As of now, in Flowable Design there have been two different ZIP files. One for the deployment, we also call this business archive (or short “bar”) and one for reimporting in Flowable Design. Whenever you created a release, it was obligatory to save both to be able to deploy it and the other one to re-import it in case changes are necessary. The new Flowable Design can import both, which is a large benefit since even if you just have a “bar” file, you can still import it into Design to do appropriate changes. One the same side, it only exports now just one format of the zip. Which means then you just need to have only one ZIP moving forward.

App Specific Palettes

We receive many requests to have different palettes for different users, especially when you have two different groups of users: citizen developers and software engineers. Often, however, you can’t distinguish that within one app. When one user had more elements than another user, how would that user see the remaining elements? That is why we decided to have app specific palettes. That gives the flexibility to decide on a per app base, what palette is going to be used. Beginners can start with another palette than experts and still all users are able to collaborate on the models. This is already available in Flowable Design cloud edition by choosing the Orchestrate palette.

The new technical foundation

Maybe the most important thing to mention is the technical foundation which was changed. This change was long overdue, as the framework on which Flowable Design was built as well as the engine rendering the case and process diagram were quite old. To make Flowable Design a reliable and modern application the entire rendering of diagrams was rewritten using the React Flow framework. React flow provides a node-based editor to for interactive, highly customizable, and adaptable diagrams. For the new Flowable Design, we defined custom types for the different BPMN and CMMN elements and made them available as part of the diagram. Considering the approach of the React Flow framework, it is the perfect fit for a BPMN and CMMN editor.

WYSIWYG form editor

Furthermore, we created a new What-You-See-Is-What-You-Get (WYSIWYG) editor to modify forms. Unlike before, where only the runtime preview was available, the form now includes all the components and their integrated visual representation. This provides you with a direct and immediate idea of how the form will appear. It also makes the form modeling itself more intuitive and less technical since the user is focused and guided by the look and feel.

Enterprise releases

All of the improvements outlined above allow us to add more features faster to further enhance your modeling experience in the future. In the upcoming Flowable 3.14 release there will be the current Design application as well as the new Design application. This gives you the perfect opportunity to try out the new Flowable Design application, but you still have the possibility to use the old Flowable Design to create your models.

Summary

The new Flowable Design provides a modern way to create applications. The feature set of Flowable Design was always rich and with the new foundational UI framework working on models it is easier and smoother than ever. Embedded help-texts and guided wizards are rounding up the experience. It is best to just try it out, since it’s available in the Cloud, currently for free.