custom component get component reference when render the component

[shilokeisar]

I'm developing in ANGULAR 10

I use form.io form-builder to render components

I add custom component that drow grid (ag-grid) According to this link add custom Components with Angular Elements

every think work well

I drag and drop the table several times to draw multiple tables.
I enclose a photo of how the form looks like after the drag and drop action into the form

The problem .

when form.io render my custom component that draw the ag-grid , i need to get the connection string and the sql statement from the component definition (json).

I do not know how to get this information from my custom component at the time it's be rendering. Without this information, I do not know generate the column names and row's content.

This is my project

builder component contain the formio tag

aggrid component is my custom component for display ag grid

formio.ts

import { Injector } from '@angular/core'; import { FormioCustomComponentInfo, registerCustomFormioComponent } from 'angular-formio'; import { AggridWrapperComponent } from './aggrid-wrapper.component';

export function minimalEditForm() {
  return {
    components: [
      { key: 'type', type: 'hidden' },

      {
        weight: 10,
        type: 'textarea',
        input: true,
        key: 'key',
        label: 'sql statement',
        tooltip: 'please enter your sql statement',
      }
    ],
  };
}
const COMPONENT_OPTIONS: FormioCustomComponentInfo = {
  type: 'sqlaggrid',
  selector: 'sql-grid',
  editForm: minimalEditForm,
  title: 'sql-grid',
  group: 'basic',
  icon: 'fa fa-star',
};

export function registerAgGridComponent(injector: Injector) {
  registerCustomFormioComponent(COMPONENT_OPTIONS, AggridWrapperComponent, injector);

}

aggrid-wrapper.component.html

<ag-grid-angular style="width: 500px; height: 500px;" class="ag-theme-alpine"
   [gridOptions]="gridOptions">
</ag-grid-angular>

AggridWrapperComponent

    import { Component, EventEmitter, Input, ElementRef, Output ,ViewChild} from '@angular/core';
    import { FormioCustomComponent } from 'angular-formio';

    import { Grid, GridOptions } from "ag-grid";

    @Component({
      selector: 'app-aggrid-wrapper',
      templateUrl: './aggrid-wrapper.component.html',
      styleUrls: ['./aggrid-wrapper.component.css']
    })

    export class AggridWrapperComponent implements FormioCustomComponent<number>  {
      @Input()
      value: number;  //number is missing (null)

      @ViewChild('aggrid') input; 

      @Output()
      valueChange = new EventEmitter<number>();

      @Input()
      disabled: boolean;

      private _value: number;

      public gridOptions: GridOptions;

      constructor(private elRef: ElementRef) {
        this.gridOptions = <GridOptions>{
          columnDefs: this.createColumnsDefs(),
          onGridReady: (params) => {
            this.gridOptions.api.setRowData(this.executeStatement());
          }
        }
      }

      createColumnsDefs() {

        /* return the grid columns */

       /*If I could get the field definition containing the SQL statement   then I could return the columns of the grid */
        return ???;
      }
    executeStatement(){

    /* get the grid rows  */
/*If I could get the field definition containing the SQL statement   then I could execute the statement and back the rows  */
    return ??? */

    }

    }

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule ,Injector } from '@angular/core';
import { RouterModule } from '@angular/router';
import {AppConfig} from './formio-config';
//import { AppRoutingModule } from './app-routing.module'
import { FormioModule } from 'angular-formio';
import { AppComponent } from './app.component';
import { BuilderComponent } from './builder/builder.component';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { RatingWrapperComponent } from './rating-wrapper/rating-wrapper.component';
import { registerAgGridComponent} from './aggrid-wrapper/formio'
import { AggridWrapperComponent } from './aggrid-wrapper/aggrid-wrapper.component';
import { AgGridModule } from 'ag-grid-angular';

import { HttpClientModule } from '@angular/common/http';

@NgModule({

  declarations: [
    AppComponent,
    BuilderComponent,
    AggridWrapperComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
    FormioModule,
    BrowserAnimationsModule,
    NgbModule,
    AgGridModule.withComponents([])
  ],
  exports: [RouterModule],
  providers: [ ],
  bootstrap: [AppComponent]

})
export class AppModule{

  constructor(injector: Injector) {
    registerAgGridComponent(injector)
  }
}

I am missing the reference to the component definition

any idea ?

[travist]

This would be part of the component JSON that is injected into the renderer. I am not familiar with how the custom component stuff works, but from lookin at https://github.com/formio/angular-formio/blob/master/projects/angular-formio/src/custom-component/create-custom-component.ts#L43 it appears that it is defined as this.component. This means that these settings should be available in that object.

[dev-thinks]

I know this is old thread, but i think this below clue might help someone to setup the default values in the builder custom controls.

const COMPONENT_OPTIONS: FormioCustomComponentInfo = {
  type: 'sqlaggrid',
  selector: 'sql-grid',
  editForm: minimalEditForm,
  title: 'sql-grid',
  group: 'basic',
  icon: 'fa fa-star',
  schema: {
    label: 'To setup the label default value, assign the value here in schema of that control [key] name',
  },
};