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

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

Browse Source 
* Docs for AAE 2829

* * sample improved

* * redonly improved

* minor changes
This commit is contained in:
dhrn 2020-09-11 02:01:51 +05:30 committed by GitHub
parent ca92cc3ad6
commit 5d3c86d75f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 117 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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: [
{

2
demo-shell/src/app/app.routes.ts
View File

@ -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: '',

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

@ -16,9 +16,19 @@
*/
import { Component, OnDestroy, OnInit } from '@angular/core';
import { FormFieldModel, NotificationService, CoreAutomationService, FormModel, FormRenderingService } from '@alfresco/adf-core';
import { FormCloudService, CloudFormRenderingService } from '@alfresco/adf-process-services-cloud';
import {
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[]) {

57
demo-shell/src/app/components/cloud/custom-form-components/sample-widget.component.ts Normal file
View File

@ -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;
}
}

36
demo-shell/src/app/components/cloud/process-cloud-layout.component.ts Normal file
View File

@ -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
});
}
}