custom widget not visible

[cipriandrusca]

I added a new custom widget and also include it in the module. The question is - how will know the schema when to display it , for which data type? Should I add something else somewhere? Thankyou.

[Thorski]

You have to register the widget with a name which you then use in the layout, such as for a TreeSelectWidgetComponent to be used if 'tree-select' is indicated in the layout: import { WidgetLibraryService } from 'angular2-json-schema-form'; ...

  constructor(private widgetLibrary: WidgetLibraryService) {}
  public ngOnInit(): void {
    this.widgetLibrary.registerWidget("tree-select", TreeSelectWidgetComponent);
  }

.. then in your layout use "type": "tree-select",

[cipriandrusca]

Thank you for the answer. The problem is that I don't have a custom layout.To be more clearly: I'm using the angular2-json-form-schema as a dependency in package.json and I want to include my custom widget inside and export all the module (with my widget and all widget from angular2-json-form-schema). To be honest for me it's not clear what <<then in your layout use "type": "tree-select">> means.

[ClaudeStephan]

I added all my custom widgets into a module: EX (using the "tree-select" from @Thorski above):

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';

import {JsonSchemaFormModule} from 'angular2-json-schema-form';
import {TreeSelectWidgetComponent} from './custom-widget';

@NgModule({
    imports: [
        CommonModule,
        JsonSchemaFormModule
    ],
    declarations: [
        TreeSelectWidgetComponent,
    exports: [],
    entryComponents: [
        TreeSelectWidgetComponent,
    ]
})

export class FieldWidgetsModule {
}

Note that you'll have to declare your custom widgets in "entryComponents". Import your custom widget in the component you need it, declare it: customWidgets = { 'tree-select': TreeSelectWidgetComponent 'select': TreeSelectWidgetComponent }; Add your custom widgets to the json-schema directive in your component HTML:

    <json-schema-form
            [schema]="Schema"
            [layout]="Layout"
            [options]="jsonFormOptions"
            **[widgets]="customWidgets"**
            (onSubmit)="onSubmitFn($event)"
    >

Hope that helps in declaring it.

Now let's say that you made a custom widget for select, arrays, input, tree-select, dancing monkey, etc. In the customWidgets object above 'select' and 'tree-select' are field types. EX:

 {
  "schema": {
      "pizza": {
      "title": "Name",
      "type": "string"
    }
      "other": {
      "title": "Other",
      "type": "string"
    }
 },
  "layout": [
    {
     'key': 'pizza',
     "type": "select"
      "title": "The select will now look, work like the custom widget TreeSelectWidgetComponent"
    },
    {
     'key': 'other',
     "type": "tree-select"
      "title": "This is the new custom type/widget tree-select; TreeSelectWidgetComponent"
     }
 ]}

As far as I can tell your custom widgets, if it's not replacing the default widget for that certain type, will only trigger if you declare it's type in the form/layout in your json-schema. More info here: https://www.npmjs.com/package/angular2-json-schema-form#changing-or-adding-widgets Hope this helps.

[cipriandrusca]

Thanks a lot! Actually works great! 👍 Have a nice day!