mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-1586] Added new doc files for Document List library (#2427)
This commit is contained in:
Andy Stark
committed by
Eugenio Romano
Eugenio Romano
parent
12f5a219f5
commit
b2452f6097
24
docIndex.md
24
docIndex.md
@@ -349,6 +349,7 @@ for more information about installing and using the source code.
|
|||||||
- [*Highlight transform service](ng2-components/ng2-alfresco-core/src/services/highlight-transform.service.ts)
|
- [*Highlight transform service](ng2-components/ng2-alfresco-core/src/services/highlight-transform.service.ts)
|
||||||
- [*Log service](ng2-components/ng2-alfresco-core/src/services/log.service.ts)
|
- [*Log service](ng2-components/ng2-alfresco-core/src/services/log.service.ts)
|
||||||
- [*Nodes api service](ng2-components/ng2-alfresco-core/src/services/nodes-api.service.ts)
|
- [*Nodes api service](ng2-components/ng2-alfresco-core/src/services/nodes-api.service.ts)
|
||||||
|
- [*Page title service](ng2-components/ng2-alfresco-core/src/services/page-title.service.ts)
|
||||||
- [*People api service](ng2-components/ng2-alfresco-core/src/services/people-api.service.ts)
|
- [*People api service](ng2-components/ng2-alfresco-core/src/services/people-api.service.ts)
|
||||||
- [*Search api service](ng2-components/ng2-alfresco-core/src/services/search-api.service.ts)
|
- [*Search api service](ng2-components/ng2-alfresco-core/src/services/search-api.service.ts)
|
||||||
- [*Search service](ng2-components/ng2-alfresco-core/src/services/search.service.ts)
|
- [*Search service](ng2-components/ng2-alfresco-core/src/services/search.service.ts)
|
||||||
@@ -395,25 +396,18 @@ for more information about installing and using the source code.
|
|||||||
### Components
|
### Components
|
||||||
|
|
||||||
- [Breadcrumb component](docs/breadcrumb.component.md)
|
- [Breadcrumb component](docs/breadcrumb.component.md)
|
||||||
|
- [Dropdown breadcrumb component](docs/dropdown-breadcrumb.component.md)
|
||||||
|
- [Content action component](docs/content-action.component.md)
|
||||||
- [Document list component](docs/document-list.component.md)
|
- [Document list component](docs/document-list.component.md)
|
||||||
- [Sites dropdown component](docs/sites-dropdown.component.md)
|
- [Sites dropdown component](docs/sites-dropdown.component.md)
|
||||||
- [*Dropdown breadcrumb component](ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/dropdown-breadcrumb.component.ts)
|
|
||||||
- [*Content action list component](ng2-components/ng2-alfresco-documentlist/src/components/content-action/content-action-list.component.ts)
|
|
||||||
- [*Content action component](ng2-components/ng2-alfresco-documentlist/src/components/content-action/content-action.component.ts)
|
|
||||||
- [*Content column list component](ng2-components/ng2-alfresco-documentlist/src/components/content-column/content-column-list.component.ts)
|
|
||||||
- [*Content column component](ng2-components/ng2-alfresco-documentlist/src/components/content-column/content-column.component.ts)
|
|
||||||
- [*Content node selector component](ng2-components/ng2-alfresco-documentlist/src/components/content-node-selector/content-node-selector.component.ts)
|
- [*Content node selector component](ng2-components/ng2-alfresco-documentlist/src/components/content-node-selector/content-node-selector.component.ts)
|
||||||
|
|
||||||
### Directives
|
|
||||||
|
|
||||||
- [*Empty folder content directive](ng2-components/ng2-alfresco-documentlist/src/components/empty-folder/empty-folder-content.directive.ts)
|
|
||||||
|
|
||||||
### Services
|
### Services
|
||||||
|
|
||||||
|
- [Document actions service](docs/document-actions.service.md)
|
||||||
|
- [Folder actions service](docs/folder-actions.service.md)
|
||||||
- [*Content node selector service](ng2-components/ng2-alfresco-documentlist/src/components/content-node-selector/content-node-selector.service.ts)
|
- [*Content node selector service](ng2-components/ng2-alfresco-documentlist/src/components/content-node-selector/content-node-selector.service.ts)
|
||||||
- [*Document actions service](ng2-components/ng2-alfresco-documentlist/src/services/document-actions.service.ts)
|
|
||||||
- [*Document list service](ng2-components/ng2-alfresco-documentlist/src/services/document-list.service.ts)
|
- [*Document list service](ng2-components/ng2-alfresco-documentlist/src/services/document-list.service.ts)
|
||||||
- [*Folder actions service](ng2-components/ng2-alfresco-documentlist/src/services/folder-actions.service.ts)
|
|
||||||
- [*Node actions service](ng2-components/ng2-alfresco-documentlist/src/services/node-actions.service.ts)
|
- [*Node actions service](ng2-components/ng2-alfresco-documentlist/src/services/node-actions.service.ts)
|
||||||
<!-- ng2-alfresco-documentlist end -->
|
<!-- ng2-alfresco-documentlist end -->
|
||||||
|
|
||||||
@@ -546,19 +540,13 @@ for more information about installing and using the source code.
|
|||||||
- [Viewer component](docs/viewer.component.md)
|
- [Viewer component](docs/viewer.component.md)
|
||||||
- [*ImgViewer component](ng2-components/ng2-alfresco-viewer/src/components/imgViewer.component.ts)
|
- [*ImgViewer component](ng2-components/ng2-alfresco-viewer/src/components/imgViewer.component.ts)
|
||||||
- [*MediaPlayer component](ng2-components/ng2-alfresco-viewer/src/components/mediaPlayer.component.ts)
|
- [*MediaPlayer component](ng2-components/ng2-alfresco-viewer/src/components/mediaPlayer.component.ts)
|
||||||
- [*NotSupportedFormat component](ng2-components/ng2-alfresco-viewer/src/components/notSupportedFormat.component.ts)
|
|
||||||
- [*PdfViewer component](ng2-components/ng2-alfresco-viewer/src/components/pdfViewer.component.ts)
|
- [*PdfViewer component](ng2-components/ng2-alfresco-viewer/src/components/pdfViewer.component.ts)
|
||||||
- [*TxtViewer component](ng2-components/ng2-alfresco-viewer/src/components/txtViewer.component.ts)
|
- [*TxtViewer component](ng2-components/ng2-alfresco-viewer/src/components/txtViewer.component.ts)
|
||||||
- [*Pdf view component](ng2-components/ng2-alfresco-viewer/src/components/viewer-dialog/pdf-view/pdf-view.component.ts)
|
- [*Unknown format component](ng2-components/ng2-alfresco-viewer/src/components/unknown-format/unknown-format.component.ts)
|
||||||
- [*Viewer dialog component](ng2-components/ng2-alfresco-viewer/src/components/viewer-dialog/viewer-dialog.component.ts)
|
|
||||||
|
|
||||||
### Directives
|
### Directives
|
||||||
|
|
||||||
- [*Extension viewer directive](ng2-components/ng2-alfresco-viewer/src/directives/extension-viewer.directive.ts)
|
- [*Extension viewer directive](ng2-components/ng2-alfresco-viewer/src/directives/extension-viewer.directive.ts)
|
||||||
|
|
||||||
### Services
|
|
||||||
|
|
||||||
- [*Viewer service](ng2-components/ng2-alfresco-viewer/src/services/viewer.service.ts)
|
|
||||||
<!-- ng2-alfresco-viewer end -->
|
<!-- ng2-alfresco-viewer end -->
|
||||||
|
|
||||||
[(Back to Contents)](#contents)
|
[(Back to Contents)](#contents)
|
||||||
|
|||||||
@@ -4,18 +4,6 @@ Indicates the current position within a navigation hierarchy.
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
|
||||||
|
|
||||||
<!-- toc -->
|
|
||||||
|
|
||||||
- [Basic Usage](#basic-usage)
|
|
||||||
* [Properties](#properties)
|
|
||||||
* [Events](#events)
|
|
||||||
|
|
||||||
<!-- tocstop -->
|
|
||||||
|
|
||||||
<!-- markdown-toc end -->
|
|
||||||
|
|
||||||
## Basic Usage
|
## Basic Usage
|
||||||
|
|
||||||
```html
|
```html
|
||||||
@@ -39,3 +27,11 @@ Indicates the current position within a navigation hierarchy.
|
|||||||
| Name | Returned Type | Description |
|
| 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 |
|
| 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 |
|
||||||
|
|
||||||
|
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
|
||||||
|
<!-- seealso start -->
|
||||||
|
## See also
|
||||||
|
|
||||||
|
- [Document list component](document-list.component.md)
|
||||||
|
- [Dropdown breadcrumb component](dropdown-breadcrumb.component.md)
|
||||||
|
<!-- seealso end -->
|
||||||
264
docs/content-action.component.md
Normal file
264
docs/content-action.component.md
Normal file
@@ -0,0 +1,264 @@
|
|||||||
|
# Content Action component
|
||||||
|
|
||||||
|
Adds options to a Document List actions menu for a particular content type.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
||||||
|
|
||||||
|
<!-- toc -->
|
||||||
|
|
||||||
|
- [Basic Usage](#basic-usage)
|
||||||
|
* [Properties](#properties)
|
||||||
|
* [Events](#events)
|
||||||
|
- [Details](#details)
|
||||||
|
* [Built-in action examples](#built-in-action-examples)
|
||||||
|
+ [Delete - System handler combined with custom handler](#delete---system-handler-combined-with-custom-handler)
|
||||||
|
+ [Download](#download)
|
||||||
|
+ [Copy and move](#copy-and-move)
|
||||||
|
* [Error, Permission and Success callbacks](#error-permission-and-success-callbacks)
|
||||||
|
* [Customizing built-in actions](#customizing-built-in-actions)
|
||||||
|
- [See also](#see-also)
|
||||||
|
|
||||||
|
<!-- tocstop -->
|
||||||
|
|
||||||
|
<!-- markdown-toc end -->
|
||||||
|
|
||||||
|
## Basic Usage
|
||||||
|
|
||||||
|
```html
|
||||||
|
<adf-document-list ...>
|
||||||
|
<content-actions>
|
||||||
|
|
||||||
|
<!-- system handler -->
|
||||||
|
<content-action
|
||||||
|
icon="content_copy"
|
||||||
|
target="document"
|
||||||
|
title="copy"
|
||||||
|
permission="update"
|
||||||
|
[disableWithNoPermission]="true"
|
||||||
|
handler="copy">
|
||||||
|
</content-action>
|
||||||
|
|
||||||
|
<!-- custom handler -->
|
||||||
|
<content-action
|
||||||
|
target="document"
|
||||||
|
title="Custom action"
|
||||||
|
(execute)="myCustomAction1($event)">
|
||||||
|
</content-action>
|
||||||
|
|
||||||
|
<!-- combined handler -->
|
||||||
|
<content-action
|
||||||
|
target="document"
|
||||||
|
title="Delete with additional custom callback"
|
||||||
|
handler="delete"
|
||||||
|
permission="delete"
|
||||||
|
(execute)="myCustomActionAfterDelete($event)">
|
||||||
|
</content-action>
|
||||||
|
|
||||||
|
</content-actions>
|
||||||
|
...
|
||||||
|
</adf-document-list>
|
||||||
|
```
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export class MyView {
|
||||||
|
// ...
|
||||||
|
|
||||||
|
myCustomAction1(event) {
|
||||||
|
let entry = event.value.entry;
|
||||||
|
alert(`Custom document action for ${entry.name}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
myCustomActionAfterDelete(event) {
|
||||||
|
let entry = event.value.entry;
|
||||||
|
alert(`Custom callback after delete system action for ${entry.name}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Properties
|
||||||
|
|
||||||
|
| Name | Type | Default | Description |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| `target` | string | | "document" or "folder" |
|
||||||
|
| `title` | string | | The title of the action as shown in the menu |
|
||||||
|
| `icon` | string | | The name of the icon to display next to the menu command (can be left blank) |
|
||||||
|
| `handler` | string | | System type actions. Can be "delete", "download", "copy" or "move" |
|
||||||
|
| `permission` | string | | The name of the permission |
|
||||||
|
| `disabled` | boolean | | Is the menu item disabled?
|
||||||
|
| `disableWithNoPermission` | boolean | | Should this action be disabled in the menu if the user doesn't have permission for it? |
|
||||||
|
|
||||||
|
### Events
|
||||||
|
|
||||||
|
| Name | Handler | Description |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| `execute` | All | Emitted when user clicks on the action. For combined handlers see below |
|
||||||
|
| `permissionEvent` | All | Emitted when a permission error happens |
|
||||||
|
| `success` | copy, move, delete | Emitted on successful action with the success string message |
|
||||||
|
| `error` | copy, move | Emitted on unsuccessful action with the error event |
|
||||||
|
|
||||||
|
## Details
|
||||||
|
|
||||||
|
The document actions are rendered on a dropdown menu for each items of content. You can use the
|
||||||
|
`target` property to choose whether the action applies to folders or documents.
|
||||||
|
|
||||||
|
A number of built-in actions are defined to handle common use cases:
|
||||||
|
|
||||||
|
- **Download** (document)
|
||||||
|
- **Copy** (document, folder)
|
||||||
|
- **Move** (document, folder)
|
||||||
|
- **Delete** (document, folder)
|
||||||
|
|
||||||
|
You can use one of the built-in handlers by assigning its name to the `handler` property.
|
||||||
|
(The names are case-insensitive, so `handler="download"` and `handler="DOWNLOAD"`
|
||||||
|
will trigger the same action.) You can also add your own handler by implementing the
|
||||||
|
`execute` event. Note that you can use *both* a built-in handler and your own `execute`
|
||||||
|
function in the same action.
|
||||||
|
|
||||||
|
### Built-in action examples
|
||||||
|
|
||||||
|
#### Delete - System handler combined with custom handler
|
||||||
|
|
||||||
|
If you specify both `handler="delete"` and your own custom handler with
|
||||||
|
`(execute)="myCustomActionAfterDelete($event)"`, your handler will run after a delete completes
|
||||||
|
successfully. A delete operation is considered successful if there are no permission or
|
||||||
|
network-related errors for the delete request. You can avoid permission errors simply by disabling
|
||||||
|
an item for users who don't have permission to use it (set `disableWithNoPermission="true"`).
|
||||||
|
|
||||||
|
```html
|
||||||
|
<adf-document-list ...>
|
||||||
|
<content-actions>
|
||||||
|
|
||||||
|
<content-action
|
||||||
|
target="document"
|
||||||
|
title="Delete"
|
||||||
|
permission="delete"
|
||||||
|
disableWithNoPermission="true"
|
||||||
|
handler="delete">
|
||||||
|
</content-action>
|
||||||
|
|
||||||
|
</content-actions>
|
||||||
|
</adf-document-list>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
You can also implement the `permissionEvent` to handle permission errors
|
||||||
|
(to show the user a notification, for example). Subscribe to this event from your component
|
||||||
|
and use the [Notification service](notification.service.md) to show a message.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<adf-document-list ...>
|
||||||
|
<content-actions>
|
||||||
|
|
||||||
|
<content-action
|
||||||
|
target="document"
|
||||||
|
title="Delete"
|
||||||
|
permission="delete"
|
||||||
|
(permissionEvent)="onPermissionsFailed($event)"
|
||||||
|
handler="delete">
|
||||||
|
</content-action>
|
||||||
|
|
||||||
|
</content-actions>
|
||||||
|
</adf-document-list>
|
||||||
|
```
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export class MyComponent {
|
||||||
|
|
||||||
|
onPermissionsFailed(event: any) {
|
||||||
|
this.notificationService.openSnackMessage(`you don't have the ${event.permission} permission to ${event.action} the ${event.type} `, 4000);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#### Download
|
||||||
|
|
||||||
|
This action simply starts a download of the corresponding document file.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<adf-document-list ...>
|
||||||
|
<content-actions>
|
||||||
|
|
||||||
|
<content-action
|
||||||
|
target="document"
|
||||||
|
title="Download"
|
||||||
|
handler="download">
|
||||||
|
</content-action>
|
||||||
|
|
||||||
|
</content-actions>
|
||||||
|
</adf-document-list>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#### Copy and move
|
||||||
|
|
||||||
|
These actions show the destination chooser dialog for copy and move actions. By default,
|
||||||
|
the destination chooser lists all the folders of the subject item's parent. However, it won't
|
||||||
|
allow the item being copied/moved to be the destination if it is itself a folder.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```html
|
||||||
|
<adf-document-list ...>
|
||||||
|
<content-actions>
|
||||||
|
|
||||||
|
<content-action
|
||||||
|
icon="content_copy"
|
||||||
|
target="document"
|
||||||
|
title="copy"
|
||||||
|
permission="update"
|
||||||
|
[disableWithNoPermission]="true"
|
||||||
|
(error)="onContentActionError($event)"
|
||||||
|
(success)="onContentActionSuccess($event)"
|
||||||
|
(permissionEvent)="onPermissionsFailed($event)"
|
||||||
|
handler="copy">
|
||||||
|
</content-action>
|
||||||
|
|
||||||
|
<content-action
|
||||||
|
icon="redo"
|
||||||
|
target="folder"
|
||||||
|
title="move"
|
||||||
|
permission="update"
|
||||||
|
[disableWithNoPermission]="true"
|
||||||
|
(error)="onContentActionError($event)"
|
||||||
|
(success)="onContentActionSuccess($event)"
|
||||||
|
(permissionEvent)="onPermissionsFailed($event)"
|
||||||
|
handler="move">
|
||||||
|
</content-action>
|
||||||
|
|
||||||
|
</content-actions>
|
||||||
|
</adf-document-list>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Error, Permission and Success callbacks
|
||||||
|
|
||||||
|
Defining error, permission and success callbacks are pretty much the same as doing it for the delete permission handling.
|
||||||
|
|
||||||
|
- The error handler callback gets the error object which was raised
|
||||||
|
- The success callback's only parameter is the translatable success message string (could be used for showing in snackbar for example)
|
||||||
|
- The permissionEvent callback is the same as described above with the delete action
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### Customizing built-in actions
|
||||||
|
|
||||||
|
The built-in actions are defined in the [Document Actions service](document-actions.service.md) and
|
||||||
|
[Folder Actions service](folder-actions.service.md) but you can register new actions with these services
|
||||||
|
and override the default implementations. See the doc pages for
|
||||||
|
[Document Actions service](document-actions.service.md) and [Folder Actions service](folder-actions.service.md)
|
||||||
|
for details and examples.
|
||||||
|
|
||||||
|
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
|
||||||
|
<!-- seealso start -->
|
||||||
|
## See also
|
||||||
|
|
||||||
|
- [Document list component](document-list.component.md)
|
||||||
|
- [Document actions service](document-actions.service.md)
|
||||||
|
- [Folder actions service](folder-actions.service.md)
|
||||||
|
<!-- seealso end -->
|
||||||
BIN
docs/docassets/images/DropdownBreadcrumb.png
Normal file
BIN
docs/docassets/images/DropdownBreadcrumb.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
81
docs/document-actions.service.md
Normal file
81
docs/document-actions.service.md
Normal file
@@ -0,0 +1,81 @@
|
|||||||
|
# Document Actions service
|
||||||
|
|
||||||
|
Implements the document menu actions for the Document List component.
|
||||||
|
|
||||||
|
## Details
|
||||||
|
|
||||||
|
This service implements the built-in actions that can be applied to a document
|
||||||
|
shown in a [Document List component](document-list.component.md): **delete**,
|
||||||
|
**download**, **copy** and **move** (see the
|
||||||
|
[Content Action component](content-action.component.md) for further details and examples
|
||||||
|
of these menu items). However, you can also use the service to add extra actions or
|
||||||
|
replace the built-in ones with your own implementation.
|
||||||
|
|
||||||
|
### Registering an action
|
||||||
|
|
||||||
|
In the example below, a custom handler called `my-handler` is registered with the service.
|
||||||
|
This action will invoke the `myDocumentActionHandler` function each time it is selected
|
||||||
|
from the Document List menu.
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import { DocumentActionsService } from 'ng2-alfresco-documentlist';
|
||||||
|
|
||||||
|
export class MyView {
|
||||||
|
|
||||||
|
constructor(documentActions: DocumentActionsService) {
|
||||||
|
documentActions.setHandler(
|
||||||
|
'my-handler',
|
||||||
|
this.myDocumentActionHandler.bind(this)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
myDocumentActionHandler(obj: any) {
|
||||||
|
window.alert('my custom action handler');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
The action can then be used from the component in the usual way:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<adf-document-list ...>
|
||||||
|
<content-actions>
|
||||||
|
|
||||||
|
<content-action
|
||||||
|
target="document"
|
||||||
|
title="My action"
|
||||||
|
handler="my-handler">
|
||||||
|
</content-action>
|
||||||
|
|
||||||
|
</content-actions>
|
||||||
|
</adf-document-list>
|
||||||
|
```
|
||||||
|
|
||||||
|
You can also override a built-in handler (eg, 'download') with your own function:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export class MyView {
|
||||||
|
|
||||||
|
constructor(documentActions: DocumentActionsService) {
|
||||||
|
documentActions.setHandler(
|
||||||
|
'download',
|
||||||
|
this.customDownloadBehavior.bind(this)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
customDownloadBehavior(obj: any) {
|
||||||
|
window.alert('my custom download behavior');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
You will probably want to set up all your custom actions at the application root level or
|
||||||
|
with a custom application service.
|
||||||
|
|
||||||
|
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
|
||||||
|
<!-- seealso start -->
|
||||||
|
## See also
|
||||||
|
|
||||||
|
- [Content action component](content-action.component.md)
|
||||||
|
- [Folder actions service](folder-actions.service.md)
|
||||||
|
<!-- seealso end -->
|
||||||
@@ -11,6 +11,7 @@ Displays the documents from a repository.
|
|||||||
* [Events](#events)
|
* [Events](#events)
|
||||||
- [Details](#details)
|
- [Details](#details)
|
||||||
* [DOM Events](#dom-events)
|
* [DOM Events](#dom-events)
|
||||||
|
* [Pagination strategy](#pagination-strategy)
|
||||||
* [Data Sources](#data-sources)
|
* [Data Sources](#data-sources)
|
||||||
+ [Node ID](#node-id)
|
+ [Node ID](#node-id)
|
||||||
+ [Repository aliases](#repository-aliases)
|
+ [Repository aliases](#repository-aliases)
|
||||||
@@ -24,16 +25,6 @@ Displays the documents from a repository.
|
|||||||
* [Location Column](#location-column)
|
* [Location Column](#location-column)
|
||||||
* [Column Template](#column-template)
|
* [Column Template](#column-template)
|
||||||
* [Actions](#actions)
|
* [Actions](#actions)
|
||||||
* [Menu actions](#menu-actions)
|
|
||||||
* [Default action handlers](#default-action-handlers)
|
|
||||||
+ [Delete - System handler combined with custom handler](#delete---system-handler-combined-with-custom-handler)
|
|
||||||
+ [Delete - Show notification message with no permission](#delete---show-notification-message-with-no-permission)
|
|
||||||
+ [Delete - Disable button checking the permission](#delete---disable-button-checking-the-permission)
|
|
||||||
+ [Download](#download)
|
|
||||||
+ [Copy and move](#copy-and-move)
|
|
||||||
+ [Error, Permission and success callback](#error-permission-and-success-callback)
|
|
||||||
* [Folder actions](#folder-actions)
|
|
||||||
* [Context Menu](#context-menu)
|
|
||||||
* [Navigation mode](#navigation-mode)
|
* [Navigation mode](#navigation-mode)
|
||||||
- [Advanced usage and customization](#advanced-usage-and-customization)
|
- [Advanced usage and customization](#advanced-usage-and-customization)
|
||||||
* [Custom row filter](#custom-row-filter)
|
* [Custom row filter](#custom-row-filter)
|
||||||
@@ -42,8 +33,6 @@ Displays the documents from a repository.
|
|||||||
* [Custom row permissions style](#custom-row-permissions-style)
|
* [Custom row permissions style](#custom-row-permissions-style)
|
||||||
+ [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)
|
|
||||||
- [See also](#see-also)
|
|
||||||
|
|
||||||
<!-- tocstop -->
|
<!-- tocstop -->
|
||||||
|
|
||||||
@@ -674,289 +663,14 @@ In the Example below we will add the [ng2-alfresco-tag](https://www.npmjs.com/pa
|
|||||||
|
|
||||||
### Actions
|
### Actions
|
||||||
|
|
||||||
Properties:
|
You can add actions to a dropdown menu for each item shown in a Document List. Several
|
||||||
|
built-in actions are available (**delete**, **download**, **copy** and **move**) but
|
||||||
| Name | Type | Default | Description |
|
you can also define your own actions. See the [Content Action component](content-action.component.md)
|
||||||
| --- | --- | --- | --- |
|
for more information and examples.
|
||||||
| `target` | string | | "document" or "folder" |
|
|
||||||
| `title` | string | | The title of the action as shown in the menu |
|
You can also use the [Context Menu directive](context-menu.directive.md) from the
|
||||||
| `handler` | string | | System type actions. Can be "delete", "download", "copy" or "move" |
|
[ADF Core](https://www.npmjs.com/package/ng2-alfresco-core) library to show the
|
||||||
| `permission` | string | | The name of the permission |
|
actions you have defined in a context menu:
|
||||||
|
|
||||||
Events:
|
|
||||||
|
|
||||||
| Name | Handler | Description |
|
|
||||||
| --- | --- | --- |
|
|
||||||
| `execute` | All | Emitted when user clicks on the action. For combined handlers see below |
|
|
||||||
| `permissionEvent` | All | Emitted when a permission error happens |
|
|
||||||
| `success` | copy, move, delete | Emitted on successful action with the success string message |
|
|
||||||
| `error` | copy, move | Emitted on unsuccessful action with the error event |
|
|
||||||
|
|
||||||
DocumentList supports declarative actions for Documents and Folders.
|
|
||||||
Each action can be bound to either default out-of-the-box handler, to a custom behaviour or to both.
|
|
||||||
You can define both folder and document actions at the same time.
|
|
||||||
|
|
||||||
### Menu actions
|
|
||||||
|
|
||||||
```html
|
|
||||||
<adf-document-list ...>
|
|
||||||
<content-actions>
|
|
||||||
|
|
||||||
<!-- system handler -->
|
|
||||||
<content-action
|
|
||||||
icon="content_copy"
|
|
||||||
target="document"
|
|
||||||
title="copy"
|
|
||||||
permission="update"
|
|
||||||
[disableWithNoPermission]="true"
|
|
||||||
handler="copy">
|
|
||||||
</content-action>
|
|
||||||
|
|
||||||
<!-- custom handler -->
|
|
||||||
<content-action
|
|
||||||
target="document"
|
|
||||||
title="Custom action"
|
|
||||||
(execute)="myCustomAction1($event)">
|
|
||||||
</content-action>
|
|
||||||
|
|
||||||
<!-- combined handler -->
|
|
||||||
<content-action
|
|
||||||
target="document"
|
|
||||||
title="Delete with additional custom callback"
|
|
||||||
handler="delete"
|
|
||||||
permission="delete"
|
|
||||||
(execute)="myCustomActionAfterDelete($event)">
|
|
||||||
</content-action>
|
|
||||||
|
|
||||||
</content-actions>
|
|
||||||
</adf-document-list>
|
|
||||||
```
|
|
||||||
|
|
||||||
```ts
|
|
||||||
export class MyView {
|
|
||||||
// ...
|
|
||||||
|
|
||||||
myCustomAction1(event) {
|
|
||||||
let entry = event.value.entry;
|
|
||||||
alert(`Custom document action for ${entry.name}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
myCustomActionAfterDelete(event) {
|
|
||||||
let entry = event.value.entry;
|
|
||||||
alert(`Custom callback after delete system action for ${entry.name}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
All document actions are rendered as a dropdown menu as on the picture below:
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Default action handlers
|
|
||||||
|
|
||||||
The following action handlers are provided out-of-box:
|
|
||||||
|
|
||||||
- **Download** (document)
|
|
||||||
- **Copy** (document, folder)
|
|
||||||
- **Move** (document, folder)
|
|
||||||
- **Delete** (document, folder)
|
|
||||||
|
|
||||||
All system handler names are case-insensitive, `handler="download"` and `handler="DOWNLOAD"`
|
|
||||||
will trigger the same `download` action.
|
|
||||||
|
|
||||||
#### Delete - System handler combined with custom handler
|
|
||||||
|
|
||||||
If you specify both **handler="delete"** and your custom **(execute)="myCustomActionAfterDelete($event)"**, your callback will be invoked after a successful delete happened. A successful delete operation happens if there is neither permission error, nor other network related error for the delete operation request. For handling permission errors see the section below.
|
|
||||||
|
|
||||||
#### Delete - Show notification message with no permission
|
|
||||||
|
|
||||||
You can show a notification error when the user doesn't have the right permission to perform the action.
|
|
||||||
The ContentActionComponent provides the event permissionEvent that is raised when the permission specified in the permission property is missing
|
|
||||||
You can subscribe to this event from your component and use the NotificationService to show a message.
|
|
||||||
|
|
||||||
```html
|
|
||||||
<adf-document-list ...>
|
|
||||||
<content-actions>
|
|
||||||
|
|
||||||
<content-action
|
|
||||||
target="document"
|
|
||||||
title="Delete"
|
|
||||||
permission="delete"
|
|
||||||
(permissionEvent)="onPermissionsFailed($event)"
|
|
||||||
handler="delete">
|
|
||||||
</content-action>
|
|
||||||
|
|
||||||
</content-actions>
|
|
||||||
</adf-document-list>
|
|
||||||
```
|
|
||||||
|
|
||||||
```ts
|
|
||||||
export class MyComponent {
|
|
||||||
|
|
||||||
onPermissionsFailed(event: any) {
|
|
||||||
this.notificationService.openSnackMessage(`you don't have the ${event.permission} permission to ${event.action} the ${event.type} `, 4000);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#### Delete - Disable button checking the permission
|
|
||||||
|
|
||||||
You can easily disable a button when the user doesn't own the permission to perform the action related to the button.
|
|
||||||
The ContentActionComponent provides the property permission that must contain the permission to check and a property disableWithNoPermission that can be true if
|
|
||||||
you want to see the button disabled.
|
|
||||||
|
|
||||||
```html
|
|
||||||
<adf-document-list ...>
|
|
||||||
<content-actions>
|
|
||||||
|
|
||||||
<content-action
|
|
||||||
target="document"
|
|
||||||
title="Delete"
|
|
||||||
permission="delete"
|
|
||||||
disableWithNoPermission="true"
|
|
||||||
handler="delete">
|
|
||||||
</content-action>
|
|
||||||
|
|
||||||
</content-actions>
|
|
||||||
</adf-document-list>
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#### Download
|
|
||||||
|
|
||||||
Initiates download of the corresponding document file.
|
|
||||||
|
|
||||||
```html
|
|
||||||
<adf-document-list ...>
|
|
||||||
<content-actions>
|
|
||||||
|
|
||||||
<content-action
|
|
||||||
target="document"
|
|
||||||
title="Download"
|
|
||||||
handler="download">
|
|
||||||
</content-action>
|
|
||||||
|
|
||||||
</content-actions>
|
|
||||||
</adf-document-list>
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#### Copy and move
|
|
||||||
|
|
||||||
Shows the destination chooser dialog for copy and move actions. By default the destination chooser lists all the folders of the subject item's parent (except the selected item which is about to be copied/moved if it was a folder itself also).
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
```html
|
|
||||||
<adf-document-list ...>
|
|
||||||
<content-actions>
|
|
||||||
|
|
||||||
<content-action
|
|
||||||
icon="content_copy"
|
|
||||||
target="document"
|
|
||||||
title="copy"
|
|
||||||
permission="update"
|
|
||||||
[disableWithNoPermission]="true"
|
|
||||||
(error)="onContentActionError($event)"
|
|
||||||
(success)="onContentActionSuccess($event)"
|
|
||||||
(permissionEvent)="onPermissionsFailed($event)"
|
|
||||||
handler="copy">
|
|
||||||
</content-action>
|
|
||||||
|
|
||||||
<content-action
|
|
||||||
icon="redo"
|
|
||||||
target="folder"
|
|
||||||
title="move"
|
|
||||||
permission="update"
|
|
||||||
[disableWithNoPermission]="true"
|
|
||||||
(error)="onContentActionError($event)"
|
|
||||||
(success)="onContentActionSuccess($event)"
|
|
||||||
(permissionEvent)="onPermissionsFailed($event)"
|
|
||||||
handler="move">
|
|
||||||
</content-action>
|
|
||||||
|
|
||||||
</content-actions>
|
|
||||||
</adf-document-list>
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Error, Permission and success callback
|
|
||||||
|
|
||||||
Defining error, permission and success callbacks are pretty much the same as doing it for the delete permission handling.
|
|
||||||
|
|
||||||
- The error handler callback gets the error object which was raised
|
|
||||||
- The success callback's only parameter is the translatable success message string (could be used for showing in snackbar for example)
|
|
||||||
- The permissionEvent callback is the same as described above with the delete action
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Folder actions
|
|
||||||
|
|
||||||
Folder actions have the same declaration as document actions except ```target="folder"``` attribute value. You can define system, custom or combined handlers as well just as with the document actions.
|
|
||||||
|
|
||||||
```html
|
|
||||||
<adf-document-list ...>
|
|
||||||
<content-actions>
|
|
||||||
|
|
||||||
<!-- system handler -->
|
|
||||||
<content-action
|
|
||||||
target="folder"
|
|
||||||
title="Default folder action 1"
|
|
||||||
handler="system1">
|
|
||||||
</content-action>
|
|
||||||
|
|
||||||
<!-- custom handler -->
|
|
||||||
<content-action
|
|
||||||
target="folder"
|
|
||||||
title="Custom folder action"
|
|
||||||
(execute)="myFolderAction1($event)">
|
|
||||||
</content-action>
|
|
||||||
|
|
||||||
<!-- combined handler -->
|
|
||||||
<content-action
|
|
||||||
target="folder"
|
|
||||||
title="Delete with additional custom callback"
|
|
||||||
handler="delete"
|
|
||||||
(execute)="myCustomActionAfterDelete($event)">
|
|
||||||
</content-action>
|
|
||||||
|
|
||||||
</content-actions>
|
|
||||||
</adf-document-list>
|
|
||||||
```
|
|
||||||
|
|
||||||
```ts
|
|
||||||
export class MyView {
|
|
||||||
// ...
|
|
||||||
|
|
||||||
myFolderAction1(event) {
|
|
||||||
let entry = event.value.entry;
|
|
||||||
alert(`Custom folder action for ${entry.name}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
myCustomActionAfterDelete(event) {
|
|
||||||
let entry = event.value.entry;
|
|
||||||
alert(`Custom callback after delete system action for ${entry.name}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Context Menu
|
|
||||||
|
|
||||||
DocumentList also provides integration for 'Context Menu Service' from the
|
|
||||||
[ng2-alfresco-core](https://www.npmjs.com/package/ng2-alfresco-core) library.
|
|
||||||
|
|
||||||
You can automatically turn all menu actions (for the files and folders)
|
|
||||||
into context menu items like shown below:
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Enabling context menu is very simple:
|
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
@Component({
|
@Component({
|
||||||
@@ -970,7 +684,9 @@ export class MyView {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
This enables context menu items for documents and folders.
|
|
||||||
|
|
||||||
|
This single extra line in the template enables context menu items for documents and folders.
|
||||||
|
|
||||||
### Navigation mode
|
### Navigation mode
|
||||||
|
|
||||||
@@ -1066,10 +782,9 @@ _Note that for the sake of simplicity the example code below was reduced to the
|
|||||||
<adf-document-list
|
<adf-document-list
|
||||||
[imageResolver]="folderImageResolver">
|
[imageResolver]="folderImageResolver">
|
||||||
|
|
||||||
<content-columns>
|
<data-columns>
|
||||||
<content-column key="name" type="image"></content-column>
|
<data-column key="name" type="image"></data-column>
|
||||||
</content-columns>
|
</data-columns>
|
||||||
|
|
||||||
|
|
||||||
</adf-document-list>
|
</adf-document-list>
|
||||||
```
|
```
|
||||||
@@ -1129,32 +844,32 @@ Now you can declare columns and assign `desktop-only` class where needed:
|
|||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-document-list ...>
|
<adf-document-list ...>
|
||||||
<content-columns>
|
<data-columns>
|
||||||
|
|
||||||
<!-- always visible columns -->
|
<!-- always visible columns -->
|
||||||
|
|
||||||
<content-column key="$thumbnail" type="image"></content-column>
|
<data-column key="$thumbnail" type="image"></data-column>
|
||||||
<content-column
|
<data-column
|
||||||
title="Name"
|
title="Name"
|
||||||
key="name"
|
key="name"
|
||||||
class="full-width ellipsis-cell">
|
class="full-width ellipsis-cell">
|
||||||
</content-column>
|
</data-column>
|
||||||
|
|
||||||
<!-- desktop-only columns -->
|
<!-- desktop-only columns -->
|
||||||
|
|
||||||
<content-column
|
<data-column
|
||||||
title="Created by"
|
title="Created by"
|
||||||
key="createdByUser.displayName"
|
key="createdByUser.displayName"
|
||||||
class="desktop-only">
|
class="desktop-only">
|
||||||
</content-column>
|
</data-column>
|
||||||
<content-column
|
<data-column
|
||||||
title="Created on"
|
title="Created on"
|
||||||
key="createdAt"
|
key="createdAt"
|
||||||
type="date"
|
type="date"
|
||||||
format="medium"
|
format="medium"
|
||||||
class="desktop-only">
|
class="desktop-only">
|
||||||
</content-column>
|
</data-column>
|
||||||
</content-columns>
|
</data-columns>
|
||||||
</adf-document-list>
|
</adf-document-list>
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -1244,74 +959,16 @@ That will give the following output:
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Customizing default actions
|
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
|
||||||
|
<!-- seealso start -->
|
||||||
It is possible extending or replacing the list of available system actions for documents and folders.
|
|
||||||
Actions for the documents and folders can be accessed via the following services:
|
|
||||||
|
|
||||||
- `DocumentActionsService`, document action menu and quick document actions
|
|
||||||
- `FolderActionsService`, folder action menu and quick folder actions
|
|
||||||
|
|
||||||
Example below demonstrates how a new action handler can be registered with the
|
|
||||||
`DocumentActionsService`.
|
|
||||||
|
|
||||||
```html
|
|
||||||
<adf-document-list ...>
|
|
||||||
<content-actions>
|
|
||||||
|
|
||||||
<content-action
|
|
||||||
target="document"
|
|
||||||
title="My action"
|
|
||||||
handler="my-handler">
|
|
||||||
</content-action>
|
|
||||||
|
|
||||||
</content-actions>
|
|
||||||
</adf-document-list>
|
|
||||||
```
|
|
||||||
|
|
||||||
You register custom handler called `my-handler` that will be executing `myDocumentActionHandler`
|
|
||||||
function each time upon being invoked.
|
|
||||||
|
|
||||||
```ts
|
|
||||||
import { DocumentActionsService } from 'ng2-alfresco-documentlist';
|
|
||||||
|
|
||||||
export class MyView {
|
|
||||||
|
|
||||||
constructor(documentActions: DocumentActionsService) {
|
|
||||||
documentActions.setHandler(
|
|
||||||
'my-handler',
|
|
||||||
this.myDocumentActionHandler.bind(this)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
myDocumentActionHandler(obj: any) {
|
|
||||||
window.alert('my custom action handler');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
The same approach allows changing the way out-of-box action handlers behave.
|
|
||||||
Registering custom action with the name `download` replaces default one:
|
|
||||||
|
|
||||||
```ts
|
|
||||||
export class MyView {
|
|
||||||
|
|
||||||
constructor(documentActions: DocumentActionsService) {
|
|
||||||
documentActions.setHandler(
|
|
||||||
'download',
|
|
||||||
this.customDownloadBehavior.bind(this)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
customDownloadBehavior(obj: any) {
|
|
||||||
window.alert('my custom download behavior');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
Typically you may want populating all your custom actions at the application root level or
|
|
||||||
by means of custom application service.
|
|
||||||
|
|
||||||
## See also
|
## See also
|
||||||
|
|
||||||
- [Walkthrough: adding indicators to clearly highlight information about a node](metadata-indicators.md)
|
- [Datatable component](datatable.component.md)
|
||||||
|
- [Data column component](data-column.component.md)
|
||||||
|
- [Pagination component](pagination.component.md)
|
||||||
|
- [Sites dropdown component](sites-dropdown.component.md)
|
||||||
|
- [Metadata indicators](metadata-indicators.md)
|
||||||
|
- [Breadcrumb component](breadcrumb.component.md)
|
||||||
|
- [Content action component](content-action.component.md)
|
||||||
|
- [Dropdown breadcrumb component](dropdown-breadcrumb.component.md)
|
||||||
|
<!-- seealso end -->
|
||||||
37
docs/dropdown-breadcrumb.component.md
Normal file
37
docs/dropdown-breadcrumb.component.md
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
# Dropdown Breadcrumb Component
|
||||||
|
|
||||||
|
Indicates the current position within a navigation hierarchy using a dropdown menu.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Basic Usage
|
||||||
|
|
||||||
|
```html
|
||||||
|
<adf-dropdown-breadcrumb *ngIf="useDropdownBreadcrumb"
|
||||||
|
[target]="documentList"
|
||||||
|
[folderNode]="documentList.folderNode">
|
||||||
|
</adf-dropdown-breadcrumb>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 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. You can use i18n resource key for the property value. |
|
||||||
|
| rootId | string | (optional) The id of the root element. You can use this property to set a custom element the breadcrumb should start with. |
|
||||||
|
|
||||||
|
### 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 |
|
||||||
|
|
||||||
|
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
|
||||||
|
<!-- seealso start -->
|
||||||
|
## See also
|
||||||
|
|
||||||
|
- [Document list component](document-list.component.md)
|
||||||
|
- [Breadcrumb component](breadcrumb.component.md)
|
||||||
|
<!-- seealso end -->
|
||||||
81
docs/folder-actions.service.md
Normal file
81
docs/folder-actions.service.md
Normal file
@@ -0,0 +1,81 @@
|
|||||||
|
# Folder Actions service
|
||||||
|
|
||||||
|
Implements the folder menu actions for the Document List component.
|
||||||
|
|
||||||
|
## Details
|
||||||
|
|
||||||
|
This service implements the built-in actions that can be applied to a folder
|
||||||
|
shown in a [Document List component](document-list.component.md): **delete**,
|
||||||
|
**download**, **copy** and **move** (see the
|
||||||
|
[Content Action component](content-action.component.md) for further details and examples
|
||||||
|
of these menu items). However, you can also use the service to add extra actions or
|
||||||
|
replace the built-in ones with your own implementation.
|
||||||
|
|
||||||
|
### Registering an action
|
||||||
|
|
||||||
|
In the example below, a custom handler called `my-handler` is registered with the service.
|
||||||
|
This action will invoke the `myFolderActionHandler` function each time it is selected
|
||||||
|
from the Document List menu.
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import { FolderActionsService } from 'ng2-alfresco-documentlist';
|
||||||
|
|
||||||
|
export class MyView {
|
||||||
|
|
||||||
|
constructor(folderActions: FolderActionsService) {
|
||||||
|
folderActions.setHandler(
|
||||||
|
'my-handler',
|
||||||
|
this.myFolderActionHandler.bind(this)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
myFolderActionHandler(obj: any) {
|
||||||
|
window.alert('my custom action handler');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
The action can then be used from the component in the usual way:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<adf-document-list ...>
|
||||||
|
<content-actions>
|
||||||
|
|
||||||
|
<content-action
|
||||||
|
target="folder"
|
||||||
|
title="My action"
|
||||||
|
handler="my-handler">
|
||||||
|
</content-action>
|
||||||
|
|
||||||
|
</content-actions>
|
||||||
|
</adf-document-list>
|
||||||
|
```
|
||||||
|
|
||||||
|
You can also override a built-in handler (eg, 'download') with your own function:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export class MyView {
|
||||||
|
|
||||||
|
constructor(folderActions: FolderActionsService) {
|
||||||
|
folderActions.setHandler(
|
||||||
|
'download',
|
||||||
|
this.customDownloadBehavior.bind(this)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
customDownloadBehavior(obj: any) {
|
||||||
|
window.alert('my custom download behavior');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
You will probably want to set up all your custom actions at the application root level or
|
||||||
|
with a custom application service.
|
||||||
|
|
||||||
|
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
|
||||||
|
<!-- seealso start -->
|
||||||
|
## See also
|
||||||
|
|
||||||
|
- [Document actions service](document-actions.service.md)
|
||||||
|
- [Content action component](content-action.component.md)
|
||||||
|
<!-- seealso end -->
|
||||||
@@ -13,6 +13,7 @@
|
|||||||
"card-view-update.service": [],
|
"card-view-update.service": [],
|
||||||
"checklist.component": [],
|
"checklist.component": [],
|
||||||
"comments.component": [],
|
"comments.component": [],
|
||||||
|
"content-action.component": ["document-list.component", "document-actions.service", "folder-actions.service"],
|
||||||
"content.widget": [],
|
"content.widget": [],
|
||||||
"context-menu.directive": [],
|
"context-menu.directive": [],
|
||||||
"create-process-attachment.component": [],
|
"create-process-attachment.component": [],
|
||||||
@@ -23,14 +24,18 @@
|
|||||||
"pagination.component"
|
"pagination.component"
|
||||||
],
|
],
|
||||||
"diagram.component": [],
|
"diagram.component": [],
|
||||||
|
"document-actions.service": [],
|
||||||
"document-list.component": [
|
"document-list.component": [
|
||||||
"datatable.component",
|
"datatable.component",
|
||||||
"data-column.component",
|
"data-column.component",
|
||||||
"pagination.component",
|
"pagination.component",
|
||||||
|
"sites-dropdown.component",
|
||||||
"metadata-indicators"
|
"metadata-indicators"
|
||||||
],
|
],
|
||||||
|
"dropdown-breadcrumb.component": ["document-list.component", "breadcrumb.component"],
|
||||||
"extensibility": [],
|
"extensibility": [],
|
||||||
"file-uploading-dialog.component": [],
|
"file-uploading-dialog.component": [],
|
||||||
|
"folder-actions.service": ["document-actions.service"],
|
||||||
"form-list.component": [],
|
"form-list.component": [],
|
||||||
"form.component": [],
|
"form.component": [],
|
||||||
"form.service": [],
|
"form.service": [],
|
||||||
|
|||||||
@@ -3,5 +3,8 @@
|
|||||||
"context-menu-holder",
|
"context-menu-holder",
|
||||||
"data-column-list",
|
"data-column-list",
|
||||||
"card-view-[a-z]+item",
|
"card-view-[a-z]+item",
|
||||||
"card-view-item-dispatcher"
|
"card-view-item-dispatcher",
|
||||||
|
"content-column",
|
||||||
|
"content-action-list",
|
||||||
|
"empty-folder-content"
|
||||||
]
|
]
|
||||||
Reference in New Issue
Block a user