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

[AAE-3493] Update the documentation to provide the proper guidance on custom forms widgets for APA and APS developers (#6158)

Browse Source 
* * improve docs

* * assets fixed

* * links fixed

* * versions fixed

* * assets added

* * fix links

* Update docs/user-guide/aae-extensions.md

Co-authored-by: Mark Hulbert <39801222+m-hulbert@users.noreply.github.com>

* Update docs/user-guide/aae-extensions.md

Co-authored-by: Mark Hulbert <39801222+m-hulbert@users.noreply.github.com>

* Update docs/user-guide/aae-extensions.md

Co-authored-by: Mark Hulbert <39801222+m-hulbert@users.noreply.github.com>

* Update docs/user-guide/aae-extensions.md

Co-authored-by: Mark Hulbert <39801222+m-hulbert@users.noreply.github.com>

* Update docs/user-guide/aae-extensions.md

Co-authored-by: Mark Hulbert <39801222+m-hulbert@users.noreply.github.com>

* Update docs/user-guide/aae-extensions.md

Co-authored-by: Mark Hulbert <39801222+m-hulbert@users.noreply.github.com>

* Update docs/user-guide/aae-extensions.md

Co-authored-by: Mark Hulbert <39801222+m-hulbert@users.noreply.github.com>

* Update docs/user-guide/aae-extensions.md

Co-authored-by: Mark Hulbert <39801222+m-hulbert@users.noreply.github.com>

* Update docs/user-guide/aae-extensions.md

Co-authored-by: Mark Hulbert <39801222+m-hulbert@users.noreply.github.com>

* Update docs/user-guide/aae-extensions.md

Co-authored-by: Mark Hulbert <39801222+m-hulbert@users.noreply.github.com>

* Update docs/user-guide/aae-extensions.md

Co-authored-by: Mark Hulbert <39801222+m-hulbert@users.noreply.github.com>

* Update docs/user-guide/aae-extensions.md

Co-authored-by: Mark Hulbert <39801222+m-hulbert@users.noreply.github.com>

* Apply suggestions from code review

Co-authored-by: Mark Hulbert <39801222+m-hulbert@users.noreply.github.com>

* * example fixed

* * minor changes

* Make stencils document step-based

Co-authored-by: Mark Hulbert <39801222+m-hulbert@users.noreply.github.com>
Co-authored-by: Mark Hulbert <mark.hulbert@alfresco.com>
This commit is contained in:
dhrn
2020-09-25 17:12:37 +05:30
committed by GitHub
parent c84ef7318f
commit d7f0fa5aa0
13 changed files with 411 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
demo-shell/src/app/app.module.ts
View File

@@ -82,7 +82,10 @@ import { ProcessServicesCloudModule } from '@alfresco/adf-process-services-cloud
import { FilteredSearchComponent } from './components/files/filtered-search.component';
import { RouterModule } from '@angular/router';
import { ProcessCloudLayoutComponent } from './components/cloud/process-cloud-layout.component';
import { SampleWidgetComponent } from './components/cloud/custom-form-components/sample-widget.component';
import {
CustomEditorComponent,
CustomWidgetComponent
} from './components/cloud/custom-form-components/custom-editor.component';
import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
@@ -188,7 +191,8 @@ registerLocaleData(localeSv);
ConfirmDialogExampleComponent,
FormCloudDemoComponent,
ConfirmDialogExampleComponent,
SampleWidgetComponent,
CustomEditorComponent,
CustomWidgetComponent,
ProcessCloudLayoutComponent
],
providers: [

16
demo-shell/src/app/components/app-layout/cloud/form-demo/cloud-form-demo.component.ts
View File

@@ -28,7 +28,10 @@ import {
FormCloudService
} from '@alfresco/adf-process-services-cloud';
import { Subscription } from 'rxjs';
import { SampleWidgetComponent } from '../../../cloud/custom-form-components/sample-widget.component';
import {
CustomEditorComponent,
CustomWidgetComponent
} from '../../../cloud/custom-form-components/custom-editor.component';
@Component({
templateUrl: 'cloud-form-demo.component.html',
@@ -60,7 +63,16 @@ export class FormCloudDemoComponent implements OnInit, OnDestroy {
private automationService: CoreAutomationService,
private formRenderingService: FormRenderingService) {
this.formRenderingService.register({
'custom': () => SampleWidgetComponent
'demo-widget': () => CustomEditorComponent,
'custom-editor': () => CustomEditorComponent,
'custom-string': () => CustomWidgetComponent,
'custom-datetime': () => CustomWidgetComponent,
'custom-file': () => CustomWidgetComponent,
'custom-number': () => CustomWidgetComponent,
'custom-something': () => CustomWidgetComponent,
'custom-boolean': () => CustomWidgetComponent,
'custom-date': () => CustomWidgetComponent,
'custom': () => CustomWidgetComponent
});
}

26
demo-shell/src/app/components/cloud/custom-form-components/sample-widget.component.ts → demo-shell/src/app/components/cloud/custom-form-components/custom-editor.component.ts
View File

@@ -17,14 +17,29 @@
import { Component, OnInit } from '@angular/core';
import { FormService, WidgetComponent } from '@alfresco/adf-core';
// tslint:disable:component-selector
@Component({
selector: 'custom-editor-widget',
template: `
<div style="color: green">
ADF version of custom form widget
</div>
`
})
export class CustomEditorComponent extends WidgetComponent {
constructor() {
super();
}
}
@Component({
selector: 'app-sample-widget',
template: `
<div style="color: red">
Look, I'm custom cloud form widget!
<p *ngIf="field.readOnly || readOnly">
Value :: <span> {{displayValue}}</span>
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span *ngIf="isRequired()">*</span></label>
<span>{{field.value}}</span>
</p>
<mat-form-field *ngIf="!(field.readOnly || readOnly)">
@@ -37,21 +52,20 @@ import { FormService, WidgetComponent } from '@alfresco/adf-core';
[value]="field.value"
[(ngModel)]="field.value"
(ngModelChange)="onFieldChanged(field)">
<mat-hint>{{field.placeholder}}</mat-hint>
</mat-form-field>
<error-widget [error]="field.validationSummary"></error-widget>
<error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
</div>
`
})
export class SampleWidgetComponent extends WidgetComponent implements OnInit {
displayValue: string;
export class CustomWidgetComponent extends WidgetComponent implements OnInit {
constructor(public formService: FormService) {
super(formService);
}
ngOnInit() {
this.displayValue = this.field.value;
this.field.value = typeof this.field.value === 'object' ? JSON.stringify(this.field.value) : this.field.value;
}
}

13
demo-shell/src/app/components/cloud/process-cloud-layout.component.ts
View File

@@ -18,7 +18,7 @@
import { Component } from '@angular/core';
import { FormRenderingService } from '@alfresco/adf-core';
import { CloudFormRenderingService } from '@alfresco/adf-process-services-cloud';
import { SampleWidgetComponent } from './custom-form-components/sample-widget.component';
import { CustomEditorComponent, CustomWidgetComponent } from './custom-form-components/custom-editor.component';
@Component({
template: `<router-outlet></router-outlet>`,
@@ -30,7 +30,16 @@ export class ProcessCloudLayoutComponent {
constructor(private formRenderingService: FormRenderingService) {
this.formRenderingService.register({
'custom': () => SampleWidgetComponent
'custom-editor': () => CustomEditorComponent,
'demo-widget': () => CustomEditorComponent,
'custom-string': () => CustomWidgetComponent,
'custom-datetime': () => CustomWidgetComponent,
'custom-file': () => CustomWidgetComponent,
'custom-number': () => CustomWidgetComponent,
'custom-something': () => CustomWidgetComponent,
'custom-boolean': () => CustomWidgetComponent,
'custom-date': () => CustomWidgetComponent,
'custom': () => CustomWidgetComponent
});
}
}