mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-2451] Reviewed docs for components (#3055)
This commit is contained in:
Andy Stark
committed by
Eugenio Romano
Eugenio Romano
parent
e627613bc5
commit
487147ca22
@@ -1,6 +1,7 @@
|
||||
---
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-03-09
|
||||
---
|
||||
|
||||
# Document List component
|
||||
@@ -95,21 +96,24 @@ Displays the documents from a repository.
|
||||
|
||||
## Details
|
||||
|
||||
The properties currentFolderId, folderNode and node are the entry initialization properties of the document list. They cannot be used together, so choose the one that suits your use case best.
|
||||
The properties `currentFolderId`, `folderNode` and `node` set the initial folder shown by
|
||||
the Document List. They cannot be used together, so choose the one that suits your use case
|
||||
best.
|
||||
|
||||
### DOM Events
|
||||
|
||||
Below are the DOM events the DocumentList component emits.
|
||||
All of them are `bubbling`, meaning you can handle them in any component up the parent hierarchy, even if DocumentList is wrapped by another component(s).
|
||||
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 | Raised when user clicks the node |
|
||||
| node-dblclick | Raised when user double-clicks the node |
|
||||
| node-select | Raised when user selects a node |
|
||||
| node-unselect | Raised when user unselects a node |
|
||||
| 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, having at least the following properties as part of the `Event.detail` property value:
|
||||
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
|
||||
{
|
||||
@@ -118,7 +122,8 @@ Every event is represented by a [CustomEvent](https://developer.mozilla.org/en/d
|
||||
}
|
||||
```
|
||||
|
||||
Please refer to the [DataTable](datatable.component.md) documentation to find details about additional DOM events the DocumentList component bubbles up from the DataTable.
|
||||
See the [DataTable](datatable.component.md) documentation for further details about
|
||||
the other DOM events that the Document List component bubbles up from the DataTable.
|
||||
|
||||
Below is a basic example of handling DOM events in the parent elements.
|
||||
|
||||
@@ -137,7 +142,12 @@ Below is a basic example of handling DOM events in the parent elements.
|
||||
|
||||
### Card view
|
||||
|
||||
If you want to enable the card view mode you need to set to 'gallery' the input parameter [display] :
|
||||
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
|
||||
@@ -146,18 +156,20 @@ If you want to enable the card view mode you need to set to 'gallery' the input
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
### Pagination strategy
|
||||
|
||||
The Document List by default supports 2 type of pagination, the **finite** and the **infinite** pagination.
|
||||
The Document List by default supports 2 types of pagination: **finite** and **infinite**:
|
||||
|
||||
- With the **finite** pagination you must provide document list with 2 parameters : maxItems and skipCount.
|
||||
- With the **infinite** pagination you must provide documentlist with 3 parameters : enableInfiniteScrolling, maxItems and skipCount.
|
||||
- With **finite** pagination, the Document List needs 2 parameters: `maxItems` and `skipCount`. These set the maximum number of items shown in a single page and the start
|
||||
offset of the first item in the page (ie, the number of items you need to skip to get there).
|
||||
- You can enable **infinite** pagination by setting the same parameters plus an extra third
|
||||
parameter: `enableInfiniteScrolling`.
|
||||
|
||||
### Data Sources
|
||||
|
||||
For the Document List data sources you can use one of the following options:
|
||||
You can use any of the following options to set the folder that the Document List will display:
|
||||
|
||||
#### Node ID
|
||||
|
||||
@@ -171,9 +183,9 @@ You can use one of the well-known reserved aliases:
|
||||
- `-shared-`
|
||||
- `-my-`
|
||||
|
||||
#### DocumentList aliases
|
||||
#### Document List aliases
|
||||
|
||||
The DocumentList component also provides support for the following reserved aliases you can use:
|
||||
The Document List component also provides support for the following reserved aliases:
|
||||
|
||||
- `-trashcan-`,
|
||||
- `-sharedlinks-`
|
||||
@@ -182,16 +194,16 @@ The DocumentList component also provides support for the following reserved alia
|
||||
- `-favorites-`
|
||||
- `-recent-`
|
||||
|
||||
Note that due to specific origin of the data the sources above do not support navigation.
|
||||
You may want handling single and double clicks yourself to perform navigation to other sources.
|
||||
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.
|
||||
|
||||
DocumentList component supports default presets for all the custom sources mentioned earlier.
|
||||
If you don't provide any custom column definition utilizing "data-columns" component,
|
||||
then a default preset will be automatically used at runtime.
|
||||
The Document List component supports default presets for all the custom sources mentioned earlier.
|
||||
If you don't provide any custom column definition with the [Data Column](#custom-columns)
|
||||
component then a default preset will be automatically used at runtime.
|
||||
|
||||
Some of the presets use the Location columns that allow you to navigate to the parent folder of the node,
|
||||
for instance navigating from the "Favorite" node to the folder containing it.
|
||||
There's a possibility to set the default location format using "locationFormat" property, to avoid re-defining entire columns layout.
|
||||
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:
|
||||
|
||||
@@ -301,15 +313,19 @@ Default layout:
|
||||
|
||||
### Setting default folder
|
||||
|
||||
You can set current folder path by assigning a value for `currentFolderId` property.
|
||||
It can be either one of the well-known locations as **-root-**, **-shared-** or **-my-** or a node ID (guid).
|
||||
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 when it is needed to set default path based on relative string value rather than node ID.
|
||||
For example when folder name or path is static but its underlying ID is not (i.e. created manually by admin).
|
||||
In this case you can use `alfresco-js-api` to get node details based on its relative path.
|
||||
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.
|
||||
|
||||
Let's try setting default folder to `/Sites/swsdp/documentLibrary` without knowing it's ID beforehand.
|
||||
For the sake of simplicity example below shows only main points you may need to pay attention to:
|
||||
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';
|
||||
@@ -340,8 +356,8 @@ export class FilesComponent implements OnInit {
|
||||
}
|
||||
```
|
||||
|
||||
We've added `console.log(node)` for the `getNodeInfo` callback just for study and debug purposes.
|
||||
It helps examining other valuable information you can have access to if needed:
|
||||
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:
|
||||
|
||||
|
||||
|
||||
@@ -349,7 +365,7 @@ It helps examining other valuable information you can have access to if needed:
|
||||
|
||||
### Calling DocumentList api directly
|
||||
|
||||
Typically you will be binding DocumentList properties to your application/component class properties:
|
||||
Typically you will bind Document List properties to your application/component class properties:
|
||||
|
||||
```html
|
||||
<adf-document-list
|
||||
@@ -357,7 +373,7 @@ Typically you will be binding DocumentList properties to your application/compon
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
with the underlying class being implemented similar to the following one:
|
||||
...with the underlying class implemented as in the following example:
|
||||
|
||||
```ts
|
||||
@Component(...)
|
||||
@@ -368,12 +384,12 @@ export class MyAppComponent {
|
||||
}
|
||||
```
|
||||
|
||||
However there may be scenarios that require you direct access to DocumentList apis.
|
||||
You can get reference to the DocumentList instance by means of Angular **Component Interaction** API.
|
||||
See more details in [Parent calls a ViewChild](https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-view-child)
|
||||
section of the official docs.
|
||||
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.
|
||||
|
||||
Here's an example of getting reference:
|
||||
Below is an example of getting a reference:
|
||||
|
||||
```html
|
||||
<adf-document-list
|
||||
@@ -382,7 +398,7 @@ Here's an example of getting reference:
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
Note the `#documentList` ID we've just added to be able referencing this component later on.
|
||||
Note that the `#documentList` ID allows the component to be referenced elsewhere.
|
||||
|
||||
```ts
|
||||
import { ViewChild, AfterViewInit } from '@angular/core';
|
||||
@@ -402,11 +418,11 @@ export class MyAppComponent implements AfterViewInit {
|
||||
}
|
||||
```
|
||||
|
||||
Example above should produce the following browser console output:
|
||||
The example above should produce the following browser console output:
|
||||
|
||||
|
||||
|
||||
Now you are able to access DocumentList properties or to call methods directly.
|
||||
Now you can access Document List properties or call methods directly:
|
||||
|
||||
```ts
|
||||
// print currently displayed folder node object to console
|
||||
@@ -414,13 +430,19 @@ console.log(documentList.folderNode);
|
||||
```
|
||||
|
||||
**Important note**:
|
||||
It is important accessing child components at least at the `AfterViewInit` state.
|
||||
Any UI click (buttons, links, etc.) event handlers are absolutely fine. This cannot be `ngOnInit` event though.
|
||||
You can get more details in [Component lifecycle hooks](https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html) article.
|
||||
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
|
||||
|
||||
DocumentList component assigns an instance of `MinimalNode` type (`alfresco-js-api`) as a data context of each row.
|
||||
The Document List component assigns an instance of
|
||||
[MinimalNode](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/MinimalNode.md]
|
||||
(defined in the [Alfresco JS API](https://github.com/Alfresco/alfresco-js-api)) as the data context
|
||||
for each row. You can make use of the properties of this object when defining custom columns:
|
||||
|
||||
```js
|
||||
export interface MinimalNode {
|
||||
@@ -440,8 +462,6 @@ export interface MinimalNode {
|
||||
}
|
||||
```
|
||||
|
||||
_See more details in [alfresco-js-api](https://github.com/Alfresco/alfresco-js-api/blob/master/index.d.ts) repository._
|
||||
|
||||
Binding to nested properties is also supported. You can define a column key as a property path similar to the following:
|
||||
|
||||
```text
|
||||
@@ -465,10 +485,10 @@ Here's a short example:
|
||||
|
||||
### Custom columns
|
||||
|
||||
It is possible to reorder, extend or completely redefine data columns displayed by the component.
|
||||
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 can look like the following:
|
||||
A custom set of columns might look like the following:
|
||||
|
||||
```html
|
||||
<adf-document-list ...>
|
||||
@@ -500,7 +520,8 @@ A custom set of columns can look like the following:
|
||||
|
||||
|
||||
|
||||
You can also use HTML-based schema declaration used by DataTable, TaskList and other components:
|
||||
You can also use the HTML-based schema declaration used by
|
||||
[DataTable](datatable.component.md), [Task List](task-list.component.md) and other components:
|
||||
|
||||
```html
|
||||
<adf-datatable [data]="data" ...>
|
||||
@@ -518,21 +539,23 @@ You can also add tooltips, styling, automatic column title translation and other
|
||||
|
||||
### Date Column
|
||||
|
||||
For `date` column type the [DatePipe](https://angular.io/docs/ts/latest/api/common/DatePipe-class.html) formatting is used.
|
||||
For a full list of available `format` values please refer to [DatePipe](https://angular.io/docs/ts/latest/api/common/DatePipe-class.html) documentation.
|
||||
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 additional `timeAgo` value for the `format` property.
|
||||
That triggers the date values to be rendered using popular ["Time from now"](https://momentjs.com/docs/#/displaying/fromnow/) format.
|
||||
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 is used to display a clickable location link pointing to the parent path of the node.
|
||||
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 link location_
|
||||
_For granular permissions, the Location Column may or may not the render link location_
|
||||
|
||||
You are going to use it with custom navigation or when displaying content from the sources like:
|
||||
You would normally use this with custom navigation or when displaying content from sources like:
|
||||
|
||||
- Sites
|
||||
- My Sites
|
||||
@@ -541,10 +564,12 @@ You are going to use it with custom navigation or when displaying content from t
|
||||
- Favorites
|
||||
- Trashcan
|
||||
|
||||
or any other location that needs nagivating to the node parent folder easily.
|
||||
...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 be pointing to URL based on the `format` property value with the node `id` value appended:
|
||||
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
|
||||
@@ -573,7 +598,8 @@ All links rendered in the column above will have an address mapped to `/files`:
|
||||
|
||||
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)
|
||||
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](context-menu.directive.md) from the
|
||||
@@ -598,15 +624,10 @@ This single extra line in the template enables context menu items for documents
|
||||
|
||||
### Navigation mode
|
||||
|
||||
By default DocumentList component uses 'double-click' mode for navigation.
|
||||
That means user will see the contents of the folder by double-clicking its name
|
||||
or icon (similar to Google Drive behaviour). However it is possible switching to
|
||||
other modes, like single-click navigation for example.
|
||||
|
||||
The following navigation modes are supported:
|
||||
|
||||
- **click**
|
||||
- **dblclick**
|
||||
By default, the Document List component uses 'double-click' mode for navigation.
|
||||
That means that the user will see the contents of the folder when they double-click its name
|
||||
or icon (in a similar manner to Google Drive). However, there is also a single-click mode that
|
||||
may be sometimes be useful.
|
||||
|
||||
The following example switches navigation to single clicks:
|
||||
|
||||
@@ -620,8 +641,9 @@ The following example switches navigation to single clicks:
|
||||
|
||||
### Custom row filter
|
||||
|
||||
You can create a custom row filter implementation that returns `true` if row should be displayed or `false` to hide it.
|
||||
Typical row filter implementation is a function that receives `ShareDataRow` as parameter:
|
||||
You can create a custom row filter function that returns `true` if the row should be
|
||||
displayed or `false` if it should be hidden.
|
||||
A typical row filter implementation receives a `ShareDataRow` object as a parameter:
|
||||
|
||||
```ts
|
||||
myFilter(row: ShareDataRow): boolean {
|
||||
@@ -650,7 +672,7 @@ export class View1 {
|
||||
|
||||
constructor() {
|
||||
|
||||
// This filter will make document list show only folders
|
||||
// This filter will make the document list show only folders
|
||||
|
||||
this.folderFilter = (row: ShareDataRow) => {
|
||||
let node = row.node.entry;
|
||||
@@ -667,12 +689,12 @@ export class View1 {
|
||||
|
||||
### Custom image resolver
|
||||
|
||||
You can create a custom image resolver implementation and take full control over how folder/file icons and thumbnails
|
||||
are resolved and what document list should display.
|
||||
You can create a custom image resolver function to manage the way folder/file icons and thumbnails
|
||||
are resolved (ie, which image is shown for which item).
|
||||
|
||||
**Image resolvers are executed only for columns of the `image` type.**
|
||||
**Note:** Image resolvers are executed only for columns of the `image` type.
|
||||
|
||||
Typical image resolver implementation is a function that receives `DataRow` and `DataColumn` as parameters:
|
||||
A typical image resolver implementation receives `DataRow` and `DataColumn` objects as parameters:
|
||||
|
||||
```ts
|
||||
myImageResolver(row: DataRow, col: DataColumn): string {
|
||||
@@ -680,7 +702,8 @@ myImageResolver(row: DataRow, col: DataColumn): string {
|
||||
}
|
||||
```
|
||||
|
||||
Your function can return `null` or `false` values to fallback to default image resolving behavior.
|
||||
Your function can return `null` or `false` values to fall back to the default image
|
||||
resolving behavior.
|
||||
|
||||
_Note that for the sake of simplicity the example code below was reduced to the main points of interest only._
|
||||
|
||||
@@ -733,11 +756,11 @@ export class View1 {
|
||||
|
||||
### Custom 'empty folder' template
|
||||
|
||||
By default DocumentList provides the following content for the empty folder:
|
||||
By default, the Document List provides the following content for the empty folder:
|
||||
|
||||
|
||||
|
||||
This can be changed by means of the custom html template:
|
||||
However, you can change this by defining your own custom HTML template:
|
||||
|
||||
```html
|
||||
<adf-document-list ...>
|
||||
@@ -749,17 +772,18 @@ This can be changed by means of the custom html template:
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
That will give the following output:
|
||||
This will give the following output:
|
||||
|
||||
|
||||
|
||||
### Custom 'permission denied' template
|
||||
|
||||
By default DocumentList provides the following content for permission denied:
|
||||
By default, the Document List shows the following content when permission
|
||||
is denied:
|
||||
|
||||
|
||||
|
||||
This can be changed by means of the custom html template:
|
||||
You can change this by defining your own custom HTML template:
|
||||
|
||||
```html
|
||||
<adf-document-list ...>
|
||||
@@ -771,14 +795,10 @@ This can be changed by means of the custom html template:
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
That will give the following output:
|
||||
This will give the following output:
|
||||
|
||||
|
||||
|
||||
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
|
||||
|
||||
<!-- seealso start -->
|
||||
|
||||
## See also
|
||||
|
||||
- [Datatable component](datatable.component.md)
|
||||
@@ -796,4 +816,4 @@ That will give the following output:
|
||||
- [Dropdown breadcrumb component](dropdown-breadcrumb.component.md)
|
||||
- [Permissions style model](permissions-style.model.md)
|
||||
- [Version manager component](version-manager.component.md)
|
||||
<!-- seealso end -->
|
||||
- [Viewer component](viewer.component.md)
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-03-07
|
||||
---
|
||||
# Viewer component
|
||||
|
||||
@@ -14,19 +15,25 @@ See it live: [Viewer Quickstart](https://embed.plnkr.co/iTuG1lFIXfsP95l6bDW6/)
|
||||
|
||||
- [Properties](#properties)
|
||||
- [Events](#events)
|
||||
- [Keyboard shortcuts](#keyboard-shortcuts)
|
||||
|
||||
- [Details](#details)
|
||||
|
||||
- [Integrating with DocumentList component](#integrating-with-documentlist-component)
|
||||
- [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)
|
||||
- [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:
|
||||
@@ -70,11 +77,11 @@ Using with file url:
|
||||
| canNavigateBefore | `boolean` | `true` | Toggles the "before" ("<") 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. |
|
||||
| allowThumbnails | `boolean` | `true` | Enables pdf viewer thumbnails. |
|
||||
| thumbnailsTemplate | `TemplateRef<any>` | `null` | Custom template content for thumbnails. |
|
||||
| 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. |
|
||||
@@ -104,9 +111,10 @@ Using with file url:
|
||||
|
||||
## Details
|
||||
|
||||
### Integrating with DocumentList component
|
||||
### Integrating with the Document List component
|
||||
|
||||
Below is the most simple integration of Viewer and DocumentList components within your custom component:
|
||||
Below is the most simple integration of the Viewer and
|
||||
[Document List](document-list.component.md) components within your custom component:
|
||||
|
||||
```html
|
||||
<adf-document-list
|
||||
@@ -121,7 +129,7 @@ Below is the most simple integration of Viewer and DocumentList components withi
|
||||
</adf-viewer>
|
||||
```
|
||||
|
||||
And the component controller class implementation can look like the following:
|
||||
The component controller class implementation might look like the following:
|
||||
|
||||
```ts
|
||||
export class OverlayViewerComponent {
|
||||
@@ -199,21 +207,23 @@ The Viewer component consists of separate Views that handle particular types of
|
||||
|
||||
### Content Renditions
|
||||
|
||||
For those extensions and mime types that cannot be natively displayed in the browser, the Viewer will try to fetch corresponding rendition by utilising the [renditions service api](https://community.alfresco.com/docs/DOC-5879-rendition-service).
|
||||
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
|
||||
|
||||
In order to configure your webpack-enabled application with the PDF.js library please follow the next steps.
|
||||
Configure your webpack-enabled application with the PDF.js library as follows.
|
||||
|
||||
Install pdfjs-dist
|
||||
1. Install pdfjs-dist
|
||||
|
||||
```sh
|
||||
npm install pdfjs-dist
|
||||
```
|
||||
|
||||
Update `vendors.ts` by appending the following:
|
||||
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
|
||||
@@ -223,10 +233,7 @@ pdfjsLib.PDFJS.workerSrc = './pdf.worker.js';
|
||||
require('pdfjs-dist/web/pdf_viewer.js');
|
||||
```
|
||||
|
||||
The code above enables the "viewer" component and "compatibility" mode for all the browsers.
|
||||
It also configures the web worker for PDF.js library to render PDF files in the background.
|
||||
|
||||
Update the `plugins` section of the `webpack.common.js` file with the next lines:
|
||||
3. Update the `plugins` section of the `webpack.common.js` file with the following lines:
|
||||
|
||||
```js
|
||||
new CopyWebpackPlugin([
|
||||
@@ -238,11 +245,11 @@ new CopyWebpackPlugin([
|
||||
])
|
||||
```
|
||||
|
||||
The Viewer component now should be able displaying PDF files.
|
||||
The Viewer component now should be able to display PDF files.
|
||||
|
||||
### Custom toolbar
|
||||
|
||||
You can replace standard viewer toolbar with your custom implementation.
|
||||
You can replace the standard viewer toolbar with your own custom implementation:
|
||||
|
||||
```html
|
||||
<adf-viewer>
|
||||
@@ -252,12 +259,13 @@ You can replace standard viewer toolbar with your custom implementation.
|
||||
</adf-viewer>
|
||||
```
|
||||
|
||||
Everything you put inside the "adf-viewer-toolbar" tags is going to be rendered instead of the toolbar.
|
||||
Everything you put inside the "adf-viewer-toolbar" tags will be rendered instead of the
|
||||
standard toolbar.
|
||||
|
||||
### Custom toolbar buttons
|
||||
|
||||
If you are okay with the custom toolbar behaviour but want to add some extra buttons,
|
||||
you can do that like in the following example:
|
||||
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>
|
||||
@@ -275,19 +283,19 @@ you can do that like in the following example:
|
||||
</adf-viewer>
|
||||
```
|
||||
|
||||
You should now see the following result at runtime:
|
||||
The result should look like this:
|
||||
|
||||
|
||||
|
||||
### Custom sidebar
|
||||
|
||||
The Viewer component also supports custom sidebar components and layouts.
|
||||
The `allowSidebar` property should be set to `true` to enable this feature.
|
||||
Set the `allowSidebar` property to `true` to enable this feature.
|
||||
|
||||
Custom sidebar for the viewer can be injected in two different ways:
|
||||
The custom sidebar can be injected in two different ways:
|
||||
|
||||
- using transclusion
|
||||
- using template **(only works when using the viewer with fileNodeId)**
|
||||
- using a template **(only works when using the viewer with fileNodeId)**
|
||||
|
||||
#### Using transclusion
|
||||
|
||||
@@ -299,7 +307,7 @@ Custom sidebar for the viewer can be injected in two different ways:
|
||||
</adf-viewer>
|
||||
```
|
||||
|
||||
Everything you put inside the "adf-viewer-sidebar" tags is going to be rendered.
|
||||
Everything you put inside the "adf-viewer-sidebar" tags will be rendered.
|
||||
|
||||
#### Using template injection (only works when using the viewer with fileNodeId)
|
||||
|
||||
@@ -312,8 +320,8 @@ Everything you put inside the "adf-viewer-sidebar" tags is going to be rendered.
|
||||
|
||||
### Custom thumbnails
|
||||
|
||||
By default, the pdf viewer comes with its own thumbnails list but this can be replaced
|
||||
by providing a custom template and binding to context property `viewer` to access PDFJS.PDFViewer
|
||||
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.
|
||||
|
||||
|
||||
@@ -344,7 +352,8 @@ export class CustomThumbnailsComponent {
|
||||
|
||||
### Custom "Open With" menu
|
||||
|
||||
You can enable custom "Open With" menu by providing at least one action inside the "adf-viewer-open-with" tag:
|
||||
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">
|
||||
@@ -371,7 +380,7 @@ You can enable custom "Open With" menu by providing at least one action inside t
|
||||
|
||||
### Custom "More actions" menu
|
||||
|
||||
You can enable custom "More actions" menu by providing at least one action inside the "adf-viewer-more-actions" tag:
|
||||
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">
|
||||
@@ -398,10 +407,9 @@ You can enable custom "More actions" menu by providing at least one action insid
|
||||
|
||||
### Extending the Viewer
|
||||
|
||||
If you want to handle other file formats that are not yet supported by the Viewer component,
|
||||
you can define your own custom handler.
|
||||
|
||||
Below you can find an example with the use of `adf-viewer-extension` if you can handle 3d files
|
||||
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">
|
||||
@@ -418,9 +426,9 @@ Below you can find an example with the use of `adf-viewer-extension` if you can
|
||||
</adf-viewer>
|
||||
```
|
||||
|
||||
Note: you need adding `ng2-3d-editor` dependency to your `package.json` file to make the example above work.
|
||||
Note: you need to add the `ng2-3d-editor` dependency to your `package.json` file to make the example above work.
|
||||
|
||||
It is possible to define multiple `adf-viewer-extension` templates:
|
||||
You can define multiple `adf-viewer-extension` templates if required:
|
||||
|
||||
```html
|
||||
<adf-viewer [fileNodeId]="fileNodeId">
|
||||
@@ -442,3 +450,7 @@ It is possible to define multiple `adf-viewer-extension` templates:
|
||||
</adf-viewer-extension>
|
||||
</adf-viewer>
|
||||
```
|
||||
|
||||
## See also
|
||||
|
||||
- [Document List component](document-list.component.md)
|
||||
Reference in New Issue
Block a user