alfresco-ng2-components/docs/process-services-cloud/edit-process-filter-cloud.component.md
siva kumar bc5208b767 [ADF-3977] EditProcessComponent - Be able to change the sort and actions (#4250)
* [ADF-3883] Improve edit-process-filter-cloud by adding inputs to control filters, sort and actions

* Provided an input to pass sort properties
* Provided an input to pass filter actions
* Provided a way to configure sort properties and actions

* * Updated unit tests to the recent changes
* Fixed order should be visible if sort as been added to the config
* Fixed if lastModified if defined the component should show the range lastModifiedTo lastModifiedFrom
* Updated doc

* * Removed ProcessFilterActionType* Renamed state to status* Refactored edit-process-filter * Updated doc

* * After rebase

* * Fixed editProcessFilter e2e tests.

* * Removed unwanted comment

* * After rebase

* * After rebase

* * After rebase
2019-03-13 17:10:19 +00:00

6.6 KiB

Title, Added, Status, Last reviewed
Title Added Status Last reviewed
Edit Process Filter Cloud component v3.0.0 Experimental 2019-01-30

Edit Process Filter Cloud component

Shows Process Filter Details.

edit-process-filter-cloud

Contents

Basic Usage

<adf-cloud-edit-process-filter
    [id]="processFilterId"
    [appName]="appName"
    [filterProperties]="filterProperties"s
    (filterChange)="onFilterChange($event)"
    (action)="onAction($event)">
</adf-cloud-edit-process-filter>

Class members

Properties

Name Type Default value Description
actions string[] List of sort actions.
appName string The name of the application.
filterProperties string[] List of process filter properties to display
id string Id of the process instance filter.
showFilterActions boolean true Toggles editing of process filter actions.
showTitle boolean true Toggles editing of the process filter title.
sortProperties string[] List of sort properties to display.

Events

Name Type Description
action EventEmitter<ProcessFilterAction> Emitted when a filter action occurs i.e Save, SaveAs, Delete.
filterChange EventEmitter<ProcessFilterCloudModel> Emitted when a process instance filter property changes.

Details

Editing APS2 process filters

Use the appName and id properties to choose which process filter to edit:

<adf-cloud-edit-process-filter
    [id]="processFilterId"
    [appName]="appName">
</adf-cloud-edit-process-filter>

Filter properties

You can supply various filter properties to edit that will determine which processes are found by a filter. The full set of properties is given below:

Name Description
appName Name of the app
processInstanceId Process instance ID
processName Process name.
initiator ID of the user who initiated the process
status Execution status of the process.
processDefinitionId Process definition ID
processDefinitionKey Process definition key
lastModified Date the process was last modified. If lastModified defined the component will show the range lastModifiedTo, lastModifiedFrom
startDate Date the process was started
sort Field on which the filter results will be sorted (doesn't participate in the filtering itself). Can be "id", "name", "status" or "startDate".
order Sort ordering of the filter results (this doesn't participate in the filtering itself)

By default, the status, sort and order properties are displayed in the editor. However, you can also choose which properties to show using the filterProperties array. For example, the code below initializes the editor with the appName, processInstanceId, startDate and lastModified properties:

export class SomeComponent implements OnInit {

    filterProperties: string[] = [
        "appName",
        "processInstanceId",
        "startDate",
        "lastModified"];

    onFilterChange(filter: ProcessFilterCloudModel) {
        console.log('On filter change: ', filter);
    }

    onAction($event: ProcessFilterAction) {
        console.log('Clicked action: ', $event);
    }
<adf-cloud-edit-process-filter
    [id]="processFilterId"
    [appName]="applicationName"
    [filterProperties]="filterProperties">
</adf-cloud-edit-process-filter>

With this configuration, only the four listed properties will be shown.

Sort properties

You can supply various sort properties to sort the processes.

By default, the id, name, status and startDate properties are displayed in the editor. However, you can also choose which sort properties to show using the sortProperties array. For example, the code below initializes the editor with the startDate and lastModified properties:

export class SomeComponent implements OnInit {

    sortProperties: string[] = [
        "startDate",
        "lastModified"];

    onFilterChange(filter: ProcessFilterCloudModel) {
        console.log('On filter change: ', filter);
    }

    onAction($event: ProcessFilterAction) {
        console.log('Clicked action: ', $event);
    }
<adf-cloud-edit-process-filter
    [id]="processFilterId"
    [appName]="applicationName"
    [sortProperties]="sortProperties">
</adf-cloud-edit-process-filter>

With this configuration, only the two listed sort properties will be shown.

Action properties

You can supply various actions to apply on process filter.

Name Description
save Save process filter.
saveAs Creates a new process filter.
delete Delete process filter.

By default, the save, saveAs and delete actions are displayed in the editor. However, you can also choose which actions to show using the actions array. For example, the code below initializes the editor with the save and delete actions:

export class SomeComponent implements OnInit {

    actions: string[] = ['save', 'delete'];

    onFilterChange(filter: ProcessFilterCloudModel) {
        console.log('On filter change: ', filter);
    }

    onAction($event: ProcessFilterAction) {
        console.log('Clicked action: ', $event);
    }
<adf-cloud-edit-process-filter
    [id]="processFilterId"
    [appName]="applicationName"
    [actions]="actions">
</adf-cloud-edit-process-filter>

With this configuration, only the two actions will be shown.

See also