inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-31 17:38:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

AAE renamed APA in guides and files. (#6257)

Browse Source
This commit is contained in:
Francesco Corti
2020-10-16 13:00:23 +02:00
committed by GitHub
parent 16e589c196
commit 951ecabe22
8 changed files with 184 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
docs/user-guide/aae-extensions.md
View File

@@ -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:
![default text widget](../docassets/images/aae-simple-form.png)
![default text widget](../docassets/images/apa-simple-form.png)
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:
![custom text widget](../docassets/images/aae-simple-override-form.png)
![custom text widget](../docassets/images/apa-simple-override-form.png)
## 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`:
![custom form widget](../docassets/images/aae-form-widget.png)
![custom form widget](../docassets/images/apa-form-widget.png)
**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:
![custom form widget form](../docassets/images/aae-form-with-widget.png)
![custom form widget form](../docassets/images/apa-form-with-widget.png)
### Create a custom widget
When displayed in a task, the field will look similar to the following:
![adf form widget](../docassets/images/aae-unresolved-widget.png)
![adf form widget](../docassets/images/apa-unresolved-widget.png)
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:
![adf form widget runtime](../docassets/images/aae-resolved-widget.png)
![adf form widget runtime](../docassets/images/apa-resolved-widget.png)
## See Also