How to Package Angular Elements based Custom Component for Use in form.io Portal [Custom Components]

[tvaidyan]

I followed the guide in the Wiki to create an Angular Elements based custom component. On my local dev machine, I can create a new Angular project using the Angular CLI, add the necessary formio NPM packages, create the custom component and register it in my AppModule, define a new form.io form in another angular component as a JSON structure and have the dynamic form render my custom component.

Now, how can I take this component and package it up in such a way that I can have my non-technical team members who has access to the form.io portal use this custom component? i.e., how can I have this appear as a new item in the toolbox that they can drag and drop into the forms that they are building?

[MaksimFalei]

Hello @tvaidyan You can do it by specifying a static get method inside your custom component 'builderInfo'. Simple example:

static get builderInfo() {
    return {
      title: 'Your cstom component title',
      icon: 'fa fa-puzzle-piece',
      group: 'advanced',
      weight: -10,
      schema: YourCustomComponent.schema(),
    };
  }

Hopefully, it will help you. Best regards