mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-2463] Moved doc files into subfolders (#3080)
This commit is contained in:
Andy Stark
committed by
Eugenio Romano
Eugenio Romano
parent
2889f6dcac
commit
86cc219bc4
92
docs/content-services/breadcrumb.component.md
Normal file
92
docs/content-services/breadcrumb.component.md
Normal file
@@ -0,0 +1,92 @@
|
||||
---
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-03-12
|
||||
---
|
||||
|
||||
# Breadcrumb Component
|
||||
|
||||
Indicates the current position within a navigation hierarchy.
|
||||
|
||||
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-breadcrumb
|
||||
[target]="documentList"
|
||||
[folderNode]="documentList.folderNode">
|
||||
</adf-breadcrumb>
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| folderNode | `MinimalNodeEntryEntity` | `null` | Active node, builds UI based on folderNode.path.elements collection. |
|
||||
| root | `string` | `null` | (optional) Name of the root element of the breadcrumb. You can use this property to rename "Company Home" to "Personal Files" for example. You can use an i18n resource key for the property value. |
|
||||
| rootId | `string` | `null` | (optional) The id of the root element. You can use this property to set a custom element the breadcrumb should start with. |
|
||||
| target | `DocumentListComponent` | | (optional) Document List component to operate with. The list will update when the breadcrumb is clicked. |
|
||||
| transform | `(node: any) => any` | | Transformation to be performed on the chosen/folder node before building the breadcrumb UI. Can be useful when custom formatting is needed for the breadcrumb. You can change the path elements from the node that are used to build the breadcrumb using this function. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| navigate | `EventEmitter<PathElementEntity>` | Emitted when the user clicks on a breadcrumb. |
|
||||
|
||||
## Details
|
||||
|
||||
### Using the transform function
|
||||
|
||||
The function supplied in the `transform` property lets you modify the Node object that the component
|
||||
uses to find the "crumbs" for the list. You can use this, for example, to remove unwanted items from
|
||||
the list by altering the node's `path.elements` property.
|
||||
|
||||
Below is an example of how you might do this with the
|
||||
[Content Node Selector component](content-node-selector.component.md). In this case, you pass the
|
||||
transform function via the `breadcrumbTransform` property of `ContentNodeSelectorComponentData` during
|
||||
initialization:
|
||||
|
||||
```ts
|
||||
const data: ContentNodeSelectorComponentData = {
|
||||
title: title,
|
||||
actionName: action,
|
||||
currentFolderId: contentEntry.parentId,
|
||||
imageResolver: this.imageResolver.bind(this),
|
||||
rowFilter : this.rowFilter.bind(this, contentEntry.id),
|
||||
isSelectionValid: this.hasEntityCreatePermission.bind(this),
|
||||
breadcrumbTransform: this.changeBreadcrumbPath.bind(this), // here is the transform function
|
||||
select: select
|
||||
};
|
||||
|
||||
this.openContentNodeDialog(data, 'adf-content-node-selector-dialog', '630px');
|
||||
```
|
||||
|
||||
A transform function to remove the "Sites" folder from the path would look something like this:
|
||||
|
||||
```ts
|
||||
private changeBreadcrumbPath(node: MinimalNodeEntryEntity) {
|
||||
|
||||
if (node && node.path && node.path.elements) {
|
||||
const elements = node.path.elements;
|
||||
|
||||
if (elements.length > 1) {
|
||||
if (elements[1].name === 'Sites') {
|
||||
elements.splice(1, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
```
|
||||
|
||||
Below, the breadcrumb is shown before and after the transform function is applied:
|
||||
|
||||
|
||||
|
||||
## See also
|
||||
|
||||
- [Document list component](document-list.component.md)
|
||||
- [Dropdown breadcrumb component](dropdown-breadcrumb.component.md)
|
||||
302
docs/content-services/content-action.component.md
Normal file
302
docs/content-services/content-action.component.md
Normal file
@@ -0,0 +1,302 @@
|
||||
---
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
---
|
||||
# Content Action component
|
||||
|
||||
Adds options to a Document List actions menu for a particular content type.
|
||||
|
||||
|
||||
|
||||
## Contents
|
||||
|
||||
- [Basic Usage](#basic-usage)
|
||||
|
||||
- [Properties](#properties)
|
||||
- [Events](#events)
|
||||
|
||||
- [Details](#details)
|
||||
|
||||
- [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
|
||||
|
||||
```html
|
||||
<adf-document-list [contentActions]="true"...>
|
||||
<content-actions>
|
||||
|
||||
<!-- system handler -->
|
||||
<content-action
|
||||
icon="content_copy"
|
||||
target="document"
|
||||
title="copy"
|
||||
permission="update"
|
||||
[disableWithNoPermission]="true"
|
||||
handler="copy">
|
||||
</content-action>
|
||||
|
||||
<!-- custom handler -->
|
||||
<content-action
|
||||
target="document"
|
||||
title="Custom action"
|
||||
(execute)="myCustomAction1($event)">
|
||||
</content-action>
|
||||
|
||||
<!-- combined handler -->
|
||||
<content-action
|
||||
target="document"
|
||||
title="Delete with additional custom callback"
|
||||
handler="delete"
|
||||
permission="delete"
|
||||
(execute)="myCustomActionAfterDelete($event)">
|
||||
</content-action>
|
||||
|
||||
</content-actions>
|
||||
...
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
```ts
|
||||
export class MyView {
|
||||
// ...
|
||||
|
||||
myCustomAction1(event) {
|
||||
let entry = event.value.entry;
|
||||
alert(`Custom document action for ${entry.name}`);
|
||||
}
|
||||
|
||||
myCustomActionAfterDelete(event) {
|
||||
let entry = event.value.entry;
|
||||
alert(`Custom callback after delete system action for ${entry.name}`);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| title | `string` | `'Action'` | 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 actions. Can be "delete", "download", "copy" or "move". |
|
||||
| target | `string` | [ContentActionTarget.All](https://github.com/Alfresco/alfresco-ng2-components/blob/development/lib/content-services/document-list/models/content-action.model.ts) | Type of item that the action applies to. Can be one of the values provided by the enum : **All**, **Folder**, **Document** |
|
||||
| permission | `string` | | The permission type. |
|
||||
| disableWithNoPermission | `boolean` | | Should this action be disabled in the menu if the user doesn't have permission for it? |
|
||||
| disabled | `boolean` | `false` | Is the menu item disabled? |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| execute | `EventEmitter<{}>` | Emitted when the user selects the action from the menu. |
|
||||
| permissionEvent | `EventEmitter<{}>` | Emitted when a permission error occurs |
|
||||
| error | `EventEmitter<{}>` | Emitted when an error occurs during the action. Applies to copy and move actions. |
|
||||
| success | `EventEmitter<{}>` | Emitted when the action succeeds with the success string message. Applies to copy, move and delete actions. |
|
||||
|
||||
## Details
|
||||
|
||||
The document actions are rendered on a dropdown menu for each items of content. You can use the
|
||||
`target` property to choose whether the action applies to folders or documents.
|
||||
|
||||
A number of built-in actions are defined to handle common use cases:
|
||||
|
||||
- **Download** (document)
|
||||
- **Copy** (document, folder)
|
||||
- **Move** (document, folder)
|
||||
- **Delete** (document, folder)
|
||||
|
||||
You can use one of the built-in handlers by assigning its name to the `handler` property.
|
||||
(The names are case-insensitive, so `handler="download"` and `handler="DOWNLOAD"`
|
||||
will trigger the same action.) You can also add your own handler by implementing the
|
||||
`execute` event.
|
||||
|
||||
Note that you can use _both_ a built-in handler and your own `execute`
|
||||
function in the same action. The `execute` function is passed a `NodeMinimalEntry` as its
|
||||
parameter (see the [Document Library model](document-library.model.md) page for more
|
||||
information) which contains full details of the item that the action is operating on. For
|
||||
example, with `handler="delete"` you could use `execute` to show a message with the name,
|
||||
type and other details of the item just deleted:
|
||||
|
||||
```html
|
||||
<content-actions>
|
||||
<content-action
|
||||
target="document"
|
||||
title="Delete"
|
||||
permission="delete"
|
||||
disableWithNoPermission="true"
|
||||
handler="delete"
|
||||
(execute)="myCustomActionAfterDelete($event)">
|
||||
</content-action>
|
||||
</content-actions>
|
||||
```
|
||||
|
||||
```ts
|
||||
myCustomActionAfterDelete(event) {
|
||||
let entry = event.value.entry;
|
||||
|
||||
let item = "";
|
||||
|
||||
if (entry.isFile) {
|
||||
item = "file";
|
||||
} else if (entry.isFolder) {
|
||||
item = "folder"
|
||||
}
|
||||
|
||||
this.notificationService.openSnackMessage(`Deleted ${item} "${entry.name}" `, 20000);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Built-in action examples
|
||||
|
||||
#### Delete - System handler combined with custom handler
|
||||
|
||||
If you specify both `handler="delete"` and your own custom handler with
|
||||
`(execute)="myCustomActionAfterDelete($event)"`, your handler will run after a delete completes
|
||||
successfully. A delete operation is considered successful if there are no permission or
|
||||
network-related errors for the delete request. You can avoid permission errors simply by disabling
|
||||
an item for users who don't have permission to use it (set `disableWithNoPermission="true"`).
|
||||
|
||||
```html
|
||||
<adf-document-list ...>
|
||||
<content-actions>
|
||||
|
||||
<content-action
|
||||
target="document"
|
||||
title="Delete"
|
||||
permission="delete"
|
||||
disableWithNoPermission="true"
|
||||
handler="delete">
|
||||
</content-action>
|
||||
|
||||
</content-actions>
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
|
||||
|
||||
You can also implement the `permissionEvent` to handle permission errors
|
||||
(to show the user a notification, for example). Subscribe to this event from your component
|
||||
and use the [Notification service](../core/notification.service.md) to show a message.
|
||||
|
||||
```html
|
||||
<adf-document-list [contentActions]="true"...>
|
||||
<content-actions>
|
||||
|
||||
<content-action
|
||||
target="document"
|
||||
title="Delete"
|
||||
permission="delete"
|
||||
(permissionEvent)="onPermissionsFailed($event)"
|
||||
handler="delete">
|
||||
</content-action>
|
||||
|
||||
</content-actions>
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
```ts
|
||||
export class MyComponent {
|
||||
|
||||
onPermissionsFailed(event: any) {
|
||||
this.notificationService.openSnackMessage(`you don't have the ${event.permission} permission to ${event.action} the ${event.type} `, 4000);
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
#### Download
|
||||
|
||||
This action simply starts a download of the corresponding document file.
|
||||
|
||||
```html
|
||||
<adf-document-list [contentActions]="true"...>
|
||||
<content-actions>
|
||||
|
||||
<content-action
|
||||
target="document"
|
||||
title="Download"
|
||||
handler="download">
|
||||
</content-action>
|
||||
|
||||
</content-actions>
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
|
||||
|
||||
#### Copy and move
|
||||
|
||||
These actions show the destination chooser dialog for copy and move actions. By default,
|
||||
the destination chooser lists all the folders of the subject item's parent. However, it won't
|
||||
allow the item being copied/moved to be the destination if it is itself a folder.
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<adf-document-list [contentActions]="true"...>
|
||||
<content-actions>
|
||||
|
||||
<content-action
|
||||
icon="content_copy"
|
||||
target="document"
|
||||
title="copy"
|
||||
permission="update"
|
||||
[disableWithNoPermission]="true"
|
||||
(error)="onContentActionError($event)"
|
||||
(success)="onContentActionSuccess($event)"
|
||||
(permissionEvent)="onPermissionsFailed($event)"
|
||||
handler="copy">
|
||||
</content-action>
|
||||
|
||||
<content-action
|
||||
icon="redo"
|
||||
target="folder"
|
||||
title="move"
|
||||
permission="update"
|
||||
[disableWithNoPermission]="true"
|
||||
(error)="onContentActionError($event)"
|
||||
(success)="onContentActionSuccess($event)"
|
||||
(permissionEvent)="onPermissionsFailed($event)"
|
||||
handler="move">
|
||||
</content-action>
|
||||
|
||||
</content-actions>
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
### Error, Permission and Success callbacks
|
||||
|
||||
Defining error, permission and success callbacks are pretty much the same as doing it for the delete permission handling.
|
||||
|
||||
- The error handler callback gets the error object which was raised
|
||||
- The success callback's only parameter is the translatable success message string (could be used for showing in snackbar for example)
|
||||
- The permissionEvent callback is the same as described above with the delete action
|
||||
|
||||
|
||||
|
||||
### Customizing built-in actions
|
||||
|
||||
The built-in actions are defined in the [Document Actions service](document-actions.service.md) and
|
||||
[Folder Actions service](folder-actions.service.md) but you can register new actions with these services
|
||||
and override the default implementations. See the doc pages for
|
||||
[Document Actions service](document-actions.service.md) and [Folder Actions service](folder-actions.service.md)
|
||||
for details and examples.
|
||||
|
||||
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
|
||||
|
||||
<!-- seealso start -->
|
||||
|
||||
## See also
|
||||
|
||||
- [Document list component](document-list.component.md)
|
||||
- [Document actions service](document-actions.service.md)
|
||||
- [Folder actions service](folder-actions.service.md)
|
||||
<!-- seealso end -->
|
||||
199
docs/content-services/content-metadata.component.md
Normal file
199
docs/content-services/content-metadata.component.md
Normal file
@@ -0,0 +1,199 @@
|
||||
---
|
||||
Added: v2.1.0
|
||||
Status: Active
|
||||
---
|
||||
# Content Metadata Card component
|
||||
|
||||
Allows a user to display and edit metadata related to a node.
|
||||
|
||||
<img src="../docassets/images/ContentMetadata.png" width="325">
|
||||
|
||||
## Basic Usage
|
||||
|
||||
The component shows metadata related to the given node. The component uses the card view component to render the properties of metadata aspects.
|
||||
The different aspects and their properties to be shown can be configured as application config preset, for details about it see the related section below. By default the component only shows the basic properties of the node. Clicking on the pencil icon at the bottom, renders the underlying card view component in edit mode enabling to edit and update the metadata properties.
|
||||
|
||||
```html
|
||||
<adf-content-metadata-card
|
||||
[displayEmpty]="false"
|
||||
[preset]="'*'"
|
||||
[node]="node">
|
||||
</adf-content-metadata-card>
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| node | MinimalNodeEntryEntity | - | (**required**) The node entity to fetch metadata about |
|
||||
| displayEmpty | boolean | false | Display empty values in card view or not |
|
||||
| preset | string | "*" | The metadata preset's name, which defines aspects and their properties |
|
||||
|
||||
## Details
|
||||
|
||||
### Application config presets
|
||||
|
||||
In the application config file you can define different presets for the metadata component or override the default preset. The **default** preset is "*" if not set, meaning the component will display every aspects and properties of the nodes without filtering.
|
||||
|
||||
Beside the default preset you can define as many presets as you want, if you'd like to use different metadata components with different presets.
|
||||
|
||||
To understand presets better, you can have a look at on the following different example configurations.
|
||||
|
||||
### Indifferent config
|
||||
|
||||
If you don't have any preset configured manually in you application config, this would be equivalent as if you had the application config as defined below:
|
||||
|
||||
```json
|
||||
...
|
||||
"content-metadata": {
|
||||
"presets": {
|
||||
"default": "*"
|
||||
}
|
||||
}
|
||||
...
|
||||
```
|
||||
|
||||
### Aspect oriented config
|
||||
|
||||
With this type of configuration you are able to "whitelist" aspects and properties for a preset, but everything will be grouped by aspects and there is no further way to group properties. If you want to group different properties in groups you define, scroll down a bit and have a look at on the layout oriented configruration.
|
||||
|
||||
#### Whitelisting only a few aspects in the default preset
|
||||
|
||||
If you want to restrict to only a few aspects (e.g.: exif, your-custom-aspect), you have to use the name of that particular aspect to be able to whitelist it. In case of exif aspect this is "exif:exif".
|
||||
|
||||
```json
|
||||
...
|
||||
"content-metadata": {
|
||||
"presets": {
|
||||
"default": {
|
||||
"custom:aspect": "*",
|
||||
"exif:exif": "*"
|
||||
}
|
||||
}
|
||||
}
|
||||
...
|
||||
```
|
||||
|
||||
#### Whitelisting only a few properties of a few aspects in the default preset
|
||||
|
||||
If you want to filter more, you can do this on property level also. For this, you have to list the names of whitelisted aspect properties in an array of strings. Again, for identifying a property, you have to use its name.
|
||||
|
||||
```json
|
||||
...
|
||||
"content-metadata": {
|
||||
"presets": {
|
||||
"default": {
|
||||
"custom:aspect": "*",
|
||||
"exif:exif": [ "exif:pixelXDimension", "exif:pixelYDimension"]
|
||||
}
|
||||
}
|
||||
}
|
||||
...
|
||||
```
|
||||
|
||||
#### Whitelisting only a few properties of a few aspects in a custom preset
|
||||
|
||||
And finally, you can create any custom aspect following the same rules.
|
||||
|
||||
```json
|
||||
...
|
||||
"content-metadata": {
|
||||
"presets": {
|
||||
"default": "*",
|
||||
"kitten-images": {
|
||||
"custom:aspect": "*",
|
||||
"exif:exif": [ "exif:pixelXDimension", "exif:pixelYDimension"]
|
||||
}
|
||||
}
|
||||
}
|
||||
...
|
||||
```
|
||||
|
||||
### Layout oriented config
|
||||
|
||||
Beside the aspect oriented configuration, it is possible to configure the groups and properties in a more detailed way. With this type of configuration any property of any aspect / type can be "cherry picked"-ed and grouped into and accordion drawer, with defining a translatable title in the preset configuration.
|
||||
|
||||
#### Basic elements
|
||||
|
||||
The following config will result in one accordion group named "TRANSLATABLE_TITLE_FOR_GROUP_1", with all the properties from the custom:aspect followed by the two properties (exif:pixelXDimension, exif:pixelYDimension) from the exif:exif aspect followed by one property (custom:myPropertyName) from custom:type.
|
||||
|
||||
```json
|
||||
...
|
||||
"content-metadata": {
|
||||
"presets": {
|
||||
"kitten-images": [{
|
||||
"title": "TRANSLATABLE_TITLE_FOR_GROUP_1",
|
||||
"items": [
|
||||
{ "aspect": "custom:aspect", "properties": "*" },
|
||||
{ "aspect": "exif:exif", "properties": [ "exif:pixelXDimension", "exif:pixelYDimension"] },
|
||||
{ "type": "custom:type", "properties": [ "custom:myPropertyName" ] },
|
||||
]
|
||||
}]
|
||||
}
|
||||
}
|
||||
...
|
||||
```
|
||||
|
||||
#### More complex example
|
||||
|
||||
As a more complex config, you can study the one below:
|
||||
|
||||
```json
|
||||
"content-metadata": {
|
||||
"presets": {
|
||||
"kittens": [
|
||||
{
|
||||
"title": "GROUP-TITLE1-TRANSLATION-KEY",
|
||||
"items": [
|
||||
{
|
||||
"aspect": "exif:exif",
|
||||
"properties": "*"
|
||||
},
|
||||
{
|
||||
"aspect": "kitten:vet-records",
|
||||
"properties": [ "kitten:custom1", "kitten:custom3" ]
|
||||
},
|
||||
{
|
||||
"aspect": "owner:parameters",
|
||||
"properties": [ "owner:name" ]
|
||||
},
|
||||
{
|
||||
"type": "kitten:kitten",
|
||||
"properties": [ "kitten:name", "kitten:color" ]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "GROUP-TITLE2-TRANSLATION-KEY",
|
||||
"items": [
|
||||
{
|
||||
"aspect": "kitten:food",
|
||||
"properties": [ "kitten:favourite-food", "kitten:recommended-food" ]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
The end result of this config would be two accordion groups with the properties like this:
|
||||
|
||||
|GROUP-TITLE1-TRANSLATION-KEY|
|
||||
|---|
|
||||
|exif:param1|
|
||||
|exif:param2|
|
||||
|...|
|
||||
|exif:paramN|
|
||||
|kitten:custom1|
|
||||
|kitten:custom3|
|
||||
|owner:name|
|
||||
|kitten:name|
|
||||
|kitten:color|
|
||||
|
||||
|GROUP-TITLE2-TRANSLATION-KEY|
|
||||
|---|
|
||||
|kitten:favourite-food|
|
||||
|kitten:recommended-food|
|
||||
|
||||
## What happens when there is a whitelisted aspect in the config but the given node doesn't relate to that aspect
|
||||
|
||||
Nothing, this aspect (as it is not related to the node) will be simply ignored and not be displayed. The aspects to be displayed are calculated as an intersection of the preset's aspects and the aspects related to the node.
|
||||
84
docs/content-services/content-node-dialog.service.md
Normal file
84
docs/content-services/content-node-dialog.service.md
Normal file
@@ -0,0 +1,84 @@
|
||||
---
|
||||
Added: v2.1.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-03-13
|
||||
---
|
||||
|
||||
# Content Node Dialog service
|
||||
|
||||
Displays and manages dialogs for selecting content to open, copy or upload.
|
||||
|
||||
## Methods
|
||||
|
||||
- `openFileBrowseDialogByFolderId(folderNodeId: string): Observable<MinimalNodeEntryEntity[]>`
|
||||
Opens a file browser at a chosen folder location.
|
||||
- `folderNodeId` - ID of the folder to use
|
||||
- `openFileBrowseDialogBySite(): Observable<MinimalNodeEntryEntity[]>`
|
||||
Opens a file browser at a chosen site location.
|
||||
|
||||
- `openFolderBrowseDialogBySite(): Observable<MinimalNodeEntryEntity[]>`
|
||||
Opens a folder browser at a chosen site location.
|
||||
|
||||
- `openFolderBrowseDialogByFolderId(folderNodeId: string): Observable<MinimalNodeEntryEntity[]>`
|
||||
Opens a folder browser at a chosen folder location.
|
||||
- `folderNodeId` - ID of the folder to use
|
||||
- `openCopyMoveDialog(action: string, contentEntry: MinimalNodeEntryEntity, permission?: string): Observable<MinimalNodeEntryEntity[]>`
|
||||
Opens a dialog to copy or move an item to a new location.
|
||||
- `action` - Name of the action (eg, "Copy" or "Move") to show in the title
|
||||
- `contentEntry` - Item to be copied or moved
|
||||
- `permission` - (Optional) Permission for the operation
|
||||
- `getTitleTranslation(action: string, name: string): string`
|
||||
Gets the translation of the dialog title.
|
||||
- `action` - Name of the action to display in the dialog title
|
||||
- `name` - Name of the item on which the action is being performed
|
||||
- `openUploadFolderDialog(action: string, contentEntry: MinimalNodeEntryEntity): Observable<MinimalNodeEntryEntity[]>`
|
||||
Opens a dialog to choose a folder to upload.
|
||||
- `action` - Name of the action to show in the title
|
||||
- `contentEntry` - Item to upload
|
||||
- `openUploadFileDialog(action: string, contentEntry: MinimalNodeEntryEntity): Observable<MinimalNodeEntryEntity[]>`
|
||||
Opens a dialog to choose a file to upload.
|
||||
- `action` - Name of the action to show in the title
|
||||
- `contentEntry` - Item to upload
|
||||
- `close()`
|
||||
Closes the currently open dialog.
|
||||
|
||||
|
||||
## Details
|
||||
|
||||
The `openXXX` methods return an
|
||||
[Observable](http://reactivex.io/rxjs/manual/overview.html#observable) that you can subscribe
|
||||
to in order to get the information from the result:
|
||||
|
||||
```ts
|
||||
import { ContentNodeDialogService } from '@adf/content-services'
|
||||
|
||||
|
||||
constructor(private contentDialogService: ContentNodeDialogService){}
|
||||
|
||||
yourFunctionOnCopyOrMove(){
|
||||
this.contentDialogService
|
||||
.openCopyMoveDialog(actionName, targetNode, neededPermissionForAction)
|
||||
.subscribe((selections: MinimalNodeEntryEntity[]) => {
|
||||
// place your action here on operation success!
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
The `openXXXByFolderId` methods let you set the initial folder location of the browser
|
||||
using a folder ID string. This can be obtained from the `id` property of a
|
||||
[MinimalNodeEntryEntity](document-library.model.md) object (returned from a previous
|
||||
dialog operation, say) or be set to one of the well-known names "-my-" , "-shared-" or
|
||||
"-root-".
|
||||
|
||||
The `openCopyMoveDialog` and `openUploadXXX` methods require the following parameters:
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| action | string | The label for the confirm button of the dialog. |
|
||||
| contentEntry | [MinimalNodeEntryEntity](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/MinimalNode.md) | The node we want to be copied/moved or uploaded. |
|
||||
| neededPermissionForAction | string | (`openCopyMoveDialog` only) Permission required to perform the relative action (eg: copy will need the 'update' permission ). |
|
||||
|
||||
## See Also
|
||||
|
||||
- [Content node selector panel component](content-node-selector-panel.component.md)
|
||||
- [Content node selector component](content-node-selector.component.md)
|
||||
@@ -0,0 +1,64 @@
|
||||
---
|
||||
Added: v2.1.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-03-12
|
||||
---
|
||||
|
||||
# Content Node Selector Panel component
|
||||
|
||||
Opens a Content Node Selector in its own dialog window.
|
||||
|
||||
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-content-node-selector-panel
|
||||
[currentFolderId]="currentFolderId"
|
||||
[dropdownHideMyFiles]="dropdownHideMyFiles"
|
||||
[dropdownSiteList]="dropdownSiteList"
|
||||
[rowFilter]="rowFilter"
|
||||
[imageResolver]="imageResolver"
|
||||
(select)="onSelect($event)">
|
||||
</adf-content-node-selector-panel>
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| currentFolderId | `string` | `null` | Node ID of the folder currently listed. |
|
||||
| dropdownHideMyFiles | `boolean` | `false` | Hide the "My Files" option added to the site list by default. See the [Sites Dropdown component](sites-dropdown.component.md) for more information. |
|
||||
| dropdownSiteList | `SitePaging` | `null` | Custom site for site dropdown same as siteList. See the [Sites Dropdown component](sites-dropdown.component.md) for more information. |
|
||||
| rowFilter | `RowFilter` | `null` | Custom row filter function. See the [Document List component](document-list.component.md#custom-row-filter) for more information. |
|
||||
| imageResolver | `ImageResolver` | `null` | Custom image resolver function. See the [Document List component](document-list.component.md#custom-row-filter) for more information. |
|
||||
| pageSize | `number` | | Number of items shown per page in the list. |
|
||||
| isSelectionValid | `ValidationFunction` | `defaultValidation` | Function used to decide if the selected node has permission to be selected. Default value is a function that always returns true. |
|
||||
| breadcrumbTransform | `(node: any) => any` | | Transformation to be performed on the chosen/folder node before building the breadcrumb UI. Can be useful when custom formatting is needed for the breadcrumb. You can change the path elements from the node that are used to build the breadcrumb using this function. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| select | `EventEmitter<MinimalNodeEntryEntity[]>` | Emitted when the user has chosen an item. |
|
||||
|
||||
## Details
|
||||
|
||||
This component opens a _content node selector_ in its own dialog window. This behaves a lot like the
|
||||
standard file open/save dialogs used by applications to choose files. Full details are given in the
|
||||
[Content Node Selector component](content-node-selector.component.md) page (this is similar but does
|
||||
not manage the dialog window for you). Also, the
|
||||
[Content Node Dialog service](content-node-dialog.service.md) has several methods that give you
|
||||
finer control over the behavior of the dialog.
|
||||
|
||||
### Using the breadcrumbTransform function
|
||||
|
||||
The `breadcrumbTransform` property lets you modify the Node object that is used to generate the
|
||||
list of breadcrumbs. You can use this, for example, to remove path elements that are not
|
||||
relevant to the use case. See the [Breadcrumb component](breadcrumb.component.md) page for an
|
||||
example of how to use this function.
|
||||
|
||||
## See also
|
||||
|
||||
- [Content Node Selector component](content-node-selector.component.md)
|
||||
- [Content Node Dialog service](content-node-dialog.service.md)
|
||||
119
docs/content-services/content-node-selector.component.md
Normal file
119
docs/content-services/content-node-selector.component.md
Normal file
@@ -0,0 +1,119 @@
|
||||
---
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-03-12
|
||||
---
|
||||
# Content Node Selector component
|
||||
|
||||
Allows a user to select items from a Content Services repository.
|
||||
|
||||
|
||||
|
||||
## Basic Usage
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Description |
|
||||
| ---- | ----------- |
|
||||
| select | Emitted when the user has selected an item |
|
||||
|
||||
## Details
|
||||
|
||||
The Content Node Selector component works a lot like the standard File Open/Save
|
||||
dialog used by desktop applications except that it chooses items from a Content Services
|
||||
repository rather than the filesystem. For example, the
|
||||
[Document List component](document-list.component.md) uses a selector to choose the targets
|
||||
of Copy/Move actions (see the [Content Action component](content-action.component.md) for
|
||||
more information).
|
||||
|
||||
Unlike most components, the Content Node Selector is typically shown in a dialog box
|
||||
rather than the main page and you are responsible for opening the dialog yourself. You can use the
|
||||
[Angular Material Dialog](https://material.angular.io/components/dialog/overview) for this,
|
||||
as shown in the usage example. ADF provides the `ContentNodeSelectorComponentData` interface
|
||||
to work with the Dialog's
|
||||
[data option](https://material.angular.io/components/dialog/overview#sharing-data-with-the-dialog-component-):
|
||||
|
||||
```ts
|
||||
interface ContentNodeSelectorComponentData {
|
||||
title: string;
|
||||
actionName?: string;
|
||||
currentFolderId: string;
|
||||
dropdownHideMyFiles?: boolean;
|
||||
dropdownSiteList?: SitePaging;
|
||||
rowFilter?: RowFilter;
|
||||
imageResolver?: ImageResolver;
|
||||
isSelectionValid?: (entry: MinimalNodeEntryEntity) => boolean;
|
||||
breadcrumbTransform?: (node) => any;
|
||||
select: EventEmitter<MinimalNodeEntryEntity[]>;
|
||||
}
|
||||
```
|
||||
|
||||
If you don't want to manage the dialog yourself then it is easier to use the
|
||||
[Content Node Selector Panel component](content-node-selector-panel.component.md), or the
|
||||
methods of the [Content Node Dialog service](content-node-dialog.service.md), which create
|
||||
the dialog for you.
|
||||
|
||||
### Usage example
|
||||
|
||||
```ts
|
||||
import { MatDialog } from '@angular/material';
|
||||
import { ContentNodeSelectorComponentData, ContentNodeSelectorComponent} from '@adf/content-services'
|
||||
import { Subject } from 'rxjs/Subject';
|
||||
...
|
||||
|
||||
constructor(dialog: MatDialog ... ) {}
|
||||
|
||||
openSelectorDialog() {
|
||||
data: ContentNodeSelectorComponentData = {
|
||||
title: "Choose an item",
|
||||
currentFolderId: someFolderId,
|
||||
select: new Subject<MinimalNodeEntryEntity[]>()
|
||||
};
|
||||
|
||||
this.dialog.open(
|
||||
ContentNodeSelectorComponent,
|
||||
{
|
||||
data, panelClass: 'adf-content-node-selector-dialog',
|
||||
width: '630px'
|
||||
}
|
||||
);
|
||||
|
||||
data.select.subscribe((selections: MinimalNodeEntryEntity[]) => {
|
||||
// Use or store selection...
|
||||
},
|
||||
(error)=>{
|
||||
//your error handling
|
||||
},
|
||||
()=>{
|
||||
//action called when an action or cancel is clicked on the dialog
|
||||
this.dialog.closeAll();
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
All the results will be streamed to the select [subject](http://reactivex.io/rxjs/manual/overview.html#subject) present in the `ContentNodeSelectorComponentData` object passed to the dialog.
|
||||
When the dialog action is selected by clicking, the `data.select` stream will be completed.
|
||||
|
||||
### RowFilter and ImageResolver
|
||||
|
||||
The Content Node Selector uses a [Document List](document-list.component.md) to display the
|
||||
items that the user can choose. As with the standard Document List, you can supply a custom
|
||||
**row filter** function (to hide items that can't be chosen) and a custom **image resolver**
|
||||
function (to select an image to show in a particular list cell). For example, you could use
|
||||
a row filter to hide document nodes in a folder selector. See the
|
||||
[Advanced Usage and Customization](document-list.component.md#advanced-usage-and-customization)
|
||||
section of the Document List page to learn how these functions are implemented.
|
||||
|
||||
### Using the breadcrumbTransform function
|
||||
|
||||
The `breadcrumbTransform` property of `ContentNodeSelectorComponentData` lets you modify
|
||||
the Node object that is used to generate the
|
||||
list of breadcrumbs. You can use this, for example, to remove path elements that are not
|
||||
relevant to the use case. See the [Breadcrumb component](breadcrumb.component.md) page for an
|
||||
example of how to use this function.
|
||||
|
||||
## See also
|
||||
|
||||
- [Document list component](document-list.component.md)
|
||||
- [Content Node Selector Panel component](content-node-selector-panel.component.md)
|
||||
- [Content Node Dialog service](content-node-dialog.service.md)
|
||||
95
docs/content-services/document-actions.service.md
Normal file
95
docs/content-services/document-actions.service.md
Normal file
@@ -0,0 +1,95 @@
|
||||
---
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
---
|
||||
# Document Actions service
|
||||
|
||||
Implements the document menu actions for the Document List component.
|
||||
|
||||
## Methods
|
||||
|
||||
- `getHandler(key: string): ContentActionHandler`
|
||||
Gets the handler for an action.
|
||||
- `key` - Identifier of the action
|
||||
- `setHandler(key: string, handler: ContentActionHandler): boolean`
|
||||
Sets a new handler for an action.
|
||||
- `key` - Identifier of the action
|
||||
- `handler` - Handler for the action
|
||||
- `canExecuteAction(obj: any): boolean`
|
||||
Checks if actions can be executed for an item.
|
||||
- `obj` - Item to receive an action
|
||||
|
||||
## Details
|
||||
|
||||
This service implements the built-in actions that can be applied to a document
|
||||
shown in a [Document List component](document-list.component.md): **delete**,
|
||||
**download**, **copy** and **move** (see the
|
||||
[Content Action component](content-action.component.md) for further details and examples
|
||||
of these menu items). However, you can also use the service to add extra actions or
|
||||
replace the built-in ones with your own implementation.
|
||||
|
||||
### Registering an action
|
||||
|
||||
In the example below, a custom handler called `my-handler` is registered with the service.
|
||||
This action will invoke the `myDocumentActionHandler` function each time it is selected
|
||||
from the Document List menu.
|
||||
|
||||
```ts
|
||||
import { DocumentActionsService } from '@alfresco/adf-content-services';
|
||||
|
||||
export class MyView {
|
||||
|
||||
constructor(documentActions: DocumentActionsService) {
|
||||
documentActions.setHandler(
|
||||
'my-handler',
|
||||
this.myDocumentActionHandler.bind(this)
|
||||
);
|
||||
}
|
||||
|
||||
myDocumentActionHandler(obj: any) {
|
||||
window.alert('my custom action handler');
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The action can then be used from the component in the usual way:
|
||||
|
||||
```html
|
||||
<adf-document-list ...>
|
||||
<content-actions>
|
||||
|
||||
<content-action
|
||||
target="document"
|
||||
title="My action"
|
||||
handler="my-handler">
|
||||
</content-action>
|
||||
|
||||
</content-actions>
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
You can also override a built-in handler (eg, 'download') with your own function:
|
||||
|
||||
```ts
|
||||
export class MyView {
|
||||
|
||||
constructor(documentActions: DocumentActionsService) {
|
||||
documentActions.setHandler(
|
||||
'download',
|
||||
this.customDownloadBehavior.bind(this)
|
||||
);
|
||||
}
|
||||
|
||||
customDownloadBehavior(obj: any) {
|
||||
window.alert('my custom download behavior');
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
You will probably want to set up all your custom actions at the application root level or
|
||||
with a custom application service.
|
||||
|
||||
## See also
|
||||
|
||||
- [Content action component](content-action.component.md)
|
||||
- [Folder actions service](folder-actions.service.md)
|
||||
117
docs/content-services/document-library.model.md
Normal file
117
docs/content-services/document-library.model.md
Normal file
@@ -0,0 +1,117 @@
|
||||
---
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
---
|
||||
# Document Library model
|
||||
|
||||
Defines classes for use with the Content Services node API.
|
||||
|
||||
## Details
|
||||
|
||||
ADF provides several services that give higher-level access to
|
||||
underlying [Alfresco JS Api](../alfresco-api.service.md) functionality.
|
||||
The classes defined below are used in some of these services to access
|
||||
the Content Services nodes API. You can use these services to access
|
||||
the nodes (ie, documents and folders) of a repository using their
|
||||
associated ID strings. See [Nodes Api service](../core/nodes-api.service.md)
|
||||
for more detail about the usage of these classes.
|
||||
|
||||
## Node information
|
||||
|
||||
These classes contain basic information about nodes (see
|
||||
[Item information](#item-information) below for more detail
|
||||
about some of the properties). For example, this is used by the
|
||||
[Document List component](document-list.component.md) to supply
|
||||
a [data context](document-list.component.md#underlying-node-object)
|
||||
for each row of the list. The [Nodes Api service](../core/nodes-api.service.md)
|
||||
has methods for getting the full information for a node ID string.
|
||||
|
||||
```ts
|
||||
class NodeMinimalEntry implements MinimalNodeEntity {
|
||||
entry: NodeMinimal;
|
||||
}
|
||||
|
||||
class NodeMinimal implements MinimalNodeEntryEntity {
|
||||
id: string;
|
||||
parentId: string;
|
||||
name: string;
|
||||
nodeType: string;
|
||||
isFolder: boolean;
|
||||
isFile: boolean;
|
||||
modifiedAt: Date;
|
||||
modifiedByUser: UserInfo;
|
||||
createdAt: Date;
|
||||
createdByUser: UserInfo;
|
||||
content: ContentInfo;
|
||||
path: PathInfoEntity;
|
||||
properties: NodeProperties = {};
|
||||
}
|
||||
|
||||
interface NodeProperties {
|
||||
[key: string]: any;
|
||||
}
|
||||
```
|
||||
|
||||
## Paging
|
||||
|
||||
These classes are used to handle a list of nodes, such as the
|
||||
contents of a folder node. For example, the `node` property of
|
||||
the [Document List component](document-list.component.md) contains
|
||||
the node whose contents are currently shown in the document list.
|
||||
|
||||
```ts
|
||||
class NodePaging {
|
||||
list: NodePagingList;
|
||||
}
|
||||
|
||||
class NodePagingList {
|
||||
pagination: Pagination;
|
||||
entries: NodeMinimalEntry[];
|
||||
}
|
||||
|
||||
class Pagination {
|
||||
count: number;
|
||||
hasMoreItems: boolean;
|
||||
totalItems: number;
|
||||
skipCount: number;
|
||||
maxItems: number;
|
||||
}
|
||||
```
|
||||
|
||||
## Item information
|
||||
|
||||
These classes hold information about specific items related to
|
||||
a node.
|
||||
|
||||
```ts
|
||||
class UserInfo {
|
||||
displayName: string;
|
||||
id: string;
|
||||
}
|
||||
|
||||
class ContentInfo {
|
||||
mimeType: string;
|
||||
mimeTypeName: string;
|
||||
sizeInBytes: number;
|
||||
encoding: string;
|
||||
}
|
||||
|
||||
class PathInfoEntity {
|
||||
elements: PathElementEntity[];
|
||||
isComplete: boolean;
|
||||
name: string;
|
||||
}
|
||||
|
||||
class PathElementEntity {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
```
|
||||
|
||||
<!-- 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)
|
||||
- [Nodes api service](../core/nodes-api.service.md)
|
||||
<!-- seealso end -->
|
||||
819
docs/content-services/document-list.component.md
Normal file
819
docs/content-services/document-list.component.md
Normal file
@@ -0,0 +1,819 @@
|
||||
---
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-03-09
|
||||
---
|
||||
|
||||
# Document List component
|
||||
|
||||
Displays the documents from a repository.
|
||||
|
||||
|
||||
|
||||
## Contents
|
||||
|
||||
- [Basic Usage](#basic-usage)
|
||||
|
||||
- [Properties](#properties)
|
||||
- [Events](#events)
|
||||
|
||||
- [Details](#details)
|
||||
|
||||
- [DOM Events](#dom-events)
|
||||
- [Card view](#card-view)
|
||||
- [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
|
||||
|
||||
```html
|
||||
<adf-document-list
|
||||
#documentList
|
||||
[currentFolderId]="'-my-'"
|
||||
[contextMenuActions]="true"
|
||||
[contentActions]="true">
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| display | `string` | `DisplayMode.List` | Change the display mode of the table. Can be "list" or "gallery". |
|
||||
| permissionsStyle | `PermissionStyleModel[]` | `[]` | Define a set of CSS styles styles to apply depending on the permission of the user on that node. See the Permission Style model 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 |
|
||||
| showHeader | `boolean` | `true` | Toggles the header |
|
||||
| navigationMode | `string` | See description | User interaction for folder navigation or file preview. Valid values are "click" and "dblclick". Default value: "dblclick" |
|
||||
| thumbnails | `boolean` | `false` | Show document thumbnails rather than icons |
|
||||
| selectionMode | `string` | `'single'` | Row selection mode. Can be null, `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` | `'right'` | Position of the content actions dropdown menu. Can be set to "left" or "right". |
|
||||
| contextMenuActions | `boolean` | `false` | Toggles context menus for each row |
|
||||
| emptyFolderImageUrl | `string` | See description | Custom image for empty folder. Default value: './assets/images/empty_doc_lib.svg' |
|
||||
| allowDropFiles | `boolean` | `false` | Toggle file drop support for rows (see Upload Directive for further 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 the default sorting detected by the component based on columns. |
|
||||
| rowStyle | `string` | | The inline style to apply to every row. See the Angular NgStyle 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 | `any` | `null` | Custom row filter |
|
||||
| imageResolver | `any` | `null` | Custom image resolver |
|
||||
| currentFolderId | `string` | `null` | The ID of the folder node to display or a reserved string alias for special sources |
|
||||
| folderNode | `MinimalNodeEntryEntity` | `null` | Currently displayed folder node |
|
||||
| node | `NodePaging` | `null` | The Document list will show all the nodes contained in the NodePaging entity |
|
||||
| maxItems | `number` | | Default value is stored into user preference settings |
|
||||
| skipCount | `number` | `0` | Number of elements to skip over for pagination purposes |
|
||||
| enableInfiniteScrolling | `boolean` | `false` | Set document list to work in infinite scrolling mode |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| nodeClick | `EventEmitter<NodeEntityEvent>` | Emitted when the user clicks a list node |
|
||||
| nodeDblClick | `EventEmitter<NodeEntityEvent>` | Emitted when the user double-clicks a list node |
|
||||
| folderChange | `EventEmitter<NodeEntryEvent>` | Emitted when the current display folder changes |
|
||||
| preview | `EventEmitter<NodeEntityEvent>` | Emitted when the user acts upon files with either single or double click (depends on `navigation-mode`). Useful for integration with the Viewer component. |
|
||||
| ready | `EventEmitter<NodePaging>` | Emitted when the Document List has loaded all items and is ready for use |
|
||||
| error | `EventEmitter<any>` | Emitted when the API fails to get the Document List data |
|
||||
|
||||
## Details
|
||||
|
||||
The properties `currentFolderId`, `folderNode` and `node` set the initial folder shown by
|
||||
the Document List. They cannot be used together, so choose the one that suits your use case
|
||||
best.
|
||||
|
||||
### DOM Events
|
||||
|
||||
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 the DocumentList is wrapped by one or more other components.
|
||||
|
||||
| Name | Description |
|
||||
| ---- | ----------- |
|
||||
| node-click | Emitted when user clicks the node |
|
||||
| node-dblclick | Emitted when user double-clicks the node |
|
||||
| node-select | Emitted when user selects a node |
|
||||
| node-unselect | Emitted when user unselects a node |
|
||||
|
||||
Every event is represented by a [CustomEvent](https://developer.mozilla.org/en/docs/Web/API/CustomEvent) instance. Each event will
|
||||
have at least the following properties as part of the `Event.detail` property value:
|
||||
|
||||
```ts
|
||||
{
|
||||
sender: DocumentListComponent,
|
||||
node: MinimalNodeEntity
|
||||
}
|
||||
```
|
||||
|
||||
See the [DataTable](../datatable.component.md) documentation for further details about
|
||||
the other DOM events that the Document List component bubbles up from the DataTable.
|
||||
|
||||
Below is a basic example of handling DOM events in the parent elements.
|
||||
|
||||
```html
|
||||
<div (node-click)="onNodeClicked($event)"
|
||||
(node-dblclick)="onNodeDblClicked($event)">
|
||||
<div>
|
||||
<adf-upload-drag-area ...>
|
||||
<adf-document-list ...>
|
||||
...
|
||||
</adf-document-list>
|
||||
</adf-upload-drag-area>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Card view
|
||||
|
||||
The Document List has an option to display items as "cards" instead of the
|
||||
standard view:
|
||||
|
||||
|
||||
|
||||
Set the `[display]` property to "gallery" to enable card view mode:
|
||||
|
||||
```html
|
||||
<adf-document-list
|
||||
[currentFolderId]="'-my-'"
|
||||
[display]="'gallery'">
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Pagination strategy
|
||||
|
||||
The Document List by default supports 2 types of pagination: **finite** and **infinite**:
|
||||
|
||||
- With **finite** pagination, the Document List needs 2 parameters: `maxItems` and `skipCount`. These set the maximum number of items shown in a single page and the start
|
||||
offset of the first item in the page (ie, the number of items you need to skip to get there).
|
||||
- You can enable **infinite** pagination by setting the same parameters plus an extra third
|
||||
parameter: `enableInfiniteScrolling`.
|
||||
|
||||
### Data Sources
|
||||
|
||||
You can use any of the following options to set the folder that the Document List will display:
|
||||
|
||||
#### Node ID
|
||||
|
||||
The unique identifier of the Node. Gets automatically updated when you perform navigation to other folders.
|
||||
|
||||
#### Repository aliases
|
||||
|
||||
You can use one of the well-known reserved aliases:
|
||||
|
||||
- `-root-`
|
||||
- `-shared-`
|
||||
- `-my-`
|
||||
|
||||
#### Document List aliases
|
||||
|
||||
The Document List component also provides support for the following reserved aliases:
|
||||
|
||||
- `-trashcan-`,
|
||||
- `-sharedlinks-`
|
||||
- `-sites-`
|
||||
- `-mysites-`
|
||||
- `-favorites-`
|
||||
- `-recent-`
|
||||
|
||||
Note that due to the nature of the data, these sources do not support navigation.
|
||||
You may want to handle single and double clicks yourself to perform navigation to other sources.
|
||||
|
||||
The Document List component supports default presets for all the custom sources mentioned earlier.
|
||||
If you don't provide any custom column definition with the [Data Column](#custom-columns)
|
||||
component then a default preset will be automatically used at runtime.
|
||||
|
||||
Some of the presets use the Location columns that allow you to navigate to the parent folder of the node
|
||||
(eg, navigating from the "Favorite" node to the folder that contains it).
|
||||
You can set the default location format using the `locationFormat` property to avoid redefining the entire column layout.
|
||||
|
||||
The default column layout for non-reserved views is:
|
||||
|
||||
- Icon
|
||||
- Name
|
||||
- Size
|
||||
- Modified (date)
|
||||
- Modified by
|
||||
|
||||
**Trashcan**
|
||||
|
||||
```html
|
||||
<adf-document-list
|
||||
currentFolderId="-trashcan-"
|
||||
locationFormat="/files">
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
Default layout:
|
||||
|
||||
- Icon
|
||||
- Name
|
||||
- Location
|
||||
- Size
|
||||
- Deleted
|
||||
- Deleted by
|
||||
|
||||
**Shared Links**
|
||||
|
||||
```html
|
||||
<adf-document-list
|
||||
currentFolderId="-sharedlinks-"
|
||||
locationFormat="/files">
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
Default layout:
|
||||
|
||||
- Icon
|
||||
- Name
|
||||
- Location
|
||||
- Size
|
||||
- Modified
|
||||
- Modified by
|
||||
- Shared by
|
||||
|
||||
**Sites**
|
||||
|
||||
```html
|
||||
<adf-document-list
|
||||
currentFolderId="-sites-">
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
Default layout:
|
||||
|
||||
- Icon
|
||||
- Title
|
||||
- Status
|
||||
|
||||
**My Sites**
|
||||
|
||||
```html
|
||||
<adf-document-list
|
||||
currentFolderId="-mysites-">
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
Default layout:
|
||||
|
||||
- Icon
|
||||
- Title
|
||||
- Status
|
||||
|
||||
**Favorites**
|
||||
|
||||
```html
|
||||
<adf-document-list
|
||||
currentFolderId="-favorites-"
|
||||
locationFormat="/files">
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
Default layout:
|
||||
|
||||
- Icon
|
||||
- Name
|
||||
- Location
|
||||
- Size
|
||||
- Modified
|
||||
- Modified by
|
||||
|
||||
**Recent Files**
|
||||
|
||||
```html
|
||||
<adf-document-list
|
||||
currentFolderId="-recent-"
|
||||
locationFormat="/files">
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
Default layout:
|
||||
|
||||
- Icon
|
||||
- Name
|
||||
- Location
|
||||
|
||||
### Setting default folder
|
||||
|
||||
You can set the current folder path by assigning a value to the `currentFolderId` property.
|
||||
It can be either one of the well-known locations (such as **-root-**, **-shared-** or **-my-**),
|
||||
or a node ID (guid).
|
||||
|
||||
There may be scenarios where you need to set the default path based on a relative string value rather than a node ID.
|
||||
This might happen, for example, when the folder name or path is static but its underlying ID
|
||||
is not (i.e. created manually by admin).
|
||||
In this case you can use the `alfresco-js-api` to get the details of a node based on its
|
||||
relative path.
|
||||
|
||||
The example below shows how to set the default folder to `/Sites/swsdp/documentLibrary`
|
||||
without knowing its ID beforehand. For the sake of simplicity, the example below shows only the main
|
||||
points you should pay attention to:
|
||||
|
||||
```ts
|
||||
import { ChangeDetectorRef } from '@angular/core';
|
||||
import { AlfrescoApiService } from '@alfresco/adf-core';
|
||||
|
||||
export class FilesComponent implements OnInit {
|
||||
|
||||
currentFolderId: string = '-my-';
|
||||
|
||||
constructor(private apiService: AlfrescoApiService,
|
||||
private changeDetector: ChangeDetectorRef) {
|
||||
// ...
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
let nodes: any = this.apiService.getInstance().nodes;
|
||||
nodes.getNodeInfo('-root-', {
|
||||
includeSource: true,
|
||||
include: ['path', 'properties'],
|
||||
relativePath: '/Sites/swsdp/documentLibrary'
|
||||
})
|
||||
.then(node => {
|
||||
console.log(node);
|
||||
this.currentFolderId = node.id;
|
||||
this.changeDetector.detectChanges();
|
||||
});
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The `console.log(node)` for the `getNodeInfo` callback is just for study and debug purposes.
|
||||
It is useful for examining other information that you can access if necessary:
|
||||
|
||||
|
||||
|
||||
**Important note**: for this particular scenario you must also trigger `changeDetector.detectChanges()` as in the example above.
|
||||
|
||||
### Calling DocumentList api directly
|
||||
|
||||
Typically you will bind Document List properties to your application/component class properties:
|
||||
|
||||
```html
|
||||
<adf-document-list
|
||||
[currentFolderId]="myStartFolder">
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
...with the underlying class implemented as in the following example:
|
||||
|
||||
```ts
|
||||
@Component(...)
|
||||
export class MyAppComponent {
|
||||
|
||||
myStartFolder: string = '-my-';
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
However there may be scenarios where you need direct access to the Document List APIs.
|
||||
You can get a reference to the Document List instance using the Angular **Component Interaction** API.
|
||||
See the [Parent calls a ViewChild](https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-view-child)
|
||||
section of the Angular docs for more information.
|
||||
|
||||
Below is an example of getting a reference:
|
||||
|
||||
```html
|
||||
<adf-document-list
|
||||
#documentList
|
||||
[currentFolderId]="myStartFolder">
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
Note that the `#documentList` ID allows the component to be referenced elsewhere.
|
||||
|
||||
```ts
|
||||
import { ViewChild, AfterViewInit } from '@angular/core';
|
||||
import { DocumentListComponent } from '@alfresco/adf-content-services';
|
||||
|
||||
@Component({...})
|
||||
export class MyAppComponent implements AfterViewInit {
|
||||
|
||||
myStartFolder: string = '-my-';
|
||||
|
||||
@ViewChild(DocumentListComponent)
|
||||
documentList: DocumentListComponent;
|
||||
|
||||
ngAfterViewInit() {
|
||||
console.log(this.documentList);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The example above should produce the following browser console output:
|
||||
|
||||
|
||||
|
||||
Now you can access Document List properties or call methods directly:
|
||||
|
||||
```ts
|
||||
// print currently displayed folder node object to console
|
||||
console.log(documentList.folderNode);
|
||||
```
|
||||
|
||||
**Important note**:
|
||||
You must not access child components any earlier in the component lifecycle than
|
||||
the `AfterViewInit` state. Any UI click (buttons, links, etc.) event handlers are fine but
|
||||
an earlier event like `ngOnInit` is not.
|
||||
See the Angular
|
||||
[Component lifecycle hooks](https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html)
|
||||
documentation for a full explanation of the component lifecycle.
|
||||
|
||||
### Underlying node object
|
||||
|
||||
The Document List component assigns an instance of
|
||||
[MinimalNode](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/MinimalNode.md]
|
||||
(defined in the [Alfresco JS API](https://github.com/Alfresco/alfresco-js-api)) as the data context
|
||||
for each row. You can make use of the properties of this object when defining custom columns:
|
||||
|
||||
```js
|
||||
export interface MinimalNode {
|
||||
id: string;
|
||||
parentId: string;
|
||||
name: string;
|
||||
nodeType: string;
|
||||
isFolder: boolean;
|
||||
isFile: boolean;
|
||||
modifiedAt: Date;
|
||||
modifiedByUser: UserInfo;
|
||||
createdAt: Date;
|
||||
createdByUser: UserInfo;
|
||||
content: ContentInfo;
|
||||
path: PathInfoEntity;
|
||||
properties: NodeProperties;
|
||||
}
|
||||
```
|
||||
|
||||
Binding to nested properties is also supported. You can define a column key as a property path similar to the following:
|
||||
|
||||
```text
|
||||
createdByUser.displayName
|
||||
```
|
||||
|
||||
Here's a short example:
|
||||
|
||||
```html
|
||||
<adf-document-list ...>
|
||||
<data-columns>
|
||||
<data-column key="$thumbnail" type="image"></data-column>
|
||||
<data-column title="Name" key="name" class="full-width ellipsis-cell"></data-column>
|
||||
<data-column
|
||||
title="Created By"
|
||||
key="createdByUser.displayName">
|
||||
</data-column>
|
||||
</data-columns>
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
### Custom columns
|
||||
|
||||
You can reorder, extend or completely redefine data columns displayed by the component.
|
||||
By default, special `$thumbnail` and `displayName` columns are rendered.
|
||||
|
||||
A custom set of columns might look like the following:
|
||||
|
||||
```html
|
||||
<adf-document-list ...>
|
||||
<data-columns>
|
||||
<data-column key="$thumbnail" type="image"></data-column>
|
||||
<data-column
|
||||
title="Name"
|
||||
key="name"
|
||||
sortable="true"
|
||||
class="full-width ellipsis-cell">
|
||||
</data-column>
|
||||
<data-column
|
||||
title="Created By"
|
||||
key="createdByUser.displayName"
|
||||
sortable="true"
|
||||
class="desktop-only">
|
||||
</data-column>
|
||||
<data-column
|
||||
title="Created On"
|
||||
key="createdAt"
|
||||
type="date"
|
||||
format="medium"
|
||||
sortable="true"
|
||||
class="desktop-only">
|
||||
</data-column>
|
||||
</data-columns>
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
|
||||
|
||||
You can also use the HTML-based schema declaration used by
|
||||
[DataTable](../datatable.component.md), [Task List](../task-list.component.md) and other components:
|
||||
|
||||
```html
|
||||
<adf-datatable [data]="data" ...>
|
||||
<data-columns>
|
||||
<data-column type="image" key="icon" [sortable]="false"></data-column>
|
||||
<data-column key="id" title="Id"></data-column>
|
||||
<data-column key="createdOn" title="Created"></data-column>
|
||||
<data-column key="name" title="Name" class="full-width name-column"></data-column>
|
||||
<data-column key="createdBy.name" title="Created By"></data-column>
|
||||
</data-columns>
|
||||
</adf-datatable>
|
||||
```
|
||||
|
||||
You can also add tooltips, styling, automatic column title translation and other features. See the [DataColumn component page](../core/data-column.component.md) for more information about specifying and customizing columns.
|
||||
|
||||
### Date Column
|
||||
|
||||
For the `date` column type, the Angular [DatePipe](https://angular.io/docs/ts/latest/api/common/DatePipe-class.html) formatting is used.
|
||||
See the [DatePipe](https://angular.io/docs/ts/latest/api/common/DatePipe-class.html) documentation
|
||||
for a full list of `format` values it supports.
|
||||
|
||||
ADF also supports an additional `timeAgo` value for the `format` property.
|
||||
This renders date values using the popular
|
||||
["Time from now"](https://momentjs.com/docs/#/displaying/fromnow/) format.
|
||||
|
||||
### Location Column
|
||||
|
||||
This column displays a clickable location link pointing to the parent path of the node.
|
||||
|
||||
**Important note**:
|
||||
|
||||
_For granular permissions, the Location Column may or may not the render link location_
|
||||
|
||||
You would normally use this with custom navigation or when displaying content from sources like:
|
||||
|
||||
- Sites
|
||||
- My Sites
|
||||
- Shared Links
|
||||
- Recent Files
|
||||
- Favorites
|
||||
- Trashcan
|
||||
|
||||
...or any other location where the user needs to be able to navigate to the node parent
|
||||
folder easily.
|
||||
|
||||
Note that the parent node is evaluated automatically.
|
||||
The generated link will have a URL based on the `format` property value with the node `id`
|
||||
value appended:
|
||||
|
||||
```text
|
||||
/<format>/:id
|
||||
```
|
||||
|
||||
For example:
|
||||
|
||||
```html
|
||||
<data-column
|
||||
key="path"
|
||||
type="location"
|
||||
format="/files"
|
||||
title="Location">
|
||||
</data-column>
|
||||
```
|
||||
|
||||
All links rendered in the column above will have an address mapped to `/files`:
|
||||
|
||||
```text
|
||||
/files/node-1-id
|
||||
/files/node-2-id
|
||||
...
|
||||
```
|
||||
|
||||
### Actions
|
||||
|
||||
You can add actions to a dropdown menu for each item shown in a Document List. Several
|
||||
built-in actions are available (**delete**, **download**, **copy** and **move**) but
|
||||
you can also define your own actions. See the
|
||||
[Content Action component](content-action.component.md)
|
||||
for more information and examples.
|
||||
|
||||
You can also use the [Context Menu directive](../core/context-menu.directive.md) from the
|
||||
[ADF Core](https://www.npmjs.com/package/ng2-alfresco-core) library to show the
|
||||
actions you have defined in a context menu:
|
||||
|
||||
```ts
|
||||
@Component({
|
||||
selector: 'my-view',
|
||||
template: `
|
||||
<adf-document-list [contextMenuActions]="true">...</adf-document-list>
|
||||
<context-menu-holder></context-menu-holder>
|
||||
`
|
||||
})
|
||||
export class MyView {
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
This single extra line in the template enables context menu items for documents and folders.
|
||||
|
||||
### Navigation mode
|
||||
|
||||
By default, the Document List component uses 'double-click' mode for navigation.
|
||||
That means that the user will see the contents of the folder when they double-click its name
|
||||
or icon (in a similar manner to Google Drive). However, there is also a single-click mode that
|
||||
may be sometimes be useful.
|
||||
|
||||
The following example switches navigation to single clicks:
|
||||
|
||||
```html
|
||||
<adf-document-list
|
||||
[navigationMode]="'click'">
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
## Advanced usage and customization
|
||||
|
||||
### Custom row filter
|
||||
|
||||
You can create a custom row filter function that returns `true` if the row should be
|
||||
displayed or `false` if it should be hidden.
|
||||
A typical row filter implementation receives a `ShareDataRow` object as a parameter:
|
||||
|
||||
```ts
|
||||
myFilter(row: ShareDataRow): boolean {
|
||||
return true;
|
||||
}
|
||||
```
|
||||
|
||||
_Note that for the sake of simplicity the example code below was reduced to the main points of interest only._
|
||||
|
||||
**View1.component.html**
|
||||
|
||||
```html
|
||||
<adf-document-list
|
||||
[rowFilter]="folderFilter">
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
**View1.component.ts**
|
||||
|
||||
```ts
|
||||
import { RowFilter, ShareDataRow } from '@alfresco/adf-content-services';
|
||||
|
||||
export class View1 {
|
||||
|
||||
folderFilter: RowFilter;
|
||||
|
||||
constructor() {
|
||||
|
||||
// This filter will make the document list show only folders
|
||||
|
||||
this.folderFilter = (row: ShareDataRow) => {
|
||||
let node = row.node.entry;
|
||||
|
||||
if (node && node.isFolder) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Custom image resolver
|
||||
|
||||
You can create a custom image resolver function to manage the way folder/file icons and thumbnails
|
||||
are resolved (ie, which image is shown for which item).
|
||||
|
||||
**Note:** Image resolvers are executed only for columns of the `image` type.
|
||||
|
||||
A typical image resolver implementation receives `DataRow` and `DataColumn` objects as parameters:
|
||||
|
||||
```ts
|
||||
myImageResolver(row: DataRow, col: DataColumn): string {
|
||||
return '/path/to/image';
|
||||
}
|
||||
```
|
||||
|
||||
Your function can return `null` or `false` values to fall back to the default image
|
||||
resolving behavior.
|
||||
|
||||
_Note that for the sake of simplicity the example code below was reduced to the main points of interest only._
|
||||
|
||||
**View1.component.html**
|
||||
|
||||
```html
|
||||
<adf-document-list
|
||||
[imageResolver]="folderImageResolver">
|
||||
|
||||
<data-columns>
|
||||
<data-column key="name" type="image"></data-column>
|
||||
</data-columns>
|
||||
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
**View1.component.ts**
|
||||
|
||||
```ts
|
||||
import { DataColumn, DataRow } from '@alfresco/adf-core';
|
||||
import { ImageResolver } from '@alfresco/adf-content-services';
|
||||
|
||||
export class View1 {
|
||||
|
||||
folderImageResolver: ImageResolver;
|
||||
|
||||
constructor() {
|
||||
|
||||
// Customize folder icons, leave file icons untouched
|
||||
|
||||
this.folderImageResolver = (row: DataRow, col: DataColumn) => {
|
||||
let isFolder = <boolean> row.getValue('isFolder');
|
||||
if (isFolder) {
|
||||
|
||||
// (optional) You may want dynamically getting the column value
|
||||
let name = row.getValue(col.key);
|
||||
|
||||
// Format image url
|
||||
return `http://<my custom path to folder icon>/${name}`;
|
||||
}
|
||||
|
||||
// For the rest of the cases just fallback to default behaviour.
|
||||
return null;
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
### Custom 'empty folder' template
|
||||
|
||||
By default, the Document List provides the following content for the empty folder:
|
||||
|
||||
|
||||
|
||||
However, you can change this by defining your own custom HTML template:
|
||||
|
||||
```html
|
||||
<adf-document-list ...>
|
||||
<empty-folder-content>
|
||||
<ng-template>
|
||||
<h1>Sorry, no content here</h1>
|
||||
</ng-template>
|
||||
</empty-folder-content>
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
This will give the following output:
|
||||
|
||||
|
||||
|
||||
### Custom 'permission denied' template
|
||||
|
||||
By default, the Document List shows the following content when permission
|
||||
is denied:
|
||||
|
||||
|
||||
|
||||
You can change this by defining your own custom HTML template:
|
||||
|
||||
```html
|
||||
<adf-document-list ...>
|
||||
<no-permission-content>
|
||||
<ng-template>
|
||||
<h1>You don't have permissions</h1>
|
||||
</ng-template>
|
||||
</no-permission-content>
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
This will give the following output:
|
||||
|
||||
|
||||
|
||||
## See also
|
||||
|
||||
- [Datatable component](../datatable.component.md)
|
||||
- [Data column component](../core/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](../core/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)
|
||||
- [Viewer component](../core/viewer.component.md)
|
||||
88
docs/content-services/document-list.service.md
Normal file
88
docs/content-services/document-list.service.md
Normal file
@@ -0,0 +1,88 @@
|
||||
---
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
---
|
||||
# Document List service
|
||||
|
||||
Implements node operations used by the Document List component.
|
||||
|
||||
## Methods
|
||||
|
||||
- `deleteNode(nodeId: string): Observable<any>`
|
||||
Deletes a node.
|
||||
- `nodeId` - ID of the node to delete
|
||||
- `copyNode(nodeId: string, targetParentId: string): any`
|
||||
Copy a node to destination node
|
||||
- `nodeId` - The id of the node to be copied
|
||||
- `targetParentId` - The id of the folder where the node will be copied
|
||||
- `moveNode(nodeId: string, targetParentId: string): any`
|
||||
Move a node to destination node
|
||||
- `nodeId` - The id of the node to be moved
|
||||
- `targetParentId` - The id of the folder where the node will be moved
|
||||
- `createFolder(name: string, parentId: string): Observable<MinimalNodeEntity>`
|
||||
Create a new folder in the path.
|
||||
- `name` - Folder name
|
||||
- `parentId` - Parent folder ID
|
||||
- `getFolder(folder: string, opts?: any): any`
|
||||
Gets the folder node with the specified relative name path below the root node.
|
||||
- `folder` - Path to folder.
|
||||
- `opts` - (Optional) Options.
|
||||
- `getFolderNode(nodeId: string): Promise<MinimalNodeEntryEntity>`
|
||||
Gets a folder node via its node ID.
|
||||
- `nodeId` - ID of the folder node
|
||||
- `getDocumentThumbnailUrl(node: MinimalNodeEntity): any`
|
||||
Get thumbnail URL for the given document node.
|
||||
- `node` - Node to get URL for.
|
||||
- `getMimeTypeIcon(mimeType: string): string`
|
||||
Gets the icon that represents a MIME type.
|
||||
- `mimeType` - MIME type to get the icon for
|
||||
- `getDefaultMimeTypeIcon(): string`
|
||||
Gets a default icon for MIME types with no specific icon.
|
||||
|
||||
- `hasPermission(node: any, permission: PermissionsEnum|string): boolean`
|
||||
Checks if a node has the specified permission.
|
||||
- `node` - Target node
|
||||
- `permission` - Permission level to query
|
||||
|
||||
## Details
|
||||
|
||||
This service makes extensive use of the Alfresco JS API. In particular,
|
||||
see the
|
||||
[Nodes API](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodesApi.md#getNodeChildren)
|
||||
for further details of the types, options and the underlying REST architecture.
|
||||
|
||||
Also, the [Document Library model](document-library.model.md) in the ADF docs has
|
||||
more information about related classes.
|
||||
|
||||
### Moving, copying and deleting nodes
|
||||
|
||||
Both `moveNode` and `copyNode` create a copy of the existing node under a new
|
||||
parent, but `moveNode` also deletes the original. The new node has the same
|
||||
name as the original and if it is a folder then all its contents will be copied
|
||||
in-place.
|
||||
|
||||
Use `deleteNode` to move a node from its original location into the trash (from
|
||||
where it can be restored if necessary). If the deleted node is a folder then its
|
||||
child items will also be moved to the trash.
|
||||
|
||||
### Folder operations
|
||||
|
||||
Use `getFolderNode` to get a folder node by its node ID and `getFolder` to access
|
||||
the folder via its pathname from the root folder. Also, `getFolder` allows you to
|
||||
specify extra options in the `opts` parameter; see the
|
||||
[getNodeChildren](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodesApi.md#getNodeChildren)
|
||||
method in the Alfresco JS API for more information about the available options.
|
||||
|
||||
Use `createFolder` to add a new folder in a given parent folder node. You can
|
||||
specify the well-known names "-my-" , "-shared-" and "-root-" as shortcuts for
|
||||
the `parentId`.
|
||||
|
||||
### Permissions
|
||||
|
||||
The `hasPermission` method reports whether or not the user has the specified permission for the
|
||||
node. The Permissions enum contains the values DELETE, UPDATE, CREATE, UPDATEPERMISSIONS, NOT_DELETE, NOT_UPDATE, NOT_CREATE and NOT_UPDATEPERMISSIONS but you can also supply these
|
||||
values via their string equivalents.
|
||||
|
||||
## See also
|
||||
|
||||
- [Document list component](document-list.component.md)
|
||||
38
docs/content-services/dropdown-breadcrumb.component.md
Normal file
38
docs/content-services/dropdown-breadcrumb.component.md
Normal file
@@ -0,0 +1,38 @@
|
||||
---
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
---
|
||||
# Dropdown Breadcrumb Component
|
||||
|
||||
Indicates the current position within a navigation hierarchy using a dropdown menu.
|
||||
|
||||
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-dropdown-breadcrumb *ngIf="useDropdownBreadcrumb"
|
||||
[target]="documentList"
|
||||
[folderNode]="documentList.folderNode">
|
||||
</adf-dropdown-breadcrumb>
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| folderNode | `MinimalNodeEntryEntity` | `null` | Active node, builds UI based on folderNode.path.elements collection. |
|
||||
| root | `string` | `null` | (optional) Name of the root element of the breadcrumb. You can use this property to rename "Company Home" to "Personal Files" for example. You can use an i18n resource key for the property value. |
|
||||
| rootId | `string` | `null` | (optional) The id of the root element. You can use this property to set a custom element the breadcrumb should start with. |
|
||||
| target | `DocumentListComponent` | | (optional) Document List component to operate with. The list will update when the breadcrumb is clicked. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| navigate | `EventEmitter<PathElementEntity>` | Emitted when the user clicks on a breadcrumb. |
|
||||
|
||||
## See also
|
||||
|
||||
- [Document list component](document-list.component.md)
|
||||
- [Breadcrumb component](breadcrumb.component.md)
|
||||
30
docs/content-services/file-uploading-dialog.component.md
Normal file
30
docs/content-services/file-uploading-dialog.component.md
Normal file
@@ -0,0 +1,30 @@
|
||||
---
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
---
|
||||
# File Uploading Dialog Component
|
||||
|
||||
Shows a dialog listing all the files uploaded with the Upload Button or Drag Area components.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<file-uploading-dialog></file-uploading-dialog>
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| position | `string` | `'right'` | Dialog position. Can be 'left' or 'right'. |
|
||||
|
||||
## Details
|
||||
|
||||
This component should be used in combination with the
|
||||
[Upload Button component](upload-button.component.md) or the
|
||||
[Upload Drag Area component](upload-drag-area.component.md).
|
||||
|
||||
## See also
|
||||
|
||||
- [Upload button component](upload-button.component.md)
|
||||
- [Upload drag area component](upload-drag-area.component.md)
|
||||
95
docs/content-services/folder-actions.service.md
Normal file
95
docs/content-services/folder-actions.service.md
Normal file
@@ -0,0 +1,95 @@
|
||||
---
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
---
|
||||
# Folder Actions service
|
||||
|
||||
Implements the folder menu actions for the Document List component.
|
||||
|
||||
## Methods
|
||||
|
||||
- `getHandler(key: string): ContentActionHandler`
|
||||
Gets the handler function for an action.
|
||||
- `key` - Identifier for the action
|
||||
- `setHandler(key: string, handler: ContentActionHandler): boolean`
|
||||
Sets a new handler function for an action.
|
||||
- `key` - Identifier for the action
|
||||
- `handler` - The new handler function
|
||||
- `canExecuteAction(obj: any): boolean`
|
||||
Checks if an action is available for a particular item.
|
||||
- `obj` - Item to check
|
||||
|
||||
## Details
|
||||
|
||||
This service implements the built-in actions that can be applied to a folder
|
||||
shown in a [Document List component](document-list.component.md): **delete**,
|
||||
**download**, **copy** and **move** (see the
|
||||
[Content Action component](content-action.component.md) for further details and examples
|
||||
of these menu items). However, you can also use the service to add extra actions or
|
||||
replace the built-in ones with your own implementation.
|
||||
|
||||
### Registering an action
|
||||
|
||||
In the example below, a custom handler called `my-handler` is registered with the service.
|
||||
This action will invoke the `myFolderActionHandler` function each time it is selected
|
||||
from the Document List menu.
|
||||
|
||||
```ts
|
||||
import { FolderActionsService } from '@alfresco/adf-content-services';
|
||||
|
||||
export class MyView {
|
||||
|
||||
constructor(folderActions: FolderActionsService) {
|
||||
folderActions.setHandler(
|
||||
'my-handler',
|
||||
this.myFolderActionHandler.bind(this)
|
||||
);
|
||||
}
|
||||
|
||||
myFolderActionHandler(obj: any) {
|
||||
window.alert('my custom action handler');
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The action can then be used from the component in the usual way:
|
||||
|
||||
```html
|
||||
<adf-document-list ...>
|
||||
<content-actions>
|
||||
|
||||
<content-action
|
||||
target="folder"
|
||||
title="My action"
|
||||
handler="my-handler">
|
||||
</content-action>
|
||||
|
||||
</content-actions>
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
You can also override a built-in handler (eg, 'download') with your own function:
|
||||
|
||||
```ts
|
||||
export class MyView {
|
||||
|
||||
constructor(folderActions: FolderActionsService) {
|
||||
folderActions.setHandler(
|
||||
'download',
|
||||
this.customDownloadBehavior.bind(this)
|
||||
);
|
||||
}
|
||||
|
||||
customDownloadBehavior(obj: any) {
|
||||
window.alert('my custom download behavior');
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
You will probably want to set up all your custom actions at the application root level or
|
||||
with a custom application service.
|
||||
|
||||
## See also
|
||||
|
||||
- [Document actions service](document-actions.service.md)
|
||||
- [Content action component](content-action.component.md)
|
||||
33
docs/content-services/folder-create.directive.md
Normal file
33
docs/content-services/folder-create.directive.md
Normal file
@@ -0,0 +1,33 @@
|
||||
---
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
---
|
||||
# Folder Create directive
|
||||
|
||||
Allows folders to be created.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-toolbar>
|
||||
<button mat-icon-button
|
||||
[adf-create-folder]="documentList.currentFolderId">
|
||||
<mat-icon>create_new_folder</mat-icon>
|
||||
</button>
|
||||
</adf-toolbar>
|
||||
|
||||
<adf-document-list #documentList ...>
|
||||
...
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| parentNodeId | `string` | `DEFAULT_FOLDER_PARENT_ID` | Parent folder where the new folder will be located after creation. |
|
||||
|
||||
## Details
|
||||
|
||||
'FolderCreateDirective' directive needs the id of the parent folder where we want the new folder node to be created. If no value is provided, the '-my-' alias is used.
|
||||
It opens the FolderDialogComponent to receive data for the new folder. If data is valid, on dialog close, it emits folderCreate event.
|
||||
33
docs/content-services/folder-edit.directive.md
Normal file
33
docs/content-services/folder-edit.directive.md
Normal file
@@ -0,0 +1,33 @@
|
||||
---
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
---
|
||||
# Folder Edit directive
|
||||
|
||||
Allows folders to be edited.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-toolbar title="toolbar example">
|
||||
<button mat-icon-button
|
||||
[adf-edit-folder]="documentList.selection[0]?.entry">
|
||||
<mat-icon>create</mat-icon>
|
||||
</button>
|
||||
</adf-toolbar>
|
||||
|
||||
<adf-document-list #documentList ...>
|
||||
...
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| folder | `MinimalNodeEntryEntity` | | Folder node to edit. |
|
||||
|
||||
## Details
|
||||
|
||||
'FolderEditDirective' directive needs a selection folder entry of #documentList to open the folder dialog component to edit the name and description properties of that selected folder.
|
||||
If data is valid, on dialog close, it emits folderEdit event.
|
||||
32
docs/content-services/like.component.md
Normal file
32
docs/content-services/like.component.md
Normal file
@@ -0,0 +1,32 @@
|
||||
---
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
---
|
||||
# Like component
|
||||
|
||||
Allows a user to add "likes" to an item.
|
||||
|
||||
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-like [nodeId]="nodeId"></adf-like>
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| nodeId | `string` | | Identifier of a node to apply likes to. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| changeVote | `EventEmitter<{}>` | Emitted when the "vote" gets changed. |
|
||||
|
||||
## See also
|
||||
|
||||
- [Rating component](rating.component.md)
|
||||
- [Rating service](rating.service.md)
|
||||
28
docs/content-services/node-download.directive.md
Normal file
28
docs/content-services/node-download.directive.md
Normal file
@@ -0,0 +1,28 @@
|
||||
---
|
||||
Added: v2.2.0
|
||||
Status: Active
|
||||
---
|
||||
# Node Download directive
|
||||
|
||||
Allows folders and/or files to be downloaded. Multiple nodes are packed as a '.ZIP' archive.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-toolbar>
|
||||
<button mat-icon-button
|
||||
[adfNodeDownload]="documentList.selection">
|
||||
<mat-icon>get_app</mat-icon>
|
||||
</button>
|
||||
</adf-toolbar>
|
||||
|
||||
<adf-document-list #documentList ...>
|
||||
...
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| nodes | `MinimalNodeEntity[]` | | Nodes to download. |
|
||||
73
docs/content-services/permissions-style.model.md
Normal file
73
docs/content-services/permissions-style.model.md
Normal file
@@ -0,0 +1,73 @@
|
||||
---
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
---
|
||||
# Permission Style model
|
||||
|
||||
Sets custom CSS styles for rows of a Document List according to the item's permissions.
|
||||
|
||||
## Properties
|
||||
|
||||
| Property | Type | Description |
|
||||
| -------- | ---- | ----------- |
|
||||
| isFile | boolean | Does this style apply to files? |
|
||||
| isFolder | boolean | Does this style apply to folders? |
|
||||
| permission | Permissions | An enum value defining the permissions that this style applies to (see below) |
|
||||
| css | string | The name of the CSS class to add |
|
||||
|
||||
## Details
|
||||
|
||||
You can customize the style of a [Document List](document-list.component.md) row based on the user's
|
||||
permissions for that item. The list has a `permissionsStyle` property containing an array of
|
||||
Permission Style model objects. These objects associate a particular CSS style with a permission level
|
||||
and can be applied separately to files and folders by setting `isFile` and `isFolder` appropriately.
|
||||
|
||||
### Permissions enum
|
||||
|
||||
The [Permissions](https://github.com/Alfresco/alfresco-ng2-components/blob/development/lib/core/models/permissions.enum.ts)
|
||||
enum contains all the valid permissions for which you can apply custom styles: **DELETE**, **UPDATE**,
|
||||
**CREATE**, **UPDATEPERMISSIONS**, **NOT_DELETE**, **NOT_UPDATE**, **NOT_CREATE**, **NOT_UPDATEPERMISSIONS**.
|
||||
|
||||
### Examples
|
||||
|
||||
If you want to change the style on rows where the user can create content:
|
||||
|
||||
```ts
|
||||
let permissionsStyle: PermissionStyleModel[] = [];
|
||||
|
||||
this.permissionsStyle.push(new PermissionStyleModel('document-list__create', PermissionsEnum.CREATE));
|
||||
```
|
||||
|
||||
```html
|
||||
<adf-document-list [permissionsStyle]="permissionsStyle">
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
```css
|
||||
adf-document-list ::ng-deep adf-datatable tr.document-list__create {
|
||||
background: green !important;
|
||||
}
|
||||
```
|
||||
|
||||
If you want to change the style on the folders where the user doesn't have the permission to update:
|
||||
|
||||
```ts
|
||||
let permissionsStyle: PermissionStyleModel[] = [];
|
||||
|
||||
this.permissionsStyle.push(new PermissionStyleModel('document-list__disable', PermissionsEnum.NOT_UPDATE, false, true));
|
||||
```
|
||||
|
||||
```html
|
||||
<adf-document-list [permissionsStyle]="permissionsStyle">
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
```css
|
||||
adf-document-list ::ng-deep adf-datatable tr.document-list__disable {
|
||||
background: red !important;
|
||||
}
|
||||
```
|
||||
|
||||
## See also
|
||||
|
||||
- [Document list component](document-list.component.md)
|
||||
34
docs/content-services/rating.component.md
Normal file
34
docs/content-services/rating.component.md
Normal file
@@ -0,0 +1,34 @@
|
||||
---
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
---
|
||||
# Rating component
|
||||
|
||||
Allows a user to add ratings to an item.
|
||||
|
||||
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-rating
|
||||
[nodeId]="'74cd8a96-8a21-47e5-9b3b-a1b3e296787d'">
|
||||
</adf-rating>
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| nodeId | `string` | | Identifier of the node to apply the rating to. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| changeVote | `EventEmitter<{}>` | Emitted when the "vote" gets changed. |
|
||||
|
||||
## See also
|
||||
|
||||
- [Like component](like.component.md)
|
||||
- [Rating service](rating.service.md)
|
||||
40
docs/content-services/rating.service.md
Normal file
40
docs/content-services/rating.service.md
Normal file
@@ -0,0 +1,40 @@
|
||||
---
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
---
|
||||
# Rating service
|
||||
|
||||
Manages ratings for items in Content Services.
|
||||
|
||||
## Methods
|
||||
|
||||
- `getRating(nodeId: string, ratingType: any): any`
|
||||
Gets the current user's rating for a node.
|
||||
- `nodeId` - Node to get the rating from
|
||||
- `ratingType` - Type of rating (can be "likes" or "fiveStar")
|
||||
- `postRating(nodeId: string, ratingType: any, vote: any): any`
|
||||
Adds the current user's rating for a node.
|
||||
- `nodeId` - Target node for the rating
|
||||
- `ratingType` - Type of rating (can be "likes" or "fiveStar")
|
||||
- `vote` - Rating value (boolean for "likes", numeric 0..5 for "fiveStar")
|
||||
- `deleteRating(nodeId: string, ratingType: any): any`
|
||||
Removes the current user's rating for a node.
|
||||
- `nodeId` - Target node
|
||||
- `ratingType` - Type of rating to remove (can be "likes" or "fiveStar")
|
||||
|
||||
## Details
|
||||
|
||||
The `ratingType` string currently has two possible options, "likes"
|
||||
and "fiveStar". When the "likes" scheme is used, the result of
|
||||
`getRating` and the `vote` parameter of `postRating` are boolean
|
||||
values. When "fiveStar" is used, the value is an integer representing
|
||||
the number of stars out of five.
|
||||
|
||||
See the [Ratings API](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/RatingsApi.md)
|
||||
in the Alfresco JS API for more information about the returned data and the
|
||||
REST API that this service is based on.
|
||||
|
||||
## See also
|
||||
|
||||
- [Like component](like.component.md)
|
||||
- [Rating component](rating.component.md)
|
||||
70
docs/content-services/search-control.component.md
Normal file
70
docs/content-services/search-control.component.md
Normal file
@@ -0,0 +1,70 @@
|
||||
---
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-03-13
|
||||
---
|
||||
# Search control component
|
||||
|
||||
Displays a input text which shows find-as-you-type suggestions.
|
||||
|
||||
|
||||
|
||||
## Basic usage
|
||||
|
||||
```html
|
||||
<adf-search-control
|
||||
[highlight]="true"
|
||||
(optionClicked)="onItemClicked($event)"
|
||||
(submit)="onSearchSubmit($event)">
|
||||
</adf-search-control>
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| expandable | `boolean` | `true` | Toggles whether to use an expanding search control. If false then a regular input is used. |
|
||||
| highlight | `boolean` | `false` | Toggles highlighting of the search term in the results. |
|
||||
| inputType | `string` | `'text'` | Type of the input field to render, e.g. "search" or "text" (default). |
|
||||
| autocomplete | `boolean` | `false` | Toggles auto-completion of the search input field. |
|
||||
| liveSearchEnabled | `boolean` | `true` | Toggles "find-as-you-type" suggestions for possible matches. |
|
||||
| liveSearchMaxResults | `number` | `5` | Maximum number of results to show in the live search. |
|
||||
| customQueryBody | `QueryBody` | | Deprecated in v2.1.0. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| submit | `EventEmitter<any>` | Emitted when the search is submitted pressing ENTER button. The search term is provided as value of the event. |
|
||||
| searchChange | `EventEmitter<string>` | Emitted when the search term is changed. The search term is provided in the 'value' property of the returned object. If the term is less than three characters in length then the term is truncated to an empty string. |
|
||||
| optionClicked | `EventEmitter<any>` | Emitted when a file item from the list of "find-as-you-type" results is selected. |
|
||||
|
||||
## Details
|
||||
|
||||
Below is an example of a component that uses the search control. In this example the search term is simply logged to the console. However, the component could instead emit an event to be consumed upstream,or it could trigger a change inside a search results component embedded inside the same component.
|
||||
|
||||
```html
|
||||
<adf-search-control
|
||||
[highlight]="true"
|
||||
(optionClicked)="onItemClicked($event)"
|
||||
(submit)="onSearchSubmit($event)">
|
||||
</adf-search-control>
|
||||
```
|
||||
|
||||
### Customizable template for no result
|
||||
|
||||
You can show your own custom template when no results are found for the search:
|
||||
|
||||
```html
|
||||
<adf-search-control [highlight]="true"
|
||||
(optionClicked)="onItemClicked($event)"
|
||||
(submit)="onSearchSubmit($event)">
|
||||
<adf-empty-search-result>
|
||||
<!-- YOUR CUSTOM TEMPLATE HERE -->
|
||||
<span>YOUR CUSTOM MESSAGE</span>
|
||||
</adf-empty-search-result>
|
||||
</adf-search-control>
|
||||
```
|
||||
|
||||
Place the `adf-empty-search-result` tag inside the `adf-search-control` and then within it, put
|
||||
whatever content you want to show for an "empty" result.
|
||||
136
docs/content-services/search.component.md
Normal file
136
docs/content-services/search.component.md
Normal file
@@ -0,0 +1,136 @@
|
||||
---
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
---
|
||||
# Search component
|
||||
|
||||
Searches items for supplied search terms.
|
||||
|
||||
## Basic usage
|
||||
|
||||
```html
|
||||
<adf-search
|
||||
[searchTerm]="searchTerm"
|
||||
(resultLoaded)="showSearchResult($event)">
|
||||
</adf-search>
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| displayWith | `(value: any) => string` | `null` | Function that maps an option's value to its display value in the trigger. |
|
||||
| maxResults | `number` | `20` | Maximum number of results to show in the search. |
|
||||
| skipResults | `number` | `0` | Number of results to skip from the results pagination. |
|
||||
| queryBody | `QueryBody` | | |
|
||||
| searchTerm | `string` | `''` | Search term to use when executing the search. Updating this value will run a new search and update the results. |
|
||||
| classList | `string` | | CSS class for display. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| resultLoaded | `EventEmitter<NodePaging>` | Emitted when search results have fully loaded. |
|
||||
| error | `EventEmitter<any>` | Emitted when an error occurs. |
|
||||
|
||||
## Details
|
||||
|
||||
### Customise Search Results
|
||||
|
||||
You have to add a template that will be shown when the results are loaded.
|
||||
|
||||
```html
|
||||
<adf-search [searchTerm]="searchTerm">
|
||||
<ng-template let-result>
|
||||
<ul>
|
||||
<li *ngFor="let item of result?.list?.entries">
|
||||
{{ item?.entry.name }}
|
||||
</li>
|
||||
</ul>
|
||||
</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 :
|
||||
|
||||
|
||||
|
||||
But you can define even a more complex template :
|
||||
|
||||
```html
|
||||
<adf-search class="adf-search-result-autocomplete"
|
||||
[rootNodeId]="liveSearchRoot"
|
||||
[resultType]="liveSearchResultType"
|
||||
[resultSort]="liveSearchResultSort"
|
||||
[maxResults]="liveSearchMaxResults">
|
||||
<ng-template let-data>
|
||||
<mat-list *ngIf="isSearchBarActive()" id="autocomplete-search-result-list">
|
||||
<mat-list-item
|
||||
*ngFor="let item of data?.list?.entries; let idx = index"
|
||||
id="result_option_{{idx}}"
|
||||
[tabindex]="0"
|
||||
(focus)="onFocus($event)"
|
||||
(blur)="onBlur($event)"
|
||||
class="adf-search-autocomplete-item"
|
||||
(click)="elementClicked(item)"
|
||||
(keyup.enter)="elementClicked(item)">
|
||||
<mat-icon mat-list-icon>
|
||||
<img [src]="getMimeTypeIcon(item)" />
|
||||
</mat-icon>
|
||||
<h4 mat-line id="result_name_{{idx}}"
|
||||
*ngIf="highlight; else elseBlock"
|
||||
class="adf-search-fixed-text"
|
||||
[innerHtml]="item.entry.name | highlight: searchTerm">
|
||||
{{ item?.entry.name }}</h4>
|
||||
<ng-template #elseBlock>
|
||||
<h4 class="adf-search-fixed-text" mat-line id="result_name_{{idx}}" [innerHtml]="item.entry.name"></h4>
|
||||
</ng-template>
|
||||
<p mat-line class="adf-search-fixed-text"> {{item?.entry.createdByUser.displayName}} </p>
|
||||
</mat-list-item>
|
||||
<mat-list-item
|
||||
id="search_no_result"
|
||||
*ngIf="data?.list?.entries.length === 0">
|
||||
<p mat-line class="adf-search-fixed-text">{{ 'SEARCH.RESULTS.NONE' | translate:{searchTerm: searchTerm} }}</p>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
</ng-template>
|
||||
</adf-search>
|
||||
```
|
||||
|
||||
Which will look like :
|
||||
|
||||
|
||||
|
||||
### Attach an input field to the search
|
||||
|
||||
You can also attach your input field to the adf-search component via the trigger [searchAutocomplete]
|
||||
Yuo can do this by exporting the adf-search panel instance into a local template variable (here we called it "search"), and binding that variable to the input's searchAutocomplete property.
|
||||
|
||||
```html
|
||||
<input type="text" [searchAutocomplete]="search">
|
||||
|
||||
<adf-search #search="searchAutocomplete">
|
||||
<ng-template let-result>
|
||||
<span *ngFor="let item of result?.list?.entries">
|
||||
{{ item?.entry.name }}
|
||||
</span>
|
||||
</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.
|
||||
|
||||
### Custom search configuration
|
||||
|
||||
You can get finer control over the parameters of a search by defining them in a custom
|
||||
[QueryBody](https://github.com/Alfresco/alfresco-js-api/blob/1.6.0/src/alfresco-search-rest-api/docs/QueryBody.md)
|
||||
object. The recommended way to do this is with a custom implementation of the
|
||||
[Search Configuration interface](../core/search-configuration.interface.md) (the `queryBody` parameter of the `Search component` is now deprecated). The ADF source provides a standard implementation of this
|
||||
interface, `SearchConfigurationService` that you can use as a base to adapt to your needs. See the
|
||||
[Search Configuration interface](../core/search-configuration.interface.md) page for full details of how to
|
||||
customize your search.
|
||||
|
||||
## See Also
|
||||
|
||||
- [Search configuration interface](../core/search-configuration.interface.md)
|
||||
- [Search configuration service](../core/search-configuration.service.md)
|
||||
35
docs/content-services/sites-dropdown.component.md
Normal file
35
docs/content-services/sites-dropdown.component.md
Normal file
@@ -0,0 +1,35 @@
|
||||
---
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-03-13
|
||||
---
|
||||
|
||||
# Sites Dropdown component
|
||||
|
||||
Displays a dropdown menu to show and interact with the sites of the current user.
|
||||
|
||||
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-sites-dropdown
|
||||
(change)="getSiteContent($event)">
|
||||
</adf-sites-dropdown>
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Attribute | Type | Default | Description |
|
||||
| --------- | ---- | ------- | ----------- |
|
||||
| hideMyFiles | boolean | false | Hide the "My Files" option added to the list by default |
|
||||
| siteList | [SitePaging](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/SitePaging.md) | null | A custom list of sites to be displayed by the dropdown. If no value is given, the sites of the current user are displayed by default. A list of objects only with properties 'title' and 'guid' is enough to be able to display the dropdown. |
|
||||
| placeholder | string | 'DROPDOWN.PLACEHOLDER_LABEL' | The placeholder text/the key from translation files for the placeholder text to be shown by default |
|
||||
| value | string | null | Id of the select site |
|
||||
| relations | string | null | A custom list of sites to be displayed by the dropdown. If no value is given, the sites of the current user are displayed by default. A list of objects only with properties 'title' and 'guid' is enough to be able to display the dropdown. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Returned Type | Description |
|
||||
| ---- | ------------- | ----------- |
|
||||
| change | [SiteModel](../site.model.md) | Emitted when user selects a site. When default option is selected an empty model is emitted |
|
||||
31
docs/content-services/tag-actions.component.md
Normal file
31
docs/content-services/tag-actions.component.md
Normal file
@@ -0,0 +1,31 @@
|
||||
---
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
---
|
||||
# Tag Node Actions List component
|
||||
|
||||
Shows available actions for tags.
|
||||
|
||||
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-tag-node-actions-list
|
||||
[nodeId]="nodeId">
|
||||
</adf-tag-node-actions-list>
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| nodeId | `string` | | The identifier of a node. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| successAdd | `EventEmitter<any>` | Emitted when a tag is added successfully. |
|
||||
| error | `EventEmitter<any>` | Emitted when an error occurs. |
|
||||
| result | `EventEmitter<{}>` | Emitted when an action is chosen. |
|
||||
21
docs/content-services/tag-list.component.md
Normal file
21
docs/content-services/tag-list.component.md
Normal file
@@ -0,0 +1,21 @@
|
||||
---
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
---
|
||||
# Tag List component
|
||||
|
||||
Shows tags for an item.
|
||||
|
||||
|
||||
|
||||
## Basic Usage
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| result | `EventEmitter<{}>` | Emitted when a tag is selected. |
|
||||
|
||||
## See Also
|
||||
|
||||
- [Tag service](tag.service.md)
|
||||
29
docs/content-services/tag-node-list.component.md
Normal file
29
docs/content-services/tag-node-list.component.md
Normal file
@@ -0,0 +1,29 @@
|
||||
---
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
---
|
||||
# Tag Node List component
|
||||
|
||||
Shows tags for a node.
|
||||
|
||||
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-tag-node-list
|
||||
[nodeId]="nodeId">
|
||||
</adf-tag-node-list>
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| nodeId | `string` | | The identifier of a node. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| results | `EventEmitter<{}>` | Emitted when a tag is selected. |
|
||||
47
docs/content-services/tag.service.md
Normal file
47
docs/content-services/tag.service.md
Normal file
@@ -0,0 +1,47 @@
|
||||
---
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
---
|
||||
# Tag service
|
||||
|
||||
Manages tags in Content Services.
|
||||
|
||||
## Methods
|
||||
|
||||
- `getTagsByNodeId(nodeId: string): any`
|
||||
Gets a list of tags added to a node.
|
||||
- `nodeId` - ID of the target node
|
||||
- `getAllTheTags(): any`
|
||||
Gets a list of all the tags already defined in the repository.
|
||||
|
||||
- `addTag(nodeId: string, tagName: string): any`
|
||||
Adds a tag to a node.
|
||||
- `nodeId` - ID of the target node
|
||||
- `tagName` - Name of the tag to add
|
||||
- `removeTag(nodeId: string, tag: string): any`
|
||||
Removes a tag from a node.
|
||||
- `nodeId` - ID of the target node
|
||||
- `tag` - Name of the tag to remove
|
||||
|
||||
## Details
|
||||
|
||||
Content Services supports
|
||||
[tagging](http://docs.alfresco.com/5.2/tasks/site-content-tag.html)
|
||||
of file and folder nodes to assist with searches. A tag is a short
|
||||
text string added to an item, rather like a hashtag in social media.
|
||||
|
||||
Usually, it is wise to let the user see a list of existing tags and let
|
||||
them choose one by clicking. If they type a tag name with incorrect spelling
|
||||
then it will be treated as a new tag, even though that was not intended.
|
||||
Use `getAllTheTags` to find all tags in the repository when you need to
|
||||
construct a list like this.
|
||||
|
||||
See the
|
||||
[Tags API](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/TagsApi.md)
|
||||
in the Alfresco JS API for more information about the types returned by Tag
|
||||
service methods and for the implementation of the REST API the service is
|
||||
based on.
|
||||
|
||||
## See also
|
||||
|
||||
- [Tag list component](tag-list.component.md)
|
||||
106
docs/content-services/upload-button.component.md
Normal file
106
docs/content-services/upload-button.component.md
Normal file
@@ -0,0 +1,106 @@
|
||||
---
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
---
|
||||
# Upload Button Component
|
||||
|
||||
Activates a file upload.
|
||||
|
||||
## Basic usage
|
||||
|
||||
```html
|
||||
<adf-upload-button
|
||||
[rootFolderId]="-my-"
|
||||
[uploadFolders]="true"
|
||||
[multipleFiles]="false"
|
||||
[acceptedFilesType]=".jpg,.gif,.png,.svg"
|
||||
[versioning]="false"
|
||||
(success)="customMethod($event)">
|
||||
</adf-upload-button>
|
||||
<file-uploading-dialog></file-uploading-dialog>
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| disabled | `boolean` | `false` | Toggles component disabled state (if there is no node permission checking). |
|
||||
| uploadFolders | `boolean` | `false` | Allows/disallows upload folders (only for Chrome). |
|
||||
| multipleFiles | `boolean` | `false` | Allows/disallows multiple files |
|
||||
| versioning | `boolean` | `false` | Toggles versioning. |
|
||||
| acceptedFilesType | `string` | `'*'` | List of allowed file extensions, for example: ".jpg,.gif,.png,.svg". |
|
||||
| maxFilesSize | `number` | | Sets a limit on the maximum size (in bytes) of a file to be uploaded. Has no effect if undefined. |
|
||||
| staticTitle | `string` | | Defines the text of the upload button. |
|
||||
| tooltip | `string` | `null` | Custom tooltip text. |
|
||||
| rootFolderId | `string` | `'-root-'` | The ID of the root. Use the nodeId for Content Services or the taskId/processId for Process Services. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| success | `EventEmitter<{}>` | Emitted when the file is uploaded successfully. |
|
||||
| error | `EventEmitter<{}>` | Emitted when an error occurs. |
|
||||
| createFolder | `EventEmitter<{}>` | Emitted when a folder is created. |
|
||||
| permissionEvent | `EventEmitter<PermissionModel>` | Emitted when delete permission is missing. |
|
||||
|
||||
## Details
|
||||
|
||||
### How to show notification message with no permission
|
||||
|
||||
You can show a notification error when the user doesn't have the right permission to perform the action.
|
||||
The UploadButtonComponent provides the event permissionEvent that is raised when the delete permission is missing
|
||||
You can subscribe to this event from your component and use the NotificationService to show a message.
|
||||
|
||||
```html
|
||||
<adf-upload-button
|
||||
[rootFolderId]="currentFolderId"
|
||||
(permissionEvent)="onUploadPermissionFailed($event)">
|
||||
</adf-upload-button>
|
||||
```
|
||||
|
||||
```ts
|
||||
export class MyComponent {
|
||||
|
||||
onUploadPermissionFailed(event: any) {
|
||||
this.notificationService.openSnackMessage(
|
||||
`you don't have the ${event.permission} permission to ${event.action} the ${event.type} `, 4000
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Upload Version Button Component (Workaround)
|
||||
|
||||
Activates a file version upload.
|
||||
Until further backend API improvements, this component is meant to be used to enrich the feature of node version uploading and to decrease the restrictions currently applied to the node version upload.
|
||||
|
||||
```html
|
||||
<adf-upload-version-button
|
||||
staticTitle="Upload new version"
|
||||
[node]="node"
|
||||
[rootFolderId]="node.parentId"
|
||||
[versioning]="true"
|
||||
(success)="onUploadSuccess($event)"
|
||||
(error)="onUploadError($event)">
|
||||
</adf-upload-version-button>
|
||||
```
|
||||
|
||||
### Properties and events
|
||||
|
||||
Since UploadVersionButtonComponent extends UploadButtonComponent, the properties are the same. Note that some properties doesn't make sense in case of version upload button, thus are just simply ignored. For the version upload button the **node** (which is about to be versioned) is a mandatory input parameter.
|
||||
|
||||
Since UploadVersionButtonComponent extends UploadButtonComponent the events are the same.
|
||||
|
||||
### Restrictions
|
||||
At the moment the API only allows new version uploads for a node, if the name of the new version is exactly the same as the old version (**and most importantly the extension**). Because of it, this workaround component uploads the chosen file with the same name as what the original file had (that is the reason, the **node** is a mandatory dependency for this component).
|
||||
|
||||
So at the end what this component can and can not do:
|
||||
|
||||
**Can**:
|
||||
- upload a new version from the same file extension regardless of the file name.
|
||||
|
||||
**Can not**:
|
||||
- upload a new version which has a different file extension, than what the originally uploaded file had. (an error message is emitted on the error EventEmitter of the component).
|
||||
42
docs/content-services/upload-drag-area.component.md
Normal file
42
docs/content-services/upload-drag-area.component.md
Normal file
@@ -0,0 +1,42 @@
|
||||
---
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
---
|
||||
# Upload Drag Area Component
|
||||
|
||||
Adds a drag and drop area to upload files to Alfresco.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-upload-drag-area (success)="onSuccess($event)">
|
||||
<div style="width: 200px; height: 100px; border: 1px solid #888888">
|
||||
DRAG HERE
|
||||
</div>
|
||||
</adf-upload-drag-area>
|
||||
<file-uploading-dialog></file-uploading-dialog>
|
||||
```
|
||||
|
||||
```ts
|
||||
export class AppComponent {
|
||||
|
||||
public onSuccess(event: Object): void {
|
||||
console.log('File uploaded');
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| disabled | boolean | false | Toggle component disabled state |
|
||||
| parentId | string | '-root-' | The ID of the folder in which the files will be uploaded. |
|
||||
| versioning | boolean | false | Versioning false is the default uploader behaviour and it renames the file using an integer suffix if there is a name clash. Versioning true to indicate that a major version should be created |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| success | Raised when the file is uploaded |
|
||||
28
docs/content-services/version-list.component.md
Normal file
28
docs/content-services/version-list.component.md
Normal file
@@ -0,0 +1,28 @@
|
||||
---
|
||||
Added: v2.0.0
|
||||
Status: Experimental
|
||||
---
|
||||
# Version List component
|
||||
|
||||
Displays the version history of a node in a Version Manager component
|
||||
|
||||
### Basic Usage
|
||||
|
||||
```html
|
||||
<adf-version-list [id]="nodeId"></adf-version-list>
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| id | `string` | | ID of the node whose version history you want to display. |
|
||||
|
||||
## Details
|
||||
|
||||
Inside the version manager component, there is the underlying VersionListComponent.
|
||||
The VersionListComponent loads and displays the version history of a node.
|
||||
|
||||
## See also
|
||||
|
||||
- [Version manager component](version-manager.component.md)
|
||||
49
docs/content-services/version-manager.component.md
Normal file
49
docs/content-services/version-manager.component.md
Normal file
@@ -0,0 +1,49 @@
|
||||
---
|
||||
Added: v2.0.0
|
||||
Status: Experimental
|
||||
---
|
||||
# Version Manager Component
|
||||
|
||||
Displays the version history of a node with the ability to upload a new version.
|
||||
|
||||
 `This component is still in experimental phase, it has several limitations which will be resolved soon.`
|
||||
|
||||
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-version-manager
|
||||
[node]="aMinimalNodeEntryEntity"
|
||||
(uploadSuccess)="customMethod($event)"
|
||||
(uploadError)="customMethod2($event)">
|
||||
</adf-version-manager>
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| node | [MinimalNodeEntryEntity](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeMinimalEntry.md) | The node you want to manage the version history of. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| uploadSuccess | Raised when the file is uploaded |
|
||||
| uploadError | Emitted when an error occurs.|
|
||||
|
||||
## Details
|
||||
|
||||
### Version actions
|
||||
|
||||
Each version has a context menu on the right, with the following actions.
|
||||
|
||||
| Action | Versions | Description |
|
||||
| ------ | -------- | ----------- |
|
||||
| Restore | All | Revert the current version to the selected one with creating a new version of it. |
|
||||
|
||||
## See also
|
||||
|
||||
- [Version list component](version-list.component.md)
|
||||
- [Document list component](document-list.component.md)
|
||||
167
docs/content-services/webscript.component.md
Normal file
167
docs/content-services/webscript.component.md
Normal file
@@ -0,0 +1,167 @@
|
||||
---
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
---
|
||||
# Webscript component
|
||||
|
||||
Provides access to Webscript features.
|
||||
|
||||
## Basic usage
|
||||
|
||||
```html
|
||||
<adf-webscript-get
|
||||
[scriptPath]="string"
|
||||
[scriptArgs]="Object"
|
||||
[contextRoot]="string"
|
||||
[servicePath]="string"
|
||||
[showData]="boolean"
|
||||
[contentType]="JSON | HTML | DATATABLE | TEXT"
|
||||
(success)= "logData($event)">
|
||||
</adf-webscript-get>
|
||||
```
|
||||
|
||||
Another example:
|
||||
|
||||
**app.component.html**
|
||||
|
||||
```html
|
||||
<adf-webscript-get
|
||||
[scriptPath]="scriptPath"
|
||||
[scriptArgs]="scriptArgs"
|
||||
[contextRoot]="contextRoot"
|
||||
[servicePath]="servicePath"
|
||||
[contentType]="'HTML'">
|
||||
</adf-webscript-get>
|
||||
```
|
||||
|
||||
**app.component.ts**
|
||||
|
||||
```ts
|
||||
export class AppComponent {
|
||||
scriptPath: string = 'sample/folder/Company%20Home';
|
||||
contextRoot: string = 'alfresco';
|
||||
servicePath: string = 'service';
|
||||
}
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| scriptPath | `string` | | (required) Path to the webscript (as defined by webscript). |
|
||||
| scriptArgs | `any` | | Arguments to pass to the webscript. |
|
||||
| showData | `boolean` | `true` | Toggles whether to show or hide the data. |
|
||||
| contextRoot | `string` | `'alfresco'` | Path where the application is deployed |
|
||||
| servicePath | `string` | `'service'` | Path that the webscript service is mapped to. |
|
||||
| contentType | `string` | `'TEXT'` | Content type to interpret the data received from the webscript. Can be "JSON" , "HTML" , "DATATABLE" or "TEXT" |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| success | `EventEmitter<{}>` | Emitted when the operation succeeds. You can get the plain data from the webscript through the **success** event parameter and use it as you need in your application. |
|
||||
|
||||
## Details
|
||||
|
||||
### Webscript View HTML example
|
||||
|
||||
This sample demonstrates how to implement a Webscript component that renders the HTML contents that come from a webscript
|
||||
This sample Web Scripts reside in your Alfresco Server. You can access the folder webscript here:
|
||||
|
||||
`http://localhost:8080/alfresco/service/sample/folder/Company%20Home`
|
||||
|
||||
```html
|
||||
<adf-webscript-get
|
||||
[scriptPath]="scriptPath"
|
||||
[contextRoot]="'alfresco'"
|
||||
[servicePath]="'service'";
|
||||
[scriptPath]="'Sample/folder/Company%20Home'"
|
||||
[contentType]="'HTML'">
|
||||
</adf-webscript-get>
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Webscript View DATATABLE example
|
||||
|
||||
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`
|
||||
|
||||
```html
|
||||
<adf-webscript-get
|
||||
[scriptPath]="scriptPath"
|
||||
[contextRoot]="'alfresco'"
|
||||
[servicePath]="'service'";
|
||||
[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
|
||||
|
||||
```ts
|
||||
data: [],
|
||||
schema: []
|
||||
```
|
||||
|
||||
this is an example:
|
||||
|
||||
```ts
|
||||
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',
|
||||
sortable: true
|
||||
}]
|
||||
```
|
||||
|
||||
or you can send just the array data and the component will create a schema for you:
|
||||
|
||||
```ts
|
||||
data: [
|
||||
{id: 1, name: 'Name 1'},
|
||||
{id: 2, name: 'Name 2'}
|
||||
]]
|
||||
```
|
||||
|
||||
that will render the following table
|
||||
|
||||
|
||||
|
||||
### Webscript View JSON example
|
||||
|
||||
This sample demonstrates how to implement a Webscript component that renders the JSON contents that come from a webscript
|
||||
This sample Web Scripts reside in your Alfresco Server. You can access the folder webscript here:
|
||||
|
||||
`http://localhost:8080/alfresco/service/sample/folder/JSON%EXAMPLE`
|
||||
|
||||
```html
|
||||
<adf-webscript-get
|
||||
[scriptPath]="scriptPath"
|
||||
[contextRoot]="'alfresco'"
|
||||
[servicePath]="'service'";
|
||||
[scriptPath]="'Sample/folder/JSON_EXAMPLE'"
|
||||
[contentType]="'HTML'"
|
||||
[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
|
||||
|
||||
```ts
|
||||
logDataExample(data) {
|
||||
console.log('You webscript data are here' + data);
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user