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.

warning

If you are using an on-premises solution, make sure to check that your environment is set up correctly

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)

Build the library​

Once you are finished you can first buil your library

flowable components build

And then upload it to Flowable Design.

flowable components upload --patch
info

  • Semver flags --major, --minor and --patch are available for flowable components upload

  • To test your component before make it visible for every user you can run upload with the flag --draft