From 951ecabe22402f7539cb98a316df75c14ef3c90c Mon Sep 17 00:00:00 2001
From: Francesco Corti <fcorti@gmail.com>
Date: Fri, 16 Oct 2020 13:00:23 +0200
Subject: [PATCH] AAE renamed APA in guides and files. (#6257)
---
...ae-form-widget.png => apa-form-widget.png} | Bin
...th-widget.png => apa-form-with-widget.png} | Bin
...ved-widget.png => apa-resolved-widget.png} | Bin
...ae-simple-form.png => apa-simple-form.png} | Bin
...-form.png => apa-simple-override-form.png} | Bin
...d-widget.png => apa-unresolved-widget.png} | Bin
docs/user-guide/aae-extensions.md | 24 +--
docs/user-guide/apa-extensions.md | 172 ++++++++++++++++++
8 files changed, 184 insertions(+), 12 deletions(-)
rename docs/docassets/images/{aae-form-widget.png => apa-form-widget.png} (100%)
rename docs/docassets/images/{aae-form-with-widget.png => apa-form-with-widget.png} (100%)
rename docs/docassets/images/{aae-resolved-widget.png => apa-resolved-widget.png} (100%)
rename docs/docassets/images/{aae-simple-form.png => apa-simple-form.png} (100%)
rename docs/docassets/images/{aae-simple-override-form.png => apa-simple-override-form.png} (100%)
rename docs/docassets/images/{aae-unresolved-widget.png => apa-unresolved-widget.png} (100%)
create mode 100644 docs/user-guide/apa-extensions.md
diff --git a/docs/docassets/images/aae-form-widget.png b/docs/docassets/images/apa-form-widget.png
similarity index 100%
rename from docs/docassets/images/aae-form-widget.png
rename to docs/docassets/images/apa-form-widget.png
diff --git a/docs/docassets/images/aae-form-with-widget.png b/docs/docassets/images/apa-form-with-widget.png
similarity index 100%
rename from docs/docassets/images/aae-form-with-widget.png
rename to docs/docassets/images/apa-form-with-widget.png
diff --git a/docs/docassets/images/aae-resolved-widget.png b/docs/docassets/images/apa-resolved-widget.png
similarity index 100%
rename from docs/docassets/images/aae-resolved-widget.png
rename to docs/docassets/images/apa-resolved-widget.png
diff --git a/docs/docassets/images/aae-simple-form.png b/docs/docassets/images/apa-simple-form.png
similarity index 100%
rename from docs/docassets/images/aae-simple-form.png
rename to docs/docassets/images/apa-simple-form.png
diff --git a/docs/docassets/images/aae-simple-override-form.png b/docs/docassets/images/apa-simple-override-form.png
similarity index 100%
rename from docs/docassets/images/aae-simple-override-form.png
rename to docs/docassets/images/apa-simple-override-form.png
diff --git a/docs/docassets/images/aae-unresolved-widget.png b/docs/docassets/images/apa-unresolved-widget.png
similarity index 100%
rename from docs/docassets/images/aae-unresolved-widget.png
rename to docs/docassets/images/apa-unresolved-widget.png
diff --git a/docs/user-guide/aae-extensions.md b/docs/user-guide/aae-extensions.md
index 743dd6153a..453dd7244b 100644
--- a/docs/user-guide/aae-extensions.md
+++ b/docs/user-guide/aae-extensions.md
@@ -1,23 +1,23 @@
---
-Title: Form Extensibility for AAE Form Widget
+Title: Form Extensibility for APA Form Widget
Added: v4.1.0
---
-## Form Extensibility for AAE Form Widget
+## 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-default-form-widgets-with-aae-form-widgets)
+- [Replace default form widgets with custom components](#replace-default-form-widgets-with-apa-form-widgets)
- [Replace custom form widget with custom components](#replace-custom-form-widgets-with-custom-components)
-## Replace default form widgets with AAE form widgets
+## Replace default form widgets with APA form widgets
-This is an example of replacing the standard `Text` [widget](../../lib/testing/src/lib/core/pages/form/widgets/widget.ts) with a custom component for all AAE forms rendered within the `<adf-form>` component.
+This is an example of replacing the standard `Text` [widget](../../lib/testing/src/lib/core/pages/form/widgets/widget.ts) 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`](../insights/components/widget.component.md) class in order to function properly:
@@ -27,7 +27,7 @@ This is an example of replacing the standard `Text` [widget](../../lib/testing/s
@Component({
selector: 'custom-editor',
template: `
- <div style="color: red">Look, I'm a AAE custom editor!</div>
+ <div style="color: red">Look, I'm a APA custom editor!</div>
`
})
export class CustomEditorComponent extends WidgetComponent {}
@@ -77,7 +77,7 @@ This is an example of replacing the standard `Text` [widget](../../lib/testing/s
5. At runtime the form should look similar to the following:
- 
+ 
## Replace custom form widgets with custom components
@@ -88,19 +88,19 @@ This is an example of rendering custom form widgets using custom Angular compone
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:
@@ -161,7 +161,7 @@ To render the missing content:
At runtime you should now see your custom Angular component rendered in place of the original form widgets:
-
+
## See Also
diff --git a/docs/user-guide/apa-extensions.md b/docs/user-guide/apa-extensions.md
new file mode 100644
index 0000000000..453dd7244b
--- /dev/null
+++ b/docs/user-guide/apa-extensions.md
@@ -0,0 +1,172 @@
+---
+Title: Form Extensibility for APA Form Widget
+Added: 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-default-form-widgets-with-apa-form-widgets)
+- [Replace custom form widget with custom components](#replace-custom-form-widgets-with-custom-components)
+
+## Replace default form widgets with APA form widgets
+
+This is an example of replacing the standard `Text` [widget](../../lib/testing/src/lib/core/pages/form/widgets/widget.ts) 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`](../insights/components/widget.component.md) class in order to function properly:
+
+ ```ts
+ 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>
+ `
+ })
+ export class CustomEditorComponent extends WidgetComponent {}
+ ```
+
+2. Add it to the application module or any custom module that is imported into the application one:
+
+ ```ts
+ import { NgModule } from '@angular/core';
+ import { CustomEditorComponent } from './custom-editor.component';
+ @NgModule({
+ declarations: [ CustomEditorComponent ],
+ exports: [ CustomEditorComponent ]
+ })
+ export class CustomEditorsModule {}
+ ```
+
+3. 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:
+
+ ```ts
+ @NgModule({
+ imports: [
+ // ...
+ CustomEditorsModule
+ // ...
+ ],
+ providers: [],
+ bootstrap: [ AppComponent ]
+ })
+ export class AppModule {}
+ ```
+
+4. Import the [`FormRenderingService`](../core/services/form-rendering.service.md) into any of your Views and override the default mapping, for example:
+
+ ```ts
+ import { Component } from '@angular/core';
+ import { CustomEditorComponent } from './custom-editor.component';
+ @Component({...})
+ export class MyView {
+ constructor(formRenderingService: FormRenderingService) {
+ this.formRenderingService.register({
+ 'text': () => CustomEditorComponent
+ }, true);
+ }
+ }
+ ```
+
+5. 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 an Angular component:
+
+ ```ts
+ 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>`
+ })
+ export class DemoWidgetComponent extends WidgetComponent {}
+ ```
+
+2. Place it inside the custom module:
+
+ ```ts
+ import { NgModule } from '@angular/core';
+ import { DemoWidgetComponent } from './demo-widget.component';
+ @NgModule({
+ declarations: [ DemoWidgetComponent ],
+ exports: [ DemoWidgetComponent ]
+ })
+ export class CustomWidgetsModule {}
+ ```
+
+3. Import it into your Application Module:
+
+ ```ts
+ @NgModule({
+ imports: [
+ // ...
+ CustomWidgetsModule
+ // ...
+ ],
+ providers: [],
+ bootstrap: [ AppComponent ]
+ })
+ export class AppModule {}
+ ```
+
+4. Import the [`FormRenderingService`](../core/services/form-rendering.service.md) in any of your Views and provide the new mapping:
+
+ ```ts
+ import { Component } from '@angular/core';
+ import { DemoWidgetComponent } from './demo-widget.component';
+ @Component({...})
+ export 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:
+
+
+
+## See Also
+
+- [Extensibility](./extensibility.md)
+- [Form field model](../core/models/form-field.model.md)
+- [Form rendering service](../core/services/form-rendering.service.md)
+- [Form component](../core/components/form.component.md)
+- [Widget component](../insights/components/widget.component.md)