mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-4152] Restructured Content Services docs (#4429)
* [ADF-4152] Moved content services docs to subfolders * [ADF-4152] Manual URL fixes for cont services docs * [ADF-4152] Moved content services docs to subfolders * [ADF-4152] Manual URL fixes for cont services docs * [ADF-4152] Updated doc index pages for content services
This commit is contained in:
Andy Stark
committed by
Eugenio Romano
Eugenio Romano
parent
bc5208b767
commit
dfea5c2f04
@@ -0,0 +1,58 @@
|
||||
---
|
||||
Title: Add Permission Dialog Component
|
||||
Added: v2.4.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-11-13
|
||||
---
|
||||
|
||||
# [Add Permission Dialog Component](../../../lib/content-services/permission-manager/components/add-permission/add-permission-dialog.component.ts "Defined in add-permission-dialog.component.ts")
|
||||
|
||||
Displays a dialog to search for people or groups to add to the current node permissions.
|
||||
|
||||
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```ts
|
||||
import { NodePermissionDialogService } from '@alfresco/adf-content-services';
|
||||
|
||||
constructor(private nodePermissionDialogService: nodePermissionDialogService) {
|
||||
}
|
||||
|
||||
this.nodePermissionDialogService.openAddPermissionDialog(this.nodeId).subscribe((selectedNodes) => {
|
||||
//action for selected nodes
|
||||
},
|
||||
(error) => {
|
||||
this.showErrorMessage(error);
|
||||
});
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
This component extends the [Add permission panel component](add-permission-panel.component.md)
|
||||
to apply the chosen selection of permissions when they are accepted.
|
||||
You can open the dialog with the `openAddPermissionDialog` method from the
|
||||
[Node Permission Dialog Service](../services/node-permission-dialog.service.md).
|
||||
This returns an [`Observable`](http://reactivex.io/documentation/observable.html)
|
||||
that you can subscribe to so you can get the details of the node after the update.
|
||||
Use the `updateNodePermissionByDialog` nethod from the service to update node permissions, as shown in
|
||||
the following example:
|
||||
|
||||
```ts
|
||||
import { NodePermissionDialogService } from '@alfresco/adf-content-services';
|
||||
|
||||
constructor(private nodePermissionDialogService: nodePermissionDialogService) {
|
||||
}
|
||||
|
||||
this.nodePermissionDialogService.updateNodePermissionByDialog(this.nodeId).subscribe((node) => {
|
||||
//updated node
|
||||
},
|
||||
(error) => {
|
||||
this.showErrorMessage(error);
|
||||
});
|
||||
```
|
||||
|
||||
## See also
|
||||
|
||||
- [Node permission dialog service](../services/node-permission-dialog.service.md)
|
||||
- [Add permission panel component](add-permission-panel.component.md)
|
||||
@@ -0,0 +1,45 @@
|
||||
---
|
||||
Title: Add Permission Panel Component
|
||||
Added: v2.4.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-11-14
|
||||
---
|
||||
|
||||
# [Add Permission Panel Component](../../../lib/content-services/permission-manager/components/add-permission/add-permission-panel.component.ts "Defined in add-permission-panel.component.ts")
|
||||
|
||||
Searches for people or groups to add to the current node permissions.
|
||||
|
||||
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-add-permission
|
||||
[nodeId]="nodeId"
|
||||
(success)="onSuccess($event)"
|
||||
(error)="onError($event)">
|
||||
</adf-add-permission>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| select | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when a permission list item is selected. |
|
||||
|
||||
## Details
|
||||
|
||||
This component uses a [Search component](search.component.md) to retrieve the
|
||||
groups and people that could be added to the permission list of the current node.
|
||||
The `select` event is emitted when a result is clicked from the list.
|
||||
|
||||
The [Add permission dialog component](add-permission-dialog.component.md)
|
||||
and [Add permission component](add-permission.component.md) extend this behavior by applying the chosen
|
||||
permissions to the node once the selection has been made.
|
||||
|
||||
## See also
|
||||
|
||||
- [Add permission dialog component](add-permission-dialog.component.md)
|
||||
- [Add permission component](add-permission.component.md)
|
||||
48
docs/content-services/components/add-permission.component.md
Normal file
48
docs/content-services/components/add-permission.component.md
Normal file
@@ -0,0 +1,48 @@
|
||||
---
|
||||
Title: Add Permission Component
|
||||
Added: v2.4.0
|
||||
Status: Active
|
||||
Last reviewed: 2019-01-16
|
||||
---
|
||||
|
||||
# [Add Permission Component](../../../lib/content-services/permission-manager/components/add-permission/add-permission.component.ts "Defined in add-permission.component.ts")
|
||||
|
||||
Searches for people or groups to add to the current node permissions.
|
||||
|
||||
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-add-permission
|
||||
[nodeId]="nodeId"
|
||||
(success)="onSuccess($event)"
|
||||
(error)="onError($event)">
|
||||
</adf-add-permission>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| nodeId | `string` | | ID of the target node. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when an error occurs during the update. |
|
||||
| success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`Node`](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/content-rest-api/docs/Node.md)`>` | Emitted when the node is updated successfully. |
|
||||
|
||||
## Details
|
||||
|
||||
This component extends the [Add permission panel component](add-permission-panel.component.md)
|
||||
to apply the chosen selection of permissions when they are accepted. You can also
|
||||
use the [Add permission dialog component](add-permission-dialog.component.md) to perform the same action using a dialog.
|
||||
|
||||
## See also
|
||||
|
||||
- [Add permission panel component](add-permission-panel.component.md)
|
||||
- [Add permission dialog component](add-permission-dialog.component.md)
|
||||
100
docs/content-services/components/breadcrumb.component.md
Normal file
100
docs/content-services/components/breadcrumb.component.md
Normal file
@@ -0,0 +1,100 @@
|
||||
---
|
||||
Title: Breadcrumb Component
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2019-01-16
|
||||
---
|
||||
|
||||
# [Breadcrumb Component](../../../lib/content-services/breadcrumb/breadcrumb.component.ts "Defined in breadcrumb.component.ts")
|
||||
|
||||
Indicates the current position within a navigation hierarchy.
|
||||
|
||||
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-breadcrumb
|
||||
[target]="documentList">
|
||||
</adf-breadcrumb>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| folderNode | [`Node`](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/content-rest-api/docs/Node.md) | null | Active node, builds UI based on folderNode.path.elements collection. |
|
||||
| maxItems | `number` | | Maximum number of nodes to display before wrapping them with a dropdown element. |
|
||||
| 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`](../../content-services/components/document-list.component.md) | | (optional) [Document List component](../../content-services/components/document-list.component.md) to operate with. The list will update when the breadcrumb is clicked. |
|
||||
| transform | `Function` | | 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`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when the user clicks on a breadcrumb. |
|
||||
|
||||
## Details
|
||||
|
||||
The `maxItems` property sets the maximum number of "crumbs" in the breadcrumb trail. If
|
||||
the actual path contains more nodes than this then the earliest items in the path will be
|
||||
removed and kept in a menu as with the
|
||||
[Dropdown breadcrumb component](dropdown-breadcrumb.component.md).
|
||||
|
||||
### Using the transform function
|
||||
|
||||
The function supplied in the `transform` property lets you modify the [`Node`](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/content-rest-api/docs/Node.md) 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`](../../../lib/content-services/content-node-selector/content-node-selector.component-data.interface.ts) 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: Node) {
|
||||
|
||||
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)
|
||||
455
docs/content-services/components/content-action.component.md
Normal file
455
docs/content-services/components/content-action.component.md
Normal file
@@ -0,0 +1,455 @@
|
||||
---
|
||||
Title: Content Action component
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2019-01-17
|
||||
---
|
||||
|
||||
# [Content Action component](../../../lib/content-services/document-list/components/content-action/content-action.component.ts "Defined in content-action.component.ts")
|
||||
|
||||
Adds options to a Document List actions menu for a particular content type.
|
||||
|
||||
|
||||
|
||||
## Contents
|
||||
|
||||
- [Basic Usage](#basic-usage)
|
||||
- [Class members](#class-members)
|
||||
- [Properties](#properties)
|
||||
- [Events](#events)
|
||||
- [Details](#details)
|
||||
- [Examples](#examples)
|
||||
- [Conditional visibility](#conditional-visibility)
|
||||
- [Conditional disabled state](#conditional-disabled-state)
|
||||
- [Customizing built-in actions](#customizing-built-in-actions)
|
||||
- [Error, Permission and Success callbacks](#error-permission-and-success-callbacks)
|
||||
- [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}`);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| disableWithNoPermission | `boolean` | | Should this action be disabled in the menu if the user doesn't have permission for it? |
|
||||
| disabled | `boolean \| Function` | false | Is the menu item disabled? |
|
||||
| handler | `string` | | System actions. Can be "delete", "download", "copy" or "move". |
|
||||
| icon | `string` | | The name of the icon to display next to the menu command (can be left blank). |
|
||||
| permission | `string` | | The permission type. |
|
||||
| target | `string` | | Type of item that the action applies to. Can be "document" or "folder" |
|
||||
| title | `string` | "Action" | The title of the action as shown in the menu. |
|
||||
| visible | `boolean \| Function` | true | Visibility state (see examples). |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<Object>` | Emitted when an error occurs during the action. Applies to copy and move actions. |
|
||||
| execute | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<Object>` | Emitted when the user selects the action from the menu. |
|
||||
| permissionEvent | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<Object>` | Emitted when a permission error occurs |
|
||||
| success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<Object>` | 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, documents or both. (By default the actions are applied to both).
|
||||
|
||||
A number of built-in actions are defined to handle common use cases:
|
||||
|
||||
- **Download** (document)
|
||||
- **lock** (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`](../../../lib/content-services/document-list/models/document-library.model.ts) as its
|
||||
parameter. 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);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Examples
|
||||
|
||||
#### System handler
|
||||
|
||||
This action simply executes one of the built-in actions described above:
|
||||
|
||||
```html
|
||||
<adf-document-list [contentActions]="true"...>
|
||||
<content-actions>
|
||||
|
||||
<content-action
|
||||
target="document"
|
||||
title="Download"
|
||||
handler="download">
|
||||
</content-action>
|
||||
|
||||
</content-actions>
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
|
||||
|
||||
#### Custom handler
|
||||
|
||||
If you specify a custom handler it will be executed whenever the action is selected:
|
||||
|
||||
```html
|
||||
<adf-document-list [contentActions]="true"...>
|
||||
<content-actions>
|
||||
|
||||
<content-action
|
||||
title="custom-action"
|
||||
(execute)="myCustomAction($event)">
|
||||
</content-action>
|
||||
|
||||
</content-actions>
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
```ts
|
||||
export class MyComponent {
|
||||
|
||||
myCustomAction(event: any) {
|
||||
//Your cusrtom logic
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
#### System handler combined with custom handler
|
||||
|
||||
If you specify both a system handler and your own custom handler with
|
||||
`(execute)="myCustomActionAfterDelete($event)"`, your handler will run after the system handler
|
||||
completes successfully. A system operation is considered successful if there are no permission
|
||||
or network-related errors for the system 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"
|
||||
(execute)="myCustomActionAfterDelete($event)"
|
||||
handler="delete">
|
||||
</content-action>
|
||||
|
||||
</content-actions>
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
```ts
|
||||
export class MyComponent {
|
||||
|
||||
myCustomActionAfterDelete(event: any) {
|
||||
//Your cusrtom logic
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
#### Permission check
|
||||
|
||||
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/services/notification.service.md) to show a message.
|
||||
|
||||
```html
|
||||
<adf-document-list [contentActions]="true"...>
|
||||
<content-actions>
|
||||
|
||||
<content-action
|
||||
target="document"
|
||||
title="Delete"
|
||||
permission="delete"
|
||||
(execute)="myCustomActionAfterDelete($event)"
|
||||
(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);
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
#### 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>
|
||||
```
|
||||
|
||||
### Conditional visibility
|
||||
|
||||
The `<content-action>` component allows you to control visibility with the help of the `visible` property and supports the following scenarios:
|
||||
|
||||
- direct value of `boolean` type
|
||||
- binding to a property of the `Function` type that evaluates condition and returns `boolean` value
|
||||
|
||||
#### Using direct boolean value
|
||||
|
||||
```html
|
||||
<content-action
|
||||
icon="get_app"
|
||||
title="Never see this action again"
|
||||
handler="download"
|
||||
[visible]="false">
|
||||
</content-action>
|
||||
```
|
||||
|
||||
#### Using a property of the Function type
|
||||
|
||||
```html
|
||||
<content-action
|
||||
icon="get_app"
|
||||
title="Download this file now!"
|
||||
handler="download"
|
||||
[visible]="canDownloadNode">
|
||||
</content-action>
|
||||
```
|
||||
|
||||
The code above relies on the `canDownloadNode` property (of `Function` type) declared in
|
||||
your component class:
|
||||
|
||||
```ts
|
||||
export class MyComponent {
|
||||
|
||||
canDownloadNode = (node: Node): boolean => {
|
||||
if (node && node.entry && node.entry.name === 'For Sale.docx') {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The code above checks the node name and evaluates to `true` only if the corresponding
|
||||
node is called "For Sale.docx".
|
||||
|
||||
Note that if you want to preserve `this` context within the evaluator function then
|
||||
you should declare it as a lambda function:
|
||||
|
||||
```ts
|
||||
funcName = (parameters): boolean => {
|
||||
// implementation
|
||||
return true;
|
||||
}
|
||||
```
|
||||
|
||||
### Conditional disabled state
|
||||
|
||||
As with the `visible` property, you can control the `disabled` state with the following options:
|
||||
|
||||
- direct value of `boolean` type
|
||||
- binding to a property of the `Function` type that evaluates a condition and returns a `boolean` value
|
||||
|
||||
#### Using direct value of boolean type
|
||||
|
||||
```html
|
||||
<content-action
|
||||
target="all"
|
||||
title="Action for 'custom' node"
|
||||
[disabled]="true"
|
||||
(execute)="runCustomAction($event)">
|
||||
</content-action>
|
||||
```
|
||||
|
||||
#### Using a property of the Function type
|
||||
|
||||
```html
|
||||
<content-action
|
||||
target="all"
|
||||
title="Action for 'custom' node"
|
||||
[disabled]="isCustomActionDisabled"
|
||||
(execute)="runCustomAction($event)">
|
||||
</content-action>
|
||||
```
|
||||
|
||||
The code above relies on the `isCustomActionDisabled` property of a `Function` type declared at your component class level:
|
||||
|
||||
```ts
|
||||
export class MyComponent {
|
||||
|
||||
isCustomActionDisabled = (node: Node): boolean => {
|
||||
if (node && node.entry && node.entry.name === 'custom') {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The code above checks the node name, and evaluates to `true` only if the corresponding node is called "custom".
|
||||
|
||||
Note that if you want to preserve the `this` context within the evaluator function,
|
||||
you should declare it as a lambda function:
|
||||
|
||||
```ts
|
||||
funcName = (parameters): boolean => {
|
||||
// implementation
|
||||
return true;
|
||||
}
|
||||
```
|
||||
|
||||
### Customizing built-in actions
|
||||
|
||||
The built-in actions are defined in the [Document Actions service](../services/document-actions.service.md) and
|
||||
[Folder Actions service](../services/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](../services/document-actions.service.md) and [Folder Actions service](../services/folder-actions.service.md)
|
||||
for details and examples.
|
||||
|
||||
### Error, Permission and Success callbacks
|
||||
|
||||
You can define error, permission and success callbacks in much the same way as for the delete permission handling.
|
||||
|
||||
- The error handler callback gets the error object that was raised
|
||||
- The success callback's only parameter is the translatable success message string (which could be shown in a snackbar, for example)
|
||||
- The `permissionEvent` callback is the same as described above for the delete action
|
||||
|
||||
|
||||
|
||||
## See also
|
||||
|
||||
- [Document list component](document-list.component.md)
|
||||
- [Document actions service](../services/document-actions.service.md)
|
||||
- [Folder actions service](../services/folder-actions.service.md)
|
||||
@@ -0,0 +1,219 @@
|
||||
---
|
||||
Title: Content Metadata Card component
|
||||
Added: v2.1.0
|
||||
Status: Active
|
||||
Last reviewed: 2019-01-16
|
||||
---
|
||||
|
||||
# [Content Metadata Card component](../../../lib/content-services/content-metadata/components/content-metadata-card/content-metadata-card.component.ts "Defined in content-metadata-card.component.ts")
|
||||
|
||||
Displays and edits metadata related to a node.
|
||||
|
||||
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-content-metadata-card
|
||||
[displayEmpty]="false"
|
||||
[toggleDisplayProperties]="displayDefaultProperties"
|
||||
[preset]="'*'"
|
||||
[node]="node">
|
||||
</adf-content-metadata-card>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| displayEmpty | `boolean` | false | (optional) This flag displays/hides empty metadata fields. |
|
||||
| multi | `boolean` | false | (optional) This flag allows the component to display more than one accordion at a time. |
|
||||
| node | [`Node`](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/content-rest-api/docs/Node.md) | | (required) The node entity to fetch metadata about |
|
||||
| preset | `string` | | (required) Name of the metadata preset, which defines aspects and their properties. |
|
||||
| readOnly | `boolean` | false | (optional) This flag sets the metadata in read only mode preventing changes. |
|
||||
| displayDefaultProperties | `boolean` | | (optional) This flag displays/hides the metadata properties. |
|
||||
|
||||
## Details
|
||||
|
||||
The component shows metadata related to a given node. It uses the
|
||||
[Card View component](../../core/components/card-view.component.md) to render the properties of metadata aspects.
|
||||
The different aspects and their properties to be shown can be configured as application config
|
||||
presets (see below). By default the component only shows the basic properties of the node.
|
||||
The user can click on the pencil icon at the bottom of the component to edit the metadata
|
||||
properties.
|
||||
|
||||
### Application config presets
|
||||
|
||||
You can define different presets for the metadata component or override the default presets in
|
||||
the `app.config.json` file. The **default** preset is "\*" if not set, meaning the component
|
||||
will display every aspect and property of a node without filtering.
|
||||
|
||||
You can define as many extra presets as you need for your components.
|
||||
|
||||
The example configurations below show the options in detail.
|
||||
|
||||
#### Indifferent config
|
||||
|
||||
The default configuration behaves like the following:
|
||||
|
||||
```json
|
||||
...
|
||||
"content-metadata": {
|
||||
"presets": {
|
||||
"default": "*"
|
||||
}
|
||||
}
|
||||
...
|
||||
```
|
||||
|
||||
#### Aspect oriented config
|
||||
|
||||
With this type of configuration you can "whitelist" aspects and properties for a preset, but everything will be grouped by aspects and there is no further way to group properties. Use a
|
||||
[layout oriented configuration](#layout-oriented-config) if you want to define your own
|
||||
custom groups.
|
||||
|
||||
The default configuration shows every aspect but you can restrict it to just a small selection
|
||||
of aspects by "whitelisting" the ones you want in the `default` section. In the example below,
|
||||
just the `exif:exif` and `custom:aspect` aspects are whitelisted:
|
||||
|
||||
```json
|
||||
...
|
||||
"content-metadata": {
|
||||
"presets": {
|
||||
"default": {
|
||||
"custom:aspect": "*",
|
||||
"exif:exif": "*"
|
||||
}
|
||||
}
|
||||
}
|
||||
...
|
||||
```
|
||||
|
||||
You can further restrict the whitelist to specific properties of one or more aspects by using
|
||||
an array of property names in place of the "\*" filter:
|
||||
|
||||
```json
|
||||
...
|
||||
"content-metadata": {
|
||||
"presets": {
|
||||
"default": {
|
||||
"custom:aspect": "*",
|
||||
"exif:exif": [ "exif:pixelXDimension", "exif:pixelYDimension"]
|
||||
}
|
||||
}
|
||||
}
|
||||
...
|
||||
```
|
||||
|
||||
A final example shows the same process applied to a custom preset called "kitten-images":
|
||||
|
||||
```json
|
||||
...
|
||||
"content-metadata": {
|
||||
"presets": {
|
||||
"default": "*",
|
||||
"kitten-images": {
|
||||
"custom:aspect": "*",
|
||||
"exif:exif": [ "exif:pixelXDimension", "exif:pixelYDimension"]
|
||||
}
|
||||
}
|
||||
}
|
||||
...
|
||||
```
|
||||
|
||||
### Layout oriented config
|
||||
|
||||
You can also go beyond the aspect oriented configuration if you need 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" and grouped into an accordion drawer, along with a translatable title
|
||||
defined in the preset configuration.
|
||||
|
||||
#### Basic elements
|
||||
|
||||
The following config will produce one accordion group named "TRANSLATABLE_TITLE_FOR_GROUP_1",
|
||||
with all the properties from `custom:aspect` followed by the two properties (`exif:pixelXDimension`
|
||||
and `exif:pixelYDimension`) from the `exif:exif` aspect and then 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
|
||||
|
||||
A more complex config is shown in the example 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 result of this config would be two accordion groups with the following properties:
|
||||
|
||||
| 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 - since this aspect is not related to the node, it will simply be ignored and not
|
||||
displayed. The aspects to be displayed are calculated as an intersection of the preset's aspects and the aspects related to the node.
|
||||
220
docs/content-services/components/content-metadata.component.md
Normal file
220
docs/content-services/components/content-metadata.component.md
Normal file
@@ -0,0 +1,220 @@
|
||||
---
|
||||
Title: Content Metadata Card component
|
||||
Added: v2.1.0
|
||||
Status: Active
|
||||
Last reviewed: 2019-01-16
|
||||
---
|
||||
|
||||
# [Content Metadata Card component](../../../lib/content-services/content-metadata/components/content-metadata/content-metadata.component.ts "Defined in content-metadata.component.ts")
|
||||
|
||||
Displays and edits metadata related to a node.
|
||||
|
||||
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-content-metadata-card
|
||||
[displayEmpty]="false"
|
||||
[toggleDisplayProperties]="displayDefaultProperties"
|
||||
[preset]="'*'"
|
||||
[node]="node">
|
||||
</adf-content-metadata-card>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| displayDefaultProperties | `boolean` | true | Toggles whether the metadata properties should be shown |
|
||||
| displayEmpty | `boolean` | false | Toggles whether to display empty values in the card view |
|
||||
| editable | `boolean` | false | Toggles whether the edit button should be shown |
|
||||
| expanded | `boolean` | false | Toggles between expanded (ie, full information) and collapsed (ie, reduced information) in the display |
|
||||
| multi | `boolean` | false | The multi parameter of the underlying material expansion panel, set to true to allow multi accordion to be expanded at the same time |
|
||||
| node | [`Node`](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/content-rest-api/docs/Node.md) | | (required) The node entity to fetch metadata about |
|
||||
| preset | `string` | | Name of the metadata preset, which defines aspects and their properties |
|
||||
|
||||
## Details
|
||||
|
||||
The component shows metadata related to a given node. It uses the
|
||||
[Card View component](../../core/components/card-view.component.md) to render the properties of metadata aspects.
|
||||
The different aspects and their properties to be shown can be configured as application config
|
||||
presets (see below). By default the component only shows the basic properties of the node.
|
||||
The user can click on the pencil icon at the bottom of the component to edit the metadata
|
||||
properties.
|
||||
|
||||
### Application config presets
|
||||
|
||||
You can define different presets for the metadata component or override the default presets in
|
||||
the `app.config.json` file. The **default** preset is "\*" if not set, meaning the component
|
||||
will display every aspect and property of a node without filtering.
|
||||
|
||||
You can define as many extra presets as you need for your components.
|
||||
|
||||
The example configurations below show the options in detail.
|
||||
|
||||
#### Indifferent config
|
||||
|
||||
The default configuration behaves like the following:
|
||||
|
||||
```json
|
||||
...
|
||||
"content-metadata": {
|
||||
"presets": {
|
||||
"default": "*"
|
||||
}
|
||||
}
|
||||
...
|
||||
```
|
||||
|
||||
#### Aspect oriented config
|
||||
|
||||
With this type of configuration you can "whitelist" aspects and properties for a preset, but everything will be grouped by aspects and there is no further way to group properties. Use a
|
||||
[layout oriented configuration](#layout-oriented-config) if you want to define your own
|
||||
custom groups.
|
||||
|
||||
The default configuration shows every aspect but you can restrict it to just a small selection
|
||||
of aspects by "whitelisting" the ones you want in the `default` section. In the example below,
|
||||
just the `exif:exif` and `custom:aspect` aspects are whitelisted:
|
||||
|
||||
```json
|
||||
...
|
||||
"content-metadata": {
|
||||
"presets": {
|
||||
"default": {
|
||||
"custom:aspect": "*",
|
||||
"exif:exif": "*"
|
||||
}
|
||||
}
|
||||
}
|
||||
...
|
||||
```
|
||||
|
||||
You can further restrict the whitelist to specific properties of one or more aspects by using
|
||||
an array of property names in place of the "\*" filter:
|
||||
|
||||
```json
|
||||
...
|
||||
"content-metadata": {
|
||||
"presets": {
|
||||
"default": {
|
||||
"custom:aspect": "*",
|
||||
"exif:exif": [ "exif:pixelXDimension", "exif:pixelYDimension"]
|
||||
}
|
||||
}
|
||||
}
|
||||
...
|
||||
```
|
||||
|
||||
A final example shows the same process applied to a custom preset called "kitten-images":
|
||||
|
||||
```json
|
||||
...
|
||||
"content-metadata": {
|
||||
"presets": {
|
||||
"default": "*",
|
||||
"kitten-images": {
|
||||
"custom:aspect": "*",
|
||||
"exif:exif": [ "exif:pixelXDimension", "exif:pixelYDimension"]
|
||||
}
|
||||
}
|
||||
}
|
||||
...
|
||||
```
|
||||
|
||||
### Layout oriented config
|
||||
|
||||
You can also go beyond the aspect oriented configuration if you need 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" and grouped into an accordion drawer, along with a translatable title
|
||||
defined in the preset configuration.
|
||||
|
||||
#### Basic elements
|
||||
|
||||
The following config will produce one accordion group named "TRANSLATABLE_TITLE_FOR_GROUP_1",
|
||||
with all the properties from `custom:aspect` followed by the two properties (`exif:pixelXDimension`
|
||||
and `exif:pixelYDimension`) from the `exif:exif` aspect and then 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
|
||||
|
||||
A more complex config is shown in the example 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 result of this config would be two accordion groups with the following properties:
|
||||
|
||||
| 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 - since this aspect is not related to the node, it will simply be ignored and not
|
||||
displayed. The aspects to be displayed are calculated as an intersection of the preset's aspects and the aspects related to the node.
|
||||
@@ -0,0 +1,69 @@
|
||||
---
|
||||
Title: Content Node Selector Panel component
|
||||
Added: v2.1.0
|
||||
Status: Active
|
||||
Last reviewed: 2019-01-16
|
||||
---
|
||||
|
||||
# [Content Node Selector Panel component](../../../lib/content-services/content-node-selector/content-node-selector-panel.component.ts "Defined in content-node-selector-panel.component.ts")
|
||||
|
||||
Opens a [Content Node Selector](content-node-selector.component.md) 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>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| breadcrumbTransform | `Function` | | 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. |
|
||||
| currentFolderId | `string` | null | [Node](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/content-rest-api/docs/Node.md) 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`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/SitePaging.md) | null | Custom site for site dropdown. This is the same as the `siteList`. property of the Sites Dropdown component (see its doc page for more information). |
|
||||
| imageResolver | `ImageResolver` | null | Custom image resolver function. See the [Image Resolver Model](../models/image-resolver.model.md) page for more information. |
|
||||
| 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. |
|
||||
| pageSize | `number` | | Number of items shown per page in the list. |
|
||||
| where | `string` | | Custom _where_ filter function. See the [Document List component](../../content-services/components/document-list.component.md) for more information. |
|
||||
| excludeSiteContent | `string[]` | | Custom list of site content componentIds. Used to filter out the corresponding items from the displayed nodes |
|
||||
| rowFilter | `RowFilter` | | Custom row filter function. See the [Row Filter Model](../models/row-filter.model.md) page for more information. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| select | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`Node`](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/content-rest-api/docs/Node.md)`[]>` | 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](../services/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`](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/content-rest-api/docs/Node.md) 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](../services/content-node-dialog.service.md)
|
||||
@@ -0,0 +1,136 @@
|
||||
---
|
||||
Title: Content Node Selector component
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2019-01-16
|
||||
---
|
||||
|
||||
# [Content Node Selector component](../../../lib/content-services/content-node-selector/content-node-selector.component.ts "Defined in content-node-selector.component.ts")
|
||||
|
||||
Allows a user to select items from a Content Services repository.
|
||||
|
||||
|
||||
|
||||
## Details
|
||||
|
||||
The [Content Node Selector component](content-node-selector.component.md) 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).
|
||||
|
||||
### Showing the dialog
|
||||
|
||||
Unlike most components, the [Content Node Selector Component](content-node-selector.component.md) 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`](../../../lib/content-services/content-node-selector/content-node-selector.component-data.interface.ts) interface
|
||||
to work with the Dialog's
|
||||
[data option](https://material.angular.io/components/dialog/overview#sharing-data-with-the-dialog-component-):
|
||||
|
||||
```ts
|
||||
export interface ContentNodeSelectorComponentData {
|
||||
title: string;
|
||||
actionName?: string;
|
||||
currentFolderId: string;
|
||||
dropdownHideMyFiles?: boolean;
|
||||
dropdownSiteList?: SitePaging;
|
||||
rowFilter?: any;
|
||||
where?: string;
|
||||
imageResolver?: any;
|
||||
isSelectionValid?: (entry: Node) => boolean;
|
||||
breadcrumbTransform?: (node) => any;
|
||||
excludeSiteContent?: string[];
|
||||
select: Subject<Node[]>;
|
||||
}
|
||||
```
|
||||
|
||||
The properties are described in the table below:
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| title | `string` | "" | Dialog title |
|
||||
| actionName | `string` | "" | Text to appear on the dialog's main action button ("Move", "Copy", etc) |
|
||||
| currentFolderId | `string` | `null` | [`Node`](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/content-rest-api/docs/Node.md) 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`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/SitePaging.md) | `null` | Custom site for site dropdown same as siteList. See the [Sites Dropdown component](sites-dropdown.component.md) for more information. |
|
||||
| rowFilter | [`RowFilter`](../../../lib/content-services/document-list/data/row-filter.model.ts) | `null` | Custom row filter function. See the [Row Filter Model](../models/row-filter.model.md) page for more information. |
|
||||
| where | `string` | `null` | Custom _where_ filter function. See the [Document List component](document-list.component.md) for more information. |
|
||||
| imageResolver | [`ImageResolver`](../../../lib/content-services/document-list/data/image-resolver.model.ts) | `null` | Custom image resolver function. See the [Image Resolver Model](../models/image-resolver.model.md) page for more information. |
|
||||
| pageSize | `number` | | Number of items shown per page in the list. |
|
||||
| isSelectionValid | [`ValidationFunction`](../../../lib/content-services/content-node-selector/content-node-selector-panel.component.ts) | `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. |
|
||||
| select | [`Subject<Node>`](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/content-rest-api/docs/Node.md) | | Event emitted with the current node selection when the dialog closes |
|
||||
|
||||
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](../services/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",
|
||||
actionName: "Choose",
|
||||
currentFolderId: someFolderId,
|
||||
select: new Subject<Node[]>()
|
||||
};
|
||||
|
||||
this.dialog.open(
|
||||
ContentNodeSelectorComponent,
|
||||
{
|
||||
data, panelClass: 'adf-content-node-selector-dialog',
|
||||
width: '630px'
|
||||
}
|
||||
);
|
||||
|
||||
data.select.subscribe((selections: Node[]) => {
|
||||
// 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`](../../../lib/content-services/content-node-selector/content-node-selector.component-data.interface.ts) 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](content-node-selector.component.md) 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
|
||||
[Row Filter Model](../models/row-filter.model.md) and [Image Resolver Model](../models/image-resolver.model.md)
|
||||
pages for more information.
|
||||
|
||||
### Using the breadcrumbTransform function
|
||||
|
||||
The `breadcrumbTransform` property of [`ContentNodeSelectorComponentData`](../../../lib/content-services/content-node-selector/content-node-selector.component-data.interface.ts) lets you modify
|
||||
the [`Node`](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/content-rest-api/docs/Node.md) 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](../services/content-node-dialog.service.md)
|
||||
796
docs/content-services/components/document-list.component.md
Normal file
796
docs/content-services/components/document-list.component.md
Normal file
@@ -0,0 +1,796 @@
|
||||
---
|
||||
Title: Document List component
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2019-02-08
|
||||
---
|
||||
|
||||
# [Document List component](../../../lib/content-services/document-list/components/document-list.component.ts "Defined in document-list.component.ts")
|
||||
|
||||
Displays the documents from a repository.
|
||||
|
||||
|
||||
|
||||
## Contents
|
||||
|
||||
- [Basic Usage](#basic-usage)
|
||||
- [Class members](#class-members)
|
||||
- [Properties](#properties)
|
||||
- [Events](#events)
|
||||
- [Details](#details)
|
||||
- [DOM Events](#dom-events)
|
||||
- [Conditional visibility](#conditional-visibility)
|
||||
- [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)
|
||||
- [Column templates](#column-templates)
|
||||
- [Date Column](#date-column)
|
||||
- [Location Column](#location-column)
|
||||
- [Actions](#actions)
|
||||
- [Navigation mode](#navigation-mode)
|
||||
- [Advanced usage and customization](#advanced-usage-and-customization)
|
||||
- [Image Resolver and Row Filter functions](#image-resolver-and-row-filter-functions)
|
||||
- [Custom 'empty folder' template](#custom-empty-folder-template)
|
||||
- [Custom 'permission denied' template](#custom-permission-denied-template)
|
||||
- [Custom 'loading' template](#custom-loading-template)
|
||||
- [See also](#see-also)
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-document-list
|
||||
#documentList
|
||||
[currentFolderId]="'-my-'"
|
||||
[contextMenuActions]="true"
|
||||
[contentActions]="true">
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| allowDropFiles | `boolean` | false | When true, this enables you to drop files directly into subfolders shown as items in the list. When false, the dropped file will be added to the current folder (ie, the one containing all the items shown in the list). See the [Upload directive](../../core/directives/upload.directive.md) for further details about how the file drop is handled. |
|
||||
| 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 |
|
||||
| display | `string` | DisplayMode.List | Change the display mode of the table. Can be "list" or "gallery". |
|
||||
| emptyFolderImageUrl | `string` | | Custom image for empty folder. Default value: './assets/images/empty_doc_lib.svg' |
|
||||
| imageResolver | `any \| null` | null | Custom function to choose image file paths to show. See the [Image Resolver Model](../models/image-resolver.model.md) page for more information. |
|
||||
| includeFields | `string[]` | | Include additional information about the node in the server request. For example: association, isLink, isLocked and others. |
|
||||
| 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. |
|
||||
| locationFormat | `string` | "/" | The default route for all the location-based columns (if declared). |
|
||||
| maxItems | `number` | | Default value is stored in the user preference settings. Use this only if you are not using pagination. |
|
||||
| multiselect | `boolean` | false | Toggles multiselect mode |
|
||||
| navigate | `boolean` | true | Toggles navigation to folder content or file preview |
|
||||
| navigationMode | `string` | | User interaction for folder navigation or file preview. Valid values are "click" and "dblclick". Default value: "dblclick" |
|
||||
| node | [`NodePaging`](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/content-rest-api/docs/NodePaging.md) | null | The Document list will show all the nodes contained in the [NodePaging](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/content-rest-api/docs/NodePaging.md) entity |
|
||||
| permissionsStyle | [`PermissionStyleModel`](../../../lib/content-services/document-list/models/permissions-style.model.ts)`[]` | \[] | Define a set of CSS styles to apply depending on the permission of the user on that node. See the [Permission Style model](../../../lib/content-services/document-list/models/permissions-style.model.ts) page for further details and examples. |
|
||||
| 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 |
|
||||
| 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. |
|
||||
| showHeader | `boolean` | true | Toggles the header |
|
||||
| sorting | `string[]` | ['name', 'asc'] | 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. |
|
||||
| sortingMode | `string` | "client" | Defines sorting mode. Can be either `client` (items in the list are sorted client-side) or `server` (the ordering supplied by the server is used without further client-side sorting). Note that the `server` option _does not_ request the server to sort the data before delivering it. |
|
||||
| thumbnails | `boolean` | false | Show document thumbnails rather than icons |
|
||||
| where | `string` | | Filters the [`Node`](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/content-rest-api/docs/Node.md) list using the _where_ condition of the REST API (for example, isFolder=true). See the REST API documentation for more information. |
|
||||
| currentFolderId | `string` | | The ID of the folder node to display or a reserved string alias for special sources |
|
||||
| rowFilter | `RowFilter` | | Custom function to choose whether to show or hide rows. See the [Row Filter Model](../models/row-filter.model.md) page for more information. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when the API fails to get the Document List data |
|
||||
| folderChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodeEntryEvent`](../../../lib/content-services/document-list/components/node.event.ts)`>` | Emitted when the current display folder changes |
|
||||
| nodeClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodeEntityEvent`](../../../lib/content-services/document-list/components/node.event.ts)`>` | Emitted when the user clicks a list node |
|
||||
| nodeDblClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodeEntityEvent`](../../../lib/content-services/document-list/components/node.event.ts)`>` | Emitted when the user double-clicks a list node |
|
||||
| preview | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodeEntityEvent`](../../../lib/content-services/document-list/components/node.event.ts)`>` | Emitted when the user acts upon files with either single or double click (depends on `navigation-mode`). Useful for integration with the [Viewer component](../../core/components/viewer.component.md). |
|
||||
| ready | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodePaging`](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/content-rest-api/docs/NodePaging.md)`>` | Emitted when the Document List has loaded all items and is ready for use |
|
||||
|
||||
## Details
|
||||
|
||||
The properties `currentFolderId` 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.
|
||||
|
||||
The Document list will automatically show special icons for : `Smart Folder`, `Link to a Folder` and `Folder with rules` as shown below :
|
||||
|
||||
|
||||
|
||||
### 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: NodeEntry
|
||||
}
|
||||
```
|
||||
|
||||
See the [DataTable](../../core/components/datatable.component.md) documentation for further details about
|
||||
the other DOM events that the [Document List component](document-list.component.md) 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>
|
||||
```
|
||||
|
||||
### Conditional visibility
|
||||
|
||||
You can use `ngIf` directives to provide conditional visibility support for the columns:
|
||||
|
||||
```html
|
||||
<data-column
|
||||
*nfIg="showNameColumn"
|
||||
key="name"
|
||||
title="MY.RESOURCE.KEY">
|
||||
</data-column>
|
||||
```
|
||||
|
||||
### 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: [Pagination component](../../core/components/pagination.component.md) and [Infinite pagination component](../../core/components/infinite-pagination.component.md)
|
||||
|
||||
#### Pagination component
|
||||
|
||||
```html
|
||||
<adf-document-list #documentList ...></adf-document-list>
|
||||
|
||||
<adf-pagination
|
||||
[target]="documentList"">
|
||||
</adf-pagination>
|
||||
```
|
||||
|
||||
#### Infinite pagination component
|
||||
|
||||
```html
|
||||
<adf-document-list #documentList ...></adf-document-list>
|
||||
|
||||
<adf-infinite-pagination
|
||||
[target]="documentList"
|
||||
[loading]="documentList.infiniteLoading">
|
||||
</adf-infinite-pagination>
|
||||
```
|
||||
|
||||
### 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`](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/content-rest-api/docs/Node.md). 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](document-list.component.md) 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](document-list.component.md) 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();
|
||||
});
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```html
|
||||
<adf-document-list
|
||||
[currentFolderId]="currentFolderId">
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
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.currentFolderId);
|
||||
```
|
||||
|
||||
**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](document-list.component.md) assigns an instance of
|
||||
[`MinimalNode`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeMinimalEntry.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](../../core/components/datatable.component.md), [Task List](../../process-services/components/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/components/data-column.component.md) for more information about specifying and customizing columns.
|
||||
|
||||
### Column templates
|
||||
|
||||
You can use the following components as column templates:
|
||||
|
||||
| Name | Description |
|
||||
| ---- | ----------- |
|
||||
| `adf-name-column` | Renders the hyperlink-styled name of the node. Provides a formatted tooltip. Emits the `name-click` DOM event, which can be handled by any parent component. |
|
||||
| `adf-library-name-column` | Renders the library name. Provides formatted tooltips and extra details for libraries with the same names on the page. Emits the `name-click` DOM event, which can be handled by any parent component. |
|
||||
| `adf-library-role-column` | Renders i18n-enabled information about the Library (Site) role (`Manager`, `Collaborator`, `Contributor`, `Consumer`) |
|
||||
| `adf-library-status-column` | Renders i18n-enabled information about the Library (Site) status (`Public`, `Private`, `Moderated`, `Unknown`) |
|
||||
| `adf-trashcan-name-column` | Renders the name of the deleted node. Distinguishes between a Library (Site) and File/Folder nodes. Provides proper tooltips. |
|
||||
|
||||
All the components above require only the `context` property to be bound, since
|
||||
each component fetches and renders the information it needs from the underlying node.
|
||||
|
||||
For example:
|
||||
|
||||
```html
|
||||
<data-column key="name" title="Name">
|
||||
<ng-template let-context>
|
||||
<adf-name-column [context]="context"></adf-name-column>
|
||||
</ng-template>
|
||||
</data-column>
|
||||
```
|
||||
|
||||
All the components above also participate in [Extensibility](../../user-guide/app-extensions.md)
|
||||
and can be used to compose DocumentList layouts from within the plugins.
|
||||
|
||||
### 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 render the 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/directives/context-menu.directive.md) from the
|
||||
ADF 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>
|
||||
<adf-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](document-list.component.md) 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
|
||||
|
||||
### Image Resolver and Row Filter functions
|
||||
|
||||
The Document List has two properties that let you modify behavior with custom
|
||||
functions:
|
||||
|
||||
- `imageResolver` - Specifies a function to choose image file paths for icons and thumbnails.
|
||||
- `rowFilter` - Selects whether a row is shown or hidden according to its data content.
|
||||
|
||||
See the [Image Resolver Model](../models/image-resolver.model.md)
|
||||
and [Row Filter Model](../models/row-filter.model.md) pages for details of how to
|
||||
implement these functions.
|
||||
|
||||
### 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 ...>
|
||||
<adf-custom-empty-content-template>
|
||||
<h1>Sorry, no content here</h1>
|
||||
</adf-custom-empty-content-template>
|
||||
</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 ...>
|
||||
<adf-custom-no-permission-template>
|
||||
<h1>You don't have permissions</h1>
|
||||
</adf-custom-no-permission-template>
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
This will give the following output:
|
||||
|
||||
|
||||
|
||||
### Custom 'loading' template
|
||||
|
||||
By default, the Document List shows the following content when the content is loading:
|
||||
|
||||
|
||||
|
||||
You can change this by defining your own custom HTML template:
|
||||
|
||||
```html
|
||||
<adf-document-list ...>
|
||||
<adf-custom-loading-content-template>
|
||||
Loading Content
|
||||
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
|
||||
</adf-custom-loading-content-template>
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
This will give the following output:
|
||||
|
||||
|
||||
|
||||
## See also
|
||||
|
||||
- [Datatable component](../../core/components/datatable.component.md)
|
||||
- [Data column component](../../core/components/data-column.component.md)
|
||||
- [Pagination component](../../core/components/pagination.component.md)
|
||||
- [Infinite pagination component](../../core/components/infinite-pagination.component.md)
|
||||
- [Sites dropdown component](sites-dropdown.component.md)
|
||||
- [Metadata indicators](../../user-guide/metadata-indicators.md)
|
||||
- [Nodes api service](../../core/services/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](../services/document-list.service.md)
|
||||
- [Dropdown breadcrumb component](dropdown-breadcrumb.component.md)
|
||||
- [Permissions style model](../models/permissions-style.model.md)
|
||||
- [Version manager component](version-manager.component.md)
|
||||
- [Viewer component](../../core/components/viewer.component.md)
|
||||
@@ -0,0 +1,51 @@
|
||||
---
|
||||
Title: Dropdown Breadcrumb Component
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2019-01-16
|
||||
---
|
||||
|
||||
# [Dropdown Breadcrumb Component](../../../lib/content-services/breadcrumb/dropdown-breadcrumb.component.ts "Defined in dropdown-breadcrumb.component.ts")
|
||||
|
||||
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>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| folderNode | [`Node`](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/content-rest-api/docs/Node.md) | null | Active node, builds UI based on folderNode.path.elements collection. |
|
||||
| maxItems | `number` | | Maximum number of nodes to display before wrapping them with a dropdown element. |
|
||||
| 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`](../../content-services/components/document-list.component.md) | | (optional) [Document List component](../../content-services/components/document-list.component.md) to operate with. The list will update when the breadcrumb is clicked. |
|
||||
| transform | `Function` | | 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`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when the user clicks on a breadcrumb. |
|
||||
|
||||
## Details
|
||||
|
||||
Although this component inherits the `maxItems` property from the [Breadcrumb component,](breadcrumb.component.md) the
|
||||
"crumbs" are _always_ shown on a menu. By contrast, the [Breadcrumb component](breadcrumb.component.md) only falls back
|
||||
to a menu when its maximum number of nodes is exceeded.
|
||||
|
||||
## See also
|
||||
|
||||
- [Document list component](document-list.component.md)
|
||||
- [Breadcrumb component](breadcrumb.component.md)
|
||||
@@ -0,0 +1,42 @@
|
||||
---
|
||||
Title: File Uploading Dialog Component
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2019-01-16
|
||||
---
|
||||
|
||||
# [File Uploading Dialog Component](../../../lib/content-services/upload/components/file-uploading-dialog.component.ts "Defined in file-uploading-dialog.component.ts")
|
||||
|
||||
Shows a dialog listing all the files uploaded with the Upload Button or Drag Area components.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-file-uploading-dialog></adf-file-uploading-dialog>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| position | `string` | "right" | Dialog position. Can be 'left' or 'right'. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when a file in the list has an error. |
|
||||
|
||||
## 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)
|
||||
- [File upload error pipe](../pipes/file-upload-error.pipe.md)
|
||||
37
docs/content-services/components/like.component.md
Normal file
37
docs/content-services/components/like.component.md
Normal file
@@ -0,0 +1,37 @@
|
||||
---
|
||||
Title: Like component
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-11-14
|
||||
---
|
||||
|
||||
# [Like component](../../../lib/content-services/social/like.component.ts "Defined in like.component.ts")
|
||||
|
||||
Allows a user to add "likes" to an item.
|
||||
|
||||
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-like [nodeId]="nodeId"></adf-like>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| nodeId | `string` | | Identifier of a node to apply likes to. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| changeVote | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<Object>` | Emitted when the "vote" gets changed. |
|
||||
|
||||
## See also
|
||||
|
||||
- [Rating component](rating.component.md)
|
||||
- [Rating service](../services/rating.service.md)
|
||||
@@ -0,0 +1,54 @@
|
||||
---
|
||||
Title: Permission List Component
|
||||
Added: v2.3.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-11-20
|
||||
---
|
||||
|
||||
# [Permission List Component](../../../lib/content-services/permission-manager/components/permission-list/permission-list.component.ts "Defined in permission-list.component.ts")
|
||||
|
||||
Shows node permissions as a table.
|
||||
|
||||
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-permission-list [nodeId]="nodeId">
|
||||
</adf-permission-list>
|
||||
```
|
||||
|
||||
### [Transclusions](../../user-guide/transclusion.md)
|
||||
|
||||
When the list is empty, the contents will simply say "No permissions" by default,
|
||||
but you can also supply your own content:
|
||||
|
||||
```html
|
||||
<adf-permission-list [nodeId]="nodeId">
|
||||
<adf-no-permission-template>
|
||||
Custom no permission template!
|
||||
</adf-no-permission-template>
|
||||
</adf-permission-list>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| nodeId | `string` | "" | ID of the node whose permissions you want to show. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when an error occurs. |
|
||||
| update | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`PermissionElement`](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/content-rest-api/docs/PermissionElement.md)`>` | Emitted when the permission is updated. |
|
||||
|
||||
## Details
|
||||
|
||||
This component uses a [Datatable component](../../core/components/datatable.component.md) to show the
|
||||
permissions retrieved from the [Node service](../../core/services/node.service.md).
|
||||
For the locally set permissions a role dropdown will be shown to let the user select a new role.
|
||||
When the user selects a new value, the permission role is automatically updated and the `update` event is emitted.
|
||||
39
docs/content-services/components/rating.component.md
Normal file
39
docs/content-services/components/rating.component.md
Normal file
@@ -0,0 +1,39 @@
|
||||
---
|
||||
Title: Rating component
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2019-01-14
|
||||
---
|
||||
|
||||
# [Rating component](../../../lib/content-services/social/rating.component.ts "Defined in rating.component.ts")
|
||||
|
||||
Allows a user to add ratings to an item.
|
||||
|
||||
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-rating
|
||||
[nodeId]="'74cd8a96-8a21-47e5-9b3b-a1b3e296787d'">
|
||||
</adf-rating>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| nodeId | `string` | | Identifier of the node to apply the rating to. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| changeVote | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<Object>` | Emitted when the "vote" gets changed. |
|
||||
|
||||
## See also
|
||||
|
||||
- [Like component](like.component.md)
|
||||
- [Rating service](../services/rating.service.md)
|
||||
@@ -0,0 +1,78 @@
|
||||
---
|
||||
Title: Search check list component
|
||||
Added: v2.4.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-06-11
|
||||
---
|
||||
|
||||
# [Search check list component](../../../lib/content-services/search/components/search-check-list/search-check-list.component.ts "Defined in search-check-list.component.ts")
|
||||
|
||||
Implements a checklist widget for the [Search Filter component](search-filter.component.md).
|
||||
|
||||
|
||||
|
||||
## Basic usage
|
||||
|
||||
```json
|
||||
{
|
||||
"search": {
|
||||
"categories": [
|
||||
{
|
||||
"id": "checkList",
|
||||
"name": "Check List",
|
||||
"enabled": true,
|
||||
"component": {
|
||||
"selector": "check-list",
|
||||
"pageSize": 5,
|
||||
"settings": {
|
||||
"operator": "OR",
|
||||
"options": [
|
||||
{ "name": "Folder", "value": "TYPE:'cm:folder'" },
|
||||
{ "name": "Document", "value": "TYPE:'cm:content'" }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Settings
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| operator | `string` | Logical operator to combine query fragments. Can be 'AND' or 'OR'. |
|
||||
| options | `array` | Array of objects with `name` and `value` properties. Each object defines a checkbox, labelled with `name`, that adds the query fragment in `value` to the query when enabled. |
|
||||
|
||||
## Details
|
||||
|
||||
This widget displays a list of checkboxes, each of which toggles a particular query fragment
|
||||
in the search. See the [Search filter component](search-filter.component.md) for full details of how to use the widgets
|
||||
in a search query.
|
||||
|
||||
In the settings, the `options` array, defines the checkboxes that toggle the supplied query
|
||||
fragments and the `operator` selects logical `AND` or `OR` to combine the fragments.
|
||||
In the example above, if the user checks both boxes then the following fragment will be added
|
||||
to the query:
|
||||
|
||||
```text
|
||||
... (TYPE:'cm:folder' OR TYPE:'cm:content') ...
|
||||
```
|
||||
|
||||
The component can be set to split a long checklist into separate pages of checkboxes
|
||||
using the `pageSize` value as the number of boxes to show per page (default is 5).
|
||||
When there is more than one page, the widget will display "Show more" and "Show less"
|
||||
buttons as appropriate.
|
||||
|
||||
A "Clear all" button is also displayed at the bottom of the widget to clear all checked
|
||||
items in the list.
|
||||
|
||||
## See also
|
||||
|
||||
- [Search filter component](search-filter.component.md)
|
||||
- [Search date range component](search-date-range.component.md)
|
||||
- [Search number range component](search-number-range.component.md)
|
||||
- [Search radio component](search-radio.component.md)
|
||||
- [Search slider component](search-slider.component.md)
|
||||
- [Search text component](search-text.component.md)
|
||||
@@ -0,0 +1,28 @@
|
||||
---
|
||||
Title: Search Chip List Component
|
||||
Added: v2.3.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-09-14
|
||||
---
|
||||
|
||||
# [Search Chip List Component](../../../lib/content-services/search/components/search-chip-list/search-chip-list.component.ts "Defined in search-chip-list.component.ts")
|
||||
|
||||
Displays search criteria as a set of "chips".
|
||||
|
||||
|
||||
|
||||
## Basic usage
|
||||
|
||||
```html
|
||||
<adf-search-chip-list [searchFilter]="searchFilter"></adf-search-chip-list>
|
||||
<adf-search-filter #searchFilter></adf-search-filter>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| clearAll | `boolean` | false | Flag used to enable the display of a clear-all-filters button. |
|
||||
| searchFilter | [`SearchFilterComponent`](../../content-services/components/search-filter.component.md) | | Search filter to supply the data for the chips. |
|
||||
70
docs/content-services/components/search-control.component.md
Normal file
70
docs/content-services/components/search-control.component.md
Normal file
@@ -0,0 +1,70 @@
|
||||
---
|
||||
Title: Search control component
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2019-01-16
|
||||
---
|
||||
|
||||
# [Search control component](../../../lib/content-services/search/components/search-control.component.ts "Defined in search-control.component.ts")
|
||||
|
||||
Displays a input text that shows find-as-you-type suggestions.
|
||||
|
||||
|
||||
|
||||
## Basic usage
|
||||
|
||||
```html
|
||||
<adf-search-control
|
||||
[highlight]="true"
|
||||
(optionClicked)="onItemClicked($event)"
|
||||
(submit)="onSearchSubmit($event)">
|
||||
</adf-search-control>
|
||||
```
|
||||
|
||||
### [Transclusions](../../user-guide/transclusion.md)
|
||||
|
||||
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>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| autocomplete | `boolean` | false | Toggles auto-completion of the search input field. |
|
||||
| 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). |
|
||||
| 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. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| optionClicked | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when a file item from the list of "find-as-you-type" results is selected. |
|
||||
| searchChange | [`EventEmitter`](https://angular.io/api/core/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 it is truncated to an empty string. |
|
||||
| submit | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when the search is submitted by pressing the ENTER key. The search term is provided as the value of the event. |
|
||||
|
||||
## 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>
|
||||
```
|
||||
@@ -0,0 +1,83 @@
|
||||
---
|
||||
Title: Search date range component
|
||||
Added: v2.4.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-06-11
|
||||
---
|
||||
|
||||
# [Search date range component](../../../lib/content-services/search/components/search-date-range/search-date-range.component.ts "Defined in search-date-range.component.ts")
|
||||
|
||||
Implements a date range widget for the [Search Filter component](search-filter.component.md).
|
||||
|
||||
|
||||
|
||||
## Basic usage
|
||||
|
||||
```json
|
||||
{
|
||||
"search": {
|
||||
"categories": [
|
||||
{
|
||||
"id": "createdDateRange",
|
||||
"name": "Created Date (range)",
|
||||
"enabled": true,
|
||||
"component": {
|
||||
"selector": "date-range",
|
||||
"settings": {
|
||||
"field": "cm:created"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Settings
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| field | string | Field to apply the query to. Required value |
|
||||
| dateFormat | string | Date format. Dates used by the datepicker are [Moment.js](https://momentjs.com/docs/#/parsing/string-format/) instances, so you can use any date format supported by Moment. Default is 'DD/MM/YYYY'. |
|
||||
|
||||
## Details
|
||||
|
||||
This component lets the user select a range between two dates based on the particular `field`.
|
||||
See the [Search filter component](search-filter.component.md) for full details of how to use widgets
|
||||
in a search query.
|
||||
|
||||
### Custom date format
|
||||
|
||||
You can set the date range picker to work with any date format your app requires. You can use
|
||||
any date format supported by [Moment.js](https://momentjs.com/docs/#/parsing/string-format/)
|
||||
in the `dateFormat` setting:
|
||||
|
||||
```json
|
||||
{
|
||||
"search": {
|
||||
"categories": [
|
||||
{
|
||||
"id": "createdDateRange",
|
||||
"name": "Created Date (range)",
|
||||
"enabled": true,
|
||||
"component": {
|
||||
"selector": "date-range",
|
||||
"settings": {
|
||||
"field": "cm:created",
|
||||
"dateFormat": "DD-MMM-YY"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## See also
|
||||
|
||||
- [Search filter component](search-filter.component.md)
|
||||
- [Search check list component](search-check-list.component.md)
|
||||
- [Search number range component](search-number-range.component.md)
|
||||
- [Search radio component](search-radio.component.md)
|
||||
- [Search slider component](search-slider.component.md)
|
||||
- [Search text component](search-text.component.md)
|
||||
434
docs/content-services/components/search-filter.component.md
Normal file
434
docs/content-services/components/search-filter.component.md
Normal file
@@ -0,0 +1,434 @@
|
||||
---
|
||||
Title: Search Filter component
|
||||
Added: v2.3.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-06-12
|
||||
---
|
||||
|
||||
# [Search Filter component](../../../lib/content-services/search/components/search-filter/search-filter.component.ts "Defined in search-filter.component.ts")
|
||||
|
||||
Represents a main container component for custom search and faceted search settings.
|
||||
|
||||
## Contents
|
||||
|
||||
- [Basic usage](#basic-usage)
|
||||
- [Details](#details)
|
||||
- [Configuration](#configuration)
|
||||
- [Extra fields and filter queries](#extra-fields-and-filter-queries)
|
||||
- [Sorting](#sorting)
|
||||
- [Categories and widgets](#categories-and-widgets)
|
||||
- [Facet Fields](#facet-fields)
|
||||
- [Facet Queries](#facet-queries)
|
||||
- [Facet Intervals](#facet-intervals)
|
||||
- [See also](#see-also)
|
||||
|
||||
## Basic usage
|
||||
|
||||
```html
|
||||
<adf-search-filter #settings></adf-search-filter>
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
The component UI uses dynamically created widgets to specify the search query and its
|
||||
options. It then uses the [Search Query Builder service](../services/search-query-builder.service.md)
|
||||
to build and execute the query.
|
||||
|
||||
You may find it useful to check out the following resources for background information
|
||||
before customizing the search UI:
|
||||
|
||||
- [Search API](https://docs.alfresco.com/5.2/concepts/search-api.html)
|
||||
- [Alfresco Full Text Search Reference](https://docs.alfresco.com/5.2/concepts/rm-searchsyntax-intro.html)
|
||||
- [ACS API Explorer](https://api-explorer.alfresco.com/api-explorer/#!/search/search)
|
||||
|
||||
### Configuration
|
||||
|
||||
You can configure the component using the `search` entry in the `app.config.json` file.
|
||||
A typical configuration is shown below:
|
||||
|
||||
```json
|
||||
{
|
||||
"search": {
|
||||
"sorting": {
|
||||
"options": [
|
||||
{ "key": "name", "label": "Name", "type": "FIELD", "field": "cm:name", "ascending": true },
|
||||
{ "key": "content.sizeInBytes", "label": "Size", "type": "FIELD", "field": "content.size", "ascending": true },
|
||||
{ "key": "description", "label": "Description", "type": "FIELD", "field": "cm:description", "ascending": true }
|
||||
],
|
||||
"defaults": [
|
||||
{ "key": "name", "type": "FIELD", "field": "cm:name", "ascending": true }
|
||||
]
|
||||
},
|
||||
"filterQueries": [
|
||||
{ "query": "TYPE:'cm:folder' OR TYPE:'cm:content'" },
|
||||
{ "query": "NOT cm:creator:System" }
|
||||
],
|
||||
"facetFields": {
|
||||
"expanded": true,
|
||||
"fields": [
|
||||
{ "field": "content.mimetype", "mincount": 1, "label": "Type" },
|
||||
{ "field": "content.size", "mincount": 1, "label": "File Size" },
|
||||
{ "field": "creator", "mincount": 1, "label": "Creator" },
|
||||
{ "field": "modifier", "mincount": 1, "label": "Modifier" }
|
||||
]
|
||||
},
|
||||
"facetQueries": {
|
||||
"label": "My facet queries",
|
||||
"pageSize": 4,
|
||||
"queries": [
|
||||
{ "query": "created:2018", "label": "Created This Year" },
|
||||
{ "query": "content.mimetype:text/html", "label": "Type: HTML" },
|
||||
{ "query": "content.size:[0 TO 10240]", "label": "Size: xtra small"},
|
||||
{ "query": "content.size:[10240 TO 102400]", "label": "Size: small"},
|
||||
{ "query": "content.size:[102400 TO 1048576]", "label": "Size: medium" },
|
||||
{ "query": "content.size:[1048576 TO 16777216]", "label": "Size: large" },
|
||||
{ "query": "content.size:[16777216 TO 134217728]", "label": "Size: xtra large" },
|
||||
{ "query": "content.size:[134217728 TO MAX]", "label": "Size: XX large" }
|
||||
]
|
||||
},
|
||||
"categories": [
|
||||
{
|
||||
"id": "queryName",
|
||||
"name": "Name",
|
||||
"enabled": true,
|
||||
"expanded": true,
|
||||
"component": {
|
||||
"selector": "adf-search-text",
|
||||
"settings": {
|
||||
"pattern": "cm:name:'(.*?)'",
|
||||
"field": "cm:name",
|
||||
"placeholder": "Enter the name"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The
|
||||
[schema.json](https://github.com/Alfresco/alfresco-ng2-components/blob/master/lib/core/app-config/schema.json)
|
||||
file for the app config has further details about available settings, values and formats for
|
||||
the configuration options.
|
||||
|
||||
### Extra fields and filter queries
|
||||
|
||||
You can explicitly define the `include` section for the query from within the application configuration file. This array is a list of extra data fields to be added to the search
|
||||
results:
|
||||
|
||||
```json
|
||||
{
|
||||
"search": {
|
||||
"include": ["path", "allowableOperations"]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
You can choose to filter facet field results using 'contains' instead of 'starts with', by using the `filterWithContains` boolean (default is `false`):
|
||||
|
||||
```json
|
||||
{
|
||||
"search": {
|
||||
"filterWithContains": true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
You can choose to display a reset button by setting the 'resetButton' value to true.
|
||||
This 'clean up' button would make it easier for the final user to remove all bucket selections and all search filtering.
|
||||
|
||||
```json
|
||||
{
|
||||
"search": {
|
||||
"resetButton": true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
You can also provide a set of queries that are always executed alongside the user-defined
|
||||
settings:
|
||||
|
||||
```json
|
||||
{
|
||||
"search": {
|
||||
"filterQueries": [
|
||||
{ "query": "TYPE:'cm:folder' OR TYPE:'cm:content'" },
|
||||
{ "query": "NOT cm:creator:System" }
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Note that the entries of the `filterQueries` array are joined using the `AND` operator.
|
||||
|
||||
### Sorting
|
||||
|
||||
The Sorting configuration section consists of two blocks:
|
||||
|
||||
- `options`: a list of items that users can select from
|
||||
- `defaults`: predefined sorting to use by default
|
||||
|
||||
```json
|
||||
{
|
||||
"search": {
|
||||
"sorting": {
|
||||
"options": [
|
||||
{ "key": "name", "label": "Name", "type": "FIELD", "field": "cm:name", "ascending": true },
|
||||
{ "key": "content.sizeInBytes", "label": "Size", "type": "FIELD", "field": "content.size", "ascending": true },
|
||||
{ "key": "description", "label": "Description", "type": "FIELD", "field": "cm:description", "ascending": true }
|
||||
],
|
||||
"defaults": [
|
||||
{ "key": "name", "type": "FIELD", "field": "cm:name", "ascending": true }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The properties of the `options` objects are as follows:
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| key | string | Unique key to identify the entry. This can also be used to map [`DataColumn`](../../../lib/core/datatable/data/data-column.model.ts) instances. |
|
||||
| label | string | Display text, which can also be an [i18n resource key](../../user-guide/internationalization.md). |
|
||||
| type | string | This specifies how to order the results. It can be based on a field, based on the position of the document in the index, or by score/relevance. |
|
||||
| field | string | The name of the field. |
|
||||
| ascending | boolean | The sorting order defined as `true` for ascending order and `false` for descending order |
|
||||
|
||||
See the [Sort](https://docs.alfresco.com/5.2/concepts/search-api-sort.html)
|
||||
element in the [ACS Search API](https://docs.alfresco.com/5.2/concepts/search-api.html)
|
||||
for further details.
|
||||
|
||||
### Categories and widgets
|
||||
|
||||
The Search Settings component and Query Builder require a `categories` section in the
|
||||
configuration.
|
||||
|
||||
Categories are used to configure the UI widgets that let the user edit the search query
|
||||
at runtime. Every category is represented by a single Angular component, which can be
|
||||
either a simple one or a composite one.
|
||||
|
||||
```ts
|
||||
export interface SearchCategory {
|
||||
id: string;
|
||||
name: string;
|
||||
enabled: boolean;
|
||||
expanded: boolean;
|
||||
component: {
|
||||
selector: string;
|
||||
settings: SearchWidgetSettings;
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
The interface above also describes entries in the `search.query.categories` section for the `app.config.json` file.
|
||||
|
||||
|
||||
|
||||
> **Note:** you must provide at least one category field in order to execute the query,
|
||||
> so that filters and selected facets are applied.
|
||||
|
||||
The Search Filter supports a number of widgets out of the box, each implemented
|
||||
by an ADF component. The `selector` property specifies which widget is used for
|
||||
a category:
|
||||
|
||||
| Widget name | Selector | Description |
|
||||
| ----------- | -------- | ----------- |
|
||||
| [Check List](search-check-list.component.md) | `check-list` | Toggles individual query fragments for the search |
|
||||
| [Date Range](search-date-range.component.md) | `date-range` | Specifies a range f dates that a field may contain |
|
||||
| [Number Range](search-number-range.component.md) | `number-range` | Specifies a range of numeric values that a field may contain |
|
||||
| [Radio List](search-radio.component.md) | `radio` | Selects one query fragment from a list of options |
|
||||
| [Slider](search-slider.component.md) | `slider` | Selects a single numeric value in a given range that a field may contain |
|
||||
| [Text](search-text.component.md) | `text` | Specifies a text value that a field may contain |
|
||||
|
||||
See the individual [Search Widget](../interfaces/search-widget.interface.md) pages for full details of their usage and settings.
|
||||
|
||||
You can also implement your own custom search widgets. See the [Search Widget Interface](../interfaces/search-widget.interface.md) interface
|
||||
page for full details of how to do this.
|
||||
|
||||
#### Widget settings
|
||||
|
||||
Each type of widget has its own settings.
|
||||
For example Number editors may parse minimum and maximum values, while Text editors can support value formats or length constraints.
|
||||
|
||||
You can use `component.settings` to pass any information to a widget using the
|
||||
[`SearchWidgetSettings`](../../../lib/content-services/search/search-widget-settings.interface.ts) interface:
|
||||
|
||||
```ts
|
||||
export interface SearchWidgetSettings {
|
||||
field: string;
|
||||
[indexer: string]: any;
|
||||
}
|
||||
```
|
||||
|
||||
### Facet Fields
|
||||
|
||||
```json
|
||||
{
|
||||
"search": {
|
||||
"facetFields": {
|
||||
"expanded": true,
|
||||
"fields": [
|
||||
{ "field": "content.mimetype", "mincount": 1, "label": "Type" },
|
||||
{ "field": "content.size", "mincount": 1, "label": "File Size" },
|
||||
{ "field": "creator", "mincount": 1, "label": "Creator" },
|
||||
{ "field": "modifier", "mincount": 1, "label": "Modifier" },
|
||||
{ "field": "created", "mincount": 1, "label": "Created" }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Every field declared within the `facetFields` group is presented by a separate collapsible category at runtime.
|
||||
|
||||
By default, users see only the top 5 entries.
|
||||
If there are more than 5 entries, a button to show more items is displayed to let the user move to
|
||||
the next block of results.
|
||||
|
||||
|
||||
|
||||
#### FacetField Properties
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| ---- | ---- | ------- | ----------- |
|
||||
| field | string | | Specifies the facet field. |
|
||||
| mincount | number | 1 | Specifies the minimum count required for a facet field to be included in the response. The default value is 1. |
|
||||
| label | string | | Specifies the label to include in place of the facet field. |
|
||||
| prefix | string | | Restricts the possible constraints to only indexed values with a specified prefix. |
|
||||
| limit | number | | Maximum number of results |
|
||||
| pageSize | number | 5 | Display page size |
|
||||
| offset | number | | Offset position |
|
||||
|
||||
### Facet Queries
|
||||
|
||||
These provide custom categories based on admin-defined facet queries.
|
||||
|
||||
```json
|
||||
{
|
||||
"search": {
|
||||
"facetQueries": {
|
||||
"label": "Facet queries",
|
||||
"pageSize": 5,
|
||||
"expanded": true,
|
||||
"queries": [
|
||||
{ "query": "created:2018", "label": "Created This Year" },
|
||||
{ "query": "content.mimetype:text/html", "label": "Type: HTML" },
|
||||
{ "query": "content.size:[0 TO 10240]", "label": "Size: xtra small"},
|
||||
{ "query": "content.size:[10240 TO 102400]", "label": "Size: small"},
|
||||
{ "query": "content.size:[102400 TO 1048576]", "label": "Size: medium" },
|
||||
{ "query": "content.size:[1048576 TO 16777216]", "label": "Size: large" },
|
||||
{ "query": "content.size:[16777216 TO 134217728]", "label": "Size: xtra large" },
|
||||
{ "query": "content.size:[134217728 TO MAX]", "label": "Size: XX large" }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
By default, the queries declared in the `facetQueries` are collected into a single collapsible category.
|
||||
The `mincount` property allows setting the minimum count required for a facet field to be displayed. By default, only the queries that have 1 or more response entries are displayed at runtime.
|
||||
The component provides a `Show more` button to display more items if the number of items
|
||||
exceeds the `pageSize` value.
|
||||
|
||||
You can also provide a custom `label` (or i18n resource key) for the default resulting collapsible category.
|
||||
If you need to display more resulting collapsible categories, you can group different facet queries under custom labels by using the `group` property on those facet queries:
|
||||
|
||||
```json
|
||||
{
|
||||
"search": {
|
||||
"facetQueries": {
|
||||
"label": "Facet queries",
|
||||
"pageSize": 5,
|
||||
"expanded": true,
|
||||
"mincount": 0,
|
||||
"queries": [
|
||||
{ "query": "created:2018", "label": "Created This Year" },
|
||||
{ "query": "modifier:admin", "label": "Admin modifier" },
|
||||
{ "query": "content.mimetype:text/html", "label": "Type: HTML", "group":"Type facet queries" },
|
||||
{ "query": "content.mimetype:image/png", "label": "Type: PNG", "group":"Type facet queries" },
|
||||
{ "query": "content.size:[0 TO 10240]", "label": "Size: xtra small", "group":"Size facet queries"},
|
||||
{ "query": "content.size:[10240 TO 102400]", "label": "Size: small", "group":"Size facet queries"},
|
||||
{ "query": "content.size:[102400 TO 1048576]", "label": "Size: medium", "group":"Size facet queries" },
|
||||
{ "query": "content.size:[1048576 TO 16777216]", "label": "Size: large", "group":"Size facet queries" },
|
||||
{ "query": "content.size:[16777216 TO 134217728]", "label": "Size: xtra large", "group":"Size facet queries" },
|
||||
{ "query": "content.size:[134217728 TO MAX]", "label": "Size: XX large", "group":"Size facet queries" }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
This will result in the following display of the grouped facet queries:
|
||||
|
||||
|
||||
|
||||
The `pageSize` property allows you to define the number of results to display.
|
||||
Users will see `Show more` or `Show less` buttons as appropriate for the result set.
|
||||
The default page size of 5 will be used if you set the value to 0 or omit it entirely.
|
||||
|
||||
|
||||
|
||||
### Facet Intervals
|
||||
|
||||
These provide custom categories based on admin defined ranges inside `intervals`. What is wanted for every interval can be specified exactly in the config file, and having overlapping ranges could also be possible.
|
||||
|
||||
#### FacetIntervals Properties
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| intervals | array | Specifies the fields to facet by interval. |
|
||||
| expanded | boolean | Toggles expanded state of the facet intervals. |
|
||||
|
||||
Note: `sets` parameter from Search API (Sets the intervals for all fields) is not yet supported.
|
||||
|
||||
```json
|
||||
{
|
||||
"search": {
|
||||
"facetIntervals":{
|
||||
"expanded": true,
|
||||
"intervals":[
|
||||
{
|
||||
"label":"TheCreated",
|
||||
"field":"cm:created",
|
||||
"sets":[
|
||||
{ "label":"lastYear", "start":"2017", "end":"2018", "endInclusive":false },
|
||||
{ "label":"currentYear", "start":"NOW/YEAR", "end":"NOW/YEAR+1YEAR" },
|
||||
{ "label":"earlier", "start":"*", "end":"2017", "endInclusive":false }
|
||||
]
|
||||
},
|
||||
{
|
||||
"label":"TheModified",
|
||||
"field":"cm:modified",
|
||||
"sets":[
|
||||
{ "label":"2016", "start":"2017", "end":"2018", "endInclusive":false },
|
||||
{ "label":"currentYear", "start":"NOW/YEAR", "end":"NOW/YEAR+1YEAR" },
|
||||
{ "label":"earlierThan2017", "start":"*", "end":"2017", "endInclusive":false }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
You can specify a value for the `mincount` property inside each `intervals` item to set the minimum count required for a facet interval to be displayed. By default, only the intervals that have 1 or more response entries are displayed at runtime.
|
||||
Check the [schema.json](https://github.com/Alfresco/alfresco-ng2-components/blob/master/lib/core/app-config/schema.json)
|
||||
for more details about what is the structure and the properties of `intervals` that you can set inside the configuration file.
|
||||
|
||||
Each `intervals` item defined is collected into its collapsible category identified uniquely by its `label`. The top code snippet will result in the following display of the facet intervals:
|
||||
|
||||
|
||||
|
||||
## See also
|
||||
|
||||
- [Search Query Builder service](../services/search-query-builder.service.md)
|
||||
- [Search Chip List Component](search-chip-list.component.md)
|
||||
- [Search Sorting Picker Component](search-sorting-picker.component.md)
|
||||
- [Search Widget Interface](../interfaces/search-widget.interface.md)
|
||||
- [Search check list component](search-check-list.component.md)
|
||||
- [Search date range component](search-date-range.component.md)
|
||||
- [Search number range component](search-number-range.component.md)
|
||||
- [Search radio component](search-radio.component.md)
|
||||
- [Search slider component](search-slider.component.md)
|
||||
- [Search text component](search-text.component.md)
|
||||
@@ -0,0 +1,79 @@
|
||||
---
|
||||
Title: Search number range component
|
||||
Added: v2.4.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-06-11
|
||||
---
|
||||
|
||||
# [Search number range component](../../../lib/content-services/search/components/search-number-range/search-number-range.component.ts "Defined in search-number-range.component.ts")
|
||||
|
||||
Implements a number range widget for the [Search Filter component](search-filter.component.md).
|
||||
|
||||
|
||||
|
||||
## Basic usage
|
||||
|
||||
```json
|
||||
{
|
||||
"search": {
|
||||
"categories": [
|
||||
{
|
||||
"id": "contentSizeRange",
|
||||
"name": "Content Size (range)",
|
||||
"enabled": true,
|
||||
"component": {
|
||||
"selector": "number-range",
|
||||
"settings": {
|
||||
"field": "cm:content.size",
|
||||
"format": "[{FROM} TO {TO}]"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Settings
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| field | string | Field to to use |
|
||||
| format | string | Value format. Uses string substitution to allow all sorts of [range queries](https://docs.alfresco.com/5.2/concepts/rm-searchsyntax-ranges.html). |
|
||||
|
||||
## Details
|
||||
|
||||
This component lets the user specify a range between two predefined numbers based on the
|
||||
particular `field`. See the [Search filter component](search-filter.component.md) for full details of how to use widgets
|
||||
in a search query.
|
||||
|
||||
#### Range query format
|
||||
|
||||
See the [Search for ranges](https://docs.alfresco.com/5.2/concepts/rm-searchsyntax-ranges.html) page in the ACS docs for more information about the date range format.
|
||||
|
||||
The `format` setting specifies how the date is displayed textually. Most of the format is
|
||||
displayed as-is but you can use `{FROM}` and `{TO}` markers to interpolate the range limits
|
||||
into the format string:
|
||||
|
||||
```json
|
||||
"settings": {
|
||||
"field": "cm:content.size",
|
||||
"format": "[{FROM} TO {TO}]"
|
||||
}
|
||||
```
|
||||
|
||||
The format above would be displayed at runtime as follows:
|
||||
|
||||
```text
|
||||
cm:content.size:[0 TO 100]
|
||||
```
|
||||
|
||||
## See also
|
||||
|
||||
- [Search filter component](search-filter.component.md)
|
||||
- [Search check list component](search-check-list.component.md)
|
||||
- [Search date range component](search-date-range.component.md)
|
||||
- [Search number range component](search-number-range.component.md)
|
||||
- [Search radio component](search-radio.component.md)
|
||||
- [Search slider component](search-slider.component.md)
|
||||
- [Search text component](search-text.component.md)
|
||||
68
docs/content-services/components/search-radio.component.md
Normal file
68
docs/content-services/components/search-radio.component.md
Normal file
@@ -0,0 +1,68 @@
|
||||
---
|
||||
Title: Search radio component
|
||||
Added: v2.4.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-08-10
|
||||
---
|
||||
|
||||
# [Search radio component](../../../lib/content-services/search/components/search-radio/search-radio.component.ts "Defined in search-radio.component.ts")
|
||||
|
||||
Implements a radio button list widget for the [Search Filter component](search-filter.component.md).
|
||||
|
||||
|
||||
|
||||
## Basic usage
|
||||
|
||||
```json
|
||||
{
|
||||
"search": {
|
||||
"categories": [
|
||||
{
|
||||
"id": "queryType",
|
||||
"name": "Type",
|
||||
"enabled": true,
|
||||
"component": {
|
||||
"selector": "radio",
|
||||
"settings": {
|
||||
"field": null,
|
||||
"pageSize": 5,
|
||||
"options": [
|
||||
{ "name": "None", "value": "" },
|
||||
{ "name": "All", "value": "TYPE:'cm:folder' OR TYPE:'cm:content'" },
|
||||
{ "name": "Folder", "value": "TYPE:'cm:folder'" },
|
||||
{ "name": "Document", "value": "TYPE:'cm:content'" }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Settings
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| options | `array` | Array of objects with `name` and `value` properties. Each object defines a radio button, labelled with `name`, that adds the query fragment in `value` to the query when enabled. |
|
||||
|
||||
## Details
|
||||
|
||||
This component displays a list of radio buttons, each of which toggles a particular
|
||||
query fragment in the search. This behaviour is very similar to that of the
|
||||
[Search check list component](search-check-list.component.md) except only one item at a time can be selected. See the
|
||||
[Search filter component](search-filter.component.md) for full details of how to use the widgets in a search query.
|
||||
|
||||
The component can be set to split a long list of buttons into separate pages
|
||||
using the `pageSize` value as the number of buttons to show per page (default is 5).
|
||||
When there is more than one page, the widget will display "Show more" and "Show less"
|
||||
buttons as appropriate.
|
||||
|
||||
## See also
|
||||
|
||||
- [Search filter component](search-filter.component.md)
|
||||
- [Search check list component](search-check-list.component.md)
|
||||
- [Search date range component](search-date-range.component.md)
|
||||
- [Search number range component](search-number-range.component.md)
|
||||
- [Search slider component](search-slider.component.md)
|
||||
- [Search text component](search-text.component.md)
|
||||
75
docs/content-services/components/search-slider.component.md
Normal file
75
docs/content-services/components/search-slider.component.md
Normal file
@@ -0,0 +1,75 @@
|
||||
---
|
||||
Title: Search slider component
|
||||
Added: v2.4.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-06-11
|
||||
---
|
||||
|
||||
# [Search slider component](../../../lib/content-services/search/components/search-slider/search-slider.component.ts "Defined in search-slider.component.ts")
|
||||
|
||||
Implements a numeric slider widget for the [Search Filter component](search-filter.component.md).
|
||||
|
||||
|
||||
|
||||
## Basic usage
|
||||
|
||||
```json
|
||||
{
|
||||
"search": {
|
||||
"categories": [
|
||||
{
|
||||
"id": "contentSize",
|
||||
"name": "Content Size",
|
||||
"enabled": true,
|
||||
"component": {
|
||||
"selector": "slider",
|
||||
"settings": {
|
||||
"field": "cm:content.size",
|
||||
"min": 0,
|
||||
"max": 18,
|
||||
"step": 1,
|
||||
"thumbLabel": true
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Settings
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| field | string | Field to apply the query fragment to. Required value |
|
||||
| min | number | Minimum numeric value at the left end of the slider |
|
||||
| max | number | Maximum numeric value at the right end of the slider |
|
||||
| step | number | The step between adjacent positions on the slider |
|
||||
| thumbLabel | boolean | Toggles whether the "thumb" of the slider should show the current value |
|
||||
|
||||
## Details
|
||||
|
||||
This component lets the user select from a range between two predefined numbers based on the
|
||||
particular `field`. See the [Search filter component](search-filter.component.md) for full
|
||||
details of how to use widgets in a search query.
|
||||
|
||||
### Resetting the slider value
|
||||
|
||||
The query fragment represented by the slider will not be added to the query until a value is
|
||||
selected by the user. However, once the slider has been moved, there is no way to use it to
|
||||
go back to the initial state (ie, the query fragment will be present regardless of the final
|
||||
value of the slider). This can be a problem in cases where even a zero or minimum value can
|
||||
affect the query.
|
||||
|
||||
To handle this situation, the slider comes with a `Clear` button to reset the value to the
|
||||
initial state. When the user clicks this button, the slider control is set to the `min` value
|
||||
or zero and the corresponsing query fragment is removed from the query.
|
||||
|
||||
## See also
|
||||
|
||||
- [Search filter component](search-filter.component.md)
|
||||
- [Search check list component](search-check-list.component.md)
|
||||
- [Search date range component](search-date-range.component.md)
|
||||
- [Search number range component](search-number-range.component.md)
|
||||
- [Search radio component](search-radio.component.md)
|
||||
- [Search text component](search-text.component.md)
|
||||
@@ -0,0 +1,14 @@
|
||||
---
|
||||
Title: Search Sorting Picker Component
|
||||
Added: v2.3.0
|
||||
Status: Active
|
||||
---
|
||||
|
||||
# [Search Sorting Picker Component](../../../lib/content-services/search/components/search-sorting-picker/search-sorting-picker.component.ts "Defined in search-sorting-picker.component.ts")
|
||||
|
||||
Provides an ability to select one of the predefined sorting definitions for search results:
|
||||
|
||||
```html
|
||||
<adf-search-sorting-picker></adf-search-sorting-picker>
|
||||
<adf-search-filter></adf-search-filter>
|
||||
```
|
||||
60
docs/content-services/components/search-text.component.md
Normal file
60
docs/content-services/components/search-text.component.md
Normal file
@@ -0,0 +1,60 @@
|
||||
---
|
||||
Title: Search text component
|
||||
Added: v2.4.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-06-11
|
||||
---
|
||||
|
||||
# [Search text component](../../../lib/content-services/search/components/search-text/search-text.component.ts "Defined in search-text.component.ts")
|
||||
|
||||
Implements a text input widget for the [Search Filter component](search-filter.component.md).
|
||||
|
||||
|
||||
|
||||
## Basic usage
|
||||
|
||||
```json
|
||||
{
|
||||
"search": {
|
||||
"categories": [
|
||||
{
|
||||
"id": "queryName",
|
||||
"name": "Name",
|
||||
"enabled": true,
|
||||
"expanded": true,
|
||||
"component": {
|
||||
"selector": "text",
|
||||
"settings": {
|
||||
"pattern": "cm:name:'(.*?)'",
|
||||
"field": "cm:name",
|
||||
"placeholder": "Enter the name"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Settings
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| field | string | Field to apply the query fragment to. Required value |
|
||||
| pattern | string | Regular expression pattern to restrict the format of the input text |
|
||||
| placeholder | string | Text displayed in the widget when the input string is empty |
|
||||
|
||||
## Details
|
||||
|
||||
This component lets the user add a text value to search for in the specified
|
||||
`field`. See the [Search filter component](search-filter.component.md) for full
|
||||
details of how to use widgets in a search query.
|
||||
|
||||
## See also
|
||||
|
||||
- [Search filter component](search-filter.component.md)
|
||||
- [Search check list component](search-check-list.component.md)
|
||||
- [Search date range component](search-date-range.component.md)
|
||||
- [Search number range component](search-number-range.component.md)
|
||||
- [Search radio component](search-radio.component.md)
|
||||
- [Search slider component](search-slider.component.md)
|
||||
164
docs/content-services/components/search.component.md
Normal file
164
docs/content-services/components/search.component.md
Normal file
@@ -0,0 +1,164 @@
|
||||
---
|
||||
Title: Search component
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2019-01-16
|
||||
---
|
||||
|
||||
# [Search component](../../../lib/content-services/search/components/search.component.ts "Defined in search.component.ts")
|
||||
|
||||
Searches items for supplied search terms.
|
||||
|
||||
## Contents
|
||||
|
||||
- [Basic usage](#basic-usage)
|
||||
- [Class members](#class-members)
|
||||
- [Properties](#properties)
|
||||
- [Events](#events)
|
||||
- [Details](#details)
|
||||
- [Customise Search Results](#customise-search-results)
|
||||
- [Attach an input field to the search](#attach-an-input-field-to-the-search)
|
||||
- [Custom search configuration](#custom-search-configuration)
|
||||
- [See Also](#see-also)
|
||||
|
||||
## Basic usage
|
||||
|
||||
```html
|
||||
<adf-search
|
||||
[searchTerm]="searchTerm"
|
||||
(resultLoaded)="showSearchResult($event)">
|
||||
</adf-search>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| displayWith | `Function \| null` | 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. |
|
||||
| searchTerm | `string` | "" | Search term to use when executing the search. Updating this value will run a new search and update the results. |
|
||||
| skipResults | `number` | 0 | Number of results to skip from the results pagination. |
|
||||
| classList | `void` | | CSS class for display. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when an error occurs. |
|
||||
| resultLoaded | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodePaging`](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/content-rest-api/docs/NodePaging.md)`>` | Emitted when search results have fully loaded. |
|
||||
|
||||
## Details
|
||||
|
||||
### Customise Search Results
|
||||
|
||||
You can add a custom template to show the search results when once they are loaded:
|
||||
|
||||
<!-- {% raw %} -->
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
<!-- {% endraw %} -->
|
||||
|
||||
The results are provided via the [$implicit variable of angular2](https://angular.io/api/common/NgTemplateOutlet) and can be accessed via the sugar syntax 'let-yourChosenName'. The example above will give results like the following:
|
||||
|
||||
|
||||
|
||||
However, you can use a more complex template if necessary:
|
||||
|
||||
<!-- {% raw %} -->
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
<!-- {% endraw %} -->
|
||||
|
||||
|
||||
|
||||
### Attach an input field to the search
|
||||
|
||||
You can also attach an input field to the [search component](search.component.md) via the `searchAutocomplete` property.
|
||||
Export the search panel instance into a local template variable and bind that variable to the
|
||||
input's `searchAutocomplete` property. The example below demonstrates this with an
|
||||
instance called "search":
|
||||
|
||||
<!-- {% raw %} -->
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
<!-- {% endraw %} -->
|
||||
|
||||
By doing this, you can get the results as the user types into the input text.
|
||||
|
||||
### 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/interfaces/search-configuration.interface.md). The ADF source provides a standard implementation of this
|
||||
interface, [`SearchConfigurationService`](../../core/services/search-configuration.service.md) that you can use as a base to adapt to your needs. See the
|
||||
[Search Configuration interface](../../core/interfaces/search-configuration.interface.md) page for full details of how to
|
||||
customize your search.
|
||||
|
||||
## See Also
|
||||
|
||||
- [Search configuration interface](../../core/interfaces/search-configuration.interface.md)
|
||||
- [Search configuration service](../../core/services/search-configuration.service.md)
|
||||
38
docs/content-services/components/sites-dropdown.component.md
Normal file
38
docs/content-services/components/sites-dropdown.component.md
Normal file
@@ -0,0 +1,38 @@
|
||||
---
|
||||
Title: Sites Dropdown component
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-11-19
|
||||
---
|
||||
|
||||
# [Sites Dropdown component](../../../lib/content-services/site-dropdown/sites-dropdown.component.ts "Defined in sites-dropdown.component.ts")
|
||||
|
||||
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>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| hideMyFiles | `boolean` | false | Hide the "My Files" option. |
|
||||
| placeholder | `string` | | Text or a translation key to act as a placeholder. Default value is the key "DROPDOWN.PLACEHOLDER_LABEL". |
|
||||
| relations | `string` | | Filter for the results of the sites query. Possible values are "members" and "containers". When "members" is used, the site list will be restricted to the sites that the user is a member of. |
|
||||
| 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. |
|
||||
| value | `string` | null | Id of the selected site |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| change | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`SiteEntry`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/SiteEntry.md)`>` | Emitted when the user selects a site. When the default option is selected, an empty model is emitted. |
|
||||
36
docs/content-services/components/tag-actions.component.md
Normal file
36
docs/content-services/components/tag-actions.component.md
Normal file
@@ -0,0 +1,36 @@
|
||||
---
|
||||
Title: Tag Node Actions List component
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-11-19
|
||||
---
|
||||
|
||||
# [Tag Node Actions List component](../../../lib/content-services/tag/tag-actions.component.ts "Defined in tag-actions.component.ts")
|
||||
|
||||
Shows available actions for tags.
|
||||
|
||||
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-tag-node-actions-list
|
||||
[nodeId]="nodeId">
|
||||
</adf-tag-node-actions-list>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| nodeId | `string` | | The identifier of a node. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when an error occurs. |
|
||||
| result | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<Object>` | Emitted when an action is chosen. |
|
||||
| successAdd | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when a tag is added successfully. |
|
||||
24
docs/content-services/components/tag-list.component.md
Normal file
24
docs/content-services/components/tag-list.component.md
Normal file
@@ -0,0 +1,24 @@
|
||||
---
|
||||
Title: Tag List component
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-11-14
|
||||
---
|
||||
|
||||
# [Tag List component](../../../lib/content-services/tag/tag-list.component.ts "Defined in tag-list.component.ts")
|
||||
|
||||
Shows tags for an item.
|
||||
|
||||
|
||||
|
||||
## Class members
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| result | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<Object>` | Emitted when a tag is selected. |
|
||||
|
||||
## See Also
|
||||
|
||||
- [Tag service](../services/tag.service.md)
|
||||
35
docs/content-services/components/tag-node-list.component.md
Normal file
35
docs/content-services/components/tag-node-list.component.md
Normal file
@@ -0,0 +1,35 @@
|
||||
---
|
||||
Title: Tag Node List component
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-11-19
|
||||
---
|
||||
|
||||
# [Tag Node List component](../../../lib/content-services/tag/tag-node-list.component.ts "Defined in tag-node-list.component.ts")
|
||||
|
||||
Shows tags for a node.
|
||||
|
||||
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-tag-node-list
|
||||
[nodeId]="nodeId">
|
||||
</adf-tag-node-list>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| nodeId | `string` | | The identifier of a node. |
|
||||
| showDelete | `boolean` | true | Show delete button |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| results | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<Object>` | Emitted when a tag is selected. |
|
||||
35
docs/content-services/components/tree-view.component.md
Normal file
35
docs/content-services/components/tree-view.component.md
Normal file
@@ -0,0 +1,35 @@
|
||||
---
|
||||
Title: Tree View component
|
||||
Added: v3.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-11-19
|
||||
---
|
||||
|
||||
# [Tree View component](../../../lib/content-services/tree-view/components/tree-view.component.ts "Defined in tree-view.component.ts")
|
||||
|
||||
Shows the folder and subfolders of a node as a tree view.
|
||||
|
||||
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-tree-view-list [nodeId]="'74cd8a96-8a21-47e5-9b3b-a1b3e296787d'"
|
||||
(nodeClicked)="onClick($event)">
|
||||
</adf-tree-view-list>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| nodeId | `string` | | Identifier of the node to display. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when an invalid node id is given. |
|
||||
| nodeClicked | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodeEntry`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeEntry.md)`>` | Emitted when a node in the tree view is clicked. |
|
||||
87
docs/content-services/components/upload-button.component.md
Normal file
87
docs/content-services/components/upload-button.component.md
Normal file
@@ -0,0 +1,87 @@
|
||||
---
|
||||
Title: Upload Button Component
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2019-01-16
|
||||
---
|
||||
|
||||
# [Upload Button Component](../../../lib/content-services/upload/components/upload-button.component.ts "Defined in upload-button.component.ts")
|
||||
|
||||
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>
|
||||
<adf-file-uploading-dialog></adf-file-uploading-dialog>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| acceptedFilesType | `string` | "\*" | Filter for accepted file types. |
|
||||
| comment | `string` | | When you overwrite existing content, you can use the comment field to add a version comment that appears in the version history |
|
||||
| disabled | `boolean` | false | Toggles component disabled state (if there is no node permission checking). |
|
||||
| majorVersion | `boolean` | false | majorVersion boolean field to true to indicate a major version should be created. |
|
||||
| maxFilesSize | `number` | | Sets a limit on the maximum size (in bytes) of a file to be uploaded. Has no effect if undefined. |
|
||||
| multipleFiles | `boolean` | false | Allows/disallows multiple files |
|
||||
| nodeType | `string` | "cm:content" | Custom node type for uploaded file |
|
||||
| rootFolderId | `string` | "-root-" | The ID of the root. Use the nodeId for Content Services or the taskId/processId for Process Services. |
|
||||
| staticTitle | `string` | | Defines the text of the upload button. |
|
||||
| tooltip | `string` | null | Custom tooltip text. |
|
||||
| uploadFolders | `boolean` | false | Allows/disallows upload folders (only for Chrome). |
|
||||
| versioning | `boolean` | false | Toggles versioning. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| beginUpload | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`UploadFilesEvent`](../../../lib/content-services/upload/components/upload-files.event.ts)`>` | Emitted when the upload begins. |
|
||||
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<Object>` | Emitted when an error occurs. |
|
||||
| permissionEvent | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`PermissionModel`](../../../lib/content-services/document-list/models/permissions.model.ts)`>` | Emitted when create permission is missing. |
|
||||
| success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<Object>` | Emitted when the file is uploaded successfully. |
|
||||
|
||||
## Details
|
||||
|
||||
### How to show a notification message for bad permission
|
||||
|
||||
You can show a notification error when the user doesn't have the right permission to perform
|
||||
the action. The component emits a `permissionEvent` when the user does not have delete permission.
|
||||
You can subscribe to this event from your component and use the
|
||||
[Notification service](../../core/services/notification.service.md) 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
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
## See also
|
||||
|
||||
- [Upload Version Button component](upload-version-button.component.md)
|
||||
- [File upload error pipe](../pipes/file-upload-error.pipe.md)
|
||||
143
docs/content-services/components/upload-drag-area.component.md
Normal file
143
docs/content-services/components/upload-drag-area.component.md
Normal file
@@ -0,0 +1,143 @@
|
||||
---
|
||||
Title: Upload Drag Area Component
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2019-01-16
|
||||
---
|
||||
|
||||
# [Upload Drag Area Component](../../../lib/content-services/upload/components/upload-drag-area.component.ts "Defined in upload-drag-area.component.ts")
|
||||
|
||||
Adds a drag and drop area to upload files to ACS.
|
||||
|
||||
## Contents
|
||||
|
||||
- [Basic Usage](#basic-usage)
|
||||
- [Transclusions](#transclusions)
|
||||
- [Class members](#class-members)
|
||||
- [Properties](#properties)
|
||||
- [Events](#events)
|
||||
- [Details](#details)
|
||||
- [Intercepting uploads](#intercepting-uploads)
|
||||
- [Example](#example)
|
||||
- [See also](#see-also)
|
||||
|
||||
## 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>
|
||||
<adf-file-uploading-dialog></adf-file-uploading-dialog>
|
||||
```
|
||||
|
||||
```ts
|
||||
export class AppComponent {
|
||||
|
||||
public onSuccess(event: Object): void {
|
||||
console.log('File uploaded');
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
### [Transclusions](../../user-guide/transclusion.md)
|
||||
|
||||
You can supply any content in the `<adf-upload-drag-area>` to display
|
||||
as the drag/drop target:
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| acceptedFilesType | `string` | "\*" | Filter for accepted file types. |
|
||||
| comment | `string` | | When you overwrite existing content, you can use the comment field to add a version comment that appears in the version history |
|
||||
| disabled | `boolean` | false | Toggles component disabled state (if there is no node permission checking). |
|
||||
| majorVersion | `boolean` | false | majorVersion boolean field to true to indicate a major version should be created. |
|
||||
| maxFilesSize | `number` | | Sets a limit on the maximum size (in bytes) of a file to be uploaded. Has no effect if undefined. |
|
||||
| nodeType | `string` | "cm:content" | Custom node type for uploaded file |
|
||||
| rootFolderId | `string` | "-root-" | The ID of the root. Use the nodeId for Content Services or the taskId/processId for Process Services. |
|
||||
| versioning | `boolean` | false | Toggles versioning. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| beginUpload | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`UploadFilesEvent`](../../../lib/content-services/upload/components/upload-files.event.ts)`>` | Emitted when the upload begins. |
|
||||
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<Object>` | Emitted when an error occurs. |
|
||||
| success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<Object>` | Emitted when the file is uploaded successfully. |
|
||||
|
||||
## Details
|
||||
|
||||
### Intercepting uploads
|
||||
|
||||
You can intercept the upload process using the `beginUpload` event.
|
||||
|
||||
The event has a type of [`UploadFilesEvent`](../../../lib/content-services/upload/components/upload-files.event.ts) and provides the following APIs:
|
||||
|
||||
- **files**: accesses the [`FileInfo`](../../../lib/core/utils/file-utils.ts) objects that are prepared for the upload
|
||||
- **pauseUpload**: pauses the upload and performs additional tasks, like showing the confirmation dialog
|
||||
- **resumeUpload**: resumes the upload process
|
||||
|
||||
### Example
|
||||
|
||||
Wire the `beginUpload` event at the template level:
|
||||
|
||||
```html
|
||||
<adf-upload-drag-area (beginUpload)="onBeginUpload($event)" ...>
|
||||
...
|
||||
</adf-upload-drag-area>
|
||||
```
|
||||
|
||||
Create the `onBeginUpload` handler that invokes a confirmation dialog:
|
||||
|
||||
```ts
|
||||
import { UploadFilesEvent, ConfirmDialogComponent } from '@alfresco/adf-content-services';
|
||||
|
||||
@Component({...})
|
||||
export class MyComponent {
|
||||
|
||||
onBeginUpload(event: UploadFilesEvent) {
|
||||
const files = event.files || [];
|
||||
|
||||
if (files.length > 1) {
|
||||
event.pauseUpload();
|
||||
|
||||
const dialogRef = this.dialog.open(ConfirmDialogComponent, {
|
||||
data: {
|
||||
title: 'Upload',
|
||||
message: `Are you sure you want to upload ${files.length} file(s)?`
|
||||
},
|
||||
minWidth: '250px'
|
||||
});
|
||||
|
||||
dialogRef.afterClosed().subscribe(result => {
|
||||
if (result === true) {
|
||||
event.resumeUpload();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
The example above shows a confirmation dialog every time a user uploads more than 1 file.
|
||||
This could be either a selection of 2 or more files, or a folder with multiple entries.
|
||||
|
||||
## See also
|
||||
|
||||
- [File uploading dialog component](file-uploading-dialog.component.md)
|
||||
- [Upload button component](upload-button.component.md)
|
||||
- [File upload error pipe](../pipes/file-upload-error.pipe.md)
|
||||
@@ -0,0 +1,66 @@
|
||||
---
|
||||
Title: Upload Version Button Component (Workaround)
|
||||
Added: v2.3.0
|
||||
Status: Experimental
|
||||
Last reviewed: 2018-03-23
|
||||
---
|
||||
|
||||
# [Upload Version Button Component (Workaround)](../../../lib/content-services/upload/components/upload-version-button.component.ts "Defined in upload-version-button.component.ts")
|
||||
|
||||
Activates a file version upload.
|
||||
|
||||
Until further backend API improvements are implemented, this component is meant to be used
|
||||
to enrich the features and decrease the restrictions currently applied to node version uploading.
|
||||
|
||||
## Basic usage
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| acceptedFilesType | `string` | "\*" | Filter for accepted file types. |
|
||||
| comment | `string` | | When you overwrite existing content, you can use the comment field to add a version comment that appears in the version history |
|
||||
| disabled | `boolean` | false | Toggles component disabled state (if there is no node permission checking). |
|
||||
| majorVersion | `boolean` | false | majorVersion boolean field to true to indicate a major version should be created. |
|
||||
| maxFilesSize | `number` | | Sets a limit on the maximum size (in bytes) of a file to be uploaded. Has no effect if undefined. |
|
||||
| multipleFiles | `boolean` | false | Allows/disallows multiple files |
|
||||
| node | [`Node`](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/content-rest-api/docs/Node.md) | | (**Required**) The node to be versioned. |
|
||||
| nodeType | `string` | "cm:content" | Custom node type for uploaded file |
|
||||
| rootFolderId | `string` | "-root-" | The ID of the root. Use the nodeId for Content Services or the taskId/processId for Process Services. |
|
||||
| staticTitle | `string` | | Defines the text of the upload button. |
|
||||
| tooltip | `string` | null | Custom tooltip text. |
|
||||
| uploadFolders | `boolean` | false | Allows/disallows upload folders (only for Chrome). |
|
||||
| versioning | `boolean` | false | Toggles versioning. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| beginUpload | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`UploadFilesEvent`](../../../lib/content-services/upload/components/upload-files.event.ts)`>` | Emitted when the upload begins. |
|
||||
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<Object>` | Emitted when an error occurs. |
|
||||
| permissionEvent | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`PermissionModel`](../../../lib/content-services/document-list/models/permissions.model.ts)`>` | Emitted when create permission is missing. |
|
||||
| success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<Object>` | Emitted when the file is uploaded successfully. |
|
||||
|
||||
## Details
|
||||
|
||||
This component extends the [Upload Button component](upload-button.component.md). The
|
||||
properties and events are the same except for the `node` property that specifies the node
|
||||
to be versioned (this is a _required_ input parameter). However, some properties don't make
|
||||
sense when applied to the [Upload Version Button component](upload-version-button.component.md) so they are simply ignored.
|
||||
|
||||
## See also
|
||||
|
||||
- [Upload Button component](upload-button.component.md)
|
||||
49
docs/content-services/components/version-list.component.md
Normal file
49
docs/content-services/components/version-list.component.md
Normal file
@@ -0,0 +1,49 @@
|
||||
---
|
||||
Title: Version List component
|
||||
Added: v2.0.0
|
||||
Status: Experimental
|
||||
Last reviewed: 2019-01-16
|
||||
---
|
||||
|
||||
# [Version List component](../../../lib/content-services/version-manager/version-list.component.ts "Defined in version-list.component.ts")
|
||||
|
||||
Displays the version history of a node in a [Version Manager component](version-manager.component.md).
|
||||
|
||||
### Basic Usage
|
||||
|
||||
```html
|
||||
<adf-version-list [node]="myNode"></adf-version-list>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| allowDownload | `boolean` | true | Enable/disable downloading a version of the current node. |
|
||||
| node | [`Node`](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/content-rest-api/docs/Node.md) | | The target node. |
|
||||
| showActions | `boolean` | true | Toggles showing/hiding of version actions |
|
||||
| showComments | `boolean` | true | Toggles showing/hiding of comments |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| deleted | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`Node`](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/content-rest-api/docs/Node.md)`>` | Emitted when a version is deleted |
|
||||
| restored | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`Node`](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/content-rest-api/docs/Node.md)`>` | Emitted when a version is restored |
|
||||
|
||||
## Details
|
||||
|
||||
This component is used by the [Version Manager component](version-manager.component.md) to
|
||||
load and displays the version history of a node.
|
||||
|
||||
If you want show readonly version list you set this component with showActions false:
|
||||
|
||||
```html
|
||||
<adf-version-list [node]="myNode" [showActions]="false" ></adf-version-list>
|
||||
```
|
||||
|
||||
## See also
|
||||
|
||||
- [Version manager component](version-manager.component.md)
|
||||
@@ -0,0 +1,56 @@
|
||||
---
|
||||
Title: Version Manager Component
|
||||
Added: v2.0.0
|
||||
Status: Experimental
|
||||
Last reviewed: 2019-01-16
|
||||
---
|
||||
|
||||
# [Version Manager Component](../../../lib/content-services/version-manager/version-manager.component.ts "Defined in version-manager.component.ts")
|
||||
|
||||
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]="aNode"
|
||||
(uploadSuccess)="customMethod($event)"
|
||||
(uploadError)="customMethod2($event)">
|
||||
</adf-version-manager>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| allowDownload | `boolean` | true | Enable/disable downloading a version of the current node. |
|
||||
| node | [`Node`](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/content-rest-api/docs/Node.md) | | Target node to manage version history. |
|
||||
| showComments | `boolean` | true | Toggles showing/hiding of comments. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| uploadError | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`Node`](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/content-rest-api/docs/Node.md)`>` | Emitted when an error occurs during upload. |
|
||||
| uploadSuccess | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`Node`](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/content-rest-api/docs/Node.md)`>` | Emitted when a file is uploaded successfully. |
|
||||
|
||||
## 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)
|
||||
185
docs/content-services/components/webscript.component.md
Normal file
185
docs/content-services/components/webscript.component.md
Normal file
@@ -0,0 +1,185 @@
|
||||
---
|
||||
Title: Webscript component
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-11-14
|
||||
---
|
||||
|
||||
# [Webscript component](../../../lib/content-services/webscript/webscript.component.ts "Defined in webscript.component.ts")
|
||||
|
||||
Provides access to Webscript features.
|
||||
|
||||
## Contents
|
||||
|
||||
- [Basic usage](#basic-usage)
|
||||
- [Class members](#class-members)
|
||||
- [Properties](#properties)
|
||||
- [Events](#events)
|
||||
- [Details](#details)
|
||||
- [Webscript View HTML example](#webscript-view-html-example)
|
||||
- [Webscript View DATATABLE example](#webscript-view-datatable-example)
|
||||
- [Webscript View JSON example](#webscript-view-json-example)
|
||||
|
||||
## 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';
|
||||
}
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| contentType | `string` | "TEXT" | Content type to interpret the data received from the webscript. Can be "JSON" , "HTML" , "DATATABLE" or "TEXT" |
|
||||
| contextRoot | `string` | "alfresco" | Path where the application is deployed |
|
||||
| scriptArgs | `any` | | Arguments to pass to the webscript. |
|
||||
| scriptPath | `string` | | (required) Path to the webscript (as defined by webscript). |
|
||||
| servicePath | `string` | "service" | Path that the webscript service is mapped to. |
|
||||
| showData | `boolean` | true | Toggles whether to show or hide the data. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<Object>` | 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](webscript.component.md) 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](webscript.component.md) 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
|
||||
[datatable component](../../core/components/datatable.component.md)
|
||||
you have to return the data structure below (subdivided into data and
|
||||
schema) from the GET method of the webscript:
|
||||
|
||||
```ts
|
||||
data: [],
|
||||
schema: []
|
||||
```
|
||||
|
||||
Here 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
|
||||
}]
|
||||
```
|
||||
|
||||
Alternatively, 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'}
|
||||
]]
|
||||
```
|
||||
|
||||
This will render the following table:
|
||||
|
||||
|
||||
|
||||
### Webscript View JSON example
|
||||
|
||||
This sample demonstrates how to implement a [Webscript component](webscript.component.md) that renders the JSON contents that come from a webscript.
|
||||
This sample webscript resides 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('Your webscript data is here' + data);
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user