Custom form builder with resources

[ssrini]

Following this example to make a custom form builder: http://formio.github.io/formio.js/app/examples/custombuilder.html

Can you please help and explain how to add "Available Resources" to this? A couple of resources have been defined and we need that included in the form builder?

Thanks in advance

[travist]

This would need to be added manually. The following code could do it.

export class FormEditComponent extends FormManagerEditComponent implements OnInit {
  public showBuilder = false;
  public formBuilderOptions: any = {
    builder: {
      resources: {
        title: 'Resource Fields',
        weight: 10000,
        groups: {}
      }
    }
  };

  constructor(
    public service: FormManagerService,
    public router: Router,
    public route: ActivatedRoute,
    public config: FormManagerConfig,
    public ref: ChangeDetectorRef,
    public alerts: FormioAlerts
  ) {
    super(service, router, route, config, ref, alerts);
  }

  getResources(tag: string) {
    const formio = new Formio(AppConfig.appUrl);
    return formio.loadForms({params: {
      type: 'resource',
      tags: tag
    }});
  }

  ngOnInit() {
    let groupWeight = 10;
    this.getResources('builder').then(resources => {
      resources.forEach(resource => {
        groupWeight = parseInt(_get(resource, 'properties.weight', (groupWeight + 10)), 10);
        // Add the resource group.
        const group = {
          key: resource.name,
          title: resource.title,
          weight: groupWeight,
          components: []
        };
        resource.components.forEach(component => {
          const defaultInfo = components[component.type] ? components[component.type].builderInfo : {};
          if (component.type !== 'button' && component.action !== 'submit') {
            group.components.push({
              key: component.key,
              title: component.label || component.title || component.key,
              group: resource.name,
              icon: (component.properties && component.properties.icon) ? component.properties.icon : defaultInfo.icon,
              schema: component
            });
          }
        });
        this.formBuilderOptions.builder.resources.groups[resource.name] = group;
      });
      this.showBuilder = true;
    });
  }
}