[ADF-1453] Restructure README.md files (#2239)
* ADF-1453: Restructured Activiti Analytics readme * ADF-1453: Restructured Activiti Diagrams readme * ADF-1453: Restructured Activiti Form readme * ADF-1453: Restructured Activiti Process List readme * ADF-1453: Restructured Activiti Task List readme * ADF-1453: Restructured Alfresco Core readme * [ADF-1453] Restructured DataTable readme * [ADF-1453] Restructured Document List readme * [ADF-1453] Restructured Login readme * [ADF-1453] Restructured Alfresco Search readme * [ADF-1453] Restructured Alfresco Social readme * [ADF-1453] Restructured Alfresco Tag readme * [ADF-1453] Restructured Alfresco User Info readme * [ADF-1453] Restructured Alfresco Viewer readme * [ADF-1453] Restructured Alfresco Webscript readme * [ADF-1453] Fixed table display glitch * [ADF-1453] Fixed Markdown lint errors in readme files * [ADF-1453] Adding missing fileUploadDelete event to table in Upload readme * [ADF-1453] Resolved merge conflict with Upload readme * [ADF-1453] Changes from npm run doc
@@ -26,60 +26,18 @@
|
|||||||
|
|
||||||
### Components
|
### Components
|
||||||
|
|
||||||
<!-- CORE START-->
|
<!-- CORE START--><!-- CORE END-->
|
||||||
- [adf-card-view](ng2-alfresco-core/README.md)
|
|
||||||
- [adf-card-view-textitem](ng2-alfresco-core/README.md)
|
|
||||||
- [adf-card-view-mapitem](ng2-alfresco-core/README.md)
|
|
||||||
- [adf-card-view-item-dispatcher](ng2-alfresco-core/README.md)
|
|
||||||
- [adf-card-view-dateitem](ng2-alfresco-core/README.md)
|
|
||||||
- [adf-toolbar](ng2-alfresco-core/README.md)
|
|
||||||
- [adf-toolbar-title](ng2-alfresco-core/README.md)
|
|
||||||
- [adf-context-menu-holder](ng2-alfresco-core/README.md)
|
|
||||||
- [adf-accordion](ng2-alfresco-core/README.md)
|
|
||||||
- [adf-accordion-group](ng2-alfresco-core/README.md)<!-- CORE END-->
|
|
||||||
<!-- CORE END-->
|
<!-- CORE END-->
|
||||||
|
|
||||||
### Directives
|
### Directives
|
||||||
|
|
||||||
<!-- CORE DIRECTIVE START-->
|
<!-- CORE DIRECTIVE START--><!-- CORE DIRECTIVE END-->
|
||||||
- [adf-card-view-content-proxy](ng2-alfresco-core/README.md)
|
|
||||||
- [adf-context-menu](ng2-alfresco-core/README.md)
|
|
||||||
- [adf-mdl-textfield](ng2-alfresco-core/README.md)
|
|
||||||
- [adf-mdl-menu](ng2-alfresco-core/README.md)
|
|
||||||
- [adf-upload](ng2-alfresco-core/README.md)<!-- CORE DIRECTIVE END-->
|
|
||||||
|
|
||||||
## Content service
|
## Content service
|
||||||
|
|
||||||
### Components
|
### Components
|
||||||
|
|
||||||
<!-- CONTENT START-->
|
<!-- CONTENT START--><!-- CONTENT END-->
|
||||||
- [adf-search-control](ng2-alfresco-search/README.md)
|
|
||||||
- [adf-search](ng2-alfresco-search/README.md)
|
|
||||||
- [adf-search-autocomplete](ng2-alfresco-search/README.md)
|
|
||||||
- [adf-upload-button](ng2-alfresco-upload/README.md)
|
|
||||||
- [adf-upload-drag-area](ng2-alfresco-upload/README.md)
|
|
||||||
- [adf-file-uploading-list](ng2-alfresco-upload/README.md)
|
|
||||||
- [adf-file-uploading-dialog](ng2-alfresco-upload/README.md)
|
|
||||||
- [adf-file-uploading-list-row](ng2-alfresco-upload/README.md)
|
|
||||||
- [adf-sites-dropdown](ng2-alfresco-documentlist/README.md)
|
|
||||||
- [adf-content-node-selector](ng2-alfresco-documentlist/README.md)
|
|
||||||
- [adf-document-menu-action](ng2-alfresco-documentlist/README.md)
|
|
||||||
- [adf-dropdown-breadcrumb](ng2-alfresco-documentlist/README.md)
|
|
||||||
- [adf-breadcrumb](ng2-alfresco-documentlist/README.md)
|
|
||||||
- [adf-document-list](ng2-alfresco-documentlist/README.md)
|
|
||||||
- [adf-pagination](ng2-alfresco-core/src/components/pagination/pagination.md)
|
|
||||||
- [adf-empty-list](ng2-alfresco-datatable/README.md)
|
|
||||||
- [adf-datatable](ng2-alfresco-datatable/README.md)
|
|
||||||
- [adf-datatable-cell](ng2-alfresco-datatable/README.md)
|
|
||||||
- [adf-viewer](ng2-alfresco-viewer/README.md)
|
|
||||||
- [adf-userinfo](ng2-alfresco-userinfo/README.md)
|
|
||||||
- [adf-rating](ng2-alfresco-social/README.md)
|
|
||||||
- [adf-like](ng2-alfresco-social/README.md)
|
|
||||||
- [adf-tag-node-list](ng2-alfresco-tag/README.md)
|
|
||||||
- [adf-tag-list](ng2-alfresco-tag/README.md)
|
|
||||||
- [adf-tag-node-actions-list](ng2-alfresco-tag/README.md)
|
|
||||||
- [adf-login](ng2-alfresco-login/README.md)
|
|
||||||
- [adf-webscript-get](ng2-alfresco-webscript/README.md)<!-- CONTENT END-->
|
|
||||||
<!-- CONTENT END-->
|
<!-- CONTENT END-->
|
||||||
|
|
||||||
<!-- CONTENT DIRECTIVE START--><!-- CONTENT DIRECTIVE END-->
|
<!-- CONTENT DIRECTIVE START--><!-- CONTENT DIRECTIVE END-->
|
||||||
@@ -88,103 +46,14 @@
|
|||||||
|
|
||||||
### components
|
### components
|
||||||
|
|
||||||
<!-- BUSINESS START-->
|
<!-- BUSINESS START--><!-- BUSINESS END-->
|
||||||
- [adf-diagram-publish-task](ng2-activiti-diagrams/README.md)
|
|
||||||
- [adf-start-process](ng2-activiti-processlist/README.md)
|
|
||||||
- [adf-process-instance-list](ng2-activiti-processlist/README.md)
|
|
||||||
- [adf-process-instance-variables](ng2-activiti-processlist/README.md)
|
|
||||||
- [adf-process-instance-tasks](ng2-activiti-processlist/README.md)
|
|
||||||
- [adf-process-instance-header](ng2-activiti-processlist/README.md)
|
|
||||||
- [adf-process-instance-details](ng2-activiti-processlist/README.md)
|
|
||||||
- [adf-process-instance-filters](ng2-activiti-processlist/README.md)
|
|
||||||
- [adf-process-instance-comments](ng2-activiti-processlist/README.md)
|
|
||||||
- [adf-process-attachment-list](ng2-activiti-processlist/README.md)
|
|
||||||
- [adf-create-process-attachment](ng2-activiti-processlist/README.md)
|
|
||||||
- [adf-form-field](ng2-activiti-form/README.md)
|
|
||||||
- [adf-start-form](ng2-activiti-form/README.md)
|
|
||||||
- [adf-content](ng2-activiti-form/README.md)
|
|
||||||
- [adf-form](ng2-activiti-form/README.md)
|
|
||||||
- [adf-form-list](ng2-activiti-form/README.md)
|
|
||||||
- [adf-diagram](ng2-activiti-diagrams/README.md)
|
|
||||||
- [adf-diagram-sequence-flow](ng2-activiti-diagrams/README.md)
|
|
||||||
- [adf-tasklist](ng2-activiti-tasklist/README.md)
|
|
||||||
- [adf-filters](ng2-activiti-tasklist/README.md)
|
|
||||||
- [adf-task-details](ng2-activiti-tasklist/README.md)
|
|
||||||
- [adf-start-task](ng2-activiti-tasklist/README.md)
|
|
||||||
- [adf-task-header](ng2-activiti-tasklist/README.md)
|
|
||||||
- [adf-people-list](ng2-activiti-tasklist/README.md)
|
|
||||||
- [adf-task-attachment-list](ng2-activiti-tasklist/README.md)
|
|
||||||
- [adf-people-search](ng2-activiti-tasklist/README.md)
|
|
||||||
- [adf-people](ng2-activiti-tasklist/README.md)
|
|
||||||
- [adf-comments](ng2-activiti-tasklist/README.md)
|
|
||||||
- [adf-create-task-attachment](ng2-activiti-tasklist/README.md)
|
|
||||||
- [adf-comment-list](ng2-activiti-tasklist/README.md)
|
|
||||||
- [adf-checklist](ng2-activiti-tasklist/README.md)
|
|
||||||
- [adf-apps](ng2-activiti-tasklist/README.md)
|
|
||||||
- [adf-analytics-report-parameters](ng2-activiti-analytics/README.md)
|
|
||||||
- [adf-analytics](ng2-activiti-analytics/README.md)
|
|
||||||
- [adf-analytics-report-list](ng2-activiti-analytics/README.md)
|
|
||||||
- [adf-analytics-report-heat-map](ng2-activiti-analytics/README.md)
|
|
||||||
- [adf-analytics-generator](ng2-activiti-analytics/README.md)<!-- BUSINESS END-->
|
|
||||||
<!-- BUSINESS END-->
|
<!-- BUSINESS END-->
|
||||||
|
|
||||||
<!-- BUSINESS DIRECTIVE START--><!-- BUSINESS DIRECTIVE END-->
|
<!-- BUSINESS DIRECTIVE START--><!-- BUSINESS DIRECTIVE END-->
|
||||||
|
|
||||||
## Services
|
## Services
|
||||||
|
|
||||||
<!-- SERVICES START-->
|
<!-- SERVICES START--><!-- SERVICES END-->
|
||||||
- [ContextMenuService](ng2-alfresco-core/src/components/context-menu/context-menu.service.ts)
|
|
||||||
- [FileUploadService](ng2-alfresco-upload/src/services/file-uploading.service.ts)
|
|
||||||
- [DocumentListService](ng2-alfresco-documentlist/src/services/document-list.service.ts)
|
|
||||||
- [NodeActionsService](ng2-alfresco-documentlist/src/services/node-actions.service.ts)
|
|
||||||
- [FolderActionsService](ng2-alfresco-documentlist/src/services/folder-actions.service.ts)
|
|
||||||
- [DocumentActionsService](ng2-alfresco-documentlist/src/services/document-actions.service.ts)
|
|
||||||
- [ProcessService](ng2-activiti-processlist/src/services/process.service.ts)
|
|
||||||
- [ProcessUploadService](ng2-activiti-processlist/src/services/process-upload.service.ts)
|
|
||||||
- [WidgetVisibilityService](ng2-activiti-form/src/services/widget-visibility.service.ts)
|
|
||||||
- [NodeService](ng2-activiti-form/src/services/node.service.ts)
|
|
||||||
- [FormService](ng2-activiti-form/src/services/form.service.ts)
|
|
||||||
- [FormRenderingService](ng2-activiti-form/src/services/form-rendering.service.ts)
|
|
||||||
- [EcmModelService](ng2-activiti-form/src/services/ecm-model.service.ts)
|
|
||||||
- [ActivitiContentService](ng2-activiti-form/src/services/activiti-content-service.ts)
|
|
||||||
- [ActivitiAlfrescoContentService](ng2-activiti-form/src/services/activiti-alfresco.service.ts)
|
|
||||||
- [CardViewUpdateService](ng2-alfresco-core/src/services/card-view-update.service.ts)
|
|
||||||
- [SearchService](ng2-alfresco-core/src/services/search.service.ts)
|
|
||||||
- [SitesApiService](ng2-alfresco-core/src/services/sites-api.service.ts)
|
|
||||||
- [SharedLinksApiService](ng2-alfresco-core/src/services/shared-links-api.service.ts)
|
|
||||||
- [SearchApiService](ng2-alfresco-core/src/services/search-api.service.ts)
|
|
||||||
- [NodesApiService](ng2-alfresco-core/src/services/nodes-api.service.ts)
|
|
||||||
- [PeopleApiService](ng2-alfresco-core/src/services/people-api.service.ts)
|
|
||||||
- [FavoritesApiService](ng2-alfresco-core/src/services/favorites-api.service.ts)
|
|
||||||
- [DiscoveryApiService](ng2-alfresco-core/src/services/discovery-api.service.ts)
|
|
||||||
- [DeletedNodesApiService](ng2-alfresco-core/src/services/deleted-nodes-api.service.ts)
|
|
||||||
- [UserPreferencesService](ng2-alfresco-core/src/services/user-preferences.service.ts)
|
|
||||||
- [UploadService](ng2-alfresco-core/src/services/upload.service.ts)
|
|
||||||
- [TranslationService](ng2-alfresco-core/src/services/translation.service.ts)
|
|
||||||
- [ThumbnailService](ng2-alfresco-core/src/services/thumbnail.service.ts)
|
|
||||||
- [StorageService](ng2-alfresco-core/src/services/storage.service.ts)
|
|
||||||
- [AlfrescoApiService](ng2-alfresco-core/src/services/alfresco-api.service.ts)
|
|
||||||
- [RenditionsService](ng2-alfresco-core/src/services/renditions.service.ts)
|
|
||||||
- [LogService](ng2-alfresco-core/src/services/log.service.ts)
|
|
||||||
- [NotificationService](ng2-alfresco-core/src/services/notification.service.ts)
|
|
||||||
- [CookieService](ng2-alfresco-core/src/services/cookie.service.ts)
|
|
||||||
- [ContentService](ng2-alfresco-core/src/services/content.service.ts)
|
|
||||||
- [AuthenticationService](ng2-alfresco-core/src/services/authentication.service.ts)
|
|
||||||
- [AlfrescoSettingsService](ng2-alfresco-core/src/services/alfresco-settings.service.ts)
|
|
||||||
- [AlfrescoContentService](ng2-alfresco-core/src/services/alfresco-content.service.ts)
|
|
||||||
- [AppConfigService](ng2-alfresco-core/src/services/app-config.service.ts)
|
|
||||||
- [DiagramsService](ng2-activiti-diagrams/src/services/diagrams.service.ts)
|
|
||||||
- [DiagramColorService](ng2-activiti-diagrams/src/services/diagram-color.service.ts)
|
|
||||||
- [RaphaelService](ng2-activiti-diagrams/src/components/raphael/raphael.service.ts)
|
|
||||||
- [BpmUserService](ng2-alfresco-userinfo/src/services/bpm-user.service.ts)
|
|
||||||
- [EcmUserService](ng2-alfresco-userinfo/src/services/ecm-user.service.ts)
|
|
||||||
- [RenderingQueueService](ng2-alfresco-viewer/src/services/rendering-queue.services.ts)
|
|
||||||
- [RatingService](ng2-alfresco-social/src/services/rating.service.ts)
|
|
||||||
- [TagService](ng2-alfresco-tag/src/services/tag.service.ts)
|
|
||||||
- [TaskListService](ng2-activiti-tasklist/src/services/tasklist.service.ts)
|
|
||||||
- [ProcessUploadService](ng2-activiti-tasklist/src/services/process-upload.service.ts)
|
|
||||||
- [PeopleService](ng2-activiti-tasklist/src/services/people.service.ts)
|
|
||||||
- [AnalyticsService](ng2-activiti-analytics/src/services/analytics.service.ts)<!-- SERVICES END-->
|
|
||||||
|
|
||||||
You can browse all the components at the following address:
|
You can browse all the components at the following address:
|
||||||
|
|
||||||
|
@@ -1,72 +1,41 @@
|
|||||||
# Activiti Analytics Components
|
# Activiti Analytics library
|
||||||
|
|
||||||
|
Contains the Activiti Analytics component and other related components.
|
||||||
|
|
||||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
||||||
|
|
||||||
<!-- toc -->
|
<!-- toc -->
|
||||||
|
|
||||||
- [Prerequisites](#prerequisites)
|
|
||||||
- [Install](#install)
|
|
||||||
- [Activiti Analytics List Component](#activiti-analytics-list-component)
|
|
||||||
* [Properties](#properties)
|
|
||||||
* [Events](#events)
|
|
||||||
- [Activiti Analytics Component](#activiti-analytics-component)
|
- [Activiti Analytics Component](#activiti-analytics-component)
|
||||||
* [Properties](#properties-1)
|
* [Basic Usage](#basic-usage)
|
||||||
* [Events](#events-1)
|
+ [Properties](#properties)
|
||||||
|
+ [Events](#events)
|
||||||
|
- [Activiti Analytics List Component](#activiti-analytics-list-component)
|
||||||
|
* [Basic Usage](#basic-usage-1)
|
||||||
|
+ [Properties](#properties-1)
|
||||||
|
+ [Events](#events-1)
|
||||||
- [Analytics Generator Component](#analytics-generator-component)
|
- [Analytics Generator Component](#analytics-generator-component)
|
||||||
* [Properties](#properties-2)
|
* [Basic Usage](#basic-usage-2)
|
||||||
* [Events](#events-2)
|
+ [Properties](#properties-2)
|
||||||
- [Build from sources](#build-from-sources)
|
+ [Events](#events-2)
|
||||||
- [NPM scripts](#npm-scripts)
|
- [Project Information](#project-information)
|
||||||
- [Demo](#demo)
|
* [Prerequisites](#prerequisites)
|
||||||
- [License](#license)
|
* [Install](#install)
|
||||||
|
* [Build from sources](#build-from-sources)
|
||||||
|
* [NPM scripts](#npm-scripts)
|
||||||
|
* [Demo](#demo)
|
||||||
|
* [License](#license)
|
||||||
|
|
||||||
<!-- tocstop -->
|
<!-- tocstop -->
|
||||||
|
|
||||||
<!-- markdown-toc end -->
|
<!-- markdown-toc end -->
|
||||||
|
|
||||||
## Prerequisites
|
|
||||||
|
|
||||||
Before you start using this development framework, make sure you have installed all required software and done all the
|
|
||||||
necessary configurations, see this [page](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
|
|
||||||
|
|
||||||
> If you plan to use this component with projects generated by Angular CLI, you can read more in [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
|
|
||||||
|
|
||||||
## Install
|
|
||||||
|
|
||||||
```sh
|
|
||||||
npm install ng2-activiti-analytics
|
|
||||||
```
|
|
||||||
|
|
||||||
## Activiti Analytics List Component
|
|
||||||
|
|
||||||
The component shows the list of all the available reports
|
|
||||||
|
|
||||||
```html
|
|
||||||
<analytics-report-list
|
|
||||||
[layoutType]="'LIST'">
|
|
||||||
</analytics-report-list>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Properties
|
|
||||||
|
|
||||||
| Name | Type | Required | Default | Description |
|
|
||||||
| --- | --- | --- | --- | --- |
|
|
||||||
| appId | string | optional | | The application id |
|
|
||||||
| layoutType | string | required | | Define the layout of the apps. There are two possible values: GRID or LIST. LIST is the default value|
|
|
||||||
| selectFirst | boolean | optional | false | Change the value to true if you want to select the first item in the list as default|
|
|
||||||
|
|
||||||
### Events
|
|
||||||
|
|
||||||
| Name | Description |
|
|
||||||
| --- | --- |
|
|
||||||
| onSuccess | The event is emitted when the report list is loaded |
|
|
||||||
| onError | The event is emitted when an error occurs during the loading |
|
|
||||||
| reportClick | The event is emitted when the report in the list is selected |
|
|
||||||
|
|
||||||
## Activiti Analytics Component
|
## Activiti Analytics Component
|
||||||
|
|
||||||
The component shows the charts related to the reportId passed as input
|
The component shows the charts related to the reportId passed as input
|
||||||
|
|
||||||
|
### Basic Usage
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-analytics
|
<adf-analytics
|
||||||
[appId]="1001"
|
[appId]="1001"
|
||||||
@@ -74,7 +43,7 @@ The component shows the charts related to the reportId passed as input
|
|||||||
</adf-analytics>
|
</adf-analytics>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Properties
|
#### Properties
|
||||||
|
|
||||||
| Name | Type | Description |
|
| Name | Type | Description |
|
||||||
| --- | --- | --- |
|
| --- | --- | --- |
|
||||||
@@ -94,7 +63,7 @@ You can also hide chart parameters UI by setting the `hideParameters` to `true`:
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||
### Events
|
#### Events
|
||||||
|
|
||||||
| Name | Description |
|
| Name | Description |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
@@ -103,10 +72,40 @@ You can also hide chart parameters UI by setting the `hideParameters` to `true`:
|
|||||||
| reportSaved | The event is emitted when a report is saved |
|
| reportSaved | The event is emitted when a report is saved |
|
||||||
| reportDeleted | The event is emitted when a report is deleted |
|
| reportDeleted | The event is emitted when a report is deleted |
|
||||||
|
|
||||||
|
## Activiti Analytics List Component
|
||||||
|
|
||||||
|
The component shows the list of all the available reports
|
||||||
|
|
||||||
|
### Basic Usage
|
||||||
|
|
||||||
|
```html
|
||||||
|
<analytics-report-list
|
||||||
|
[layoutType]="'LIST'">
|
||||||
|
</analytics-report-list>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Properties
|
||||||
|
|
||||||
|
| Name | Type | Required | Default | Description |
|
||||||
|
| --- | --- | --- | --- | --- |
|
||||||
|
| appId | string | optional | | The application id |
|
||||||
|
| layoutType | string | required | | Define the layout of the apps. There are two possible values: GRID or LIST. LIST is the default value|
|
||||||
|
| selectFirst | boolean | optional | false | Change the value to true if you want to select the first item in the list as default|
|
||||||
|
|
||||||
|
#### Events
|
||||||
|
|
||||||
|
| Name | Description |
|
||||||
|
| --- | --- |
|
||||||
|
| onSuccess | The event is emitted when the report list is loaded |
|
||||||
|
| onError | The event is emitted when an error occurs during the loading |
|
||||||
|
| reportClick | The event is emitted when the report in the list is selected |
|
||||||
|
|
||||||
## Analytics Generator Component
|
## Analytics Generator Component
|
||||||
|
|
||||||
The component generates and shows the charts
|
The component generates and shows the charts
|
||||||
|
|
||||||
|
### Basic Usage
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-analytics-generator
|
<adf-analytics-generator
|
||||||
[reportId]="reportId"
|
[reportId]="reportId"
|
||||||
@@ -114,21 +113,36 @@ The component generates and shows the charts
|
|||||||
</adf-analytics>
|
</adf-analytics>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Properties
|
#### Properties
|
||||||
|
|
||||||
| Name | Type | Description |
|
| Name | Type | Description |
|
||||||
| --- | --- | -- |
|
| --- | --- | -- |
|
||||||
| reportId | string | The report id |
|
| reportId | string | The report id |
|
||||||
| reportParamQuery | ReportQuery | The object contains all the parameters that the report needs |
|
| reportParamQuery | ReportQuery | The object contains all the parameters that the report needs |
|
||||||
|
|
||||||
### Events
|
#### Events
|
||||||
|
|
||||||
| Name | Description |
|
| Name | Description |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
| onSuccess | Raised when the charts are loaded |
|
| onSuccess | Raised when the charts are loaded |
|
||||||
| onError | Raised when an error occurs during the loading |
|
| onError | Raised when an error occurs during the loading |
|
||||||
|
|
||||||
## Build from sources
|
## Project Information
|
||||||
|
|
||||||
|
### Prerequisites
|
||||||
|
|
||||||
|
Before you start using this development framework, make sure you have installed all required software and done all the
|
||||||
|
necessary configurations, see this [page](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
|
||||||
|
|
||||||
|
> If you plan to use this component with projects generated by Angular CLI, you can read more in [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
|
||||||
|
|
||||||
|
### Install
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm install ng2-activiti-analytics
|
||||||
|
```
|
||||||
|
|
||||||
|
### Build from sources
|
||||||
|
|
||||||
You can build the component from sources with the following commands:
|
You can build the component from sources with the following commands:
|
||||||
|
|
||||||
@@ -140,7 +154,7 @@ npm run build
|
|||||||
> The `build` task rebuilds all the code, runs tslint, license checks
|
> The `build` task rebuilds all the code, runs tslint, license checks
|
||||||
> and other quality check tools before performing unit testing.
|
> and other quality check tools before performing unit testing.
|
||||||
|
|
||||||
## NPM scripts
|
### NPM scripts
|
||||||
|
|
||||||
| Command | Description |
|
| Command | Description |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
@@ -149,7 +163,7 @@ npm run build
|
|||||||
| npm run test-browser | Run unit tests in the browser
|
| npm run test-browser | Run unit tests in the browser
|
||||||
| npm run coverage | Run unit tests and display code coverage report |
|
| npm run coverage | Run unit tests and display code coverage report |
|
||||||
|
|
||||||
## Demo
|
### Demo
|
||||||
|
|
||||||
Please check the demo folder for a demo project
|
Please check the demo folder for a demo project
|
||||||
|
|
||||||
@@ -159,6 +173,6 @@ npm install
|
|||||||
npm start
|
npm start
|
||||||
```
|
```
|
||||||
|
|
||||||
## License
|
### License
|
||||||
|
|
||||||
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
|
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
|
||||||
|
@@ -1,38 +1,31 @@
|
|||||||
# Activiti Diagrams Component
|
# Activiti Diagrams library
|
||||||
|
|
||||||
|
Contains the Activiti Diagram component.
|
||||||
|
|
||||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
||||||
|
|
||||||
<!-- toc -->
|
<!-- toc -->
|
||||||
|
|
||||||
- [Prerequisites](#prerequisites)
|
|
||||||
- [Install](#install)
|
|
||||||
- [Activiti Diagram Component](#activiti-diagram-component)
|
- [Activiti Diagram Component](#activiti-diagram-component)
|
||||||
* [Properties](#properties)
|
* [Basic Usage](#basic-usage)
|
||||||
* [Events](#events)
|
+ [Properties](#properties)
|
||||||
- [Build from sources](#build-from-sources)
|
+ [Events](#events)
|
||||||
- [NPM scripts](#npm-scripts)
|
- [Project Information](#project-information)
|
||||||
- [Demo](#demo)
|
* [Prerequisites](#prerequisites)
|
||||||
- [License](#license)
|
* [Install](#install)
|
||||||
|
* [Build from sources](#build-from-sources)
|
||||||
|
* [NPM scripts](#npm-scripts)
|
||||||
|
* [Demo](#demo)
|
||||||
|
* [License](#license)
|
||||||
|
|
||||||
<!-- tocstop -->
|
<!-- tocstop -->
|
||||||
|
|
||||||
<!-- markdown-toc end -->
|
<!-- markdown-toc end -->
|
||||||
|
|
||||||
## Prerequisites
|
|
||||||
|
|
||||||
Before you start using this development framework, make sure you have installed all required software and done all the
|
|
||||||
necessary configurations, see this [page](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
|
|
||||||
|
|
||||||
> If you plan to use this component with projects generated by Angular CLI, you can read more in [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
|
|
||||||
|
|
||||||
## Install
|
|
||||||
|
|
||||||
```sh
|
|
||||||
npm install ng2-activiti-diagrams
|
|
||||||
```
|
|
||||||
|
|
||||||
## Activiti Diagram Component
|
## Activiti Diagram Component
|
||||||
|
|
||||||
|
### Basic Usage
|
||||||
|
|
||||||
This component shows the diagram of a process.
|
This component shows the diagram of a process.
|
||||||
|
|
||||||
```html
|
```html
|
||||||
@@ -49,7 +42,7 @@ The below component shows the diagram of a running process instance with the act
|
|||||||
</adf-diagram>
|
</adf-diagram>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Properties
|
#### Properties
|
||||||
|
|
||||||
| Name | Type | Description |
|
| Name | Type | Description |
|
||||||
| --- | --- | -- |
|
| --- | --- | -- |
|
||||||
@@ -60,14 +53,29 @@ The below component shows the diagram of a running process instance with the act
|
|||||||
| width | number | |
|
| width | number | |
|
||||||
| height | number | |
|
| height | number | |
|
||||||
|
|
||||||
### Events
|
#### Events
|
||||||
|
|
||||||
| Name | Description |
|
| Name | Description |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
| onSuccess | Raised when the diagrams elements are loaded |
|
| onSuccess | Raised when the diagrams elements are loaded |
|
||||||
| onError | Raised when an error occurs during loading |
|
| onError | Raised when an error occurs during loading |
|
||||||
|
|
||||||
## Build from sources
|
## Project Information
|
||||||
|
|
||||||
|
### Prerequisites
|
||||||
|
|
||||||
|
Before you start using this development framework, make sure you have installed all required software and done all the
|
||||||
|
necessary configurations, see this [page](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
|
||||||
|
|
||||||
|
> If you plan to use this component with projects generated by Angular CLI, you can read more in [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
|
||||||
|
|
||||||
|
### Install
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm install ng2-activiti-diagrams
|
||||||
|
```
|
||||||
|
|
||||||
|
### Build from sources
|
||||||
|
|
||||||
You can build the component from sources with the following commands:
|
You can build the component from sources with the following commands:
|
||||||
|
|
||||||
@@ -79,7 +87,7 @@ npm run build
|
|||||||
> The `build` task rebuilds all the code, runs tslint, license checks
|
> The `build` task rebuilds all the code, runs tslint, license checks
|
||||||
> and other quality check tools before performing unit testing.
|
> and other quality check tools before performing unit testing.
|
||||||
|
|
||||||
## NPM scripts
|
### NPM scripts
|
||||||
|
|
||||||
| Command | Description |
|
| Command | Description |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
@@ -88,7 +96,7 @@ npm run build
|
|||||||
| npm run test-browser | Run unit tests in the browser
|
| npm run test-browser | Run unit tests in the browser
|
||||||
| npm run coverage | Run unit tests and display code coverage report |
|
| npm run coverage | Run unit tests and display code coverage report |
|
||||||
|
|
||||||
## Demo
|
### Demo
|
||||||
|
|
||||||
Please check the demo folder for a demo project
|
Please check the demo folder for a demo project
|
||||||
|
|
||||||
@@ -98,6 +106,6 @@ npm install
|
|||||||
npm start
|
npm start
|
||||||
```
|
```
|
||||||
|
|
||||||
## License
|
### License
|
||||||
|
|
||||||
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
|
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
|
||||||
|
@@ -1,4 +1,6 @@
|
|||||||
# APS Form Component
|
# APS Form library
|
||||||
|
|
||||||
|
Contains the Activiti Form component and other related components and services.
|
||||||
|
|
||||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
||||||
|
|
||||||
@@ -7,40 +9,45 @@
|
|||||||
- [Library Contents](#library-contents)
|
- [Library Contents](#library-contents)
|
||||||
* [Components](#components)
|
* [Components](#components)
|
||||||
* [Services](#services)
|
* [Services](#services)
|
||||||
- [Prerequisites](#prerequisites)
|
- [Activiti Form component](#activiti-form-component)
|
||||||
- [Install](#install)
|
* [Basic Usage](#basic-usage)
|
||||||
- [Form Component](#form-component)
|
+ [Properties](#properties)
|
||||||
* [Properties](#properties)
|
+ [Advanced properties](#advanced-properties)
|
||||||
|
+ [Events](#events)
|
||||||
|
* [Details](#details)
|
||||||
|
+ [Custom empty form template](#custom-empty-form-template)
|
||||||
|
+ [Controlling outcome execution behaviour](#controlling-outcome-execution-behaviour)
|
||||||
+ [Form Field Validators](#form-field-validators)
|
+ [Form Field Validators](#form-field-validators)
|
||||||
- [Custom set of validators](#custom-set-of-validators)
|
- [Custom set of validators](#custom-set-of-validators)
|
||||||
- [Custom validator example](#custom-validator-example)
|
- [Custom validator example](#custom-validator-example)
|
||||||
* [Advanced properties](#advanced-properties)
|
|
||||||
* [Events](#events)
|
|
||||||
* [Custom empty form template](#custom-empty-form-template)
|
|
||||||
* [Controlling outcome execution behaviour](#controlling-outcome-execution-behaviour)
|
|
||||||
- [Activiti Content Component](#activiti-content-component)
|
- [Activiti Content Component](#activiti-content-component)
|
||||||
* [Properties](#properties-1)
|
* [Basic Usage](#basic-usage-1)
|
||||||
* [Events](#events-1)
|
+ [Properties](#properties-1)
|
||||||
|
+ [Events](#events-1)
|
||||||
- [ADF Form List Component](#adf-form-list-component)
|
- [ADF Form List Component](#adf-form-list-component)
|
||||||
* [Properties](#properties-2)
|
* [Basic Usage](#basic-usage-2)
|
||||||
|
+ [Properties](#properties-2)
|
||||||
- [FormService Service](#formservice-service)
|
- [FormService Service](#formservice-service)
|
||||||
* [Events](#events-2)
|
* [Basic Usage](#basic-usage-3)
|
||||||
* [Methods](#methods)
|
+ [Events](#events-2)
|
||||||
- [Common scenarios](#common-scenarios)
|
+ [Methods](#methods)
|
||||||
* [Changing field value based on another field](#changing-field-value-based-on-another-field)
|
- [Other documentation](#other-documentation)
|
||||||
* [Listen all form Events](#listen-all-form-events)
|
* [Common scenarios](#common-scenarios)
|
||||||
|
+ [Changing field value based on another field](#changing-field-value-based-on-another-field)
|
||||||
|
+ [Listen all form Events](#listen-all-form-events)
|
||||||
- [See also](#see-also)
|
- [See also](#see-also)
|
||||||
- [Build from sources](#build-from-sources)
|
- [Project Information](#project-information)
|
||||||
- [NPM scripts](#npm-scripts)
|
* [Prerequisites](#prerequisites)
|
||||||
- [Demo](#demo)
|
* [Install](#install)
|
||||||
- [License](#license)
|
* [Build from sources](#build-from-sources)
|
||||||
|
* [NPM scripts](#npm-scripts)
|
||||||
|
* [Demo](#demo)
|
||||||
|
* [License](#license)
|
||||||
|
|
||||||
<!-- tocstop -->
|
<!-- tocstop -->
|
||||||
|
|
||||||
<!-- markdown-toc end -->
|
<!-- markdown-toc end -->
|
||||||
|
|
||||||
See it live: [Form Quickstart](https://embed.plnkr.co/YSLXTqb3DtMhVJSqXKkE/)
|
|
||||||
|
|
||||||
## Library Contents
|
## Library Contents
|
||||||
|
|
||||||
### Components
|
### Components
|
||||||
@@ -57,22 +64,11 @@ See it live: [Form Quickstart](https://embed.plnkr.co/YSLXTqb3DtMhVJSqXKkE/)
|
|||||||
- NodeService
|
- NodeService
|
||||||
- WidgetVisibilityService
|
- WidgetVisibilityService
|
||||||
|
|
||||||
## Prerequisites
|
## Activiti Form component
|
||||||
|
|
||||||
Before you start using this development framework, make sure you have installed all required software and done all the
|
The component shows a Form from Activiti (see it live: [Form Quickstart](https://embed.plnkr.co/YSLXTqb3DtMhVJSqXKkE/))
|
||||||
necessary configuration, see this [page](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
|
|
||||||
|
|
||||||
> If you plan to use this component with projects generated by Angular CLI, you can read more in [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
|
### Basic Usage
|
||||||
|
|
||||||
## Install
|
|
||||||
|
|
||||||
```sh
|
|
||||||
npm install ng2-activiti-form
|
|
||||||
```
|
|
||||||
|
|
||||||
## Form Component
|
|
||||||
|
|
||||||
The component shows a Form from Activiti
|
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-form
|
<adf-form
|
||||||
@@ -149,9 +145,7 @@ and store the form field as metadata. The param nameNode is optional.
|
|||||||
</adf-form>
|
</adf-form>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Properties
|
#### Properties
|
||||||
|
|
||||||
The recommended set of properties can be found in the following table:
|
|
||||||
|
|
||||||
| Name | Type | Default | Description |
|
| Name | Type | Default | Description |
|
||||||
| --- | --- | --- | --- |
|
| --- | --- | --- | --- |
|
||||||
@@ -169,7 +163,116 @@ The recommended set of properties can be found in the following table:
|
|||||||
| saveMetadata | boolean | false | Store the value of the form as metadata. |
|
| saveMetadata | boolean | false | Store the value of the form as metadata. |
|
||||||
| path | string | | Path of the folder where to store the metadata. |
|
| path | string | | Path of the folder where to store the metadata. |
|
||||||
| nameNode | string | true | Name to assign to the new node where the metadata are stored. |
|
| nameNode | string | true | Name to assign to the new node where the metadata are stored. |
|
||||||
| fieldValidators | FormFieldValidator[] | *see below* | Contains a list of form field validator instances. |
|
| fieldValidators | FormFieldValidator[] | See [Form Field Validators](#form-field-validators) section below | Contains a list of form field validator instances. |
|
||||||
|
|
||||||
|
#### Advanced properties
|
||||||
|
|
||||||
|
The following properties are for complex customisation purposes:
|
||||||
|
|
||||||
|
| Name | Type | Default | Description |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| form | FormModel | | Underlying form model instance. |
|
||||||
|
| showDebugButton | boolean | false | Toggle debug options. |
|
||||||
|
| debugMode | boolean | false | Toggle debug mode, allows displaying additional data for development and debugging purposes. |
|
||||||
|
|
||||||
|
#### Events
|
||||||
|
|
||||||
|
| Name | Return Type | Description |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| formLoaded | [FormModel](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-activiti-form/src/components/widgets/core/form.model.ts) | Invoked when form is loaded or reloaded. |
|
||||||
|
| formSaved | [FormModel](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-activiti-form/src/components/widgets/core/form.model.ts) | Invoked when form is submitted with `Save` or custom outcomes. |
|
||||||
|
| formCompleted | [FormModel](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-activiti-form/src/components/widgets/core/form.model.ts) | Invoked when form is submitted with `Complete` outcome. |
|
||||||
|
| formDataRefreshed | [FormModel](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-activiti-form/src/components/widgets/core/form.model.ts) | Invoked when form values are refreshed due to a data property change |
|
||||||
|
| executeOutcome | [FormOutcomeEvent](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-activiti-form/src/components/widgets/core/form-outcome-event.model.ts) | Invoked when any outcome is executed, default behaviour can be prevented via `event.preventDefault()` |
|
||||||
|
| onError | any | Invoked at any error |
|
||||||
|
|
||||||
|
### Details
|
||||||
|
|
||||||
|
All `form*` events receive an instance of the `FormModel` as event argument for ease of development:
|
||||||
|
|
||||||
|
**MyView.component.html**
|
||||||
|
|
||||||
|
```html
|
||||||
|
<adf-form
|
||||||
|
[taskId]="selectedTask?.id"
|
||||||
|
(formSaved)="onFormSaved($event)">
|
||||||
|
</adf-form>
|
||||||
|
```
|
||||||
|
|
||||||
|
**MyView.component.ts**
|
||||||
|
|
||||||
|
```ts
|
||||||
|
onFormSaved(form: FormModel) {
|
||||||
|
console.log(form);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Custom empty form template
|
||||||
|
|
||||||
|
You can add a template that will be show if no form definition has been found
|
||||||
|
|
||||||
|
```html
|
||||||
|
<adf-form .... >
|
||||||
|
|
||||||
|
<div empty-form >
|
||||||
|
<h2>Empty form</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</adf-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**
|
||||||
|
|
||||||
|
```html
|
||||||
|
<adf-form
|
||||||
|
[taskId]="selectedTask?.id"
|
||||||
|
executeOutcome="validateForm($event)">
|
||||||
|
</adf-form>
|
||||||
|
```
|
||||||
|
|
||||||
|
**MyView.component.ts**
|
||||||
|
|
||||||
|
```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.**
|
||||||
|
|
||||||
#### Form Field Validators
|
#### Form Field Validators
|
||||||
|
|
||||||
@@ -301,124 +404,19 @@ Now if you run the application and try to enter "admin" in one of the text field
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||
### Advanced properties
|
|
||||||
|
|
||||||
The following properties are for complex customisation purposes:
|
|
||||||
|
|
||||||
| Name | Type | Default | Description |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| form | FormModel | | Underlying form model instance. |
|
|
||||||
| showDebugButton | boolean | false | Toggle debug options. |
|
|
||||||
| debugMode | boolean | false | Toggle debug mode, allows displaying additional data for development and debugging purposes. |
|
|
||||||
|
|
||||||
### Events
|
|
||||||
|
|
||||||
| Name | Return Type | Description |
|
|
||||||
| --- | --- | --- |
|
|
||||||
| formLoaded | [FormModel](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-activiti-form/src/components/widgets/core/form.model.ts) | Invoked when form is loaded or reloaded. |
|
|
||||||
| formSaved | [FormModel](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-activiti-form/src/components/widgets/core/form.model.ts) | Invoked when form is submitted with `Save` or custom outcomes. |
|
|
||||||
| formCompleted | [FormModel](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-activiti-form/src/components/widgets/core/form.model.ts) | Invoked when form is submitted with `Complete` outcome. |
|
|
||||||
| formDataRefreshed | [FormModel](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-activiti-form/src/components/widgets/core/form.model.ts) | Invoked when form values are refreshed due to a data property change |
|
|
||||||
| executeOutcome | [FormOutcomeEvent](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-activiti-form/src/components/widgets/core/form-outcome-event.model.ts) | Invoked when any outcome is executed, default behaviour can be prevented via `event.preventDefault()` |
|
|
||||||
| onError | any | Invoked at any error |
|
|
||||||
|
|
||||||
All `form*` events receive an instance of the `FormModel` as event argument for ease of development:
|
|
||||||
|
|
||||||
**MyView.component.html**
|
|
||||||
|
|
||||||
```html
|
|
||||||
<adf-form
|
|
||||||
[taskId]="selectedTask?.id"
|
|
||||||
(formSaved)="onFormSaved($event)">
|
|
||||||
</adf-form>
|
|
||||||
```
|
|
||||||
|
|
||||||
**MyView.component.ts**
|
|
||||||
|
|
||||||
```ts
|
|
||||||
onFormSaved(form: FormModel) {
|
|
||||||
console.log(form);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Custom empty form template
|
|
||||||
|
|
||||||
You can add a template that will be show if no form definition has been found
|
|
||||||
|
|
||||||
```html
|
|
||||||
<adf-form .... >
|
|
||||||
|
|
||||||
<div empty-form >
|
|
||||||
<h2>Empty form</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</adf-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**
|
|
||||||
|
|
||||||
```html
|
|
||||||
<adf-form
|
|
||||||
[taskId]="selectedTask?.id"
|
|
||||||
executeOutcome="validateForm($event)">
|
|
||||||
</adf-form>
|
|
||||||
```
|
|
||||||
|
|
||||||
**MyView.component.ts**
|
|
||||||
|
|
||||||
```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
|
## Activiti Content Component
|
||||||
|
|
||||||
The component shows the content preview.
|
The component shows the content preview.
|
||||||
|
|
||||||
|
### Basic Usage
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-content
|
<adf-content
|
||||||
[contentId]="'1001'">
|
[contentId]="'1001'">
|
||||||
</adf-content>
|
</adf-content>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Properties
|
#### Properties
|
||||||
|
|
||||||
The recommended set of properties can be found in the following table:
|
The recommended set of properties can be found in the following table:
|
||||||
|
|
||||||
@@ -426,7 +424,7 @@ The recommended set of properties can be found in the following table:
|
|||||||
| --- | --- | --- | --- |
|
| --- | --- | --- | --- |
|
||||||
| contentId | string | | The content id to show. |
|
| contentId | string | | The content id to show. |
|
||||||
|
|
||||||
### Events
|
#### Events
|
||||||
|
|
||||||
| Name | Description |
|
| Name | Description |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
@@ -436,13 +434,15 @@ The recommended set of properties can be found in the following table:
|
|||||||
|
|
||||||
The component shows the activiti forms as a list.
|
The component shows the activiti forms as a list.
|
||||||
|
|
||||||
|
### Basic Usage
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-form-list
|
<adf-form-list
|
||||||
[forms]="[{ name: 'My Name', lastUpdatedByFullName: 'My User Name', lastUpdated: '2017-06-01'}]">
|
[forms]="[{ name: 'My Name', lastUpdatedByFullName: 'My User Name', lastUpdated: '2017-06-01'}]">
|
||||||
</adf-form-list>
|
</adf-form-list>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Properties
|
#### Properties
|
||||||
|
|
||||||
The recommended set of properties can be found in the following table:
|
The recommended set of properties can be found in the following table:
|
||||||
|
|
||||||
@@ -452,6 +452,8 @@ The recommended set of properties can be found in the following table:
|
|||||||
|
|
||||||
## FormService Service
|
## FormService Service
|
||||||
|
|
||||||
|
### Basic Usage
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
import { FormService, FormEvent, FormFieldEvent } from 'ng2-activiti-form';
|
import { FormService, FormEvent, FormFieldEvent } from 'ng2-activiti-form';
|
||||||
|
|
||||||
@@ -477,7 +479,7 @@ class MyComponent {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
### Events
|
#### Events
|
||||||
|
|
||||||
| Name | Args Type | Description |
|
| Name | Args Type | Description |
|
||||||
| --- | --- | --- |
|
| --- | --- | --- |
|
||||||
@@ -492,7 +494,7 @@ class MyComponent {
|
|||||||
| validateForm | ValidateFormEvent | Raised each time a form is validated. You can use it to provide custom validation or prevent default behaviour. |
|
| validateForm | ValidateFormEvent | Raised each time a form is validated. You can use it to provide custom validation or prevent default behaviour. |
|
||||||
| validateFormField | ValidateFormFieldEvent | Raised each time a form field is validated. You can use it to provide custom validation or prevent default behaviour.|
|
| validateFormField | ValidateFormFieldEvent | Raised each time a form field is validated. You can use it to provide custom validation or prevent default behaviour.|
|
||||||
|
|
||||||
### Methods
|
#### Methods
|
||||||
|
|
||||||
| Name | Params | Returns | Description |
|
| Name | Params | Returns | Description |
|
||||||
| --- | --- | --- | --- |
|
| --- | --- | --- | --- |
|
||||||
@@ -519,9 +521,11 @@ class MyComponent {
|
|||||||
| getWorkflowGroups\ | (filter: string, groupId?: string) | Observable\<GroupModel[]\> | |
|
| getWorkflowGroups\ | (filter: string, groupId?: string) | Observable\<GroupModel[]\> | |
|
||||||
| getWorkflowUsers\ | (filter: string, groupId?: string) | Observable\<GroupUserModel[]\> | |
|
| getWorkflowUsers\ | (filter: string, groupId?: string) | Observable\<GroupUserModel[]\> | |
|
||||||
|
|
||||||
## Common scenarios
|
## Other documentation
|
||||||
|
|
||||||
### Changing field value based on another field
|
### 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`).
|
Create a simple Form with a dropdown widget (id: `type`), and a multiline text (id: `description`).
|
||||||
|
|
||||||
@@ -544,7 +548,7 @@ The result should be as following:
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||
### Listen all form Events
|
#### Listen all form Events
|
||||||
|
|
||||||
If you want to listen all the events fired in the form you can subscribe to this Subject :
|
If you want to listen all the events fired in the form you can subscribe to this Subject :
|
||||||
|
|
||||||
@@ -560,7 +564,22 @@ formService.formEvents.subscribe((event: Event) => {
|
|||||||
- [Form Stencils with Angular 2](docs/stencils.md)
|
- [Form Stencils with Angular 2](docs/stencils.md)
|
||||||
- [Form Extensibility and Customisation](docs/extensibility.md).
|
- [Form Extensibility and Customisation](docs/extensibility.md).
|
||||||
|
|
||||||
## Build from sources
|
## Project Information
|
||||||
|
|
||||||
|
### 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](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
|
||||||
|
|
||||||
|
> If you plan to use this component with projects generated by Angular CLI, you can read more in [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
|
||||||
|
|
||||||
|
### Install
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm install ng2-activiti-form
|
||||||
|
```
|
||||||
|
|
||||||
|
### Build from sources
|
||||||
|
|
||||||
You can build the component from sources with the following commands:
|
You can build the component from sources with the following commands:
|
||||||
|
|
||||||
@@ -572,7 +591,7 @@ npm run build
|
|||||||
> The `build` task rebuilds all the code, runs tslint, license checks
|
> The `build` task rebuilds all the code, runs tslint, license checks
|
||||||
> and other quality check tools before performing unit testing.
|
> and other quality check tools before performing unit testing.
|
||||||
|
|
||||||
## NPM scripts
|
### NPM scripts
|
||||||
|
|
||||||
| Command | Description |
|
| Command | Description |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
@@ -581,7 +600,7 @@ npm run build
|
|||||||
| npm run test-browser | Run unit tests in the browser
|
| npm run test-browser | Run unit tests in the browser
|
||||||
| npm run coverage | Run unit tests and display code coverage report |
|
| npm run coverage | Run unit tests and display code coverage report |
|
||||||
|
|
||||||
## Demo
|
### Demo
|
||||||
|
|
||||||
Please check the demo folder for a demo project
|
Please check the demo folder for a demo project
|
||||||
|
|
||||||
@@ -591,6 +610,6 @@ npm install
|
|||||||
npm start
|
npm start
|
||||||
```
|
```
|
||||||
|
|
||||||
## License
|
### License
|
||||||
|
|
||||||
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
|
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
|
@@ -1,71 +1,75 @@
|
|||||||
# Activiti Process List Component
|
# Activiti Process List library
|
||||||
|
|
||||||
|
Contains the Activiti Process Instance List component and other related components and classes.
|
||||||
|
|
||||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
||||||
|
|
||||||
<!-- toc -->
|
<!-- toc -->
|
||||||
|
|
||||||
- [Prerequisites](#prerequisites)
|
|
||||||
- [Install](#install)
|
|
||||||
- [Activiti Process Instance List](#activiti-process-instance-list)
|
- [Activiti Process Instance List](#activiti-process-instance-list)
|
||||||
* [Properties](#properties)
|
* [Basic Usage](#basic-usage)
|
||||||
* [Events](#events)
|
+ [Properties](#properties)
|
||||||
|
+ [Events](#events)
|
||||||
|
* [Details](#details)
|
||||||
- [Process Filters Component](#process-filters-component)
|
- [Process Filters Component](#process-filters-component)
|
||||||
* [Properties](#properties-1)
|
* [Basic Usage](#basic-usage-1)
|
||||||
* [Events](#events-1)
|
+ [Properties](#properties-1)
|
||||||
* [How filter the activiti process filters](#how-filter-the-activiti-process-filters)
|
+ [Events](#events-1)
|
||||||
- [FilterParamsModel](#filterparamsmodel)
|
* [Details](#details-1)
|
||||||
* [How to create an accordion menu with the processes filter](#how-to-create-an-accordion-menu-with-the-processes-filter)
|
+ [How filter the activiti process filters](#how-filter-the-activiti-process-filters)
|
||||||
|
+ [FilterParamsModel](#filterparamsmodel)
|
||||||
|
+ [How to create an accordion menu with the processes filter](#how-to-create-an-accordion-menu-with-the-processes-filter)
|
||||||
- [Start Process component](#start-process-component)
|
- [Start Process component](#start-process-component)
|
||||||
* [Properties](#properties-2)
|
* [Basic Usage](#basic-usage-2)
|
||||||
* [Events](#events-2)
|
+ [Properties](#properties-2)
|
||||||
|
+ [Events](#events-2)
|
||||||
- [Process Details component](#process-details-component)
|
- [Process Details component](#process-details-component)
|
||||||
* [Properties](#properties-3)
|
* [Basic Usage](#basic-usage-3)
|
||||||
* [Events](#events-3)
|
+ [Properties](#properties-3)
|
||||||
|
+ [Events](#events-3)
|
||||||
- [Process Instance Details Header component](#process-instance-details-header-component)
|
- [Process Instance Details Header component](#process-instance-details-header-component)
|
||||||
* [Properties](#properties-4)
|
* [Basic Usage](#basic-usage-4)
|
||||||
* [Events](#events-4)
|
+ [Properties](#properties-4)
|
||||||
|
+ [Events](#events-4)
|
||||||
- [Process Instance Tasks component](#process-instance-tasks-component)
|
- [Process Instance Tasks component](#process-instance-tasks-component)
|
||||||
* [Properties](#properties-5)
|
* [Basic Usage](#basic-usage-5)
|
||||||
* [Events](#events-5)
|
+ [Properties](#properties-5)
|
||||||
|
+ [Events](#events-5)
|
||||||
- [Process Instance Comments component](#process-instance-comments-component)
|
- [Process Instance Comments component](#process-instance-comments-component)
|
||||||
* [Properties](#properties-6)
|
* [Basic Usage](#basic-usage-6)
|
||||||
|
+ [Properties](#properties-6)
|
||||||
- [Process Attachment List component](#process-attachment-list-component)
|
- [Process Attachment List component](#process-attachment-list-component)
|
||||||
* [Properties](#properties-7)
|
* [Basic Usage](#basic-usage-7)
|
||||||
* [Events](#events-6)
|
+ [Properties](#properties-7)
|
||||||
|
+ [Events](#events-6)
|
||||||
- [Create Process Attachment component](#create-process-attachment-component)
|
- [Create Process Attachment component](#create-process-attachment-component)
|
||||||
* [Properties](#properties-8)
|
* [Basic Usage](#basic-usage-8)
|
||||||
* [Events](#events-7)
|
+ [Properties](#properties-8)
|
||||||
|
+ [Events](#events-7)
|
||||||
- [Process Audit Directive](#process-audit-directive)
|
- [Process Audit Directive](#process-audit-directive)
|
||||||
* [Properties](#properties-9)
|
* [Basic Usage](#basic-usage-9)
|
||||||
|
+ [Properties](#properties-9)
|
||||||
+ [Events](#events-8)
|
+ [Events](#events-8)
|
||||||
- [Build from sources](#build-from-sources)
|
- [Project Information](#project-information)
|
||||||
- [NPM scripts](#npm-scripts)
|
* [Prerequisites](#prerequisites)
|
||||||
- [Demo](#demo)
|
* [Install](#install)
|
||||||
- [License](#license)
|
* [Build from sources](#build-from-sources)
|
||||||
|
* [NPM scripts](#npm-scripts)
|
||||||
|
* [Demo](#demo)
|
||||||
|
* [License](#license)
|
||||||
|
|
||||||
<!-- tocstop -->
|
<!-- tocstop -->
|
||||||
|
|
||||||
<!-- markdown-toc end -->
|
<!-- markdown-toc end -->
|
||||||
|
|
||||||
Displays lists of process instances both active and completed, using any defined process filter, and renders details for any chosen instance.
|
<!-- Displays lists of process instances both active and completed, using any defined process filter, and renders details for any chosen instance.-->
|
||||||
|
|
||||||
## Prerequisites
|
|
||||||
|
|
||||||
Before you start using this development framework, make sure you have installed all required software and done all the
|
|
||||||
necessary configuration [prerequisites](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
|
|
||||||
|
|
||||||
> If you plan using this component with projects generated by Angular CLI, please refer to the following article: [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
|
|
||||||
|
|
||||||
## Install
|
|
||||||
|
|
||||||
```sh
|
|
||||||
npm install ng2-activiti-processlist
|
|
||||||
```
|
|
||||||
|
|
||||||
## Activiti Process Instance List
|
## Activiti Process Instance List
|
||||||
|
|
||||||
This component renders a list containing all the process instances matched by the parameters specified.
|
This component renders a list containing all the process instances matched by the parameters specified.
|
||||||
|
|
||||||
|
### Basic Usage
|
||||||
|
|
||||||
**app.component.html**
|
**app.component.html**
|
||||||
|
|
||||||
```html
|
```html
|
||||||
@@ -75,7 +79,7 @@ This component renders a list containing all the process instances matched by th
|
|||||||
</adf-process-instance-list>
|
</adf-process-instance-list>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Properties
|
#### Properties
|
||||||
|
|
||||||
| Name | Description |
|
| Name | Description |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
@@ -83,9 +87,17 @@ This component renders a list containing all the process instances matched by th
|
|||||||
| processDefinitionKey | The processDefinitionKey of the process. |
|
| processDefinitionKey | The processDefinitionKey of the process. |
|
||||||
| state | Define state of the processes. Possible values are `running`, `completed` and `all` |
|
| state | Define state of the processes. Possible values are `running`, `completed` and `all` |
|
||||||
| sort | Define sort of the processes. Possible values are `created-desc`, `created-asc`, `ended-desc`, `ended-asc` |
|
| sort | Define sort of the processes. Possible values are `created-desc`, `created-asc`, `ended-desc`, `ended-asc` |
|
||||||
| schemaColumn | List of columns to display in the process instances datatable |
|
| schemaColumn | List of columns to display in the process instances datatable (see the [Details](#details) section below) |
|
||||||
|
|
||||||
Example:
|
#### Events
|
||||||
|
|
||||||
|
- **rowClick**: Emitted when a row in the process list is clicked
|
||||||
|
- **onSuccess**: Emitted when the list of process instances has been loaded successfully from the server
|
||||||
|
- **onError**: Emitted when an error is encountered loading the list of process instances from the server
|
||||||
|
|
||||||
|
### Details
|
||||||
|
|
||||||
|
Example value for the schemaColumn property (see [Properties](#properties) section above):
|
||||||
|
|
||||||
```json
|
```json
|
||||||
[
|
[
|
||||||
@@ -96,20 +108,11 @@ Example:
|
|||||||
]
|
]
|
||||||
```
|
```
|
||||||
|
|
||||||
### Events
|
|
||||||
|
|
||||||
- **rowClick**: Emitted when a row in the process list is clicked
|
|
||||||
- **onSuccess**: Emitted when the list of process instances has been loaded successfully from the server
|
|
||||||
- **onError**: Emitted when an error is encountered loading the list of process instances from the server
|
|
||||||
|
|
||||||
## Process Filters Component
|
## Process Filters Component
|
||||||
|
|
||||||
Process filters are a collection of criteria used to filter process instances, which may be customized
|
Collection of criteria used to filter process instances, which may be customized by users.
|
||||||
by users. This component displays a list of available filters and allows the user to select any given
|
|
||||||
filter as the active filter.
|
|
||||||
|
|
||||||
The most common usage is in driving a process instance list to allow the user to choose which
|
### Basic Usage
|
||||||
process instances are displayed in the list.
|
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-process-instance-filters
|
<adf-process-instance-filters
|
||||||
@@ -117,10 +120,10 @@ process instances are displayed in the list.
|
|||||||
</adf-process-instance-filters>
|
</adf-process-instance-filters>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Properties
|
#### Properties
|
||||||
|
|
||||||
| Name | Type | Description |
|
| Name | Type | Description |
|
||||||
| --- | --- | --- | --- |
|
| --- | --- | --- |
|
||||||
| filterParam | [FilterParamsModel](#filterparamsmodel) | The params to filter the task filter. If there is no match the default one (first filter of the list) is selected |
|
| filterParam | [FilterParamsModel](#filterparamsmodel) | The params to filter the task filter. If there is no match the default one (first filter of the list) is selected |
|
||||||
| appId | string | Display filters available to the current user for the application with the specified ID. |
|
| appId | string | Display filters available to the current user for the application with the specified ID. |
|
||||||
| appName | string | Display filters available to the current user for the application with the specified name. |
|
| appName | string | Display filters available to the current user for the application with the specified name. |
|
||||||
@@ -128,7 +131,7 @@ process instances are displayed in the list.
|
|||||||
|
|
||||||
If both `appId` and `appName` are specified then `appName` will take precedence and `appId` will be ignored.
|
If both `appId` and `appName` are specified then `appName` will take precedence and `appId` will be ignored.
|
||||||
|
|
||||||
### Events
|
#### Events
|
||||||
|
|
||||||
| Name | Description |
|
| Name | Description |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
@@ -136,7 +139,15 @@ If both `appId` and `appName` are specified then `appName` will take precedence
|
|||||||
| onError | Raised when an error occurs |
|
| onError | Raised when an error occurs |
|
||||||
| filterClick | Raised when the user selects a filter from the list |
|
| filterClick | Raised when the user selects a filter from the list |
|
||||||
|
|
||||||
### How filter the activiti process filters
|
### Details
|
||||||
|
|
||||||
|
This component displays a list of available filters and allows the user to select any given
|
||||||
|
filter as the active filter.
|
||||||
|
|
||||||
|
The most common usage is in driving a process instance list to allow the user to choose which
|
||||||
|
process instances are displayed in the list.
|
||||||
|
|
||||||
|
#### How filter the activiti process filters
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-process-instance-filters
|
<adf-process-instance-filters
|
||||||
@@ -144,9 +155,9 @@ If both `appId` and `appName` are specified then `appName` will take precedence
|
|||||||
</adf-filters>
|
</adf-filters>
|
||||||
```
|
```
|
||||||
|
|
||||||
You can use inside the filterParam one of the following property.
|
You can use inside the filterParam one of the properties defined by [FilterParamsModel](#filterparamsmodel) (see below).
|
||||||
|
|
||||||
## FilterParamsModel
|
#### FilterParamsModel
|
||||||
|
|
||||||
```json
|
```json
|
||||||
{
|
{
|
||||||
@@ -162,7 +173,7 @@ You can use inside the filterParam one of the following property.
|
|||||||
| name | string | The name of the task filter, lowercase is checked. |
|
| name | string | The name of the task filter, lowercase is checked. |
|
||||||
| index | number | Zero-based position of the filter in the array. |
|
| index | number | Zero-based position of the filter in the array. |
|
||||||
|
|
||||||
### How to create an accordion menu with the processes filter
|
#### How to create an accordion menu with the processes filter
|
||||||
|
|
||||||
You can create an accordion menu using the AccordionComponent that wrap the activiti task filter.
|
You can create an accordion menu using the AccordionComponent that wrap the activiti task filter.
|
||||||
The AccordionComponent is exposed by the alfresco-core.
|
The AccordionComponent is exposed by the alfresco-core.
|
||||||
@@ -188,6 +199,8 @@ The AccordionComponent is exposed by the alfresco-core.
|
|||||||
|
|
||||||
Displays Start Process, allowing the user to specify some basic details needed to start a new process instance.
|
Displays Start Process, allowing the user to specify some basic details needed to start a new process instance.
|
||||||
|
|
||||||
|
### Basic Usage
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-start-process
|
<adf-start-process
|
||||||
appId="YOUR_APP_ID" >
|
appId="YOUR_APP_ID" >
|
||||||
@@ -195,14 +208,14 @@ Displays Start Process, allowing the user to specify some basic details needed t
|
|||||||
```
|
```
|
||||||

|

|
||||||
|
|
||||||
### Properties
|
#### Properties
|
||||||
|
|
||||||
| Name | Description |
|
| Name | Description |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
| appId | (required): Limit the list of processes which can be started to those contained in the specified app |
|
| appId | (required): Limit the list of processes which can be started to those contained in the specified app |
|
||||||
| variables | Variables in input to the process [RestVariable](https://github.com/Alfresco/alfresco-js-api/tree/master/src/alfresco-activiti-rest-api/docs/RestVariable.md)|
|
| variables | Variables in input to the process [RestVariable](https://github.com/Alfresco/alfresco-js-api/tree/master/src/alfresco-activiti-rest-api/docs/RestVariable.md)|
|
||||||
|
|
||||||
### Events
|
#### Events
|
||||||
|
|
||||||
| Name | Description |
|
| Name | Description |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
@@ -212,7 +225,9 @@ Displays Start Process, allowing the user to specify some basic details needed t
|
|||||||
|
|
||||||
## Process Details component
|
## Process Details component
|
||||||
|
|
||||||
This component displays detailed information on a specified process instance
|
Displays detailed information on a specified process instance
|
||||||
|
|
||||||
|
### Basic Usage
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-process-instance-details
|
<adf-process-instance-details
|
||||||
@@ -220,13 +235,13 @@ This component displays detailed information on a specified process instance
|
|||||||
</adf-process-instance-details>
|
</adf-process-instance-details>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Properties
|
#### Properties
|
||||||
|
|
||||||
| Name | Type | Description |
|
| Name | Type | Description |
|
||||||
| --- | --- | --- |
|
| --- | --- | --- |
|
||||||
| processInstanceId | string | (required): The numeric ID of the process instance to display |
|
| processInstanceId | string | (required): The numeric ID of the process instance to display |
|
||||||
|
|
||||||
### Events
|
#### Events
|
||||||
|
|
||||||
| Name | Description |
|
| Name | Description |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
@@ -236,7 +251,9 @@ This component displays detailed information on a specified process instance
|
|||||||
|
|
||||||
## Process Instance Details Header component
|
## Process Instance Details Header component
|
||||||
|
|
||||||
This is a sub-component of the process details component, which renders some general information about the selected process.
|
Sub-component of the process details component, which renders some general information about the selected process.
|
||||||
|
|
||||||
|
### Basic Usage
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-process-instance-header
|
<adf-process-instance-header
|
||||||
@@ -245,20 +262,22 @@ This is a sub-component of the process details component, which renders some gen
|
|||||||
```
|
```
|
||||||

|

|
||||||
|
|
||||||
### Properties
|
#### Properties
|
||||||
|
|
||||||
| Name | Type| Description |
|
| Name | Type| Description |
|
||||||
| --- | --- | --- |
|
| --- | --- | --- |
|
||||||
| processInstance | [ProcessInstanceModel](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-activiti-processlist/src/models/process-instance.model.ts) | (**required**): Full details of the process instance to display information about |
|
| processInstance | [ProcessInstanceModel](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-activiti-processlist/src/models/process-instance.model.ts) | (**required**): Full details of the process instance to display information about |
|
||||||
|
|
||||||
### Events
|
#### Events
|
||||||
|
|
||||||
No events
|
This component does not define any events.
|
||||||
|
|
||||||
## Process Instance Tasks component
|
## Process Instance Tasks component
|
||||||
|
|
||||||
Lists both the active and completed tasks associated with a particular process instance
|
Lists both the active and completed tasks associated with a particular process instance
|
||||||
|
|
||||||
|
### Basic Usage
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-process-instance-tasks
|
<adf-process-instance-tasks
|
||||||
processInstanceId="YOUR_PROCESS_INSTANCE_ID"
|
processInstanceId="YOUR_PROCESS_INSTANCE_ID"
|
||||||
@@ -266,14 +285,14 @@ Lists both the active and completed tasks associated with a particular process i
|
|||||||
</adf-process-instance-tasks>
|
</adf-process-instance-tasks>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Properties
|
#### Properties
|
||||||
|
|
||||||
| Name | Type | Description |
|
| Name | Type | Description |
|
||||||
| --- | --- | --- |
|
| --- | --- | --- |
|
||||||
| processInstanceId | string | (**required**): The ID of the process instance to display tasks for |
|
| processInstanceId | string | (**required**): The ID of the process instance to display tasks for |
|
||||||
| showRefreshButton | boolean | (default: `true`): Whether to show a refresh button next to the list of tasks to allow this to be updated from the server |
|
| showRefreshButton | boolean | (default: `true`): Whether to show a refresh button next to the list of tasks to allow this to be updated from the server |
|
||||||
|
|
||||||
### Events
|
#### Events
|
||||||
|
|
||||||
| Name | Description |
|
| Name | Description |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
@@ -283,13 +302,15 @@ Lists both the active and completed tasks associated with a particular process i
|
|||||||
|
|
||||||
Displays comments associated with a particular process instance and allows the user to add new comments
|
Displays comments associated with a particular process instance and allows the user to add new comments
|
||||||
|
|
||||||
|
### Basic Usage
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-process-instance-comments
|
<adf-process-instance-comments
|
||||||
processInstanceId="YOUR_PROCESS_INSTANCE_ID">
|
processInstanceId="YOUR_PROCESS_INSTANCE_ID">
|
||||||
</adf-process-instance-comments>
|
</adf-process-instance-comments>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Properties
|
#### Properties
|
||||||
|
|
||||||
| Name | Type | Description |
|
| Name | Type | Description |
|
||||||
| --- | --- | --- |
|
| --- | --- | --- |
|
||||||
@@ -297,7 +318,9 @@ Displays comments associated with a particular process instance and allows the u
|
|||||||
|
|
||||||
## Process Attachment List component
|
## Process Attachment List component
|
||||||
|
|
||||||
This component displays attached documents on a specified process instance
|
Displays attached documents on a specified process instance
|
||||||
|
|
||||||
|
### Basic Usage
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-process-attachment-list
|
<adf-process-attachment-list
|
||||||
@@ -307,14 +330,14 @@ This component displays attached documents on a specified process instance
|
|||||||
```
|
```
|
||||||

|

|
||||||
|
|
||||||
### Properties
|
#### Properties
|
||||||
|
|
||||||
| Name | Type | Description |
|
| Name | Type | Description |
|
||||||
| --- | --- | -- |
|
| --- | --- | -- |
|
||||||
| processInstanceId | string | (**required**): The ID of the process instance to display |
|
| processInstanceId | string | (**required**): The ID of the process instance to display |
|
||||||
| disabled | boolean | false | Disable/Enable read only mode for attachement list |
|
| disabled | boolean | false | Disable/Enable read only mode for attachement list |
|
||||||
|
|
||||||
### Events
|
#### Events
|
||||||
|
|
||||||
| Name | Description |
|
| Name | Description |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
@@ -324,7 +347,9 @@ This component displays attached documents on a specified process instance
|
|||||||
|
|
||||||
## Create Process Attachment component
|
## Create Process Attachment component
|
||||||
|
|
||||||
This component displays Upload Component(Drag and Click) to upload the attachment to a specified process instance
|
Displays Upload Component(Drag and Click) to upload the attachment to a specified process instance
|
||||||
|
|
||||||
|
### Basic Usage
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-create-process-attachment
|
<adf-create-process-attachment
|
||||||
@@ -336,13 +361,13 @@ This component displays Upload Component(Drag and Click) to upload the attachmen
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||
### Properties
|
#### Properties
|
||||||
|
|
||||||
| Name | Type | Description |
|
| Name | Type | Description |
|
||||||
| --- | --- | --- |
|
| --- | --- | --- |
|
||||||
| processInstanceId | string | (**required**): The ID of the process instance to display |
|
| processInstanceId | string | (**required**): The ID of the process instance to display |
|
||||||
|
|
||||||
### Events
|
#### Events
|
||||||
|
|
||||||
| Name | Description |
|
| Name | Description |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
@@ -351,7 +376,9 @@ This component displays Upload Component(Drag and Click) to upload the attachmen
|
|||||||
|
|
||||||
## Process Audit Directive
|
## Process Audit Directive
|
||||||
|
|
||||||
This directive provide a way to fetch the Process Audit information in the pdf or json format.
|
Provide a way to fetch the Process Audit information in the pdf or json format.
|
||||||
|
|
||||||
|
### Basic Usage
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<button
|
<button
|
||||||
@@ -366,7 +393,7 @@ This directive provide a way to fetch the Process Audit information in the pdf o
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||
### Properties
|
#### Properties
|
||||||
|
|
||||||
| Name | Type | Default | Description |
|
| Name | Type | Default | Description |
|
||||||
| --- | --- | --- | --- |
|
| --- | --- | --- | --- |
|
||||||
@@ -382,7 +409,22 @@ This directive provide a way to fetch the Process Audit information in the pdf o
|
|||||||
| clicked | Raised when the task audit info is ready |
|
| clicked | Raised when the task audit info is ready |
|
||||||
| error | Raised if there is an error during fetching task information |
|
| error | Raised if there is an error during fetching task information |
|
||||||
|
|
||||||
## Build from sources
|
## Project Information
|
||||||
|
|
||||||
|
### Prerequisites
|
||||||
|
|
||||||
|
Before you start using this development framework, make sure you have installed all required software and done all the
|
||||||
|
necessary configuration [prerequisites](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
|
||||||
|
|
||||||
|
> If you plan using this component with projects generated by Angular CLI, please refer to the following article: [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
|
||||||
|
|
||||||
|
### Install
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm install ng2-activiti-processlist
|
||||||
|
```
|
||||||
|
|
||||||
|
### Build from sources
|
||||||
|
|
||||||
You can build component from sources with the following commands:
|
You can build component from sources with the following commands:
|
||||||
|
|
||||||
@@ -394,7 +436,7 @@ npm run build
|
|||||||
> The `build` task rebuilds all the code, runs tslint, license checks
|
> The `build` task rebuilds all the code, runs tslint, license checks
|
||||||
> and other quality check tools before performing unit testing.
|
> and other quality check tools before performing unit testing.
|
||||||
|
|
||||||
## NPM scripts
|
### NPM scripts
|
||||||
|
|
||||||
| Command | Description |
|
| Command | Description |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
@@ -403,7 +445,7 @@ npm run build
|
|||||||
| npm run test-browser | Run unit tests in the browser
|
| npm run test-browser | Run unit tests in the browser
|
||||||
| npm run coverage | Run unit tests and display code coverage report |
|
| npm run coverage | Run unit tests and display code coverage report |
|
||||||
|
|
||||||
## Demo
|
### Demo
|
||||||
|
|
||||||
Please check the demo folder for a demo project
|
Please check the demo folder for a demo project
|
||||||
|
|
||||||
@@ -413,6 +455,6 @@ npm install
|
|||||||
npm start
|
npm start
|
||||||
```
|
```
|
||||||
|
|
||||||
## License
|
### License
|
||||||
|
|
||||||
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
|
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
|
||||||
|
@@ -1,90 +1,99 @@
|
|||||||
# APS Task List Component
|
# Activiti Task List library
|
||||||
|
|
||||||
|
Contains the Activiti Task List component and other related components and classes.
|
||||||
|
|
||||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
||||||
|
|
||||||
<!-- toc -->
|
<!-- toc -->
|
||||||
|
|
||||||
- [Prerequisites](#prerequisites)
|
- [Activiti Task List component](#activiti-task-list-component)
|
||||||
- [Install](#install)
|
* [Basic Usage](#basic-usage)
|
||||||
- [Activiti Task List](#activiti-task-list)
|
+ [Properties](#properties)
|
||||||
* [DataColumn Properties](#datacolumn-properties)
|
+ [Events](#events)
|
||||||
* [Events](#events)
|
* [Details](#details)
|
||||||
* [Properties](#properties)
|
+ [DataTableAdapter example](#datatableadapter-example)
|
||||||
- [Activiti Task Details](#activiti-task-details)
|
+ [DataColumn Properties](#datacolumn-properties)
|
||||||
* [Properties](#properties-1)
|
- [Activiti Task Details component](#activiti-task-details-component)
|
||||||
* [Events](#events-1)
|
* [Basic Usage](#basic-usage-1)
|
||||||
* [Custom 'empty Activiti Task Details' template](#custom-empty-activiti-task-details-template)
|
+ [Properties](#properties-1)
|
||||||
|
+ [Events](#events-1)
|
||||||
|
* [Details](#details-1)
|
||||||
|
+ [Custom 'empty Activiti Task Details' template](#custom-empty-activiti-task-details-template)
|
||||||
- [Activiti Apps Component](#activiti-apps-component)
|
- [Activiti Apps Component](#activiti-apps-component)
|
||||||
* [Properties](#properties-2)
|
* [Basic Usage](#basic-usage-2)
|
||||||
* [Events](#events-2)
|
+ [Properties](#properties-2)
|
||||||
* [How filter the activiti apps](#how-filter-the-activiti-apps)
|
+ [Events](#events-2)
|
||||||
- [Activiti Filter](#activiti-filter)
|
* [Details](#details-2)
|
||||||
* [Properties](#properties-3)
|
+ [How filter the activiti apps](#how-filter-the-activiti-apps)
|
||||||
* [Events](#events-3)
|
- [Activiti Filter component](#activiti-filter-component)
|
||||||
* [How filter the activiti task filters](#how-filter-the-activiti-task-filters)
|
* [Basic Usage](#basic-usage-3)
|
||||||
* [FilterParamsModel](#filterparamsmodel)
|
+ [Properties](#properties-3)
|
||||||
* [How to create an accordion menu with the task filter](#how-to-create-an-accordion-menu-with-the-task-filter)
|
+ [Events](#events-3)
|
||||||
|
* [Details](#details-3)
|
||||||
|
+ [How filter the activiti task filters](#how-filter-the-activiti-task-filters)
|
||||||
|
+ [FilterParamsModel](#filterparamsmodel)
|
||||||
|
+ [How to create an accordion menu with the task filter](#how-to-create-an-accordion-menu-with-the-task-filter)
|
||||||
- [Activiti Checklist Component](#activiti-checklist-component)
|
- [Activiti Checklist Component](#activiti-checklist-component)
|
||||||
* [Properties](#properties-4)
|
* [Basic Usage](#basic-usage-4)
|
||||||
|
+ [Properties](#properties-4)
|
||||||
- [Task Attachment List Component](#task-attachment-list-component)
|
- [Task Attachment List Component](#task-attachment-list-component)
|
||||||
* [Properties](#properties-5)
|
* [Basic Usage](#basic-usage-5)
|
||||||
* [Events](#events-4)
|
+ [Properties](#properties-5)
|
||||||
|
+ [Events](#events-4)
|
||||||
- [Create Task Attachment Component](#create-task-attachment-component)
|
- [Create Task Attachment Component](#create-task-attachment-component)
|
||||||
* [Properties](#properties-6)
|
* [Basic Usage](#basic-usage-6)
|
||||||
|
+ [Properties](#properties-6)
|
||||||
+ [Events](#events-5)
|
+ [Events](#events-5)
|
||||||
- [Activiti Task Header](#activiti-task-header)
|
- [Activiti Task Header component](#activiti-task-header-component)
|
||||||
* [Properties](#properties-7)
|
* [Basic Usage](#basic-usage-7)
|
||||||
* [Events](#events-6)
|
+ [Properties](#properties-7)
|
||||||
- [TaskDetailsModel](#taskdetailsmodel)
|
+ [Events](#events-6)
|
||||||
|
* [Details](#details-4)
|
||||||
|
+ [TaskDetailsModel](#taskdetailsmodel)
|
||||||
- [Task People Component](#task-people-component)
|
- [Task People Component](#task-people-component)
|
||||||
* [Properties](#properties-8)
|
* [Basic Usage](#basic-usage-8)
|
||||||
|
+ [Properties](#properties-8)
|
||||||
+ [Events](#events-7)
|
+ [Events](#events-7)
|
||||||
|
* [Details](#details-5)
|
||||||
+ [How to customize the people component behavior](#how-to-customize-the-people-component-behavior)
|
+ [How to customize the people component behavior](#how-to-customize-the-people-component-behavior)
|
||||||
+ [Involve People single click and close search](#involve-people-single-click-and-close-search)
|
+ [Involve People single click and close search](#involve-people-single-click-and-close-search)
|
||||||
+ [Involve People single click without close search](#involve-people-single-click-without-close-search)
|
+ [Involve People single click without close search](#involve-people-single-click-without-close-search)
|
||||||
+ [Involve People double click and close search](#involve-people-double-click-and-close-search)
|
+ [Involve People double click and close search](#involve-people-double-click-and-close-search)
|
||||||
+ [Involve People double double without close search](#involve-people-double-double-without-close-search)
|
+ [Involve People double double without close search](#involve-people-double-double-without-close-search)
|
||||||
- [ADF Comments Component](#adf-comments-component)
|
- [ADF Comments Component](#adf-comments-component)
|
||||||
* [Properties](#properties-9)
|
* [Basic Usage](#basic-usage-9)
|
||||||
|
+ [Properties](#properties-9)
|
||||||
+ [Events](#events-8)
|
+ [Events](#events-8)
|
||||||
- [Start Task Component](#start-task-component)
|
- [Start Task Component](#start-task-component)
|
||||||
* [Properties](#properties-10)
|
* [Basic Usage](#basic-usage-10)
|
||||||
|
+ [Properties](#properties-10)
|
||||||
+ [Events](#events-9)
|
+ [Events](#events-9)
|
||||||
- [Task Audit Directive](#task-audit-directive)
|
- [People Search component](#people-search-component)
|
||||||
* [Properties](#properties-11)
|
* [Basic Usage](#basic-usage-11)
|
||||||
|
+ [Properties](#properties-11)
|
||||||
+ [Events](#events-10)
|
+ [Events](#events-10)
|
||||||
- [People Search](#people-search)
|
* [Details](#details-6)
|
||||||
* [Properties](#properties-12)
|
- [Task Audit Directive](#task-audit-directive)
|
||||||
* [Events](#events-11)
|
* [Basic Usage](#basic-usage-12)
|
||||||
* [How to use](#how-to-use)
|
+ [Properties](#properties-12)
|
||||||
- [Build from sources](#build-from-sources)
|
+ [Events](#events-11)
|
||||||
- [NPM scripts](#npm-scripts)
|
- [Project Information](#project-information)
|
||||||
- [Demo](#demo)
|
* [Prerequisites](#prerequisites)
|
||||||
- [License](#license)
|
* [Install](#install)
|
||||||
|
* [Build from sources](#build-from-sources)
|
||||||
|
* [NPM scripts](#npm-scripts)
|
||||||
|
* [Demo](#demo)
|
||||||
|
* [License](#license)
|
||||||
|
|
||||||
<!-- tocstop -->
|
<!-- tocstop -->
|
||||||
|
|
||||||
<!-- markdown-toc end -->
|
<!-- markdown-toc end -->
|
||||||
|
|
||||||
Displays lists of process instances both active and completed, using any defined process filter, and
|
## Activiti Task List component
|
||||||
render details of any chosen instance.
|
|
||||||
|
|
||||||
## Prerequisites
|
Renders a list containing all the tasks matched by the parameters specified.
|
||||||
|
|
||||||
Before you start using this development framework, make sure you have installed all required software and done all the
|
### Basic Usage
|
||||||
necessary configuration [prerequisites](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
|
|
||||||
|
|
||||||
> If you plan using this component with projects generated by Angular CLI, please refer to the following article: [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
|
|
||||||
|
|
||||||
## Install
|
|
||||||
|
|
||||||
```sh
|
|
||||||
npm install ng2-activiti-tasklist
|
|
||||||
```
|
|
||||||
|
|
||||||
## Activiti Task List
|
|
||||||
|
|
||||||
This component renders a list containing all the tasks matched by the parameters specified.
|
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-tasklist
|
<adf-tasklist
|
||||||
@@ -105,7 +114,44 @@ You can also use HTML-based schema declaration like shown below:
|
|||||||
</adf-tasklist>
|
</adf-tasklist>
|
||||||
```
|
```
|
||||||
|
|
||||||
### DataColumn Properties
|
#### Properties
|
||||||
|
|
||||||
|
| Name | Type | Default | Description |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| appId | string || The id of the app. |
|
||||||
|
| processDefinitionKey | string || The processDefinitionKey of the process. |
|
||||||
|
| processInstanceId | string || The processInstanceId of the process. |
|
||||||
|
| assignment | string || The assignment of the process. <ul>Possible values are: <li>assignee : where the current user is the assignee</li> <li>candidate: where the current user is a task candidate </li><li>group_x: where the task is assigned to a group where the current user is a member of.</li> <li>no value: where the current user is involved</li> </ul> |
|
||||||
|
| state | string || Define state of the processes. Possible values are: `completed`, `active` |
|
||||||
|
| hasIcon | boolean | true | Toggle the icon on the left . |
|
||||||
|
| landingTaskId | string | | Define which task id should be selected after the reloading. If the task id doesn't exist or nothing is passed it will select the first task |
|
||||||
|
| sort | string | | Define the sort of the processes. Possible values are : `created-desc`, `created-asc`, `due-desc`, `due-asc` |
|
||||||
|
| data | DataTableAdapter | | JSON object that represent the number and the type of the columns that you want show (see the [example](#datatableadapter-example) section below) |
|
||||||
|
|
||||||
|
#### Events
|
||||||
|
|
||||||
|
| Name | Description |
|
||||||
|
| --- | --- |
|
||||||
|
| onSuccess | Raised when the task list is loaded |
|
||||||
|
| rowClick | Raised when the task in the list is clicked |
|
||||||
|
|
||||||
|
### Details
|
||||||
|
|
||||||
|
This component displays lists of process instances both active and completed, using any defined process filter, and
|
||||||
|
render details of any chosen instance.
|
||||||
|
|
||||||
|
#### DataTableAdapter example
|
||||||
|
|
||||||
|
```json
|
||||||
|
[
|
||||||
|
{"type": "text", "key": "id", "title": "Id"},
|
||||||
|
{"type": "text", "key": "name", "title": "Name", "cssClass": "full-width name-column", "sortable": true},
|
||||||
|
{"type": "text", "key": "formKey", "title": "Form Key", "sortable": true},
|
||||||
|
{"type": "text", "key": "created", "title": "Created", "sortable": true}
|
||||||
|
]
|
||||||
|
```
|
||||||
|
|
||||||
|
#### DataColumn Properties
|
||||||
|
|
||||||
Here's the list of available properties you can define for a Data Column definition.
|
Here's the list of available properties you can define for a Data Column definition.
|
||||||
|
|
||||||
@@ -120,41 +166,11 @@ Here's the list of available properties you can define for a Data Column definit
|
|||||||
| sr-title | string | | Screen reader title, used for accessibility purposes |
|
| sr-title | string | | Screen reader title, used for accessibility purposes |
|
||||||
| class | string | | Additional CSS class to be applied to column (header and cells) |
|
| class | string | | Additional CSS class to be applied to column (header and cells) |
|
||||||
|
|
||||||
### Events
|
## Activiti Task Details component
|
||||||
|
|
||||||
| Name | Description |
|
Shows the details of the task id passed in input
|
||||||
| --- | --- |
|
|
||||||
| onSuccess | Raised when the task list is loaded |
|
|
||||||
| rowClick | Raised when the task in the list is clicked |
|
|
||||||
|
|
||||||
### Properties
|
### Basic Usage
|
||||||
|
|
||||||
| Name | Type | Default | Description |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| appId | string || The id of the app. |
|
|
||||||
| processDefinitionKey | string || The processDefinitionKey of the process. |
|
|
||||||
| processInstanceId | string || The processInstanceId of the process. |
|
|
||||||
| assignment | string || The assignment of the process. <ul>Possible values are: <li>assignee : where the current user is the assignee</li> <li>candidate: where the current user is a task candidate </li><li>group_x: where the task is assigned to a group where the current user is a member of.</li> <li>no value: where the current user is involved</li> </ul> |
|
|
||||||
| state | string || Define state of the processes. Possible values are: `completed`, `active` |
|
|
||||||
| hasIcon | boolean | true | Toggle the icon on the left . |
|
|
||||||
| landingTaskId | string | | Define which task id should be selected after the reloading. If the task id doesn't exist or nothing is passed it will select the first task |
|
|
||||||
| sort | string | | Define the sort of the processes. Possible values are : `created-desc`, `created-asc`, `due-desc`, `due-asc` |
|
|
||||||
| data | DataTableAdapter | | JSON object that represent the number and the type of the columns that you want show |
|
|
||||||
|
|
||||||
Example:
|
|
||||||
|
|
||||||
```json
|
|
||||||
[
|
|
||||||
{"type": "text", "key": "id", "title": "Id"},
|
|
||||||
{"type": "text", "key": "name", "title": "Name", "cssClass": "full-width name-column", "sortable": true},
|
|
||||||
{"type": "text", "key": "formKey", "title": "Form Key", "sortable": true},
|
|
||||||
{"type": "text", "key": "created", "title": "Created", "sortable": true}
|
|
||||||
]
|
|
||||||
```
|
|
||||||
|
|
||||||
## Activiti Task Details
|
|
||||||
|
|
||||||
The component shows the details of the task id passed in input
|
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-task-details
|
<adf-task-details
|
||||||
@@ -162,7 +178,7 @@ The component shows the details of the task id passed in input
|
|||||||
</adf-task-details>
|
</adf-task-details>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Properties
|
#### Properties
|
||||||
|
|
||||||
| Name | Type | Default | Description |
|
| Name | Type | Default | Description |
|
||||||
| --- | --- | --- | --- |
|
| --- | --- | --- | --- |
|
||||||
@@ -181,7 +197,7 @@ The component shows the details of the task id passed in input
|
|||||||
| showChecklist | boolean | true | Toggle `Checklist` feature for Header component |
|
| showChecklist | boolean | true | Toggle `Checklist` feature for Header component |
|
||||||
| fieldValidators | FormFieldValidator[] | [] | Field validators for use with the form. |
|
| fieldValidators | FormFieldValidator[] | [] | Field validators for use with the form. |
|
||||||
|
|
||||||
### Events
|
#### Events
|
||||||
|
|
||||||
| Name | Description |
|
| Name | Description |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
@@ -192,7 +208,9 @@ The component shows the details of the task id passed in input
|
|||||||
| executeOutcome | Raised when any outcome is executed, default behaviour can be prevented via `event.preventDefault()` |
|
| executeOutcome | Raised when any outcome is executed, default behaviour can be prevented via `event.preventDefault()` |
|
||||||
| onError | Raised at any error |
|
| onError | Raised at any error |
|
||||||
|
|
||||||
### Custom 'empty Activiti Task Details' template
|
### Details
|
||||||
|
|
||||||
|
#### Custom 'empty Activiti Task Details' template
|
||||||
|
|
||||||
By default the Activiti Task Details provides the following message for the empty task details:
|
By default the Activiti Task Details provides the following message for the empty task details:
|
||||||
|
|
||||||
@@ -217,7 +235,9 @@ Note that can put any HTML content as part of the template, including other Angu
|
|||||||
|
|
||||||
## Activiti Apps Component
|
## Activiti Apps Component
|
||||||
|
|
||||||
The component shows all the available apps.
|
Shows all available apps.
|
||||||
|
|
||||||
|
### Basic Usage
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-apps
|
<adf-apps
|
||||||
@@ -225,20 +245,22 @@ The component shows all the available apps.
|
|||||||
</adf-apps>
|
</adf-apps>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Properties
|
#### Properties
|
||||||
|
|
||||||
| Name | Type | Description |
|
| Name | Type | Description |
|
||||||
| --- | --- | --- |
|
| --- | --- | --- |
|
||||||
| layoutType | string | (**required**) Define the layout of the apps. There are two possible values: GRID or LIST. |
|
| layoutType | string | (**required**) Define the layout of the apps. There are two possible values: GRID or LIST. |
|
||||||
| filtersAppId | Object | Provide a way to filter the apps to show. |
|
| filtersAppId | Object | Provide a way to filter the apps to show. |
|
||||||
|
|
||||||
### Events
|
#### Events
|
||||||
|
|
||||||
| Name | Description |
|
| Name | Description |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
| appClick | Raised when an app entry is clicked |
|
| appClick | Raised when an app entry is clicked |
|
||||||
|
|
||||||
### How filter the activiti apps
|
### Details
|
||||||
|
|
||||||
|
#### How filter the activiti apps
|
||||||
|
|
||||||
If you want to show some specific apps you can specify them through the filtersAppId parameters
|
If you want to show some specific apps you can specify them through the filtersAppId parameters
|
||||||
|
|
||||||
@@ -267,15 +289,17 @@ You can use inside the filter one of the following property
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
## Activiti Filter
|
## Activiti Filter component
|
||||||
|
|
||||||
The component shows all the available filters.
|
Shows all available filters.
|
||||||
|
|
||||||
|
### Basic Usage
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-filters></adf-filters>
|
<adf-filters></adf-filters>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Properties
|
#### Properties
|
||||||
|
|
||||||
| Name | Type | Description |
|
| Name | Type | Description |
|
||||||
| --- | --- | --- |
|
| --- | --- | --- |
|
||||||
@@ -286,7 +310,7 @@ The component shows all the available filters.
|
|||||||
|
|
||||||
If both `appId` and `appName` are specified then `appName` will take precedence and `appId` will be ignored.
|
If both `appId` and `appName` are specified then `appName` will take precedence and `appId` will be ignored.
|
||||||
|
|
||||||
### Events
|
#### Events
|
||||||
|
|
||||||
| Name | Description |
|
| Name | Description |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
@@ -294,7 +318,9 @@ If both `appId` and `appName` are specified then `appName` will take precedence
|
|||||||
| onSuccess | Raised when the list is loaded |
|
| onSuccess | Raised when the list is loaded |
|
||||||
| onError | Raised if there is an error during the loading |
|
| onError | Raised if there is an error during the loading |
|
||||||
|
|
||||||
### How filter the activiti task filters
|
### Details
|
||||||
|
|
||||||
|
#### How filter the activiti task filters
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-filters
|
<adf-filters
|
||||||
@@ -304,9 +330,9 @@ If both `appId` and `appName` are specified then `appName` will take precedence
|
|||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
You can use inside the filterParam one of the following property.
|
You can use inside the filterParam one of the properties from [FilterParamsModel](#filterparamsmodel) (see below).
|
||||||
|
|
||||||
### FilterParamsModel
|
#### FilterParamsModel
|
||||||
|
|
||||||
```json
|
```json
|
||||||
{
|
{
|
||||||
@@ -322,7 +348,7 @@ You can use inside the filterParam one of the following property.
|
|||||||
| name | string | The name of the task filter, lowercase is checked |
|
| name | string | The name of the task filter, lowercase is checked |
|
||||||
| index | string | The zero-based position of the filter in the array. |
|
| index | string | The zero-based position of the filter in the array. |
|
||||||
|
|
||||||
### How to create an accordion menu with the task filter
|
#### How to create an accordion menu with the task filter
|
||||||
|
|
||||||
You can create an accordion menu using the AccordionComponent that wrap the activiti task filter.
|
You can create an accordion menu using the AccordionComponent that wrap the activiti task filter.
|
||||||
The AccordionComponent is exposed by the alfresco-core.
|
The AccordionComponent is exposed by the alfresco-core.
|
||||||
@@ -345,7 +371,9 @@ The AccordionComponent is exposed by the alfresco-core.
|
|||||||
|
|
||||||
## Activiti Checklist Component
|
## Activiti Checklist Component
|
||||||
|
|
||||||
The component shows the checklist task functionality.
|
Shows the checklist task functionality.
|
||||||
|
|
||||||
|
### Basic Usage
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-checklist
|
<adf-checklist
|
||||||
@@ -355,7 +383,7 @@ The component shows the checklist task functionality.
|
|||||||
</adf-checklist>
|
</adf-checklist>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Properties
|
#### Properties
|
||||||
|
|
||||||
| Name | Type | Description |
|
| Name | Type | Description |
|
||||||
| --- | --- | --- |
|
| --- | --- | --- |
|
||||||
@@ -363,9 +391,12 @@ The component shows the checklist task functionality.
|
|||||||
| readOnlyForm | boolean | Toggle readonly state of the form. Enforces all form widgets render readonly if enabled. |
|
| readOnlyForm | boolean | Toggle readonly state of the form. Enforces all form widgets render readonly if enabled. |
|
||||||
| assignee | string | (**required**) The assignee id where the subtasks are assigned to. |
|
| assignee | string | (**required**) The assignee id where the subtasks are assigned to. |
|
||||||
|
|
||||||
|
|
||||||
## Task Attachment List Component
|
## Task Attachment List Component
|
||||||
|
|
||||||
This component displays attached documents on a specified task
|
Displays attached documents on a specified task
|
||||||
|
|
||||||
|
### Basic Usage
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-task-attachment-list
|
<adf-task-attachment-list
|
||||||
@@ -375,14 +406,14 @@ This component displays attached documents on a specified task
|
|||||||
```
|
```
|
||||||

|

|
||||||
|
|
||||||
### Properties
|
#### Properties
|
||||||
|
|
||||||
| Name | Type | Description |
|
| Name | Type | Description |
|
||||||
| --- | --- | --- |
|
| --- | --- | --- |
|
||||||
| taskId | string | (**required**): The ID of the task to display |
|
| taskId | string | (**required**): The ID of the task to display |
|
||||||
| disabled | boolean | false | Disable/Enable read only mode for attachement list |
|
| disabled | boolean | false | Disable/Enable read only mode for attachement list |
|
||||||
|
|
||||||
### Events
|
#### Events
|
||||||
|
|
||||||
| Name | Description |
|
| Name | Description |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
@@ -392,7 +423,9 @@ This component displays attached documents on a specified task
|
|||||||
|
|
||||||
## Create Task Attachment Component
|
## Create Task Attachment Component
|
||||||
|
|
||||||
This component displays Upload Component(Drag and Click) to upload the attachment to a specified task
|
Displays Upload Component(Drag and Click) to upload the attachment to a specified task
|
||||||
|
|
||||||
|
### Basic Usage
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-create-task-attachment
|
<adf-create-task-attachment
|
||||||
@@ -404,7 +437,7 @@ This component displays Upload Component(Drag and Click) to upload the attachmen
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||
### Properties
|
#### Properties
|
||||||
|
|
||||||
| Name | Type | Description |
|
| Name | Type | Description |
|
||||||
| --- | --- | --- |
|
| --- | --- | --- |
|
||||||
@@ -417,10 +450,11 @@ This component displays Upload Component(Drag and Click) to upload the attachmen
|
|||||||
| error | Raised when the error occurred while creating/uploading the attachment by the user from within the component |
|
| error | Raised when the error occurred while creating/uploading the attachment by the user from within the component |
|
||||||
| success | Raised when the attachment created/uploaded successfully from within the component |
|
| success | Raised when the attachment created/uploaded successfully from within the component |
|
||||||
|
|
||||||
## Activiti Task Header
|
## Activiti Task Header component
|
||||||
|
|
||||||
The component shows all the information related to a task.
|
Shows all the information related to a task.
|
||||||
The purpose of the component is to populate the local variable called `properties` (array of CardViewModel), with all the information that we want to display.
|
|
||||||
|
### Basic Usage
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-task-header
|
<adf-task-header
|
||||||
@@ -428,7 +462,7 @@ The purpose of the component is to populate the local variable called `propertie
|
|||||||
</adf-task-header>
|
</adf-task-header>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Properties
|
#### Properties
|
||||||
|
|
||||||
| Name | Type | Default | Description |
|
| Name | Type | Default | Description |
|
||||||
| --- | --- | --- | --- |
|
| --- | --- | --- | --- |
|
||||||
@@ -437,13 +471,18 @@ The purpose of the component is to populate the local variable called `propertie
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||
### Events
|
#### Events
|
||||||
|
|
||||||
| Name | Description |
|
| Name | Description |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
| claim | Raised when the task is claimed. |
|
| claim | Raised when the task is claimed. |
|
||||||
|
|
||||||
## TaskDetailsModel
|
### Details
|
||||||
|
|
||||||
|
The purpose of the component is to populate the local variable called `properties` (array of CardViewModel), with all the information that we want to display.
|
||||||
|
|
||||||
|
|
||||||
|
#### TaskDetailsModel
|
||||||
|
|
||||||
```json
|
```json
|
||||||
{
|
{
|
||||||
@@ -457,7 +496,9 @@ The purpose of the component is to populate the local variable called `propertie
|
|||||||
|
|
||||||
## Task People Component
|
## Task People Component
|
||||||
|
|
||||||
This component displays involved users to a specified task
|
Displays involved users to a specified task
|
||||||
|
|
||||||
|
### Basic Usage
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-people
|
<adf-people
|
||||||
@@ -469,7 +510,7 @@ This component displays involved users to a specified task
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||
### Properties
|
#### Properties
|
||||||
|
|
||||||
| Name | Type | Description |
|
| Name | Type | Description |
|
||||||
| --- | --- | --- |
|
| --- | --- | --- |
|
||||||
@@ -481,6 +522,8 @@ This component displays involved users to a specified task
|
|||||||
|
|
||||||
No Events
|
No Events
|
||||||
|
|
||||||
|
### Details
|
||||||
|
|
||||||
#### How to customize the people component behavior
|
#### How to customize the people component behavior
|
||||||
|
|
||||||
The people component provide two methods to customize the behavior:
|
The people component provide two methods to customize the behavior:
|
||||||
@@ -543,7 +586,9 @@ In this way will be easy customize the people component to involve the user with
|
|||||||
|
|
||||||
## ADF Comments Component
|
## ADF Comments Component
|
||||||
|
|
||||||
This component displays comments entered by involved users to a specified task. It also allows an involved user to add his/her comment to the task.
|
Displays comments from users involved in a specified task and allows an involved user to add a comment to the task.
|
||||||
|
|
||||||
|
### Basic Usage
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-comments
|
<adf-comments
|
||||||
@@ -554,7 +599,7 @@ This component displays comments entered by involved users to a specified task.
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||
### Properties
|
#### Properties
|
||||||
|
|
||||||
| Name | Type | Description |
|
| Name | Type | Description |
|
||||||
| --- | --- | --- |
|
| --- | --- | --- |
|
||||||
@@ -569,7 +614,9 @@ This component displays comments entered by involved users to a specified task.
|
|||||||
|
|
||||||
## Start Task Component
|
## Start Task Component
|
||||||
|
|
||||||
This component Creates/Starts new task for the specified app
|
Creates/Starts new task for the specified app
|
||||||
|
|
||||||
|
### Basic Usage
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-start-task
|
<adf-start-task
|
||||||
@@ -579,7 +626,7 @@ This component Creates/Starts new task for the specified app
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||
### Properties
|
#### Properties
|
||||||
|
|
||||||
| Name | Type | Description |
|
| Name | Type | Description |
|
||||||
| --- | --- | --- |
|
| --- | --- | --- |
|
||||||
@@ -593,9 +640,50 @@ This component Creates/Starts new task for the specified app
|
|||||||
| cancel | Raised when the cancel button is pressed by the user |
|
| cancel | Raised when the cancel button is pressed by the user |
|
||||||
| error | Raised if there is an error during task creation |
|
| error | Raised if there is an error during task creation |
|
||||||
|
|
||||||
|
|
||||||
|
## People Search component
|
||||||
|
|
||||||
|
Searches users/people.
|
||||||
|
|
||||||
|
### Basic Usage
|
||||||
|
|
||||||
|
```html
|
||||||
|
<adf-people-search></adf-people-search>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Properties
|
||||||
|
|
||||||
|
| Name | Type | Description |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| results | Observable<User[]> | The params to show people list |
|
||||||
|
|
||||||
|
#### Events
|
||||||
|
|
||||||
|
| Name | Description |
|
||||||
|
| --- | --- |
|
||||||
|
| searchPeople | Raised when the search people with new keyword |
|
||||||
|
| success | Raised when select the user and click action button |
|
||||||
|
| closeSearch | Raised when click the clse button |
|
||||||
|
|
||||||
|
### Details
|
||||||
|
|
||||||
|
```html
|
||||||
|
<adf-people-search
|
||||||
|
(searchPeople)="searchUser($event)"
|
||||||
|
(success)="involveUser($event)"
|
||||||
|
(closeSearch)="onCloseSearch()"
|
||||||
|
[results]="peopleSearch$">
|
||||||
|
<header-title>{{ 'TASK_DETAILS.LABELS.ADD_PEOPLE' | translate }}</header-title>
|
||||||
|
<action-button-label>{{ 'PEOPLE.ADD_USER' | translate }}</action-button-label>
|
||||||
|
</adf-people-search>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
## Task Audit Directive
|
## Task Audit Directive
|
||||||
|
|
||||||
This directive provide a way to fetch the Task Audit information in the pdf or json format.
|
Provides a way to fetch the Task Audit information in the pdf or json format.
|
||||||
|
|
||||||
|
### Basic Usage
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<button
|
<button
|
||||||
@@ -609,7 +697,7 @@ This directive provide a way to fetch the Task Audit information in the pdf or j
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||
### Properties
|
#### Properties
|
||||||
|
|
||||||
| Name | Type | Default | Description |
|
| Name | Type | Default | Description |
|
||||||
| --- | --- | --- | --- |
|
| --- | --- | --- | --- |
|
||||||
@@ -625,43 +713,22 @@ This directive provide a way to fetch the Task Audit information in the pdf or j
|
|||||||
| clicked | Raised when the task audit info is ready |
|
| clicked | Raised when the task audit info is ready |
|
||||||
| error | Raised if there is an error during fetching task information |
|
| error | Raised if there is an error during fetching task information |
|
||||||
|
|
||||||
## People Search
|
## Project Information
|
||||||
|
|
||||||
The component used to search users/people.
|
### Prerequisites
|
||||||
|
|
||||||
```html
|
Before you start using this development framework, make sure you have installed all required software and done all the
|
||||||
<adf-people-search></adf-people-search>
|
necessary configuration [prerequisites](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
|
||||||
|
|
||||||
|
> If you plan using this component with projects generated by Angular CLI, please refer to the following article: [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
|
||||||
|
|
||||||
|
### Install
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm install ng2-activiti-tasklist
|
||||||
```
|
```
|
||||||
|
|
||||||
### Properties
|
### Build from sources
|
||||||
|
|
||||||
| Name | Type | Description |
|
|
||||||
| --- | --- | --- |
|
|
||||||
| results | Observable<User[]> | The params to show people list |
|
|
||||||
|
|
||||||
### Events
|
|
||||||
|
|
||||||
| Name | Description |
|
|
||||||
| --- | --- |
|
|
||||||
| searchPeople | Raised when the search people with new keyword |
|
|
||||||
| success | Raised when select the user and click action button |
|
|
||||||
| closeSearch | Raised when click the clse button |
|
|
||||||
|
|
||||||
### How to use
|
|
||||||
|
|
||||||
```html
|
|
||||||
<adf-people-search
|
|
||||||
(searchPeople)="searchUser($event)"
|
|
||||||
(success)="involveUser($event)"
|
|
||||||
(closeSearch)="onCloseSearch()"
|
|
||||||
[results]="peopleSearch$">
|
|
||||||
<header-title>{{ 'TASK_DETAILS.LABELS.ADD_PEOPLE' | translate }}</header-title>
|
|
||||||
<action-button-label>{{ 'PEOPLE.ADD_USER' | translate }}</action-button-label>
|
|
||||||
</adf-people-search>
|
|
||||||
|
|
||||||
```
|
|
||||||
|
|
||||||
## Build from sources
|
|
||||||
|
|
||||||
You can build component from sources with the following commands:
|
You can build component from sources with the following commands:
|
||||||
```sh
|
```sh
|
||||||
@@ -673,7 +740,7 @@ npm run build
|
|||||||
> The `build` task rebuilds all the code, runs tslint, license checks
|
> The `build` task rebuilds all the code, runs tslint, license checks
|
||||||
> and other quality check tools before performing unit testing.
|
> and other quality check tools before performing unit testing.
|
||||||
|
|
||||||
## NPM scripts
|
### NPM scripts
|
||||||
|
|
||||||
| Command | Description |
|
| Command | Description |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
@@ -682,7 +749,7 @@ npm run build
|
|||||||
| npm run test-browser | Run unit tests in the browser
|
| npm run test-browser | Run unit tests in the browser
|
||||||
| npm run coverage | Run unit tests and display code coverage report |
|
| npm run coverage | Run unit tests and display code coverage report |
|
||||||
|
|
||||||
## Demo
|
### Demo
|
||||||
|
|
||||||
Please check the demo folder for a demo project
|
Please check the demo folder for a demo project
|
||||||
|
|
||||||
@@ -692,6 +759,6 @@ npm install
|
|||||||
npm start
|
npm start
|
||||||
```
|
```
|
||||||
|
|
||||||
## License
|
### License
|
||||||
|
|
||||||
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
|
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
|
||||||
|
BIN
ng2-components/ng2-alfresco-core/docs/adf-toolbar-01.png
Normal file
After Width: | Height: | Size: 14 KiB |
BIN
ng2-components/ng2-alfresco-core/docs/adf-toolbar-02.png
Normal file
After Width: | Height: | Size: 36 KiB |
BIN
ng2-components/ng2-alfresco-core/docs/adf-toolbar-03.png
Normal file
After Width: | Height: | Size: 14 KiB |
BIN
ng2-components/ng2-alfresco-core/docs/adf-toolbar-04.png
Normal file
After Width: | Height: | Size: 32 KiB |
BIN
ng2-components/ng2-alfresco-core/docs/adf-toolbar-05.png
Normal file
After Width: | Height: | Size: 14 KiB |
BIN
ng2-components/ng2-alfresco-core/docs/adf-toolbar-06.png
Normal file
After Width: | Height: | Size: 14 KiB |
BIN
ng2-components/ng2-alfresco-core/docs/adf-toolbar-07.png
Normal file
After Width: | Height: | Size: 14 KiB |
@@ -1,58 +1,57 @@
|
|||||||
# DataTable Component
|
# DataTable library
|
||||||
|
|
||||||
|
Contains the DataTable component and other related components and classes.
|
||||||
|
|
||||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
||||||
|
|
||||||
<!-- toc -->
|
<!-- toc -->
|
||||||
|
|
||||||
- [Prerequisites](#prerequisites)
|
- [DataTable component](#datatable-component)
|
||||||
- [Install](#install)
|
* [Basic usage](#basic-usage)
|
||||||
- [Basic usage](#basic-usage)
|
+ [Properties](#properties)
|
||||||
* [DataTable Properties](#datatable-properties)
|
+ [Events](#events)
|
||||||
* [DataColumn Properties](#datacolumn-properties)
|
* [Details](#details)
|
||||||
* [DataTable Events](#datatable-events)
|
+ [DataColumn Properties](#datacolumn-properties)
|
||||||
* [DataTable DOM Events](#datatable-dom-events)
|
+ [DataTable DOM Events](#datatable-dom-events)
|
||||||
* [Automatic column header translation](#automatic-column-header-translation)
|
+ [Automatic column header translation](#automatic-column-header-translation)
|
||||||
* [Custom tooltips](#custom-tooltips)
|
+ [Custom tooltips](#custom-tooltips)
|
||||||
* [Custom Empty content template](#custom-empty-content-template)
|
+ [Custom Empty content template](#custom-empty-content-template)
|
||||||
* [Custom Empty content template](#custom-empty-content-template-1)
|
+ [Loading content template](#loading-content-template)
|
||||||
* [Loading content template](#loading-content-template)
|
+ [Column Templates](#column-templates)
|
||||||
* [Column Templates](#column-templates)
|
+ [Events](#events-1)
|
||||||
* [Events](#events)
|
- [rowClick event](#rowclick-event)
|
||||||
+ [rowClick event](#rowclick-event)
|
- [rowDblClick event](#rowdblclick-event)
|
||||||
+ [rowDblClick event](#rowdblclick-event)
|
- [showRowContextMenu event](#showrowcontextmenu-event)
|
||||||
+ [showRowContextMenu event](#showrowcontextmenu-event)
|
- [showRowActionsMenu event](#showrowactionsmenu-event)
|
||||||
+ [showRowActionsMenu event](#showrowactionsmenu-event)
|
- [executeRowAction event](#executerowaction-event)
|
||||||
+ [executeRowAction event](#executerowaction-event)
|
+ [Data sources](#data-sources)
|
||||||
- [Data sources](#data-sources)
|
+ [Generate schema](#generate-schema)
|
||||||
- [Generate schema](#generate-schema)
|
|
||||||
- [Pagination Component](#pagination-component)
|
- [Pagination Component](#pagination-component)
|
||||||
* [Properties](#properties)
|
* [Basic Usage](#basic-usage)
|
||||||
* [Events](#events-1)
|
+ [Properties](#properties-1)
|
||||||
- [Build from sources](#build-from-sources)
|
+ [Events](#events-2)
|
||||||
- [NPM scripts](#npm-scripts)
|
* [Details](#details-1)
|
||||||
- [Demo](#demo)
|
- [Project Information](#project-information)
|
||||||
- [License](#license)
|
* [Prerequisites](#prerequisites)
|
||||||
|
* [Install](#install)
|
||||||
|
* [Build from sources](#build-from-sources)
|
||||||
|
* [NPM scripts](#npm-scripts)
|
||||||
|
* [Demo](#demo)
|
||||||
|
* [License](#license)
|
||||||
|
|
||||||
<!-- tocstop -->
|
<!-- tocstop -->
|
||||||
|
|
||||||
<!-- markdown-toc end -->
|
<!-- markdown-toc end -->
|
||||||
|
|
||||||
|
## DataTable component
|
||||||
|
|
||||||
|
Displays data as a table with customizable columns and presentation.
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
See it live: [DataTable Quickstart](https://embed.plnkr.co/80qr4YFBeHjLMdAV0F6l/)
|
See it live: [DataTable Quickstart](https://embed.plnkr.co/80qr4YFBeHjLMdAV0F6l/)
|
||||||
|
|
||||||
## Prerequisites
|
### Basic usage
|
||||||
|
|
||||||
Before you start using this development framework, make sure you have installed all required software and done all the
|
|
||||||
necessary configuration, see this [page](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
|
|
||||||
|
|
||||||
> If you plan using this component with projects generated by Angular CLI, please refer to the following article: [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
|
|
||||||
|
|
||||||
## Install
|
|
||||||
|
|
||||||
```sh
|
|
||||||
npm install ng2-alfresco-datatable
|
|
||||||
```
|
|
||||||
|
|
||||||
## Basic usage
|
|
||||||
|
|
||||||
**app.component.html**
|
**app.component.html**
|
||||||
|
|
||||||
@@ -99,8 +98,6 @@ export class DataTableDemo {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||

|
|
||||||
|
|
||||||
You can also use HTML-based schema declaration like shown below:
|
You can also use HTML-based schema declaration like shown below:
|
||||||
|
|
||||||
```html
|
```html
|
||||||
@@ -146,7 +143,7 @@ export class DataTableDemo {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
### DataTable Properties
|
#### Properties
|
||||||
|
|
||||||
| Name | Type | Default | Description |
|
| Name | Type | Default | Description |
|
||||||
| --- | --- | --- | --- |
|
| --- | --- | --- | --- |
|
||||||
@@ -165,9 +162,19 @@ export class DataTableDemo {
|
|||||||
| showHeader | boolean | true | Toggles header visibility |
|
| showHeader | boolean | true | Toggles header visibility |
|
||||||
| selection | DataRow[] | [] | Contains selected rows |
|
| selection | DataRow[] | [] | Contains selected rows |
|
||||||
|
|
||||||
### DataColumn Properties
|
#### Events
|
||||||
|
|
||||||
Here's the list of available properties you can define for a Data Column definition.
|
| Name | Description
|
||||||
|
| --- | --- |
|
||||||
|
| [rowClick](#rowclick-event) | Emitted when user clicks the row |
|
||||||
|
| [rowDblClick](#rowdblclick-event) | Emitted when user double-clicks the row |
|
||||||
|
| [showRowContextMenu](#showrowcontextmenu-event) | Emitted before context menu is displayed for a row |
|
||||||
|
| [showRowActionsMenu](#showrowactionsmenu-event) | Emitted before actions menu is displayed for a row |
|
||||||
|
| [executeRowAction](#executerowaction-event) | Emitted when row action is executed by user |
|
||||||
|
|
||||||
|
### Details
|
||||||
|
|
||||||
|
#### DataColumn Properties
|
||||||
|
|
||||||
| Name | Type | Default | Description |
|
| Name | Type | Default | Description |
|
||||||
| --- | --- | --- | --- |
|
| --- | --- | --- | --- |
|
||||||
@@ -181,17 +188,7 @@ Here's the list of available properties you can define for a Data Column definit
|
|||||||
| class | string | | Additional CSS class to be applied to column (header and cells) |
|
| class | string | | Additional CSS class to be applied to column (header and cells) |
|
||||||
| formatTooltip | Function | | Custom tooltip formatter function. |
|
| formatTooltip | Function | | Custom tooltip formatter function. |
|
||||||
|
|
||||||
### DataTable Events
|
#### DataTable DOM Events
|
||||||
|
|
||||||
| Name | Description
|
|
||||||
| --- | --- |
|
|
||||||
| [rowClick](#rowclick-event) | Emitted when user clicks the row |
|
|
||||||
| [rowDblClick](#rowdblclick-event) | Emitted when user double-clicks the row |
|
|
||||||
| [showRowContextMenu](#showrowcontextmenu-event) | Emitted before context menu is displayed for a row |
|
|
||||||
| [showRowActionsMenu](#showrowactionsmenu-event) | Emitted before actions menu is displayed for a row |
|
|
||||||
| [executeRowAction](#executerowaction-event) | Emitted when row action is executed by user |
|
|
||||||
|
|
||||||
### DataTable DOM Events
|
|
||||||
|
|
||||||
Below are the DOM events raised by DataTable component.
|
Below are the DOM events raised by DataTable component.
|
||||||
These events bubble up the component tree and can be handled by any parent component.
|
These events bubble up the component tree and can be handled by any parent component.
|
||||||
@@ -221,7 +218,7 @@ onRowClick(event) {
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||
### Automatic column header translation
|
#### Automatic column header translation
|
||||||
|
|
||||||
You can also use i18n resource keys with DataColumn `title` property.
|
You can also use i18n resource keys with DataColumn `title` property.
|
||||||
The component will automatically check the corresponding i18n resources and fetch corresponding value.
|
The component will automatically check the corresponding i18n resources and fetch corresponding value.
|
||||||
@@ -235,7 +232,7 @@ The component will automatically check the corresponding i18n resources and fetc
|
|||||||
|
|
||||||
This feature is optional. Regular text either plain or converted via the `translate` pipe will still be working as it was before.
|
This feature is optional. Regular text either plain or converted via the `translate` pipe will still be working as it was before.
|
||||||
|
|
||||||
### Custom tooltips
|
#### Custom tooltips
|
||||||
|
|
||||||
You can create custom tooltips for the table cells by providing a `formatTooltip` property with a tooltip formatter function when declaring a data column.
|
You can create custom tooltips for the table cells by providing a `formatTooltip` property with a tooltip formatter function when declaring a data column.
|
||||||
|
|
||||||
@@ -268,7 +265,7 @@ export class MyComponent {
|
|||||||
|
|
||||||
To disable the tooltip your function can return `null` or an empty string.
|
To disable the tooltip your function can return `null` or an empty string.
|
||||||
|
|
||||||
### Custom Empty content template
|
#### Custom Empty content template
|
||||||
|
|
||||||
You can add a template that will be shown when there are no results in your datatable:
|
You can add a template that will be shown when there are no results in your datatable:
|
||||||
|
|
||||||
@@ -294,9 +291,7 @@ You can add a template that will be shown when there are no results in your data
|
|||||||
</adf-datatable>
|
</adf-datatable>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Custom Empty content template
|
You can use the empty list component if you want to show the default ADF empty template.
|
||||||
|
|
||||||
You can use the empty list component if you want to show the default ADF empty template:
|
|
||||||
|
|
||||||
You can use any HTML layout or Angular component as a content of the empty template section by using the special `<adf-empty-list-header>, <adf-empty-list-body>, <adf-empty-list-footer>` elements:
|
You can use any HTML layout or Angular component as a content of the empty template section by using the special `<adf-empty-list-header>, <adf-empty-list-body>, <adf-empty-list-footer>` elements:
|
||||||
|
|
||||||
@@ -330,7 +325,7 @@ You can use any HTML layout or Angular component as a content of the empty templ
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||
### Loading content template
|
#### Loading content template
|
||||||
|
|
||||||
You can add a template that will be shown during the loading of your data:
|
You can add a template that will be shown during the loading of your data:
|
||||||
|
|
||||||
@@ -368,7 +363,7 @@ You can add a template that will be shown during the loading of your data:
|
|||||||
|
|
||||||
Note: the `<loading-content-template>` and `<no-content-template>` can be used together
|
Note: the `<loading-content-template>` and `<no-content-template>` can be used together
|
||||||
|
|
||||||
### Column Templates
|
#### Column Templates
|
||||||
|
|
||||||
It is possible to assign a custom column template like the following:
|
It is possible to assign a custom column template like the following:
|
||||||
|
|
||||||
@@ -414,11 +409,11 @@ In the second case `entry` variable is holding a reference to the following data
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
### Events
|
#### Events
|
||||||
|
|
||||||
#### rowClick event
|
##### rowClick event
|
||||||
|
|
||||||
_This event is emitted when user clicks the row._
|
Emitted when user clicks a row.
|
||||||
|
|
||||||
Event properties:
|
Event properties:
|
||||||
|
|
||||||
@@ -436,11 +431,11 @@ onRowClicked(event: DataRowEvent) {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
_This event is cancellable, you can use `event.preventDefault()` to prevent default behaviour._
|
This event is cancellable, you can use `event.preventDefault()` to prevent default behaviour.
|
||||||
|
|
||||||
#### rowDblClick event
|
##### rowDblClick event
|
||||||
|
|
||||||
_This event is emitted when user double-clicks the row._
|
Emitted when user double-clicks a row.
|
||||||
|
|
||||||
Event properties:
|
Event properties:
|
||||||
|
|
||||||
@@ -458,11 +453,11 @@ onRowDblClicked(event: DataRowEvent) {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
_This event is cancellable, you can use `event.preventDefault()` to prevent default behaviour._
|
This event is cancellable, you can use `event.preventDefault()` to prevent default behaviour.
|
||||||
|
|
||||||
#### showRowContextMenu event
|
##### showRowContextMenu event
|
||||||
|
|
||||||
_Emitted before context menu is displayed for a row._
|
Emitted before context menu is displayed for a row.
|
||||||
|
|
||||||
Note that DataTable itself does not populate context menu items,
|
Note that DataTable itself does not populate context menu items,
|
||||||
you can provide all necessary content via handler.
|
you can provide all necessary content via handler.
|
||||||
@@ -488,17 +483,17 @@ onShowRowContextMenu(event: DataCellEvent) {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
_This event is cancellable, you can use `event.preventDefault()` to prevent default behaviour._
|
This event is cancellable, you can use `event.preventDefault()` to prevent default behaviour.
|
||||||
|
|
||||||
DataTable will automatically render provided menu items.
|
DataTable will automatically render provided menu items.
|
||||||
|
|
||||||
_Please refer to [ContextMenu](https://www.npmjs.com/package/ng2-alfresco-core)
|
See the [ContextMenu](https://www.npmjs.com/package/ng2-alfresco-core)
|
||||||
documentation for more details on context actions format and behaviour._
|
documentation for more details on context actions format and behaviour.
|
||||||
|
|
||||||
#### showRowActionsMenu event
|
##### showRowActionsMenu event
|
||||||
|
|
||||||
_Emitted before actions menu is displayed for a row.
|
Emitted before actions menu is displayed for a row.
|
||||||
Requires `actions` property to be set to `true`._
|
Requires `actions` property to be set to `true`.
|
||||||
|
|
||||||
Event properties:
|
Event properties:
|
||||||
|
|
||||||
@@ -512,11 +507,11 @@ value: {
|
|||||||
Note that DataTable itself does not populate action menu items,
|
Note that DataTable itself does not populate action menu items,
|
||||||
you can provide all necessary content via handler.
|
you can provide all necessary content via handler.
|
||||||
|
|
||||||
_This event is cancellable, you can use `event.preventDefault()` to prevent default behaviour._
|
This event is cancellable, you can use `event.preventDefault()` to prevent default behaviour.
|
||||||
|
|
||||||
#### executeRowAction event
|
##### executeRowAction event
|
||||||
|
|
||||||
_Emitted when row action is executed by user._
|
Emitted when a row action is executed by the user.
|
||||||
|
|
||||||
Usually accompanies `showRowActionsMenu` event.
|
Usually accompanies `showRowActionsMenu` event.
|
||||||
DataTable itself does not execute actions but provides support for external
|
DataTable itself does not execute actions but provides support for external
|
||||||
@@ -566,7 +561,7 @@ Once corresponding action is clicked in the dropdown menu DataTable invokes `exe
|
|||||||
where you can handle the process, inspect the action payload and all custom properties defined earlier,
|
where you can handle the process, inspect the action payload and all custom properties defined earlier,
|
||||||
and do corresponding actions.
|
and do corresponding actions.
|
||||||
|
|
||||||
## Data sources
|
#### Data sources
|
||||||
|
|
||||||
DataTable component gets data by means of data adapter.
|
DataTable component gets data by means of data adapter.
|
||||||
It is possible having data retrieved from different kinds of sources by implementing
|
It is possible having data retrieved from different kinds of sources by implementing
|
||||||
@@ -634,7 +629,7 @@ let data = new ObjectDataTableAdapter(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
## Generate schema
|
#### Generate schema
|
||||||
|
|
||||||
It is possible to auto generate your schema if you have only the data row
|
It is possible to auto generate your schema if you have only the data row
|
||||||
|
|
||||||
@@ -667,29 +662,67 @@ let schema = ObjectDataTableAdapter.generateSchema(data);
|
|||||||
|
|
||||||
## Pagination Component
|
## Pagination Component
|
||||||
|
|
||||||
|
Adds pagination to the component it is used with.
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
### Basic Usage
|
||||||
|
|
||||||
|
```html
|
||||||
|
<adf-pagination
|
||||||
|
[pagination]="pagination"
|
||||||
|
[supportedPageSizes]="sizes"
|
||||||
|
(change)="onChange($event)"
|
||||||
|
(nextPage)="onNextPage($event)"
|
||||||
|
(prevPage)="onPreviousPage($event)"
|
||||||
|
(changePageSize)="onChangePageSize($event)"
|
||||||
|
(changePageNumber)="onChangePageNumber($event)">
|
||||||
|
</adf-pagination>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Properties
|
||||||
|
|
||||||
|
| Name | Type | Default | Description |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| pagination | Pagination | | Pagination object |
|
||||||
|
| supportedPageSizes | Array<number> | [ 25, 50, 100 ] | An array of page sizes |
|
||||||
|
|
||||||
|
#### Events
|
||||||
|
|
||||||
|
| Name | Type | Description |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| change | EventEmitter<PaginationQueryParams> | Triggered for any action in pagination |
|
||||||
|
| nextPage | EventEmitter<Pagination> | Triggered on next page action |
|
||||||
|
| prevPage | EventEmitter<Pagination> | Triggered on previous page action |
|
||||||
|
| changePageSize | EventEmitter<Pagination> | Triggered on page size change action |
|
||||||
|
| changePageNumber | EventEmitter<Pagination> | Triggered on page change action |
|
||||||
|
|
||||||
|
### Details
|
||||||
|
|
||||||
The pagination object is a generic component to paginate component. The Alfresco API are paginated and return a Pagination object. You can use the pagination object to feed the pagination component and then listen to the event which returns the current pagination and query again the API with the options chosen by the user.
|
The pagination object is a generic component to paginate component. The Alfresco API are paginated and return a Pagination object. You can use the pagination object to feed the pagination component and then listen to the event which returns the current pagination and query again the API with the options chosen by the user.
|
||||||
|
|
||||||

|
Each event helps to detect the certain action that user have made using the component.
|
||||||
|
|
||||||
### Properties
|
For `change` event, a [PaginationQueryParams](https://github.com/Alfresco/alfresco-ng2-components/tree/master/ng2-components/ng2-alfresco-core/src/components/pagination/pagination-query-params.ts) (including the query params supported by the REST API, `skipCount` and `maxItems`) is returned.
|
||||||
|
|
||||||
| Name | Type | Default | Description
|
For all events other than `change`, a new [Pagination object](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/Pagination.md) is returned as in the folowing example, with updated properties to be used to query further.
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| supportedPageSizes | numer[] | [5, 10, 20, 50, 100] | This array describes the set of options shown in the pick list |
|
|
||||||
| maxItems | boolean | false | Max number of elements shown per page. If you pick another size from the pick list this option will be overwritten |
|
|
||||||
| pagination | Pagination | {count: 0, totalItems: 0, skipCount: 0, maxItems: 20 , hasMoreItems: true} | The Alfresco Api returns a pagination object, you can use it to feed the pagination component, or create your own. |
|
|
||||||
|
|
||||||
### Events
|
## Project Information
|
||||||
|
|
||||||
| Name | Description
|
### Prerequisites
|
||||||
| --- | --- |
|
|
||||||
| changePageSize | Emitted when user picks one of the options from the pick list |
|
|
||||||
| nextPage | Emitted when user clicks next page button |
|
|
||||||
| prevPage | Emitted when user clicks previous page button |
|
|
||||||
|
|
||||||
All the events carry with them the current pagination object.
|
Before you start using this development framework, make sure you have installed all required software and done all the
|
||||||
|
necessary configuration, see this [page](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
|
||||||
|
|
||||||
## Build from sources
|
> If you plan using this component with projects generated by Angular CLI, please refer to the following article: [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
|
||||||
|
|
||||||
|
### Install
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm install ng2-alfresco-datatable
|
||||||
|
```
|
||||||
|
|
||||||
|
### Build from sources
|
||||||
|
|
||||||
You can build component from sources with the following commands:
|
You can build component from sources with the following commands:
|
||||||
|
|
||||||
@@ -701,7 +734,7 @@ npm run build
|
|||||||
> The `build` task rebuilds all the code, runs tslint, license checks
|
> The `build` task rebuilds all the code, runs tslint, license checks
|
||||||
> and other quality check tools before performing unit testing.
|
> and other quality check tools before performing unit testing.
|
||||||
|
|
||||||
## NPM scripts
|
### NPM scripts
|
||||||
|
|
||||||
| Command | Description |
|
| Command | Description |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
@@ -710,7 +743,7 @@ npm run build
|
|||||||
| npm run test-browser | Run unit tests in the browser
|
| npm run test-browser | Run unit tests in the browser
|
||||||
| npm run coverage | Run unit tests and display code coverage report |
|
| npm run coverage | Run unit tests and display code coverage report |
|
||||||
|
|
||||||
## Demo
|
### Demo
|
||||||
|
|
||||||
Please check the demo folder for a demo project
|
Please check the demo folder for a demo project
|
||||||
|
|
||||||
@@ -720,6 +753,6 @@ npm install
|
|||||||
npm start
|
npm start
|
||||||
```
|
```
|
||||||
|
|
||||||
## License
|
### License
|
||||||
|
|
||||||
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
|
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
|
||||||
|
BIN
ng2-components/ng2-alfresco-datatable/docs/assets/basic.png
Normal file
After Width: | Height: | Size: 20 KiB |
@@ -1,42 +1,32 @@
|
|||||||
# DocumentList Component
|
# DocumentList library
|
||||||
|
|
||||||
|
Contains the Document List component and other related components and classes.
|
||||||
|
|
||||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
||||||
|
|
||||||
<!-- toc -->
|
<!-- toc -->
|
||||||
|
|
||||||
- [Prerequisites](#prerequisites)
|
- [Document List component](#document-list-component)
|
||||||
- [See also](#see-also)
|
* [Basic Usage](#basic-usage)
|
||||||
- [Install](#install)
|
+ [Properties](#properties)
|
||||||
- [Document List](#document-list)
|
+ [Events](#events)
|
||||||
* [Properties](#properties)
|
* [Details](#details)
|
||||||
* [Events](#events)
|
+ [DOM Events](#dom-events)
|
||||||
* [DOM Events](#dom-events)
|
+ [Data Sources](#data-sources)
|
||||||
* [Handling DOM events](#handling-dom-events)
|
- [Node ID](#node-id)
|
||||||
* [Data Sources](#data-sources)
|
- [Repository aliases](#repository-aliases)
|
||||||
+ [Node ID](#node-id)
|
- [DocumentList aliases](#documentlist-aliases)
|
||||||
+ [Repository aliases](#repository-aliases)
|
+ [Setting default folder](#setting-default-folder)
|
||||||
+ [DocumentList aliases](#documentlist-aliases)
|
+ [Custom icons for selected rows](#custom-icons-for-selected-rows)
|
||||||
* [Trashcan](#trashcan)
|
+ [Calling DocumentList api directly](#calling-documentlist-api-directly)
|
||||||
* [Shared Links](#shared-links)
|
+ [Custom columns](#custom-columns)
|
||||||
* [Sites](#sites)
|
+ [DataColumn Properties](#datacolumn-properties)
|
||||||
* [Favorites](#favorites)
|
+ [Column Types](#column-types)
|
||||||
* [Recent Files](#recent-files)
|
+ [Underlying node object](#underlying-node-object)
|
||||||
* [Setting default folder](#setting-default-folder)
|
+ [Date Column](#date-column)
|
||||||
- [Custom icons for selected rows](#custom-icons-for-selected-rows)
|
+ [Location Column](#location-column)
|
||||||
- [Calling DocumentList api directly](#calling-documentlist-api-directly)
|
+ [Column Template](#column-template)
|
||||||
- [Breadcrumb Component](#breadcrumb-component)
|
+ [Actions](#actions)
|
||||||
* [Properties](#properties-1)
|
|
||||||
* [Events](#events-1)
|
|
||||||
- [Dropdown Site Component](#dropdown-site-component)
|
|
||||||
* [Events](#events-2)
|
|
||||||
- [Custom columns](#custom-columns)
|
|
||||||
* [DataColumn Properties](#datacolumn-properties)
|
|
||||||
* [Column Types](#column-types)
|
|
||||||
* [Underlying node object](#underlying-node-object)
|
|
||||||
* [Date Column](#date-column)
|
|
||||||
* [Location Column](#location-column)
|
|
||||||
* [Column Template](#column-template)
|
|
||||||
* [Actions](#actions)
|
|
||||||
+ [Menu actions](#menu-actions)
|
+ [Menu actions](#menu-actions)
|
||||||
+ [Default action handlers](#default-action-handlers)
|
+ [Default action handlers](#default-action-handlers)
|
||||||
- [Delete - System handler combined with custom handler](#delete---system-handler-combined-with-custom-handler)
|
- [Delete - System handler combined with custom handler](#delete---system-handler-combined-with-custom-handler)
|
||||||
@@ -44,11 +34,17 @@
|
|||||||
- [Delete - Disable button checking the permission](#delete---disable-button-checking-the-permission)
|
- [Delete - Disable button checking the permission](#delete---disable-button-checking-the-permission)
|
||||||
- [Download](#download)
|
- [Download](#download)
|
||||||
- [Copy and move](#copy-and-move)
|
- [Copy and move](#copy-and-move)
|
||||||
* [Error, Permission and success callback](#error-permission-and-success-callback)
|
- [Error, Permission and success callback](#error-permission-and-success-callback)
|
||||||
+ [Folder actions](#folder-actions)
|
+ [Folder actions](#folder-actions)
|
||||||
* [Context Menu](#context-menu)
|
+ [Context Menu](#context-menu)
|
||||||
* [Navigation mode](#navigation-mode)
|
+ [Navigation mode](#navigation-mode)
|
||||||
* [Events](#events-3)
|
- [Breadcrumb Component](#breadcrumb-component)
|
||||||
|
* [Basic Usage](#basic-usage-1)
|
||||||
|
+ [Properties](#properties-1)
|
||||||
|
+ [Events](#events-1)
|
||||||
|
- [Dropdown Site Component](#dropdown-site-component)
|
||||||
|
* [Basic Usage](#basic-usage-2)
|
||||||
|
+ [Events](#events-2)
|
||||||
- [Advanced usage and customization](#advanced-usage-and-customization)
|
- [Advanced usage and customization](#advanced-usage-and-customization)
|
||||||
* [Custom tooltips](#custom-tooltips)
|
* [Custom tooltips](#custom-tooltips)
|
||||||
* [Custom row filter](#custom-row-filter)
|
* [Custom row filter](#custom-row-filter)
|
||||||
@@ -58,33 +54,23 @@
|
|||||||
+ [Examples](#examples)
|
+ [Examples](#examples)
|
||||||
* [Custom 'empty folder' template](#custom-empty-folder-template)
|
* [Custom 'empty folder' template](#custom-empty-folder-template)
|
||||||
* [Customizing default actions](#customizing-default-actions)
|
* [Customizing default actions](#customizing-default-actions)
|
||||||
- [Build from sources](#build-from-sources)
|
- [See also](#see-also)
|
||||||
- [NPM scripts](#npm-scripts)
|
- [Project Information](#project-information)
|
||||||
- [Demo](#demo)
|
* [Prerequisites](#prerequisites)
|
||||||
- [License](#license)
|
* [Install](#install)
|
||||||
|
* [NPM scripts](#npm-scripts)
|
||||||
|
* [Demo](#demo)
|
||||||
|
* [License](#license)
|
||||||
|
|
||||||
<!-- tocstop -->
|
<!-- tocstop -->
|
||||||
|
|
||||||
<!-- markdown-toc end -->
|
<!-- markdown-toc end -->
|
||||||
|
|
||||||
## Prerequisites
|
## Document List component
|
||||||
|
|
||||||
Before you start using this development framework, make sure you have installed all required software and done all the
|
Displays the documents from a repository.
|
||||||
necessary configuration [prerequisites](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
|
|
||||||
|
|
||||||
> If you plan using this component with projects generated by Angular CLI, please refer to the following article: [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
|
### Basic Usage
|
||||||
|
|
||||||
## See also
|
|
||||||
|
|
||||||
- [Walkthrough: adding indicators to clearly highlight information about a node](docs/metadata-indicators.md)
|
|
||||||
|
|
||||||
## Install
|
|
||||||
|
|
||||||
```sh
|
|
||||||
npm install ng2-alfresco-documentlist
|
|
||||||
```
|
|
||||||
|
|
||||||
## Document List
|
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-document-list
|
<adf-document-list
|
||||||
@@ -95,7 +81,7 @@ npm install ng2-alfresco-documentlist
|
|||||||
</adf-document-list>
|
</adf-document-list>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Properties
|
#### Properties
|
||||||
|
|
||||||
The properties currentFolderId, folderNode and node are the entry initialization properties of the document list. They cannot be used together, choose the one that suites more your use case.
|
The properties currentFolderId, folderNode and node are the entry initialization properties of the document list. They cannot be used together, choose the one that suites more your use case.
|
||||||
|
|
||||||
@@ -124,20 +110,24 @@ The properties currentFolderId, folderNode and node are the entry initialization
|
|||||||
| sorting | string[] | | Defines default sorting. The format is an array of 2 strings `[key, direction]` i.e. `['name', 'desc']` or `['name', 'asc']`. Set this value only if you want to override default sorting detected by the component based on columns. |
|
| sorting | string[] | | Defines default sorting. The format is an array of 2 strings `[key, direction]` i.e. `['name', 'desc']` or `['name', 'asc']`. Set this value only if you want to override default sorting detected by the component based on columns. |
|
||||||
| locationFormat | string | '/' | The default route for all the location-based columns (if declared). |
|
| locationFormat | string | '/' | The default route for all the location-based columns (if declared). |
|
||||||
|
|
||||||
### Events
|
#### Events
|
||||||
|
|
||||||
| Name | Description |
|
| Name | Description |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
| `nodeClick` | Emitted when user clicks the node |
|
| nodeClick | emitted when user clicks a list node |
|
||||||
| `nodeDblClick` | Emitted when user double-clicks the node |
|
| nodeDblClick | emitted when user double-clicks list node |
|
||||||
| `folderChange` | Emitted upon display folder changed |
|
| folderChange | emitted once current display folder has changed |
|
||||||
| `preview` | Emitted when document preview is requested either with single or double click |
|
| preview | emitted when user acts upon files with either single or double click (depends on `navigation-mode`), recommended for Viewer components integration |
|
||||||
|
| permissionError | emitted when user is attempting to create a folder via action menu without having the permission to do it |
|
||||||
|
| ready | emitted when the documentList is ready and loads all the elements|
|
||||||
|
|
||||||
_For a complete example source code please refer to
|
### Details
|
||||||
|
|
||||||
|
For a complete example source code, refer to the
|
||||||
[DocumentList Demo](https://github.com/Alfresco/alfresco-ng2-components/tree/master/ng2-components/ng2-alfresco-documentlist/demo)
|
[DocumentList Demo](https://github.com/Alfresco/alfresco-ng2-components/tree/master/ng2-components/ng2-alfresco-documentlist/demo)
|
||||||
repository._
|
repository.
|
||||||
|
|
||||||
### DOM Events
|
#### DOM Events
|
||||||
|
|
||||||
Below are the DOM events the DocumentList component emits.
|
Below are the DOM events the DocumentList component emits.
|
||||||
All of them are `bubbling`, meaning you can handle them in any component up the parent hierarchy, even if DocumentList is wrapped by another component(s).
|
All of them are `bubbling`, meaning you can handle them in any component up the parent hierarchy, even if DocumentList is wrapped by another component(s).
|
||||||
@@ -160,13 +150,11 @@ Every event is represented by a [CustomEvent](https://developer.mozilla.org/en/d
|
|||||||
|
|
||||||
Please refer to the DataTable documentation to find details about additional DOM events the DocumentList component bubbles up from the DataTable.
|
Please refer to the DataTable documentation to find details about additional DOM events the DocumentList component bubbles up from the DataTable.
|
||||||
|
|
||||||
### Handling DOM events
|
Below is a basic example of handling DOM events in the parent elements.
|
||||||
|
|
||||||
Here's a basic example on handling DOM events in the parent elements:
|
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<div (node-click)="onNodeClicked($event)"
|
<div (node-click)="onNodeClicked($event)"
|
||||||
(node-dblclick)="onNodeDblClicked($event)">
|
(node-dblclick)="onNodeDblClicked($event)">
|
||||||
<div>
|
<div>
|
||||||
<adf-upload-drag-area ...>
|
<adf-upload-drag-area ...>
|
||||||
<adf-document-list ...>
|
<adf-document-list ...>
|
||||||
@@ -177,15 +165,15 @@ Here's a basic example on handling DOM events in the parent elements:
|
|||||||
</div>
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Data Sources
|
#### Data Sources
|
||||||
|
|
||||||
For the Document List data sources you can use one of the following options:
|
For the Document List data sources you can use one of the following options:
|
||||||
|
|
||||||
#### Node ID
|
##### Node ID
|
||||||
|
|
||||||
The unique identifier of the Node. Gets automatically updated when you perform navigation to other folders.
|
The unique identifier of the Node. Gets automatically updated when you perform navigation to other folders.
|
||||||
|
|
||||||
#### Repository aliases
|
##### Repository aliases
|
||||||
|
|
||||||
You can use one of the well-known reserved aliases:
|
You can use one of the well-known reserved aliases:
|
||||||
|
|
||||||
@@ -193,7 +181,7 @@ You can use one of the well-known reserved aliases:
|
|||||||
- `-shared-`
|
- `-shared-`
|
||||||
- `-my-`
|
- `-my-`
|
||||||
|
|
||||||
#### DocumentList aliases
|
##### DocumentList aliases
|
||||||
|
|
||||||
The DocumentList component also provides support for the following reserved aliases you can use:
|
The DocumentList component also provides support for the following reserved aliases you can use:
|
||||||
|
|
||||||
@@ -222,7 +210,7 @@ The default column layout for non-reserved views is:
|
|||||||
- Modified (date)
|
- Modified (date)
|
||||||
- Modified by
|
- Modified by
|
||||||
|
|
||||||
### Trashcan
|
__Trashcan__
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-document-list
|
<adf-document-list
|
||||||
@@ -240,7 +228,7 @@ Default layout:
|
|||||||
- Deleted
|
- Deleted
|
||||||
- Deleted by
|
- Deleted by
|
||||||
|
|
||||||
### Shared Links
|
__Shared Links__
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-document-list
|
<adf-document-list
|
||||||
@@ -259,7 +247,7 @@ Default layout:
|
|||||||
- Modified by
|
- Modified by
|
||||||
- Shared by
|
- Shared by
|
||||||
|
|
||||||
### Sites
|
__Sites__
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-document-list
|
<adf-document-list
|
||||||
@@ -273,7 +261,7 @@ Default layout:
|
|||||||
- Title
|
- Title
|
||||||
- Status
|
- Status
|
||||||
|
|
||||||
### Favorites
|
__Favorites__
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-document-list
|
<adf-document-list
|
||||||
@@ -291,7 +279,7 @@ Default layout:
|
|||||||
- Modified
|
- Modified
|
||||||
- Modified by
|
- Modified by
|
||||||
|
|
||||||
### Recent Files
|
__Recent Files__
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-document-list
|
<adf-document-list
|
||||||
@@ -306,7 +294,7 @@ Default layout:
|
|||||||
- Name
|
- Name
|
||||||
- Location
|
- Location
|
||||||
|
|
||||||
### Setting default folder
|
#### Setting default folder
|
||||||
|
|
||||||
You can set current folder path by assigning a value for `currentFolderId` property.
|
You can set current folder path by assigning a value for `currentFolderId` property.
|
||||||
It can be either one of the well-known locations as **-root-**, **-shared-** or **-my-** or a node ID (guid).
|
It can be either one of the well-known locations as **-root-**, **-shared-** or **-my-** or a node ID (guid).
|
||||||
@@ -354,7 +342,7 @@ It helps examining other valuable information you can have access to if needed:
|
|||||||
|
|
||||||
**Important note**: for this particular scenario you must also trigger `changeDetector.detectChanges()` as in the example above.
|
**Important note**: for this particular scenario you must also trigger `changeDetector.detectChanges()` as in the example above.
|
||||||
|
|
||||||
## Custom icons for selected rows
|
#### Custom icons for selected rows
|
||||||
|
|
||||||
You can use the "class" property of the "DataColumn" component to apply your custom css.
|
You can use the "class" property of the "DataColumn" component to apply your custom css.
|
||||||
|
|
||||||
@@ -408,7 +396,7 @@ Once your application starts you should see the following icon for each selected
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||
## Calling DocumentList api directly
|
#### Calling DocumentList api directly
|
||||||
|
|
||||||
Typically you will be binding DocumentList properties to your application/component class properties:
|
Typically you will be binding DocumentList properties to your application/component class properties:
|
||||||
|
|
||||||
@@ -479,53 +467,7 @@ It is important accessing child components at least at the `AfterViewInit` state
|
|||||||
Any UI click (buttons, links, etc.) event handlers are absolutely fine. This cannot be `ngOnInit` event though.
|
Any UI click (buttons, links, etc.) event handlers are absolutely fine. This cannot be `ngOnInit` event though.
|
||||||
You can get more details in [Component lifecycle hooks](https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html) article.
|
You can get more details in [Component lifecycle hooks](https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html) article.
|
||||||
|
|
||||||
## Breadcrumb Component
|
#### Custom columns
|
||||||
|
|
||||||
DocumentList provides simple breadcrumb element to indicate the current position within a navigation hierarchy.
|
|
||||||
|
|
||||||
```html
|
|
||||||
<adf-breadcrumb
|
|
||||||
[target]="documentList"
|
|
||||||
[folderNode]="documentList.folderNode">
|
|
||||||
</adf-breadcrumb>
|
|
||||||
```
|
|
||||||
|
|
||||||
***Note:*** the `<adf-document-list-breadcrumb>` and `<adf-breadcrumb>` are the same component you can still use the old tag name
|
|
||||||
|
|
||||||

|
|
||||||
|
|
||||||
### Properties
|
|
||||||
|
|
||||||
| Name | Type | Description |
|
|
||||||
| --- | --- | --- |
|
|
||||||
| target | DocumentListComponent | (optional) DocumentList component to operate with. Upon clicks will instruct the given component to update. |
|
|
||||||
| folderNode | [MinimalNodeEntryEntity](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeMinimalEntry.md) | Active node, builds UI based on `folderNode.path.elements` collection. |
|
|
||||||
| root | String | (optional) Name of the root element of the breadcrumb. You can use this property to rename "Company Home" to "Personal Files" for example. |
|
|
||||||
|
|
||||||
### Events
|
|
||||||
|
|
||||||
| Name | Returned Type | Description |
|
|
||||||
| --- | --- | --- |
|
|
||||||
| navigate | [PathElementEntity](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/PathElementEntity.md) | emitted when user clicks on a breadcrumb |
|
|
||||||
|
|
||||||
## Dropdown Site Component
|
|
||||||
|
|
||||||
DocumentList now provides a simple dropdown component to show and interact with the sites of the current user.
|
|
||||||
|
|
||||||
```html
|
|
||||||
<adf-sites-dropdown
|
|
||||||
(change)="getSiteContent($event)">
|
|
||||||
</adf-sites-dropdown>
|
|
||||||
```
|
|
||||||

|
|
||||||
|
|
||||||
### Events
|
|
||||||
|
|
||||||
| Name | Returned Type | Description |
|
|
||||||
| --- | --- | --- |
|
|
||||||
| change | [SiteModel](https://github.com/Alfresco/alfresco-ng2-components/blob/development/ng2-components/ng2-alfresco-documentlist/src/models/site.model.ts) | emitted when user selects a site. When default option is selected an empty model is emitted |
|
|
||||||
|
|
||||||
## Custom columns
|
|
||||||
|
|
||||||
It is possible to reorder, extend or completely redefine data columns displayed by the component.
|
It is possible to reorder, extend or completely redefine data columns displayed by the component.
|
||||||
By default special `$thumbnail` and `displayName` columns are rendered.
|
By default special `$thumbnail` and `displayName` columns are rendered.
|
||||||
@@ -576,7 +518,7 @@ You can also use HTML-based schema declaration used by DataTable, TaskList and o
|
|||||||
</adf-datatable>
|
</adf-datatable>
|
||||||
```
|
```
|
||||||
|
|
||||||
### DataColumn Properties
|
#### DataColumn Properties
|
||||||
|
|
||||||
Here's the list of available properties you can define for a Data Column definition.
|
Here's the list of available properties you can define for a Data Column definition.
|
||||||
|
|
||||||
@@ -592,7 +534,7 @@ Here's the list of available properties you can define for a Data Column definit
|
|||||||
| class | string | | Additional CSS class to be applied to column (header and cells) |
|
| class | string | | Additional CSS class to be applied to column (header and cells) |
|
||||||
| formatTooltip | Function | | Custom tooltip formatter function. |
|
| formatTooltip | Function | | Custom tooltip formatter function. |
|
||||||
|
|
||||||
### Column Types
|
#### Column Types
|
||||||
|
|
||||||
The DataColumn `type` property can take one of the following values:
|
The DataColumn `type` property can take one of the following values:
|
||||||
|
|
||||||
@@ -602,7 +544,7 @@ The DataColumn `type` property can take one of the following values:
|
|||||||
- fileSize
|
- fileSize
|
||||||
- location
|
- location
|
||||||
|
|
||||||
### Underlying node object
|
#### Underlying node object
|
||||||
|
|
||||||
DocumentList component assigns an instance of `MinimalNode` type (`alfresco-js-api`) as a data context of each row.
|
DocumentList component assigns an instance of `MinimalNode` type (`alfresco-js-api`) as a data context of each row.
|
||||||
|
|
||||||
@@ -647,7 +589,7 @@ Here's a short example:
|
|||||||
</adf-document-list>
|
</adf-document-list>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Date Column
|
#### Date Column
|
||||||
|
|
||||||
For `date` column type the [DatePipe](https://angular.io/docs/ts/latest/api/common/DatePipe-class.html) formatting is used.
|
For `date` column type the [DatePipe](https://angular.io/docs/ts/latest/api/common/DatePipe-class.html) formatting is used.
|
||||||
For a full list of available `format` values please refer to [DatePipe](https://angular.io/docs/ts/latest/api/common/DatePipe-class.html) documentation.
|
For a full list of available `format` values please refer to [DatePipe](https://angular.io/docs/ts/latest/api/common/DatePipe-class.html) documentation.
|
||||||
@@ -655,7 +597,7 @@ For a full list of available `format` values please refer to [DatePipe](https://
|
|||||||
ADF also supports additional `timeAgo` value for the `format` property.
|
ADF also supports additional `timeAgo` value for the `format` property.
|
||||||
That triggers the date values to be rendered using popular ["Time from now"](https://momentjs.com/docs/#/displaying/fromnow/) format.
|
That triggers the date values to be rendered using popular ["Time from now"](https://momentjs.com/docs/#/displaying/fromnow/) format.
|
||||||
|
|
||||||
### Location Column
|
#### Location Column
|
||||||
|
|
||||||
This column is used to display a clickable location link pointing to the parent path of the node.
|
This column is used to display a clickable location link pointing to the parent path of the node.
|
||||||
|
|
||||||
@@ -695,7 +637,7 @@ All links rendered in the column above will have an address mapped to `/files`:
|
|||||||
...
|
...
|
||||||
```
|
```
|
||||||
|
|
||||||
### Column Template
|
#### Column Template
|
||||||
|
|
||||||
It is possible to provide custom column/cell template that may contain other Angular components or HTML elements:
|
It is possible to provide custom column/cell template that may contain other Angular components or HTML elements:
|
||||||
|
|
||||||
@@ -770,7 +712,7 @@ In the Example below we will add the [ng2-alfresco-tag](https://www.npmjs.com/pa
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||
### Actions
|
#### Actions
|
||||||
|
|
||||||
Properties:
|
Properties:
|
||||||
|
|
||||||
@@ -982,7 +924,7 @@ Shows the destination chooser dialog for copy and move actions. By default the d
|
|||||||
</adf-document-list>
|
</adf-document-list>
|
||||||
```
|
```
|
||||||
|
|
||||||
###### Error, Permission and success callback
|
##### Error, Permission and success callback
|
||||||
|
|
||||||
Defining error, permission and success callbacks are pretty much the same as doing it for the delete permission handling.
|
Defining error, permission and success callbacks are pretty much the same as doing it for the delete permission handling.
|
||||||
|
|
||||||
@@ -1044,7 +986,7 @@ export class MyView {
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||
### Context Menu
|
#### Context Menu
|
||||||
|
|
||||||
DocumentList also provides integration for 'Context Menu Service' from the
|
DocumentList also provides integration for 'Context Menu Service' from the
|
||||||
[ng2-alfresco-core](https://www.npmjs.com/package/ng2-alfresco-core) library.
|
[ng2-alfresco-core](https://www.npmjs.com/package/ng2-alfresco-core) library.
|
||||||
@@ -1070,7 +1012,7 @@ export class MyView {
|
|||||||
|
|
||||||
This enables context menu items for documents and folders.
|
This enables context menu items for documents and folders.
|
||||||
|
|
||||||
### Navigation mode
|
#### Navigation mode
|
||||||
|
|
||||||
By default DocumentList component uses 'double-click' mode for navigation.
|
By default DocumentList component uses 'double-click' mode for navigation.
|
||||||
That means user will see the contents of the folder by double-clicking its name
|
That means user will see the contents of the folder by double-clicking its name
|
||||||
@@ -1090,18 +1032,56 @@ The following example switches navigation to single clicks:
|
|||||||
</adf-document-list>
|
</adf-document-list>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Events
|
## Breadcrumb Component
|
||||||
|
|
||||||
DocumentList emits the following events:
|
Indicates the current position within a navigation hierarchy.
|
||||||
|
|
||||||
| Name | Description |
|

|
||||||
| --- | --- |
|
|
||||||
| nodeClick | emitted when user clicks a list node |
|
### Basic Usage
|
||||||
| nodeDblClick | emitted when user double-clicks list node |
|
|
||||||
| folderChange | emitted once current display folder has changed |
|
```html
|
||||||
| preview | emitted when user acts upon files with either single or double click (depends on `navigation-mode`), recommended for Viewer components integration |
|
<adf-breadcrumb
|
||||||
| permissionError | emitted when user is attempting to create a folder via action menu without having the permission to do it |
|
[target]="documentList"
|
||||||
| ready | emitted when the documentList is ready and loads all the elements|
|
[folderNode]="documentList.folderNode">
|
||||||
|
</adf-breadcrumb>
|
||||||
|
```
|
||||||
|
|
||||||
|
***Note:*** the `<adf-document-list-breadcrumb>` and `<adf-breadcrumb>` are the same component - you can still use the old tag name.
|
||||||
|
|
||||||
|
#### Properties
|
||||||
|
|
||||||
|
| Name | Type | Description |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| target | DocumentListComponent | (optional) DocumentList component to operate with. Upon clicks will instruct the given component to update. |
|
||||||
|
| folderNode | [MinimalNodeEntryEntity](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeMinimalEntry.md) | Active node, builds UI based on `folderNode.path.elements` collection. |
|
||||||
|
| root | String | (optional) Name of the root element of the breadcrumb. You can use this property to rename "Company Home" to "Personal Files" for example. |
|
||||||
|
|
||||||
|
#### Events
|
||||||
|
|
||||||
|
| Name | Returned Type | Description |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| navigate | [PathElementEntity](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/PathElementEntity.md) | emitted when user clicks on a breadcrumb |
|
||||||
|
|
||||||
|
## Dropdown Site Component
|
||||||
|
|
||||||
|
Displays a dropdown menu to show and interact with the sites of the current user.
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
### Basic Usage
|
||||||
|
|
||||||
|
```html
|
||||||
|
<adf-sites-dropdown
|
||||||
|
(change)="getSiteContent($event)">
|
||||||
|
</adf-sites-dropdown>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Events
|
||||||
|
|
||||||
|
| Name | Returned Type | Description |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| change | [SiteModel](https://github.com/Alfresco/alfresco-ng2-components/blob/development/ng2-components/ng2-alfresco-documentlist/src/models/site.model.ts) | emitted when user selects a site. When default option is selected an empty model is emitted |
|
||||||
|
|
||||||
## Advanced usage and customization
|
## Advanced usage and customization
|
||||||
|
|
||||||
@@ -1456,7 +1436,25 @@ export class MyView {
|
|||||||
Typically you may want populating all your custom actions at the application root level or
|
Typically you may want populating all your custom actions at the application root level or
|
||||||
by means of custom application service.
|
by means of custom application service.
|
||||||
|
|
||||||
## Build from sources
|
## See also
|
||||||
|
|
||||||
|
- [Walkthrough: adding indicators to clearly highlight information about a node](docs/metadata-indicators.md)
|
||||||
|
|
||||||
|
## Project Information
|
||||||
|
|
||||||
|
### Prerequisites
|
||||||
|
|
||||||
|
Before you start using this development framework, make sure you have installed all required software and done all the
|
||||||
|
necessary configuration [prerequisites](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
|
||||||
|
|
||||||
|
> If you plan using this component with projects generated by Angular CLI, please refer to the following article: [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
|
||||||
|
|
||||||
|
### Install
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm install ng2-alfresco-documentlist
|
||||||
|
|
||||||
|
### Build from sources
|
||||||
|
|
||||||
You can build component from sources with the following commands:
|
You can build component from sources with the following commands:
|
||||||
|
|
||||||
@@ -1468,7 +1466,7 @@ npm run build
|
|||||||
> The `build` task rebuilds all the code, runs tslint, license checks
|
> The `build` task rebuilds all the code, runs tslint, license checks
|
||||||
> and other quality check tools before performing unit testing.
|
> and other quality check tools before performing unit testing.
|
||||||
|
|
||||||
## NPM scripts
|
### NPM scripts
|
||||||
|
|
||||||
| Command | Description |
|
| Command | Description |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
@@ -1477,7 +1475,7 @@ npm run build
|
|||||||
| npm run test-browser | Run unit tests in the browser
|
| npm run test-browser | Run unit tests in the browser
|
||||||
| npm run coverage | Run unit tests and display code coverage report |
|
| npm run coverage | Run unit tests and display code coverage report |
|
||||||
|
|
||||||
## Demo
|
### Demo
|
||||||
|
|
||||||
Please check the demo folder for a demo project
|
Please check the demo folder for a demo project
|
||||||
|
|
||||||
@@ -1487,6 +1485,6 @@ npm install
|
|||||||
npm start
|
npm start
|
||||||
```
|
```
|
||||||
|
|
||||||
## License
|
### License
|
||||||
|
|
||||||
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
|
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
|
||||||
|
@@ -1,47 +1,39 @@
|
|||||||
# Login Component
|
# Login library
|
||||||
|
|
||||||
|
Contains the Login component.
|
||||||
|
|
||||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
||||||
|
|
||||||
<!-- toc -->
|
<!-- toc -->
|
||||||
|
|
||||||
- [Prerequisites](#prerequisites)
|
- [Login component](#login-component)
|
||||||
- [Install](#install)
|
* [Basic usage](#basic-usage)
|
||||||
- [Basic usage](#basic-usage)
|
+ [Properties](#properties)
|
||||||
- [Properties](#properties)
|
+ [Events](#events)
|
||||||
- [Events](#events)
|
* [Details](#details)
|
||||||
- [Change footer content](#change-footer-content)
|
+ [Change footer content](#change-footer-content)
|
||||||
- [Change header content](#change-header-content)
|
+ [Change header content](#change-header-content)
|
||||||
- [Extra content](#extra-content)
|
+ [Extra content](#extra-content)
|
||||||
- [Custom logo and background](#custom-logo-and-background)
|
+ [Custom logo and background](#custom-logo-and-background)
|
||||||
- [Customize Validation rules](#customize-validation-rules)
|
+ [Customize Validation rules](#customize-validation-rules)
|
||||||
- [Controlling form submit execution behaviour](#controlling-form-submit-execution-behaviour)
|
+ [Controlling form submit execution behaviour](#controlling-form-submit-execution-behaviour)
|
||||||
- [Build from sources](#build-from-sources)
|
- [Project Information](#project-information)
|
||||||
- [NPM scripts](#npm-scripts)
|
* [Prerequisites](#prerequisites)
|
||||||
- [Demo](#demo)
|
* [Install](#install)
|
||||||
- [License](#license)
|
* [Build from sources](#build-from-sources)
|
||||||
|
* [NPM scripts](#npm-scripts)
|
||||||
|
* [Demo](#demo)
|
||||||
|
* [License](#license)
|
||||||
|
|
||||||
<!-- tocstop -->
|
<!-- tocstop -->
|
||||||
|
|
||||||
<!-- markdown-toc end -->
|
<!-- markdown-toc end -->
|
||||||
|
|
||||||
## Prerequisites
|
## Login component
|
||||||
|
|
||||||
Before you start using this development framework, make sure you have installed all required software and done all the
|
Authenticates to Alfresco Content Services and Alfresco Process Services.
|
||||||
necessary configuration, see this [page](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
|
|
||||||
|
|
||||||
> If you plan using this component with projects generated by Angular CLI, please refer to the following article: [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
|
### Basic usage
|
||||||
|
|
||||||
See it live: [Login Quickstart](http://embed.plnkr.co/PfZytJyHcl3xIsa8pdMo/)
|
|
||||||
|
|
||||||
## Install
|
|
||||||
|
|
||||||
```sh
|
|
||||||
npm install ng2-alfresco-login
|
|
||||||
```
|
|
||||||
|
|
||||||
## Basic usage
|
|
||||||
|
|
||||||
This component allows to authenticate to Alfresco Content Services and Alfresco Process Services.
|
|
||||||
|
|
||||||
**app.component.html**
|
**app.component.html**
|
||||||
|
|
||||||
@@ -68,7 +60,7 @@ export class AppComponent {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
## Properties
|
#### Properties
|
||||||
|
|
||||||
| Name | Type | Default Value | Description |
|
| Name | Type | Default Value | Description |
|
||||||
| --- | --- | --- | --- |
|
| --- | --- | --- | --- |
|
||||||
@@ -83,7 +75,7 @@ export class AppComponent {
|
|||||||
| showRememberMe | boolean | false | Toggle `Remember me` checkbox visibility |
|
| showRememberMe | boolean | false | Toggle `Remember me` checkbox visibility |
|
||||||
| showLoginActions | boolean | false | Toggle extra actions visibility (`Need Help`, `Register`, etc.) |
|
| showLoginActions | boolean | false | Toggle extra actions visibility (`Need Help`, `Register`, etc.) |
|
||||||
|
|
||||||
## Events
|
#### Events
|
||||||
|
|
||||||
| Name | Description |
|
| Name | Description |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
@@ -91,7 +83,9 @@ export class AppComponent {
|
|||||||
| onError | Raised when the login fails |
|
| onError | Raised when the login fails |
|
||||||
| executeSubmit | Raised when the form is submitted |
|
| executeSubmit | Raised when the form is submitted |
|
||||||
|
|
||||||
## Change footer content
|
### Details
|
||||||
|
|
||||||
|
#### Change footer content
|
||||||
|
|
||||||
<img src="assets/custom-footer.png" width="400" />
|
<img src="assets/custom-footer.png" width="400" />
|
||||||
|
|
||||||
@@ -103,7 +97,7 @@ You can replace the entire content in the footer of the login component with you
|
|||||||
</adf-login>`
|
</adf-login>`
|
||||||
```
|
```
|
||||||
|
|
||||||
## Change header content
|
#### Change header content
|
||||||
|
|
||||||
<img src="assets/custom-header.png" width="400" />
|
<img src="assets/custom-header.png" width="400" />
|
||||||
|
|
||||||
@@ -115,7 +109,7 @@ You can replace the entire content in the header of the login component with you
|
|||||||
</adf-login>`
|
</adf-login>`
|
||||||
```
|
```
|
||||||
|
|
||||||
## Extra content
|
#### Extra content
|
||||||
|
|
||||||
You can put additional html content between `alfresco-login` tags to get it rendered as part of the login dialog.
|
You can put additional html content between `alfresco-login` tags to get it rendered as part of the login dialog.
|
||||||
This becomes handy in case you need to extend it with custom input fields handled by your application or parent component:
|
This becomes handy in case you need to extend it with custom input fields handled by your application or parent component:
|
||||||
@@ -132,7 +126,7 @@ Here's an example of custom content:
|
|||||||
|
|
||||||
<img src="assets/login-extra-content.png" height="400" />
|
<img src="assets/login-extra-content.png" height="400" />
|
||||||
|
|
||||||
## Custom logo and background
|
#### Custom logo and background
|
||||||
|
|
||||||
It is possible changing logo and background images to custom values.
|
It is possible changing logo and background images to custom values.
|
||||||
|
|
||||||
@@ -156,7 +150,7 @@ Alternatively you can bind to your component properties and provide values dynam
|
|||||||
</adf-login>
|
</adf-login>
|
||||||
```
|
```
|
||||||
|
|
||||||
## Customize Validation rules
|
#### Customize Validation rules
|
||||||
|
|
||||||
If needed it is possible to customise the validation rules of the login
|
If needed it is possible to customise the validation rules of the login
|
||||||
form. You can add/modify the default rules of the login form.
|
form. You can add/modify the default rules of the login form.
|
||||||
@@ -194,7 +188,7 @@ export class MyCustomLogin {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
## Controlling form submit execution behaviour
|
#### Controlling form submit execution behaviour
|
||||||
|
|
||||||
If absolutely needed it is possible taking full control over form
|
If absolutely needed it is possible taking full control over form
|
||||||
submit execution by means of `executeSubmit` event.
|
submit execution by means of `executeSubmit` event.
|
||||||
@@ -236,7 +230,24 @@ export class MyCustomLogin {
|
|||||||
**Please note that if `event.preventDefault()` is not called then default behaviour
|
**Please note that if `event.preventDefault()` is not called then default behaviour
|
||||||
will also be executed after your custom code.**
|
will also be executed after your custom code.**
|
||||||
|
|
||||||
## Build from sources
|
## Project Information
|
||||||
|
|
||||||
|
### 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](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
|
||||||
|
|
||||||
|
> If you plan using this component with projects generated by Angular CLI, please refer to the following article: [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
|
||||||
|
|
||||||
|
See it live: [Login Quickstart](http://embed.plnkr.co/PfZytJyHcl3xIsa8pdMo/)
|
||||||
|
|
||||||
|
### Install
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm install ng2-alfresco-login
|
||||||
|
```
|
||||||
|
|
||||||
|
### Build from sources
|
||||||
|
|
||||||
You can build component from sources with the following commands:
|
You can build component from sources with the following commands:
|
||||||
|
|
||||||
@@ -248,7 +259,7 @@ npm run build
|
|||||||
> The `build` task rebuilds all the code, runs tslint, license checks
|
> The `build` task rebuilds all the code, runs tslint, license checks
|
||||||
> and other quality check tools before performing unit testing.
|
> and other quality check tools before performing unit testing.
|
||||||
|
|
||||||
## NPM scripts
|
### NPM scripts
|
||||||
|
|
||||||
| Command | Description |
|
| Command | Description |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
@@ -257,7 +268,7 @@ npm run build
|
|||||||
| npm run test-browser | Run unit tests in the browser
|
| npm run test-browser | Run unit tests in the browser
|
||||||
| npm run coverage | Run unit tests and display code coverage report |
|
| npm run coverage | Run unit tests and display code coverage report |
|
||||||
|
|
||||||
## Demo
|
### Demo
|
||||||
|
|
||||||
Please check the demo folder for a demo project
|
Please check the demo folder for a demo project
|
||||||
|
|
||||||
@@ -267,6 +278,6 @@ npm install
|
|||||||
npm start
|
npm start
|
||||||
```
|
```
|
||||||
|
|
||||||
## License
|
### License
|
||||||
|
|
||||||
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
|
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
|
||||||
|
@@ -1,40 +1,36 @@
|
|||||||
# Search Component
|
# Search library
|
||||||
|
|
||||||
|
Contains the Search and Search Results components.
|
||||||
|
|
||||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
||||||
|
|
||||||
<!-- toc -->
|
<!-- toc -->
|
||||||
|
|
||||||
- [Prerequisites](#prerequisites)
|
- [Search component](#search-component)
|
||||||
- [Install](#install)
|
* [Basic usage](#basic-usage)
|
||||||
- [Basic usage](#basic-usage)
|
+ [Properties](#properties)
|
||||||
- [Properties](#properties)
|
+ [Events](#events)
|
||||||
- [Events](#events)
|
* [Details](#details)
|
||||||
- [Basic usage Search results](#basic-usage-search-results)
|
- [Search Results component](#search-results-component)
|
||||||
* [Properties](#properties-1)
|
* [Basic usage](#basic-usage-1)
|
||||||
* [Events](#events-1)
|
+ [Properties](#properties-1)
|
||||||
- [Build from sources](#build-from-sources)
|
+ [Events](#events-1)
|
||||||
- [NPM scripts](#npm-scripts)
|
* [Details](#details-1)
|
||||||
- [Demo](#demo)
|
- [Project Information](#project-information)
|
||||||
- [License](#license)
|
* [Prerequisites](#prerequisites)
|
||||||
|
* [Install](#install)
|
||||||
|
* [Build from sources](#build-from-sources)
|
||||||
|
* [NPM scripts](#npm-scripts)
|
||||||
|
* [Demo](#demo)
|
||||||
|
* [License](#license)
|
||||||
|
|
||||||
<!-- tocstop -->
|
<!-- tocstop -->
|
||||||
|
|
||||||
<!-- markdown-toc end -->
|
<!-- markdown-toc end -->
|
||||||
|
|
||||||
## Prerequisites
|
## Search component
|
||||||
|
|
||||||
Before you start using this development framework, make sure you have installed all required software and done all the
|
### Basic usage
|
||||||
necessary configuration, see this [page](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
|
|
||||||
|
|
||||||
> If you plan using this component with projects generated by Angular CLI, please refer to the following article: [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
|
|
||||||
|
|
||||||
## Install
|
|
||||||
|
|
||||||
```sh
|
|
||||||
npm install ng2-alfresco-search
|
|
||||||
```
|
|
||||||
|
|
||||||
## Basic usage
|
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-search-control
|
<adf-search-control
|
||||||
@@ -46,11 +42,7 @@ npm install ng2-alfresco-search
|
|||||||
</adf-search-control>
|
</adf-search-control>
|
||||||
```
|
```
|
||||||
|
|
||||||
Example of a component that uses the search control. In this example the search term is simply logged to the console
|
#### Properties
|
||||||
but instead the component could emit an event to be consumed upstream, or it could trigger a change inside a search
|
|
||||||
results component embedded inside the same component.
|
|
||||||
|
|
||||||
## Properties
|
|
||||||
|
|
||||||
| Name | Type | Default | Description |
|
| Name | Type | Default | Description |
|
||||||
| --- | --- | --- | --- |
|
| --- | --- | --- | --- |
|
||||||
@@ -65,7 +57,7 @@ results component embedded inside the same component.
|
|||||||
| liveSearchMaxResults | number | 5 | Maximum number of results to show in the live search. |
|
| liveSearchMaxResults | number | 5 | Maximum number of results to show in the live search. |
|
||||||
| liveSearchResultSort | string | | Criteria to sort live search results by, must be one of "name" , "modifiedAt" or "createdAt" |
|
| liveSearchResultSort | string | | Criteria to sort live search results by, must be one of "name" , "modifiedAt" or "createdAt" |
|
||||||
|
|
||||||
## Events
|
#### Events
|
||||||
|
|
||||||
| Name | Description |
|
| Name | Description |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
@@ -74,7 +66,25 @@ results component embedded inside the same component.
|
|||||||
| fileSelect | Emitted when a file item from the list of find-as-you-type results is selected |
|
| fileSelect | Emitted when a file item from the list of find-as-you-type results is selected |
|
||||||
| expand | Emitted when the expanded state of the control changes based on focus events and the content of the input control |
|
| expand | Emitted when the expanded state of the control changes based on focus events and the content of the input control |
|
||||||
|
|
||||||
## Basic usage Search results
|
### Details
|
||||||
|
|
||||||
|
```html
|
||||||
|
<adf-search-control
|
||||||
|
[searchTerm]="searchTerm"
|
||||||
|
inputType="search"
|
||||||
|
(searchChange)="onSearchChange($event);"
|
||||||
|
(searchSubmit)="onSearchSubmit($event);"
|
||||||
|
(fileSelect)="onSearchResultSelect($event);">
|
||||||
|
</adf-search-control>
|
||||||
|
```
|
||||||
|
|
||||||
|
Example of a component that uses the search control. In this example the search term is simply logged to the console
|
||||||
|
but instead the component could emit an event to be consumed upstream, or it could trigger a change inside a search
|
||||||
|
results component embedded inside the same component.
|
||||||
|
|
||||||
|
## Search Results component
|
||||||
|
|
||||||
|
### Basic usage
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-search
|
<adf-search
|
||||||
@@ -82,11 +92,7 @@ results component embedded inside the same component.
|
|||||||
</adf-search>
|
</adf-search>
|
||||||
```
|
```
|
||||||
|
|
||||||
Example of a component that displays search results, using the Angular2 router to supply a 'q' parameter containing the
|
#### Properties
|
||||||
search term. If no router is present on the page or if the router does not provide such parameter then an empty
|
|
||||||
results page will be shown.
|
|
||||||
|
|
||||||
### Properties
|
|
||||||
|
|
||||||
| Name | Type | Default | Description |
|
| Name | Type | Default | Description |
|
||||||
| --- | --- | --- | --- |
|
| --- | --- | --- | --- |
|
||||||
@@ -98,7 +104,7 @@ results page will be shown.
|
|||||||
| navigationMode | string | "dblclick" | Event used to initiate a navigation action to a specific result, one of "click" or "dblclick" |
|
| navigationMode | string | "dblclick" | Event used to initiate a navigation action to a specific result, one of "click" or "dblclick" |
|
||||||
| navigate | boolean | true | Allow documentlist to navigate or not. For more information see documentlist component's documentation |
|
| navigate | boolean | true | Allow documentlist to navigate or not. For more information see documentlist component's documentation |
|
||||||
|
|
||||||
### Events
|
#### Events
|
||||||
|
|
||||||
| Name | Description |
|
| Name | Description |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
@@ -106,7 +112,34 @@ results page will be shown.
|
|||||||
| nodeDbClick | Emitted when user acts upon files or folders with double click **only when `navigation-mode` is set to false**, giving more freedom then just simply previewing the file |
|
| nodeDbClick | Emitted when user acts upon files or folders with double click **only when `navigation-mode` is set to false**, giving more freedom then just simply previewing the file |
|
||||||
| resultsLoad | Emitted when search results have fully loaded |
|
| resultsLoad | Emitted when search results have fully loaded |
|
||||||
|
|
||||||
## Build from sources
|
### Details
|
||||||
|
|
||||||
|
```html
|
||||||
|
<adf-search
|
||||||
|
[searchTerm]="searchTerm">
|
||||||
|
</adf-search>
|
||||||
|
```
|
||||||
|
|
||||||
|
Example of a component that displays search results, using the Angular2 router to supply a 'q' parameter containing the
|
||||||
|
search term. If no router is present on the page or if the router does not provide such parameter then an empty
|
||||||
|
results page will be shown.
|
||||||
|
|
||||||
|
## Project Information
|
||||||
|
|
||||||
|
### 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](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
|
||||||
|
|
||||||
|
> If you plan using this component with projects generated by Angular CLI, please refer to the following article: [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
|
||||||
|
|
||||||
|
### Install
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm install ng2-alfresco-search
|
||||||
|
```
|
||||||
|
|
||||||
|
### Build from sources
|
||||||
|
|
||||||
You can build component from sources with the following commands:
|
You can build component from sources with the following commands:
|
||||||
|
|
||||||
@@ -118,7 +151,7 @@ npm run build
|
|||||||
> The `build` task rebuilds all the code, runs tslint, license checks
|
> The `build` task rebuilds all the code, runs tslint, license checks
|
||||||
> and other quality check tools before performing unit testing.
|
> and other quality check tools before performing unit testing.
|
||||||
|
|
||||||
## NPM scripts
|
### NPM scripts
|
||||||
|
|
||||||
| Command | Description |
|
| Command | Description |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
@@ -127,7 +160,7 @@ npm run build
|
|||||||
| npm run test-browser | Run unit tests in the browser
|
| npm run test-browser | Run unit tests in the browser
|
||||||
| npm run coverage | Run unit tests and display code coverage report |
|
| npm run coverage | Run unit tests and display code coverage report |
|
||||||
|
|
||||||
## Demo
|
### Demo
|
||||||
|
|
||||||
Please check the demo folder for a demo project
|
Please check the demo folder for a demo project
|
||||||
|
|
||||||
@@ -137,6 +170,6 @@ npm install
|
|||||||
npm start
|
npm start
|
||||||
```
|
```
|
||||||
|
|
||||||
## License
|
### License
|
||||||
|
|
||||||
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
|
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
|
||||||
|
@@ -1,68 +1,58 @@
|
|||||||
# Alfresco Social Component
|
# Alfresco Social library
|
||||||
|
|
||||||
|
Contains the ADF Like and ADF Rating components.
|
||||||
|
|
||||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
||||||
|
|
||||||
<!-- toc -->
|
<!-- toc -->
|
||||||
|
|
||||||
- [Prerequisites](#prerequisites)
|
- [ADF Like component](#adf-like-component)
|
||||||
- [Install](#install)
|
* [Basic Usage](#basic-usage)
|
||||||
- [Basic usage](#basic-usage)
|
+ [Properties](#properties)
|
||||||
- [adf-like](#adf-like)
|
+ [Events](#events)
|
||||||
* [Properties](#properties)
|
- [ADF Rating component](#adf-rating-component)
|
||||||
* [Events](#events)
|
* [Basic Usage](#basic-usage-1)
|
||||||
- [adf-rating](#adf-rating)
|
+ [Properties](#properties-1)
|
||||||
* [Properties](#properties-1)
|
+ [Events](#events-1)
|
||||||
* [Events](#events-1)
|
- [Project Information](#project-information)
|
||||||
- [Build from sources](#build-from-sources)
|
* [Prerequisites](#prerequisites)
|
||||||
- [NPM scripts](#npm-scripts)
|
* [Install](#install)
|
||||||
- [Demo](#demo)
|
* [Build from sources](#build-from-sources)
|
||||||
- [License](#license)
|
* [NPM scripts](#npm-scripts)
|
||||||
|
* [Demo](#demo)
|
||||||
|
* [License](#license)
|
||||||
|
|
||||||
<!-- tocstop -->
|
<!-- tocstop -->
|
||||||
|
|
||||||
<!-- markdown-toc end -->
|
<!-- markdown-toc end -->
|
||||||
|
|
||||||
## Prerequisites
|
## ADF Like component
|
||||||
|
|
||||||
Before you start using this development framework, make sure you have installed all required software and done all the
|

|
||||||
necessary configuration [prerequisites](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
|
|
||||||
|
|
||||||
> If you plan using this component with projects generated by Angular CLI, please refer to the following article: [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
|
### Basic Usage
|
||||||
|
|
||||||
## Install
|
|
||||||
|
|
||||||
```sh
|
|
||||||
npm install ng2-alfresco-social
|
|
||||||
```
|
|
||||||
|
|
||||||
## Basic usage
|
|
||||||
|
|
||||||
In this component there are two different components:
|
|
||||||
|
|
||||||
* adf-like
|
|
||||||
* adf-rating
|
|
||||||
|
|
||||||
## adf-like
|
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-like [nodeId]="nodeId"></adf-like>
|
<adf-like [nodeId]="nodeId"></adf-like>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Properties
|
#### Properties
|
||||||
|
|
||||||
| Attribute | Type | Default | Description |
|
| Attribute | Type | Default | Description |
|
||||||
| --- | --- | --- | --- |
|
| --- | --- | --- | --- |
|
||||||
| nodeId | string | | The identifier of a node.|
|
| nodeId | string | | The identifier of a node.|
|
||||||
|
|
||||||
### Events
|
#### Events
|
||||||
|
|
||||||
| Name | Description |
|
| Name | Description |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
| changeVote | Raised when vote gets changed |
|
| changeVote | Raised when vote gets changed |
|
||||||
|
|
||||||

|
## ADF Rating component
|
||||||
|
|
||||||
## adf-rating
|

|
||||||
|
|
||||||
|
### Basic Usage
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-rating
|
<adf-rating
|
||||||
@@ -70,21 +60,34 @@ In this component there are two different components:
|
|||||||
</adf-rating>
|
</adf-rating>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Properties
|
#### Properties
|
||||||
|
|
||||||
| Attribute | Type | Default | Description |
|
| Attribute | Type | Default | Description |
|
||||||
| --- | --- | --- | --- |
|
| --- | --- | --- | --- |
|
||||||
| nodeId | string | | The identifier of a node |
|
| nodeId | string | | The identifier of a node |
|
||||||
|
|
||||||
### Events
|
#### Events
|
||||||
|
|
||||||
| Name | Description |
|
| Name | Description |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
| changeVote | Raised when vote gets changed |
|
| changeVote | Raised when vote gets changed |
|
||||||
|
|
||||||

|
## Project Information
|
||||||
|
|
||||||
## Build from sources
|
### Prerequisites
|
||||||
|
|
||||||
|
Before you start using this development framework, make sure you have installed all required software and done all the
|
||||||
|
necessary configuration [prerequisites](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
|
||||||
|
|
||||||
|
> If you plan using this component with projects generated by Angular CLI, please refer to the following article: [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
|
||||||
|
|
||||||
|
### Install
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm install ng2-alfresco-social
|
||||||
|
```
|
||||||
|
|
||||||
|
### Build from sources
|
||||||
|
|
||||||
You can build component from sources with the following commands:
|
You can build component from sources with the following commands:
|
||||||
|
|
||||||
@@ -96,7 +99,7 @@ npm run build
|
|||||||
> The `build` task rebuilds all the code, runs tslint, license checks
|
> The `build` task rebuilds all the code, runs tslint, license checks
|
||||||
> and other quality check tools before performing unit testing.
|
> and other quality check tools before performing unit testing.
|
||||||
|
|
||||||
## NPM scripts
|
### NPM scripts
|
||||||
|
|
||||||
| Command | Description |
|
| Command | Description |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
@@ -105,7 +108,7 @@ npm run build
|
|||||||
| npm run test-browser | Run unit tests in the browser
|
| npm run test-browser | Run unit tests in the browser
|
||||||
| npm run coverage | Run unit tests and display code coverage report |
|
| npm run coverage | Run unit tests and display code coverage report |
|
||||||
|
|
||||||
## Demo
|
### Demo
|
||||||
|
|
||||||
Please check the demo folder for a demo project
|
Please check the demo folder for a demo project
|
||||||
|
|
||||||
@@ -115,6 +118,6 @@ npm install
|
|||||||
npm start
|
npm start
|
||||||
```
|
```
|
||||||
|
|
||||||
## License
|
### License
|
||||||
|
|
||||||
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
|
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
|
||||||
|
@@ -1,48 +1,35 @@
|
|||||||
# Alfresco Tag Component
|
# Alfresco Tag Component
|
||||||
|
|
||||||
|
Contains the Alfresco Tag Node Actions list, Tag List and Node List components.
|
||||||
|
|
||||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
||||||
|
|
||||||
<!-- toc -->
|
<!-- toc -->
|
||||||
|
|
||||||
- [Prerequisites](#prerequisites)
|
- [Alfresco Tag Node Actions List component](#alfresco-tag-node-actions-list-component)
|
||||||
- [Install](#install)
|
* [Basic Usage](#basic-usage)
|
||||||
- [Basic usage](#basic-usage)
|
+ [Properties](#properties)
|
||||||
- [alfresco-tag-node-actions-list](#alfresco-tag-node-actions-list)
|
- [Alfresco Tag Node List component](#alfresco-tag-node-list-component)
|
||||||
* [Properties](#properties)
|
* [Basic Usage](#basic-usage-1)
|
||||||
- [alfresco-tag-node-list](#alfresco-tag-node-list)
|
+ [Properties](#properties-1)
|
||||||
* [Properties](#properties-1)
|
- [Alfresco Tag List component](#alfresco-tag-list-component)
|
||||||
- [alfresco-tag-list](#alfresco-tag-list)
|
- [Project Information](#project-information)
|
||||||
- [Build from sources](#build-from-sources)
|
* [Prerequisites](#prerequisites)
|
||||||
- [NPM scripts](#npm-scripts)
|
* [Install](#install)
|
||||||
- [Demo](#demo)
|
* [Build from sources](#build-from-sources)
|
||||||
- [License](#license)
|
* [NPM scripts](#npm-scripts)
|
||||||
|
* [Demo](#demo)
|
||||||
|
* [License](#license)
|
||||||
|
|
||||||
<!-- tocstop -->
|
<!-- tocstop -->
|
||||||
|
|
||||||
<!-- markdown-toc end -->
|
<!-- markdown-toc end -->
|
||||||
|
|
||||||
## Prerequisites
|
## Alfresco Tag Node Actions List component
|
||||||
|
|
||||||
Before you start using this development framework, make sure you have installed all required software and done all the
|

|
||||||
necessary configuration [prerequisites](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
|
|
||||||
|
|
||||||
> If you plan using this component with projects generated by Angular CLI, please refer to the following article: [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
|
### Basic Usage
|
||||||
|
|
||||||
## Install
|
|
||||||
|
|
||||||
```sh
|
|
||||||
npm install ng2-alfresco-tag
|
|
||||||
```
|
|
||||||
|
|
||||||
## Basic usage
|
|
||||||
|
|
||||||
In this component there are three different tags:
|
|
||||||
|
|
||||||
* alfresco-tag-node-actions-list
|
|
||||||
* alfresco-tag-list
|
|
||||||
* alfresco-tag-node-list
|
|
||||||
|
|
||||||
## alfresco-tag-node-actions-list
|
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-tag-node-actions-list
|
<adf-tag-node-actions-list
|
||||||
@@ -50,15 +37,15 @@ In this component there are three different tags:
|
|||||||
</adf-tag-node-actions-list>
|
</adf-tag-node-actions-list>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Properties
|
#### Properties
|
||||||
|
|
||||||
| Attribute | Type | Default | Description |
|
| Attribute | Type | Default | Description |
|
||||||
| --- | --- | --- | --- |
|
| --- | --- | --- | --- |
|
||||||
| nodeId | string | | The identifier of a node |
|
| nodeId | string | | The identifier of a node |
|
||||||
|
|
||||||

|
## Alfresco Tag Node List component
|
||||||
|
|
||||||
## alfresco-tag-node-list
|
### Basic Usage
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-tag-node-list
|
<adf-tag-node-list
|
||||||
@@ -66,7 +53,7 @@ In this component there are three different tags:
|
|||||||
</adf-tag-node-list>
|
</adf-tag-node-list>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Properties
|
#### Properties
|
||||||
|
|
||||||
| Attribute | Type | Default | Description |
|
| Attribute | Type | Default | Description |
|
||||||
| --- | --- | --- | --- |
|
| --- | --- | --- | --- |
|
||||||
@@ -74,11 +61,26 @@ In this component there are three different tags:
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||
## alfresco-tag-list
|
## Alfresco Tag List component
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
## Build from sources
|
## Project Information
|
||||||
|
|
||||||
|
### Prerequisites
|
||||||
|
|
||||||
|
Before you start using this development framework, make sure you have installed all required software and done all the
|
||||||
|
necessary configuration [prerequisites](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
|
||||||
|
|
||||||
|
> If you plan using this component with projects generated by Angular CLI, please refer to the following article: [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
|
||||||
|
|
||||||
|
### Install
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm install ng2-alfresco-tag
|
||||||
|
```
|
||||||
|
|
||||||
|
### Build from sources
|
||||||
|
|
||||||
You can build component from sources with the following commands:
|
You can build component from sources with the following commands:
|
||||||
|
|
||||||
@@ -90,7 +92,7 @@ npm run build
|
|||||||
> The `build` task rebuilds all the code, runs tslint, license checks
|
> The `build` task rebuilds all the code, runs tslint, license checks
|
||||||
> and other quality check tools before performing unit testing.
|
> and other quality check tools before performing unit testing.
|
||||||
|
|
||||||
## NPM scripts
|
### NPM scripts
|
||||||
|
|
||||||
| Command | Description |
|
| Command | Description |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
@@ -99,7 +101,7 @@ npm run build
|
|||||||
| npm run test-browser | Run unit tests in the browser
|
| npm run test-browser | Run unit tests in the browser
|
||||||
| npm run coverage | Run unit tests and display code coverage report |
|
| npm run coverage | Run unit tests and display code coverage report |
|
||||||
|
|
||||||
## Demo
|
### Demo
|
||||||
|
|
||||||
Please check the demo folder for a demo project
|
Please check the demo folder for a demo project
|
||||||
|
|
||||||
@@ -109,6 +111,6 @@ npm install
|
|||||||
npm start
|
npm start
|
||||||
```
|
```
|
||||||
|
|
||||||
## License
|
### License
|
||||||
|
|
||||||
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
|
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
|
||||||
|
@@ -1,69 +1,46 @@
|
|||||||
# Alfresco Upload Component
|
# Alfresco Upload library
|
||||||
|
|
||||||
|
Contains components for handling uploads to Content Services.
|
||||||
|
|
||||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
||||||
|
|
||||||
<!-- toc -->
|
<!-- toc -->
|
||||||
|
|
||||||
- [Content](#content)
|
- [Upload Button Component](#upload-button-component)
|
||||||
* [Components](#components)
|
* [Basic Usage](#basic-usage)
|
||||||
* [Services](#services)
|
+ [Properties](#properties)
|
||||||
* [Directives](#directives)
|
+ [Events](#events)
|
||||||
- [Prerequisites](#prerequisites)
|
* [Details](#details)
|
||||||
- [Install](#install)
|
|
||||||
- [UploadButtonComponent](#uploadbuttoncomponent)
|
|
||||||
* [Properties](#properties)
|
|
||||||
* [Events](#events)
|
|
||||||
* [Advanced usage](#advanced-usage)
|
|
||||||
+ [How to show notification message with no permission](#how-to-show-notification-message-with-no-permission)
|
+ [How to show notification message with no permission](#how-to-show-notification-message-with-no-permission)
|
||||||
+ [How to disable the button when the delete permission is missing](#how-to-disable-the-button-when-the-delete-permission-is-missing)
|
+ [How to disable the button when the delete permission is missing](#how-to-disable-the-button-when-the-delete-permission-is-missing)
|
||||||
- [UploadDragAreaComponent](#uploaddragareacomponent)
|
- [Upload Drag Area Component](#upload-drag-area-component)
|
||||||
* [Properties](#properties-1)
|
* [Basic Usage](#basic-usage-1)
|
||||||
* [Events](#events-1)
|
+ [Properties](#properties-1)
|
||||||
- [FileUploadingDialogComponent](#fileuploadingdialogcomponent)
|
+ [Events](#events-1)
|
||||||
* [Properties](#properties-2)
|
- [File Uploading Dialog Component](#file-uploading-dialog-component)
|
||||||
- [UploadService](#uploadservice)
|
* [Basic Usage](#basic-usage-2)
|
||||||
* [Ignore list configuration](#ignore-list-configuration)
|
+ [Properties](#properties-2)
|
||||||
* [Events](#events-2)
|
* [Details](#details-1)
|
||||||
- [Build from sources](#build-from-sources)
|
- [Upload Service](#upload-service)
|
||||||
- [NPM scripts](#npm-scripts)
|
* [Basic Usage](#basic-usage-3)
|
||||||
- [Demo](#demo)
|
+ [Events](#events-2)
|
||||||
- [License](#license)
|
* [Details](#details-2)
|
||||||
|
+ [Ignore list configuration](#ignore-list-configuration)
|
||||||
|
- [Project Information](#project-information)
|
||||||
|
* [Prerequisites](#prerequisites)
|
||||||
|
* [Install](#install)
|
||||||
|
* [Build from sources](#build-from-sources)
|
||||||
|
* [NPM scripts](#npm-scripts)
|
||||||
|
* [Demo](#demo)
|
||||||
|
* [License](#license)
|
||||||
|
|
||||||
<!-- tocstop -->
|
<!-- tocstop -->
|
||||||
|
|
||||||
<!-- markdown-toc end -->
|
<!-- markdown-toc end -->
|
||||||
|
|
||||||
## Content
|
## Upload Button Component
|
||||||
|
|
||||||
### Components
|
### Basic Usage
|
||||||
|
|
||||||
- [FileUploadingDialogComponent](#fileuploadingdialogcomponent)
|
|
||||||
- FileUploadingListComponent
|
|
||||||
- [UploadButtonComponent](#uploadbuttoncomponent)
|
|
||||||
- [UploadDragAreaComponent](#uploaddragareacomponent)
|
|
||||||
|
|
||||||
### Services
|
|
||||||
|
|
||||||
- [UploadService](#uploadservice)
|
|
||||||
|
|
||||||
### Directives
|
|
||||||
|
|
||||||
- FileDraggableDirective
|
|
||||||
|
|
||||||
## Prerequisites
|
|
||||||
|
|
||||||
Before you start using this development framework, make sure you have installed all required software and done all the
|
|
||||||
necessary configuration [prerequisites](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
|
|
||||||
|
|
||||||
> If you plan using this component with projects generated by Angular CLI, please refer to the following article: [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
|
|
||||||
|
|
||||||
## Install
|
|
||||||
|
|
||||||
```sh
|
|
||||||
npm install ng2-alfresco-upload
|
|
||||||
```
|
|
||||||
|
|
||||||
## UploadButtonComponent
|
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-upload-button
|
<adf-upload-button
|
||||||
@@ -77,7 +54,7 @@ npm install ng2-alfresco-upload
|
|||||||
<file-uploading-dialog></file-uploading-dialog>
|
<file-uploading-dialog></file-uploading-dialog>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Properties
|
#### Properties
|
||||||
|
|
||||||
| Name | Type | Default | Description |
|
| Name | Type | Default | Description |
|
||||||
| --- | --- | --- | --- |
|
| --- | --- | --- | --- |
|
||||||
@@ -87,21 +64,20 @@ npm install ng2-alfresco-upload
|
|||||||
| multipleFiles | boolean | false | Allow/disallow multiple files |
|
| multipleFiles | boolean | false | Allow/disallow multiple files |
|
||||||
| acceptedFilesType | string | * | array of allowed file extensions , example: ".jpg,.gif,.png,.svg" |
|
| acceptedFilesType | string | * | array of allowed file extensions , example: ".jpg,.gif,.png,.svg" |
|
||||||
| **(deprecated)** currentFolderPath | string | '/Sites/swsdp/documentLibrary' | define the path where the files are uploaded. **Deprecated in 1.6.0: use rootFolderId instead.** |
|
| **(deprecated)** currentFolderPath | string | '/Sites/swsdp/documentLibrary' | define the path where the files are uploaded. **Deprecated in 1.6.0: use rootFolderId instead.** |
|
||||||
| **(deprecated)** rootFolderId | string | '-root-' | The ID of the root folder node.
|
| **(deprecated)** rootFolderId | string | '-root-' | The ID of the root folder node. **Deprecated in 1.6.2: use parentId instead.** |
|
||||||
**Deprecated in 1.6.2: use parentId instead.** |
|
|
||||||
| parentId | string | empty | The ID of the root. It can be the nodeId if you are using the upload for the Content Service or taskId/processId for the Process Service. |
|
| parentId | string | empty | The ID of the root. It can be the nodeId if you are using the upload for the Content Service or taskId/processId for the Process Service. |
|
||||||
| versioning | boolean | false | Versioning false is the default uploader behaviour and it renames the file using an integer suffix if there is a name clash. Versioning true to indicate that a major version should be created |
|
| versioning | boolean | false | Versioning false is the default uploader behaviour and it renames the file using an integer suffix if there is a name clash. Versioning true to indicate that a major version should be created |
|
||||||
| staticTitle | string | (predefined) | define the text of the upload button |
|
| staticTitle | string | (predefined) | define the text of the upload button |
|
||||||
| **(deprecated)** disableWithNoPermission ***use node permission directive from core instead*** | boolean | false | If the value is true and the user doesn't have the permission to delete the node the button will be disabled |
|
| **(deprecated)** disableWithNoPermission ***use node permission directive from core instead*** | boolean | false | If the value is true and the user doesn't have the permission to delete the node the button will be disabled |
|
||||||
| tooltip | string | | Custom tooltip |
|
| tooltip | string | | Custom tooltip |
|
||||||
|
|
||||||
### Events
|
#### Events
|
||||||
|
|
||||||
| Name | Description |
|
| Name | Description |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
| onSuccess | Raised when the file is uploaded |
|
| onSuccess | Raised when the file is uploaded |
|
||||||
|
|
||||||
### Advanced usage
|
### Details
|
||||||
|
|
||||||
#### How to show notification message with no permission
|
#### How to show notification message with no permission
|
||||||
|
|
||||||
@@ -144,9 +120,11 @@ The UploadButtonComponent provides the property disableWithNoPermission that can
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||
## UploadDragAreaComponent
|
## Upload Drag Area Component
|
||||||
|
|
||||||
This component provides a drag and drop area to upload files to Alfresco.
|
Adds a drag and drop area to upload files to Alfresco.
|
||||||
|
|
||||||
|
### Basic Usage
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-upload-drag-area (onSuccess)="customMethod($event)">
|
<adf-upload-drag-area (onSuccess)="customMethod($event)">
|
||||||
@@ -167,7 +145,7 @@ export class AppComponent {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
### Properties
|
#### Properties
|
||||||
|
|
||||||
| Name | Type | Default | Description |
|
| Name | Type | Default | Description |
|
||||||
| --- | --- | --- | --- |
|
| --- | --- | --- | --- |
|
||||||
@@ -178,32 +156,55 @@ export class AppComponent {
|
|||||||
| **(deprecated)** currentFolderPath | string | '/' | define the path where the files are uploaded. **Deprecated in 1.6.0: use rootFolderId instead.** |
|
| **(deprecated)** currentFolderPath | string | '/' | define the path where the files are uploaded. **Deprecated in 1.6.0: use rootFolderId instead.** |
|
||||||
| versioning | boolean | false | Versioning false is the default uploader behaviour and it renames the file using an integer suffix if there is a name clash. Versioning true to indicate that a major version should be created |
|
| versioning | boolean | false | Versioning false is the default uploader behaviour and it renames the file using an integer suffix if there is a name clash. Versioning true to indicate that a major version should be created |
|
||||||
|
|
||||||
### Events
|
#### Events
|
||||||
|
|
||||||
| Name | Description |
|
| Name | Description |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
| onSuccess | Raised when the file is uploaded |
|
| onSuccess | Raised when the file is uploaded |
|
||||||
|
|
||||||
## FileUploadingDialogComponent
|
## File Uploading Dialog Component
|
||||||
|
|
||||||
This component provides a dialog that shows all the files uploaded with upload button or drag & drop area components.
|
Shows a dialog listing all the files uploaded with the Upload Button or Drag Area components.
|
||||||
This component should be used in combination with upload button or drag & drop area.
|
|
||||||
|
### Basic Usage
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<file-uploading-dialog></file-uploading-dialog>
|
<file-uploading-dialog></file-uploading-dialog>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Properties
|
#### Properties
|
||||||
|
|
||||||
| Name | Type | Default | Description |
|
| Name | Type | Default | Description |
|
||||||
| --- | --- | --- | --- |
|
| --- | --- | --- | --- |
|
||||||
| position | string | 'right' | Dialog position. Accepted values are 'left' or 'right' |
|
| position | string | 'right' | Dialog position. Accepted values are 'left' or 'right' |
|
||||||
|
|
||||||
## UploadService
|
### Details
|
||||||
|
|
||||||
|
This component should be used in combination with upload button or drag & drop area.
|
||||||
|
|
||||||
|
## Upload Service
|
||||||
|
|
||||||
Provides access to various APIs related to file upload features.
|
Provides access to various APIs related to file upload features.
|
||||||
|
|
||||||
### Ignore list configuration
|
### Basic Usage
|
||||||
|
|
||||||
|
#### Events
|
||||||
|
|
||||||
|
| Name | Type | Description |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| queueChanged | FileModel[] | Raised every time the file queue changes. |
|
||||||
|
| fileUpload | FileUploadEvent | Raised every time a File model changes its state. |
|
||||||
|
| fileUploadStarting | FileUploadEvent | Raised when upload starts. |
|
||||||
|
| fileUploadCancelled | FileUploadEvent | Raised when upload gets cancelled by user. |
|
||||||
|
| fileUploadProgress | FileUploadEvent | Raised during file upload process and contains the current progress for the particular File model. |
|
||||||
|
| fileUploadAborted | FileUploadEvent | Raised when file upload gets aborted by the server. |
|
||||||
|
| fileUploadError | FileUploadEvent | Raised when an error occurs to file upload. |
|
||||||
|
| fileUploadComplete | FileUploadCompleteEvent | Raised when file upload is complete. |
|
||||||
|
| fileUploadDelete | FileUploadDeleteEvent | Raised when uploaded file is removed from server. |
|
||||||
|
|
||||||
|
### Details
|
||||||
|
|
||||||
|
#### Ignore list configuration
|
||||||
|
|
||||||
Is possible add an ignore list for files that you don't want to allow upload on your CS.
|
Is possible add an ignore list for files that you don't want to allow upload on your CS.
|
||||||
The configuration of this service is saved in the ***app.config.json file***.If you want more details about the configuration service follow this [link](https://github.com/Alfresco/alfresco-ng2-components/tree/master/ng2-components/ng2-alfresco-core#appconfigservice).
|
The configuration of this service is saved in the ***app.config.json file***.If you want more details about the configuration service follow this [link](https://github.com/Alfresco/alfresco-ng2-components/tree/master/ng2-components/ng2-alfresco-core#appconfigservice).
|
||||||
@@ -228,21 +229,22 @@ Note:
|
|||||||
- Standard glob patterns work.
|
- Standard glob patterns work.
|
||||||
- You can end patterns with a forward slash / to specify a directory.
|
- You can end patterns with a forward slash / to specify a directory.
|
||||||
|
|
||||||
### Events
|
## Project Information
|
||||||
|
|
||||||
| Name | Type | Description |
|
### Prerequisites
|
||||||
| --- | --- | --- |
|
|
||||||
| queueChanged | FileModel[] | Raised every time the file queue changes. |
|
|
||||||
| fileUpload | FileUploadEvent | Raised every time a File model changes its state. |
|
|
||||||
| fileUploadStarting | FileUploadEvent | Raised when upload starts. |
|
|
||||||
| fileUploadCancelled | FileUploadEvent | Raised when upload gets cancelled by user. |
|
|
||||||
| fileUploadProgress | FileUploadEvent | Raised during file upload process and contains the current progress for the particular File model. |
|
|
||||||
| fileUploadAborted | FileUploadEvent | Raised when file upload gets aborted by the server. |
|
|
||||||
| fileUploadError | FileUploadEvent | Raised when an error occurs to file upload. |
|
|
||||||
| fileUploadComplete | FileUploadCompleteEvent | Raised when file upload is complete. |
|
|
||||||
| fileUploadDelete | FileUploadDeleteEvent | Raised when uploaded file is removed from server. |
|
|
||||||
|
|
||||||
## Build from sources
|
Before you start using this development framework, make sure you have installed all required software and done all the
|
||||||
|
necessary configuration [prerequisites](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
|
||||||
|
|
||||||
|
> If you plan using this component with projects generated by Angular CLI, please refer to the following article: [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
|
||||||
|
|
||||||
|
### Install
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm install ng2-alfresco-upload
|
||||||
|
```
|
||||||
|
|
||||||
|
### Build from sources
|
||||||
|
|
||||||
You can build component from sources with the following commands:
|
You can build component from sources with the following commands:
|
||||||
|
|
||||||
@@ -254,7 +256,7 @@ npm run build
|
|||||||
> The `build` task rebuilds all the code, runs tslint, license checks
|
> The `build` task rebuilds all the code, runs tslint, license checks
|
||||||
> and other quality check tools before performing unit testing.
|
> and other quality check tools before performing unit testing.
|
||||||
|
|
||||||
## NPM scripts
|
### NPM scripts
|
||||||
|
|
||||||
| Command | Description |
|
| Command | Description |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
@@ -263,7 +265,7 @@ npm run build
|
|||||||
| npm run test-browser | Run unit tests in the browser
|
| npm run test-browser | Run unit tests in the browser
|
||||||
| npm run coverage | Run unit tests and display code coverage report |
|
| npm run coverage | Run unit tests and display code coverage report |
|
||||||
|
|
||||||
## Demo
|
### Demo
|
||||||
|
|
||||||
Please check the demo folder for a demo project
|
Please check the demo folder for a demo project
|
||||||
|
|
||||||
@@ -273,6 +275,6 @@ npm install
|
|||||||
npm start
|
npm start
|
||||||
```
|
```
|
||||||
|
|
||||||
## License
|
### License
|
||||||
|
|
||||||
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
|
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
|
||||||
|
@@ -1,42 +1,36 @@
|
|||||||
# Alfresco User Info Component
|
# Alfresco User Info library
|
||||||
|
|
||||||
|
Contains the Alfresco User Info component.
|
||||||
|
|
||||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
||||||
|
|
||||||
<!-- toc -->
|
<!-- toc -->
|
||||||
|
|
||||||
- [Prerequisites](#prerequisites)
|
- [Alfresco User Info component](#alfresco-user-info-component)
|
||||||
- [Install](#install)
|
* [Basic usage](#basic-usage)
|
||||||
- [Basic usage](#basic-usage)
|
+ [Properties](#properties)
|
||||||
* [Properties](#properties)
|
* [Details](#details)
|
||||||
- [Build from sources](#build-from-sources)
|
- [Project Information](#project-information)
|
||||||
- [NPM scripts](#npm-scripts)
|
* [Prerequisites](#prerequisites)
|
||||||
- [Demo](#demo)
|
* [Install](#install)
|
||||||
- [License](#license)
|
* [Build from sources](#build-from-sources)
|
||||||
|
* [NPM scripts](#npm-scripts)
|
||||||
|
* [Demo](#demo)
|
||||||
|
* [License](#license)
|
||||||
|
|
||||||
<!-- tocstop -->
|
<!-- tocstop -->
|
||||||
|
|
||||||
<!-- markdown-toc end -->
|
<!-- markdown-toc end -->
|
||||||
|
|
||||||
## Prerequisites
|
## Alfresco User Info component
|
||||||
|
|
||||||
Before you start using this development framework, make sure you have installed all required software and done all the
|
### Basic usage
|
||||||
necessary configuration [prerequisites](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
|
|
||||||
|
|
||||||
> If you plan using this component with projects generated by Angular CLI, please refer to the following article: [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
|
|
||||||
|
|
||||||
## Install
|
|
||||||
|
|
||||||
```sh
|
|
||||||
npm install ng2-alfresco-userinfo
|
|
||||||
```
|
|
||||||
|
|
||||||
## Basic usage
|
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-userinfo></adf-userinfo>
|
<adf-userinfo></adf-userinfo>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Properties
|
#### Properties
|
||||||
|
|
||||||
| Name | Type | Default | Description |
|
| Name | Type | Default | Description |
|
||||||
| --- | --- | --- | --- |
|
| --- | --- | --- | --- |
|
||||||
@@ -46,10 +40,27 @@ npm install ng2-alfresco-userinfo
|
|||||||
| menuPositionY | string | | Custom choice for opening the menu bottom : `above` or `below` |
|
| menuPositionY | string | | Custom choice for opening the menu bottom : `above` or `below` |
|
||||||
| fallBackThumbnailImage | string | (alfresco image) | Fallback image for profile when thumbnail is missing|
|
| fallBackThumbnailImage | string | (alfresco image) | Fallback image for profile when thumbnail is missing|
|
||||||
|
|
||||||
|
### Details
|
||||||
|
|
||||||
This will show a round icon with user and on click some user information.
|
This will show a round icon with user and on click some user information.
|
||||||
If user is logged in with ECM and BPM the ECM image will be shown.
|
If user is logged in with ECM and BPM the ECM image will be shown.
|
||||||
|
|
||||||
## Build from sources
|
## Project Information
|
||||||
|
|
||||||
|
### Prerequisites
|
||||||
|
|
||||||
|
Before you start using this development framework, make sure you have installed all required software and done all the
|
||||||
|
necessary configuration [prerequisites](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
|
||||||
|
|
||||||
|
> If you plan using this component with projects generated by Angular CLI, please refer to the following article: [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
|
||||||
|
|
||||||
|
### Install
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm install ng2-alfresco-userinfo
|
||||||
|
```
|
||||||
|
|
||||||
|
### Build from sources
|
||||||
|
|
||||||
You can build component from sources with the following commands:
|
You can build component from sources with the following commands:
|
||||||
|
|
||||||
@@ -61,7 +72,7 @@ npm run build
|
|||||||
> The `build` task rebuilds all the code, runs tslint, license checks
|
> The `build` task rebuilds all the code, runs tslint, license checks
|
||||||
> and other quality check tools before performing unit testing.
|
> and other quality check tools before performing unit testing.
|
||||||
|
|
||||||
## NPM scripts
|
### NPM scripts
|
||||||
|
|
||||||
| Command | Description |
|
| Command | Description |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
@@ -70,7 +81,7 @@ npm run build
|
|||||||
| npm run test-browser | Run unit tests in the browser
|
| npm run test-browser | Run unit tests in the browser
|
||||||
| npm run coverage | Run unit tests and display code coverage report |
|
| npm run coverage | Run unit tests and display code coverage report |
|
||||||
|
|
||||||
## Demo
|
### Demo
|
||||||
|
|
||||||
Please check the demo folder for a demo project
|
Please check the demo folder for a demo project
|
||||||
|
|
||||||
@@ -80,6 +91,6 @@ npm install
|
|||||||
npm start
|
npm start
|
||||||
```
|
```
|
||||||
|
|
||||||
## License
|
### License
|
||||||
|
|
||||||
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
|
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
|
||||||
|
@@ -1,42 +1,85 @@
|
|||||||
# Alfresco File Viewer Component
|
# Alfresco File Viewer library
|
||||||
|
|
||||||
|
Contains the Alfresco Viewer component.
|
||||||
|
|
||||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
||||||
|
|
||||||
<!-- toc -->
|
<!-- toc -->
|
||||||
|
|
||||||
- [Prerequisites](#prerequisites)
|
- [Alfresco Viewer component](#alfresco-viewer-component)
|
||||||
- [Install](#install)
|
* [Basic usage](#basic-usage)
|
||||||
* [Configuring PDF.js library](#configuring-pdfjs-library)
|
+ [Properties](#properties)
|
||||||
- [Basic usage](#basic-usage)
|
* [Details](#details)
|
||||||
- [Properties](#properties)
|
+ [Supported file formats](#supported-file-formats)
|
||||||
- [Supported file formats](#supported-file-formats)
|
+ [PDF Conversion](#pdf-conversion)
|
||||||
- [PDF Conversion](#pdf-conversion)
|
+ [Configuring PDF.js library](#configuring-pdfjs-library)
|
||||||
- [Custom extension handler](#custom-extension-handler)
|
+ [Custom extension handler](#custom-extension-handler)
|
||||||
- [Build from sources](#build-from-sources)
|
- [Project Information](#project-information)
|
||||||
- [NPM scripts](#npm-scripts)
|
* [Prerequisites](#prerequisites)
|
||||||
- [Demo](#demo)
|
* [Install](#install)
|
||||||
- [License](#license)
|
* [Build from sources](#build-from-sources)
|
||||||
|
* [NPM scripts](#npm-scripts)
|
||||||
|
* [Demo](#demo)
|
||||||
|
* [License](#license)
|
||||||
|
|
||||||
<!-- tocstop -->
|
<!-- tocstop -->
|
||||||
|
|
||||||
<!-- markdown-toc end -->
|
<!-- markdown-toc end -->
|
||||||
|
|
||||||
|
## Alfresco Viewer component
|
||||||
|
|
||||||
See it live: [Viewer Quickstart](https://embed.plnkr.co/iTuG1lFIXfsP95l6bDW6/)
|
See it live: [Viewer Quickstart](https://embed.plnkr.co/iTuG1lFIXfsP95l6bDW6/)
|
||||||
|
|
||||||
## Prerequisites
|
### Basic usage
|
||||||
|
|
||||||
Before you start using this development framework, make sure you have installed all required software and done all the
|
Using with node id:
|
||||||
necessary configuration [prerequisites](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
|
|
||||||
|
|
||||||
> If you plan using this component with projects generated by Angular CLI, please refer to the following article: [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
|
```html
|
||||||
|
<adf-viewer
|
||||||
## Install
|
[showViewer]="true"
|
||||||
|
[overlayMode]="true"
|
||||||
```sh
|
[fileNodeId]="'d367023a-7ebe-4f3a-a7d0-4f27c43f1045'">
|
||||||
npm install ng2-alfresco-viewer
|
</adf-viewer>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Configuring PDF.js library
|
Using with file url:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<adf-viewer
|
||||||
|
[overlayMode]="true"
|
||||||
|
[urlFile]="'filename.pdf'">
|
||||||
|
</adf-viewer>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Properties
|
||||||
|
|
||||||
|
| Attribute | Options | Default | Description |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| fileNodeId | string | | Node Id of the file to load |
|
||||||
|
| urlFile | string | | If you want to load an external file that does not come from ECM you can use this Url where to load the file |
|
||||||
|
| urlBlob | Blob | | If you want to load a Blob File |
|
||||||
|
| overlayMode | boolean | false | If `true` show the Viewer full page over the present content otherwise will fit the parent div |
|
||||||
|
| showViewer | boolean | true | Hide or show the viewer |
|
||||||
|
| showToolbar | boolean | true | Hide or show the toolbars |
|
||||||
|
| displayName | string | | You can specify the name of the file |
|
||||||
|
|
||||||
|
### Details
|
||||||
|
|
||||||
|
#### Supported file formats
|
||||||
|
|
||||||
|
| Type | Extension |
|
||||||
|
| --- | --- |
|
||||||
|
| Media | wav, Mp3, Mp4, WebM, Ogv |
|
||||||
|
| Images | png, jpg, jpeg, gif, bmp |
|
||||||
|
| Text | pdf, txt |
|
||||||
|
|
||||||
|
#### PDF Conversion
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
Note for unsupported extensions the viewer will offer the possibility to convert to PDF if that kind of extension is supported by the [content service renditions service](https://community.alfresco.com/docs/DOC-5879-rendition-service)
|
||||||
|
|
||||||
|
#### Configuring PDF.js library
|
||||||
|
|
||||||
In order to configure your webpack-enabled application with the PDF.js library please follow the next steps.
|
In order to configure your webpack-enabled application with the PDF.js library please follow the next steps.
|
||||||
|
|
||||||
@@ -73,54 +116,7 @@ new CopyWebpackPlugin([
|
|||||||
|
|
||||||
The Viewer component now should be able displaying PDF files.
|
The Viewer component now should be able displaying PDF files.
|
||||||
|
|
||||||
## Basic usage
|
#### Custom extension handler
|
||||||
|
|
||||||
Using with node id:
|
|
||||||
|
|
||||||
```html
|
|
||||||
<adf-viewer
|
|
||||||
[showViewer]="true"
|
|
||||||
[overlayMode]="true"
|
|
||||||
[fileNodeId]="'d367023a-7ebe-4f3a-a7d0-4f27c43f1045'">
|
|
||||||
</adf-viewer>
|
|
||||||
```
|
|
||||||
|
|
||||||
Using with file url:
|
|
||||||
|
|
||||||
```html
|
|
||||||
<adf-viewer
|
|
||||||
[overlayMode]="true"
|
|
||||||
[urlFile]="'filename.pdf'">
|
|
||||||
</adf-viewer>
|
|
||||||
```
|
|
||||||
|
|
||||||
## Properties
|
|
||||||
|
|
||||||
| Attribute | Options | Default | Description |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| fileNodeId | string | | Node Id of the file to load |
|
|
||||||
| urlFile | string | | If you want to load an external file that does not come from ECM you can use this Url where to load the file |
|
|
||||||
| urlBlob | Blob | | If you want to load a Blob File |
|
|
||||||
| overlayMode | boolean | false | If `true` show the Viewer full page over the present content otherwise will fit the parent div |
|
|
||||||
| showViewer | boolean | true | Hide or show the viewer |
|
|
||||||
| showToolbar | boolean | true | Hide or show the toolbars |
|
|
||||||
| displayName | string | | You can specify the name of the file |
|
|
||||||
|
|
||||||
## Supported file formats
|
|
||||||
|
|
||||||
| Type | Extension |
|
|
||||||
| --- | --- |
|
|
||||||
| Media | wav, Mp3, Mp4, WebM, Ogv |
|
|
||||||
| Images | png, jpg, jpeg, gif, bmp |
|
|
||||||
| Text | pdf, txt |
|
|
||||||
|
|
||||||
## PDF Conversion
|
|
||||||
|
|
||||||

|
|
||||||
|
|
||||||
Note for unsupported extensions the viewer will offer the possibility to convert to PDF if that kind of extension is supported by the [content service renditions service](https://community.alfresco.com/docs/DOC-5879-rendition-service)
|
|
||||||
|
|
||||||
## Custom extension handler
|
|
||||||
|
|
||||||
If you want to handle other file formats that are not yet supported by the ng2-alfresco-viewer you can define your own custom handler.
|
If you want to handle other file formats that are not yet supported by the ng2-alfresco-viewer you can define your own custom handler.
|
||||||
|
|
||||||
@@ -172,7 +168,22 @@ It is possible to define multiple `extension-viewer` templates:
|
|||||||
</adf-viewer>
|
</adf-viewer>
|
||||||
```
|
```
|
||||||
|
|
||||||
## Build from sources
|
## Project Information
|
||||||
|
|
||||||
|
### Prerequisites
|
||||||
|
|
||||||
|
Before you start using this development framework, make sure you have installed all required software and done all the
|
||||||
|
necessary configuration [prerequisites](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
|
||||||
|
|
||||||
|
> If you plan using this component with projects generated by Angular CLI, please refer to the following article: [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
|
||||||
|
|
||||||
|
### Install
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm install ng2-alfresco-viewer
|
||||||
|
```
|
||||||
|
|
||||||
|
### Build from sources
|
||||||
|
|
||||||
You can build component from sources with the following commands:
|
You can build component from sources with the following commands:
|
||||||
|
|
||||||
@@ -184,7 +195,7 @@ npm run build
|
|||||||
> The `build` task rebuilds all the code, runs tslint, license checks
|
> The `build` task rebuilds all the code, runs tslint, license checks
|
||||||
> and other quality check tools before performing unit testing.
|
> and other quality check tools before performing unit testing.
|
||||||
|
|
||||||
## NPM scripts
|
### NPM scripts
|
||||||
|
|
||||||
| Command | Description |
|
| Command | Description |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
@@ -193,7 +204,7 @@ npm run build
|
|||||||
| npm run test-browser | Run unit tests in the browser
|
| npm run test-browser | Run unit tests in the browser
|
||||||
| npm run coverage | Run unit tests and display code coverage report |
|
| npm run coverage | Run unit tests and display code coverage report |
|
||||||
|
|
||||||
## Demo
|
### Demo
|
||||||
|
|
||||||
Please check the demo folder for a demo project
|
Please check the demo folder for a demo project
|
||||||
|
|
||||||
@@ -203,6 +214,6 @@ npm install
|
|||||||
npm start
|
npm start
|
||||||
```
|
```
|
||||||
|
|
||||||
## License
|
### License
|
||||||
|
|
||||||
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
|
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
|
||||||
|
@@ -1,39 +1,33 @@
|
|||||||
# Alfresco Webscript Component
|
# Alfresco Webscript library
|
||||||
|
|
||||||
|
Contains the Alfresco Webscript Get component.
|
||||||
|
|
||||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
||||||
|
|
||||||
<!-- toc -->
|
<!-- toc -->
|
||||||
|
|
||||||
- [Prerequisites](#prerequisites)
|
- [Alfresco Webscript Get component](#alfresco-webscript-get-component)
|
||||||
- [Install](#install)
|
* [Basic usage](#basic-usage)
|
||||||
- [Basic usage](#basic-usage)
|
+ [Properties](#properties)
|
||||||
- [Properties](#properties)
|
* [Details](#details)
|
||||||
- [Webscript View HTML example](#webscript-view-html-example)
|
+ [Webscript View HTML example](#webscript-view-html-example)
|
||||||
- [Webscript View DATATABLE example](#webscript-view-datatable-example)
|
+ [Webscript View DATATABLE example](#webscript-view-datatable-example)
|
||||||
- [Webscript View JSON example](#webscript-view-json-example)
|
+ [Webscript View JSON example](#webscript-view-json-example)
|
||||||
- [Build from sources](#build-from-sources)
|
- [Project Information](#project-information)
|
||||||
- [NPM scripts](#npm-scripts)
|
* [Prerequisites](#prerequisites)
|
||||||
- [Demo](#demo)
|
* [Install](#install)
|
||||||
- [License](#license)
|
* [Build from sources](#build-from-sources)
|
||||||
|
* [NPM scripts](#npm-scripts)
|
||||||
|
* [Demo](#demo)
|
||||||
|
* [License](#license)
|
||||||
|
|
||||||
<!-- tocstop -->
|
<!-- tocstop -->
|
||||||
|
|
||||||
<!-- markdown-toc end -->
|
<!-- markdown-toc end -->
|
||||||
|
|
||||||
## Prerequisites
|
## Alfresco Webscript Get component
|
||||||
|
|
||||||
Before you start using this development framework, make sure you have installed all required software and done all the
|
### Basic usage
|
||||||
necessary configuration [prerequisites](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
|
|
||||||
|
|
||||||
> If you plan using this component with projects generated by Angular CLI, please refer to the following article: [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
|
|
||||||
|
|
||||||
## Install
|
|
||||||
|
|
||||||
```sh
|
|
||||||
npm install ng2-alfresco-webscript
|
|
||||||
```
|
|
||||||
|
|
||||||
## Basic usage
|
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-webscript-get
|
<adf-webscript-get
|
||||||
@@ -71,7 +65,7 @@ export class AppComponent {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
## Properties
|
#### Properties
|
||||||
|
|
||||||
| Attribute | Type | Default | Description |
|
| Attribute | Type | Default | Description |
|
||||||
| --- | --- | --- | --- |
|
| --- | --- | --- | --- |
|
||||||
@@ -87,7 +81,9 @@ export class AppComponent {
|
|||||||
**contentType** {string}
|
**contentType** {string}
|
||||||
***data*** {string} data containing the plain value you get from the webscipt as an output parameter
|
***data*** {string} data containing the plain value you get from the webscipt as an output parameter
|
||||||
|
|
||||||
## Webscript View HTML example
|
### Details
|
||||||
|
|
||||||
|
#### Webscript View HTML example
|
||||||
|
|
||||||
This sample demonstrates how to implement a Webscript component that renders the HTML contents that come from a webscript
|
This sample demonstrates how to implement a Webscript component that renders the HTML contents that come from a webscript
|
||||||
This sample Web Scripts reside in your Alfresco Server. You can access the folder webscript here:
|
This sample Web Scripts reside in your Alfresco Server. You can access the folder webscript here:
|
||||||
@@ -106,7 +102,7 @@ This sample Web Scripts reside in your Alfresco Server. You can access the folde
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||
## Webscript View DATATABLE example
|
#### Webscript View DATATABLE example
|
||||||
|
|
||||||
This sample demonstrates how to implement a Webscript component that renders the JSON contents that come from a webscript
|
This sample demonstrates how to implement a Webscript component that renders the JSON contents that come from a webscript
|
||||||
|
|
||||||
@@ -163,7 +159,7 @@ that will render the following table
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||
## Webscript View JSON example
|
#### Webscript View JSON example
|
||||||
|
|
||||||
This sample demonstrates how to implement a Webscript component that renders the JSON contents that come from a webscript
|
This sample demonstrates how to implement a Webscript component that renders the JSON contents that come from a webscript
|
||||||
This sample Web Scripts reside in your Alfresco Server. You can access the folder webscript here:
|
This sample Web Scripts reside in your Alfresco Server. You can access the folder webscript here:
|
||||||
@@ -190,7 +186,22 @@ logDataExample(data) {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
## Build from sources
|
## Project Information
|
||||||
|
|
||||||
|
### Prerequisites
|
||||||
|
|
||||||
|
Before you start using this development framework, make sure you have installed all required software and done all the
|
||||||
|
necessary configuration [prerequisites](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
|
||||||
|
|
||||||
|
> If you plan using this component with projects generated by Angular CLI, please refer to the following article: [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
|
||||||
|
|
||||||
|
### Install
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm install ng2-alfresco-webscript
|
||||||
|
```
|
||||||
|
|
||||||
|
### Build from sources
|
||||||
|
|
||||||
You can build component from sources with the following commands:
|
You can build component from sources with the following commands:
|
||||||
|
|
||||||
@@ -202,7 +213,7 @@ npm run build
|
|||||||
> The `build` task rebuilds all the code, runs tslint, license checks
|
> The `build` task rebuilds all the code, runs tslint, license checks
|
||||||
> and other quality check tools before performing unit testing.
|
> and other quality check tools before performing unit testing.
|
||||||
|
|
||||||
## NPM scripts
|
### NPM scripts
|
||||||
|
|
||||||
| Command | Description |
|
| Command | Description |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
@@ -211,7 +222,7 @@ npm run build
|
|||||||
| npm run test-browser | Run unit tests in the browser
|
| npm run test-browser | Run unit tests in the browser
|
||||||
| npm run coverage | Run unit tests and display code coverage report |
|
| npm run coverage | Run unit tests and display code coverage report |
|
||||||
|
|
||||||
## Demo
|
### Demo
|
||||||
|
|
||||||
Please check the demo folder for a demo project
|
Please check the demo folder for a demo project
|
||||||
|
|
||||||
@@ -221,6 +232,6 @@ npm install
|
|||||||
npm start
|
npm start
|
||||||
```
|
```
|
||||||
|
|
||||||
## License
|
### License
|
||||||
|
|
||||||
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
|
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
|
||||||
|