custom widget not visible
cipriandrusca opened this issue · 4 comments
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.
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",
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.
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.
Thanks a lot! Actually works great! 👍 Have a nice day!