From b2452f609777663fe7977bd72ce0c982cbd602ca Mon Sep 17 00:00:00 2001 From: Andy Stark <30621568+therealandeeee@users.noreply.github.com> Date: Wed, 4 Oct 2017 16:56:32 +0100 Subject: [PATCH] [ADF-1586] Added new doc files for Document List library (#2427) --- docIndex.md | 24 +- docs/breadcrumb.component.md | 20 +- docs/content-action.component.md | 264 ++++++++++++ docs/docassets/images/DropdownBreadcrumb.png | Bin 0 -> 8898 bytes docs/document-actions.service.md | 81 ++++ docs/document-list.component.md | 413 ++----------------- docs/dropdown-breadcrumb.component.md | 37 ++ docs/folder-actions.service.md | 81 ++++ docs/seeAlsoGraph.json | 5 + docs/undocStoplist.json | 5 +- 10 files changed, 521 insertions(+), 409 deletions(-) create mode 100644 docs/content-action.component.md create mode 100644 docs/docassets/images/DropdownBreadcrumb.png create mode 100644 docs/document-actions.service.md create mode 100644 docs/dropdown-breadcrumb.component.md create mode 100644 docs/folder-actions.service.md diff --git a/docIndex.md b/docIndex.md index 1d803857a9..9431b75ff9 100644 --- a/docIndex.md +++ b/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) - [*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) +- [*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) - [*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) @@ -395,25 +396,18 @@ for more information about installing and using the source code. ### Components - [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) - [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) -### Directives - -- [*Empty folder content directive](ng2-components/ng2-alfresco-documentlist/src/components/empty-folder/empty-folder-content.directive.ts) - ### 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) -- [*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) -- [*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) @@ -546,19 +540,13 @@ for more information about installing and using the source code. - [Viewer component](docs/viewer.component.md) - [*ImgViewer component](ng2-components/ng2-alfresco-viewer/src/components/imgViewer.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) - [*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) -- [*Viewer dialog component](ng2-components/ng2-alfresco-viewer/src/components/viewer-dialog/viewer-dialog.component.ts) +- [*Unknown format component](ng2-components/ng2-alfresco-viewer/src/components/unknown-format/unknown-format.component.ts) ### Directives - [*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) [(Back to Contents)](#contents) diff --git a/docs/breadcrumb.component.md b/docs/breadcrumb.component.md index 185fb7c16b..e7a3f548b5 100644 --- a/docs/breadcrumb.component.md +++ b/docs/breadcrumb.component.md @@ -4,18 +4,6 @@ Indicates the current position within a navigation hierarchy. ![Breadcrumb](docassets/images/breadcrumb.png) - - - - -- [Basic Usage](#basic-usage) - * [Properties](#properties) - * [Events](#events) - - - - - ## Basic Usage ```html @@ -39,3 +27,11 @@ Indicates the current position within a navigation hierarchy. | 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 | + + + +## See also + +- [Document list component](document-list.component.md) +- [Dropdown breadcrumb component](dropdown-breadcrumb.component.md) + \ No newline at end of file diff --git a/docs/content-action.component.md b/docs/content-action.component.md new file mode 100644 index 0000000000..10576cb19d --- /dev/null +++ b/docs/content-action.component.md @@ -0,0 +1,264 @@ +# Content Action component + +Adds options to a Document List actions menu for a particular content type. + +![Document Actions](docassets/images/document-actions.png) + + + + + +- [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) + + + + + +## Basic Usage + +```html + + + + + + + + + + + + + + + + + ... + +``` + +```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 + + + + + + + + +``` + +![Delete disable action button](docassets/images/content-action-disable-delete-button.png) + +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 + + + + + + + + +``` + +```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 show notification message](docassets/images/content-action-notification-message.png) + +#### Download + +This action simply starts a download of the corresponding document file. + +```html + + + + + + + + +``` + +![Download document action](docassets/images/document-action-download.png) + +#### 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. + +![Copy/move dialog](docassets/images/document-action-copymovedialog.png) + +```html + + + + + + + + + + + +``` + +### 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 + +![Copy/move document action](docassets/images/document-action-copymove.png) + +### 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. + + + +## See also + +- [Document list component](document-list.component.md) +- [Document actions service](document-actions.service.md) +- [Folder actions service](folder-actions.service.md) + \ No newline at end of file diff --git a/docs/docassets/images/DropdownBreadcrumb.png b/docs/docassets/images/DropdownBreadcrumb.png new file mode 100644 index 0000000000000000000000000000000000000000..d543d4202e6bd3675ee5edaecf3737902d393c7f GIT binary patch literal 8898 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 G@&5o`?oxID literal 0 HcmV?d00001 diff --git a/docs/document-actions.service.md b/docs/document-actions.service.md new file mode 100644 index 0000000000..cfc3b3fc0a --- /dev/null +++ b/docs/document-actions.service.md @@ -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 + + + + + + + + +``` + +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. + + + +## See also + +- [Content action component](content-action.component.md) +- [Folder actions service](folder-actions.service.md) + \ No newline at end of file diff --git a/docs/document-list.component.md b/docs/document-list.component.md index 574aa38c5f..9b959b5dad 100644 --- a/docs/document-list.component.md +++ b/docs/document-list.component.md @@ -11,6 +11,7 @@ Displays the documents from a repository. * [Events](#events) - [Details](#details) * [DOM Events](#dom-events) + * [Pagination strategy](#pagination-strategy) * [Data Sources](#data-sources) + [Node ID](#node-id) + [Repository aliases](#repository-aliases) @@ -24,16 +25,6 @@ Displays the documents from a repository. * [Location Column](#location-column) * [Column Template](#column-template) * [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) - [Advanced usage and customization](#advanced-usage-and-customization) * [Custom row filter](#custom-row-filter) @@ -42,8 +33,6 @@ Displays the documents from a repository. * [Custom row permissions style](#custom-row-permissions-style) + [Examples](#examples) * [Custom 'empty folder' template](#custom-empty-folder-template) - * [Customizing default actions](#customizing-default-actions) -- [See also](#see-also) @@ -674,289 +663,14 @@ In the Example below we will add the [ng2-alfresco-tag](https://www.npmjs.com/pa ### Actions -Properties: - -| Name | Type | Default | Description | -| --- | --- | --- | --- | -| `target` | string | | "document" or "folder" | -| `title` | string | | The title of the action as shown in the menu | -| `handler` | string | | System type actions. Can be "delete", "download", "copy" or "move" | -| `permission` | string | | The name of the permission | - -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 - - - - - - - - - - - - - - - - - -``` - -```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: - -![Document Actions](docassets/images/document-actions.png) - -### 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 - - - - - - - - -``` - -```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 show notification message](docassets/images/content-action-notification-message.png) - -#### 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 - - - - - - - - -``` - -![Delete disable action button](docassets/images/content-action-disable-delete-button.png) - -#### Download - -Initiates download of the corresponding document file. - -```html - - - - - - - - -``` - -![Download document action](docassets/images/document-action-download.png) - -#### 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). - -![Copy/move dialog](docassets/images/document-action-copymovedialog.png) - -```html - - - - - - - - - - - -``` - -#### 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 - -![Copy/move document action](docassets/images/document-action-copymove.png) - -### 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 - - - - - - - - - - - - - - - - - -``` - -```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}`); - } -} -``` - -![Folder Actions](docassets/images/folder-actions.png) - -### 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: - -![Folder context menu](docassets/images/folder-context-menu.png) - -Enabling context menu is very simple: +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 +you can also define your own actions. See the [Content Action component](content-action.component.md) +for more information and examples. + +You can also use the [Context Menu directive](context-menu.directive.md) from the +[ADF Core](https://www.npmjs.com/package/ng2-alfresco-core) library to show the +actions you have defined in a context menu: ```ts @Component({ @@ -970,7 +684,9 @@ export class MyView { } ``` -This enables context menu items for documents and folders. +![Folder context menu](docassets/images/folder-context-menu.png) + +This single extra line in the template enables context menu items for documents and folders. ### Navigation mode @@ -1066,10 +782,9 @@ _Note that for the sake of simplicity the example code below was reduced to the - - - - + + + ``` @@ -1129,32 +844,32 @@ Now you can declare columns and assign `desktop-only` class where needed: ```html - + - - + - + - - - + - - + + ``` @@ -1244,74 +959,16 @@ That will give the following output: ![Custom empty folder](docassets/images/empty-folder-template-custom.png) -### Customizing default actions - -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 - - - - - - - - -``` - -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 -- [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) + \ No newline at end of file diff --git a/docs/dropdown-breadcrumb.component.md b/docs/dropdown-breadcrumb.component.md new file mode 100644 index 0000000000..0f0aba167b --- /dev/null +++ b/docs/dropdown-breadcrumb.component.md @@ -0,0 +1,37 @@ +# Dropdown Breadcrumb Component + +Indicates the current position within a navigation hierarchy using a dropdown menu. + +![Dropdown Breadcrumb screenshot](docassets/images/DropdownBreadcrumb.png) + +## Basic Usage + +```html + + +``` + +### 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 | + + + +## See also + +- [Document list component](document-list.component.md) +- [Breadcrumb component](breadcrumb.component.md) + \ No newline at end of file diff --git a/docs/folder-actions.service.md b/docs/folder-actions.service.md new file mode 100644 index 0000000000..456cb7dade --- /dev/null +++ b/docs/folder-actions.service.md @@ -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 + + + + + + + + +``` + +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. + + + +## See also + +- [Document actions service](document-actions.service.md) +- [Content action component](content-action.component.md) + \ No newline at end of file diff --git a/docs/seeAlsoGraph.json b/docs/seeAlsoGraph.json index cd4ff87801..d66d001daa 100644 --- a/docs/seeAlsoGraph.json +++ b/docs/seeAlsoGraph.json @@ -13,6 +13,7 @@ "card-view-update.service": [], "checklist.component": [], "comments.component": [], + "content-action.component": ["document-list.component", "document-actions.service", "folder-actions.service"], "content.widget": [], "context-menu.directive": [], "create-process-attachment.component": [], @@ -23,14 +24,18 @@ "pagination.component" ], "diagram.component": [], + "document-actions.service": [], "document-list.component": [ "datatable.component", "data-column.component", "pagination.component", + "sites-dropdown.component", "metadata-indicators" ], + "dropdown-breadcrumb.component": ["document-list.component", "breadcrumb.component"], "extensibility": [], "file-uploading-dialog.component": [], + "folder-actions.service": ["document-actions.service"], "form-list.component": [], "form.component": [], "form.service": [], diff --git a/docs/undocStoplist.json b/docs/undocStoplist.json index a4c41aea10..7fe1c07098 100644 --- a/docs/undocStoplist.json +++ b/docs/undocStoplist.json @@ -3,5 +3,8 @@ "context-menu-holder", "data-column-list", "card-view-[a-z]+item", - "card-view-item-dispatcher" + "card-view-item-dispatcher", + "content-column", + "content-action-list", + "empty-folder-content" ] \ No newline at end of file