diff --git a/docIndex.md b/docIndex.md index c24e5013db..1d803857a9 100644 --- a/docIndex.md +++ b/docIndex.md @@ -315,6 +315,7 @@ for more information about installing and using the source code. ### Directives - [Context menu directive](docs/context-menu.directive.md) +- [Logout directive](docs/logout.directive.md) - [Node permission directive](docs/node-permission.directive.md) - [Upload directive](docs/upload.directive.md) - [*Mdl menu directive](ng2-components/ng2-alfresco-core/src/components/material/mdl-menu.directive.ts) diff --git a/docassets/images/HTML.png b/docassets/images/HTML.png deleted file mode 100644 index b64090bb2a..0000000000 Binary files a/docassets/images/HTML.png and /dev/null differ diff --git a/docassets/images/activiti-stencil-01.png b/docassets/images/activiti-stencil-01.png deleted file mode 100644 index 6f01cec9d5..0000000000 Binary files a/docassets/images/activiti-stencil-01.png and /dev/null differ diff --git a/docassets/images/activiti-stencil-02.png b/docassets/images/activiti-stencil-02.png deleted file mode 100644 index 340fb7dece..0000000000 Binary files a/docassets/images/activiti-stencil-02.png and /dev/null differ diff --git a/docassets/images/activiti-stencil-03.png b/docassets/images/activiti-stencil-03.png deleted file mode 100644 index d2763a2178..0000000000 Binary files a/docassets/images/activiti-stencil-03.png and /dev/null differ diff --git a/docassets/images/activiti_people.png b/docassets/images/activiti_people.png deleted file mode 100644 index 42c7c41728..0000000000 Binary files a/docassets/images/activiti_people.png and /dev/null differ diff --git a/docassets/images/adf-comments.png b/docassets/images/adf-comments.png deleted file mode 100644 index 40a31a3c4d..0000000000 Binary files a/docassets/images/adf-comments.png and /dev/null differ diff --git a/docassets/images/adf-custom-view.png b/docassets/images/adf-custom-view.png deleted file mode 100644 index 4b99842c33..0000000000 Binary files a/docassets/images/adf-custom-view.png and /dev/null differ diff --git a/docassets/images/adf-empty-list.png b/docassets/images/adf-empty-list.png deleted file mode 100644 index 1b07ec298e..0000000000 Binary files a/docassets/images/adf-empty-list.png and /dev/null differ diff --git a/docassets/images/adf-process-audit-directive.png b/docassets/images/adf-process-audit-directive.png deleted file mode 100644 index 720d164b65..0000000000 Binary files a/docassets/images/adf-process-audit-directive.png and /dev/null differ diff --git a/docassets/images/adf-process-instance-header-attachment.png b/docassets/images/adf-process-instance-header-attachment.png deleted file mode 100644 index c6a876471a..0000000000 Binary files a/docassets/images/adf-process-instance-header-attachment.png and /dev/null differ diff --git a/docassets/images/adf-start-task.png b/docassets/images/adf-start-task.png deleted file mode 100644 index e9ccecce86..0000000000 Binary files a/docassets/images/adf-start-task.png and /dev/null differ diff --git a/docassets/images/adf-stencil-01.png b/docassets/images/adf-stencil-01.png deleted file mode 100644 index 4f3473cc98..0000000000 Binary files a/docassets/images/adf-stencil-01.png and /dev/null differ diff --git a/docassets/images/adf-stencil-02.png b/docassets/images/adf-stencil-02.png deleted file mode 100644 index 334b4ca6c6..0000000000 Binary files a/docassets/images/adf-stencil-02.png and /dev/null differ diff --git a/docassets/images/adf-task-audit-directive.png b/docassets/images/adf-task-audit-directive.png deleted file mode 100644 index acf07e2c4a..0000000000 Binary files a/docassets/images/adf-task-audit-directive.png and /dev/null differ diff --git a/docassets/images/adf-task-header.png b/docassets/images/adf-task-header.png deleted file mode 100644 index 41ed32afb9..0000000000 Binary files a/docassets/images/adf-task-header.png and /dev/null differ diff --git a/docassets/images/adf-toolbar-01.png b/docassets/images/adf-toolbar-01.png deleted file mode 100644 index ca81330cd2..0000000000 Binary files a/docassets/images/adf-toolbar-01.png and /dev/null differ diff --git a/docassets/images/adf-toolbar-02.png b/docassets/images/adf-toolbar-02.png deleted file mode 100644 index 1e81967f3e..0000000000 Binary files a/docassets/images/adf-toolbar-02.png and /dev/null differ diff --git a/docassets/images/adf-toolbar-03.png b/docassets/images/adf-toolbar-03.png deleted file mode 100644 index 97c19d094e..0000000000 Binary files a/docassets/images/adf-toolbar-03.png and /dev/null differ diff --git a/docassets/images/adf-toolbar-04.png b/docassets/images/adf-toolbar-04.png deleted file mode 100644 index 526349285e..0000000000 Binary files a/docassets/images/adf-toolbar-04.png and /dev/null differ diff --git a/docassets/images/adf-toolbar-05.png b/docassets/images/adf-toolbar-05.png deleted file mode 100644 index 98a00a8984..0000000000 Binary files a/docassets/images/adf-toolbar-05.png and /dev/null differ diff --git a/docassets/images/adf-toolbar-06.png b/docassets/images/adf-toolbar-06.png deleted file mode 100644 index 6b57d21e13..0000000000 Binary files a/docassets/images/adf-toolbar-06.png and /dev/null differ diff --git a/docassets/images/adf-toolbar-07.png b/docassets/images/adf-toolbar-07.png deleted file mode 100644 index 25034ab23e..0000000000 Binary files a/docassets/images/adf-toolbar-07.png and /dev/null differ diff --git a/docassets/images/analytics-without-parameters.png b/docassets/images/analytics-without-parameters.png deleted file mode 100644 index 06146ecd33..0000000000 Binary files a/docassets/images/analytics-without-parameters.png and /dev/null differ diff --git a/docassets/images/basic.png b/docassets/images/basic.png deleted file mode 100644 index 9ceb4da7ab..0000000000 Binary files a/docassets/images/basic.png and /dev/null differ diff --git a/docassets/images/breadcrumb.png b/docassets/images/breadcrumb.png deleted file mode 100644 index 36c745dc5f..0000000000 Binary files a/docassets/images/breadcrumb.png and /dev/null differ diff --git a/docassets/images/content-action-disable-delete-button.png b/docassets/images/content-action-disable-delete-button.png deleted file mode 100644 index 43d9dff579..0000000000 Binary files a/docassets/images/content-action-disable-delete-button.png and /dev/null differ diff --git a/docassets/images/content-action-notification-message.png b/docassets/images/content-action-notification-message.png deleted file mode 100644 index e761f10665..0000000000 Binary files a/docassets/images/content-action-notification-message.png and /dev/null differ diff --git a/docassets/images/custom-columns.png b/docassets/images/custom-columns.png deleted file mode 100644 index 1ba048d759..0000000000 Binary files a/docassets/images/custom-columns.png and /dev/null differ diff --git a/docassets/images/custom-footer.png b/docassets/images/custom-footer.png deleted file mode 100644 index 7a791c8fbd..0000000000 Binary files a/docassets/images/custom-footer.png and /dev/null differ diff --git a/docassets/images/custom-header.png b/docassets/images/custom-header.png deleted file mode 100644 index 8dad6608f8..0000000000 Binary files a/docassets/images/custom-header.png and /dev/null differ diff --git a/docassets/images/custom-login.png b/docassets/images/custom-login.png deleted file mode 100644 index aa1e2e62e6..0000000000 Binary files a/docassets/images/custom-login.png and /dev/null differ diff --git a/docassets/images/datatable-actions-console.png b/docassets/images/datatable-actions-console.png deleted file mode 100644 index ed91a61611..0000000000 Binary files a/docassets/images/datatable-actions-console.png and /dev/null differ diff --git a/docassets/images/datatable-actions-ui.png b/docassets/images/datatable-actions-ui.png deleted file mode 100644 index 18a0ed4f40..0000000000 Binary files a/docassets/images/datatable-actions-ui.png and /dev/null differ diff --git a/docassets/images/datatable-demo.png b/docassets/images/datatable-demo.png deleted file mode 100644 index 3e227b6021..0000000000 Binary files a/docassets/images/datatable-demo.png and /dev/null differ diff --git a/docassets/images/datatable-dom-events.png b/docassets/images/datatable-dom-events.png deleted file mode 100644 index 740eded91f..0000000000 Binary files a/docassets/images/datatable-dom-events.png and /dev/null differ diff --git a/docassets/images/datatable.png b/docassets/images/datatable.png deleted file mode 100644 index aea7fbbb4a..0000000000 Binary files a/docassets/images/datatable.png and /dev/null differ diff --git a/docassets/images/demo-validator.png b/docassets/images/demo-validator.png deleted file mode 100644 index e06d00b0c6..0000000000 Binary files a/docassets/images/demo-validator.png and /dev/null differ diff --git a/docassets/images/document-action-copymove.png b/docassets/images/document-action-copymove.png deleted file mode 100644 index 8325b86928..0000000000 Binary files a/docassets/images/document-action-copymove.png and /dev/null differ diff --git a/docassets/images/document-action-copymovedialog.png b/docassets/images/document-action-copymovedialog.png deleted file mode 100644 index 7f9e0c1ffa..0000000000 Binary files a/docassets/images/document-action-copymovedialog.png and /dev/null differ diff --git a/docassets/images/document-action-download.png b/docassets/images/document-action-download.png deleted file mode 100644 index 05d60793b2..0000000000 Binary files a/docassets/images/document-action-download.png and /dev/null differ diff --git a/docassets/images/document-actions.png b/docassets/images/document-actions.png deleted file mode 100644 index f0fcee4a2f..0000000000 Binary files a/docassets/images/document-actions.png and /dev/null differ diff --git a/docassets/images/document-list-custom-icon.png b/docassets/images/document-list-custom-icon.png deleted file mode 100644 index 487aa1fe4b..0000000000 Binary files a/docassets/images/document-list-custom-icon.png and /dev/null differ diff --git a/docassets/images/document-list-dropdown-list.png b/docassets/images/document-list-dropdown-list.png deleted file mode 100644 index d8d8b94040..0000000000 Binary files a/docassets/images/document-list-dropdown-list.png and /dev/null differ diff --git a/docassets/images/document-list-tag-template.png b/docassets/images/document-list-tag-template.png deleted file mode 100644 index 769147a677..0000000000 Binary files a/docassets/images/document-list-tag-template.png and /dev/null differ diff --git a/docassets/images/documentLibrary.png b/docassets/images/documentLibrary.png deleted file mode 100644 index ee5be8b847..0000000000 Binary files a/docassets/images/documentLibrary.png and /dev/null differ diff --git a/docassets/images/empty-folder-template-custom.png b/docassets/images/empty-folder-template-custom.png deleted file mode 100644 index f8f18dbb80..0000000000 Binary files a/docassets/images/empty-folder-template-custom.png and /dev/null differ diff --git a/docassets/images/empty-folder-template-default.png b/docassets/images/empty-folder-template-default.png deleted file mode 100644 index 558b81f300..0000000000 Binary files a/docassets/images/empty-folder-template-default.png and /dev/null differ diff --git a/docassets/images/folder-actions.png b/docassets/images/folder-actions.png deleted file mode 100644 index 2c698df6ef..0000000000 Binary files a/docassets/images/folder-actions.png and /dev/null differ diff --git a/docassets/images/folder-context-menu.png b/docassets/images/folder-context-menu.png deleted file mode 100644 index 1907ecd75d..0000000000 Binary files a/docassets/images/folder-context-menu.png and /dev/null differ diff --git a/docassets/images/form-service-sample-01.png b/docassets/images/form-service-sample-01.png deleted file mode 100644 index 479144ac25..0000000000 Binary files a/docassets/images/form-service-sample-01.png and /dev/null differ diff --git a/docassets/images/how-filter-apps.png b/docassets/images/how-filter-apps.png deleted file mode 100644 index e50e4f57e1..0000000000 Binary files a/docassets/images/how-filter-apps.png and /dev/null differ diff --git a/docassets/images/how-to-create-accordion-menu.png b/docassets/images/how-to-create-accordion-menu.png deleted file mode 100644 index 94721a4e2c..0000000000 Binary files a/docassets/images/how-to-create-accordion-menu.png and /dev/null differ diff --git a/docassets/images/involve-people-double-click-and-close-search.gif b/docassets/images/involve-people-double-click-and-close-search.gif deleted file mode 100644 index 310e36ff97..0000000000 Binary files a/docassets/images/involve-people-double-click-and-close-search.gif and /dev/null differ diff --git a/docassets/images/involve-people-double-click-without-close-search.gif b/docassets/images/involve-people-double-click-without-close-search.gif deleted file mode 100644 index 54c03c256c..0000000000 Binary files a/docassets/images/involve-people-double-click-without-close-search.gif and /dev/null differ diff --git a/docassets/images/involve-people-single-click-and-close-search.gif b/docassets/images/involve-people-single-click-and-close-search.gif deleted file mode 100644 index e3300f5c1f..0000000000 Binary files a/docassets/images/involve-people-single-click-and-close-search.gif and /dev/null differ diff --git a/docassets/images/involve-people-single-click-without-close-search.gif b/docassets/images/involve-people-single-click-without-close-search.gif deleted file mode 100644 index 8e40815a01..0000000000 Binary files a/docassets/images/involve-people-single-click-without-close-search.gif and /dev/null differ diff --git a/docassets/images/login-extra-content.png b/docassets/images/login-extra-content.png deleted file mode 100644 index 09971bfd50..0000000000 Binary files a/docassets/images/login-extra-content.png and /dev/null differ diff --git a/docassets/images/metadata-01.png b/docassets/images/metadata-01.png deleted file mode 100644 index fc4d8a0203..0000000000 Binary files a/docassets/images/metadata-01.png and /dev/null differ diff --git a/docassets/images/metadata-02.png b/docassets/images/metadata-02.png deleted file mode 100644 index 90d652ad91..0000000000 Binary files a/docassets/images/metadata-02.png and /dev/null differ diff --git a/docassets/images/metadata-03.png b/docassets/images/metadata-03.png deleted file mode 100644 index 724599a763..0000000000 Binary files a/docassets/images/metadata-03.png and /dev/null differ diff --git a/docassets/images/process-create-attachment.png b/docassets/images/process-create-attachment.png deleted file mode 100644 index f755633f7c..0000000000 Binary files a/docassets/images/process-create-attachment.png and /dev/null differ diff --git a/docassets/images/renditions.png b/docassets/images/renditions.png deleted file mode 100644 index 02198cbf85..0000000000 Binary files a/docassets/images/renditions.png and /dev/null differ diff --git a/docassets/images/responsive-desktop.png b/docassets/images/responsive-desktop.png deleted file mode 100644 index da7f0dac32..0000000000 Binary files a/docassets/images/responsive-desktop.png and /dev/null differ diff --git a/docassets/images/responsive-mobile.png b/docassets/images/responsive-mobile.png deleted file mode 100644 index 933ce1f60b..0000000000 Binary files a/docassets/images/responsive-mobile.png and /dev/null differ diff --git a/docassets/images/social1.png b/docassets/images/social1.png deleted file mode 100644 index 55984b8db0..0000000000 Binary files a/docassets/images/social1.png and /dev/null differ diff --git a/docassets/images/social2.png b/docassets/images/social2.png deleted file mode 100644 index 94cb875c2f..0000000000 Binary files a/docassets/images/social2.png and /dev/null differ diff --git a/docassets/images/startProcess.png b/docassets/images/startProcess.png deleted file mode 100644 index 21b18fdac8..0000000000 Binary files a/docassets/images/startProcess.png and /dev/null differ diff --git a/docassets/images/tag1.png b/docassets/images/tag1.png deleted file mode 100644 index e6568ebe25..0000000000 Binary files a/docassets/images/tag1.png and /dev/null differ diff --git a/docassets/images/tag2.png b/docassets/images/tag2.png deleted file mode 100644 index b5906e0dbe..0000000000 Binary files a/docassets/images/tag2.png and /dev/null differ diff --git a/docassets/images/tag3.png b/docassets/images/tag3.png deleted file mode 100644 index 278c2b9f68..0000000000 Binary files a/docassets/images/tag3.png and /dev/null differ diff --git a/docassets/images/task-attachment-list.png b/docassets/images/task-attachment-list.png deleted file mode 100644 index 23d902bfb4..0000000000 Binary files a/docassets/images/task-attachment-list.png and /dev/null differ diff --git a/docassets/images/task-create-attachment.png b/docassets/images/task-create-attachment.png deleted file mode 100644 index f755633f7c..0000000000 Binary files a/docassets/images/task-create-attachment.png and /dev/null differ diff --git a/docassets/images/text-custom-widget.png b/docassets/images/text-custom-widget.png deleted file mode 100644 index ebec57f023..0000000000 Binary files a/docassets/images/text-custom-widget.png and /dev/null differ diff --git a/docassets/images/text-default-widget.png b/docassets/images/text-default-widget.png deleted file mode 100644 index e75766e065..0000000000 Binary files a/docassets/images/text-default-widget.png and /dev/null differ diff --git a/docassets/images/upload-disable-button.png b/docassets/images/upload-disable-button.png deleted file mode 100644 index 344e330228..0000000000 Binary files a/docassets/images/upload-disable-button.png and /dev/null differ diff --git a/docassets/images/upload-notification-message.png b/docassets/images/upload-notification-message.png deleted file mode 100644 index 762f3fab0f..0000000000 Binary files a/docassets/images/upload-notification-message.png and /dev/null differ diff --git a/docassets/images/viewchild.png b/docassets/images/viewchild.png deleted file mode 100644 index c9c258dd52..0000000000 Binary files a/docassets/images/viewchild.png and /dev/null differ diff --git a/docs/document-list.component.md b/docs/document-list.component.md index 075926ab1d..4aa6ede257 100644 --- a/docs/document-list.component.md +++ b/docs/document-list.component.md @@ -89,6 +89,7 @@ The properties currentFolderId, folderNode and node are the entry initialization | allowDropFiles | boolean | false | Toggle file drop support for rows (see **ng2-alfresco-core/UploadDirective** for more details) | | 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). | +| supportedPageSizes | number[] | [5, 10, 15, 20] | Supported page sizes for the pagination component. You can also use application configuration file to set it as a global setting using `document-list.supportedPageSizes` key. | ### Events diff --git a/docs/logout.directive.md b/docs/logout.directive.md new file mode 100644 index 0000000000..11951e9cc5 --- /dev/null +++ b/docs/logout.directive.md @@ -0,0 +1,26 @@ +# Logout directive + +Logs the user out when the decorated element is clicked. + + + + + +- [Basic Usage](#basic-usage) + + + + + +## Basic Usage + +```html + +``` + + + +## See also + +- [Login component](login.component.md) + \ No newline at end of file diff --git a/docs/seeAlsoGraph.json b/docs/seeAlsoGraph.json index aa9e93e6cd..cd4ff87801 100644 --- a/docs/seeAlsoGraph.json +++ b/docs/seeAlsoGraph.json @@ -37,7 +37,8 @@ "info-drawer.component": ["info-drawer-layout.component"], "info-drawer-layout.component": [], "like.component": ["rating.component"], - "login.component": [], + "login.component": ["logout.directive"], + "logout.directive": [], "metadata-indicators": [], "node-permission.directive": [], "notification.service": [], diff --git a/docs/tasklist.component.md b/docs/tasklist.component.md index fd661b4449..16674ce2f6 100644 --- a/docs/tasklist.component.md +++ b/docs/tasklist.component.md @@ -48,6 +48,8 @@ You can also use HTML-based schema declaration like shown below: | page | number | 0 | The page of the tasks to fetch. | | size | number | 5 | The number of tasks to fetch. | | assignment | string || The assignment of the process. | +| selectionMode | string | 'single' | Row selection mode. Can be none, `single` or `multiple`. For `multiple` mode you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows. | +| multiselect | boolean | false | Toggles multiple row selection, renders checkboxes at the beginning of each row | | 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 | @@ -60,6 +62,7 @@ You can also use HTML-based schema declaration like shown below: | --- | --- | | onSuccess | Raised when the task list is loaded | | rowClick | Raised when the task in the list is clicked | +| rowsSelected | Raised when the a row is selected/unselected | ## Details diff --git a/ng2-components/README.md b/ng2-components/README.md index 73244aa349..62940942f4 100644 --- a/ng2-components/README.md +++ b/ng2-components/README.md @@ -1,215 +1,40 @@ # Alfresco Angular Components -**NOTE:** We are in the process of transferring docs from the component library -README files to a new system. This file lists all the docs currently in the -READMEs but the complete index for the docs can now be found in the -[Component Docs Index](../docIndex.md). - -- [Guide](#guide) -- [Core](#core) - * [Components](#components) - * [Directives](#directives) -- [Content services](#content-services) - * [Components](#components-1) -- [Process services](#process-services) - * [components](#components) -- [Services](#services) +- [Documentation](#documentation) +- [Libraries](#libraries) -## Guide +## Documentation -- [Theming](../docs/theming.md) +The [docs index](../docIndex.md) lists all available documentation for components and +also includes a user guide that explains techniques in greater detail. -## Core +## Libraries -### Components +ADF consists of 16 libraries. Click the links below to see the README files for the +libraries, which contain information about installing, prerequisites, license and other +details about the sources. - -- [adf-accordion](ng2-alfresco-core/README.md) -- [adf-accordion-group](ng2-alfresco-core/README.md) -- [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-dateitem](ng2-alfresco-core/README.md) -- [adf-card-view-item-dispatcher](ng2-alfresco-core/README.md) -- [adf-toolbar](ng2-alfresco-core/README.md) -- [adf-toolbar-title](ng2-alfresco-core/README.md) -- [adf-toolbar-divider](ng2-alfresco-core/README.md) -- [adf-pagination](ng2-alfresco-core/README.md) -- [adf-context-menu-holder](ng2-alfresco-core/README.md) -- [adf-info-drawer-layout](ng2-alfresco-core/README.md) -- [adf-info-drawer-tab](ng2-alfresco-core/README.md) -- [adf-download-zip-dialog](ng2-alfresco-core/README.md) -- [adf-create-folder-dialog](ng2-alfresco-core/README.md) - - -### Directives - - -- [adf-card-view-content-proxy](ng2-alfresco-core/README.md) -- [adf-context-menu](ng2-alfresco-core/README.md) -- [adf-mdl-menu](ng2-alfresco-core/README.md) -- [adf-mdl-textfield](ng2-alfresco-core/README.md) -- [adf-upload](ng2-alfresco-core/README.md) -- [adf-node-permission](ng2-alfresco-core/README.md) -- [adf-highlight](ng2-alfresco-core/README.md) - -## Content services - -### Components - - -- [adf-webscript-get](ng2-alfresco-webscript/README.md) -- [adf-file-uploading-dialog](ng2-alfresco-upload/README.md) -- [adf-file-uploading-list](ng2-alfresco-upload/README.md) -- [adf-upload-drag-area](ng2-alfresco-upload/README.md) -- [adf-upload-button](ng2-alfresco-upload/README.md) -- [adf-file-uploading-list-row](ng2-alfresco-upload/README.md) -- [adf-userinfo](ng2-alfresco-userinfo/README.md) -- [adf-login](ng2-alfresco-login/README.md) -- [adf-location-cell](ng2-alfresco-datatable/README.md) -- [adf-empty-list](ng2-alfresco-datatable/README.md) -- [adf-datatable](ng2-alfresco-datatable/README.md) -- [adf-tag-node-list](ng2-alfresco-tag/README.md) -- [adf-tag-list](ng2-alfresco-tag/README.md) -- [adf-search](ng2-alfresco-search/README.md) -- [adf-tag-node-actions-list](ng2-alfresco-tag/README.md) -- [adf-search-control](ng2-alfresco-search/README.md) -- [adf-search-autocomplete](ng2-alfresco-search/README.md) -- [adf-datatable-cell](ng2-alfresco-datatable/README.md) -- [adf-viewer-dialog](ng2-alfresco-viewer/README.md) -- [adf-txt-viewer](ng2-alfresco-viewer/README.md) -- [adf-pdf-viewer](ng2-alfresco-viewer/README.md) -- [adf-not-supported-format](ng2-alfresco-viewer/README.md) -- [adf-media-player](ng2-alfresco-viewer/README.md) -- [adf-viewer](ng2-alfresco-viewer/README.md) -- [adf-img-viewer](ng2-alfresco-viewer/README.md) -- [adf-rating](ng2-alfresco-social/README.md) -- [adf-like](ng2-alfresco-social/README.md) -- [adf-sites-dropdown](ng2-alfresco-documentlist/README.md) -- [adf-content-node-selector](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) - - - - -## Process services - -### components - - -- [adf-diagram-publish-task](ng2-activiti-diagrams/README.md) -- [adf-text-editor](ng2-activiti-form/README.md) -- [adf-dropdown-editor](ng2-activiti-form/README.md) -- [adf-date-editor](ng2-activiti-form/README.md) -- [adf-boolean-editor](ng2-activiti-form/README.md) -- [adf-unknown-widget](ng2-activiti-form/README.md) -- [adf-date-range-widget](ng2-activiti-analytics/README.md) -- [adf-diagram-sequence-flow](ng2-activiti-diagrams/README.md) -- [adf-diagram](ng2-activiti-diagrams/README.md) -- [adf-tasklist](ng2-activiti-tasklist/README.md) -- [adf-process-instance-details](ng2-activiti-processlist/README.md) -- [adf-start-process](ng2-activiti-processlist/README.md) -- [adf-process-instance-list](ng2-activiti-processlist/README.md) -- [adf-process-instance-tasks](ng2-activiti-processlist/README.md) -- [adf-process-instance-variables](ng2-activiti-processlist/README.md) -- [adf-process-instance-header](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-task-header](ng2-activiti-tasklist/README.md) -- [adf-filters](ng2-activiti-tasklist/README.md) -- [adf-task-attachment-list](ng2-activiti-tasklist/README.md) -- [adf-people](ng2-activiti-tasklist/README.md) -- [adf-task-details](ng2-activiti-tasklist/README.md) -- [adf-start-task](ng2-activiti-tasklist/README.md) -- [adf-people-list](ng2-activiti-tasklist/README.md) -- [adf-people-search](ng2-activiti-tasklist/README.md) -- [adf-create-task-attachment](ng2-activiti-tasklist/README.md) -- [adf-comments](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-content](ng2-activiti-form/README.md) -- [adf-form-field](ng2-activiti-form/README.md) -- [adf-start-form](ng2-activiti-form/README.md) -- [adf-form](ng2-activiti-form/README.md) -- [adf-form-list](ng2-activiti-form/README.md) -- [adf-analytics](ng2-activiti-analytics/README.md) -- [adf-analytics-report-parameters](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) - - - - -## Services - - -- [DiagramsService](ng2-activiti-diagrams/src/services/diagrams.service.ts) -- [DiagramColorService](ng2-activiti-diagrams/src/services/diagram-color.service.ts) -- [ContextMenuService](ng2-alfresco-core/src/components/context-menu/context-menu.service.ts) -- [RaphaelService](ng2-activiti-diagrams/src/components/raphael/raphael.service.ts) -- [TagService](ng2-alfresco-tag/src/services/tag.service.ts) -- [EcmUserService](ng2-alfresco-userinfo/src/services/ecm-user.service.ts) -- [BpmUserService](ng2-alfresco-userinfo/src/services/bpm-user.service.ts) -- [ProcessUploadService](ng2-activiti-processlist/src/services/process-upload.service.ts) -- [ProcessService](ng2-activiti-processlist/src/services/process.service.ts) -- [ProcessUploadService](ng2-activiti-tasklist/src/services/process-upload.service.ts) -- [TaskListService](ng2-activiti-tasklist/src/services/tasklist.service.ts) -- [PeopleService](ng2-activiti-tasklist/src/services/people.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) -- [ActivitiContentService](ng2-activiti-form/src/services/activiti-content-service.ts) -- [ActivitiAlfrescoContentService](ng2-activiti-form/src/services/activiti-alfresco.service.ts) -- [EcmModelService](ng2-activiti-form/src/services/ecm-model.service.ts) -- [RenderingQueueService](ng2-alfresco-viewer/src/services/rendering-queue.services.ts) -- [ViewerService](ng2-alfresco-viewer/src/services/viewer.service.ts) -- [AnalyticsService](ng2-activiti-analytics/src/services/analytics.service.ts) -- [RatingService](ng2-alfresco-social/src/services/rating.service.ts) -- [FolderActionsService](ng2-alfresco-documentlist/src/services/folder-actions.service.ts) -- [NodeActionsService](ng2-alfresco-documentlist/src/services/node-actions.service.ts) -- [DocumentListService](ng2-alfresco-documentlist/src/services/document-list.service.ts) -- [DocumentActionsService](ng2-alfresco-documentlist/src/services/document-actions.service.ts) -- [UploadService](ng2-alfresco-core/src/services/upload.service.ts) -- [CardViewUpdateService](ng2-alfresco-core/src/services/card-view-update.service.ts) -- [SitesApiService](ng2-alfresco-core/src/services/sites-api.service.ts) -- [SharedLinksApiService](ng2-alfresco-core/src/services/shared-links-api.service.ts) -- [SearchService](ng2-alfresco-core/src/services/search.service.ts) -- [SearchApiService](ng2-alfresco-core/src/services/search-api.service.ts) -- [PeopleApiService](ng2-alfresco-core/src/services/people-api.service.ts) -- [FavoritesApiService](ng2-alfresco-core/src/services/favorites-api.service.ts) -- [NodesApiService](ng2-alfresco-core/src/services/nodes-api.service.ts) -- [TranslationService](ng2-alfresco-core/src/services/translation.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) -- [ThumbnailService](ng2-alfresco-core/src/services/thumbnail.service.ts) -- [StorageService](ng2-alfresco-core/src/services/storage.service.ts) -- [RenditionsService](ng2-alfresco-core/src/services/renditions.service.ts) -- [NotificationService](ng2-alfresco-core/src/services/notification.service.ts) -- [AlfrescoSettingsService](ng2-alfresco-core/src/services/alfresco-settings.service.ts) -- [LogService](ng2-alfresco-core/src/services/log.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) -- [AlfrescoContentService](ng2-alfresco-core/src/services/alfresco-content.service.ts) -- [AppConfigService](ng2-alfresco-core/src/services/app-config.service.ts) -- [AlfrescoApiService](ng2-alfresco-core/src/services/alfresco-api.service.ts) - -You can browse all the components at the following address: - -[http://devproducts.alfresco.com/](http://devproducts.alfresco.com/) +- [ADF Analytics](ng2-activiti-analytics/README.md) +- [ADF Diagrams](ng2-activiti-diagrams/README.md) +- [ADF Form](ng2-activiti-form/README.md) +- [ADF Processlist](ng2-activiti-processlist/README.md) +- [ADF Tasklist](ng2-activiti-tasklist/README.md) +- [ADF Core](ng2-alfresco-core/README.md) +- [ADF Datatable](ng2-alfresco-datatable/README.md) +- [ADF Documentlist](ng2-alfresco-documentlist/README.md) +- [ADF Login](ng2-alfresco-login/README.md) +- [ADF Search](ng2-alfresco-search/README.md) +- [ADF Social](ng2-alfresco-social/README.md) +- [ADF Tag](ng2-alfresco-tag/README.md) +- [ADF Upload](ng2-alfresco-upload/README.md) +- [ADF Userinfo](ng2-alfresco-userinfo/README.md) +- [ADF Viewer](ng2-alfresco-viewer/README.md) +- [ADF Webscript](ng2-alfresco-webscript/README.md) diff --git a/ng2-components/ng2-activiti-analytics/README.md b/ng2-components/ng2-activiti-analytics/README.md index fee1c5fa05..a6772c1212 100644 --- a/ng2-components/ng2-activiti-analytics/README.md +++ b/ng2-components/ng2-activiti-analytics/README.md @@ -6,143 +6,37 @@ Contains the Activiti Analytics component and other related components. -- [Activiti Analytics Component](#activiti-analytics-component) - * [Basic Usage](#basic-usage) - + [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) - * [Basic Usage](#basic-usage-2) - + [Properties](#properties-2) - + [Events](#events-2) -- [Project Information](#project-information) - * [Prerequisites](#prerequisites) - * [Install](#install) - * [Build from sources](#build-from-sources) - * [NPM scripts](#npm-scripts) - * [Demo](#demo) - * [License](#license) +- [Documentation](#documentation) +- [Prerequisites](#prerequisites) +- [Install](#install) +- [Build from sources](#build-from-sources) +- [NPM scripts](#npm-scripts) +- [Demo](#demo) +- [License](#license) -## Activiti Analytics Component +## Documentation -The component shows the charts related to the reportId passed as input +See the [ADF Analytics](../../docIndex.md#adf-analytics) section of the [docs index](../../docIndex.md) +for all available documentation on this library. -### Basic Usage - -```html - - -``` - -#### Properties - -| Name | Type | Description | -| --- | --- | --- | -| appId | string | The application id | -| reportId | string | The report id | -| hideParameters | boolean | Toggle the analytics parameters | - -You can also hide chart parameters UI by setting the `hideParameters` to `true`: - -```html - - -``` - -![Analytics-without-parameters](docs/assets/analytics-without-parameters.png) - -#### Events - -| Name | Description | -| --- | --- | -| onSuccess | The event is emitted when the report parameters are loaded | -| onError | The event is emitted when an error occurs during the loading | -| reportSaved | The event is emitted when a report is saved | -| 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 - - -``` - -#### 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 - -The component generates and shows the charts - -### Basic Usage - -```html - - -``` - -#### Properties - -| Name | Type | Description | -| --- | --- | -- | -| reportId | string | The report id | -| reportParamQuery | ReportQuery | The object contains all the parameters that the report needs | - -#### Events - -| Name | Description | -| --- | --- | -| onSuccess | Raised when the charts are loaded | -| onError | Raised when an error occurs during the loading | - -## Project Information - -### Prerequisites +## 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 +## Install ```sh npm install ng2-activiti-analytics ``` -### Build from sources +## Build from sources You can build the component from sources with the following commands: @@ -154,7 +48,7 @@ npm run build > The `build` task rebuilds all the code, runs tslint, license checks > and other quality check tools before performing unit testing. -### NPM scripts +## NPM scripts | Command | Description | | --- | --- | @@ -163,7 +57,7 @@ npm run build | npm run test-browser | Run unit tests in the browser | npm run coverage | Run unit tests and display code coverage report | -### Demo +## Demo Please check the demo folder for a demo project @@ -173,6 +67,6 @@ npm install npm start ``` -### License +## License [Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE) diff --git a/ng2-components/ng2-activiti-diagrams/README.md b/ng2-components/ng2-activiti-diagrams/README.md index 99ec59b036..08ddcddad8 100644 --- a/ng2-components/ng2-activiti-diagrams/README.md +++ b/ng2-components/ng2-activiti-diagrams/README.md @@ -6,76 +6,37 @@ Contains the Activiti Diagram component. -- [Activiti Diagram Component](#activiti-diagram-component) - * [Basic Usage](#basic-usage) - + [Properties](#properties) - + [Events](#events) -- [Project Information](#project-information) - * [Prerequisites](#prerequisites) - * [Install](#install) - * [Build from sources](#build-from-sources) - * [NPM scripts](#npm-scripts) - * [Demo](#demo) - * [License](#license) +- [Documentation](#documentation) +- [Prerequisites](#prerequisites) +- [Install](#install) +- [Build from sources](#build-from-sources) +- [NPM scripts](#npm-scripts) +- [Demo](#demo) +- [License](#license) -## Activiti Diagram Component +## Documentation -### Basic Usage +See the [ADF Diagrams](../../docIndex.md#adf-diagrams) section of the [docs index](../../docIndex.md) +for all available documentation on this library. -This component shows the diagram of a process. - -```html - - -``` - -The below component shows the diagram of a running process instance with the activities highlighted according to their state (Active/Completed/Pending). - -```html - - -``` - -#### Properties - -| Name | Type | Description | -| --- | --- | -- | -| metricPercentages | any | The array that contains the percentage of time for each element | -| processInstanceId | any | | -| metricColor | any | The array that contains the color for each element | -| metricType | any | The string that specifies the metric type | -| width | number | | -| height | number | | - -#### Events - -| Name | Description | -| --- | --- | -| onSuccess | Raised when the diagrams elements are loaded | -| onError | Raised when an error occurs during loading | - -## Project Information - -### Prerequisites +## 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 +## Install ```sh npm install ng2-activiti-diagrams ``` -### Build from sources +## Build from sources You can build the component from sources with the following commands: @@ -87,7 +48,7 @@ npm run build > The `build` task rebuilds all the code, runs tslint, license checks > and other quality check tools before performing unit testing. -### NPM scripts +## NPM scripts | Command | Description | | --- | --- | @@ -96,7 +57,7 @@ npm run build | npm run test-browser | Run unit tests in the browser | npm run coverage | Run unit tests and display code coverage report | -### Demo +## Demo Please check the demo folder for a demo project @@ -106,6 +67,6 @@ npm install npm start ``` -### License +## License [Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE) diff --git a/ng2-components/ng2-activiti-form/README.md b/ng2-components/ng2-activiti-form/README.md index 5018f424e1..5a0ec9b73d 100644 --- a/ng2-components/ng2-activiti-form/README.md +++ b/ng2-components/ng2-activiti-form/README.md @@ -6,580 +6,37 @@ Contains the Activiti Form component and other related components and services. -- [Library Contents](#library-contents) - * [Components](#components) - * [Services](#services) -- [Activiti Form component](#activiti-form-component) - * [Basic Usage](#basic-usage) - + [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) - - [Custom set of validators](#custom-set-of-validators) - - [Custom validator example](#custom-validator-example) -- [Activiti Content Component](#activiti-content-component) - * [Basic Usage](#basic-usage-1) - + [Properties](#properties-1) - + [Events](#events-1) -- [ADF Form List Component](#adf-form-list-component) - * [Basic Usage](#basic-usage-2) - + [Properties](#properties-2) -- [FormService Service](#formservice-service) - * [Basic Usage](#basic-usage-3) - + [Events](#events-2) - + [Methods](#methods) -- [Other documentation](#other-documentation) - * [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) -- [Project Information](#project-information) - * [Prerequisites](#prerequisites) - * [Install](#install) - * [Build from sources](#build-from-sources) - * [NPM scripts](#npm-scripts) - * [Demo](#demo) - * [License](#license) +- [Documentation](#documentation) +- [Prerequisites](#prerequisites) +- [Install](#install) +- [Build from sources](#build-from-sources) +- [NPM scripts](#npm-scripts) +- [Demo](#demo) +- [License](#license) -## Library Contents +## Documentation -### Components +See the [ADF Form](../../docIndex.md#adf-form) section of the [docs index](../../docIndex.md) +for all available documentation on this library. -- [ActivitiForm](#activitiform-component) -- ActivitiStartForm - -### Services - -- [FormService](#formservice) -- ActivitiAlfrescoContentService -- EcmModelService -- FormRenderingService -- NodeService -- WidgetVisibilityService - -## Activiti Form component - -The component shows a Form from Activiti (see it live: [Form Quickstart](https://embed.plnkr.co/YSLXTqb3DtMhVJSqXKkE/)) - -### Basic Usage - -```html - - -``` - -**Display form instance by task id:** - -```html - - -``` - -For an existing Task both form and values will be fetched and displayed. - -**Display form definition by form id:** - -```html - - -``` - -Only form definition will be fetched. - -**Display form definition by form name:** - -```html - - -``` - -**Display form definition by ECM nodeId:** - -In this case the metadata of the node are showed in an activiti Form. -If there is no form definied in activiti for the type of the node, -a new form will be automaticaly created in Activiti. - -```html - - -``` - -**Display form definition by form name, and store the form field as metadata:** - -The param nameNode is optional. - -```html - - -``` - -**Display form definition by ECM nodeId:** - -In this case the metadata of the node are shown in an activiti Form, -and store the form field as metadata. The param nameNode is optional. - -```html - - -``` - -#### Properties - -| Name | Type | Default | Description | -| --- | --- | --- | --- | -| taskId | string | | Task id to fetch corresponding form and values. | -| formId | string | | The id of the form definition to load and display with custom values. | -| formName | string | | Name of the form definition to load and display with custom values. | -| data | FormValues | | Custom form values map to be used with the rendered form. | -| showTitle | boolean | true | Toggle rendering of the form title. | -| showCompleteButton | boolean | true | Toggle rendering of the `Complete` outcome button. | -| disableCompleteButton | boolean | false | The `Complete` outcome button is shown but it will be disabled. | -| showSaveButton | boolean | true | Toggle rendering of the `Save` outcome button. | -| readOnly | boolean | false | Toggle readonly state of the form. Enforces all form widgets render readonly if enabled. | -| showRefreshButton | boolean | true | Toggle rendering of the `Refresh` button. | -| showValidationIcon | boolean | true | Toggle rendering of the validation icon next form title. | -| saveMetadata | boolean | false | Store the value of the form as 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. | -| 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 - - -``` - -**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 - - -
-

