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

[ADF-2463] Moved doc files into subfolders (#3080)

Browse Source
This commit is contained in:
Andy Stark
2018-03-14 15:38:55 +00:00
committed by Eugenio Romano
parent 2889f6dcac
commit 86cc219bc4
48 changed files with 206 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/core/data-column.component.md
View File

@@ -156,7 +156,7 @@ In the Example below we will prepend `Hi!` to each file and folder name in the l
</data-column>
```
In the Example below we will integrate the [adf-tag-node-list](../tag-node-list.component.md) component
In the Example below we will integrate the [adf-tag-node-list](../content-services/tag-node-list.component.md) component
with the document list.
```html
@@ -276,7 +276,7 @@ Now you can declare columns and assign `desktop-only` class where needed:
## See also
- [Document list component](../document-list.component.md)
- [Document list component](../content-services/document-list.component.md)
- [Datatable component](../datatable.component.md)
- [Task list component](../task-list.component.md)
<!-- seealso end -->

6
docs/core/deleted-nodes-api.service.md
View File

@@ -15,12 +15,12 @@ Gets a list of Content Services nodes currently in the trash.
## Details
The `getDeletedNodes` method returns a NodePaging object that lists
the items in the trash (see [Document Library model](../document-library.model.md) for
the items in the trash (see [Document Library model](../content-services/document-library.model.md) for
more information about this class). The format of the `options` parameter is
described in the [getDeletedNodes](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodesApi.md#getDeletedNodes)
page of the Alfresco JS API docs.
## See also
- [Nodes api service](../nodes-api.service.md)
- [Node service](../node.service.md)
- [Nodes api service](nodes-api.service.md)
- [Node service](node.service.md)

80
docs/core/file-draggable.directive.md Normal file
View File

@@ -0,0 +1,80 @@
---
Added: v2.0.0
Status: Active
---
# File Draggable directive
Provide drag-and-drop features for an element such as a `div`.
## Basic Usage
```html
<div [file-draggable]="true" id="DragAndDropBorder" class="drag-and-drop-border"
(filesDropped)="onFilesDropped($event)"
(filesEntityDropped)="onFilesEntityDropped($event)"
(folderEntityDropped)="onFolderEntityDropped($event)"
dropzone="" webkitdropzone="*" #dragAndDropArea>
<ng-content></ng-content>
Drag and Drop files here!
</div>
```
Some sample CSS to show the drag and drop area:
```css
.drag-and-drop-border {
vertical-align: middle;
text-align: center;
border: double;
background-color: lightblue;
width: 400px;
height: 100px;
}
```
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| enabled | `boolean` | `true` | Enables/disables drag-and-drop functionality. |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| filesDropped | `EventEmitter<File[]>` | Emitted when one or more files are dragged and dropped onto the draggable element. |
| filesEntityDropped | `EventEmitter<any>` | Emitted when one or more files are dragged and dropped onto the draggable element. |
| folderEntityDropped | `EventEmitter<any>` | Emitted when a directory is dragged and dropped onto the draggable element. |
## Details
Typically you would use the Upload Drag Area component instead of this directive.
### Event handler implementations
```ts
export class SomeComponent implements OnInit {
onFilesDropped(files: File[]): void {
if (files.length) {
// Use for example the uploadService to upload files to ACS
console.log('# of files dropped: ', files.length);
}
}
onFilesEntityDropped(item: any): void {
// Use for example the uploadService to upload files to ACS
console.log('# of files dropped: ', item);
}
onFolderEntityDropped(folder: any): void {
if (folder.isDirectory) {
// Use for example the uploadService to upload folder content to ACS
console.log('Folder dropped: ', folder);
}
}
```
## See also
- [Upload Drag Area component](../content-services/upload-drag-area.component.md)

125
docs/core/node.service.md Normal file
View File

@@ -0,0 +1,125 @@
---
Added: v2.0.0
Status: Active
---
# Node Service
Gets Alfresco Repository node metadata and creates nodes with metadata.
This service cannot be used to create nodes with content.
## Importing
```ts
import { NodeService } from '@alfresco/adf-core';
export class SomePageComponent implements OnInit {
constructor(private nodeService: NodeService) {
}
```
## Methods
#### getNodeMetadata(nodeId: string): Observable`<NodeMetadata>`
Get the metadata and type for passed in node ID (e.g. 3062d73b-fe47-4040-89d2-79efae63869c):
```ts
// Get the node reference from somewhere...
const nodeId = '3062d73b-fe47-4040-89d2-79efae63869c';
this.nodeService2.getNodeMetadata(nodeId).subscribe(data => {
const nodeMetadata = data.metadata;
const nodeType = data.nodeType;
console.log('nodeMetadata', nodeMetadata);
console.log('nodeType', nodeType);
}, error => {
console.log('Error: ', error);
});
```
The metadata response doesn't include the `cm:auditable` properties (i.e. created, creator, modified, modifier, last access)
or the name of the node (i.e. `cm:name`).
The `metadata` response looks like in this example:
author: "Martin"
description: "Installation guide for Alfresco 3.3 on Linux"
lastThumbnailModification: "doclib:1505900632400"
title: "Install 3.3 Linux"
versionLabel: "1.0"
versionType: "MAJOR"
Note that the properties are missing namespace prefix. The `nodeType` response will be returned with namespace prefix,
such as `cm:content`.
Executing this method on a folder node returns no metadata, just the type.
#### createNode(name: string, nodeType: string, properties: any, path: string): Observable`<any>`
Creates a node in the Alfresco Repository with passed in `name`, `nodeType`, and metadata `properties`.
It will be created in the folder `path` that is passed in.
```ts
const nodePath = '/Guest Home';
const nodeName = 'someFolder';
const nodeType = 'cm:folder';
const properties = {
'cm:title': 'Some title',
'cm:description': 'Some description'
};
this.nodeService2.createNode(nodeName, nodeType, properties, nodePath).subscribe(nodeInfo => {
console.log('New Node info: ', nodeInfo);
}, error => {
console.log('Error: ', error);
});
```
Note that the `path` property should not include the **/Company Home** bit.
The response includes all metadata about the new node:
entry:
aspectNames: (2) ["cm:titled", "cm:auditable"]
createdAt: Mon Nov 06 2017 13:04:49 GMT+0000 (GMT) {}
createdByUser: {id: "admin@app.activiti.com", displayName: "ADF User"}
id: "1ab71bb1-d67f-4147-95f6-b5801830ca08"
isFile: false
isFolder: true
modifiedAt: Mon Nov 06 2017 13:04:49 GMT+0000 (GMT) {}
modifiedByUser: {id: "admin@app.activiti.com", displayName: "ADF User"}
name: "someFolder"
nodeType: "cm:folder"
parentId: "a29b5fe3-81f6-46a7-9bed-6a53620acb32"
properties: {cm:title: "Some title", cm:description: "Some description"}
#### createNodeMetadata(nodeType: string, nameSpace: any, data: any, path: string, name?: string): Observable`<any>`
This is a convenience method if your property list is missing namespace prefix for property names.
The namespace prefix can then be supplied separately and this method will prepend it automatically.
This method calls the `createNode` method internally:
```ts
const nodePath = '/Guest Home';
const nodeName = 'someOtherFolder';
const nodeType = 'cm:folder';
const propNamespacePrefix = 'cm';
const properties = {
'title': 'Some title',
'description': 'Some description'
};
this.nodeService2.createNodeMetadata(nodeType, propNamespacePrefix, properties, nodePath, nodeName).subscribe(nodeInfo => {
console.log('New Node info: ', nodeInfo);
}, error => {
console.log('Error: ', error);
});
```
See the `createNode` method for information about the response object.
## See also
- [Nodes api service](nodes-api.service.md)
- [Deleted nodes api service](deleted-nodes-api.service.md)

177
docs/core/nodes-api.service.md Normal file
View File

@@ -0,0 +1,177 @@
---
Added: v2.0.0
Status: Active
---
# Nodes Api service
Accesses and manipulates ACS document nodes using their node IDs.
## Methods
- `getNode(nodeId: string, options: any = {}): Observable<MinimalNodeEntryEntity>`
Gets the stored information about a node.
- `nodeId` - ID of the target node
- `options` - Optional parameters supported by JSAPI
- `getNodeChildren(nodeId: string, options: any = {}): Observable<NodePaging>`
Gets the items contained in a folder node.
- `nodeId` - ID of the target node
- `options` - Optional parameters supported by JSAPI
- `createNode(parentNodeId: string, nodeBody: any, options: any = {}): Observable<MinimalNodeEntryEntity>`
Creates a new document node inside a folder.
- `parentNodeId` - ID of the parent folder node
- `nodeBody` - Data for the new node
- `options` - Optional parameters supported by JSAPI
- `createFolder(parentNodeId: string, nodeBody: any, options: any = {}): Observable<MinimalNodeEntryEntity>`
Creates a new folder node inside a parent folder.
- `parentNodeId` - ID of the parent folder node
- `nodeBody` - Data for the new folder
- `options` - Optional parameters supported by JSAPI
- `updateNode(nodeId: string, nodeBody: any, options: any = {}): Observable<MinimalNodeEntryEntity>`
Updates the information about a node.
- `nodeId` - ID of the target node
- `nodeBody` - New data for the node
- `options` - Optional parameters supported by JSAPI
- `deleteNode(nodeId: string, options: any = {}): Observable<void>`
Moves a node to the trashcan.
- `nodeId` - ID of the target node
- `options` - Optional parameters supported by JSAPI
- `restoreNode(nodeId: string): Observable<MinimalNodeEntryEntity>`
Restores a node previously moved to the trashcan.
- `nodeId` - ID of the node to restore
- `handleError(error: any): Observable<any>`
Reports an error.
- `error` - Object representing the error
## Details
Each node (ie, document or folder) in an ACS repository is identified by
its own unique node ID value. The ID is a long string of hex values separated
by dashes, eg:
`53ef6110-ed9c-4739-a520-e7b4336229c0`
The string is convenient for storage, for passing as an
[Angular route parameter](https://angular.io/guide/router)
and other purposes but doesn't enable you to do very much with the node itself.
The Nodes Api Service has methods for getting information about nodes and
managing them within the repository (creating, deleting, etc).
Other lower level interfaces to the ACS nodes API are also available - see the
[Alfresco Api service](../alfresco-api.service.md), the
[Alfresco JS API docs](https://github.com/Alfresco/alfresco-js-api/tree/master/src/alfresco-core-rest-api)
and the
[REST API Explorer](https://api-explorer.alfresco.com/api-explorer/#/nodes)
for more information.
### Getting node information
The `getNode` method gives access to the MinimalNode object that represents the
details of a node:
```ts
interface MinimalNodeEntryEntity extends MinimalNode {
}
interface MinimalNode extends Node {
   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;
}
```
This provides useful information about the node, such as its name, creation and
modification dates, etc. Also, the `id` and `parentId` properties contain the node
ID strings for the current node and its enclosing folder.
Sometimes, a MinimalNode is provided directly, for example, the `folderNode` property
of a [Document List component](../content-services/document-list.component.md) or the data context of a
[Document List row](../content-services/document-list.component.md#underlying-node-object). In these cases,
you might pass the `id` or `parentId` as a [route parameter](https://angular.io/guide/router)
to a page describing the node in full detail. The component receiving the node ID can
use the Nodes Api service to "decode" the ID string into a MinimalNodeEntryEntity:
```ts
import { ActivatedRoute, Router } from '@angular/router';
import { Component, OnInit } from '@angular/core';
import { NodesApiService } from '@alfresco/adf-core';
import { MinimalNodeEntryEntity } from 'alfresco-js-api';
...
export class RepositoryDetailsPageComponent implements OnInit {
 nodeId: string;
 nodeName: string;
 isFile: boolean;
...
 constructor(private router: Router,
             private activatedRoute: ActivatedRoute,
             private nodeService: NodesApiService) {
 }
 ngOnInit() {
   this.nodeId = this.activatedRoute.snapshot.params['node-id'];
   this.nodeService.getNode(this.nodeId).subscribe((entry: MinimalNodeEntryEntity) => {
     const node: MinimalNodeEntryEntity = entry;
     this.nodeName = node.name;
     this.isFile = node.isFile;
...
   });
 }
```
You can supply a number of extra options using the `options` parameter. See the
[getNode](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodesApi.md#getNode)
page in the Alfresco JS API docs for more information.
### Getting folder node contents
The `getNodeChildren` method returns the contents of a folder
as a list of items. See the [Paging section](../content-services/document-library.model.md#paging)
of [Document Library model](../content-services/document-library.model.md) for
more information about the structure of the list. Also, the
[getNodeChildren](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodesApi.md#getNodeChildren)
page in the Alfresco JS API gives more information about the structure of the
`options` parameter.
### Creating and updating nodes
You can use the `createNode` and `createFolder` methods to add new nodes
within a parent folder node, and the `updateNode` method to update an
existing node. See the
[addNode](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodesApi.md#addNode)
and
[updateNode](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodesApi.md#updateNode)
entries in the Alfresco JS API for further information about the available options and
the format of the new node data.
### Deleting and restoring nodes
The Content Services repository maintains a "trashcan" where items are
temporarily held after they have been deleted. This means you can
restore a deleted item if you remove it from the trashcan before it
gets deleted permanently.
By default, the `deleteNode` method moves an item into the trash, where it can
be retrieved using `restoreNode`. However, you can set an option for `deleteNode`
to delete the node immediately if you have the right permissions. See the
[deleteNode](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodesApi.md#deleteNode)
and
[restoreNode](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodesApi.md#restoreNode)
pages in the Alfresco JS API for further details and options. Note that you can also use the
[Deleted Nodes Api service](deleted-nodes-api.service.md) get a list of all items currently in the trashcan.
## See also
- [Document library model](../content-services/document-library.model.md)
- [Deleted nodes api service](deleted-nodes-api.service.md)
- [Document list component](../content-services/document-list.component.md)
- [Node service](node.service.md)

47
docs/core/renditions.service.md Normal file
View File

@@ -0,0 +1,47 @@
---
Added: v2.0.0
Status: Deprecated
---
# Renditions service
Manages prearranged conversions of content to different formats.
## Methods
`isRenditionAvailable(nodeId: string, encoding: string): Observable<boolean>`<br/>
Has the specified rendition been set up for this item?
`isConversionPossible(nodeId: string, encoding: string): Observable<boolean>`<br/>
Is it possible to convert this item to the specified format?
`getRenditionUrl(nodeId: string, encoding: string): string`<br/>
Gets a URL linking to a rendition.
`getRenditionsListByNodeId(nodeId: string): Observable<RenditionPaging>`<br/>
Gets all available renditions for an item.
`convert(nodeId: string, encoding: string, pollingInterval: number = 1000)`<br/>
Performs a format conversion on an item directly.
## Details
**Note:** This service is deprecated from v2.2.0 and may be removed in a future
version of ADF.
ACS allows content items to be converted to other formats for display or delivery.
For example, a raw text file might be converted to HTML to enable better formatting
in a web browser or a PDF might be converted to an equivalent bitmap image. A
*rendition* is a prearranged conversion that is set up for an item for convenient
repeated use. More information about renditions is available in the
[Content Services documentation](https://docs.alfresco.com/5.2/references/dev-extension-points-content-transformer.html).
In the Renditions service methods, the `nodeId` is a string identifying the content
node that the rendition applies to. This can be obtained from
[Document List component](../content-services/document-list.component.md) events and various other places
in the ADF API. The `encoding` identifies the conversion performed by the rendition.
See the
[Renditions API page](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/RenditionsApi.md#createRendition)
in the Alfresco JS API for more information about the
[RenditionPaging](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/RenditionPaging.md)
class and other implementation details.

92
docs/core/search-configuration.interface.md Normal file
View File

@@ -0,0 +1,92 @@
---
Added: v2.1.0
Status: Active
---
# Search Configuration interface
Provides fine control of parameters to a search.
## Methods
`generateQueryBody(searchTerm: string, maxResults: string, skipCount: string): QueryBody`<br/>
Generates a QueryBody object with custom search parameters.
## Details
The interface defines a service that generates a custom
[QueryBody](https://github.com/Alfresco/alfresco-js-api/blob/1.6.0/src/alfresco-search-rest-api/docs/QueryBody.md)
object. This object can then be supplied to a search operation to refine the search parameters.
A standard implementation, the
[Search Configuration service](search-configuration.service.md) is provided in the ADF Core library
source. This works fine in most cases but if you need to, you can implement your own service, as
described below.
### How to use the interface
1. Implement the service class
Create your own service class to implement the SearchConfigurationInterface. This defines the
the `generateQueryBody` method that returns the QueryBody object. See the
[QueryBody](https://github.com/Alfresco/alfresco-js-api/blob/1.6.0/src/alfresco-search-rest-api/docs/QueryBody.md)
page in the Alfresco JS API for further details about the options this object provides.
An example implementation is given below:
```ts
import { QueryBody } from 'alfresco-js-api';
import { SearchConfigurationInterface } from '@alfresco/adf-core';
export class TestSearchConfigurationService implements SearchConfigurationInterface {
constructor() {
}
public generateQueryBody(searchTerm: string, maxResults: string, skipCount: string): QueryBody {
const defaultQueryBody: QueryBody = {
query: {
query: searchTerm ? `${searchTerm}* OR name:${searchTerm}*` : searchTerm
},
include: ['path', 'allowableOperations'],
paging: {
maxItems: maxResults,
skipCount: skipCount
},
filterQueries: [
{ query: "TYPE:'cm:folder'" },
{ query: 'NOT cm:creator:System' }]
};
return defaultQueryBody;
}
}
```
2. Provide your service class to the module
Once you have created your service class, you must inform the component to use it instead
of the default one. This is easily done using the component providers:
```ts
import { SearchService, SearchConfigurationService } from '@alfresco/adf-core';
import { TestSearchConfigurationService } from './search-config-test.service';
@Component({
selector: 'app-search-extended-component',
templateUrl: './search-extended.component.html',
styleUrls: ['./search-extended.component.scss'],
encapsulation: ViewEncapsulation.None,
providers: [
{ provide: SearchConfigurationService, useClass: TestSearchConfigurationService },
SearchService
]
})
```
You also need to add the SearchService as a provider to avoid overriding the module instance. This component will have his own instance of the SearchService that will use the class you have provided
as its configuration.
## See also
- [Search component](../content-services/search.component.md)
- [Search configuration service](search-configuration.service.md)

30
docs/core/search-configuration.service.md Normal file
View File

@@ -0,0 +1,30 @@
---
Added: v2.1.0
Status: Active
---
# Search Configuration service
Provides fine control of parameters to a search.
## Methods
`generateQueryBody(searchTerm: string, maxResults: string, skipCount: string): QueryBody`<br/>
Generates a QueryBody object with custom search parameters.
## Details
The `generateQueryBody` method returns a
[QueryBody](https://github.com/Alfresco/alfresco-js-api/blob/1.6.0/src/alfresco-search-rest-api/docs/QueryBody.md)
object. This configures the search to use `searchTerm` along with `maxResults` and `skipCount`
specified for the paging of the search results.
This service is a standard implementation of the
[Search configuration interface](search-configuration.interface.md) that works well for many
common cases. However, you can also supply your own implementation if you need to. See the
[Search configuration interface](search-configuration.interface.md) page for full details and
example code.
## See also
- [Search component](../content-services/search.component.md)
- [Search configuration interface](search-configuration.interface.md)

456
docs/core/viewer.component.md Normal file
View File

@@ -0,0 +1,456 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-03-07
---
# Viewer component
Displays content from an ACS repository.
See it live: [Viewer Quickstart](https://embed.plnkr.co/iTuG1lFIXfsP95l6bDW6/)
## Contents
- [Basic usage](#basic-usage)
- [Properties](#properties)
- [Events](#events)
- [Keyboard shortcuts](#keyboard-shortcuts)
- [Details](#details)
- [Integrating with the Document List component](#integrating-with-the-document-list-component)
- [Custom file parameters](#custom-file-parameters)
- [Supported file formats](#supported-file-formats)
- [Content Renditions](#content-renditions)
- [Configuring PDF.js library](#configuring-pdfjs-library)
- [Custom toolbar](#custom-toolbar)
- [Custom toolbar buttons](#custom-toolbar-buttons)
- [Custom sidebar](#custom-sidebar)
- [Custom thumbnails](#custom-thumbnails)
- [Custom "Open With" menu](#custom-open-with-menu)
- [Custom "More actions" menu](#custom-more-actions-menu)
- [Extending the Viewer](#extending-the-viewer)
- [See also](#see-also)
## Basic usage
Using with node id:
```html
<adf-viewer
[showViewer]="true"
[overlayMode]="true"
[fileNodeId]="'d367023a-7ebe-4f3a-a7d0-4f27c43f1045'">
</adf-viewer>
```
Using with file url:
```html
<adf-viewer
[overlayMode]="true"
[urlFile]="'filename.pdf'">
</adf-viewer>
```
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| urlFile | `string` | `''` | If you want to load an external file that does not come from ACS you can use this URL to specify where to load the file from. |
| urlFileViewer | `string` | `null` | Viewer to use with the `urlFile` address (`pdf`, `image`, `media`, `text`). Used when `urlFile` has no filename and extension. |
| blobFile | `Blob` | | Loads a Blob File |
| fileNodeId | `string` | `null` | Node Id of the file to load. |
| sharedLinkId | `string` | `null` | Shared link id (to display shared file). |
| overlayMode | `boolean` | `false` | If `true` then show the Viewer as a full page over the current content. Otherwise fit inside the parent div. |
| showViewer | `boolean` | `true` | Hide or show the viewer |
| showToolbar | `boolean` | `true` | Hide or show the toolbar |
| displayName | `string` | | Specifies the name of the file when it is not available from the URL. |
| allowGoBack | `boolean` | `true` | Allows `back` navigation |
| allowDownload | `boolean` | `true` | Toggles downloading. |
| allowPrint | `boolean` | `false` | Toggles printing. |
| allowShare | `boolean` | `false` | Toggles sharing. |
| allowFullScreen | `boolean` | `true` | Toggles the 'Full Screen' feature. |
| allowNavigate | `boolean` | `false` | Toggles before/next navigation. You can use the arrow buttons to navigate between documents in the collection. |
| canNavigateBefore | `boolean` | `true` | Toggles the "before" ("&lt;") button. Requires `allowNavigate` to be enabled. |
| canNavigateNext | `boolean` | `true` | Toggles the next (">") button. Requires `allowNavigate` to be enabled. |
| allowSidebar | `boolean` | `false` | Toggles the sidebar. |
| allowThumbnails | `boolean` | `true` | Toggles PDF thumbnails. |
| showSidebar | `boolean` | `false` | Toggles sidebar visibility. Requires `allowSidebar` to be set to `true`. |
| sidebarPosition | `string` | `'right'` | The position of the sidebar. Can be `left` or `right`. |
| sidebarTemplate | `TemplateRef<any>` | `null` | The template for the sidebar. The template context contains the loaded node data. |
| thumbnailsTemplate | `TemplateRef<any>` | `null` | The template for the pdf thumbnails. |
| mimeType | `string` | | MIME type of the file content (when not determined by the filename extension). |
| fileName | `string` | | Content filename. |
| downloadUrl | `string` | `null` | URL to download. |
| maxRetries | `number` | `5` | Number of times the Viewer will retry fetching content Rendition. There is a delay of at least one second between attempts. |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| goBack | `EventEmitter<BaseEvent<any>>` | Emitted when user clicks the 'Back' button. |
| download | `EventEmitter<BaseEvent<any>>` | Emitted when user clicks the 'Download' button. |
| print | `EventEmitter<BaseEvent<any>>` | Emitted when user clicks the 'Print' button. |
| share | `EventEmitter<BaseEvent<any>>` | Emitted when user clicks the 'Share' button. |
| showViewerChange | `EventEmitter<boolean>` | Emitted when the viewer is shown or hidden. |
| extensionChange | `EventEmitter<string>` | Emitted when the filename extension changes. |
| navigateBefore | `EventEmitter<{}>` | Emitted when user clicks 'Navigate Before' ("&lt;") button. |
| navigateNext | `EventEmitter<{}>` | Emitted when user clicks 'Navigate Next' (">") button. |
### Keyboard shortcuts
| Name | Description |
| ---- | ----------- |
| Esc | Close the viewer (overlay mode only). |
| Left | Invoke 'Navigate before' action. |
| Right | Invoke 'Navigate next' action. |
| Ctrl+F | Activate full-screen mode. |
## Details
### Integrating with the Document List component
Below is the most simple integration of the Viewer and
[Document List](../content-services/document-list.component.md) components within your custom component:
```html
<adf-document-list
currentFolderId="-my-"
(preview)="showPreview($event)">
</adf-document-list>
<adf-viewer
[(showViewer)]="showViewer"
[overlayMode]="true"
[fileNodeId]="nodeId">
</adf-viewer>
```
The component controller class implementation might look like the following:
```ts
export class OverlayViewerComponent {
@Input()
showViewer: boolean = false;
nodeId: string;
showPreview(event) {
if (event.value.entry.isFile) {
this.nodeId = event.value.entry.id;
this.showViewer = true;
}
}
}
```
### Custom file parameters
You can provide custom file parameters, for example a value for the `mimeType` or `displayName` when using URL values that have no file names or extensions:
```html
<adf-viewer
[displayName]="fileName"
[allowGoBack]="false"
[mimeType]="mimeType"
[urlFile]="fileUrl">
</adf-viewer>
```
### Supported file formats
The Viewer component consists of separate Views that handle particular types of type families based on either a file extension or a mime type:
- PDF View
- application/pdf
- \*.pdf
- Image View
- image/png
- image/jpeg
- image/gif
- image/bmp
- image/svg+xml
- \*.png
- \*.jpg
- \*.jpeg
- \*.gif
- \*.bpm
- \*.svg
- Text View
- text/plain
- text/csv
- text/xml
- text/html
- application/x-javascript
- \*.txt
- \*.xml
- \*.js
- \*.html
- \*.json
- \*.ts
- Media View
- video/mp4
- video/webm
- video/ogg
- audio/mpeg
- audio/ogg
- audio/wav
- \*.wav
- \*.mp4
- \*.mp3
- \*.webm
- \*.ogg
### Content Renditions
For those extensions and mime types that cannot be natively displayed in the browser, the Viewer will try to fetch the corresponding rendition using the [renditions service api](https://community.alfresco.com/docs/DOC-5879-rendition-service).
For the full list of supported types please refer to: [File types that support preview and thumbnail generation](http://docs.alfresco.com/5.2/references/valid-transformations-preview.html).
### Configuring PDF.js library
Configure your webpack-enabled application with the PDF.js library as follows.
1. Install pdfjs-dist
```sh
npm install pdfjs-dist
```
2. Update `vendors.ts` by appending the following code. This will enable the viewer component
and compatibility mode for all browsers. It will also configure the web worker for the PDF.js
library to render PDF files in the background:
```ts
// PDF.js
require('pdfjs-dist/web/compatibility.js');
const pdfjsLib = require('pdfjs-dist');
pdfjsLib.PDFJS.workerSrc = './pdf.worker.js';
require('pdfjs-dist/web/pdf_viewer.js');
```
3. Update the `plugins` section of the `webpack.common.js` file with the following lines:
```js
new CopyWebpackPlugin([
...
{
from: 'node_modules/pdfjs-dist/build/pdf.worker.js',
to: 'pdf.worker.js'
}
])
```
The Viewer component now should be able to display PDF files.
### Custom toolbar
You can replace the standard viewer toolbar with your own custom implementation:
```html
<adf-viewer>
<adf-viewer-toolbar>
<h1>toolbar</h1>
</adf-viewer-toolbar>
</adf-viewer>
```
Everything you put inside the "adf-viewer-toolbar" tags will be rendered instead of the
standard toolbar.
### Custom toolbar buttons
If you are happy with the custom toolbar's behaviour but want to add some extra buttons
then you can do so as shown in the following example:
```html
<adf-viewer>
<adf-viewer-toolbar-actions>
<button mat-icon-button>
<mat-icon>alarm</mat-icon>
</button>
<button mat-icon-button>
<mat-icon>backup</mat-icon>
</button>
<button mat-icon-button>
<mat-icon>bug_report</mat-icon>
</button>
</adf-viewer-toolbar-actions>
</adf-viewer>
```
The result should look like this:
![Custom Toolbar Actions](../docassets/images/viewer-toolbar-actions.png)
### Custom sidebar
The Viewer component also supports custom sidebar components and layouts.
Set the `allowSidebar` property to `true` to enable this feature.
The custom sidebar can be injected in two different ways:
- using transclusion
- using a template **(only works when using the viewer with fileNodeId)**
#### Using transclusion
```html
<adf-viewer [allowSidebar]="true">
<adf-viewer-sidebar>
<h1>My info</h1>
</adf-viewer-sidebar>
</adf-viewer>
```
Everything you put inside the "adf-viewer-sidebar" tags will be rendered.
#### Using template injection (only works when using the viewer with fileNodeId)
```html
<ng-template let-node="node" #sidebarTemplate>
<adf-content-metadata-card [node]="node"></adf-content-metadata-card>
</ng-template>
<adf-viewer [allowSidebar]="true" [sidebarTemplate]="sidebarTemplate"></adf-viewer>
```
### Custom thumbnails
The PDF viewer comes with its own default list of thumbnails but you can replace this
by providing a custom template and binding to the context property `viewer` to access the PDFJS.PDFViewer
instance.
![PDF thumbnails](../docassets/images/pdf-thumbnails.png)
#### Using template injection
```javascript
import { Component, Input } from '@angular/core';
@Component({
selector: 'custom-thumbnails',
template: '<p> Custom Thumbnails Component </p>'
})
export class CustomThumbnailsComponent {
@Input() pdfViewer: any;
...
}
```
```html
<ng-template #customThumbnailsTemplate let-pdfViewer="viewer">
<custom-thumbnails [pdfViewer]="pdfViewer"></custom-thumbnails>
</ng-template>
<adf-viewer [thumbnailsTemplate]="customThumbnailsTemplate"></adf-viewer>
```
### Custom "Open With" menu
You can enable a custom "Open With" menu by providing at least one action inside the
`adf-viewer-open-with` tag:
```html
<adf-viewer [fileNodeId]="nodeId">
<adf-viewer-open-with>
<button mat-menu-item>
<mat-icon>dialpad</mat-icon>
<span>Option 1</span>
</button>
<button mat-menu-item disabled>
<mat-icon>voicemail</mat-icon>
<span>Option 2</span>
</button>
<button mat-menu-item>
<mat-icon>notifications_off</mat-icon>
<span>Option 3</span>
</button>
</adf-viewer-open-with>
</adf-viewer>
```
![Open with](../docassets/images/viewer-open-with.png)
### Custom "More actions" menu
You can enable a custom "More actions" menu by providing at least one action inside the `adf-viewer-more-actions` tag:
```html
<adf-viewer [fileNodeId]="nodeId">
<adf-viewer-more-actions>
<button mat-menu-item>
<mat-icon>dialpad</mat-icon>
<span>Action One</span>
</button>
<button mat-menu-item disabled>
<mat-icon>voicemail</mat-icon>
<span>Action Two</span>
</button>
<button mat-menu-item>
<mat-icon>notifications_off</mat-icon>
<span>Action Three</span>
</button>
</adf-viewer-more-actions>
</adv-viewer>
```
![More actions](../docassets/images/viewer-more-actions.png)
### Extending the Viewer
You can define your own custom handle to handle other file formats that are not yet supported by
the Viewer component. Below is an example that shows how to use the `adf-viewer-extension`
to handle 3D data files:
```html
<adf-viewer [fileNodeId]="fileNodeId">
<adf-viewer-extension [supportedExtensions]="['obj','3ds']" #extension>
<ng-template let-urlFileContent="urlFileContent" let-extension="extension">
<threed-viewer
[urlFile]="urlFileContent"
[extension]="extension">
</threed-viewer>
</ng-template>
</adf-viewer-extension>
</adf-viewer>
```
Note: you need to add the `ng2-3d-editor` dependency to your `package.json` file to make the example above work.
You can define multiple `adf-viewer-extension` templates if required:
```html
<adf-viewer [fileNodeId]="fileNodeId">
<adf-viewer-extension [supportedExtensions]="['xls','xlsx']" #extension>
<ng-template let-urlFileContent="urlFileContent">
<my-custom-xls-component
urlFileContent="urlFileContent">
</my-custom-xls-component>
</ng-template>
</adf-viewer-extension>
<adf-viewer-extension [supportedExtensions]="['txt']" #extension>
<ng-template let-urlFileContent="urlFileContent" >
<my-custom-txt-component
urlFileContent="urlFileContent">
</my-custom-txt-component>
</ng-template>
</adf-viewer-extension>
</adf-viewer>
```
## See also
- [Document List component](../content-services/document-list.component.md)