APS Form Component

• Library Contents
  • Components
  • Services
• Prerequisites
• Install
• ActivitiForm Component
  • Properties
  • Advanced properties
  • Events
  • Controlling outcome execution behaviour
• Activiti Content Component
  • Properties
  • Events
• FormService Service
  • Events
  • Methods
• Common scenarios
  • Changing field value based on another field
  • Listen all form Events
• See also
• Build from sources
• NPM scripts
• Demo
• License

See it live: Form Quickstart

Library Contents

Components

• ActivitiForm
• ActivitiStartForm

Services

• FormService
• ActivitiAlfrescoContentService
• EcmModelService
• FormRenderingService
• NodeService
• WidgetVisibilityService

Prerequisites

Before you start using this development framework, make sure you have installed all required software and done all the necessary configuration, see this page.

> If you plan using this component with projects generated by Angular CLI, please refer to the following article: Using ADF with Angular CLI

Install

npm install ng2-activiti-form

ActivitiForm Component

The component shows a Form from Activiti

Display form instance by task id:

For an existing Task both form and values will be fetched and displayed.

Display form definition by form id:

Only form definition will be fetched.

Display form definition by form name:

Display form definition by ECM nodeId:

In this case the metadata of the node are showed in an activiti Form. If there is no form definied in activiti for the type of the node, a new form will be automaticaly created in Activiti.

Display form definition by form name, and store the form field as metadata:

The param nameNode is optional.

Display form definition by ECM nodeId:

In this case the metadata of the node are showed in an activiti Form, and store the form field as metadata. The param nameNode is optional.

Properties

The recommended set of properties can be found in the following table:

Advanced properties

The following properties are for complex customisation purposes:

Events

All form* events receive an instance of the FormModel as event argument for ease of development:

MyView.component.html

MyView.component.ts

onFormSaved(form: FormModel) {
    console.log(form);
}

Controlling outcome execution behaviour

If absolutely needed it is possible taking full control over form outcome execution by means of executeOutcome event. This event is fired upon each outcome execution, both system and custom ones.

You can prevent default behaviour by calling event.preventDefault(). This allows for example having custom form validation scenarios and/or additional validation summary presentation.

Alternatively you may want just running additional code on outcome execution without suppressing default one.

MyView.component.html

MyView.component.ts

import { FormOutcomeEvent } from 'ng2-activiti-form';

export class MyView {

    validateForm(event: FormOutcomeEvent) {
        let outcome = event.outcome;
        
        // you can also get additional properties of outcomes 
        // if you defined them within outcome definition
        
        if (outcome) {
            let form = outcome.form;
            if (form) {
                // check/update the form here
                event.preventDefault();
            }
        }
    }
    
}

There are two additional functions that can be of a great value when controlling outcomes:

• saveTaskForm() - saves current form
• completeTaskForm(outcome?: string) - save and complete form with a given outcome name

Please note that if event.preventDefault() is not called then default outcome behaviour will also be executed after your custom code.

Activiti Content Component

The component shows the content preview.

Properties

The recommended set of properties can be found in the following table:

Events

FormService Service

import { FormService, FormEvent, FormFieldEvent } from 'ng2-activiti-form';

@Component(...)
class MyComponent {

    constructor(formService: FormService) {

        formService.formLoaded.subscribe(
            (e: FormEvent) => {
                console.log(`Form loaded: ${e.form.id}`);
            }
        );

        formService.formFieldValueChanged.subscribe(
            (e: FormFieldEvent) => {
                console.log(`Field value changed. Form: ${e.form.id}, Field: ${e.field.id}, Value: ${e.field.value}`);
            }
        );

    }

}

Events

Methods

Common scenarios

Changing field value based on another field

Create a simple Form with a dropdown widget (id: type), and a multiline text (id: description).

formService.formFieldValueChanged.subscribe((e: FormFieldEvent) => {
    if (e.field.id === 'type') {
        const fields: FormFieldModel[] = e.form.getFormFields();
        const description = fields.find(f => f.id === 'description');
        if (description != null) {
            console.log(description);
            description.value = 'Type set to ' + e.field.value;
        }
    }
});

You subscribe to the formFieldValueChanged event and check whether event is raised for the type widget, then you search for a description widget and assign its value to some simple text.

The result should be as following:

Listen all form Events

If you want listen all the events fired the form you can subscribe to this Subject :

formService.formEvents.subscribe((event: Event) => {
  console.log('Event fired:' + event.type);
  console.log('Event Target:' + event.target);
});

See also

• Form Stencils with Angular 2
• Form Extensibility and Customisation.

Build from sources

You can build component from sources with the following commands:

npm install
npm run build

> The build task rebuilds all the code, runs tslint, license checks > and other quality check tools before performing unit testing.

NPM scripts

Demo

Please check the demo folder for a demo project

cd demo
npm install
npm start

License

Apache Version 2.0