Extending the properties panel changed significantly with
bpmn-js-properties-panel>=1. For the0.xversion of the library, check out the old version of this 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.
- 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.
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';Install all required dependencies:
npm install
Build and run the project
npm start
MIT