Formjs properties panel cannot be extended

Users
1

Hey guys o/,

I copied/pasted the form.js custom range element from the examples page into my Reactjs project in vite with the following code:

import { useRef, useEffect } from "react";
import { FormEditor } from "@bpmn-io/form-js";

import "@bpmn-io/form-js/dist/assets/form-js.css";
import "@bpmn-io/form-js/dist/assets/properties-panel.css";
import "@bpmn-io/form-js/dist/assets/form-js-editor.css";

import RangeExtension from "./custom/range/render";
import RangePropertiesPanelExtension from "./custom/range/propertiesPanel";

export const Formularios: React.FC = () => {
  const bpmnFormRef = useRef<FormEditor | null>(null);

  useEffect(() => {
    try {
      bpmnFormRef.current = new FormEditor({
        container: "#form",
        additionalModules: [RangeExtension],
        editorAdditionalModules: [RangePropertiesPanelExtension],
      });

      bpmnFormRef.current?.importSchema({
        components: [],
        type: "default",
      });

      return () => {
        bpmnFormRef.current?.destroy();
      };
    } catch (e) {
      const error = e as ErrorEvent;
      console.log(error.message);
    }
  }, []);

  return <div id="form" className="w-full h-full" />;
};

The form works just fine, but the properties panel does not render the range group
2024-04-17_17-49

The example works but mine doesn’t. Do your guys think I’m missing something?
I want to show the custom group on the panel so I can create my own component.

I have these versions in my package.json

"@bpmn-io/form-js": "^1.8.4",
"@bpmn-io/properties-panel": "^3.18.1",

I also have this error when viewing the form on production mode
Error: No provider for "formFields2"! (Resolving: rangeField -> formFields2)
But I think it’s a different issue.

Here’s the example code

2

One thing to note is that the example code runs in a FormPlayground, but when changed to FormEditor, the same problem appears

3

I faced with the same problem.
In my case it’s because of in FormEditor and FormViewer you need to paste
your RangePropertiesPanelExtension to additionalModules (not editorAdditionalModules) while initializing form in App.tsx

1 Like
4

Just add this to your additionalModules

  formEditor = new FormEditor({
    container: container,
    data: {},

    // load rendering extension
    additionalModules: [RenderExtension, PropertiesPanelExtension],

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

Hello,

Facing same problem in production mode!

Error: No provider for "formFields2"! (Resolving: rangeField -> formFields2)

were you able to find a solution?