inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-2135] Updated tables of contents and tools (#2820)

Browse Source
This commit is contained in:
Andy Stark
2018-01-11 10:15:00 +00:00
committed by Eugenio Romano
parent 9e706d68e4
commit 994041fb23
23 changed files with 353 additions and 464 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
docs/README.md
View File

@@ -2,8 +2,9 @@
Below is an index of the documentation for ADF. The [User Guide](#user-guide)
section discusses particular techniques in depth. The other sections are references for the ADF
libraries. Items marked with an asterisk (\*) do not currently have documentation - the link leads
to the appropriate source file.
libraries. Click the name of an item to see its documentation or click the source link to see
its main source file. Note that ADF is developed continuously, so the source files for some items
may be listed here before their documentation is available.
## Contents
@@ -61,13 +62,13 @@ for more information about installing and using the source code.
| [Toolbar title component](toolbar-title.component.md) | Supplies custom HTML to be included in a Toolbar component title. | [Source](../lib/core/toolbar/toolbar-title.component.ts) |
| [Toolbar component](toolbar.component.md) | Simple container for headers, titles, actions and breadcrumbs. | [Source](../lib/core/toolbar/toolbar.component.ts) |
| [User info component](user-info.component.md) | Shows user information. | [Source](../lib/core/userinfo/components/user-info.component.ts) |
| [Viewer component](viewer.component.md) | See it live: [Viewer Quickstart](https://embed.plnkr.co/iTuG1lFIXfsP95l6bDW6/) | [Source](../lib/core/viewer/components/viewer.component.ts) |
| [Viewer component](viewer.component.md) | Displays content from an ACS repository. | [Source](../lib/core/viewer/components/viewer.component.ts) |
## Directives
| Name | Description | Source link |
| --------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |
| [Context menu directive](context-menu.directive.md) | See **Demo Shell** or **DocumentList** implementation for more details and use cases. | [Source](../lib/core/context-menu/context-menu.directive.ts) |
| [Context menu directive](context-menu.directive.md) | Adds a context menu to a component. | [Source](../lib/core/context-menu/context-menu.directive.ts) |
| [Highlight directive](highlight.directive.md) | Adds highlighting to selected sections of an HTML element's content. | [Source](../lib/core/directives/highlight.directive.ts) |
| [Logout directive](logout.directive.md) | Logs the user out when the decorated element is clicked. | [Source](../lib/core/directives/logout.directive.ts) |
| [Node delete directive](node-delete.directive.md) | Deletes multiple files and folders. | [Source](../lib/core/directives/node-delete.directive.ts) |
@@ -93,7 +94,7 @@ for more information about installing and using the source code.
| --------------------------------------------------- | ----------------------------------------------------------------------------------------- | ----------------------------------------------------- |
| [File size pipe](file-size.pipe.md) | Converts a number of bytes to the equivalent in KB, MB, etc. | [Source](../lib/core/pipes/file-size.pipe.ts) |
| [Mime type icon pipe](mime-type-icon.pipe.md) | Retrieves an icon to represent a MIME type. | [Source](../lib/core/pipes/mime-type-icon.pipe.ts) |
| [Node name tooltip pipe](node-name-tooltip.pipe.md) | Formats the tooltip of the underlying Node based on the following rules: | [Source](../lib/core/pipes/node-name-tooltip.pipe.ts) |
| [Node name tooltip pipe](node-name-tooltip.pipe.md) | Formats the tooltip for a Node. | [Source](../lib/core/pipes/node-name-tooltip.pipe.ts) |
| [Text highlight pipe](text-highlight.pipe.md) | Adds highlighting to words or sections of text that match a search string. | [Source](../lib/core/pipes/text-highlight.pipe.ts) |
| [Time ago pipe](time-ago.pipe.md) | Converts a recent past date into a number of days ago. | [Source](../lib/core/pipes/time-ago.pipe.ts) |
| [User initial pipe](user-initial.pipe.md) | Takes the name fields of a UserProcessModel object and extracts and formats the initials. | [Source](../lib/core/pipes/user-initial.pipe.ts) |
@@ -148,9 +149,9 @@ for more information about installing and using the source code.
### Other classes and interfaces
| Name | Description | Source link |
| -- | -- | -- |
| [Data Table Adapter interface](DataTableAdapter.md) | Defines how table data is supplied to [DataTable](datatable.component.md) and [Tasklist](task-list.component.md) components. | [Source](../core/datatable/data/datatable-adapter.ts) |
| Name | Description | Source link |
| ------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- |
| [Data Table Adapter interface](DataTableAdapter.md) | Defines how table data is supplied to [DataTable](datatable.component.md) and [Tasklist](task-list.component.md) components. | [Source](../core/datatable/data/datatable-adapter.ts) |
| [Form Field Validator interface](FormFieldValidator.md) | Defines how the input fields of [ADF Form](form.component.md) and [ADF Task Details](task-details.component.md) components are validated. | [Source](../core/form/components/widgets/core/form-field-validator.ts) |
[(Back to Contents)](#contents)
@@ -174,7 +175,7 @@ for more information about installing and using the source code.
| [Content action component](content-action.component.md) | Adds options to a Document List actions menu for a particular content type. | [Source](../lib/content-services/document-list/components/content-action/content-action.component.ts) |
| [Document list component](document-list.component.md) | Displays the documents from a repository. | [Source](../lib/content-services/document-list/components/document-list.component.ts) |
| [Search control component](search-control.component.md) | Displays a input text which shows find-as-you-type suggestions. | [Source](../lib/content-services/search/components/search-control.component.ts) |
| [Search component](search.component.md) | You have to add a template that will be shown when the results are loaded. | [Source](../lib/content-services/search/components/search.component.ts) |
| [Search component](search.component.md) | Searches items for supplied search terms. | [Source](../lib/content-services/search/components/search.component.ts) |
| [Sites dropdown component](sites-dropdown.component.md) | Displays a dropdown menu to show and interact with the sites of the current user. | [Source](../lib/content-services/site-dropdown/sites-dropdown.component.ts) |
| [Like component](like.component.md) | Allows a user to add "likes" to an item. | [Source](../lib/content-services/social/like.component.ts) |
| [Rating component](rating.component.md) | Allows a user to add ratings to an item. | [Source](../lib/content-services/social/rating.component.ts) |
@@ -186,7 +187,7 @@ for more information about installing and using the source code.
| [Upload drag area component](upload-drag-area.component.md) | Adds a drag and drop area to upload files to Alfresco. | [Source](../lib/content-services/upload/components/upload-drag-area.component.ts) |
| [Version list component](version-list.component.md) | Displays the version history of a node in a [Version Manager component](version-manager.component.md) | [Source](../lib/content-services/version-manager/version-list.component.ts) |
| [Version manager component](version-manager.component.md) | Displays the version history of a node with the ability to upload a new version. | [Source](../lib/content-services/version-manager/version-manager.component.ts) |
| [Webscript component](webscript.component.md) | Another example: | [Source](../lib/content-services/webscript/webscript.component.ts) |
| [Webscript component](webscript.component.md) | Provides access to Webscript features. | [Source](../lib/content-services/webscript/webscript.component.ts) |
| _Content metadata card component_ | _Not currently documented_ | [Source](../lib/content-services/content-metadata/content-metadata-card.component.ts) |
| _Content metadata component_ | _Not currently documented_ | [Source](../lib/content-services/content-metadata/content-metadata.component.ts) |
| _Content node selector panel component_ | _Not currently documented_ | [Source](../lib/content-services/content-node-selector/content-node-selector-panel.component.ts) |

13
docs/alfresco-api.service.md
View File

@@ -2,17 +2,6 @@
Provides access to initialized **AlfrescoJSApi** instance.
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Basic Usage](#basic-usage)
- [Details](#details)
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic Usage
```ts
@@ -42,4 +31,4 @@ 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, {});
```
```

11
docs/analytics-generator.component.md
View File

@@ -14,20 +14,13 @@ Generates and shows charts
### Properties
| Name | Type | Description |
| --- | --- | -- |
| ---- | ---- | ----------- |
| reportId | string | The report id |
| reportParamQuery | ReportQuery | The object contains all the parameters that the report needs |
### Events
| Name | Description |
| --- | --- |
| ---- | ----------- |
| success | Raised when the charts are loaded |
| error | Raised when an error occurs during the loading |
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
<!-- seealso start -->
## See also
<!-- seealso end -->

17
docs/analytics-report-list.component.md
View File

@@ -13,22 +13,15 @@ Shows a list of all available reports
### 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|
| ---- | ---- | -------- | ------- | ----------- |
| 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 |
| --- | --- |
| ---- | ----------- |
| success | The event is emitted when the report list is loaded |
| error | The event is emitted when an error occurs during the loading |
| reportClick | The event is emitted when the report in the list is selected |
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
<!-- seealso start -->
## See also
<!-- seealso end -->

11
docs/analytics.component.md
View File

@@ -16,7 +16,7 @@ Shows the charts related to the reportId passed as input
### Properties
| Name | Type | Description |
| --- | --- | --- |
| ---- | ---- | ----------- |
| appId | string | The application id |
| reportId | string | The report id |
| hideParameters | boolean | Toggle the analytics parameters |
@@ -36,15 +36,8 @@ You can also hide chart parameters UI by setting the `hideParameters` to `true`:
### Events
| Name | Description |
| --- | --- |
| ---- | ----------- |
| success | The event is emitted when the report parameters are loaded |
| error | 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 |
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
<!-- seealso start -->
## See also
<!-- seealso end -->

13
docs/app-config.service.md
View File

@@ -2,17 +2,6 @@
Supports app configuration settings, stored server side.
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Details](#details)
* [Variable substitution in configuration strings](#variable-substitution-in-configuration-strings)
<!-- tocstop -->
<!-- markdown-toc end -->
## 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.
@@ -102,6 +91,6 @@ The `AppConfigService` also supports a limited set of variable substitutions to
The supported variables are:
| Variable name | Runtime value |
| --- | --- |
| ------------- | ------------- |
| hostname | `location.hostname` |
| port | `location.port` |

14
docs/authentication.service.md
View File

@@ -2,18 +2,6 @@
Provides authentication for use with the Login component.
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Basic Usage](#basic-usage)
* [Events](#events)
- [Details](#details)
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic Usage
**app.component.ts**
@@ -39,7 +27,7 @@ export class AppComponent {
### Events
| Name | Description |
| --- | --- |
| ---- | ----------- |
| onLogin | Raised when user logs in |
| onLogout | Raised when user logs out |

14
docs/comment-list.component.md
View File

@@ -1,9 +1,11 @@
# Comment list component
Shows a list of comments.
![ADF Comment List](docassets/images/adf-comment-list.png)
## Basic Usage
Populate the comments in the component class:
```ts
@@ -39,7 +41,6 @@ export class SomeComponent implements OnInit {
onClickCommentRow(comment: CommentProcessModel) {
console.log('Clicked row: ', comment);
}
```
In the component template use the comment list component:
@@ -54,16 +55,11 @@ In the component template use the comment list component:
### Properties
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| comments | CommentProcessModel[] | | The comments data used to populate the list |
| ---- | ---- | ------- | ----------- |
| comments | CommentProcessModel\[] | | The comments data used to populate the list |
### Events
| Name | Description |
| --- | --- |
| ---- | ----------- |
| clickRow | Emitted when the user clicks on one of the comment rows |
<!-- seealso start -->
<!-- seealso end -->

69
docs/content-action.component.md
View File

@@ -4,25 +4,20 @@ Adds options to a Document List actions menu for a particular content type.
![Document Actions](docassets/images/document-actions.png)
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
## Contents
<!-- toc -->
- [Basic Usage](#basic-usage)
- [Basic Usage](#basic-usage)
* [Properties](#properties)
* [Events](#events)
- [Details](#details)
* [Built-in action examples](#built-in-action-examples)
+ [Delete - System handler combined with custom handler](#delete---system-handler-combined-with-custom-handler)
+ [Download](#download)
+ [Copy and move](#copy-and-move)
* [Error, Permission and Success callbacks](#error-permission-and-success-callbacks)
* [Customizing built-in actions](#customizing-built-in-actions)
- [See also](#see-also)
- [Properties](#properties)
- [Events](#events)
<!-- tocstop -->
- [Details](#details)
<!-- markdown-toc end -->
- [Built-in action examples](#built-in-action-examples)
- [Error, Permission and Success callbacks](#error-permission-and-success-callbacks)
- [Customizing built-in actions](#customizing-built-in-actions)
- [See also](#see-also)
## Basic Usage
@@ -80,19 +75,19 @@ export class MyView {
### Properties
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `target` | string | | "document" or "folder" |
| `title` | string | | The title of the action as shown in the menu |
| `icon` | string | | The name of the icon to display next to the menu command (can be left blank) |
| `handler` | string | | System type actions. Can be "delete", "download", "copy" or "move" |
| `permission` | string | | The name of the permission |
| `disabled` | boolean | | Is the menu item disabled?
| `disableWithNoPermission` | boolean | | Should this action be disabled in the menu if the user doesn't have permission for it? |
| ---- | ---- | ------- | ----------- |
| `target` | string | | "document" or "folder" |
| `title` | string | | The title of the action as shown in the menu |
| `icon` | string | | The name of the icon to display next to the menu command (can be left blank) |
| `handler` | string | | System type actions. Can be "delete", "download", "copy" or "move" |
| `permission` | string | | The name of the permission |
| `disabled` | boolean | | Is the menu item disabled? |
| `disableWithNoPermission` | boolean | | Should this action be disabled in the menu if the user doesn't have permission for it? |
### Events
| Name | Handler | Description |
| --- | --- | --- |
| ---- | ------- | ----------- |
| `execute` | All | Emitted when user clicks on the action. For combined handlers see below |
| `permissionEvent` | All | Emitted when a permission error happens |
| `success` | copy, move, delete | Emitted on successful action with the success string message |
@@ -105,15 +100,15 @@ The document actions are rendered on a dropdown menu for each items of content.
A number of built-in actions are defined to handle common use cases:
- **Download** (document)
- **Copy** (document, folder)
- **Move** (document, folder)
- **Delete** (document, folder)
- **Download** (document)
- **Copy** (document, folder)
- **Move** (document, folder)
- **Delete** (document, folder)
You can use one of the built-in handlers by assigning its name to the `handler` property.
(The names are case-insensitive, so `handler="download"` and `handler="DOWNLOAD"`
will trigger the same action.) You can also add your own handler by implementing the
`execute` event. Note that you can use *both* a built-in handler and your own `execute`
`execute` event. Note that you can use _both_ a built-in handler and your own `execute`
function in the same action.
### Built-in action examples
@@ -240,9 +235,9 @@ allow the item being copied/moved to be the destination if it is itself a folder
Defining error, permission and success callbacks are pretty much the same as doing it for the delete permission handling.
- The error handler callback gets the error object which was raised
- The success callback's only parameter is the translatable success message string (could be used for showing in snackbar for example)
- The permissionEvent callback is the same as described above with the delete action
- The error handler callback gets the error object which was raised
- The success callback's only parameter is the translatable success message string (could be used for showing in snackbar for example)
- The permissionEvent callback is the same as described above with the delete action
![Copy/move document action](docassets/images/document-action-copymove.png)
@@ -255,10 +250,12 @@ and override the default implementations. See the doc pages for
for details and examples.
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
<!-- seealso start -->
## See also
- [Document list component](document-list.component.md)
- [Document actions service](document-actions.service.md)
- [Folder actions service](folder-actions.service.md)
<!-- seealso end -->
- [Document list component](document-list.component.md)
- [Document actions service](document-actions.service.md)
- [Folder actions service](folder-actions.service.md)
<!-- seealso end -->

20
docs/content.widget.md
View File

@@ -1,18 +1,6 @@
# Activiti Content Component
The component shows the content preview.
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Basic Usage](#basic-usage)
* [Properties](#properties)
* [Events](#events)
<!-- tocstop -->
<!-- markdown-toc end -->
Shows the content preview.
## Basic Usage
@@ -27,11 +15,11 @@ The component shows the content preview.
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. |
| ---- | ----------- |
| contentClick | Invoked when the content is clicked. |

15
docs/context-menu.directive.md
View File

@@ -1,15 +1,6 @@
# Context Menu directive
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Basic Usage](#basic-usage)
- [Details](#details)
<!-- tocstop -->
<!-- markdown-toc end -->
Adds a context menu to a component.
## Basic Usage
@@ -48,8 +39,8 @@ export class MyComponent implements OnInit {
### Properties
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| showIcons | boolean | false | Render defined icons |
| ---- | ---- | ------- | ----------- |
| showIcons | boolean | false | Render defined icons |
## Details

58
docs/data-column.component.md
View File

@@ -2,24 +2,20 @@
Defines column properties for DataTable, Tasklist, Document List and other components.
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
## Contents
<!-- toc -->
- [Basic Usage](#basic-usage)
- [Basic Usage](#basic-usage)
* [Properties](#properties)
- [Details](#details)
* [Automatic column header translation](#automatic-column-header-translation)
* [Custom tooltips](#custom-tooltips)
* [Column Template](#column-template)
* [Styling Techniques](#styling-techniques)
+ [Custom icons for selected rows](#custom-icons-for-selected-rows)
+ [Hiding columns on small screens](#hiding-columns-on-small-screens)
- [See also](#see-also)
- [Properties](#properties)
<!-- tocstop -->
- [Details](#details)
<!-- markdown-toc end -->
- [Automatic column header translation](#automatic-column-header-translation)
- [Custom tooltips](#custom-tooltips)
- [Column Template](#column-template)
- [Styling Techniques](#styling-techniques)
- [See also](#see-also)
## Basic Usage
@@ -38,16 +34,16 @@ Defines column properties for DataTable, Tasklist, Document List and other compo
### Properties
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| key | string | | Data source key, can be either column/property key like `title` or property path like `createdBy.name` |
| ---- | ---- | ------- | ----------- |
| key | string | | Data source key, can be either column/property key like `title` or property path like `createdBy.name` |
| type | string | text | Value type for the column. Possible settings are 'text', 'image', 'date', 'fileSize' and 'location'. |
| format | string | | Value format (if supported by components), for example format of the date |
| 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. |
| 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. |
## Details
@@ -105,9 +101,9 @@ You can provide custom column/cell templates that may contain other Angular comp
Every cell in the DataTable component is bound to the dynamic data context containing the following properties:
| Name | Type | Description |
| --- | --- | --- |
| ---- | ---- | ----------- |
| data | [DataTableAdapter](DataTableAdapter.md) | Data adapter instance. |
| row | [DataRow](DataTableAdapter.md) | Current data row instance. |
| row | [DataRow](DataTableAdapter.md) | Current data row instance. |
| col | [DataColumn](DataTableAdapter.md) | Current data column instance. |
You can use all three properties to gain full access to underlying data from within your custom templates.
@@ -145,7 +141,7 @@ You may want using **row** api to get raw value access.
</data-column>
```
Use **data** api to get values with post-processing, like datetime/icon conversion._
Use **data** api to get values with post-processing, like datetime/icon conversion.\_
In the Example below we will prepend `Hi!` to each file and folder name in the list:
@@ -180,7 +176,7 @@ You can add a custom CSS class to a column using its `class` property. This is u
many purposes - some examples are given below.
#### Custom icons for selected rows
Custom styling can be used to change the look and feel of the icon for the selected rows.
Let's start by assigning an "image-table-cell" class to the thumbnail column:
@@ -272,10 +268,12 @@ Now you can declare columns and assign `desktop-only` class where needed:
![Responsive Mobile](docassets/images/responsive-mobile.png)
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
<!-- seealso start -->
## See also
- [Document list component](document-list.component.md)
- [Datatable component](datatable.component.md)
- [Task list component](task-list.component.md)
<!-- seealso end -->
- [Document list component](document-list.component.md)
- [Datatable component](datatable.component.md)
- [Task list component](task-list.component.md)
<!-- seealso end -->

76
docs/datatable.component.md
View File

@@ -6,31 +6,23 @@ Displays data as a table with customizable columns and presentation.
See it live: [DataTable Quickstart](https://embed.plnkr.co/80qr4YFBeHjLMdAV0F6l/)
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
## Contents
<!-- toc -->
- [Basic usage](#basic-usage)
- [Basic usage](#basic-usage)
* [Properties](#properties)
* [Events](#events)
- [Details](#details)
* [Supplying data for the table](#supplying-data-for-the-table)
* [Customizing columns](#customizing-columns)
* [DataTable DOM Events](#datatable-dom-events)
* [Custom Empty content template](#custom-empty-content-template)
* [Loading content template](#loading-content-template)
* [Events](#events-1)
+ [row-keyup DOM event](#row-keyup-dom-event)
+ [rowClick event](#rowclick-event)
+ [rowDblClick event](#rowdblclick-event)
+ [showRowContextMenu event](#showrowcontextmenu-event)
+ [showRowActionsMenu event](#showrowactionsmenu-event)
+ [executeRowAction event](#executerowaction-event)
- [See also](#see-also)
- [Properties](#properties)
- [Events](#events)
<!-- tocstop -->
- [Details](#details)
<!-- markdown-toc end -->
- [Supplying data for the table](#supplying-data-for-the-table)
- [Customizing columns](#customizing-columns)
- [DataTable DOM Events](#datatable-dom-events)
- [Custom Empty content template](#custom-empty-content-template)
- [Loading content template](#loading-content-template)
- [Events](#events-1)
- [See also](#see-also)
## Basic usage
@@ -127,26 +119,26 @@ export class DataTableDemo {
### 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 |
| ---- | ---- | ------- | ----------- |
| 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 |
| 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|
| 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 |
| 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 |
| selection | DataRow\[] | \[] | Contains selected rows |
### Events
| Name | Description
| --- | --- |
| 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 |
@@ -174,12 +166,12 @@ 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 |
| row-keyup | Raised on the 'keyup' event for the focused row. |
| row-keyup | Raised on the 'keyup' event for the focused row. |
For example:
@@ -250,8 +242,8 @@ You can use any HTML layout or Angular component as a content of the empty templ
</adf-datatable>
```
| Name | Type | Default | Description
| --- | --- | --- | --- |
| 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 |
@@ -462,11 +454,13 @@ where you can handle the process, inspect the action payload and all custom prop
and do corresponding actions.
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
<!-- seealso start -->
## See also
- [Data column component](data-column.component.md)
- [Pagination component](pagination.component.md)
- [DataTableAdapter](DataTableAdapter.md)
- [Document list component](document-list.component.md)
<!-- seealso end -->
- [Data column component](data-column.component.md)
- [Pagination component](pagination.component.md)
- [DataTableAdapter](DataTableAdapter.md)
- [Document list component](document-list.component.md)
<!-- seealso end -->

235
docs/document-list.component.md
View File

@@ -4,37 +4,35 @@ Displays the documents from a repository.
![Custom columns](docassets/images/custom-columns.png)
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
## Contents
<!-- toc -->
- [Basic Usage](#basic-usage)
- [Basic Usage](#basic-usage)
* [Properties](#properties)
* [Events](#events)
- [Details](#details)
* [DOM Events](#dom-events)
* [Pagination strategy](#pagination-strategy)
* [Data Sources](#data-sources)
+ [Node ID](#node-id)
+ [Repository aliases](#repository-aliases)
+ [DocumentList aliases](#documentlist-aliases)
* [Setting default folder](#setting-default-folder)
* [Calling DocumentList api directly](#calling-documentlist-api-directly)
* [Underlying node object](#underlying-node-object)
* [Custom columns](#custom-columns)
* [Date Column](#date-column)
* [Location Column](#location-column)
* [Actions](#actions)
* [Navigation mode](#navigation-mode)
- [Advanced usage and customization](#advanced-usage-and-customization)
* [Custom row filter](#custom-row-filter)
* [Custom image resolver](#custom-image-resolver)
* [Custom 'empty folder' template](#custom-empty-folder-template)
- [See also](#see-also)
- [Properties](#properties)
- [Events](#events)
<!-- tocstop -->
- [Details](#details)
<!-- markdown-toc end -->
- [DOM Events](#dom-events)
- [Pagination strategy](#pagination-strategy)
- [Data Sources](#data-sources)
- [Setting default folder](#setting-default-folder)
- [Calling DocumentList api directly](#calling-documentlist-api-directly)
- [Underlying node object](#underlying-node-object)
- [Custom columns](#custom-columns)
- [Date Column](#date-column)
- [Location Column](#location-column)
- [Actions](#actions)
- [Navigation mode](#navigation-mode)
- [Advanced usage and customization](#advanced-usage-and-customization)
- [Custom row filter](#custom-row-filter)
- [Custom image resolver](#custom-image-resolver)
- [Custom 'empty folder' template](#custom-empty-folder-template)
- [Custom 'permission denied' template](#custom-permission-denied-template)
- [See also](#see-also)
## Basic Usage
@@ -52,28 +50,28 @@ Displays the documents from a repository.
The properties currentFolderId, folderNode and node are the entry initialization properties of the document list. They cannot be used together, choose the one that suites more your use case.
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| permissionsStyle | [PermissionStyleModel[]](permissions-style.model.md) | null | Define a set of CSS styles styles to apply depending on the permission of the user on that node. See the [Permission Style model](permissions-style.model.md) page for further details and examples. |
| ---- | ---- | ------- | ----------- |
| permissionsStyle | [PermissionStyleModel\[\]](permissions-style.model.md) | null | Define a set of CSS styles styles to apply depending on the permission of the user on that node. See the [Permission Style model](permissions-style.model.md) page for further details and examples. |
| locationFormat | string | '/' | The default route for all the location-based columns (if declared). |
| navigate | boolean | true | Toggles navigation to folder content or file preview |
| navigationMode | string (click,dblclick) | dblclick | User interaction for folder navigation or file preview |
| thumbnails | boolean | false | Show document thumbnails rather than icons |
| 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. |
| 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 multiselect mode |
| contentActions | boolean | false | Toggles content actions for each row |
| contentActionsPosition | string (left\|right) | right | Position of the content actions dropdown menu. |
| contextMenuActions | boolean | false | Toggles context menus for each row |
| emptyFolderImageUrl | string | assets/images/empty_doc_lib.svg | Custom image for empty folder |
| 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. |
| 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 |
| 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. |
| 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 |
| loading | boolean | false | Toggles the loading state and animated spinners for the component. Used in combination with `navigate=false` to perform custom navigation and loading state indication. |
| rowFilter | `RowFilter` | | Custom row filter, [see more](#custom-row-filter). |
| imageResolver | `ImageResolver` | | Custom image resolver, [see more](#custom-image-resolver). |
| rowFilter | `RowFilter` | | Custom row filter, [see more](#custom-row-filter). |
| imageResolver | `ImageResolver` | | Custom image resolver, [see more](#custom-image-resolver). |
| currentFolderId | string | null | The ID of the folder node to display or a reserved string alias for special sources (see **Data Sources**) |
| folderNode | [MinimalNodeEntryEntity](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeMinimalEntry.md) | null | Currently displayed folder node |
| node | [NodePaging](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodePaging.md) | null | Document list will show all the nodes contained in the NodePaging entity |
| folderNode | [MinimalNodeEntryEntity](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeMinimalEntry.md) | null | Currently displayed folder node |
| node | [NodePaging](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodePaging.md) | null | Document list will show all the nodes contained in the NodePaging entity |
| maxItems | number | Default value is stored into user preference settings | determine the size of the page for the element into document list |
| skipCount | number | 0 | element to skip over for pagination purpose |
| enableInfiniteScrolling | boolean | true | Enable documentlist to work into infinite scrolling mode |
@@ -81,14 +79,14 @@ The properties currentFolderId, folderNode and node are the entry initialization
### Events
| Name | Description |
| --- | --- |
| ---- | ----------- |
| nodeClick | emitted when user clicks a list node |
| nodeDblClick | emitted when user double-clicks list node |
| folderChange | emitted once current display folder has changed |
| preview | emitted when user acts upon files with either single or double click (depends on `navigation-mode`), recommended for Viewer components integration |
| preview | emitted when user acts upon files with either single or double click (depends on `navigation-mode`), recommended for Viewer components integration |
| permissionError | emitted when user is attempting to create a folder via action menu without having the permission to do it |
| ready | emitted when the documentList is ready and loads all the elements|
| error | emitted when API fails to get documentList data|
| ready | emitted when the documentList is ready and loads all the elements |
| error | emitted when API fails to get documentList data |
## Details
@@ -98,7 +96,7 @@ Below are the DOM events the DocumentList component emits.
All of them are `bubbling`, meaning you can handle them in any component up the parent hierarchy, even if DocumentList is wrapped by another component(s).
| Name | Description |
| --- | --- |
| ---- | ----------- |
| node-click | Raised when user clicks the node |
| node-dblclick | Raised when user double-clicks the node |
| node-select | Raised when user selects a node |
@@ -134,8 +132,8 @@ Below is a basic example of handling DOM events in the parent elements.
The Document List by default supports 2 type of pagination, the **finite** and the **infinite** pagination.
- With the **finite** pagination you must provide document list with 2 parameters : maxItems and skipCount.
- With the **infinite** pagination you must provide documentlist with 3 parameters : enableInfiniteScrolling, maxItems and skipCount.
- With the **finite** pagination you must provide document list with 2 parameters : maxItems and skipCount.
- With the **infinite** pagination you must provide documentlist with 3 parameters : enableInfiniteScrolling, maxItems and skipCount.
### Data Sources
@@ -149,20 +147,20 @@ The unique identifier of the Node. Gets automatically updated when you perform n
You can use one of the well-known reserved aliases:
- `-root-`
- `-shared-`
- `-my-`
- `-root-`
- `-shared-`
- `-my-`
#### DocumentList aliases
The DocumentList component also provides support for the following reserved aliases you can use:
- `-trashcan-`,
- `-sharedlinks-`
- `-sites-`
- `-mysites-`
- `-favorites-`
- `-recent-`
- `-trashcan-`,
- `-sharedlinks-`
- `-sites-`
- `-mysites-`
- `-favorites-`
- `-recent-`
Note that due to specific origin of the data the sources above do not support navigation.
You may want handling single and double clicks yourself to perform navigation to other sources.
@@ -177,13 +175,13 @@ There's a possibility to set the default location format using "locationFormat"
The default column layout for non-reserved views is:
- Icon
- Name
- Size
- Modified (date)
- Modified by
- Icon
- Name
- Size
- Modified (date)
- Modified by
__Trashcan__
**Trashcan**
```html
<adf-document-list
@@ -194,14 +192,14 @@ __Trashcan__
Default layout:
- Icon
- Name
- Location
- Size
- Deleted
- Deleted by
- Icon
- Name
- Location
- Size
- Deleted
- Deleted by
__Shared Links__
**Shared Links**
```html
<adf-document-list
@@ -212,15 +210,15 @@ __Shared Links__
Default layout:
- Icon
- Name
- Location
- Size
- Modified
- Modified by
- Shared by
- Icon
- Name
- Location
- Size
- Modified
- Modified by
- Shared by
__Sites__
**Sites**
```html
<adf-document-list
@@ -230,11 +228,11 @@ __Sites__
Default layout:
- Icon
- Title
- Status
- Icon
- Title
- Status
__My Sites__
**My Sites**
```html
<adf-document-list
@@ -244,11 +242,11 @@ __My Sites__
Default layout:
- Icon
- Title
- Status
- Icon
- Title
- Status
__Favorites__
**Favorites**
```html
<adf-document-list
@@ -259,14 +257,14 @@ __Favorites__
Default layout:
- Icon
- Name
- Location
- Size
- Modified
- Modified by
- Icon
- Name
- Location
- Size
- Modified
- Modified by
__Recent Files__
**Recent Files**
```html
<adf-document-list
@@ -277,9 +275,9 @@ __Recent Files__
Default layout:
- Icon
- Name
- Location
- Icon
- Name
- Location
### Setting default folder
@@ -516,12 +514,12 @@ _For granular permissions, the Location Column may or may not render link locati
You are going to use it with custom navigation or when displaying content from the sources like:
- Sites
- My Sites
- Shared Links
- Recent Files
- Favorites
- Trashcan
- Sites
- My Sites
- Shared Links
- Recent Files
- Favorites
- Trashcan
or any other location that needs nagivating to the node parent folder easily.
@@ -584,11 +582,11 @@ By default DocumentList component uses 'double-click' mode for navigation.
That means user will see the contents of the folder by double-clicking its name
or icon (similar to Google Drive behaviour). However it is possible switching to
other modes, like single-click navigation for example.
The following navigation modes are supported:
- **click**
- **dblclick**
- **click**
- **dblclick**
The following example switches navigation to single clicks:
@@ -756,23 +754,26 @@ This can be changed by means of the custom html template:
That will give the following output:
![Custom no permission](docassets/images/no-permission-custom.png)
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
<!-- seealso start -->
## See also
- [Datatable component](datatable.component.md)
- [Data column component](data-column.component.md)
- [Pagination component](pagination.component.md)
- [Infinite pagination component](infinite-pagination.component.md)
- [Sites dropdown component](sites-dropdown.component.md)
- [Metadata indicators](metadata-indicators.md)
- [Document library model](document-library.model.md)
- [Nodes api service](nodes-api.service.md)
- [Breadcrumb component](breadcrumb.component.md)
- [Content action component](content-action.component.md)
- [Content node selector component](content-node-selector.component.md)
- [Document list service](document-list.service.md)
- [Dropdown breadcrumb component](dropdown-breadcrumb.component.md)
- [Permissions style model](permissions-style.model.md)
- [Version manager component](version-manager.component.md)
<!-- seealso end -->
- [Datatable component](datatable.component.md)
- [Data column component](data-column.component.md)
- [Pagination component](pagination.component.md)
- [Infinite pagination component](infinite-pagination.component.md)
- [Sites dropdown component](sites-dropdown.component.md)
- [Metadata indicators](metadata-indicators.md)
- [Document library model](document-library.model.md)
- [Nodes api service](nodes-api.service.md)
- [Breadcrumb component](breadcrumb.component.md)
- [Content action component](content-action.component.md)
- [Content node selector component](content-node-selector.component.md)
- [Document list service](document-list.service.md)
- [Dropdown breadcrumb component](dropdown-breadcrumb.component.md)
- [Permissions style model](permissions-style.model.md)
- [Version manager component](version-manager.component.md)
<!-- seealso end -->

17
docs/form-list.component.md
View File

@@ -1,17 +1,6 @@
# ADF Form List Component
The component shows the activiti forms as a list.
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Basic Usage](#basic-usage)
* [Properties](#properties)
<!-- tocstop -->
<!-- markdown-toc end -->
Shows APS forms as a list.
## Basic Usage
@@ -26,5 +15,5 @@ The component shows the activiti forms as a list.
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. |
| ---- | ---- | ------- | ----------- |
| forms | any | | The array that contains the information to show inside the list. |

27
docs/node-name-tooltip.pipe.md
View File

@@ -1,21 +1,6 @@
# Node Name Tooltip directive
Formats the tooltip of the underlying Node based on the following rules:
* if the *title* and *description* are missing, then the tooltip shows the *name*;
* if the *title* is missing, then the tooltip shows the *name* and *description*;
* if the *description* is missing, then the tooltip shows the *name* and *title*;
* if *name* and *title*, *name* and *description*, or *title* and *description* are the same, then only a single line is displayed.
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Basic Usage](#basic-usage)
<!-- tocstop -->
<!-- markdown-toc end -->
Formats the tooltip for a Node.
## Basic Usage
@@ -29,9 +14,11 @@ Formats the tooltip of the underlying Node based on the following rules:
</data-column>
```
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
<!-- seealso start -->
## Details
## See also
The tooltip is formatted according to the following rules:
<!-- seealso end -->
- if the _title_ and _description_ are missing, then the tooltip shows the _name_;
- if the _title_ is missing, then the tooltip shows the _name_ and _description_;
- if the _description_ is missing, then the tooltip shows the _name_ and _title_;
- if _name_ and _title_, _name_ and _description_, or _title_ and _description_ are the same, then only a single line is displayed.

36
docs/search.component.md
View File

@@ -1,19 +1,6 @@
# Search component
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Basic usage](#basic-usage)
* [Properties](#properties)
* [Events](#events)
- [Details](#details)
<!-- tocstop -->
<!-- markdown-toc end -->
Searches items for supplied search terms.
## Basic usage
@@ -27,22 +14,23 @@
### Properties
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| searchTerm | string | | Search term to use when executing the search. Updating this value will run a new search and update the results |
| maxResults | number | 20 | Maximum number of results to show in the search. |
| skipResults | number | 0 | Number of results to skip from the results pagination. |
| displayWith | function | | Function that maps an option's value to its display value in the trigger |
| queryBody| [QueryBody](https://github.com/Alfresco/alfresco-js-api/blob/1.6.0/src/alfresco-search-rest-api/docs/QueryBody.md) | | object which allow you to perform more elaborated query from the search api |
| ---- | ---- | ------- | ----------- |
| searchTerm | string | | Search term to use when executing the search. Updating this value will run a new search and update the results |
| maxResults | number | 20 | Maximum number of results to show in the search. |
| skipResults | number | 0 | Number of results to skip from the results pagination. |
| displayWith | function | | Function that maps an option's value to its display value in the trigger |
| queryBody | [QueryBody](https://github.com/Alfresco/alfresco-js-api/blob/1.6.0/src/alfresco-search-rest-api/docs/QueryBody.md) | | object which allow you to perform more elaborated query from the search api |
### Events
| Name | Description |
| --- | --- |
| ---- | ----------- |
| resultLoaded | Emitted when search results have fully loaded |
## Details
### Customise Search Results
You have to add a template that will be shown when the results are loaded.
```html
@@ -56,6 +44,7 @@ You have to add a template that will be shown when the results are loaded.
</ng-template>
</adf-search>
```
The results are provided via the [$implicit variable of angular2](https://angular.io/api/common/NgTemplateOutlet) and can be accessed via the sugar sintax 'let-yourChosenName'. As per example above the result will be something like :
![adf-search-control](docassets/images/search-component-simple-template.png)
@@ -106,8 +95,8 @@ Which will look like :
![adf-search-control](docassets/images/search-component-complex-template.png)
### Attach an input field to the search
You can also attach your input field to the adf-search component via the trigger [searchAutocomplete]
```html
@@ -121,4 +110,5 @@ You can also attach your input field to the adf-search component via the trigger
</ng-template>
</adf-search>
```
In this way it is possible to fetch the results from the word typed into the input text straight into the adf-search component via the custom template variable.
In this way it is possible to fetch the results from the word typed into the input text straight into the adf-search component via the custom template variable.

58
docs/viewer.component.md
View File

@@ -1,22 +1,27 @@
# Alfresco Viewer component
Displays content from an ACS repository.
See it live: [Viewer Quickstart](https://embed.plnkr.co/iTuG1lFIXfsP95l6bDW6/)
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
## Contents
<!-- toc -->
- [Basic usage](#basic-usage)
- [Basic usage](#basic-usage)
- [Properties](#properties)
- [Details](#details)
* [Supported file formats](#supported-file-formats)
* [PDF Conversion](#pdf-conversion)
* [Configuring PDF.js library](#configuring-pdfjs-library)
* [Custom extension handler](#custom-extension-handler)
- [Properties](#properties)
- [Events](#events)
<!-- tocstop -->
- [Details](#details)
<!-- markdown-toc end -->
- [Integrating with DocumentList component](#integrating-with-documentlist-component)
- [Supported file formats](#supported-file-formats)
- [PDF Conversion](#pdf-conversion)
- [Configuring PDF.js library](#configuring-pdfjs-library)
- [Custom toolbar](#custom-toolbar)
- [Custom sidebar](#custom-sidebar)
- [Custom "Open With" menu](#custom-open-with-menu)
- [Custom "More actions" menu](#custom-more-actions-menu)
- [Extending the Viewer](#extending-the-viewer)
## Basic usage
@@ -39,37 +44,39 @@ Using with file url:
</adf-viewer>
```
## Properties
### Properties
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| fileNodeId | string | | Node Id of the file to load |
| urlFile | string | | If you want to load an external file that does not come from ECM you can use this Url where to load the file |
| ---- | ---- | ------- | ----------- |
| fileNodeId | string | | Node Id of the file to load |
| urlFile | string | | If you want to load an external file that does not come from ECM you can use this Url where to load the file |
| urlFileViewer | string | null | Viewer to use with the `urlFile` address (`pdf`, `image`, `media`, `text`). Used when `urlFile` has no filename and extension. |
| urlBlob | Blob | | If you want to load a Blob File |
| urlBlob | Blob | | If you want to load a Blob File |
| overlayMode | boolean | false | If `true` show the Viewer full page over the present content otherwise will fit the parent div |
| showViewer | boolean | true | Hide or show the viewer |
| showToolbar | boolean | true | Hide or show the toolbar |
| displayName | string | | You can specify the name of the file |
| displayName | string | | You can specify the name of the file |
| allowGoBack | boolean | true | Allow `back` navigation |
| allowDownload | boolean | true | Toggle download feature |
| allowPrint | boolean | false | Toggle printing feature |
| allowShare | boolean | false | Toggle sharing feature |
| allowSidebar | boolean |false | Toggle sidebar feature |
| allowSidebar | boolean | false | Toggle sidebar feature |
| showSidebar | boolean | false | Toggles sidebar visibility. Requires `allowSidebar` to be set to `true`. |
| sidebarPosition | string | right | The position of the sidebar. Can be `left` or `right`. |
| sidebarTemplate | TemplateRef<any> | null | The template intended to be used as a sidebar. The template context contains the loaded node data. |
## Events
### Events
| Name | Argument Type | Cancelable | Description |
| --- | --- | --- | --- |
| ---- | ------------- | ---------- | ----------- |
| goBack | any | Yes | Raised when user clicks the 'Back' button. |
| download | any | Yes | Raised when user clicks the 'Download' button. |
| print | any | Yes | Raised when user clicks the 'Print' button. |
| share | any | Yes | Raised when user clicks the 'Share' button. |
## Integrating with DocumentList component
## Details
### Integrating with DocumentList component
Below is the most simple integration of Viewer and DocumentList components within your custom component:
@@ -105,12 +112,10 @@ export class OverlayViewerComponent {
}
```
## Details
### Supported file formats
| Type | Extension |
| --- | --- |
| ---- | --------- |
| Media | wav, Mp3, Mp4, WebM, Ogv |
| Images | png, jpg, jpeg, gif, bmp |
| Text | pdf, txt |
@@ -176,8 +181,9 @@ The Viewer component also supports custom sidebar components and layouts.
The `allowSidebar` property should be set to `true` to enable this feature.
Custom sidebar for the viewer can be injected in two different ways:
- using transclusion
- using template **(only works when using the viewer with fileNodeId)**
- using transclusion
- using template **(only works when using the viewer with fileNodeId)**
#### Using transclusion

46
docs/webscript.component.md
View File

@@ -1,19 +1,6 @@
# Alfresco Webscript Get component
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Basic usage](#basic-usage)
* [Properties](#properties)
- [Details](#details)
* [Webscript View HTML example](#webscript-view-html-example)
* [Webscript View DATATABLE example](#webscript-view-datatable-example)
* [Webscript View JSON example](#webscript-view-json-example)
<!-- tocstop -->
<!-- markdown-toc end -->
Provides access to Webscript features.
## Basic usage
@@ -56,24 +43,23 @@ export class AppComponent {
### Properties
| Attribute | Type | Default | Description |
| --- | --- | --- | --- |
| scriptPath | string | | (**mandatory**) path to Web Script (as defined by Web Script) |
| scriptArgs | Object | | arguments to pass to Web Script |
| contextRoot | string | | path where application is deployed |
| scriptPath | string | alfresco | path to Web Script (as defined by Web Script) |
| contentType | string | service | path where Web Script service is mapped default value |
| --------- | ---- | ------- | ----------- |
| scriptPath | string | | (**mandatory**) path to Web Script (as defined by Web Script) |
| scriptArgs | Object | | arguments to pass to Web Script |
| contextRoot | string | | path where application is deployed |
| scriptPath | string | alfresco | path to Web Script (as defined by Web Script) |
| contentType | string | service | path where Web Script service is mapped default value |
| contentType | string | TEXT | how to handle the data received from the web script JSON , HTML , DATATABLE or TEXT |
| showData | boolean | true | render the webscript data |
### Events
| Name | Description |
| --- | --- |
| ---- | ----------- |
| success | You can get the plain data from the webscript through the **success** event parameter and use it as you need in your application |
**contentType** {string}
***data*** {string} data containing the plain value you get from the webscipt as an output parameter
**_data_** {string} data containing the plain value you get from the webscipt as an output parameter
## Details
@@ -82,7 +68,7 @@ export class AppComponent {
This sample demonstrates how to implement a Webscript component that renders the HTML contents that come from a webscript
This sample Web Scripts reside in your Alfresco Server. You can access the folder webscript here:
```http://localhost:8080/alfresco/service/sample/folder/Company%20Home```
`http://localhost:8080/alfresco/service/sample/folder/Company%20Home`
```html
<adf-webscript-get
@@ -92,7 +78,7 @@ This sample Web Scripts reside in your Alfresco Server. You can access the folde
[scriptPath]="'Sample/folder/Company%20Home'"
[contentType]="'HTML'">
</adf-webscript-get>
```
```
![Custom columns](docassets/images/HTML.png)
@@ -100,7 +86,7 @@ This sample Web Scripts reside in your Alfresco Server. You can access the folde
This sample demonstrates how to implement a Webscript component that renders the JSON contents that come from a webscript
```http://localhost:8080/alfresco/service/sample/folder/DATATABLE```
`http://localhost:8080/alfresco/service/sample/folder/DATATABLE`
```html
<adf-webscript-get
@@ -110,7 +96,7 @@ This sample demonstrates how to implement a Webscript component that renders the
[scriptPath]="'Sample/folder/DATATABLE'"
[contentType]="'DATATABLE'">
</adf-webscript-get>
```
```
If you want to show the result from a webscript inside a ng2-alfresco-datatable you have to return from the GET of the webscript the datastructure below:
subdivide in data and schema
@@ -158,7 +144,7 @@ that will render the following table
This sample demonstrates how to implement a Webscript component that renders the JSON contents that come from a webscript
This sample Web Scripts reside in your Alfresco Server. You can access the folder webscript here:
```http://localhost:8080/alfresco/service/sample/folder/JSON%EXAMPLE```
`http://localhost:8080/alfresco/service/sample/folder/JSON%EXAMPLE`
```html
<adf-webscript-get
@@ -170,7 +156,7 @@ This sample Web Scripts reside in your Alfresco Server. You can access the folde
[showData]="false"
(success)="logDataExample($event)">
</adf-webscript-get>
```
```
You can get the plain data from the webscript through the **success** event parameter and use it as you need in your application
@@ -178,4 +164,4 @@ You can get the plain data from the webscript through the **success** event para
logDataExample(data) {
console.log('You webscript data are here' + data);
}
```
```