mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-4152] Restructured remaining doc folders and fixed links (#4441)
* [ADF-4152] Moved proc services cloud docs to subfolders * [ADF-4152] Fixed links in PS cloud docs * [ADF-4152] Added subfolders and checked links for extensions and insights docs * [ADF-4152] Moved proc services cloud docs to subfolders * [ADF-4152] Fixed links in PS cloud docs * [ADF-4152] Added subfolders and checked links for extensions and insights docs * [ADF-4152] Fixed links in Proc cloud, Insights and Extensions docs * [ADF-4152] Updated links in user guide * [ADF-4152] Fixed broken links in tutorials * [ADF-4152] Fixed remaining links in core docs * [ADF-4152] Fixed remaining links in proc services docs * [ADF-4152] Fixed remaining links in content services docs * [ADF-4152] Fixed links in breaking changes docs * [ADF-4152] Updated main README index page * [ADF-4152] Fixed glitches with preview ext component docs
This commit is contained in:
Andy Stark
committed by
Eugenio Romano
Eugenio Romano
parent
8edf92f325
commit
31479cfaa4
@@ -0,0 +1,191 @@
|
||||
---
|
||||
Title: Process Instance List Cloud component
|
||||
Added: v3.0.0
|
||||
Status: Experimental
|
||||
Last reviewed: 2018-11-09
|
||||
---
|
||||
|
||||
# [Process Instance List Cloud component](../../../lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.ts "Defined in process-list-cloud.component.ts")
|
||||
|
||||
Renders a list containing all the process instances matched by the parameters specified.
|
||||
|
||||
## Contents
|
||||
|
||||
- [Basic Usage](#basic-usage)
|
||||
- [Transclusions](#transclusions)
|
||||
- [Class members](#class-members)
|
||||
- [Properties](#properties)
|
||||
- [Events](#events)
|
||||
- [Details](#details)
|
||||
- [Setting Sorting Order for the list](#setting-sorting-order-for-the-list)
|
||||
- [Pagination strategy](#pagination-strategy)
|
||||
- [See also](#see-also)
|
||||
|
||||
## Basic Usage
|
||||
|
||||
**app.component.html**
|
||||
|
||||
```html
|
||||
<adf-cloud-process-list
|
||||
[appName]="'app-name'">
|
||||
</adf-cloud-process-list>
|
||||
```
|
||||
|
||||
### [Transclusions](../../user-guide/transclusion.md)
|
||||
|
||||
Any content inside an `<adf-custom-empty-content>` sub-component will be shown
|
||||
when the process list is empty:
|
||||
|
||||
```html
|
||||
<adf-cloud-process-list>
|
||||
<adf-custom-empty-content>
|
||||
Your Content
|
||||
</adf-custom-empty-content>
|
||||
<adf-cloud-process-list>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| appName | `string` | "" | The name of the application. |
|
||||
| appVersion | `string` | "" | The related application version. |
|
||||
| businessKey | `string` | "" | Filter the tasks to display only the ones with this businessKey value. |
|
||||
| id | `string` | "" | Filter the processes to display only the ones with this ID. |
|
||||
| initiator | `string` | "" | Name of the initiator of the process. |
|
||||
| multiselect | `boolean` | false | Toggles multiple row selection and renders checkboxes at the beginning of each row |
|
||||
| name | `string` | "" | Filter the processes to display only the ones with this name. |
|
||||
| presetColumn | `string` | | Custom preset column schema in JSON format. |
|
||||
| processDefinitionId | `string` | "" | Filter the processes to display only the ones with this process definition ID. |
|
||||
| processDefinitionKey | `string` | "" | Filter the processes to display only the ones with this process definition key. |
|
||||
| selectionMode | `string` | "single" | Row selection mode. Can be "none", "single" or "multiple". For multiple mode, you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows. |
|
||||
| sorting | [`ProcessListCloudSortingModel`](../../../lib/process-services-cloud/src/lib/process/process-list/models/process-list-sorting.model.ts)`[]` | | Array of objects specifying the sort order and direction for the list. The sort parameters are for BE sorting. |
|
||||
| status | `string` | "" | Filter the processes to display only the ones with this status. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when an error occurs while loading the list of process instances from the server. |
|
||||
| rowClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<string>` | Emitted when a row in the process list is clicked. |
|
||||
| rowsSelected | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any[]>` | Emitted when rows are selected/unselected. |
|
||||
| success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when the list of process instances has been loaded successfully from the server. |
|
||||
|
||||
## Details
|
||||
|
||||
You can define a custom schema for the list in the `app.config.json` file and access it with the
|
||||
`presetColumn` property as shown below:
|
||||
|
||||
```json
|
||||
"`adf-cloud-process-list`": {
|
||||
"presets": {
|
||||
"customSchema": [
|
||||
{
|
||||
"key": "name",
|
||||
"type": "text",
|
||||
"title": "name",
|
||||
"sortable": true
|
||||
}],
|
||||
"default": [
|
||||
{
|
||||
"key": "name",
|
||||
"type": "text",
|
||||
"title": "name",
|
||||
"sortable": true
|
||||
}],
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```html
|
||||
<adf-cloud-process-list
|
||||
[appName]="'appName'">
|
||||
</adf-cloud-process-list>
|
||||
```
|
||||
|
||||
You can also define the schema in the HTML using the
|
||||
[Data column component](../../core/components/data-column.component.md). You can combine this with schema
|
||||
information defined in `app.config.json` as in the example below:
|
||||
|
||||
```json
|
||||
"adf-cloud-process-list": {
|
||||
"presets": {
|
||||
"customSchema": [
|
||||
{
|
||||
"key": "id",
|
||||
"type": "text",
|
||||
"title": "Id",
|
||||
"sortable": true
|
||||
}],
|
||||
"default": [
|
||||
{
|
||||
"key": "name",
|
||||
"type": "text",
|
||||
"title": "name",
|
||||
"sortable": true
|
||||
}],
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
<!-- {% raw %} -->
|
||||
|
||||
```html
|
||||
<adf-cloud-process-list
|
||||
[appName]="'appName'" >
|
||||
<data-columns>
|
||||
<data-column key="key" title="title" class="full-width name-column">
|
||||
<ng-template let-entry="$implicit">
|
||||
<div>{{getFullName(entry.row.obj.assignee)}}</div>
|
||||
</ng-template>
|
||||
</data-column>
|
||||
</data-columns>
|
||||
</adf-cloud-process-list>
|
||||
```
|
||||
|
||||
These are all the available columns that can be displayed in this component:
|
||||
**_appName_**, **_businessKey_**, **_description_**, **_id_**, **_initiator_**, **_lastModified_**, **_processName_**, **_parentId_**, **_processDefinitionId_**, **_processDefinitionKey_**, **_startDate_** and **_status_**.
|
||||
|
||||
### Setting Sorting Order for the list
|
||||
|
||||
You can specify a sorting order as shown in the example below:
|
||||
|
||||
```ts
|
||||
let sorting = [{ orderBy: 'status', direction: 'desc' }];
|
||||
```
|
||||
|
||||
```html
|
||||
<adf-cloud-process-list
|
||||
[appName]="'appName'"
|
||||
[sort]="sorting">
|
||||
</adf-cloud-process-list>
|
||||
```
|
||||
|
||||
<!-- {% endraw %} -->
|
||||
|
||||
### Pagination strategy
|
||||
|
||||
The Process Instance List also supports pagination:
|
||||
|
||||
```html
|
||||
<adf-cloud-process-list
|
||||
[appId]="'1'"
|
||||
[page]="page"
|
||||
[size]="size"
|
||||
#processList>
|
||||
</adf-cloud-process-list>
|
||||
<adf-pagination
|
||||
*ngIf="processList"
|
||||
[target]="processList"
|
||||
[supportedPageSizes]="supportedPages"
|
||||
#processListPagination>
|
||||
</adf-pagination>
|
||||
```
|
||||
|
||||
## See also
|
||||
|
||||
- [Data column component](../../core/components/data-column.component.md)
|
||||
- [Data Table Adapter interface](../../core/interfaces/datatable-adapter.interface.md)
|
||||
- [Pagination component](../../core/components/pagination.component.md)
|
||||
Reference in New Issue
Block a user