bpmn-io/form-js-examples

A collection of form-js examples.

form-js-examples

Examples that illustrate uses of form-js.

form-js-examples's Issues

Add example for custom form elements

What should we do?

We should add one (or more) examples of how to create custom form elements.

This should include

• Provide custom form field definitions + rendering
• Provide properties panel extensions
• Provide custom styling
• ...

Some helpful resources:

• bpmn-js custom elements example
• bpmn-js properties panel extension example
• Example extension project

Why should we do it?

Give our users good examples of consuming our custom form elements API.

Related to bpmn-io/form-js#123
Depends on bpmn-io/form-js#776

can't reuse entryFields from @bpmn-io/properties-panel

Describe the Bug

if wrap playgroundForm in preact component - it work fine
if then add custom component from sample - got error in NumberField

Steps to Reproduce

1. npm create vite@latest wrapper-sample -- --template preact
2. add playground in wrapper (its work fine):

export function App() {
  useEffect(() => {
    const container = document.getElementById('anchor');
    console.log(container);
    new FormPlayground({
      container,
      schema,
      data: {},
    });
  }, []);
  return (
    <div id="anchor" />
  )
}

3. add custom component from custom-sample

    new FormPlayground({
      container,
      schema,
      data: {},

      // load rendering extension
      additionalModules: [
        RenderExtension
      ],

      // load properties panel extension
      editorAdditionalModules: [
        PropertiesPanelExtension
      ]
    });

4. render fine, but on attempt drug Range to form - got error in console

wrapper-sample

Expected Behavior

no error, custom component work as in custom-sample

Environment

• Host (Browser/Node version), if applicable: FireFox 119, Node 18.16.0
• OS: Ubuntu 22.04
• Library version: @bpmn-io/form-js ^1.4.0

Error when using custom component in FormEditor

Description

I've encountered a problem when trying to integrate a custom component into FormEditor. I was following an example for FormPlayground, but when using it within FormEditor, selecting the custom Range component in the UI throws an error.

Code to Reproduce

formEditorRef.value = new FormEditor({
  container: document.querySelector('#form-editor'),
  additionalModules: [
    RangeExtension,
    PropertiesPanelExtension,
  ],
});

Expected Behavior

The custom component should be available and functional within the form editor without any errors.

Actual Behavior

When selecting the custom Range component in the interface, the following JavaScript error is displayed:
Uncaught TypeError: Cannot read properties of undefined (reading '__H')

Screenshots

Steps to Reproduce

1. Integrate the custom Range component into FormEditor using the code provided above.
2. Open the form editor UI.
3. Select the custom Range component.
4. Notice the error in the browser console.

Additional Information

Version of bpmn-io/form-js: 1.7.0
Version Vue.js: 3.2.45

Can't build custom components in production mode

Describe the Bug

Can't build custom components in production mode

Steps to Reproduce

1. open webpack.config.js in custom-components
2. change mode to production
3. npm start
4. Uncaught Error: No provider for "e"! (Resolving: rangeField -> e)

Environment

• Host Chrome
• OS: Macos
• Library version: 1.6.4

Document usage of new formfield props as an example

Is your feature request related to a problem? Please describe.

We've made some changes to how form-fields work by extracting a few properties to be computed in the form-field parent class. This may be worth documenting here as per bpmn-io/form-js#808 (comment)

Describe the solution you'd like

• will add details later :)

Viewer example in Angular

How would the form-js viewer be integrated with Angular forms?

My current customer has already built a custom tasklist for Camunda Platform using Angular. They already have Camunda's REST API integrated to query and complete tasks. For very simple forms, it would be great to design them using form-js as it is included in Camunda Modeler. One could then imagine letting the form keys of the user tasks reference the JSON form definitions for the tasklist to load them.

Could you provide a code example of how the form-js viewer would interact with the Angular programming model?

Add playground starter example

What should we do?

We should add the playground to our starter examples.

Why should we do it?

Offer an easy entry point on how to consume the form-js-playground.

Cf. bpmn-io/form-js#328

Also cf. to other examples in bpmn-io projects