diff --git a/docs/document-list.component.md b/docs/document-list.component.md index cb5982ca86..758c86c9b6 100644 --- a/docs/document-list.component.md +++ b/docs/document-list.component.md @@ -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: + +![card-view](docassets/images/document-list-card-view.png) + +Set the `[display]` property to "gallery" to enable card view mode: ```html ``` -![card-view](docassets/images/document-list-card-view.png) + ### 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: ![documentLibrary](docassets/images/documentLibrary.png) @@ -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 ``` -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 ``` -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: ![view-child](docassets/images/viewchild.png) -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 @@ -500,7 +520,8 @@ A custom set of columns can look like the following: ![Custom columns](docassets/images/custom-columns.png) -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 @@ -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 //: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: ![Default empty folder](docassets/images/empty-folder-template-default.png) -This can be changed by means of the custom html template: +However, you can change this by defining your own custom HTML template: ```html @@ -749,17 +772,18 @@ This can be changed by means of the custom html template: ``` -That will give the following output: +This will give the following output: ![Custom empty folder](docassets/images/empty-folder-template-custom.png) ### 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: ![Default no permission](docassets/images/no-permission-default.png) -This can be changed by means of the custom html template: +You can change this by defining your own custom HTML template: ```html @@ -771,14 +795,10 @@ This can be changed by means of the custom html template: ``` -That will give the following output: +This will give the following output: ![Custom no permission](docassets/images/no-permission-custom.png) - - - - ## 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) - +- [Viewer component](viewer.component.md) diff --git a/docs/viewer.component.md b/docs/viewer.component.md index 15e6797851..edd5c25676 100644 --- a/docs/viewer.component.md +++ b/docs/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` | `null` | The template for the sidebar. The template context contains the loaded node data. | -| allowThumbnails | `boolean` | `true` | Enables pdf viewer thumbnails. | -| thumbnailsTemplate | `TemplateRef` | `null` | Custom template content for thumbnails. | +| thumbnailsTemplate | `TemplateRef` | `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. | @@ -84,14 +91,14 @@ Using with file url: | Name | Type | Description | | ---- | ---- | ----------- | -| goBack | `EventEmitter>` | Emitted when user clicks the 'Back' button. | -| download | `EventEmitter>` | Emitted when user clicks the 'Download' button. | -| print | `EventEmitter>` | Emitted when user clicks the 'Print' button. | -| share | `EventEmitter>` | Emitted when user clicks the 'Share' button. | -| showViewerChange | `EventEmitter` | Emitted when the viewer is shown or hidden. | -| extensionChange | `EventEmitter` | Emitted when the filename extension changes. | -| navigateBefore | `EventEmitter<{}>` | Emitted when user clicks 'Navigate Before' ("<") button. | -| navigateNext | `EventEmitter<{}>` | Emitted when user clicks 'Navigate Next' (">") button. | +| goBack | `EventEmitter>` | Emitted when user clicks the 'Back' button. | +| download | `EventEmitter>` | Emitted when user clicks the 'Download' button. | +| print | `EventEmitter>` | Emitted when user clicks the 'Print' button. | +| share | `EventEmitter>` | Emitted when user clicks the 'Share' button. | +| showViewerChange | `EventEmitter` | Emitted when the viewer is shown or hidden. | +| extensionChange | `EventEmitter` | Emitted when the filename extension changes. | +| navigateBefore | `EventEmitter<{}>` | Emitted when user clicks 'Navigate Before' ("<") button. | +| navigateNext | `EventEmitter<{}>` | Emitted when user clicks 'Navigate Next' (">") button. | ### Keyboard shortcuts @@ -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 ``` -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 @@ -252,12 +259,13 @@ You can replace standard viewer toolbar with your custom implementation. ``` -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 @@ -275,19 +283,19 @@ you can do that like in the following example: ``` -You should now see the following result at runtime: +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. -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: ``` -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. ![PDF thumbnails](docassets/images/pdf-thumbnails.png) @@ -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 @@ -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 @@ -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 @@ -418,9 +426,9 @@ Below you can find an example with the use of `adf-viewer-extension` if you can ``` -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 @@ -442,3 +450,7 @@ It is possible to define multiple `adf-viewer-extension` templates: ``` + +## See also + +- [Document List component](document-list.component.md) \ No newline at end of file