Skip to main content

Quickstart

v3.17.0+

In this guide, we'll go through the steps of bulding a custom component:

  1. Install the CLI

  2. Login to Flowable

  3. Create your library

  4. Create your component

  5. Build your component

    1. Configuration

    2. Code

  6. Upload the library

  7. Install the library

Install the CLI​

To install the CLI, run on your terminal:

npm i -g flowable-cli
info
  • Make sure you have node version 18 or higher

Login to Flowable​

Once it is installed, you will need to log in to the Artifactory and Flowable using the following command:

flowable login
info

  • Artifactory login is needed to fetch Flowable npm packages

  • Flowable login supports both on premise and cloud environments

Create your library​

We'll need a library where the new custom components would be added:

flowable components init
info

  • A library is a project designed for front-end components

  • Use your preferred version control system to store them

Finally, let’s go to the newly created library, and don’t forget to install the dependencies.

cd [library-name]
yarn

Create your component​

The library is empty, to create our first custom component let's run:

flowable components create

Build your component​

There are two parts for every custom component, the configuration and the coding. In the configuration part, you will edit how the component looks in the editor and which properties it has.

Configuration​

Navigate to the User menu -> Custom Components and then select your custom component to edit.

Once the component has been configured you can run the next command to have your component typescript types updated with your new configuration: 

flowable components types

Every component consists of the next files:

File name
{component-name}.tsxYour implementation of the custom component. It is a React functional component
config.ymlConfiguration for the CLI
{component-name}.scssOptional, you can create this file if you decide to style your component with scss. Bear in mind that Tailwind is supported out of the box
Code​

Implement your component, you can use the development server to see your changes live in the editor:

flowable components watch
info
  • You can go to examples for advanced use cases (Soon)

Upload the library​

Once you are finished you can run the command to upload the library to the Flowable servers.

flowable components upload
info

  • This will make it available only for the developers inside your organization

  • This allows you to test your component before make it visible for every user

Install the library​

Once tested you can make it available for everyone. Go to the User menu -> Custom Components and then select the option Install. Once installed, everyone in your organization will be able to see it and use it.