Demo custom form components

[pinussilvestrus]

What should we do?

Create an easy way to demo and test custom form components.

• Upload form component extension into the Playground Demo, this includes
  • Rendering extension
  • Properties Panel extension
  • Custom styles
• Deploy demo and gather feedback

Why should we do it?

Related to bpmn-io/form-js#123

[pinussilvestrus]

A basic demo is available via https://106-custom-form-components--camunda-form-playground.netlify.app/

• Upload extension into the environment, consists of
  • Rendering extension
  • Properties Panel extension
  • Custom styles

This example extension can be used as a reference (use bundled files in the dist folder).

This includes some "hacks" to make it work for demo purposes, as of

• The demo pipes some reusable components and utilizes via window (similar as we do in the Camunda Modeler)
  • Set components in window inside the app
  • Use components from window in the extensions
• Extensions need to load themselves into window so the app can later load them easily
• Preact needed to be deduplicated in the app
• Extensions should be bundled, e.g. to properly load svg icons, ...
• The extensions are saved in the local storage, as there is no database layer in the playground environment as of now.

[nikku]

This is interesting! To better understand the integration

• Core: Provides ability to customize (renderer, properties panel)
• Playground (or "modeler"): Provides the ability to site-load extensions

Am I correct with this assumption?

[nikku]

Related to (and supporting) the de-duplication effort we plan to work on https://github.com/bpmn-io/internal-docs/issues/819 at the core.

[pinussilvestrus]

This is interesting! To better understand the integration

• Core: Provides ability to customize (renderer, properties panel)
• Playground (or "modeler"): Provides the ability to site-load extensions

Am I correct with this assumption?

This is exactly how it works 👍 Note that I (mis)used the playground here to demo something fast (point 2); this is not necessarily what we are going to build. However I simply re-use existing plugin mechanism of the Desktop Modeler, as it just works 🙂

@christian-konrad wants to create an epic about further integrating custom form elements in Modelers + Tasklist. This demo is more to showcase the upcoming core features (point 1).

[pinussilvestrus]

Some examples what one can build with the demo (sneak peeks from @christian-konrad)

Bildschirmaufnahme.2023-09-22.um.09.42.58.mov

[pinussilvestrus]

Demo was built, this issue was achieved.

[jenishPaladiya-TGS]

A basic demo is available via https://106-custom-form-components--camunda-form-playground.netlify.app/

• Upload extension into the environment, consists of

  • Rendering extension
  • Properties Panel extension
  • Custom styles

This example extension can be used as a reference (use bundled files in the dist folder).

This includes some "hacks" to make it work for demo purposes, as of

• The demo pipes some reusable components and utilizes via window (similar as we do in the Camunda Modeler)

  • Set components in window inside the app
  • Use components from window in the extensions

• Extensions need to load themselves into window so the app can later load them easily

• Preact needed to be deduplicated in the app

• Extensions should be bundled, e.g. to properly load svg icons, ...

• The extensions are saved in the local storage, as there is no database layer in the playground environment as of now.

is the functionality to add custom form elements via upload js file is now available for use in 1.5.0-alpha.0 version?
because i implemented form js playground in my custom react application and there i cant found option for upload custom form elementes.

[pinussilvestrus]

@jenishPaladiya-TGS Unfortunately, the upload function was only for demo purposes and won't be included in form-js or form-playground - also due to security reasons as you can basically inject anything via this upload.

@christian-konrad cc

[jenishPaladiya-TGS]

@jenishPaladiya-TGS Unfortunately, the upload function was only for demo purposes and won't be included in form-js or form-playground - also due to security reasons as you can basically inject anything via this upload.

@christian-konrad cc

Thanks for confirmation

For this 1.5.0-alpha.0 version can i able to create custom elements like (Upload files , ratings , Third party grid , signature pad).
as i'm guessing that the support for custom element is not fully completed.

[pinussilvestrus]

For this 1.5.0-alpha.0 version can i able to create custom elements like (Upload files , ratings , Third party grid , signature pad).

Depending on how your custom components should work, it should be completely possible to build them with the latest version.

For more questions please head over to our forum where you will find people to assist you 👍

[pinussilvestrus]

In case you have any feedback / feature request, feel free to create an issue.

[jenishPaladiya-TGS]

For this 1.5.0-alpha.0 version can i able to create custom elements like (Upload files , ratings , Third party grid , signature pad).

Depending on how your custom components should work, it should be completely possible to build them with the latest version.

For more questions please head over to our forum where you will find people to assist you 👍

okay thanks for confirmation

I have React component (e.g. AGGrid) , can we add react component with all hooks support (e.g. useState, useEffect etc) as a custom element?

I had tried to implement but getting below exception

This is a code of my component

const [rowData] = useState([
    { make: "Toyota", model: "Celica", price: 35000 },
    { make: "Ford", model: "Mondeo", price: 32000 },
    { make: "Porsche", model: "Boxter", price: 72000 }
  ]);

  const [columnDefs] = useState([
    { field: "make" },
    { field: "model" },
    { field: "price" }
  ]);

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <AgGridReact rowData={rowData} columnDefs={columnDefs}></AgGridReact>
    </div>
  );

by this im rendering that component as a custom element

return html`
    <div
      class=${formFieldClasses(gridType, {
        errors,
        disabled,
        readonly,
      })}
    >
      <${Label}
        id=${prefixId(id, formId)}
        label=${label}
        required=${required}
      />
      <${GridComp} />
    </div>
  `;

and getting below exception

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
   See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

if i revert the component code to this (Like simply remove UseState hook from component)

function GridComp() {
  const [rowData] = [
    { make: "Toyota", model: "Celica", price: 35000 },
    { make: "Ford", model: "Mondeo", price: 32000 },
    { make: "Porsche", model: "Boxter", price: 72000 },
  ];

  const [columnDefs] = [
    { field: "make" },
    { field: "model" },
    { field: "price" },
  ];

  return (
    <div className="ag-theme-alpine" style={{ height: 500, width: 600 }}>
      <AgGridReact rowData={rowData} columnDefs={columnDefs}></AgGridReact>
    </div>
  );
}

Then also giving exception.

Cannot add property __, object is not extensible
TypeError: Cannot add property __, object is not extensible

[pinussilvestrus]

This looks like a preact duplication error to me, preact has to be included only once. Cf. to our example on how to properly deduplicate preact: https://github.com/bpmn-io/form-js-examples/blob/master/custom-components/webpack.config.js

Requoting to what I mention above

For more questions please head over to our forum where you will find people to assist you 👍

We want to keep our issues clean. Thanks for your understanding!