Extend Flowable Design

Now that we have our form components working, we may want to use them in Flowable Design. Flowable Design let us create our forms with drag and drop.

Design has also an extension mechanism.

So we can add our components to Flowable Design by creating a .jar file with a .palette file and some svgs. You can see an example in the palette folder inside the example project.

Additionally, to make the preview in Flowable Design work we need to add our .js file inside the .jar and to follow a naming convention.

Typically several components are hosted inside a single bundle that we will call suite (of components). Your suite must have a name all in lower case letters that we will call YOURSUITENAME.

The bundle .js file will be copied inside your .jar as index.js in the folder ./public/js/flowable-forms-YOURSUITENAME.

Also the components must include YOURSUITENAME as the first word in its name, that must be camelCase. This way Flowable Design knows which suite it needs to load when the component is instantiated.

For example this is the main js file in the example project:

import { HelloForms } from "./HelloForms";
import { ProgressBar } from "./ProgressBar";
import { ProgressBarInput } from "./ProgressBarInput";
import { PanelComposition } from "./PanelComposition";
import { EmojiPicker } from "./EmojiPicker";
import { CustomTable } from "./CustomTable";

export default {
  mysuiteHelloForms: HelloForms,
  mysuiteProgressBar: ProgressBar,
  mysuiteProgressBarInput: ProgressBarInput,
  mysuiteEmojiPicker: EmojiPicker,
  mysuitePanelComposition: PanelComposition,
  mysuiteCustomTable: CustomTable,
};

And this is the pom.xml of the palette .jar:

<project>
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.flowable</groupId>
  <artifactId>flowable-forms-mysuite</artifactId>
  <version>1.0.0-SNAPSHOT</version>

  <build>
    <resources>
      <resource>
        <directory>palette</directory>
        <targetPath>./com/flowable/addons/palette</targetPath>
      </resource>
      <resource>
        <directory>../frontend/dist</directory>
        <targetPath>./public/js/flowable-forms-mysuite</targetPath>
      </resource>
      <resource>
        <directory>palette/component-presentations</directory>
        <targetPath>./public/component-presentations/flowable-forms-mysuite</targetPath>
      </resource>
    </resources>
  </build>
</project>