Form Extensibility for APA Form Widget

Application Development Framework ADF Documentation User guideForm Extensibility for APA Form Widget

Form Extensibility for APA Form Widget

This page describes how you can customize ADF forms to your own specification.

Replace default form widgets with APA form widgets

This is an example of replacing the standard Text widget with a custom component for all APA forms rendered within the <adf-form> component.

Create a simple form with some Text widgets:

Every custom widget component must inherit the WidgetComponent class in order to function properly:

import { Component } from '@angular/core';
import { WidgetComponent } from '@alfresco/adf-core';
@Component({
    selector: 'custom-editor',
    template: `
        <div style="color: red">Look, I'm a APA custom editor!</div>
    `
})
class CustomEditorComponent extends WidgetComponent {}

Add it to the application module or any custom module that is imported into the application one:

import { NgModule } from '@angular/core';
import { CustomEditorComponent } from './custom-editor.component';
@NgModule({
    declarations: [ CustomEditorComponent ],
    exports: [ CustomEditorComponent ]
})
class CustomEditorsModule {}

Every custom widget component should be added into the the collections declarations and exports. If you decided to store custom widgets in a separate dedicated module (and optionally as a separate re-distributable library) don't forget to import it into the main application:

@NgModule({
    imports: [
        // ...
        CustomEditorsModule
        // ...
    ],
    providers: [],
    bootstrap: [ AppComponent ]
})
class AppModule {}

Import the FormRenderingService into any of your Views and override the default mapping, for example:

import { Component } from '@angular/core';
import { CustomEditorComponent } from './custom-editor.component';
@Component({...})
class MyView {
    constructor(formRenderingService: FormRenderingService) {
        this.formRenderingService.register({
            'text': () => CustomEditorComponent
        }, true);
    }
}

At runtime the form should look similar to the following:

Replace custom form widgets with custom components

This is an example of rendering custom form widgets using custom Angular components.

Create a custom form widget

To begin, create a basic form widget and call it demo-widget:

Note: The type is important as it will become the field type when the form is rendered.

You can now design a form that uses your custom form widget:

Create a custom widget

When displayed in a task, the field will look similar to the following:

To render the missing content:

Create an Angular component:

import { Component } from '@angular/core';
import { WidgetComponent } from '@alfresco/adf-core';
@Component({
    selector: 'app-demo-widget',
    template: `<div style="color: green">ADF version of custom form widget</div>`
})
class DemoWidgetComponent extends WidgetComponent {}

Place it inside the custom module:

import { NgModule } from '@angular/core';
import { DemoWidgetComponent } from './demo-widget.component';
@NgModule({
    declarations: [ DemoWidgetComponent ],
    exports: [ DemoWidgetComponent ]
})
class CustomWidgetsModule {}

Import it into your Application Module:

@NgModule({
    imports: [
        // ...
        CustomWidgetsModule
        // ...
    ],
    providers: [],
    bootstrap: [ AppComponent ]
})
class AppModule {}

Import the FormRenderingService in any of your Views and provide the new mapping:

import { Component } from '@angular/core';
import { DemoWidgetComponent } from './demo-widget.component';
@Component({...})
class MyView {
    constructor(formRenderingService: FormRenderingService) {
        this.formRenderingService.register({
            'custom-editor': () => DemoWidgetComponent
        });
    }
}

At runtime you should now see your custom Angular component rendered in place of the original form widgets: