[Docs] cloud custom form widget examples (#6083)

* Docs for AAE 2829

* * sample improved

* * redonly improved

* minor changes

demo-shell/src/app/app.module.ts

@@ -81,6 +81,8 @@ import { DemoErrorComponent } from './components/error/demo-error.component';
 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 { registerLocaleData } from '@angular/common';
 import localeFr from '@angular/common/locales/fr';
@@ -185,7 +187,9 @@ registerLocaleData(localeSv);
         PeopleGroupCloudDemoComponent,
         ConfirmDialogExampleComponent,
         FormCloudDemoComponent,
-        ConfirmDialogExampleComponent
+        ConfirmDialogExampleComponent,
+        SampleWidgetComponent,
+        ProcessCloudLayoutComponent
     ],
     providers: [
         {

demo-shell/src/app/app.routes.ts

@@ -53,6 +53,7 @@ import { ConfirmDialogExampleComponent } from './components/confirm-dialog/confi
 import { DemoErrorComponent } from './components/error/demo-error.component';
 import { TaskHeaderCloudDemoComponent } from './components/cloud/task-header-cloud-demo.component';
 import { FilteredSearchComponent } from './components/files/filtered-search.component';
+import { ProcessCloudLayoutComponent } from './components/cloud/process-cloud-layout.component';
 
 export const appRoutes: Routes = [
     { path: 'login', loadChildren: () => import('./components/login/login.module').then(m => m.AppLoginModule) },
@@ -197,6 +198,7 @@ export const appRoutes: Routes = [
                         path: ':appName',
                         canActivate: [AuthGuardSsoRoleService],
                         data: { clientRoles: ['appName'], roles: ['ACTIVITI_USER'], redirectUrl: '/error/403' },
+                        component: ProcessCloudLayoutComponent,
                         children: [
                             {
                                 path: '',

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

@@ -16,9 +16,19 @@
  */
 
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { FormFieldModel, NotificationService, CoreAutomationService, FormModel, FormRenderingService } from '@alfresco/adf-core';
+import {
-import { FormCloudService, CloudFormRenderingService } from '@alfresco/adf-process-services-cloud';
+    CoreAutomationService,
+    FormFieldModel,
+    FormModel,
+    FormRenderingService,
+    NotificationService
+} from '@alfresco/adf-core';
+import {
+    CloudFormRenderingService,
+    FormCloudService
+} from '@alfresco/adf-process-services-cloud';
 import { Subscription } from 'rxjs';
+import { SampleWidgetComponent } from '../../../cloud/custom-form-components/sample-widget.component';
 
 @Component({
     templateUrl: 'cloud-form-demo.component.html',
@@ -47,7 +57,11 @@ export class FormCloudDemoComponent implements OnInit, OnDestroy {
     constructor(
         private notificationService: NotificationService,
         private formService: FormCloudService,
-        private automationService: CoreAutomationService) {
+        private automationService: CoreAutomationService,
+        private formRenderingService: FormRenderingService) {
+        this.formRenderingService.register({
+            'custom': () => SampleWidgetComponent
+        });
     }
 
     logErrors(errorFields: FormFieldModel[]) {

demo-shell/src/app/components/cloud/custom-form-components/sample-widget.component.ts

@@ -0,0 +1,57 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, OnInit } from '@angular/core';
+import { FormService, WidgetComponent } from '@alfresco/adf-core';
+
+@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>
+            </p>
+
+            <mat-form-field *ngIf="!(field.readOnly || readOnly)">
+                <label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span *ngIf="isRequired()">*</span></label>
+                <input matInput
+                       class="adf-input"
+                       type="text"
+                       [id]="field.id"
+                       [required]="isRequired()"
+                       [value]="field.value"
+                       [(ngModel)]="field.value"
+                       (ngModelChange)="onFieldChanged(field)">
+            </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;
+
+    constructor(public formService: FormService) {
+        super(formService);
+    }
+
+    ngOnInit() {
+        this.displayValue = this.field.value;
+    }
+}

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

@@ -0,0 +1,36 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+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';
+
+@Component({
+    template: `<router-outlet></router-outlet>`,
+    providers: [
+        { provide: FormRenderingService, useClass: CloudFormRenderingService }
+    ]
+})
+export class ProcessCloudLayoutComponent {
+
+    constructor(private formRenderingService: FormRenderingService) {
+        this.formRenderingService.register({
+            'custom': () => SampleWidgetComponent
+        });
+    }
+}