Custom viewer extension documentation (#2292)

docs/abn-tree.yml

@@ -42,6 +42,7 @@
       - how-to-create-your-first-extension.md: How to create your first extension
       - content-metadata.md: How to customize Content Metadata
       - file-lists.md: How to customize File lists
-      - file-preview.md: How to customize File Preview
+      - file-preview.md: How to call File Preview from a plugin
+      - custom-viewer.md: How to customize File Viewer
       - search-form.md: How to customize The Search Form
 - help.md: 'Get help'

docs/extending/extensibility-features.md

@@ -19,6 +19,7 @@ You can create plugins that change, toggle, or extend the following areas:
   - buttons
   - menu buttons
   - separators
+- File viewer  
 - Viewer actions
   - "Open With" entries
   - toolbar entries

docs/tutorials/README.md

@@ -14,6 +14,7 @@ Learn more about developing with the Alfresco Content Application.
 - [How to create your first extension](/tutorials/how-to-create-your-first-extension)
 - [How to install an existing extension](/tutorials/how-to-install-an-existing-extension)
 - [Custom Route](/tutorials/custom-route)
+- [Custom Viewer](/tutorials/custom-viewer)
 - [Dialog Actions](/tutorials/dialog-actions)
 - [File Preview](/tutorials/file-preview)
 - [File Lists](/tutorials/file-lists)

docs/tutorials/custom-viewer.md

@@ -0,0 +1,85 @@
+---
+Title: Custom file preview
+---
+
+## Custom file preview
+
+Supports dynamically-loaded viewer preview extensions.
+
+See the [ACA monaco extension](https://github.com/eromano/aca-monaco-extension) for
+an example of a real working viewer extension project.
+
+## Class members
+
+### Properties
+
+| Name | Type | Default value | Description |
+| ---- | ---- | ------------- | ----------- |
+| extension | `string` |  | File extension (.jpg, .png, etc) for the viewer. |
+| id | `string` |  | ID string of the component to preview. |
+| node | `Node` |  | Node containing the content to display. |
+| url | `string` |  | URL of the content in the repository. |
+
+## Details
+
+To create your custom extension viewer you need to create the following files in a separate project:
+
+The Module needs to declare the ID of your extension:
+
+```ts
+export class YourExtensionViewerModule {
+  constructor(extensions: ExtensionService) {
+    extensions.setComponents({
+      'your-extension.main.component': YourExtensionViewerComponent
+    });
+  }
+}
+```
+
+Your extension contains the business logic:
+
+```ts
+import { Node } from '@alfresco/js-api';
+import { ViewerExtensionInterface } from '@alfresco/adf-extensions';
+
+@Component({
+  selector: 'your-extension-viewer',
+  template: '<div> This is your custom extension viewer template</div>',
+  styleUrls: ['./your-extension-view.component.css'],
+  encapsulation: ViewEncapsulation.None
+})
+export class YourExtensionViewerComponent implements ViewerExtensionInterface {
+
+  showToolbar = true;
+
+  @Input()
+  url: string;
+
+  @Input()
+  node: Node;
+  
+  
+  ....YOUR CUSTOM LOGIC
+}
+```
+
+You also need to provide in your `app.extension.json` its details:
+
+```JSON
+{
+  "$version": "1.0.0",
+  "$name": "my viewer extension",
+  "$description": "my viewer  plugin",
+  "features": {
+    "viewer": {
+      "content": [
+        {
+          "id": "dev.tools.viewer.viewer",
+          "fileExtension": ["png", "jpg"],
+          "component": "your-extension.main.component"
+        }
+      ]
+    }
+  }
+}
+```