Empty 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 - - -``` - -**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 - -The Form component provides you with access to all Form Field validators. By default the following instances are created automatically: - -- RequiredFieldValidator -- NumberFieldValidator -- MinLengthFieldValidator -- MaxLengthFieldValidator -- MinValueFieldValidator -- MaxValueFieldValidator -- RegExFieldValidator -- DateFieldValidator -- MinDateFieldValidator -- MaxDateFieldValidator - -If needed, you can completely redefine the set of validators used by the form. - -All changes to `fieldValidators` collection are automatically applied to all the further validation cycles. - -##### Custom set of validators - -You can provide your own set of field validators based on either custom validator instances, or a mixture of default and custom ones. - -```html - -``` - -The Form component exposes a special `FORM_FIELD_VALIDATORS` constant that allows you get a quick access to all system validator instances. - -```ts -import { FORM_FIELD_VALIDATORS } from 'ng2-activiti-form'; - -@Component({...}) -export class AppComponent { - - fieldValidators = [ - // default set of ADF validators if needed - ...FORM_FIELD_VALIDATORS, - - // custom validators - new MyValidator1(), - new MyValidator2() - ]; - -} -``` - -##### Custom validator example - -A form field validator must implement the "FormFieldValidator" interface: - -```ts -export interface FormFieldValidator { - - isSupported(field: FormFieldModel): boolean; - validate(field: FormFieldModel): boolean; - -} -``` - -There might be many different validators used for various field types and purposes, -so the validation layer needs every validator instance to support "isSupported" call. - -It is up to validator to declare support for a form field. -If you want to check field types the [FormFieldTypes](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-activiti-form/src/components/widgets/core/form-field-types.ts) class can help you with the predefined constants and helper methods. - -In addition every validator has access to all underlying APIs of the [FormFieldModel](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-activiti-form/src/components/widgets/core/form-field.model.ts), -including the reference to the Form instance and so other form fields. - -Below is a source code for a demo validator that is executed for all the "TEXT" fields, and ensures the value is not "admin", otherwise the `field.validationSummary` value is set to an error. - -```ts -import { FormFieldModel, FormFieldTypes, FormFieldValidator } from 'ng2-activiti-form'; - -export class DemoFieldValidator implements FormFieldValidator { - - isSupported(field: FormFieldModel): boolean { - return field && field.type === FormFieldTypes.TEXT; - } - - validate(field: FormFieldModel): boolean { - if (this.isSupported(field)) { - if (field.value && field.value.toLowerCase() === 'admin') { - field.validationSummary = 'Sorry, the value cannot be "admin".'; - return false; - } - } - return true; - } - -} -``` - -Your component can extend the default validation set instead of replacing it entirely. -In the example below we redefine a default validation set with an additional "DemoFieldValidator": - -```ts -import { DemoFieldValidator } from './demo-field-validator'; - -@Component({...}) -export class AppComponent { - - fieldValidators = [ - ...FORM_FIELD_VALIDATORS, - new DemoFieldValidator() - ]; - -} -``` - -You can now use the 'fieldValidators' property with the Form or Task Details components to assign custom validator set for the underlying Form Model: - -```html - - - - - - - -``` - -Now if you run the application and try to enter "admin" in one of the text fields (either optional or required), you should see the following error: - -![](docs/assets/demo-validator.png) - -## Activiti Content Component - -The component shows the content preview. - -### Basic Usage - -```html - - -``` - -#### Properties - -The recommended set of properties can be found in the following table: - -| Name | Type | Default | Description | -| --- | --- | --- | --- | -| contentId | string | | The content id to show. | - -#### Events - -| Name | Description | -| --- | --- | -| contentClick | Invoked when the content is clicked. | - -## ADF Form List Component - -The component shows the activiti forms as a list. - -### Basic Usage - -```html - - -``` - -#### Properties - -The recommended set of properties can be found in the following table: - -| Name | Type | Default | Description | -| --- | --- | --- | --- | -| forms | any | | The array that contains the information to show inside the list. | - -## FormService Service - -### Basic Usage - -```ts -import { FormService, FormEvent, FormFieldEvent } from 'ng2-activiti-form'; - -@Component(...) -class MyComponent { - - constructor(formService: FormService) { - - formService.formLoaded.subscribe( - (e: FormEvent) => { - console.log(`Form loaded: ${e.form.id}`); - } - ); - - formService.formFieldValueChanged.subscribe( - (e: FormFieldEvent) => { - console.log(`Field value changed. Form: ${e.form.id}, Field: ${e.field.id}, Value: ${e.field.value}`); - } - ); - - } - -} -``` - -#### Events - -| Name | Args Type | Description | -| --- | --- | --- | -| formLoaded | FormEvent | Raised when form has been loaded or reloaded | -| formFieldValueChanged | FormFieldEvent | Raised when input values change | -| taskCompleted | FormEvent | Raised when a task is completed successfully | -| taskCompletedError | FormErrorEvent | Raised when a task is completed unsuccessfully | -| taskSaved | FormEvent | Raised when a task is saved successfully | -| taskSavedError | FormErrorEvent | Raised when a task is saved unsuccessfully | -| executeOutcome | FormOutcomeEvent | Raised when a form outcome is executed | -| formEvents | Event | You can subscribe to this event to listen : ( click, blur, change, focus, focusin, focusout, input, invalid, select) of any elements in the form , see doc below | -| 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.| - -#### Methods - -| Name | Params | Returns | Description | -| --- | --- | --- | --- | -| createFormFromANode | (formName: string) | Observable\ | Create a Form with a fields for each metadata properties | -| createForm | (formName: string) | Observable\ | Create a Form | -| addFieldsToAForm | (formId: string, formModel: FormDefinitionModel) | Observable\ | Add Fileds to A form | -| searchFrom | (name: string) | Observable\ | Search For A Form by name | -| getForms | n/a | Observable\ | Get All the forms | -| getProcessDefinitions | n/a | Observable\ | Get Process Definitions | -| getTasks | n/a | Observable\ | Get All the Tasks | -| getTask | (taskId: string) | Observable\ | Get Task | -| saveTaskForm | (taskId: string, formValues: FormValues) | Observable\ | Save Task Form | -| completeTaskForm | (taskId: string, formValues: FormValues, outcome?: string) | Observable\ | Complete Task Form | -| getTaskForm | (taskId: string) | Observable\ | Get Form related to a taskId | -| getFormDefinitionById | (formId: string) | Observable\ | Get Form Definition | -| getFormDefinitionByName | (name: string) | Observable\ | Returns form definition by a given name. | -| getStartFormInstance | (processId: string) | Observable\ | Get start form instance for a given processId | -| getStartFormDefinition | (processId: string) | Observable\ | Get start form definition for a given process | -| createTemporaryRawRelatedContent | (file: any) | Observable\ | Save File | -| getRestFieldValues | (taskId: string, field: string) | Observable\ | | -| getRestFieldValuesByProcessId | (processDefinitionId: string, field: string) | Observable\ | | -| getRestFieldValuesColumnByProcessId | (processDefinitionId: string, field: string, column?: string) | Observable\ | | -| getRestFieldValuesColumn | (taskId: string, field: string, column?: string) | Observable\ | | -| getWorkflowGroups\ | (filter: string, groupId?: string) | Observable\ | | -| getWorkflowUsers\ | (filter: string, groupId?: string) | Observable\ | | - -## Other documentation - -### 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`). - -```ts -formService.formFieldValueChanged.subscribe((e: FormFieldEvent) => { - if (e.field.id === 'type') { - const fields: FormFieldModel[] = e.form.getFormFields(); - const description = fields.find(f => f.id === 'description'); - if (description != null) { - console.log(description); - description.value = 'Type set to ' + e.field.value; - } - } -}); -``` - -You subscribe to the `formFieldValueChanged` event and check whether event is raised for the `type` widget, then you search for a `description` widget and assign its value to some simple text. - -The result should be as following: - -![](docs/assets/form-service-sample-01.png) - -#### Listen all form Events - -If you want to listen all the events fired in the form you can subscribe to this Subject : - -```ts -formService.formEvents.subscribe((event: Event) => { - console.log('Event fired:' + event.type); - console.log('Event Target:' + event.target); -}); -``` - -## See also - -- [Form Stencils with Angular 2](docs/stencils.md) -- [Form Extensibility and Customisation](docs/extensibility.md). - -## Project Information - -### Prerequisites +## 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 +## Install ```sh npm install ng2-activiti-form ``` -### Build from sources +## Build from sources You can build the component from sources with the following commands: @@ -591,7 +48,7 @@ npm run build > The `build` task rebuilds all the code, runs tslint, license checks > and other quality check tools before performing unit testing. -### NPM scripts +## NPM scripts | Command | Description | | --- | --- | @@ -600,7 +57,7 @@ npm run build | npm run test-browser | Run unit tests in the browser | npm run coverage | Run unit tests and display code coverage report | -### Demo +## Demo Please check the demo folder for a demo project @@ -610,6 +67,6 @@ npm install npm start ``` -### License +## License [Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE) \ No newline at end of file diff --git a/ng2-components/ng2-activiti-processlist/README.md b/ng2-components/ng2-activiti-processlist/README.md index 2441e92bdd..060cbb47b8 100644 --- a/ng2-components/ng2-activiti-processlist/README.md +++ b/ng2-components/ng2-activiti-processlist/README.md @@ -6,425 +6,37 @@ Contains the Activiti Process Instance List component and other related componen -- [Activiti Process Instance List](#activiti-process-instance-list) - * [Basic Usage](#basic-usage) - + [Properties](#properties) - + [Events](#events) - * [Details](#details) -- [Process Filters Component](#process-filters-component) - * [Basic Usage](#basic-usage-1) - + [Properties](#properties-1) - + [Events](#events-1) - * [Details](#details-1) - + [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) - * [Basic Usage](#basic-usage-2) - + [Properties](#properties-2) - + [Events](#events-2) -- [Process Details component](#process-details-component) - * [Basic Usage](#basic-usage-3) - + [Properties](#properties-3) - + [Events](#events-3) -- [Process Instance Details Header component](#process-instance-details-header-component) - * [Basic Usage](#basic-usage-4) - + [Properties](#properties-4) - + [Events](#events-4) -- [Process Instance Tasks component](#process-instance-tasks-component) - * [Basic Usage](#basic-usage-5) - + [Properties](#properties-5) - + [Events](#events-5) -- [Process Instance Comments component](#process-instance-comments-component) - * [Basic Usage](#basic-usage-6) - + [Properties](#properties-6) -- [Process Attachment List component](#process-attachment-list-component) - * [Basic Usage](#basic-usage-7) - + [Properties](#properties-7) - + [Events](#events-6) -- [Create Process Attachment component](#create-process-attachment-component) - * [Basic Usage](#basic-usage-8) - + [Properties](#properties-8) - + [Events](#events-7) -- [Process Audit Directive](#process-audit-directive) - * [Basic Usage](#basic-usage-9) - + [Properties](#properties-9) - + [Events](#events-8) -- [Project Information](#project-information) - * [Prerequisites](#prerequisites) - * [Install](#install) - * [Build from sources](#build-from-sources) - * [NPM scripts](#npm-scripts) - * [Demo](#demo) - * [License](#license) +- [Documentation](#documentation) +- [Prerequisites](#prerequisites) +- [Install](#install) +- [Build from sources](#build-from-sources) +- [NPM scripts](#npm-scripts) +- [Demo](#demo) +- [License](#license) - +## Documentation -## Activiti Process Instance List +See the [ADF Processlist](../../docIndex.md#adf-processlist) section of the [docs index](../../docIndex.md) +for all available documentation on this library. -This component renders a list containing all the process instances matched by the parameters specified. - -### Basic Usage - -**app.component.html** - -```html - - -``` - -#### Properties - -| Name | Description | -| --- | --- | -| appId | The id of the app. | -| processDefinitionKey | The processDefinitionKey of the process. | -| 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` | -| schemaColumn | List of columns to display in the process instances datatable (see the [Details](#details) section below) | - -#### 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 -[ - {type: 'text', key: 'id', title: 'Id', sortable: true}, - {type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true}, - {type: 'text', key: 'started', title: 'Started', sortable: true}, - {type: 'text', key: 'startedBy.email', title: 'Started By', sortable: true} -] -``` - -## Process Filters Component - -Collection of criteria used to filter process instances, which may be customized by users. - -### Basic Usage - -```html - - -``` - -#### Properties - -| 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 | -| 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. | -| hasIcon | boolean | Toggle to show or not the filter's icon. | - -If both `appId` and `appName` are specified then `appName` will take precedence and `appId` will be ignored. - -#### Events - -| Name | Description | -| --- | --- | -| onSuccess | Raised when the list of filters has been successfully loaded from the server | -| onError | Raised when an error occurs | -| filterClick | Raised when the user selects a filter from the list | - -### 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 - - - ``` - -You can use inside the filterParam one of the properties defined by [FilterParamsModel](#filterparamsmodel) (see below). - -#### FilterParamsModel - -```json -{ - "id": "number", - "name": "string", - "index": "number" -} -``` - -| Name | Type | Description | -| --- | --- | --- | -| id | string | The id of the task filter. | -| name | string | The name of the task filter, lowercase is checked. | -| index | number | Zero-based position of the filter in the array. | - -#### 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. -The AccordionComponent is exposed by the alfresco-core. - -```html - - - - - - -``` - -![how-create-accordion-menu](docs/assets/how-to-create-accordion-menu.png) - -## Start Process component - -Displays Start Process, allowing the user to specify some basic details needed to start a new process instance. - -### Basic Usage - -```html - - -``` -![adf-start-process ](docs/assets/start-process.png) - -#### Properties - -| Name | Description | -| --- | --- | -| 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)| - -#### Events - -| Name | Description | -| --- | --- | -| start | Raised when the process start | -| cancel | Raised when the process canceled | -| error | Raised when the start process fail | - -## Process Details component - -Displays detailed information on a specified process instance - -### Basic Usage - -```html - - -``` - -#### Properties - -| Name | Type | Description | -| --- | --- | --- | -| processInstanceId | string | (required): The numeric ID of the process instance to display | - -#### Events - -| Name | Description | -| --- | --- | -| processCancelledEmitter | Raised when the current process is cancelled by the user from within the component | -| taskFormCompletedEmitter | Raised when the form associated with an active task is completed from within the component | -| showProcessDiagram | Raised when the show diagram button is clicked | - -## Process Instance Details Header component - -Sub-component of the process details component, which renders some general information about the selected process. - -### Basic Usage - -```html - - -``` -![adf-process-instance-header](docs/assets/adf-process-instance-header-attachment.png) - -#### Properties - -| 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 | - -#### Events - -This component does not define any events. - -## Process Instance Tasks component - -Lists both the active and completed tasks associated with a particular process instance - -### Basic Usage - -```html - - -``` - -#### Properties - -| Name | Type | Description | -| --- | --- | --- | -| 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 | - -#### Events - -| Name | Description | -| --- | --- | -| taskFormCompletedEmitter | Raised when the form associated with an active task is completed from within the component | - -## Process Instance Comments component - -Displays comments associated with a particular process instance and allows the user to add new comments - -### Basic Usage - -```html - - -``` - -#### Properties - -| Name | Type | Description | -| --- | --- | --- | -| processInstanceId | string | (**required**): The numeric ID of the process instance to display comments for | - -## Process Attachment List component - -Displays attached documents on a specified process instance - -### Basic Usage - -```html - - -``` -![process-attachment-list-sample](docs/assets/process-attachment-list.png) - -#### Properties - -| Name | Type | Description | -| --- | --- | -- | -| processInstanceId | string | (**required**): The ID of the process instance to display | -| disabled | boolean | false | Disable/Enable read only mode for attachement list | - -#### Events - -| Name | Description | -| --- | --- | -| attachmentClick | Raised when the attachment double clicked or selected view option from context menu by the user from within the component and return a Blob obj of the object clicker| -| success | Raised when the attachment list fetch all the attach and return a list of attachments | -| error | Raised when the attachment list is not able to fetch the attachments for example network error | - -## Create Process Attachment component - -Displays Upload Component(Drag and Click) to upload the attachment to a specified process instance - -### Basic Usage - -```html - - -``` - -![process-create-attachment](docs/assets/process-create-attachment.png) - -#### Properties - -| Name | Type | Description | -| --- | --- | --- | -| processInstanceId | string | (**required**): The ID of the process instance to display | - -#### Events - -| Name | Description | -| --- | --- | -| 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 | - -## Process Audit Directive - -Provide a way to fetch the Process Audit information in the pdf or json format. - -### Basic Usage - -```html - -``` - -![adf-process-audit-directive](docs/assets/adf-process-audit-directive.png) - -#### Properties - -| Name | Type | Default | Description | -| --- | --- | --- | --- | -| taskId | string | | (**required**) The id of the task. | -| format | string | pdf | In whitch format you want the task audit information (pdf or json). | -| download | boolean | false | True If you want download the file on the click event. | -| fileName | string | Audit | Represent the name of the file to download in case the format is pdf. | - -#### Events - -| Name | Description | -| --- | --- | -| clicked | Raised when the task audit info is ready | -| error | Raised if there is an error during fetching task information | - -## Project Information - -### Prerequisites +## 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 +## Install ```sh npm install ng2-activiti-processlist ``` -### Build from sources +## Build from sources You can build component from sources with the following commands: @@ -436,7 +48,7 @@ npm run build > The `build` task rebuilds all the code, runs tslint, license checks > and other quality check tools before performing unit testing. -### NPM scripts +## NPM scripts | Command | Description | | --- | --- | @@ -445,7 +57,7 @@ npm run build | npm run test-browser | Run unit tests in the browser | npm run coverage | Run unit tests and display code coverage report | -### Demo +## Demo Please check the demo folder for a demo project @@ -455,6 +67,6 @@ npm install npm start ``` -### License +## License [Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE) diff --git a/ng2-components/ng2-activiti-tasklist/README.md b/ng2-components/ng2-activiti-tasklist/README.md index d3cd4709d0..ac17b110d2 100644 --- a/ng2-components/ng2-activiti-tasklist/README.md +++ b/ng2-components/ng2-activiti-tasklist/README.md @@ -6,735 +6,37 @@ Contains the Activiti Task List component and other related components and class -- [Activiti Task List component](#activiti-task-list-component) - * [Basic Usage](#basic-usage) - + [Properties](#properties) - + [Events](#events) - * [Details](#details) - + [DataTableAdapter example](#datatableadapter-example) - + [DataColumn Properties](#datacolumn-properties) -- [Activiti Task Details component](#activiti-task-details-component) - * [Basic Usage](#basic-usage-1) - + [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) - * [Basic Usage](#basic-usage-2) - + [Properties](#properties-2) - + [Events](#events-2) - * [Details](#details-2) - + [How filter the activiti apps](#how-filter-the-activiti-apps) -- [Activiti Filter component](#activiti-filter-component) - * [Basic Usage](#basic-usage-3) - + [Properties](#properties-3) - + [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) - * [Basic Usage](#basic-usage-4) - + [Properties](#properties-4) -- [Task Attachment List Component](#task-attachment-list-component) - * [Basic Usage](#basic-usage-5) - + [Properties](#properties-5) - + [Events](#events-4) -- [Create Task Attachment Component](#create-task-attachment-component) - * [Basic Usage](#basic-usage-6) - + [Properties](#properties-6) - + [Events](#events-5) -- [Activiti Task Header component](#activiti-task-header-component) - * [Basic Usage](#basic-usage-7) - + [Properties](#properties-7) - + [Events](#events-6) - * [Details](#details-4) - + [TaskDetailsModel](#taskdetailsmodel) -- [Task People Component](#task-people-component) - * [Basic Usage](#basic-usage-8) - + [Properties](#properties-8) - + [Events](#events-7) - * [Details](#details-5) - + [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 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 double without close search](#involve-people-double-double-without-close-search) -- [ADF Comments Component](#adf-comments-component) - * [Basic Usage](#basic-usage-9) - + [Properties](#properties-9) - + [Events](#events-8) -- [Start Task Component](#start-task-component) - * [Basic Usage](#basic-usage-10) - + [Properties](#properties-10) - + [Events](#events-9) -- [People Search component](#people-search-component) - * [Basic Usage](#basic-usage-11) - + [Properties](#properties-11) - + [Events](#events-10) - * [Details](#details-6) -- [Task Audit Directive](#task-audit-directive) - * [Basic Usage](#basic-usage-12) - + [Properties](#properties-12) - + [Events](#events-11) -- [Project Information](#project-information) - * [Prerequisites](#prerequisites) - * [Install](#install) - * [Build from sources](#build-from-sources) - * [NPM scripts](#npm-scripts) - * [Demo](#demo) - * [License](#license) +- [Documentation](#documentation) +- [Prerequisites](#prerequisites) +- [Install](#install) +- [Build from sources](#build-from-sources) +- [NPM scripts](#npm-scripts) +- [Demo](#demo) +- [License](#license) -## Activiti Task List component +## Documentation -Renders a list containing all the tasks matched by the parameters specified. +See the [ADF Tasklist](../../docIndex.md#adf-tasklist) section of the [docs index](../../docIndex.md) +for all available documentation on this library. -### Basic Usage - -```html - - -``` - -You can also use HTML-based schema declaration like shown below: - -```html - - - - - - -``` - -#### 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. | -| page | number | 0 | The page of the tasks to fetch. | -| size | number | 5 | The number of tasks to fetch. | -| assignment | string || The assignment of the process.
    Possible values are:
  • assignee : where the current user is the assignee
  • candidate: where the current user is a task candidate
  • group_x: where the task is assigned to a group where the current user is a member of.
  • no value: where the current user is involved
| -| selectionMode | string | 'single' | Row selection mode. Can be none, `single` or `multiple`. For `multiple` mode you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows. | -| multiselect | boolean | false | Toggles multiple row selection, renders checkboxes at the beginning of each row | -| 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 | -| rowsSelected | Raised when the a row is selected/unselected | - -### 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. - -| Name | Type | Default | Description | -| --- | --- | --- | --- | -| key | string | | Data source key, can be either column/property key like `title` or property path like `createdBy.name` | -| type | string (text\|image\|date) | text | Value type | -| format | string | | Value format (if supported by components), for example format of the date | -| sortable | boolean | true | Toggles ability to sort by this column, for example by clicking the column header | -| title | string | | Display title of the column, typically used for column headers | -| template | `TemplateRef` | | Custom column template | -| sr-title | string | | Screen reader title, used for accessibility purposes | -| class | string | | Additional CSS class to be applied to column (header and cells) | - -## Activiti Task Details component - -Shows the details of the task id passed in input - -### Basic Usage - -```html - - -``` - -#### Properties - -| Name | Type | Default | Description | -| --- | --- | --- | --- | -| taskId | string | | (**required**) The id of the task details that we are asking for. | -| showNextTask | boolean | true | Automatically render the next one, when the task is completed. | -| showFormTitle | boolean | true | Toggle rendering of the form title. | -| readOnlyForm | boolean | false | Toggle readonly state of the form. Enforces all form widgets render readonly if enabled. | -| showFormRefreshButton | boolean | true | Toggle rendering of the `Refresh` button. | -| showFormSaveButton | boolean | true| Toggle rendering of the `Save` outcome button. | -| showFormCompleteButton | boolean | true | Toggle rendering of the Form `Complete` outcome button | -| peopleIconImageUrl | string | | Define a custom people icon image | -| showHeader | boolean | true | Toggle task details Header component | -| showHeaderContent | boolean | true | Toggle collapsed/expanded state of the Header component | -| showInvolvePeople | boolean | true | Toggle `Involve People` feature for Header component | -| showComments | boolean | true | Toggle `Comments` feature for Header component | -| showChecklist | boolean | true | Toggle `Checklist` feature for Header component | -| fieldValidators | FormFieldValidator[] | [] | Field validators for use with the form. | - -#### Events - -| Name | Description | -| --- | --- | -| formLoaded | Raised when form is loaded or reloaded. | -| formSaved | Raised when form is submitted with `Save` or custom outcomes. | -| formCompleted | Raised when form is submitted with `Complete` outcome. | -| taskCreated | Raised when a checklist task is created. | -| executeOutcome | Raised when any outcome is executed, default behaviour can be prevented via `event.preventDefault()` | -| onError | Raised at any error | - -### Details - -#### Custom 'empty Activiti Task Details' template - -By default the Activiti Task Details provides the following message for the empty task details: - -```html -No Tasks -``` - -This can be changed by adding the following custom html template: - -```html - - - - - -``` - -Note that can put any HTML content as part of the template, including other Angular components. - -## Activiti Apps Component - -Shows all available apps. - -### Basic Usage - -```html - - -``` - -#### Properties - -| Name | Type | Description | -| --- | --- | --- | -| 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. | - -#### Events - -| Name | Description | -| --- | --- | -| appClick | Raised when an app entry is clicked | - -### Details - -#### How filter the activiti apps - -If you want to show some specific apps you can specify them through the filtersAppId parameters - -```html - - -``` - -In this specific case only the Tasks app, the app with deploymentId 15037 and the app with "my app name" will be showed -![how-filter-apps](docs/assets/how-filter-apps.png) - -You can use inside the filter one of the following property - -```json -{ - "defaultAppId": "string", - "deploymentId": "string", - "name": "string", - "id": "number", - "modelId": "number", - "tenantId": "number" -} -``` - -## Activiti Filter component - -Shows all available filters. - -### Basic Usage - -```html - -``` - -#### Properties - -| 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 | -| 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. | -| `hasIcon` | boolean | Toggle to show or not the filter's icon. | - -If both `appId` and `appName` are specified then `appName` will take precedence and `appId` will be ignored. - -#### Events - -| Name | Description | -| --- | --- | -| filterClick | Raised when the filter in the list is clicked | -| onSuccess | Raised when the list is loaded | -| onError | Raised if there is an error during the loading | - -### Details - -#### How filter the activiti task filters - - ```html - - - -``` - - -You can use inside the filterParam one of the properties from [FilterParamsModel](#filterparamsmodel) (see below). - -#### FilterParamsModel - -```json -{ - "id": "number", - "name": "string", - "index": "number" -} -``` - -| Name | Type | Description | -| --- | --- | --- | -| id | string | The id of the task filter | -| name | string | The name of the task filter, lowercase is checked | -| index | string | The zero-based position of the filter in the array. | - -#### 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. -The AccordionComponent is exposed by the alfresco-core. - -```html - - - - - - -``` - -![how-create-accordion-menu](docs/assets/how-to-create-accordion-menu.png) - -## Activiti Checklist Component - -Shows the checklist task functionality. - -### Basic Usage - -```html - -``` - -#### Properties - -| Name | Type | Description | -| --- | --- | --- | -| taskId | string | (**required**) The id of the parent task which sub tasks are attached on. | -| 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. | - - -## Task Attachment List Component - -Displays attached documents on a specified task - -### Basic Usage - -```html - - -``` -![task-attachment-list-sample](docs/assets/task-attachment-list.png) - -#### Properties - -| Name | Type | Description | -| --- | --- | --- | -| taskId | string | (**required**): The ID of the task to display | -| disabled | boolean | false | Disable/Enable read only mode for attachement list | - -#### Events - -| Name | Description | -| --- | --- | -| attachmentClick | Raised when the attachment double clicked or selected view option from context menu by the user from within the component and return a Blob obj of the object clicker| -| success | Raised when the attachment list fetch all the attach and return a list of attachments | -| error | Raised when the attachment list is not able to fetch the attachments for example network error | - -## Create Task Attachment Component - -Displays Upload Component(Drag and Click) to upload the attachment to a specified task - -### Basic Usage - -```html - - -``` - -![task-create-attachment](docs/assets/task-create-attachment.png) - -#### Properties - -| Name | Type | Description | -| --- | --- | --- | -| taskId | string | (**required**): The numeric ID of the task to display | - -#### Events - -| Name | Description | -| --- | --- | -| 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 | - -## Activiti Task Header component - -Shows all the information related to a task. - -### Basic Usage - -```html - - -``` - -#### Properties - -| Name | Type | Default | Description | -| --- | --- | --- | --- | -| taskDetails | [TaskDetailsModel](#taskdetailsmodel) | | (**required**) The task details related to the task. | -| formName | string | | The name of the form. | - -![adf-task-header](docs/assets/adf-task-header.png) - -#### Events - -| Name | Description | -| --- | --- | -| claim | Raised when the task is claimed. | -| unclaim | Raised when the task is unclaimed (requeued). | - -### 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 -{ - "id": "string", - "assignee": "User", - "dueDate": "data", - "endDate": "string", - "description": "string" -} -``` - -## Task People Component - -Displays involved users to a specified task - -### Basic Usage - -```html - - -``` - -![activiti-people](docs/assets/activiti_people.png) - -#### Properties - -| Name | Type | Description | -| --- | --- | --- | -| people | User[] | The array of User object to display | -| taskId | string | The numeric ID of the task | -| readOnly | boolean | The boolean flag | - -#### Events - -No Events - -### Details - -#### How to customize the people component behavior - -The people component provide two methods to customize the behavior: -- involveUserAndCloseSearch: The selected user is going to be added and the search section closed -- involveUserWithoutCloseSearch: The selected user is going to be added without close the search section - -In this way will be easy customize the people component to involve the user with the single or double click event: - -#### Involve People single click and close search - -```html - - -``` - -![involve-people-single-click-and-close-search](docs/assets/involve-people-single-click-and-close-search.gif) - -#### Involve People single click without close search - -```html - - -``` - -![involve-people-single-click-without-close-search](docs/assets/involve-people-single-click-without-close-search.gif) - -#### Involve People double click and close search - -```html - - -``` - -![involve-people-double-click-and-close-search](docs/assets/involve-people-double-click-and-close-search.gif) - -#### Involve People double double without close search - -```html - - -``` - -![involve-people-double-click-without-close-search](docs/assets/involve-people-double-click-without-close-search.gif) - -## ADF Comments Component - -Displays comments from users involved in a specified task and allows an involved user to add a comment to the task. - -### Basic Usage - -```html - - -``` - -![adf-comments](docs/assets/adf-comments.png) - -#### Properties - -| Name | Type | Description | -| --- | --- | --- | -| taskId | string | The numeric ID of the task | -| readOnly | boolean | The boolean flag | - -#### Events - -| Name | Description | -| --- | --- | -| error | Raised when an error occurs while displaying/adding a comment | - -## Start Task Component - -Creates/Starts new task for the specified app - -### Basic Usage - -```html - - -``` - -![adf-start-task](docs/assets/adf-start-task.png) - -#### Properties - -| Name | Type | Description | -| --- | --- | --- | -| appId | string | (**required**): The id of the app. | - -#### Events - -| Name | Description | -| --- | --- | -| success | Raised when the task is successfully created | -| cancel | Raised when the cancel button is pressed by the user | -| error | Raised if there is an error during task creation | - - -## People Search component - -Searches users/people. - -### Basic Usage - -```html - -``` - -#### Properties - -| Name | Type | Description | -| --- | --- | --- | -| results | Observable | 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 - - {{ 'TASK_DETAILS.LABELS.ADD_PEOPLE' | translate }} - {{ 'PEOPLE.ADD_USER' | translate }} - - -``` - -## Task Audit Directive - -Provides a way to fetch the Task Audit information in the pdf or json format. - -### Basic Usage - -```html - -``` - -![adf-task-audit-directive](docs/assets/adf-task-audit-directive.png) - -#### Properties - -| Name | Type | Default | Description | -| --- | --- | --- | --- | -| taskId | string | | (**required**) The id of the task. | -| format | string | pdf | In whitch format you want the task audit information (pdf or json). | -| download | boolean | false | True If you want download the file on the click event. | -| fileName | string | Audit | Represent the name of the file to download in case the format is pdf. | - -#### Events - -| Name | Description | -| --- | --- | -| clicked | Raised when the task audit info is ready | -| error | Raised if there is an error during fetching task information | - -## Project Information - -### Prerequisites +## 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 +## Install ```sh npm install ng2-activiti-tasklist ``` -### Build from sources +## Build from sources You can build component from sources with the following commands: ```sh @@ -746,7 +48,7 @@ npm run build > The `build` task rebuilds all the code, runs tslint, license checks > and other quality check tools before performing unit testing. -### NPM scripts +## NPM scripts | Command | Description | | --- | --- | @@ -755,7 +57,7 @@ npm run build | npm run test-browser | Run unit tests in the browser | npm run coverage | Run unit tests and display code coverage report | -### Demo +## Demo Please check the demo folder for a demo project @@ -765,6 +67,6 @@ npm install npm start ``` -### License +## License [Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE) diff --git a/ng2-components/ng2-alfresco-core/README.md b/ng2-components/ng2-alfresco-core/README.md index e8850e15e5..d9f110ed8a 100644 --- a/ng2-components/ng2-alfresco-core/README.md +++ b/ng2-components/ng2-alfresco-core/README.md @@ -6,1073 +6,37 @@ Contains a variety of components, directives and services used throughout ADF -- [Toolbar Component](#toolbar-component) - * [Basic Usage](#basic-usage) - + [Properties](#properties) - * [Details](#details) - + [Custom title](#custom-title) - + [Divider](#divider) - + [Dropdown menu](#dropdown-menu) - + [Custom color](#custom-color) -- [Accordion Component](#accordion-component) - * [Basic Usage](#basic-usage-1) - + [Properties](#properties-1) -- [Card View component](#card-view-component) - * [Basic Usage](#basic-usage-2) - + [Properties](#properties-2) - * [Details](#details-1) - + [Editing](#editing) - + [Defining properties](#defining-properties) - - [Card Text Item](#card-text-item) - - [Card Map Item](#card-map-item) - - [Card Date Item](#card-date-item) - + [Defining your custom card Item](#defining-your-custom-card-item) - - [1. Define the model for the custom type](#1-define-the-model-for-the-custom-type) - - [2. Define the component for the custom type](#2-define-the-component-for-the-custom-type) - - [3. Add you custom component to your module's entryComponents list](#3-add-you-custom-component-to-your-modules-entrycomponents-list) -- [Logout directive](#logout-directive) -- [Node Permission directive](#node-permission-directive) - * [Basic Usage](#basic-usage-3) - + [Properties](#properties-3) - * [Details](#details-2) - + [HTML element example](#html-element-example) - + [Angular component example](#angular-component-example) - + [Implementing the NodePermissionSubject interface](#implementing-the-nodepermissionsubject-interface) - + [Defining your components as an EXTENDIBLE_COMPONENT parent component](#defining-your-components-as-an-extendible_component-parent-component) -- [Upload Directive](#upload-directive) - * [Basic usage](#basic-usage) - * [Details](#details-3) - + [Modes](#modes) - - [Click mode](#click-mode) - - [Drop mode](#drop-mode) - + [Events](#events) - + [Styling](#styling) -- [Context Menu directive](#context-menu-directive) - * [Basic Usage](#basic-usage-4) - * [Details](#details-4) -- [Alfresco Api Service](#alfresco-api-service) - * [Basic Usage](#basic-usage-5) - * [Details](#details-5) -- [AppConfigService](#appconfigservice) - * [Details](#details-6) - + [Variable substitution in configuration strings](#variable-substitution-in-configuration-strings) -- [User Preferences Service](#user-preferences-service) - * [Details](#details-7) -- [Notification Service](#notification-service) - * [Details](#details-8) -- [Authentication Service](#authentication-service) - * [Basic Usage](#basic-usage-6) - + [Events](#events-1) - * [Details](#details-9) -- [Translation service](#translation-service) - * [Details](#details-10) - + [Registering translation sources](#registering-translation-sources) - + [Switching languages](#switching-languages) -- [Renditions Service](#renditions-service) -- [Project Information](#project-information) - * [Prerequisites](#prerequisites) - * [Install](#install) - * [Build from sources](#build-from-sources) - * [NPM scripts](#npm-scripts) - * [Demo](#demo) - * [License](#license) +- [Documentation](#documentation) +- [Prerequisites](#prerequisites) +- [Install](#install) +- [Build from sources](#build-from-sources) +- [NPM scripts](#npm-scripts) +- [Demo](#demo) +- [License](#license) -## Toolbar Component +## Documentation -Simple container for headers, titles, actions and breadcrumbs. +See the [ADF Core](../../docIndex.md#adf-core) section of the [docs index](../../docIndex.md) +for all available documentation on this library. -![](docs/adf-toolbar-01.png) - -### Basic Usage - -```html - - - - -``` - -#### Properties - -| Name | Type | Default | Description | -| --- | --- | --- | --- | -| title | string | | Toolbar title | -| color | string | | Toolbar color, can be changed to empty value (default), `primary`, `accent` or `warn`. | - -### Details - -#### Custom title - -You can use any HTML layout or Angular component as a content of the Title section by using the special `` component instead of the "title" attribute: - -```html - - - - - ... - -``` - -The toolbar should now look similar to the following: - -![](docs/adf-toolbar-02.png) - -#### Divider - -You can divide groups of elements with a visual separator ``: - -```html - - - - - - -``` - -#### Dropdown menu - -You can use the following example to create a dropdown menu: - -```html - - ... - - - - - - - - -``` - -The code above is based on the `` component from the `@angular/material` library. You can use any custom menu component as well. - -![](docs/adf-toolbar-03.png) - -Once you click the menu button you should see the following menu items as defined earlier: - -![](docs/adf-toolbar-04.png) - -#### Custom color - -Besides the default color you can use 'primary', 'accent', or 'warn' values: - -Depending on the overall application theme the colors of the toolbar should change. - -For example: - -![](docs/adf-toolbar-05.png) - -![](docs/adf-toolbar-06.png) - -![](docs/adf-toolbar-07.png) - -## Accordion Component - -Creates an accordion menu, optionally with a custom header and icon. - -### Basic Usage - -```html - - - - - -``` - -```ts -@Component({ - selector: 'my-component' -}) -export class MyComponent implements OnInit { - - titleHeading: string; - - constructor() { - this.titleHeading = 'My Group'; - } - -} -``` - -#### Properties - -| Name | Type | Description | -| --- | --- | --- | -| heading | string | The header title. | -| isSelected | boolean | Define if the accordion group is selected or not. | -| headingIcon | string | The material design icon. | -| hasAccordionIcon | boolean | Define if the accordion (expand) icon needs to be shown or not, the default value is true | - -## Card View component - -Displays a configurable property list renderer. - -![adf-custom-view](docs/assets/adf-custom-view.png) - -### Basic Usage - -```html - - - -``` - -#### Properties - -| Name | Type | Description | -| --- | --- | --- | -| properties | [CardViewItem](#cardviewitem)[] | (**required**) The custom view to render | -| editable | boolean | If the component editable or not | - -### Details - -You define the property list, the CardViewComponent does the rest. Each property represents a card view item (a row) in the card view component. At the time of writing two different kind of card view item (property type) is supported out of the box ([text](#card-text-item) item and [date](#card-date-item) item) but you can define your own custom types as well. - -#### Editing - -The card view can optionally allow its properties to be edited. You can control the editing of the properties in two level. -- **global level** - *via the editable parameter of the card-view.component* -- **property level** - *in each property via the editable attribute* - -If you set the global editable parameter to false, no properties can be edited regardless of what is set inside the property. - -#### Defining properties - -Properties is an array of models which one by one implements the CardViewItem interface. - -```js -export interface CardViewItem { - label: string; - value: any; - key: string; - default?: any; - type: string; - displayValue: string; - editable?: boolean; -} -``` - -At the moment three models are defined out of the box: - -- **[CardViewTextItemModel](#card-text-item)** - *for text items* -- **[CardViewMapItemModel](#card-map-item)** - *for map items* -- **[CardViewDateItemModel](#card-date-item)** - *for date items* - -Each of them are extending the abstract CardViewBaseItemModel class, and each of them are adding some custom functionality to the basic behaviour. - -```js - this.properties = [ - new CardViewTextItemModel({ - label: 'Name', - value: 'Spock', - key: 'name', - default: 'default bar' , - multiline: false - }), - new CardViewMapItemModel({ - label: 'My map', - value: new Map([['999', 'My Value']]), - key: 'map', - default: 'default map value' , - clickable: true - }), - new CardViewDateItemModel({ - label: 'Birth of date', - value: someDate, - key: 'birth-of-date', - default: new Date(), - format: '', - editable: true - }), - ... -] -``` - -##### Card Text Item - -CardViewTextItemModel is a property type for text properties. - -```js -const textItemProperty = new CardViewTextItemModel(options); -``` - -| Name | Type | Default | Description | -| --- | --- | --- | --- | -| label* | string | --- | The label to render | -| value* | any | --- | The original value | -| key* | string | --- | the key of the property. Have an important role when editing the property. | -| default | any | --- | The default value to render in case the value is empty | -| displayValue* | string | --- | The value to render | -| editable | boolean | false | Whether the property editable or not | -| clickable | boolean | false | Whether the property clickable or not | -| multiline | string | false | Single or multiline text | - -##### Card Map Item - -CardViewMapItemModel is a property type for map properties. - -```js -const mapItemProperty = new CardViewMapItemModel(options); -``` - -| Name | Type | Default | Description | -| --- | --- | --- | --- | -| label* | string | --- | The label to render | -| value* | Map | --- | A map that contains the key value pairs | -| key* | string | --- | the key of the property. Have an important role when editing the property. | -| default | any | --- | The default value to render in case the value is empty | -| displayValue* | string | --- | The value to render | -| clickable | boolean | false | Whether the property clickable or not | - -##### Card Date Item - -CardViewDateItemModel is a property type for date properties. - -```js -const dateItemProperty = new CardViewDateItemModel(options); -``` - -| Name | Type | Default | Description | -| --- | --- | --- | --- | -| label* | string | --- | The label to render | -| value* | any | --- | The original value | -| key* | string | --- | the key of the property. Have an important role when editing the property. | -| default | any | --- | The default value to render in case the value is empty | -| displayValue* | string | --- | The value to render | -| editable | boolean | false | Whether the property editable or not | -| format | boolean | "MMM DD YYYY" | any format that momentjs accepts | - -#### Defining your custom card Item - -Card item components are loaded dynamically, which makes you able to define your own custom component for the custom card item type. - -Let's consider you want to have a **stardate** type to display Captain Picard's birthday (47457.1). For this, you need to do the following steps. - -##### 1. Define the model for the custom type - -Your model has to extend the CardViewBaseItemModel and implement the CardViewItem interface. -*(You can check how the CardViewTextItemModel is implemented for further guidance.)* - -```js -export class CardViewStarDateItemModel extends CardViewBaseItemModel implements CardViewItem { - type: string = 'star-date'; - - get displayValue() { - return this.convertToStarDate(this.value) || this.default; - } - - private convertToStarDate(starTimeStamp: number): string { - // Do the magic - } -} -``` - -The most important part of this model is the value of the **type** attribute. This is how the Card View component will be able to recognise which component is needed to render it dynamically. - -The type is a **hyphen-separated-lowercase-words** string (just like how I wrote it). This will be converted to a PascalCase (or UpperCamelCase) string to find the right component. In our case the Card View component will look for the CardView**StarDate**ItemComponent. - -##### 2. Define the component for the custom type - -As discussed in the previous step the only important thing here is the naming of your component class ( **CardViewStarDateItemComponent**). Since the selector is not used in this case, you can give any selector name to it, but it makes sense to follow the angular standards. - -```js -@Component({ - selector: 'card-view-stardateitem' // For example - ... -}) -export class CardViewStarDateItemComponent { - @Input() - property: CardViewStarDateItemModel; - - @Input() - editable: boolean; - - constructor(private cardViewUpdateService: CardViewUpdateService) {} - - isEditble() { - return this.editable && this.property.editable; - } - - showStarDatePicker() { - ... - } -} - -``` -To make your component editable, you can have a look on either the CardViewTextItemComponent' or on the CardViewDateItemComponent's source. - -##### 3. Add you custom component to your module's entryComponents list - -For Angular to be able to load your custom component dynamically, you have to register your component in your modules entryComponents. - -```js -@NgModule({ - imports: [...], - declarations: [ - CardViewStarDateItemComponent - ], - entryComponents: [ - CardViewStarDateItemComponent - ], - exports: [...] -}) -export class MyModule {} -``` - -## Logout directive - -Upon the dectorated element click, logs out and automatically redirects to `/`login` route: - -```html - -``` - -## Node Permission directive - -Selectively disables an HTML element or Angular component - -### Basic Usage - -#### Properties - -| Name | Type | Default | Description | -| --- | --- | --- | --- | -| adf-node-permission | [Permissions](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-core/src/models/permissions.enum.ts) | null | Node permission to check (create, delete, update, updatePermissions, !create, !delete, !update, !updatePermissions)| -| adf-nodes | MinimalNodeEntity[] | [] | Nodes to check permission for | - -### Details - -The `NodePermissionDirective` allows you to disable an HTML element or Angular component -by taking a collection of the `MinimalNodeEntity` instances and checking the particular permission. - -The decorated element will be disabled if: - -- there are no nodes in the collection -- at least one of the nodes has no expected permission - -#### HTML element example - -The best example to show `NodePermissionDirective` in action is by binding DocumentList selection property to a toolbar button. - -For example the "Delete" button should be disabled if no selection is present or if user has no rights to delete at least one node in the selection. - -```html - - - - - - ... - -``` - -The button will become disabled by default, and is going to change its state once user selects/unselects one or multiple documents that current user has permission to delete. - -#### Angular component example - -You can apply the directive on any angular component which implements the NodePermissionSubject interface. The upload drag area component can be a good candidate, since this one implements that interface. Applying the directive on an angular component is pretty much the same as applying it on an html element. - -```html - - ... - -``` - -When designing a component you want to work this directive with, you have two important things to care about. - -#### Implementing the NodePermissionSubject interface - -The component has to implement the NodePermissionSubject interface which basically means it has to have a boolean **disabled** property. This is the property which will be set by the directive. - -```js -import { NodePermissionSubject } from 'ng2-alfresco-core'; - -@Component({...}) -export class UploadDragAreaComponent implements NodePermissionSubject { - public disabled: boolean = false; -} -``` - -#### Defining your components as an EXTENDIBLE_COMPONENT parent component - -The directive will look up the component in the dependency injection tree, up to at most one step above the current DI level (@Host). Because of this, you have to provide your component with forward referencing as the EXTENDIBLE_COMPONENT. - -```js -import { EXTENDIBLE_COMPONENT } from 'ng2-alfresco-core'; - -@Component({ - ... - providers: [ - { provide: EXTENDIBLE_COMPONENT, useExisting: forwardRef(() => UploadDragAreaComponent)} - ] -}) -export class UploadDragAreaComponent implements NodePermissionSubject { ... } -``` - -## Upload Directive - -Allows your components or common HTML elements reacting on File drag and drop in order to upload content. - -### Basic usage - -The directive itself does not do any file management process, -but collects information on dropped files and raises corresponding events instead. - -```html -
- Drop files here... -
-``` - -It is possible controlling when upload behaviour is enabled/disabled by binding directive to a `boolean` value or expression: - -```html -
...
-
...
-
...
-``` - -You can decorate any element including buttons, for example: - -```html - -``` - -### Details - -Used by attaching to an element or component. - -#### Modes - -Directive supports several modes: - -- **drop** mode, where decorated element acts like a drop zone for files (**default** mode) -- **click** mode, where decorated element invokes File Dialog to select files or folders. - -It is also possible combining modes together. - -```html -
...
-
...
-
...
-``` - -##### Click mode - -For the click mode you can provide additional attributes for the File Dialog: - -- **directory**, enables directory selection -- **multiple**, enables multiple file/folder selection -- **accept**, filters the content accepted - -```html -
-
- -
-
-``` - -##### Drop mode - -For the moment upload directive supports only Files (single or multiple). -Support for Folders and `accept` filters is subject to implement. - -#### Events - -Once a single or multiple files are dropped on the decorated element the `upload-files` [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) is raised. -The DOM event is configured to have `bubbling` enabled, so any component up the component tree can handle, process or prevent it: - -```html -
-
-
-``` - -```ts -onUploadFiles(e: CustomEvent) { - console.log(e.detail.files); - - // your code -} -``` - -Please note that event will be raised only if valid [Files](https://developer.mozilla.org/en-US/docs/Web/API/File) were dropped onto the decorated element. - -The `upload-files` event is cancellable, so you can stop propagation of the drop event to upper levels in case it has been already handled by your code: - -```ts -onUploadFiles(e: CustomEvent) { - e.stopPropagation(); - e.preventDefault(); - - // your code -} -``` - -It is also possible attaching arbitrary data to each event in order to access it from within external event handlers. -A typical scenario is data tables where you may want to handle also the data row and/or underlying data to be accessible upon files drop. - -You may be using `adf-upload-data` to bind custom values or objects for every event raised: - -```html -
-
-
-
-``` - -As part of the `details` property of the [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) you can get access to the following: - -```ts -detail: { - sender: UploadDirective, // directive that raised given event - data: any, // arbitrary data associated (bound) - files: File[] // dropped files -} -``` - -#### Styling - -The decorated element gets `adf-upload__dragging` CSS class name in the class list every time files are dragged over it. -This allows changing look and feel of your components in case additional visual indication is required, -for example you may want drawing a dashed border around the table row on drag: - -```html - - - ... - -
-``` - -```css -.adf-upload__dragging > td:first-child { - border-left: 1px dashed rgb(68,138,255); -} - -.adf-upload__dragging > td { - border-top: 1px dashed rgb(68,138,255); - border-bottom: 1px dashed rgb(68,138,255); -} - -.adf-upload__dragging > td:last-child { - border-right: 1px dashed rgb(68,138,255); -} -``` - -## Context Menu directive - -### Basic Usage - -```html - - -``` - -```ts -@Component({ - selector: 'my-component' -}) -export class MyComponent implements OnInit { - - menuItems: any[]; - - constructor() { - this.menuItems = [ - { title: 'Item 1', subject: new Subject() }, - { title: 'Item 2', subject: new Subject() }, - { title: 'Item 3', subject: new Subject() } - ]; - } - - ngOnInit() { - this.menuItems.forEach(l => l.subject.subscribe(item => this.commandCallback(item))); - } - - commandCallback(item) { - alert(`Executing ${item.title} command.`); - } - -} -``` - -### Details - -See **Demo Shell** or **DocumentList** implementation for more details and use cases. - -## Alfresco Api Service - -Provides access to initialized **AlfrescoJSApi** instance. - -### Basic Usage - -```ts -export class MyComponent implements OnInit { - - constructor(private apiService: AlfrescoApiService) { - } - - ngOnInit() { - let nodeId = 'some-node-id'; - let params = {}; - this.apiService.getInstance().nodes - .getNodeChildren(nodeId, params) - .then(result => console.log(result)); - } -} -``` - -### Details - -**Note for developers**: _the TypeScript declaration files for Alfresco JS API -are still under development and some Alfresco APIs may not be accessed -via your favourite IDE's intellisense or TypeScript compiler. -In case of any TypeScript type check errors you can still call any supported -Alfresco JS api by casting the instance to `any` type like the following:_ - -```ts -let api: any = this.apiService.getInstance(); -api.nodes.addNode('-root-', body, {}); -``` - -## AppConfigService - -Supports app configuration settings, stored server side. - -### Details - -The `AppConfigService` service provides support for loading and accessing global application configuration settings that you store on the server side in the form of a JSON file. - -You may need this service when deploying your ADF-based application to production servers. - -There can be more than one server running web apps with different settings, like different addresses for Alfresco Content/Process services. - -Or there is a need to change global settings for all the clients. - -The service is already pre-configured to look for the "app.config.json" file in the application root address. - -That allows deploying ADF-based web applications to multiple servers together with different settings files, for example having development, staging or production environments. - -Example of the default settings file content: - -**app.config.json** - -```json -{ - "ecmHost": "http://localhost:3000/ecm", - "bpmHost": "http://localhost:3000/bpm", - "application": { - "name": "Alfresco" - } -} -``` - -Please note that settings above are default ones coming with the server. -You can override the values in your custom `app.config.json` file if needed. - -Below is a simple example of using the AppConfigService in practice. - -**app.component.ts** - -```ts -import { AppConfigService } from 'ng2-alfresco-core'; - -@Component({...}) -export class AppComponent { - - constructor(appConfig: AppConfigService) { - - // get nested properties by the path - console.log(appConfig.get('application.name')); - - // use generics for type safety - let version: number = appConfig.get('version'); - console.log(version); - } -} -``` - -Your custom components can also benefit from the `AppConfigService`, -you can put an unlimited number of settings and optionally a nested JSON hierarchy. - -#### Variable substitution in configuration strings - -The `AppConfigService` also supports a limited set of variable substitutions to greatly simplify certain scenarios. - -```json -{ - "ecmHost": "http://{hostname}:{port}/ecm", - "bpmHost": "http://{hostname}:{port}/bpm", - "application": { - "name": "Alfresco" - } -} -``` - -The supported variables are: - -| Variable name | Runtime value | -| --- | --- | -| hostname | `location.hostname` | -| port | `location.port` | - -## User Preferences Service - -Stores preferences for components. - -### Details - -The preferences are bound to a particular `prefix` so the application can switch between different profiles on demand. - -For example upon login you can set the `prefix` as current username: - -```ts -import { UserPreferencesService, AuthenticationService } from 'ng2-alfresco-core'; - -@Component({...}) -class AppComponent { - constructor(private userPreferences: UserPreferencesService, - private authService: AuthenticationService) { - } - - onLoggedIn() { - this.userPreferences.setStoragePrefix( - this.authService.getEcmUsername() - ); - } -} -``` - -As soon as you assign the storage prefix all settings that you get or set via the `UserPreferencesService` will be saved to dedicated profile. - -You can import the service in your controller and use its APIs like below: - -```ts -@Component({...}) -class AppComponent { - constructor(userPreferences: UserPreferencesService) { - - userPreferences.set('myProperty1', 'value1'); - userPreferences.set('myProperty2', 'value2'); - - console.log( - userPreferences.get('myProperty1') - ); - } -} -``` - -The service also provides quick access to a set of the "known" properties used across ADF components. - -Known properties: - -- paginationSize (number) - gets or sets the preferred pagination size - -## Notification Service - -Shows a notification message with optional feedback. - -### Details - -The Notification Service is implemented on top of the Angular 2 Material Design snackbar. -Use this service to show a notification message, and optionally get feedback from it. - -```ts -import { NotificationService } from 'ng2-alfresco-core'; - -export class MyComponent implements OnInit { - - constructor(private notificationService: NotificationService) { - } - - ngOnInit() { - this.notificationService.openSnackMessage('test', 200000).afterDismissed().subscribe(() => { - console.log('The snack-bar was dismissed'); - }); - } -} -``` - -```ts -import { NotificationService } from 'ng2-alfresco-core'; - -export class MyComponent implements OnInit { - - constructor(private notificationService: NotificationService) { - } - - ngOnInit() { - this.notificationService.openSnackMessageAction('Do you want to report this issue?', 'send', 200000).afterDismissed().subscribe(() => { - console.log('The snack-bar was dismissed'); - }); - } -} -``` - -## Authentication Service - -Provides authentication for use with the Login component. - -### Basic Usage - -**app.component.ts** - -```ts -import { AuthenticationService } from 'ng2-alfresco-core'; - -@Component({...}) -export class AppComponent { - constructor(authService: AuthenticationService) { - this.AuthenticationService.login('admin', 'admin').subscribe( - token => { - console.log(token); - }, - error => { - console.log(error); - } - ); - } -} -``` - -#### Events - -| Name | Description | -| --- | --- | -| onLogin | Raised when user logs in | -| onLogout | Raised when user logs out | - -### Details - -The authentication service is used inside the [login component](../ng2-alfresco-login) and is possible to find there an example of how to use it. - -## Translation service - -Supports localisation. - -### Details - -#### Registering translation sources - -In order to enable localisation support you will need to create a `/resources/i18n/en.json` file -and register its parent `i18n` folder with your component or application module. - -For example: - -```ts -import { TRANSLATION_PROVIDER } from 'ng2-alfresco-core'; - -@NgModule({ - ... - providers: [ - ... - { - provide: TRANSLATION_PROVIDER, - multi: true, - useValue: { - name: 'ng2-alfresco-core', - source: 'assets/ng2-alfresco-core' - } - } - ] -}) -``` - -Note: the `source` property points to the web application root, please ensure you have webpack settings to copy all the i18n files at compile time. - -```text -index.html -assets/ng2-alfresco-core/i18n/en.json -... -``` - -You can register as many entries as you would like. - -#### Switching languages - -Depending on your application, you may want to have buttons or dropdown menus to allow language selection for the end users. - -You can use `TranslationService` to switch languages from your code based on input events of your choice: - -```ts -class MyComponent { - constructor(private translateService: TranslationService) { - } - - onLanguageClicked(lang: string) { - this.translateService.use(lang || 'en'); - } -} -``` - -## Renditions Service - -* getRenditionsListByNodeId(nodeId: string) -* createRendition(nodeId: string, encoding: string) -* getRendition(nodeId: string, encoding: string) -* isRenditionAvailable(nodeId: string, encoding: string) - -## Project Information - -### Prerequisites +## 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 +## Install ```sh npm install ng2-alfresco-core ``` -### Build from sources +## Build from sources You can build component from sources with the following commands: @@ -1084,7 +48,7 @@ npm run build > The `build` task rebuilds all the code, runs tslint, license checks > and other quality check tools before performing unit testing. -### NPM scripts +## NPM scripts | Command | Description | | --- | --- | @@ -1093,7 +57,7 @@ npm run build | npm run test-browser | Run unit tests in the browser | npm run coverage | Run unit tests and display code coverage report | -### Demo +## Demo Please check the demo folder for a demo project @@ -1103,6 +67,6 @@ npm install npm start ``` -### License +## License [Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE) diff --git a/ng2-components/ng2-alfresco-datatable/README.md b/ng2-components/ng2-alfresco-datatable/README.md index 45aed6c134..c1aa8d60e9 100644 --- a/ng2-components/ng2-alfresco-datatable/README.md +++ b/ng2-components/ng2-alfresco-datatable/README.md @@ -6,723 +6,37 @@ Contains the DataTable component and other related components and classes. -- [DataTable component](#datatable-component) - * [Basic usage](#basic-usage) - + [Properties](#properties) - + [Events](#events) - * [Details](#details) - + [DataColumn Properties](#datacolumn-properties) - + [DataTable DOM Events](#datatable-dom-events) - + [Automatic column header translation](#automatic-column-header-translation) - + [Custom tooltips](#custom-tooltips) - + [Custom Empty content template](#custom-empty-content-template) - + [Loading content template](#loading-content-template) - + [Column Templates](#column-templates) - + [Events](#events-1) - - [rowClick event](#rowclick-event) - - [rowDblClick event](#rowdblclick-event) - - [showRowContextMenu event](#showrowcontextmenu-event) - - [showRowActionsMenu event](#showrowactionsmenu-event) - - [executeRowAction event](#executerowaction-event) - + [Data sources](#data-sources) - + [Generate schema](#generate-schema) -- [Pagination Component](#pagination-component) - * [Basic Usage](#basic-usage) - + [Properties](#properties-1) - + [Events](#events-2) - * [Details](#details-1) -- [Project Information](#project-information) - * [Prerequisites](#prerequisites) - * [Install](#install) - * [Build from sources](#build-from-sources) - * [NPM scripts](#npm-scripts) - * [Demo](#demo) - * [License](#license) +- [Documentation](#documentation) +- [Prerequisites](#prerequisites) +- [Install](#install) +- [Build from sources](#build-from-sources) +- [NPM scripts](#npm-scripts) +- [Demo](#demo) +- [License](#license) -## DataTable component +## Documentation -Displays data as a table with customizable columns and presentation. +See the [ADF Datatable](../../docIndex.md#adf-datatable) section of the [docs index](../../docIndex.md) +for all available documentation on this library. -![DataTable demo](docs/assets/datatable-demo.png) - -See it live: [DataTable Quickstart](https://embed.plnkr.co/80qr4YFBeHjLMdAV0F6l/) - -### Basic usage - -**app.component.html** - -```html - - -``` - -**app.component.ts** - -```ts -import { ObjectDataTableAdapter } from 'ng2-alfresco-datatable'; - -@Component({...}) -export class DataTableDemo { - data: ObjectDataTableAdapter; - - constructor() { - this.data = new ObjectDataTableAdapter( - // data - [ - {id: 1, name: 'Name 1'}, - {id: 2, name: 'Name 2'} - ], - // schema - [ - { - type: 'text', - key: 'id', - title: 'Id', - sortable: true - }, - { - type: 'text', - key: 'name', - title: 'Name', - cssClass: 'full-width', - sortable: true - } - ] - ); - } -} -``` - -You can also use HTML-based schema declaration like shown below: - -```html - - - - - - - - - -``` - -```ts -import { ObjectDataTableAdapter } from 'ng2-alfresco-datatable'; - -@Component({...}) -export class DataTableDemo { - data: ObjectDataTableAdapter; - - constructor() { - this.data = new ObjectDataTableAdapter( - // data - [ - { - id: 1, - name: 'Name 1', - createdBy : { name: 'user'}, - createdOn: 123, - icon: 'http://example.com/img.png' - }, - { - id: 2, - name: 'Name 2', - createdBy : { name: 'user 2'}, - createdOn: 123, - icon: 'http://example.com/img.png' - } - ] - ); - } -} -``` - -#### Properties - -| Name | Type | Default | Description | -| --- | --- | --- | --- | -| selectionMode | string | 'single' | Row selection mode. Can be none, `single` or `multiple`. For `multiple` mode you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows. | -| rowStyle | string | | The inline style to apply to every row, see [NgStyle](https://angular.io/docs/ts/latest/api/common/index/NgStyle-directive.html) docs for more details and usage examples | -| rowStyleClass | string | | The CSS class to apply to every row | -| data | DataTableAdapter | instance of **ObjectDataTableAdapter** | data source | -| rows | Object[] | [] | The rows that the datatable should show | -| multiselect | boolean | false | Toggles multiple row selection, renders checkboxes at the beginning of each row | -| actions | boolean | false | Toggles data actions column | -| actionsPosition | string (left\|right) | right | Position of the actions dropdown menu. | -| fallbackThumbnail | string | | Fallback image for row where thumbnail is missing| -| contextMenu | boolean | false | Toggles custom context menu for the component | -| allowDropFiles | boolean | false | Toggle file drop support for rows (see **ng2-alfresco-core/UploadDirective** for more details) | -| loading | boolean | false | Flag that indicates if the datatable is in loading state and needs to show the loading template. Read the documentation above to see how to configure a loading template | -| showHeader | boolean | true | Toggles header visibility | -| selection | DataRow[] | [] | Contains selected rows | - -#### 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 | - -### Details - -#### DataColumn Properties - -| Name | Type | Default | Description | -| --- | --- | --- | --- | -| key | string | | Data source key, can be either column/property key like `title` or property path like `createdBy.name` | -| type | string (text\|image\|date) | text | Value type | -| format | string | | Value format (if supported by components), for example format of the date | -| sortable | boolean | true | Toggles ability to sort by this column, for example by clicking the column header | -| title | string | | Display title of the column, typically used for column headers. You can use the i18n resouce key to get it translated automatically. | -| template | `TemplateRef` | | Custom column template | -| sr-title | string | | Screen reader title, used for accessibility purposes | -| class | string | | Additional CSS class to be applied to column (header and cells) | -| formatTooltip | Function | | Custom tooltip formatter function. | - -#### DataTable DOM Events - -Below are the DOM events raised by DataTable component. -These events bubble up the component tree and can be handled by any parent component. - -| Name | Description | -| --- | --- | -| row-click | Raised when user clicks a row | -| row-dblclick | Raised when user double-clicks a row | -| row-select | Raised after user selects a row | -| row-unselect | Raised after user unselects a row | - -For example: - -```html - - - - - -``` - -```ts -onRowClick(event) { - console.log(event); -} -``` - -![](docs/assets/datatable-dom-events.png) - -#### Automatic column header translation - -You can also use i18n resource keys with DataColumn `title` property. -The component will automatically check the corresponding i18n resources and fetch corresponding value. - -```html - - -``` - -This feature is optional. Regular text either plain or converted via the `translate` pipe will still be working as it was before. - -#### 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. - -```html - - -``` - -And the code in this case will be similar to the following: - -```ts -import { DataColumn, DataRow } from 'ng2-alfresco-datatable'; - -@Component({...}) -export class MyComponent { - ... - - getNodeNameTooltip(row: DataRow, col: DataColumn): string { - if (row) { - return row.getValue('name'); - } - return null; - } -} -``` - -To disable the tooltip your function can return `null` or an empty string. - -#### Custom Empty content template - -You can add a template that will be shown when there are no results in your datatable: - -```html - - - - - - -

Sorry, no content

- - - - -``` - -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 `, , ` elements: - -```html - - - - "'My custom Header'" - "'My custom body'" - "'My custom footer'" - "'HTML Layout'" - - - -``` - -| Name | Type | Default | Description -| --- | --- | --- | --- | -| emptyListImageUrl | String | empty_doc_lib.svg | The default image used as background | -| emptyMsg | String | This list is empty | The default title message | -| dragDropMsg | String | Drag and drop | The default drag and drop message | -| additionalMsg | String | Drag and drop | The default additional message | - -![](docs/assets/adf-empty-list.png) - -#### Loading content template - -You can add a template that will be shown during the loading of your data: - -```html - - - - - - - - - - - -``` - -```js - isLoading(): boolean { - //your custom logic to identify if you are in a loading state - } -``` - -Note: the `` and `` can be used together - -#### Column Templates - -It is possible to assign a custom column template like the following: - -```html - - - - - - - -``` - -Example above shows access to the underlying cell value by binding `value` property to the underlying context `value`: - -```html -