alfresco-ng2-components/docs/user-guide/apa-extensions.md

Title, Added

Title	Added
Form Extensibility for APA Form Widget	v4.1.0

Form Extensibility for APA Form Widget

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

Contents

There are two ways to customize the form

• Replace default form widgets with custom components
• Replace custom form widget with custom components

Replace default form widgets with APA form widgets

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

1. 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',
       standalone: true,
       template: `
           <div style="color: red">Look, I'm a APA custom editor!</div>
       `
   })
   export class CustomEditorComponent extends WidgetComponent {}
   

2. Import the FormRenderingService in the feature module, or application module (recommended: ProcessServicesExtensionModule), and override the default mapping:

   import { CustomEditorComponent } from './custom-editor.component';
   import { FormRenderingService } from '@alfresco/adf-core';
   
   @NgModule({...})
   export class ProcessServicesExtensionModule {
       constructor(formRenderingService: FormRenderingService) {
           this.formRenderingService.register({
               'text': () => CustomEditorComponent
           }, true);
       }
   }
   

Important

The widget should be registered outside the custom widget component, otherwise the widget will not be registered correctly.

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:

1. Create a standalone Angular component:

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

2. Import the FormRenderingService in the feature module, or application module (recommended: ProcessServicesExtensionModule), and override the default mapping:

   import { DemoWidgetComponent } from './demo-widget.component';
   import { FormRenderingService } from '@alfresco/adf-core';
   
   @NgModule({/*...*/})
   export class ProcessServicesExtensionModule {
       constructor(formRenderingService: FormRenderingService) {
           formRenderingService.register({
               'custom-editor': () => DemoWidgetComponent
           });
       }
   }
   

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

Important

The widget should be registered outside the custom widget component, otherwise the widget will not be registered correctly.

See Also

• Extensibility
• Form field model
• Form rendering service
• Form component
• Widget component