properties-panel-async-extension

Extending the properties panel changed significantly with bpmn-js-properties-panel>=1. For the 0.x version of the library, check out the old version of this example.

Properties Panel Async Extension Example

This example is based on the properties panel extension example. Its goal is to present how the 1.x series of bpmn-js-properties-panel support asynchronous data loading.

For an advanced async extension example, check out this repository.

Prerequisites

• You know how to extend the properties panel. Check out the properties panel extension example for guidance.
• You have basic knowledge on Preact hooks.
• You know how to use the Fetch API.

About

Most of the code of this example is a copy of the properties panel extension example. Here, we will only refer to what is added on top of that.

In this example, the spells are provided by a simple express server. Source code of the server is located in server.js.

The properties panel extension loads data asynchronously with the Fetch API. It is made available in the component via Preact hooks.

const [ spells, setSpells ] = useState([]);

useEffect(() => {
  function fetchSpells() {
    fetch('http://localhost:1234/spell')
      .then(res => res.json())
      .then(spellbook => setSpells(spellbook))
      .catch(error => console.error(error));
  }

  fetchSpells();
}, [ setSpells ]);

const getOptions = () => {
  return [
    { label: '<none>', value: undefined },
    ...spells.map(spell => ({
      label: spell,
      value: spell
    }))
  ];
}

Note that the hooks need to be imported from preact vendored in @bpmn-io/properties-panel:

import { useEffect, useState } from '@bpmn-io/properties-panel/preact/hooks';

Running the Example

Install all required dependencies:

npm install

Build and run the project

npm start

License

MIT